RUPAL-SCHULUNG - TU Bergakademie...

DRUPAL-SCHULUNG

Einsteigerschulung und Basisinformationen zur Barrierefreiheit

Alexander Winterstein <alexander.winterstein@hrz.tu-freiberg.de> (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

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

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

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.

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

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

Informationen zum Webauftritt, Anleitungen und Support

Fragen und Probleme: webteam@tu-freiberg.de

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

RUPAL-SCHULUNG - TU Bergakademie...

Documents

Amtliche Bekanntmachungen der TU Bergakademie Freibergtu-freiberg.de/sites/default/files/2015-25-2_mhb_ba_geologiemineralogie_druck.pdf · Bachelorarbeit Geologie/Mineralogie mit

Samstag, 15. Oktober 11gotocon.com/dl/goto-amsterdam-2011/slides/...Date Node DISK DISK DISK Date Node DISK DISK DISK Date Node DISK DISK DISK Name Node /some/file /foo/bar HDFS client

Betriebssysteme: 12- Multiprozessorsysteme · Item Multiprocessor Multicomputer Distributed System Node configurationCPU Complete computer Node peripherals All shared Full set per

node contemporary marketing

Gießerei-Institut TU Bergakademie Freibergtu-freiberg.de/sites/default/files/media/giesserei-institut-13599/PDF/giesserei... · Gießerei-Institut Formstofflabor Formstoffprüfung

JUG 2016-01-18 public · Document database schemafrei horizontal skalierbar ausfallsicher mobil + Server div. Synchronisa tionen. Couchbase: Nodeund Bucket Node BucketA Bucket B Node

Amtliche Bekanntmachungen der TU Bergakademie Freibergtu-freiberg.de/sites/default/files/media/...inhaltsverzeichnis anpassung von modulbeschreibungen 1 agglomeratoren 2 allgemeine

Amtliche Bekanntmachungen der TU Bergakademie Freibergtu-freiberg.de/.../2017-29-2_mhb_ma_metallicmaterialstechnology.pdf · Selected Topics of Solid State Physics ... X des Moduls

Transit Nodes und Dynamic Highway Node Routing - behrisch.de · Einführung ransit-NoTde Routing Dynamic Highwy-Noade Routing ransitT Nodes und Dynamic Highway Node Routing Christian

· aa Instrukcja obsfugi Operating instructions Micro Node LR 91 Odbiornik optyczny / Optical receiver WISI MICRO Node S I R91 Optical Receiver CENELEC42 ch. 80/100 dBvv 4 01 0056

MATHEMATIK - TU Bergakademie Freibergtu-freiberg.de/sites/default/files/media/fakultaet-fuer-mathematik-und-informatik... · MATHEMATIK & INFORMATIK WERKSTOFFWISSENSCHAFTEN PHYSIK

Grafiken in LaTeX mit TikZ und pgfplots - Eine EinfÃ¼hrung · Flowchart AbstandzwischendenKnoten \begin{tikzpicture}[node distance=0cm and 0cm] \node[draw, rectangle] (top) { Is

Amtliche Bekanntmachungen der TU Bergakademie Freibergtu-freiberg.de/sites/default/files/media/Studienangebot/... · Metallurgisches Praktikum (Nichteisenmetallurgie) 85 Literaturarbeit

Amtliche Bekanntmachungen der TU Bergakademie Freibergtu-freiberg.de/sites/default/files/z_ba_ina.pdf · 2018. 4. 17. · Elektrochemie: Leitfähigkeit von Elektrolytlösungen; Potentialbildende

MA 2Port Node WM MA 4Port Node WM QuickMAnual Node WM_QuickMAnual... · Nummer der Session z.B. Session 1 - der MA 2PORT Node befindet sich in der Session 1 z.B. Session 0 = keine

Listen-Operationen Informatik 2 - Übung Klemens Schwarz head list Node

ESP32 und Node-RED – // · 4 ESP32 und Node-RED Auf der folgenden Abbildung sehen wir den Raspberry Pi 3 mit seinen diversen Anschlüssen. Abbildung 2 Der Raspberry Pi 3 Wenn man

RUPAL FÜR FORTGESCHRITTENE · Fortgeschrittenenschulung –weiterführendes Arbeiten mit Drupal HTML- / CSS-Crashkurs Barrierefreiheit Suchmaschinenoptimierung (SEO) Inhaltstypen

Passion for Engineering. - TU Bergakademie Freibergtu-freiberg.de/.../SommerORTE2016/Ausstellerportraits/linde.pdf · Die Linde AG, Division Engineering ist ein weltweit tätiger

IoT, APIs und Microservices - alles unter Node-RED