DRUPAL-SCHULUNG
Einsteigerschulung und Basisinformationen zur Barrierefreiheit
Alexander Winterstein (Zentraler Webkoordinator)
Einsteigerschulung und Basisinformationen zur Barrierefreiheit
INHALTE Web-Content-Management-System
Grundlegende Bearbeitung
Barrierefreiheit
Inhalte formatieren und strukturieren
Ü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 Redakteur muss sich nur noch mit Einpflegen und Aktualisieren der Inhalte befassen
Alexander Winterstein (Zentraler Webkoordinator)
Web-Content-Management-System Drupal
WAS SIND DIE VORTEILE EINES CMS? Keine Vorkenntnisse in HTML, CSS, JavaScript, … Arbeitsplatz benötigt keine zusätzliche Software Webbrowser ist ausreichend
Bedienfreundliche Umgebung Durchsetzung eines einheitlichen Corporate Designs
Alexander Winterstein (Zentraler Webkoordinator)
Web-Content-Management-System Drupal
KURZVORSTELLUNG DRUPAL Drupal 6.x (freie Software OpenSource) PHP-basiert unter Verwendung MySQL
Flächendeckende 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
AUFBAU VON DRUPAL Core mit Grundfunktionalität User, Node, System
Module für zusätzliche Funktionen Galerie, Editor, Dateibrowser, …
über 36.500 vollwertige Drupal-Module davon 6.900 für Drupal 6 kompatibel (12.600 für Drupal 7, 2.600 für Drupal 8) Alexander Winterstein (Zentraler Webkoordinator)
Web-Content-Management-System Drupal
EIGENSCHAFTEN VON DRUPAL Menschen- und maschinenlesbare Adressen Inhaltstypen für verschiedenartige Seiten Rollenbasiertes Rechtesystem
Versionierung der Inhalte Anbindung an LDAP-Server …
Alexander Winterstein (Zentraler Webkoordinator)
Web-Content-Management-System Drupal
SYSTEMLANDSCHAFT Drupal 3 Testsystem
Drupal 2 Qualitätssystem
Drupal 1 Produktivsystem
o Tests von Patches und Updates o Testsystem für Erweiterungen, Module
o Ausbildungs- und Schulungssystem o Kopie des Produktivsystems
o Zielsystem für das gesamte Webangebot o Pflege der Inhalte
o Webkoordinator o Entwickler
o Redakteure o Webkoordinator o Entwickler
o Nutzer o Redakteure o Webkoordinator o Entwickler
Alexander Winterstein (Zentraler Webkoordinator)
Web-Content-Management-System Drupal
FRAGEN? Redaktionssystem Webbasiert Drupal Version 6.x
Core mit Grundfunktionen Module für Erweiterungen 3 Drupal-Instanzen
Alexander Winterstein (Zentraler Webkoordinator)
Grundlegende Bedienung
LOGIN INS WEBCMS Login erfolgt mittels Shibboleth-Authentifizierung Zentrales Uni-Login Login-Link im Footermenü: http://tu-freiberg.de/login
Heutiges Schulungssystem: http://drupal3.hrz.tu-freiberg.de
Hinweis: Vorheriges Login ist erforderlich für Berechtigungen. Alexander Winterstein (Zentraler Webkoordinator)
Grundlegende Bedienung
REDAKTIONSMODUS
Inhalts- und Gruppenverwaltung Alexander Winterstein (Zentraler Webkoordinator)
Grundlegende Bedienung
GRUPPENVERWALTUNG
Alexander Winterstein (Zentraler Webkoordinator)
Grundlegende Bedienung
INHALTSVERWALTUNG
Alexander Winterstein (Zentraler Webkoordinator)
Grundlegende Bedienung
REDAKTIONSMODUS
Bearbeitungsleiste
Alexander Winterstein (Zentraler Webkoordinator)
Grundlegende Bedienung
VERSIONEN
Alexander Winterstein (Zentraler Webkoordinator)
Grundlegende Bedienung
UNTERSEITE HINZUFÜGEN
Alexander Winterstein (Zentraler Webkoordinator)
Grundlegende Bedienung
NEUE SEITE ERSTELLEN
Alexander Winterstein (Zentraler Webkoordinator)
Grundlegende Bedienung
FRAGEN? Login über Fußzeile Inhalts- und Gruppenverwaltung Funktionen im Bearbeitungsmodus
Neue Inhalte anlegen
Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
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 (Zentraler Webkoordinator)
Barrierefreiheit
WER IST BETROFFEN? 4 Hauptkategorien Sehbehinderung Hörbehinderung Motorische Beeinträchtigung Kognitive Beeinträchtigung
Weitere Segmente Silver Surfer (Alter 50+) Mobile- und TabletNutzer Suchmaschinen (Google ist blind)
Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
BARRIEREARMES INTERNET Schneller und unkomplizierter Zugriff auf gewünschte Informationen Informationen frei von Barrieren anbieten
Zugänglichkeit für: Menschen mit Behinderungen Menschen ohne Behinderungen Webcrawler Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
VIER PRINZIPIEN DER BARRIEREFREIHEIT 1. Wahrnehmbar: Informationen und Bestandteile der Benutzerschnittstelle müssen den Benutzern so präsentiert werden, dass diese sie wahrnehmen können. 2. Bedienbar: Bestandteile der Benutzerschnittstelle und Navigation müssen bedienbar sein. 3. Verständlich: Informationen und Bedienung der Benutzerschnittstelle müssen verständlich sein. 4. Robust: Inhalte müssen robust genug sein, damit sie zuverlässig von einer großen Auswahl an Benutzeragenten einschließlich assistierender Techniken interpretiert werden können. Web Content Accessibility Guidelines (WCAG) 2.0 Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
BEHINDERTEN-GLEICHSTELLUNGSGESETZ BGG definiert Standard zur Barrierefreiheit 2016 überarbeitet: Öffentliche Einrichtungen
Barrierefreie Infrastruktur Inhalte in Leichter Sprache anbieten
Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
BGG § 4 „Barrierefrei sind bauliche und sonstige Anlagen, Verkehrsmittel, technische Gebrauchsgegenstände, Systeme der Informationsverarbeitung, akustische und visuelle Informationsquellen und Kommunikationseinrichtungen sowie andere gestaltete Lebensbereiche, wenn sie für Menschen mit Behinderungen in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe auffindbar, zugänglich und nutzbar sind.“ Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
WEITERE REGELUNGEN Barrierefreie-Informationstechnik-Verordnung Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz (BITV 2.0)
Ergänzung des BGG
Zugang für behinderte Menschen im Sinne des § 3 bzw. § 4 des Behindertengleichstellungsgesetzes Sachsen ist BITV-freie Zone Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
WEITERE REGELUNGEN Gesetz zur Verbesserung der Integration von Menschen mit Behinderungen im Freistaat 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 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 (Zentraler Webkoordinator)
Barrierefreiheit
UMSETZUNG DER BARRIEREFREIHEIT Layout & Design Zusammenspiel von Farben und Kontrasten Anordnung, Darstellung und Strukturierung der Elemente
Qualitätssicherung Redakteure verantwortlich, Inhalte barrierearm anzubieten Regelmäßige Schulungen für Redakteure Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
TYPISCHE PROBLEME: FORMULAR AUSFÜLLEN Blinde haben keinen Gesamtüberblick Formulare ausfüllen wird Geduldsprobe
Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
TYPISCHE PROBLEME: TASTATURBEDIENBARKEIT
Einige Bereiche über Tastatur nur schwer oder gar nicht erreichbar
Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
TYPISCHE PROBLEME: BILDER OHNE BESCHREIBUNG
Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
TYPISCHE PROBLEME: ÄNDERUNGEN DER WEBSEITE
Änderungen werden nicht bemerkt, Webseite gesperrt
Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
TIPP: MEHRKANAL-PRINZIP Informationen über mindestens zwei Sinne zugänglich Beispiele: Informationen nicht nur grafisch, sondern auch textlich vermitteln Videos mit Untertiteln für Gehörlose
Alle Nicht-Textinhalte brauchen alternative Beschreibung (insbesondere Bilder) Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
TIPP: STÖRENDE INHALTE VERMEIDEN Grelle, flackernde Inhalte vermeiden Animationen, Audio und Video nicht automatisch starten Mögliche Fehler reduzieren: Nicht funktionierende Links Missverständliche Texte
Flash-Webseiten
Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
TIPP: SEMANTISCHE STRUKTURIERUNG Texte semantisch auszeichnen Programme (z.B. Screenreader) müssen erkennen, was Überschrift, Liste oder Zitat ist
Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
TIPP: AUS NUTZERSICHT DENKEN Wichtigste Ziel des Nutzers Schnell das Ziel erreichen Konventionen gut zur Orientierung Wiederkehrende Bedien-Elemente und Inhalte immer an gleichen Stelle „weniger ist mehr“
Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
CHECKLISTE FÜR REDAKTEURE Überschriften Listen Tabellen
Bilder Links Navigation Einfache und klare Sprache Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
ÜBERSCHRIFTEN 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.
Alexander Winterstein (Zentraler Webkoordinator)
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.
Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
TABELLEN 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 (Zentraler Webkoordinator)
Barrierefreiheit
BILDER 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 (Zentraler Webkoordinator)
Barrierefreiheit
LINKS BITV Bedingung 2.4.9 Zweck eines Links Ziel und Zweck eines Links sind aus dem Linktext selbst ersichtlich.
Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
NAVIGATION BITV Bedingung 3.2.3 Einheitliche Navigation Navigationsmechanismen, die innerhalb eines Webangebots wiederholt werden, treten bei jeder Wiederholung in der gleichen Reihenfolge auf, es sei denn, die Nutzerin oder der Nutzer veranlasst eine Änderung.
Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
EINFACHE UND KLARE SPRACHE BITV Bedingung 3.1.5 Einfache Sprache Für alle Inhalte ist die klarste und einfachste Sprache zu verwenden, die angemessen ist. Bei schwierigen Texten werden zusätzliche erklärende Inhalte oder grafische oder Audio-Präsentationen zur Verfügung gestellt.
BITV Bedingung 3.2.4 Einheitliche Bezeichnung In einem Webangebot und innerhalb verbundener Webseiten werden Elemente mit gleicher Funktionalität einheitlich bezeichnet. Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
WOZU DAS GANZE? Texte werden überflogen Lesen auf Bildschirmen anstrengender Darstellung, Strukturierung und Stil Aussagekräftige Überschriften wichtige Begriffe hervorheben Kernaussagen in Boxen zusammenfassen
Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
BEISPIEL: LINK ZUR PRÜFUNGSANMELDUNG
Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
BEISPIEL: LINK ZUR PRÜFUNGSANMELDUNG
Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
SCREENREADER Bildschirmleseprogramm für Blinde und Sehbehinderte
Vermittelt Informationen akustisch oder taktil über Braillezeile Screenreader für Windows-Systeme NVDA (=NonVisual Desktop Access, OpenSource) Cobra (kostenpflichtig)
Screenreader für Linux-Systeme Orca (OpenSource) Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
COBRA (SCREENREADER) Funktionsweise
Alle dargestellten Elemente (Fenster, Menüs, Auswahlboxen, aktuelle Eingabeposition…) werden eingelesen Elemente werden interpretiert und sprachlich ausgegeben Z.B.
Navigation zwischen Überschriften mittels H-Taste möglich Navigation zwischen Blöcken mittels Tab-Taste möglich Tabellen werden von links nach rechts und von oben nach unten gelesen; kein Hinweis beim Zeilenwechsel Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
COBRA (SCREENREADER) Name
Funktion
Max Mustermann
Otto Normalverbraucher
Erika Mustermann
Personalausweisbeauftragte
Maria Musterfrau
Führerscheinbeauftragte
Vorgelesener Text: (Überschrift 2) Name (Überschrift 2) Funktion Max (fett) Mustermann (fett Ende) – Otto Normalverbraucher – Erika Mustermann – Personalausweisbeauftragte – Maria Musterfrau – Führerscheinbeauftragte
Alexander Winterstein (Zentraler Webkoordinator)
Barrierefreiheit
FRAGEN? Wer ist betroffen? Barrierearmes Internet Prinzipien der Barrierefreiheit
Behinderten-Gleichstellungsgesetz 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 Erstellen und Bearbeiten von Web-Inhalten Zentrales Element
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
FUNKTIONEN DES EDITORS Redakteur benötigt keinerlei Vorkenntnisse über HTML & Co. Angelehnt an Textverarbeitungsprogramme
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
FETT, KURSIV UND UNTERSTRICHEN Um gezielt Worte oder Wortgruppen hervorzuheben Keine kompletten Texte formatieren Nicht erlaubt ist Verwendung für Gliederungspunkte
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
LISTEN Unsortierte Listen Sortierte Listen von 1..n Unterlisten durch Einrücken möglich
Verwendung einer Liste >= drei Aufzählungspunkten
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
LINK EINFÜGEN Verweis auf eine andere Seite, Anker auf derselben Seite oder auf ein Dokument Interne Seite: relativer Link ohne tu-freiberg.de davor oder /node/node_id
Externe Seite: vollständige Web-Adresse mit http
Dokument kann über Dateibrowser hochgeladen werden Beschreibungstext für Link eintragen Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
LINK EINFÜGEN – DATEIBROWSER
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
BILD EINFÜGEN Bild kann sich im Internet befinden oder lokal auf dem Computer Über Dateibrowser hochladen/auswählen
Beschreibung und Titel des Bildes eintragen Drei Größen zur Auswahl: 112px, 192px und 544px Automatische Umrechnung auf ausgewählte Breite
Ausrichtung links- oder rechtsbündig Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
ZITATBLOCK Zitatblock = Box für optische Hervorhebung Mehrere Inhalte in einer Box möglich Rahmen umrandet Box
Box geht über gesamte Seitenbreite Sinnvoller Einsatz, kein übermäßiger
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
TRENNSTRICH Dient zur optischen Abgrenzung Beginnt auf neuer Zeile Löscht Fließtext
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
ÜBERSCHRIFTEN Überschriften dienen zur Gliederung der Inhalte Automatische Formatierung Drei Stufen wählbar: Größe 2, 3 und 4 Hierarchisch verwenden
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
INHALTSVERZEICHNIS Erstellt automatisch Übersicht Generiert Sprungmarken vorhandener Überschriften Zeigt Überschriften hierarchisch an
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
ZUM SEITENANFANG – ANKER Erstellt Sprungmarke zurück zum Seitenanfang Kombinierbar mit Inhaltsverzeichnis Schnelleres Navigieren auf langen Seiten
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
TABELLEN Tabelle nur als Datentabellen verwenden Beliebig viele Spalten und Zeilen Tabellenbreite explizit festlegbar Ansonsten automatisch über gesamte Seitenbreite
Zeilen und Spalten hinzufügen/löschen/verbinden Formatierung künftig über zentrales Design
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
MULTIMEDIA Einbinden von multimedialen Elementen möglich Diverse 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 der Inhalte Änderungen an Originalseite automatisch sichtbar
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
VISITENKARTE Mitarbeiter einheitlich darstellbar Bild im Quer-/Hochformat oder Platzhalter Eingabemaske für Personendaten
Alexander Winterstein (Zentraler Webkoordinator)
WYSIWYG-Editor
ACCORDION Erzeugt Container für aufklappbare Inhalte Überschrift + Text
Alexander Winterstein (Zentraler Webkoordinator)
Einsteigerschulung und Basisinformationen zur Barrierefreiheit
ÜBUNGEN Word-Dokument herunterladen http://drupal2.hrz.tu-freiberg.de/schulungsbereich Drupal 2 Meine Gruppen Schulungsbereich
Übungsaufgaben selbstständig bearbeiten Bei Fragen oder Unklarheiten umgehend melden
Alexander Winterstein (Zentraler Webkoordinator)
Einsteigerschulung und Basisinformationen zur Barrierefreiheit
WEITERFÜHRENDE INFORMATIONEN Webportal: http://tu-freiberg.de/webportal/ Informationen zum Webauftritt, Anleitungen und Support
Fragen und Probleme:
[email protected] Weitere Weiterbildungen: Drupal für Fortgeschrittene Einführung in das Bloggen mit WordPress Bloggen für Fortgeschrittene Webinhalte gestalten Online-Umfragen erstellen mit LimeSurvey Alexander Winterstein (Zentraler Webkoordinator)