RUPAL-SCHULUNGtu-freiberg.de/sites/default/files/media/willkommen-im... · 2018-04-17 · Inhalte...

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

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

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

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

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

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

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

Webportal

Informationen zum Webauftritt, Anleitungen und Support

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

Fragen und Probleme

webteam@tu-freiberg.de

Feedbackfragebogen

http://limesurvey.hrz.tu-

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

WEITERFÜHRENDE INFORMATIONEN

RUPAL-SCHULUNGtu-freiberg.de/sites/default/files/media/willkommen-im... · 2018-04-17 · Inhalte...

Documents

Transcript of RUPAL-SCHULUNGtu-freiberg.de/sites/default/files/media/willkommen-im... · 2018-04-17 · Inhalte...

GABETTA - MünchenMusik · 2018. 4. 10. · GABETTA Ergreifend und von federleichter Eleganz BOBBY McFERRIN Circlesongs SUMMERPROMS IM BRUNNENHOF Konzerte unter freiem Himmel SCHLOSSKONZERTE

Und Akikah

6 Javascript 2

VORLAGE - rp-giessen.hessen.de IX 17... · der Firmen CSL Behring und CSL Plasma vorliegt, ist es aus bauleitplanerischer Sicht erfor- derlich, bereits im Rahmen der Änderung des

Andry (javascript)

Belajar Javascript

Pokémon Ranger: Spuren des Lichts · 2018-11-15 · HINWEIS: START und SELECT werden im spiel nicht verwendet. HINWEIS: Sollten deine Hände múde werden, lege bitte eine Pause ein.

JavaScript (FUNGSI)

SCRIPT language="Javascript"

JAVASCRIPT - Gunadarmanisa_raihani.staff.gunadarma.ac.id/Downloads/files/65178... · •JavaScript adalah bahasa script yang berbasis pada pemrograman java •JavaScript digunakan

JQuery 3 Pengenalan Javascript

PENGANTAR JAVASRIPT. - · PDF filePengantar Javascript 1 PENGANTAR JAVASRIPT. Sekilas Tentang Javascript Javascript adalah bahasa pemrograman yang popular. Javascript adalah bahasa

Hm Javascript

Javascript Part 1

Pendeln berdenAtlantik - univie.ac.at · 2017. 10. 18. · Josemi Carmona und Javier Colina geben im Großen Sendesaal ihr gemeisames Österreich-Debüt ORF RADIOKULTURHAUS ORF.WIE

Tutorial JavaScript

Dasar-dasar javascript

JAVASCRIPT - · PDF file– JavaScript memungkinkan untuk memvalidasi masukan-masukan pada formulir sebelum dikirim ke server – JavaScript dapat mengimplementasi permainan interaktif

MenGenAl Javascript

Und. Munpes & Sekitar