rupal-schulungtu-freiberg.de/sites/default/files/media/willkommen-im... · 2018-04-17 · inhalte...

DRUPAL-SCHULUNG

Einsteigerschulung und Basisinformationen zur Barrierefreiheit

Alexander Winterstein <[email protected]> (Zentraler Webkoordinator)


Web-Content-Management-System

Grundlegende Bearbeitung

Barrierefreiheit

Inhalte formatieren und strukturieren

Übungen

INHALTE


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?



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?



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



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



Menschen- und maschinenlesbare Adressen

Inhaltstypen für verschiedenartige Seiten

Rollenbasiertes Rechtesystem

Versionierung der Inhalte

Anbindung an LDAP-Server

…

EIGENSCHAFTEN VON DRUPAL



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


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!


LOGIN INS WEBCMS

Grundlegende Bedienung

http://drupal1.hrz.tu-freiberg.de/login




http://drupal3.hrz.tu-freiberg.de/







REDAKTIONSMODUS

Bearbeitungsleiste

Inhalts- und Gruppenverwaltung



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/


BARRIEREFREIHEIT

http://www.barrierefreies-webdesign.de/





Barrierefreiheit

Blindheit

Sehbehinderung oder Farbenblindheit

Einschränkung der Motorik der Arme oder Hände

Taubheit oder Höreinschränkung

Lernbehinderung

Kognitive Behinderung


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


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


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


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.


BARRIEREFREIE-INFORMATIONSTECHNIK-VERORDNUNG

Barrierefreiheit

Überschriften

Listen

Tabellen

Bilder

Links

Navigation

Einfache und klare Sprache


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.


Ü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.


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.


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.


BILDER

Barrierefreiheit

BITV Bedingung 2.4.9 Zweck eines Links

Ziel und Zweck eines Links sind aus dem Linktext

selbst ersichtlich.


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.


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.


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


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


BEISPIEL: LINK ZUR PRÜFUNGSANMELDUNG

Barrierefreiheit


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)


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


COBRA (SCREENREADER)

Barrierefreiheit

Name Funktion

Max Mustermann Otto Normalverbraucher

Erika Mustermann Personalausweisbeauftragte

Maria Musterfrau Führerscheinbeauftragte


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


DER WYSIWYG-EDITOR

WYSIWYG-Editor


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


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


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


LINK EINFÜGEN

WYSIWYG-Editor


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


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


ZITATBLOCK

WYSIWYG-Editor

Dient zur optischen Abgrenzung

Beginnt auf neuer Zeile

Löscht Fließtext


TRENNSTRICH

WYSIWYG-Editor

Überschriften dienen zur Gliederung der Inhalte

Automatische Formatierung

Drei Stufen wählbar: Größe 2, 3 und 4

Hierarchisch verwenden


ÜBERSCHRIFTEN

WYSIWYG-Editor

Erstellt automatisch Übersicht

Generiert Sprungmarken vorhandener Überschriften

Zeigt Überschriften hierarchisch an


INHALTSVERZEICHNIS

WYSIWYG-Editor

Erstellt Sprungmarke zurück zum Seitenanfang

Kombinierbar mit Inhaltsverzeichnis

Schnelleres Navigieren auf langen Seiten


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


TABELLEN

WYSIWYG-Editor

Einbinden von multimedialen Elementen möglich

Diverse Formate [Flash, HTML5, Quicktime, …]

Datei kann auch über Dateibrowser

hochgeladen/ausgewählt werden


MULTIMEDIA

WYSIWYG-Editor

Interne Seiten einbinden

[[nid:1234]]

Vollständige Darstellung der

Inhalte

Änderungen an Originalseite

automatisch sichtbar


SEITE EINBETTEN

WYSIWYG-Editor

Mitarbeiter einheitlich darstellbar

Bild im Quer-/Hochformat oder Platzhalter

Eingabemaske für Personendaten


VISITENKARTE

WYSIWYG-Editor

Erzeugt Container für aufklappbare Inhalte

Überschrift + Text


ACCORDION

WYSIWYG-Editor

Erzeugt Bildergalerie als Slider

Max. fünf Bilder auswählbar

Zeit für Bildwechsel einstellbar


SLIDESHOW – BILDGLEITER


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


ÜBUNGEN

http://tu-freiberg.de/webportal/schulungen/drupal-fuer-einsteiger










Webportal

Informationen zum Webauftritt, Anleitungen und Support

http://tu-freiberg.de/webportal/

Fragen und Probleme

[email protected]

Feedbackfragebogen

http://limesurvey.hrz.tu-

freiberg.de/limesurvey/index.php/255381/lang-de


WEITERFÜHRENDE INFORMATIONEN





mailto:[email protected]



http://limesurvey.hrz.tu-freiberg.de/limesurvey/index.php/255381/lang-de






rupal-schulungtu-freiberg.de/sites/default/files/media/willkommen-im... · 2018-04-17 · inhalte...

Documents