DRUPAL FÜR FORTGESCHRITTENE
Fortgeschrittenenschulung – weiterführendes Arbeiten mit Drupal
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
Fortgeschrittenenschulung – weiterführendes Arbeiten mit Drupal
HTML- / CSS-Crashkurs
Barrierefreiheit
Suchmaschinenoptimierung (SEO)
Inhaltstypen
Erweiterte Funktionen
Übungen
INHALTE
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
HTML- / CSS-Crashkurs
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)
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
HTML – HYPERTEXT MARKUP LANGUAGE
HTML- / CSS-Crashkurs
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
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- / CSS-Crashkurs
<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>
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
HTML-STRUKTUR
HTML- / CSS-Crashkurs
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
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
CSS – CASCADING STYLE SHEETS
HTML- / CSS-Crashkurs
Anweisung
{
Eigenschaft 1: Wert A;
Eigenschaft 2: Wert B;
}
Beispiel:
#content
{
margin: 20px 20px 20px 20px;
color: #d2691e;
}
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
AUFBAU VON CSS-ANWEISUNGEN
HTML- / CSS-Crashkurs
<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>
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
HTML-STRUKTUR MIT CSS-ANGABEN
HTML- / CSS-Crashkurs
HyperText Markup Language
HTML-Syntax
HTML-Struktur
Cascading Style Sheets
CSS-Anweisungen
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
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/
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
BARRIEREFREIHEIT
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
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
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
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
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.
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
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>
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
Ü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>
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
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.
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
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>
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
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.
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
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“ />
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
BILDER
Quelle:
http://upload.wikimedia.org/wikipedia/commons/0/06/R
efreshable_Braille_display.jpg
Brailledisplay
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>
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
LINKS
Barrierefreiheit
Bildschirmleseprogramm für
Blinde und Sehbehinderte
Zwei Arten:
Akustisch [Lautsprecher]
Taktil [Braillezeile]
Synthetische Sprache wirkt
monoton
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
SCREENREADER
Quelle:
http://upload.wikimedia.org/wikipedia/commons/0/06/R
efreshable_Braille_display.jpg
Brailledisplay
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
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
SCREENREADER: FUNKTIONSWEISE
Barrierefreiheit
Name Funktion
Max Mustermann Otto Normalverbraucher
Erika Mustermann Personalausweisbeauftragte
Maria Musterfrau Führerscheinbeauftragte
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
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
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
SCREENREADER: VORLESEBEISPIEL
Screenshot von: 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
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
SCREENREADER: VORLESEBEISPIEL
Barrierefreiheit
Barrierearmes Internet
BITV 2.0
HTML-Elemente
Screenreader
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
FRAGEN ZUR BARRIEREFREIHEIT?
Suchmaschinenoptimierung (SEO)
SEO-Maßnahmen
Webinhalte im Suchmaschinen-Ranking höher
platzieren
Zwei Bereiche
OnPage-Optimierung
OffPage-Optimierung
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
WAS IST SUCHMASCHINENOPTIMIERUNG?
Suchmaschinenoptimierung (SEO)
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
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
SEO: ONPAGE-OPTIMIERUNG
Suchmaschinenoptimierung (SEO)
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
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
SEO: RANKINGFAKTOREN
Suchmaschinenoptimierung (SEO)
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
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
SEO: RANKINGFAKTOREN
Suchmaschinenoptimierung (SEO)
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
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
WAS SIND META-TAGS?
Suchmaschinenoptimierung (SEO)
<meta name="description"
content=„Beschreibungstext …“ />
<meta name="keywords" content=„Keyword 1, …“ />
<meta name="robots" content=„index, follow“ />
<meta name="news_keywords" content=„KEYWORD 1,
KEYWORD 2, KEYWORD 3“ />
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
RELEVANTE META-TAGS
Suchmaschinenoptimierung (SEO)
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]
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
RELEVANTE META-TAGS
Suchmaschinenoptimierung (SEO)
Attribut „title“
„title“ kein meta-Element
Interpretation ausschließlich von Webbrowsern und
Suchmaschinen
Verwendung zur Berechnung des Google-Rankings
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
RELEVANTE META-TAGS
Suchmaschinenoptimierung (SEO)
Attribut „robots“
"index,follow" erlauben aktuelle Seite zu indizieren
"noindex" bzw, "nofollow" verhindern mehrfaches
indizieren
Redundante Inhalte Spam
PageRank kann verwässern
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
RELEVANTE META-TAGS
Suchmaschinenoptimierung (SEO)
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" />
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
RELEVANTE META-TAGS
Suchmaschinenoptimierung (SEO)
Title
Description
Abstract
Keywords
Revisit-after
Robots
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
VERFÜGBARE META-TAGS IN DRUPAL 6
Suchmaschinenoptimierung (SEO)
Spam vermeiden
Zielgruppe kennen und bedienen
Barrieren vermeiden
Links [Off-Page-Optimierung]
Keyword-Datenbank nutzen
https://adwords.google.de/KeywordPlanner
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
SEO IN ALLER KÜRZE
Suchmaschinenoptimierung (SEO)
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
GOOGLE KEYWORD-PLANNER
Quelle: https://www.seo-book.de/tools-allgemein/es-muss-nicht-immer-google-sein-12-13-keyword-tools
Suchmaschinenoptimierung (SEO)
Ranking-Faktoren
Meta-Tags
Suchmaschinenoptimierung (SEO)
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
FRAGEN ZUR SUCHMASCHINENOPTIMIERUNG?
Inhaltstypen
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
INHALTSTYPEN
Benutzerprofil
Bildergalerie*
Infoblock
News
Publikation
Seite
Veranstaltung
Webform
Inhaltstypen
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
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
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
INFOBLOCK
Inhaltstypen
Veranstaltungskalender:
Leben Veranstaltungen
Veranstaltung hinzufügen
Voraussetzung: zentrales Uni-Login
Hinweis:
"Vorschau"-Button "Speichern"-Button
Kein nachträgliches Bearbeiten möglich
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
VERANSTALTUNG
Inhaltstypen
Formular in Webseite
einbinden
Aufbau wie normale Seite
Hinzufügen und Konfigurieren
von Komponenten
E-Mail-Versand
Export der Ergebnisse [CSV]
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
WEBFORM
Inhaltstypen
Bildergalerie
Infoblock
Veranstaltung
Webform
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
FRAGEN?
Erweiterte Funktionen
Ü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
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
MEHRSPRACHIGKEIT
Erweiterte Funktionen
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
GRUPPEN-ADMINISTRATION
Erweiterte Funktionen
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
MENÜ-ADMINISTRATION
Erweiterte Funktionen
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
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!
Erweiterte Funktionen
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
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
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
ÜBUNGEN
Fortgeschrittenenschulung – weiterführendes Arbeiten mit Drupal
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
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
WEITERFÜHRENDE INFORMATIONEN