RUPAL FÜR FORTGESCHRITTENE · Fortgeschrittenenschulung –weiterführendes Arbeiten mit Drupal...

DRUPAL FÜR FORTGESCHRITTENE

Fortgeschrittenenschulung – weiterführendes Arbeiten mit Drupal

Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)


HTML- / CSS-Crashkurs

Barrierefreiheit

Suchmaschinenoptimierung (SEO)

Inhaltstypen

Erweiterte Funktionen

Übungen

INHALTE



Auszeichnungssprache zur Strukturierung

digitaler Dokumente

Texte, Bilder, Hyperlinks, …

Grundlage des WWW

Darstellung im Browser

Semantische Strukturierung, keine Formatierung

Visuelle Darstellung über CSS (Cascading Style

Sheets)


HTML – HYPERTEXT MARKUP LANGUAGE



HTML-SYNTAX

Text erhält durch Auszeichnungen seine Struktur

HTML-Elemente meistens durch ein Tag-Paar

markiert

Start-Tag beginnt mit <, gefolgt vom Elementname,

endet mit >

End-Tag beginnt mit </, Rest analog zum Start-Tag

HTML-Elemente können auch Attribute enthalten

Klasse, Ziel, Beschreibung, …


<html>

<head> <!–- Kopfbereich einer HTML-Seite -->

<title>Titel der Webseite</title>

<!– weitere Angaben wie Meta-Daten -->

</head>

<body> <!–- Inhaltsbereich einer HTML-Seite -->

<h1>Überschrift der ersten Ordnung</h1>

<p>Ein Absatz mit dem Inhalt der Website.</p>

<h2>Überschrift der zweiten Ordnung</h2>

<p>Ein weiterer Absatz mit einem <a href=„URL“

title=„Linktitel“ target=„Ziel“>Hyperlink</a>.</p>

</body>

</html>


HTML-STRUKTUR


CSS = gestufte Gestaltungsbögen

Gestaltungsanweisungen werden mit CSS erstellt

Einsatz im Zusammenhang mit HTML und XML

Ziel: Darstellungsvorgaben weitgehend von

Inhalten trennen

Idealerweise in separaten CSS-Dateien ausgelagert

HTML-Elemente können z.B. über Klassen oder

IDs identifiziert werden


CSS – CASCADING STYLE SHEETS


Anweisung

{

Eigenschaft 1: Wert A;

Eigenschaft 2: Wert B;

}

Beispiel:

#content

{

margin: 20px 20px 20px 20px;

color: #d2691e;

}


AUFBAU VON CSS-ANWEISUNGEN


<html>

<head> <!–- Kopfbereich einer HTML-Seite -->

<title>Titel der Webseite</title>

<link rel="stylesheet" href="style.css„ />

</head>

<body> <!–- Inhaltsbereich einer HTML-Seite -->

<div id=„content“>

<h1>Überschrift der ersten Ordnung</h1>

<p>Ein Absatz mit dem Inhalt der Website.</p>

<h2>Überschrift der zweiten Ordnung</h2>

<p>Ein weiterer Absatz mit einem <a href=„URL“ title=„Linktitel“

target=„Ziel“>Hyperlink</a>.</p>

</div>

</body>

</html>


HTML-STRUKTUR MIT CSS-ANGABEN


HyperText Markup Language

HTML-Syntax

HTML-Struktur

Cascading Style Sheets

CSS-Anweisungen


FRAGEN ZU HTML/CSS?

Barrierefreiheit

„Barrierefreies Webdesign ist die Kunst,

Webseiten so zu gestalten, dass jeder sie

nutzen und lesen kann.“

Quelle: http://www.barrierefreies-webdesign.de/


BARRIEREFREIHEIT

http://www.barrierefreies-webdesign.de/

Barrierefreiheit

Schneller und unkomplizierter Zugriff

Zugänglichkeit für Menschen mit und ohne

Behinderungen sowie Webcrawlern

Prinzipien:

Wahrnehmbarkeit

Verständlichkeit der Inhalte

Bedienbarkeit

Navigation der Website


BARRIEREARMES INTERNET

Barrierefreiheit

= Barrierefreie-Informationstechnik-Verordnung

Verordnung zur Schaffung barrierefreier

Informationstechnik nach dem

Behindertengleichstellungsgesetz

Ergänzung des Behindertengleichstellungsgesetzes

(BGG)

Zugang für behinderte Menschen

(im Sinne des § 3 des Behindertengleichstellungs-

gesetzes) ermöglichen/erleichtern

Gilt für alle Internetauftritte der Bundesverwaltung


BITV 2.0

Barrierefreiheit

Sachsen ist BITV-freie Zone

Gesetz zur Verbesserung der Integration von Menschen mit Behinderungen im Freistaat Sachsen (Sächsisches Integrationsgesetz – SächsIntegrG), gültig ab 2005.

§ 7 Barrierefreie InformationstechnikDie Behörden und sonstigen öffentlichen Stellen des Freistaates Sachsen gestalten ihre Internetauftritte und -angebote sowie die von ihnen zur Verfügung gestellten graphischen Programmoberflächen, die mit Mitteln der Informationstechnik dargestellt werden, schrittweise technisch so, dass sie auch von Menschen mit Behinderungen grundsätzlich uneingeschränkt genutzt werden können.


BITV 2.0

Barrierefreiheit

BITV Bedingung 2.4.6 Beschreibungen

Überschriften und Label (Beschriftungen)

kennzeichnen das Thema oder den Zweck.

BITV Bedingung 2.4.10 Abschnittsüberschriften

Es sind Abschnittsüberschriften zu verwenden, die

den Inhalt weiter strukturieren.

HTML-Beispiel:

<h2>Überschrift der Größe 2</h2>

<h3>Überschrift der Größe 3</h3>


ÜBERSCHRIFTEN

Barrierefreiheit

Anlage 2 der BITV 2.0, Teil 2

Inhalte sind durch Absätze und Überschriften logisch

zu strukturieren. Aufzählungen mit mehr als drei

Punkten sind durch Listen zu gliedern.

HTML-Beispiel: ungeordnete Liste

<ul>

<li>Ein Aufzählungspunkt</li>

<li>Noch ein Aufzählungpunkt</li>

<li>Aller guten Dinge sind drei</li>

</ul>


LISTEN

Barrierefreiheit

BITV Bedingung 1.3.2 Aussagekräftige Reihenfolge

Wenn die Reihenfolge, in der der Inhalt präsentiert wird,

Auswirkungen auf dessen Bedeutung hat, ist die richtige

Lese-Reihenfolge durch Programme erkennbar.

BITV Bedingung 1.3.3 Sensorische Merkmale

Anweisungen zum Verständnis und zur Nutzung des

Inhalts stützen sich nicht ausschließlich auf sensorische

Merkmale der Elemente wie z. B. Form, Größe, visuelle

Platzierung, Orientierung oder Ton.


TABELLEN

Barrierefreiheit

HTML-Beispiel:

<table>

<thead>

<tr>

<th>Spaltenüberschrift 1</th>

<th>Spaltenüberschrift 2</th>

</tr>

</thead>

<tbody>

<tr>

<td>Tabelleninhalt in Spalte 1</td>

<td>Tabelleninhalt in Spalte 2</td>

</tr>

</tbody>

</table>


TABELLEN

Spaltenüberschrift 1 Spaltenüberschrift 2

Tabelleninhalt in

Spalte 1

Tabelleninhalt in

Spalte 2

Barrierefreiheit

BITV Bedingung 1.1.1 Nicht-Text-Inhalte

Für jeden Nicht-Text-Inhalt, der dem Nutzer oder der

Nutzerin präsentiert wird, ist eine Text-Alternative

bereitzustellen, die den Zweck dieses Inhalts erfüllt.

BITV Bedingung 1.4.9 Schriftgrafiken

Schriftgrafiken werden ausschließlich zur Dekoration

verwendet oder in Fällen, in denen eine bestimmte

Textpräsentation eine wesentliche Voraussetzung für

die Vermittlung der Informationen ist.


BILDER

Barrierefreiheit

HTML-Beispiel:

<img src=„/upload.wikipedia/…“

alt=„Die Nahaufnahme des linken

Endes einer Braillezeile zeigt

das schwarze Kunststoffgehäuse,

links drei Funktionstasten,

daneben einige 8-Punkt-Braille-

Elemente. Diese zeigen mit ihren

teilweise deutlich sichtbar

angehobenen weißen Stößeln

folgende Zeichen: zwei

Leerzeichen, dann die Zeichen

P56, P136, P123 und P12345678 und

weitere Leerzeichen.“

title=„Brailledisplay“ />


BILDER

Quelle:

http://upload.wikimedia.org/wikipedia/commons/0/06/R

efreshable_Braille_display.jpg

Brailledisplay

http://upload.wikimedia.org/wikipedia/commons/0/06/Refreshable_Braille_display.jpg

Barrierefreiheit

BITV Bedingung 2.4.9 Zweck eines Links

Ziel und Zweck eines Links sind aus dem Linktext

selbst ersichtlich.

HTML-Beispiel:

<a href=„Adresse“ target=„Ziel des Links“

title=„Zweck des Links“>verlinktes Element</a>


LINKS

Barrierefreiheit

Bildschirmleseprogramm für

Blinde und Sehbehinderte

Zwei Arten:

Akustisch [Lautsprecher]

Taktil [Braillezeile]

Synthetische Sprache wirkt

monoton


SCREENREADER

Quelle:

http://upload.wikimedia.org/wikipedia/commons/0/06/R

efreshable_Braille_display.jpg

Brailledisplay

http://upload.wikimedia.org/wikipedia/commons/0/06/Refreshable_Braille_display.jpg

Barrierefreiheit

Alle dargestellten Elemente werden ausgegeben

Menüs, Auswahlboxen, Überschriften, Hervorhebungen…

Elemente werden interpretiert und sprachlich

ausgegeben

Z.B. <img src=„Bildquelle“ alt=„Alternativer

Titel“ />

Navigation zwischen Überschriften mittels H-Taste

möglich

Navigation zwischen Blöcken mittels Tab-Taste

möglich


SCREENREADER: FUNKTIONSWEISE

Barrierefreiheit

Name Funktion

Max Mustermann Otto Normalverbraucher

Erika Mustermann Personalausweisbeauftragte

Maria Musterfrau Führerscheinbeauftragte


SCREENREADER: TABELLEN

(Überschrift 2) Name <Pfeil nach unten> (Überschrift 2)

Funktion <Pfeil nach unten> Max (fett) Mustermann (fett

Ende) – Otto Normalverbraucher – Erika Mustermann –

Personalausweisbeauftragte – Maria Musterfrau –

Führerscheinbeauftragte

Tabellen werden von links nach rechts und von oben

nach unten gelesen; kein Hinweis beim Zeilenwechsel

Barrierefreiheit


SCREENREADER: VORLESEBEISPIEL

Screenshot von: http://de.wikipedia.org/wiki/Braillezeile

http://de.wikipedia.org/wiki/Braillezeile

<h1>Braillzeile</h1>

<a href=„/wiki/Datei:…“ title=„Nahaufnahme“>

<img src=„/upload.wikipedia/…“ alt=„Die Nahaufnahme des

linken Endes einer Braillezeile zeigt das schwarze

Kunststoffgehäuse, links drei Funktionstasten, daneben

einige 8-Punkt-Braille-Elemente. Diese zeigen mit ihren

teilweise deutlich sichtbar angehobenen weißen Stößeln

folgende Zeichen: zwei Leerzeichen, dann die Zeichen P56,

P136, P123 und P12345678 und weitere Leerzeichen.“

title=„Nahaufnahme“ /></a>

<p>Die <b>Braillezeile</b>, kurz <b>Zeile</b>, oder

<b>Brailledisplay</b> ist ein <a href=„Adresse“ title=„

Computer“>Computer</a>-Ausgabegerät für <a href=„Adresse“

title=„Blindheit“>blinde</a> Menschen, das Zeichen in <a

href=„Adresse“ title=„Brailleschrift“>Brailleschrift</a>

darstellt. Üblicherweise werden sie durch Screenreader

angesteuert, die Zeichen in ausgewählten

Bildschirmbereichen auslesen und in <a href=„Adresse“

title=„Computerbraille“>Computerbraille</a> darstellen.

Dadurch können Blinde große Teile der Standardsoftware

benutzen und selbständig am Computer arbeiten.</p>

<p>[…]</p>

Barrierefreiheit


SCREENREADER: VORLESEBEISPIEL

Barrierefreiheit

Barrierearmes Internet

BITV 2.0

HTML-Elemente

Screenreader


FRAGEN ZUR BARRIEREFREIHEIT?


SEO-Maßnahmen

Webinhalte im Suchmaschinen-Ranking höher

platzieren

Zwei Bereiche

OnPage-Optimierung

OffPage-Optimierung


WAS IST SUCHMASCHINENOPTIMIERUNG?


Optimierung des Seiteninhalts

Formatierungen, Überschriften etc.

Keywords im Inhalt

Landing-Pages für Suchmaschinen optimiert

Landing-Page stellt Angebot vor

SEO-Landing-Page optimiert, um bestimmte

Keywords ranken zu lassen


SEO: ONPAGE-OPTIMIERUNG


Google-Ranking beinhaltet über 200 verschiedene

Faktoren

1. Domain/Adresse: sollte Keyword enthalten

2. Seitentitel: aussagekräftig, sollte ebenfalls

Keyword enthalten

3. Überschriften: klare, saubere Struktur auf

Webseite, hierarchische Verwendung, Keywords


SEO: RANKINGFAKTOREN


Google-Ranking beinhaltet über 200 verschiedene

Faktoren

4. Page-Speed: schnellere Seiten haben Ranking-

Vorteil

5. SEO für Bilder: Keywords in Bildtiteln und Alt-

Attributen

6. Backlinks: aufgrund hochwertiger Inhalte

freiwillige Verlinkungen auf Landing-Page


SEO: RANKINGFAKTOREN


Unsichtbare Hinweise im <head>-Bereich einer

Website

Übermitteln diverse Informationen an

Maschinen/Robots

Technik aus den 90er Jahren

Suchmaschinen und Websites reagieren noch auf

einige meta-Tags

Beeinflussen das Ranking nur indirekt


WAS SIND META-TAGS?


Attribut „description“

Wird im Ranking nicht berücksichtigt

Maßgeblich für Click-Through-Rate (CTR)

Aufbau nach AIDA-Prinzip ratsam

Attention, Interest, Desire, Action

160 Zeichen maximal [100 auf mobilen Endgeräten]


RELEVANTE META-TAGS


Attribut „title“

„title“ kein meta-Element

Interpretation ausschließlich von Webbrowsern und

Suchmaschinen

Verwendung zur Berechnung des Google-Rankings


RELEVANTE META-TAGS


Attribut „robots“

"index,follow" erlauben aktuelle Seite zu indizieren

"noindex" bzw, "nofollow" verhindern mehrfaches

indizieren

Redundante Inhalte Spam

PageRank kann verwässern


RELEVANTE META-TAGS


Meta-Tags für Social Media

Twitter<meta name="twitter:description" content="Twitter-

Beschreibung, kürzer als 200 Zeichen">

Google+<meta itemprop="description"

content="Seitenbeschreibung für Google Plus">

Facebook<meta property="og:description"

content="Beschreibung mehr auf Social Media-User

zugeschnitten" />


RELEVANTE META-TAGS


Title

Description

Abstract

Keywords

Revisit-after

Robots


VERFÜGBARE META-TAGS IN DRUPAL 6


Spam vermeiden

Zielgruppe kennen und bedienen

Barrieren vermeiden

Links [Off-Page-Optimierung]

Keyword-Datenbank nutzen

https://adwords.google.de/KeywordPlanner


SEO IN ALLER KÜRZE

https://adwords.google.de/KeywordPlanner



GOOGLE KEYWORD-PLANNER

Quelle: https://www.seo-book.de/tools-allgemein/es-muss-nicht-immer-google-sein-12-13-keyword-tools

https://www.seo-book.de/tools-allgemein/es-muss-nicht-immer-google-sein-12-13-keyword-tools


Ranking-Faktoren

Meta-Tags



FRAGEN ZUR SUCHMASCHINENOPTIMIERUNG?

Inhaltstypen


INHALTSTYPEN

Benutzerprofil

Bildergalerie*

Infoblock

News

Publikation

Seite

Veranstaltung

Webform

Inhaltstypen


BILDERGALERIE: NEWS & SEITE

Inhaltstypen

News und Seite

Platzierung

Unterhalb des Textkörpers

Upload

Einzelbild oder Bulk-Upload

Darstellung

Galerie oder Slideshow

Inhaltstypen

Eintrag in rechten Spalte

Sichtbarkeit auf allen Seiten

des Bereichs

Verwendung primär für

Kontaktinformationen


INFOBLOCK

Inhaltstypen

Veranstaltungskalender:

Leben Veranstaltungen

Veranstaltung hinzufügen

Voraussetzung: zentrales Uni-Login

Hinweis:

"Vorschau"-Button "Speichern"-Button

Kein nachträgliches Bearbeiten möglich


VERANSTALTUNG

Inhaltstypen

Formular in Webseite

einbinden

Aufbau wie normale Seite

Hinzufügen und Konfigurieren

von Komponenten

E-Mail-Versand

Export der Ergebnisse [CSV]


WEBFORM

Inhaltstypen

Bildergalerie

Infoblock

Veranstaltung

Webform


FRAGEN?


Übersetzung für aktuelle Seite hinzufügen

Hinweis: Inhalte werden dadurch nicht übersetzt!

Vorgehen:

1. Sprache auswählen standardmäßig „Sprachneutral“

2. Seite speichern

3. Neuen Reiter „Übersetzen“ anklicken

4. Neue Sprachversion auswählen

5. Inhalte in der neuen Sprache einpflegen


MEHRSPRACHIGKEIT



GRUPPEN-ADMINISTRATION



MENÜ-ADMINISTRATION



BERECHTIGUNGEN

Bereichsadministratoren verwalten Berechtigungen

Meine Gruppen Mitglieder

Redakteure hinzufügen/entfernen

Redakteur zum Administrator ernennen/entfernen

Erst nach erstem

Login können

Berechtigungen

eingestellt werden!



FRAGEN?

Mehrsprachigkeit

Gruppen-Administration

Menü

Berechtigungen

Übungsaufgaben

Word-Dokument herunterladen

„Fortgeschrittenenschulung – weiterführendes

Arbeiten mit Drupal“

http://drupal2.hrz.tu-freiberg.de/schulungsbereich

Übungsaufgaben selbstständig bearbeiten


ÜBUNGEN

http://drupal2.hrz.tu-freiberg.de/schulungsbereich


Webportal: http://tu-freiberg.de/webportal/

Informationen zum Webauftritt, Weiterbildungen, Anleitungen und Support

Fragen und Probleme: [email protected]

Weitere Weiterbildungen:

Webinhalte gestalten

Einführung in das Bloggen mit WordPress

Bloggen für Fortgeschrittene

Online-Umfragen erstellen mit LimeSurvey


WEITERFÜHRENDE INFORMATIONEN

http://tu-freiberg.de/webportal/

mailto:[email protected]

RUPAL FÜR FORTGESCHRITTENE · Fortgeschrittenenschulung –weiterführendes Arbeiten mit Drupal...

Documents

Transcript of RUPAL FÜR FORTGESCHRITTENE · Fortgeschrittenenschulung –weiterführendes Arbeiten mit Drupal...