DRUPAL-SCHULUNG
Einsteigerschulung und Basisinformationen zur Barrierefreiheit
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
Einsteigerschulung und Basisinformationen zur Barrierefreiheit
Web-Content-Management-System
Grundlegende Bearbeitung
Barrierefreiheit
Inhalte formatieren und strukturieren
Übungen
INHALTE
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
Web-Content-Management-System Drupal
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
WAS IST EIN CONTENT-MANAGEMENT-SYSTEM?
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
Web-Content-Management-System Drupal
Keine Vorkenntnisse in HTML, CSS, JavaScript, …
Arbeitsplatz benötigt keine zusätzliche Software
Webbrowser ist ausreichend
Bedienfreundliche Umgebung
Durchsetzung eines einheitlichen Corporate
Designs
WAS SIND DIE VORTEILE EINES CMS?
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
Web-Content-Management-System Drupal
Drupal 6 (freie Software OpenSource)
PHP-basiert unter Verwendung MySQL
Ursprüngliche Einführung in Freiberg 2010/2011
Flächendeckende Einführung April 2014
Relaunch: neues Webdesign und Umstellung der
zentralen Seiten
ca. 14.000 Seiten im System, ca. 1.500 Redakteure
KURZVORSTELLUNG DRUPAL
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
Web-Content-Management-System Drupal
Core mit Grundfunktionalität
User, Node, System
Module für zusätzliche Funktionen
Galerie, Editor, Dateibrowser, …
über 12.200 vollwertige Drupal-Module
davon 6.900 für Drupal 6 kompatibel
AUFBAU VON DRUPAL
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
Web-Content-Management-System Drupal
Menschen- und maschinenlesbare Adressen
Inhaltstypen für verschiedenartige Seiten
Rollenbasiertes Rechtesystem
Versionierung der Inhalte
Anbindung an LDAP-Server
…
EIGENSCHAFTEN VON DRUPAL
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
o Zielsystem für das
gesamte
Webangebot
o Pflege der Inhalte
Drupal 3
Testsystem
Drupal 2
Qualitätssystem
Drupal 1
Produktivsystem
o Ausbildungs- und
Schulungssystem
o Kopie des
Produktivsystems
o Tests von Patches
und Updates
o Testsystem für
Erweiterungen,
Module
o Redakteure
o Webkoordinator
o Entwickler
o Webkoordinator
o Entwickler
o Nutzer
o Redakteure
o Webkoordinator
o Entwickler
SYSTEMLANDSCHAFT
Web-Content-Management-System Drupal
Login erfolgt mittels Shibboleth-Authentifizierung
Zentrales Uni-Login
Login-Link im Footermenü: http://tu-freiberg.de/login
Schulungssystem:
http://drupal2.hrz.tu-freiberg.de
Hinweis: Erst nach erstem Login können
Berechtigungen eingestellt werden!
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
LOGIN INS WEBCMS
Grundlegende Bedienung
Grundlegende Bedienung
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
REDAKTIONSMODUS
Bearbeitungsleiste
Inhalts- und Gruppenverwaltung
Grundlegende Bedienung
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
NEUE SEITE ERSTELLEN
Grundlegende Bedienung
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
NEUE SEITE ERSTELLEN
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
Blindheit
Sehbehinderung oder Farbenblindheit
Einschränkung der Motorik der Arme oder Hände
Taubheit oder Höreinschränkung
Lernbehinderung
Kognitive Behinderung
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
BARRIEREN FÜR MENSCHEN MIT BEHINDERUNGEN
Barrierefreiheit
Schneller und unkomplizierter Zugriff auf
gewünschte Informationen
Informationen frei von Barrieren anbieten
Zugänglichkeit für Menschen mit und ohne
Behinderungen sowie Webcrawlern
Wahrnehmbarkeit, Verständlichkeit der Inhalte,
Bedienbarkeit und Navigation der Website
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
BARRIEREARMES INTERNET
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 <[email protected]> (Zentraler Webkoordinator)
UMSETZUNG DER BARRIEREFREIHEIT
Barrierefreiheit
Verordnung zur Schaffung barrierefreier
Informationstechnik nach dem
Behindertengleichstellungsgesetz (BITV 2.0)
Ergänzung des Behindertengleichstellungsgesetzes
(BGG)
Zugang für behinderte Menschen
(im Sinne des § 3 des
Behindertengleichstellungsgesetzes)
ermöglichen/erleichtern
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
BARRIEREFREIE-INFORMATIONSTECHNIK-VERORDNUNG
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 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 <[email protected]> (Zentraler Webkoordinator)
BARRIEREFREIE-INFORMATIONSTECHNIK-VERORDNUNG
Barrierefreiheit
Überschriften
Listen
Tabellen
Bilder
Links
Navigation
Einfache und klare Sprache
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
CHECKLISTE FÜR REDAKTEURE
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.
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.
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
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
BITV Bedingung 2.4.9 Zweck eines Links
Ziel und Zweck eines Links sind aus dem Linktext
selbst ersichtlich.
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
LINKS
Barrierefreiheit
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 <[email protected]> (Zentraler Webkoordinator)
NAVIGATION
Barrierefreiheit
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 <[email protected]> (Zentraler Webkoordinator)
EINFACHE UND KLARE SPRACHE
Barrierefreiheit
Texte werden überflogen
Lesen auf Bildschirmen anstrengender
Darstellung, Strukturierung und Stil
Aussagekräftige Überschriften
wichtige Begriffe hervorheben
Kernaussagen in Boxen zusammenfassen
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
WOZU DAS GANZE?
Barrierefreiheit
Intuitives Vorgehen:
Über horizontale Navigation direkt unter Studium
Rund ums Studium
Über Bereichsnavigation
Prüfungen
Seiteninhalt querlesen, anhand der Überschriften
Abschnitt Prüfungsanmeldung
Im gesuchten Absatz querlesen
Link zur Prüfungsanmeldung folgen
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
BEISPIEL: LINK ZUR PRÜFUNGSANMELDUNG
Barrierefreiheit
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
BEISPIEL: LINK ZUR PRÜFUNGSANMELDUNG 1
2
3
4
5
Barrierefreiheit
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 <[email protected]> (Zentraler Webkoordinator)
SCREENREADER
Barrierefreiheit
Funktionsweise
Alle dargestellten Elemente (Fenster, Menüs, Auswahlboxen,
aktuelle Eingabeposition…) werden eingelesen
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
Tabellen werden von links nach rechts und von oben nach
unten gelesen; kein Hinweis beim Zeilenwechsel
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
COBRA (SCREENREADER)
Barrierefreiheit
Name Funktion
Max Mustermann Otto Normalverbraucher
Erika Mustermann Personalausweisbeauftragte
Maria Musterfrau Führerscheinbeauftragte
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
COBRA (SCREENREADER)
Vorgelesener Text:
(Ü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
WYSIWYG-Editor
WYSIWYG = What You See Is What You Get
Erstellen und Bearbeiten von Web-Inhalten
Zentrales Element
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
DER WYSIWYG-EDITOR
WYSIWYG-Editor
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
FUNKTIONEN DES EDITORS
Redakteur benötigt keinerlei Vorkenntnisse über
HTML & Co.
Angelehnt an Textverarbeitungsprogramme
WYSIWYG-Editor
Um gezielt Worte oder Wortgruppen hervorzuheben
Keine kompletten Texte formatieren
Nicht erlaubt ist Verwendung für Gliederungspunkte
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
FETT, KURSIV UND UNTERSTRICHEN
WYSIWYG-Editor
Unsortierte Listen
Sortierte Listen von 1..n
Unterlisten durch Einrücken möglich
Verwendung einer Liste >= drei Aufzählungspunkten
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
LISTEN
WYSIWYG-Editor
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 <[email protected]> (Zentraler Webkoordinator)
LINK EINFÜGEN
WYSIWYG-Editor
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
LINK EINFÜGEN – DATEIBROWSER
WYSIWYG-Editor
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 <[email protected]> (Zentraler Webkoordinator)
BILD EINFÜGEN
WYSIWYG-Editor
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 <[email protected]> (Zentraler Webkoordinator)
ZITATBLOCK
WYSIWYG-Editor
Dient zur optischen Abgrenzung
Beginnt auf neuer Zeile
Löscht Fließtext
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
TRENNSTRICH
WYSIWYG-Editor
Überschriften dienen zur Gliederung der Inhalte
Automatische Formatierung
Drei Stufen wählbar: Größe 2, 3 und 4
Hierarchisch verwenden
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
ÜBERSCHRIFTEN
WYSIWYG-Editor
Erstellt automatisch Übersicht
Generiert Sprungmarken vorhandener Überschriften
Zeigt Überschriften hierarchisch an
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
INHALTSVERZEICHNIS
WYSIWYG-Editor
Erstellt Sprungmarke zurück zum Seitenanfang
Kombinierbar mit Inhaltsverzeichnis
Schnelleres Navigieren auf langen Seiten
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
ZUM SEITENANFANG – ANKER
WYSIWYG-Editor
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 <[email protected]> (Zentraler Webkoordinator)
TABELLEN
WYSIWYG-Editor
Einbinden von multimedialen Elementen möglich
Diverse Formate [Flash, HTML5, Quicktime, …]
Datei kann auch über Dateibrowser
hochgeladen/ausgewählt werden
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
MULTIMEDIA
WYSIWYG-Editor
Interne Seiten einbinden
[[nid:1234]]
Vollständige Darstellung der
Inhalte
Änderungen an Originalseite
automatisch sichtbar
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
SEITE EINBETTEN
WYSIWYG-Editor
Mitarbeiter einheitlich darstellbar
Bild im Quer-/Hochformat oder Platzhalter
Eingabemaske für Personendaten
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
VISITENKARTE
WYSIWYG-Editor
Erzeugt Container für aufklappbare Inhalte
Überschrift + Text
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
ACCORDION
WYSIWYG-Editor
Erzeugt Bildergalerie als Slider
Max. fünf Bilder auswählbar
Zeit für Bildwechsel einstellbar
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
SLIDESHOW – BILDGLEITER
Einsteigerschulung und Basisinformationen zur Barrierefreiheit
Word-Dokument herunterladen
http://tu-freiberg.de/webportal/schulungen/drupal-
fuer-einsteiger
TU-Startseite Direktlink „Webportal“
Schulungen Drupal für Einsteiger Materialien
Übungsaufgaben selbstständig bearbeiten
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
ÜBUNGEN
Einsteigerschulung und Basisinformationen zur Barrierefreiheit
Webportal
Informationen zum Webauftritt, Anleitungen und Support
http://tu-freiberg.de/webportal/
Fragen und Probleme
Feedbackfragebogen
http://limesurvey.hrz.tu-
freiberg.de/limesurvey/index.php/255381/lang-de
Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)
WEITERFÜHRENDE INFORMATIONEN