RUPAL-SCHULUNG - TU Bergakademie Freibergtu-freiberg.de/.../pdf/einsteigerschulung_drupal_ss2017.pdf · Web-Content-Management-System Drupal Core mit Grundfunktionalität User, Node,

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

KURZVORSTELLUNG 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)

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



Redaktionssystem

Webbasiert

Drupal Version 6.x

Core mit Grundfunktionen

Module für Erweiterungen

3 Drupal-Instanzen

FRAGEN?


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.


LOGIN INS WEBCMS

Grundlegende Bedienung

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

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



REDAKTIONSMODUS

Inhalts- und Gruppenverwaltung



GRUPPENVERWALTUNG



INHALTSVERWALTUNG



REDAKTIONSMODUS

Bearbeitungsleiste



VERSIONEN



UNTERSEITE HINZUFÜGEN



NEUE SEITE ERSTELLEN



FRAGEN?

Login über Fußzeile

Inhalts- und Gruppenverwaltung

Funktionen im Bearbeitungsmodus

Neue Inhalte anlegen

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

4 Hauptkategorien

Sehbehinderung

Hörbehinderung

Motorische

Beeinträchtigung

Kognitive

Beeinträchtigung

Weitere Segmente

Silver Surfer (Alter 50+)

Mobile- und Tablet-

Nutzer

Suchmaschinen

(Google ist blind)


WER IST BETROFFEN?

Barrierefreiheit

Schneller und unkomplizierter Zugriff auf

gewünschte Informationen

Informationen frei von Barrieren anbieten

Zugänglichkeit für:

Menschen mit Behinderungen

Menschen ohne Behinderungen

Webcrawler


BARRIEREARMES INTERNET

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


VIER PRINZIPIEN DER BARRIEREFREIHEIT

Barrierefreiheit

BGG definiert Standard zur Barrierefreiheit

2016 überarbeitet:

Öffentliche Einrichtungen

Barrierefreie Infrastruktur

Inhalte in Leichter Sprache anbieten


BEHINDERTEN-GLEICHSTELLUNGSGESETZ

Barrierefreiheit

„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.“


BGG § 4

Barrierefreiheit

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


WEITERE REGELUNGEN

Barrierefreiheit

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


WEITERE REGELUNGEN

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

Blinde haben keinen

Gesamtüberblick

Formulare ausfüllen wird

Geduldsprobe


TYPISCHE PROBLEME: FORMULAR AUSFÜLLEN

Barrierefreiheit


TYPISCHE PROBLEME: TASTATURBEDIENBARKEIT

Einige Bereiche über Tastatur nur

schwer oder gar nicht erreichbar

Barrierefreiheit


TYPISCHE PROBLEME: BILDER OHNE BESCHREIBUNG

Barrierefreiheit


TYPISCHE PROBLEME: ÄNDERUNGEN DER WEBSEITE

Änderungen werden nicht bemerkt,

Webseite gesperrt

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)

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

Barrierefreiheit


TIPP: SEMANTISCHE STRUKTURIERUNG

Texte semantisch auszeichnen

Programme (z.B. Screenreader) müssen erkennen,

was Überschrift, Liste oder Zitat ist

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“

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


BEISPIEL: LINK ZUR PRÜFUNGSANMELDUNG

Barrierefreiheit


BEISPIEL: LINK ZUR PRÜFUNGSANMELDUNG

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

Barrierefreiheit

Wer ist betroffen?

Barrierearmes Internet

Prinzipien der Barrierefreiheit

Behinderten-Gleichstellungsgesetz

Typische Probleme und Tipps

Checkliste für Redakteure

Screenreader


FRAGEN?

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


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


ÜBUNGEN

http://drupal2.hrz.tu-freiberg.de/schulungsbereich


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


WEITERFÜHRENDE INFORMATIONEN

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

mailto:[email protected]

Documents

RUPAL-SCHULUNG - TU Bergakademie Freibergtu-freiberg.de/.../pdf/einsteigerschulung_drupal_ss2017.pdf · Web-Content-Management-System Drupal Core mit Grundfunktionalität User, Node,