DRUPAL-SCHULUNG
Einführungsschulung und grundlegende Informationen zur Barrierefreiheit
Alexander Winterstein (Zentraler Webkoordinator)
Einführungsschulung und grundlegende Informationen zur Barrierefreiheit
INDHOLD Web-Content-Management-System
Grundlegende Bearbeitung
Verfügbarkeit
Formatiert und strukturiert Inhalte
Übungen Alexander Winterstein (Zentraler Webkoordinator)
Web-Content-Management-System Drupal
Was ist ein Content-Management-System? Software zur einfachen Erstellung und Verwaltung von Webinhalten Redaktionssystem
Trennung von Inhalt und Layout/Design Der Redakteur muss sich nur mit der Eingabe und Aktualisierung des Inhalts befassen
Alexander Winterstein (Zentraler Webkoordinator)
Web-Content-Management-System Drupal
WAS SIND DIE VORTEILE EINES CMS? Keine Vorkenntnisse in HTML, CSS, JavaScript, … Der Arbeitsplatz erfordert keine zusätzliche Software Webbrowser ist ausreichend
Benutzerfreundliche Umgebung Umsetzung eines einheitlichen Corporate Designs
Alexander Winterstein (Zentraler Webkoordinator)
Web-Content-Management-System Drupal
KURZES DRUPAL Drupal 6.x (Freie Software OpenSource) PHP-basiert mit MySQL
Umfangreiche Einführung im April 2014 Ursprünglich 2010/2011 Relaunch: neues Webdesign und Umstellung der zentralen Seiten
Stand 2017: ca. 20.000 Seiten im System, ca. 2.400 Redakteure Alexander Winterstein (zentraler Webkoordinator)
Web-Content-Management-System Drupal
STRUKTUR VON DRUPAL Kern mit Grundfunktionalität Benutzer, Knoten, System
Module für zusätzliche Funktionen Galerie, Editor, Dateibrowser, ...
über 36.500 vollständige Drupal-Module 6.900 davon sind kompatibel mit Drupal 6 (12.600 für Drupal 7, 2.600 für Drupal 8) Alexander Winterstein (Zentraler Webkoordinator)
Web-Content-Management-System Drupal
DRUPAL-FUNKTIONEN Menschen- und maschinenlesbare Adressen Inhaltstypen für verschiedene Seiten Rollenbasiertes Rechtesystem
Inhaltsversionierung Anbindung an LDAP-Server …
Alexander Winterstein (Zentraler Webkoordinator)
Web-Content-Management-System Drupal
SYSTEMLANDSKAB Drupal 3 testsystem
Qualitätssystem Drupal 2
Drupal 1 Produktivsystem
o Test von Patches und Updates o Testsystem für Erweiterungen, Module
o Bildungs- und Ausbildungssystem o Kopie des Produktionssystems
o Zielsystem für die gesamte Website o Content-Pflege
o Webkoordinator o Entwickler
o Redakteure o Webkoordinator o Entwickler
o Benutzer o Redakteure o Webkoordinator o Entwickler
Alexander Winterstein (Zentraler Webkoordinator)
Web-Content-Management-System Drupal
FRAGEN? Redaktionssystem Webbasiert Drupal Version 6.x
Kern mit Grundfunktionen Module für Erweiterungen 3 Drupal-Instanzen
Alexander Winterstein (Zentraler Webkoordinator)
Grundbetrieb
ANMELDEN BEI WEBCMS Die Anmeldung erfolgt mittels Shibboleth-Authentifizierung Zentrales Hochschul-Login Login-Link im Fußmenü: http://tu-freiberg.de/login
Heutiges Schulungssystem: http://drupal3.hrz.tu-freiberg.de
Hinweis: Für Berechtigungen ist eine vorherige Anmeldung erforderlich. Alexander Winterstein (Zentraler Webkoordinator)
Grundbetrieb
REDIGERINGSTILSTAND
Content- und Gruppenmanagement Alexander Winterstein (Zentraler Webkoordinator)
Grundbetrieb
GRUPPENMANAGEMENT
Alexander Winterstein (Zentraler Webkoordinator)
Grundbetrieb
INHALTSVERWALTUNG
Alexander Winterstein (Zentraler Webkoordinator)
Grundbetrieb
REDIGERINGSTILSTAND
Bearbeitungsleiste
Alexander Winterstein (Zentraler Webkoordinator)
Grundbetrieb
DIE VERSION
Alexander Winterstein (Zentraler Webkoordinator)
Grundbetrieb
UNTEN HINZUFÜGEN
Alexander Winterstein (Zentraler Webkoordinator)
Grundbetrieb
NEUE SEITE ERSTELLEN
Alexander Winterstein (Zentraler Webkoordinator)
Grundbetrieb
FRAGEN? Login über Footer Inhalts- und Gruppenverwaltung Funktionen im Bearbeitungsmodus
Erstellen Sie neue Inhalte
Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
VERFÜGBARKEIT
„Barrierefreies Webdesign ist die Kunst, Websites so zu gestalten, dass jeder sie nutzen und lesen kann.“ Quelle: http://www.barrierefreie-webdesign.de/
Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
WER IST BETROFFEN? 4 Hauptkategorien Sehbehinderung Hörbehinderung Motorische Beeinträchtigung Kognitive Beeinträchtigung
Andere Segmente Silver Surfer (50+ Jahre) Handy- und Tablet-Nutzer Suchmaschinen (Google ist blind)
Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
BARRIERENNIEDRIGES INTERNET Schneller und unkomplizierter Zugang zu gewünschten Informationen Bieten Sie Informationen barrierefrei an
Barrierefreiheit für: Menschen mit Behinderung Menschen ohne Behinderung Webcrawler Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
VIER GRUNDSÄTZE DER ZUGÄNGLICHKEIT 1. Wahrnehmbar: Informationen und Benutzeroberflächenkomponenten müssen den Benutzern so präsentiert werden, dass sie sie wahrnehmen können. 2. Bedienbar: Benutzeroberflächenkomponenten und Navigation müssen bedienbar sein. 3. Verständlich: Informationen und Bedienung der Benutzeroberfläche müssen verständlich sein. 4. Robust: Inhalte müssen robust genug sein, um von einer Vielzahl von Benutzeragenten, einschließlich unterstützender Technologien, zuverlässig interpretiert zu werden. Web Content Accessibility Guidelines (WCAG) 2.0 Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
BEHINDERUNGSGESETZ Das BGG legt Standards für Barrierefreiheit fest. Neufassung 2016: Öffentliche Einrichtungen
Zugängliche Infrastruktur. Inhalte in einfacher Sprache anbieten
Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
BGG § 4 „Bau- und sonstige Anlagen, Transportmittel, technische Gegenstände, Informationsverarbeitungsanlagen, akustische und visuelle Informationsquellen und Kommunikationseinrichtungen sowie sonstige gestaltete Wohnräume sind barrierefrei, wenn sie für Menschen mit Behinderungen in normaler Weise zugänglich sind.“ Weg, ohne besondere Schwierigkeiten und im Prinzip ohne Fremde. Hilfe kann gefunden, abgerufen und genutzt werden.“ Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
SONSTIGE BESTIMMUNGEN Erlass über barrierefreie Informationstechnologie Erlass über die Schaffung barrierefreier Informationstechnologie gemäß dem Behindertengleichstellungsgesetz (BITV 2.0)
Ergänzung zum BGG
Zugang für Behinderte gemäß § 3 und 4 Behindertengleichstellungsgesetz Sachsen ist BITV-freie Zone Alexander Winterstein (zentraler Webkoordinator)
Verfügbarkeit
SONSTIGE BESTIMMUNGEN Gesetz zur Verbesserung der Integration von Menschen mit Behinderungen im Land Sachsen (Sächsisches Integrationsgesetz – SächsIntegrG), gültig ab 2005. § 7 Barrierefreie Informationstechnik „Die Behörden und sonstigen öffentlichen Stellen des Freistaates Sachsen gestalten ihre Websites und Angebote sowie die von ihnen bereitgestellten grafischen Programmoberflächen, die mit Hilfe der Informationstechnik dargestellt werden, Schritt für Schritt technisch so zu gestalten, dass sie auch für Menschen mit Behinderungen uneingeschränkt nutzbar sind.“ Alexander Winterstein (zentraler Webkoordinator)
Verfügbarkeit
UMSETZUNG VON BARRIEREFREI Layout & Design Zusammenspiel von Farben und Kontrasten Anordnung, Darstellung und Strukturierung der Elemente
Qualitätssicherung Redakteure sind für die Bereitstellung barrierefreier Inhalte verantwortlich Regelmäßige Kurse für Redakteure Alexander Winterstein (zentraler Webkoordinator)
Verfügbarkeit
TYPISCHE PROBLEME: AUSFÜLLEN VON FORMULIERUNGEN Blinde haben keinen Überblick Das Ausfüllen von Formularen wird zur Geduldsprobe
Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
TYPISCHE PROBLEME: VERWENDUNG DER TASTATUR
Einige Bereiche sind über die Tastatur nur schwer oder gar nicht erreichbar
Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
TYPISCHE PROBLEME: BILDER OHNE BESCHREIBUNG
Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
TYPISCHE PROBLEME: ÄNDERUNGEN DER WEBSITE
Änderungen werden nicht bemerkt, die Website ist gesperrt
Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
TIPP: MULTI-CHANNEL-PRINZIP Informationen über mindestens zwei Sinne verfügbar Beispiele: Informationen nicht nur grafisch, sondern auch in Textform kommunizieren Videos mit Untertiteln für Gehörlose
Alle nicht-textlichen Inhalte müssen eine alternative Beschreibung haben (insbesondere Bilder) Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
TIPPS: VERMEIDEN SIE STÖRENDE INHALTE Vermeiden Sie auffällige, flimmernde Inhalte Starten Sie Animationen, Audio und Video nicht automatisch Reduzieren Sie mögliche Fehler: Defekte Links Irreführende Texte
Flash-Websites
Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
TIPP: SEMANTISCHE STRUKTURIERUNG Texte semantisch kennzeichnen Programme (z. B. Screenreader) müssen erkennen, was eine Überschrift, Aufzählung oder ein Zitat ist
Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
TIPP: AUS DER NUTZERPERSPEKTIVE DENKEN Das wichtigste Ziel des Benutzers Schnell zum Ziel kommen Konventionen dienen der Orientierung Wiederkehrende Bedienelemente und Inhalte sind immer an der gleichen Stelle „Weniger ist mehr“
Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
CHECKLISTE FÜR REDAKTEURE Überschriften Listen Tabellen
Bilder Links Navigation Einfache und klare Sprache Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
ÜBERSCHRIFTEN BITV-Bedingung 2.4.6 Beschreibungen Überschriften und Beschriftungen identifizieren das Thema oder den Zweck.
BITV-Bedingung 2.4.10 Abschnittsüberschriften Abschnittsüberschriften müssen zur weiteren Strukturierung des Inhalts verwendet werden.
Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
HÖREN Anhang 2 zu BITV 2.0, Teil 2 Der Inhalt muss logisch durch Abschnitte und Überschriften strukturiert sein. Zählungen mit mehr als drei Punkten müssen in Listen aufgeteilt werden.
Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
TABELLEN BITV-Modus 1.3.2 Sinnvolle Reihenfolge Wenn die Reihenfolge, in der Inhalte präsentiert werden, ihre Bedeutung beeinflusst, können Programme die richtige Lesereihenfolge erkennen.
BITV-Bedingung 1.3.3 Sensorische Eigenschaften Hinweise zum Verständnis und zur Nutzung der Inhalte basieren nicht ausschließlich auf den sensorischen Eigenschaften der Elemente, wie z.B. B. Form, Größe, visuelle Lage, Ausrichtung oder Klang.
Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
BILDER BITV-Bedingung 1.1.1 Nicht-Text-Inhalt Für jeden Nicht-Text-Inhalt, der dem Benutzer präsentiert wird, muss eine Textalternative bereitgestellt werden, die den Zweck dieses Inhalts erfüllt.
BITV-Modus 1.4.9 Schriftgrafiken Schriftgrafiken werden nur zur Dekoration oder in Fällen verwendet, in denen eine bestimmte Textpräsentation eine wesentliche Voraussetzung für die Übermittlung der Informationen ist. Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
LINKS BITV-Bedingung 2.4.9 Zweck eines Links Zweck und Zweck eines Links ergeben sich aus dem Linktext selbst.
Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
NAVIGATION BITV-Modus 3.2.3 Einheitliche Navigation Navigationsmechanismen, die auf einer Site wiederholt werden, erscheinen bei jeder Wiederholung in derselben Reihenfolge, es sei denn, der Benutzer initiiert eine Änderung.
Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
EINFACHE UND KLARE SPRACHE BITV-Bedingung 3.1.5 Einfache Sprache Alle Inhalte müssen die klarste und einfachste angemessene Sprache verwenden. Bei schwierigen Texten werden zusätzliche erläuternde Inhalte oder grafische oder Audio-Präsentationen bereitgestellt.
BITV-Modus 3.2.4 Einheitliche Bezeichnung Auf einer Website und auf verlinkten Websites werden Elemente mit gleicher Funktionalität einheitlich bezeichnet. Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
WARUM DAS ALLES? Texte werden überflogen Das Lesen am Bildschirm ist anstrengender Präsentation, Struktur und Stil Aussagekräftige Überschriften Heben Sie wichtige Konzepte hervor Fassen Sie Kernaussagen in Kästchen zusammen
Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
BEISPIEL: LINK ZUR PRÜFUNGSANMELDUNG
Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
BEISPIEL: LINK ZUR PRÜFUNGSANMELDUNG
Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
SCREENREADER Screenreader für Blinde und Sehbehinderte
Vermittelt Informationen akustisch oder taktil per Braillezeile Screenreader für Windows-Systeme NVDA (=NonVisual Desktop Access, OpenSource) Cobra (gegen Gebühr)
Screenreader für Linux-Systeme Orca (OpenSource) Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
COBRA (BILDSCHIRMLESER) So funktioniert es
Alle angezeigten Elemente (Fenster, Menüs, Auswahlboxen, aktuelle Eingabeposition...) werden eingelesen Elemente werden interpretiert und sprachlich vorgelesen Z.B.
H-Tasten-Navigation zwischen Überschriften Tab-Tasten-Navigation zwischen Blöcken Tabellen werden von links nach rechts und von oben nach unten gelesen; keine Warnung bei Zeilenwechsel Alexander Winterstein (zentraler Webkoordinator)
Verfügbarkeit
COBRA (BILDSCHIRMLESER) Name
Funktion
John Doe
Joe Blogs
Erika Mustermann
Ausweiswärter
Maria Musterfrau
Führerscheinmanager
Vorgelesener Text: (Überschrift 2) Name (Überschrift 2) Position Max (fett) Mustermann (fettes Ende) - Joey Joe - Erika Mustermann - Ausweismanagerin - Maria Musterfrau - Führerscheinmanagerin
Alexander Winterstein (Zentraler Webkoordinator)
Verfügbarkeit
FRAGEN? Wer ist betroffen? Barrierefreies Internet. Grundsätze der Barrierefreiheit
Das Behindertengleichstellungsgesetz Typische Probleme und Tipps Checkliste für Redakteure Screenreader Alexander Winterstein (zentraler Webkoordinator)
WYSIWYG-Editor
DER WYSIWYG-EDITOR
WYSIWYG = What You See Is What You Get Erstellung und Bearbeitung von Webinhalten Zentrales Element
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
FUNKTIONEN DES EDITORS Editor erfordert keine Vorkenntnisse in HTML & Co. Basierend auf Textverarbeitungsprogrammen
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
Fettschrift, Kursivschrift und Unterstreichung Zur gezielten Hervorhebung von Wörtern oder Wortgruppen Keine Formatierung vollständiger Texte Die Verwendung für Gliederungspunkte ist nicht zulässig
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
LISTEN Unsortierte Listen Sortierte Listen von 1..n Unterlisten durch Einrückung möglich
Verwenden einer Liste >= drei Aufzählungspunkte
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
LINK EINFÜGEN Verweis auf eine andere Seite, Anker auf der gleichen Seite oder auf ein Dokument Interne Seite: relativer Link ohne tu-freiberg.de davor oder /node/node_id
Externe Seite: Vollständige Webadresse mit http
Dokument kann über Dateibrowser hochgeladen werden Beschreibungstext für Link eingeben Alexander Winterstein (zentraler Webkoordinator)
WYSIWYG-Editor
LINK EINFÜGEN – DATEI-BROWSER
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
BILD EINFÜGEN Das Bild kann im Internet oder lokal auf dem Computer sein Über den Dateibrowser hochladen/auswählen
Geben Sie die Beschreibung und den Titel des Bildes ein. Drei Größen zur Auswahl: 112 Pixel, 192 Pixel und 544 Pixel. Automatische Konvertierung in die gewählte Breite
Links- oder Rechtsausrichtung Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
ZITATBLOCK Zitatblock = Box zur visuellen Hervorhebung Möglichkeit mehrerer Inhalte in einer Box Rahmen umgibt die Box
Das Feld erstreckt sich über die gesamte Seitenbreite. Verwenden Sie es mit Bedacht und nicht übermäßig
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
TEILER Wird zur visuellen Abgrenzung verwendet. Beginnt in einer neuen Zeile. Löscht fortlaufenden Text
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
ÜBERSCHRIFTEN Überschriften dienen der Strukturierung des Inhalts Automatische Formatierung Drei Ebenen wählbar: Größe 2, 3 und 4 Hierarchisch verwenden
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
INHALTSVERZEICHNIS Erstellt automatisch eine Übersicht Erzeugt Sprungmarken aus vorhandenen Überschriften Zeigt Überschriften hierarchisch an
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
ZUM SEITENANFANG - ANKER Erstellt Sprungmarke zurück zum Seitenanfang Kombinierbar mit Inhaltsverzeichnis Schnellere Navigation auf langen Seiten
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
TABELLEN Tabellen nur als Datentabellen verwenden Beliebig viele Spalten und Zeilen Tabellenbreite kann explizit angegeben werden Sonst automatisch über die gesamte Seitenbreite
Zeilen und Spalten hinzufügen/löschen/zusammenführen. Zukünftige Formatierung über zentrales Design
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
MULTIMEDIA Integration multimedialer Elemente möglich Verschiedene Formate [Flash, HTML5, Quicktime, ...] Datei kann auch über Dateibrowser hochgeladen/ausgewählt werden
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
SEITE EINBETTEN Interne Seiten einbinden [[nid:1234]] Vollständige Darstellung des Inhalts Änderungen zur Originalseite automatisch sichtbar
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
VISITENKARTE Mitarbeiter können einheitlich dargestellt werden Bild im Quer-/Hochformat oder Platzhalter Eingabemaske für persönliche Daten
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
AKKORDEON Erstellt einen Container für reduzierbaren Inhalt Überschrift + Text
Alexander Winterstein (Zentraler Webkoordinator)
Einführungsschulung und grundlegende Informationen zur Barrierefreiheit
ÜBUNGEN Word-Dokument herunterladen http://drupal2.hrz.tu-freiberg.de/schulungsbereich Drupal 2 Meine Gruppen Trainingsbereich
Arbeiten Sie selbstständig an Übungen. Melden Sie sich sofort, wenn Sie Fragen haben oder etwas unklar ist
Alexander Winterstein (Zentraler Webkoordinator)
Einführungsschulung und grundlegende Informationen zur Barrierefreiheit
WEITERE INFORMATIONEN Webportal: http://tu-freiberg.de/webportal/ Informationen zur Website, Anleitung und Support
Fragen und Probleme:[email protected] Weiterbildung: Drupal für Fortgeschrittene Einführung in das Bloggen mit WordPress Fortgeschrittenes Bloggen Web Content Design Erstellen von Online-Umfragen mit LimeSurvey Alexander Winterstein (Zentraler Webkoordinator)