DRUPAL FÜR FORTGESCHRITTENE

Transkript

1 DRUPAL FÜR FORTGESCHRITTENE Fortgeschrittenenschulung weiterführendes Arbeiten mit Drupal

2 Fortgeschrittenenschulung weiterführendes Arbeiten mit Drupal INHALTE Barrierefreiheit / SEO Inhaltstypen Mehrsprachigkeit Weitere Funktionen Übungen

3 Barrierefreiheit BARRIEREFREIHEIT Barrierefreies Webdesign ist die Kunst, Webseiten so zu gestalten, dass jeder sie nutzen und lesen kann. Quelle:

4 Barrierefreiheit BARRIEREARMES INTERNET 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

5 Barrierefreiheit BITV 2.0 = 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 Behindertengleichstellungsgesetzes) ermöglichen/erleichtern Gilt für alle Internetauftritte der Bundesverwaltung

6 Barrierefreiheit BITV 2.0 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 Barrierefreie Informationstechnik Die 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.

7 Barrierefreiheit ÜBERSCHRIFTEN BITV Bedingung Beschreibungen Überschriften und Label (Beschriftungen) kennzeichnen das Thema oder den Zweck. BITV Bedingung 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>

8 Barrierefreiheit LISTEN 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>

9 Barrierefreiheit TABELLEN BITV Bedingung 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 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.

10 Barrierefreiheit TABELLEN 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> Spaltenüberschrift 1 Spaltenüberschrift 2 Tabelleninhalt in Spalte 1 Tabelleninhalt in Spalte 2

11 Barrierefreiheit BILDER BITV Bedingung 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 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.

12 Barrierefreiheit BILDER 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 P und weitere Leerzeichen. title= Brailledisplay /> Brailledisplay Quelle: efreshable_braille_display.jpg

13 Barrierefreiheit LINKS BITV Bedingung 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>

14 Barrierefreiheit SCREENREADER Bildschirmleseprogramm für Blinde und Sehbehinderte Brailledisplay Zwei Arten: Akustisch [Lautsprecher] Taktil [Braillezeile] Synthetische Sprache wirkt monoton Quelle: efreshable_braille_display.jpg

15 Barrierefreiheit SCREENREADER: FUNKTIONSWEISE 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

16 Barrierefreiheit SCREENREADER: TABELLEN Tabellen werden von links nach rechts und von oben nach unten gelesen; kein Hinweis beim Zeilenwechsel Name Max Mustermann Erika Mustermann Maria Musterfrau Funktion Otto Normalverbraucher Personalausweisbeauftragte Führerscheinbeauftragte (Ü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

17 Barrierefreiheit SCREENREADER: VORLESEBEISPIEL Screenshot von:

18 <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 P 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>

19 Barrierefreiheit SCREENREADER: VORLESEBEISPIEL

20 Barrierefreiheit FRAGEN ZUR BARRIEREFREIHEIT? Barrierearmes Internet BITV 2.0 HTML-Elemente Screenreader

21 Suchmaschinenoptimierung SUCHMASCHINENOPTIMIERUNG (SEO) Optimierung des Seiteninhalts Formatierungen, Überschriften etc. Landing-Pages für Suchmaschinen optimiert Landing-Page stellt Angebot vor SEO-Landing-Page optimiert, um bestimmte Keywords ranken zu lassen

22 Suchmaschinenoptimierung RANKINGFAKTOREN 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

23 Suchmaschinenoptimierung 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

24 Suchmaschinenoptimierung WAS SIND META-TAGS? 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

25 Suchmaschinenoptimierung RELEVANTE META-TAGS <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 />

26 Suchmaschinenoptimierung RELEVANTE 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]

27 Suchmaschinenoptimierung RELEVANTE META-TAGS Attribut title title kein meta-element Interpretation ausschließlich von Webbrowsern und Suchmaschinen Verwendung zur Berechnung des Google-Rankings

28 Suchmaschinenoptimierung 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

29 Suchmaschinenoptimierung 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" />

30 Suchmaschinenoptimierung VERFÜGBARE META-TAGS IN DRUPAL 6 Title Description Abstract Keywords Revisit-after Robots

31 Suchmaschinenoptimierung SEO IN ALLER KÜRZE Spam vermeiden Zielgruppe kennen und bedienen Barrieren vermeiden Links [Off-Page-Optimierung] Keyword-Datenbank nutzen

32 Suchmaschinenoptimierung FRAGEN ZUR SUCHMASCHINENOPTIMIERUNG? Ranking-Faktoren Meta-Tags Suchmaschinenoptimierung (SEO)

33 Neue Inhalte erstellen INHALTSTYPEN Bildergalerie Infoblock News Publikation Seite Veranstaltung Webform

34 Inhaltstypen BILDERGALERIE Bildergalerie als Unterseite Aufbau: normale Seite Zusatz: Galeriebilder hochladen & auswählen Upload: Einzelbild oder Bulk- Upload

35 Inhaltstypen INFOBLOCK Eintrag in rechten Spalte Sichtbarkeit auf allen Seiten des Bereichs Verwendung primär für Kontaktinformationen

36 Inhaltstypen VERANSTALTUNG Veranstaltungskalender: Leben Veranstaltungen Veranstaltung hinzufügen Voraussetzung: zentrales Uni-Login Hinweis: "Vorschau"-Button "Speichern"-Button Kein nachträgliches Bearbeiten möglich

37 Inhaltstypen WEBFORM Formular in Webseite einbinden Aufbau wie normale Seite Hinzufügen und Konfigurieren von Komponenten -Versand Export der Ergebnisse [CSV]

38 Mehrsprachigkeit MEHRSPRACHIGKEIT Ü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

39 Mehrsprachigkeit MEHRSPRACHIGKEIT

40 Mehrsprachigkeit SPRACHE ZUWEISEN

41 Mehrsprachigkeit ÜBERSETZUNG HINZUFÜGEN

42 Erweiterte Funktionen MENÜ BEARBEITEN

43 Erweiterte Funktionen MENÜ BEARBEITEN

44 Erweiterte Funktionen 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!

45 Übungsaufgaben ÜBUNGEN Word-Dokument herunterladen Fortgeschrittenenschulung weiterführendes Arbeiten mit Drupal Übungsaufgaben selbstständig bearbeiten

46 Fortgeschrittenenschulung weiterführendes Arbeiten mit Drupal WEITERFÜHRENDE INFORMATIONEN Webportal Informationen zum Webauftritt, Anleitungen und Support Fragen und Probleme