DRUPAL-SCHULUNG TEIL 1

Transkript

1 DRUPAL-SCHULUNG TEIL 1 Einsteigerschulung und Basisinformationen zur Barrierefreiheit

2 Einsteigerschulung und Basisinformationen zur Barrierefreiheit INHALTSVERZEICHNIS TEIL 1 1. Web-Content-Management-System Drupal 2. Grundlegende Bearbeitung Redaktionsmodus 3. Barrierefreiheit 4. Inhalte formatieren und strukturieren

3 Web-Content-Management-System Drupal WAS IST EIN CONTENT-MANAGEMENT-SYSTEM? 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

4 Web-Content-Management-System Drupal WAS SIND DIE VORTEILE EINES CMS? Einfache Erstellung und Verwaltung von Webinhalten Keine Vorkenntnisse in HTML, CSS, JavaScript, Arbeitsplatz benötigt keine zusätzliche Software Webbrowser ist ausreichend Bedienfreundliche Umgebung Durchsetzung eines einheitlichen Corporate Designs

5 Web-Content-Management-System Drupal KURZVORSTELLUNG DRUPAL Drupal 6 Freie Software (OpenSource) PHP-basiert unter Verwendung MySQL Ursprüngliche Einführung in Freiberg 2010/2011 Flächendeckende Einführung 2014 in Verbindung mit neuem Webdesign und Umstellung der zentralen Seiten auf das WebCMS ca Seiten im System, etwa 450 Redakteure

6 Web-Content-Management-System Drupal AUFBAU VON DRUPAL Core mit Grundfunktionalität User, Node, System Module für zusätzliche Funktionen Galerie, Editor, Dateibrowser über vollwertige Drupal-Module davon für Drupal 6 kompatibel

7 Web-Content-Management-System Drupal EIGENSCHAFTEN VON DRUPAL Permalinks feste, unveränderbare Adressierung Menschen- und maschinenlesbare Adressen Inhaltstypen für verschiedenartige Seiten Unterschiedliche Berechtigungen möglich Rollenbasiertes Rechtesystem Versionierung der Inhalte Anbindung an LDAP-Server Shibboleth-Authentifizierung möglich Eingebaute Caching-Mechanismen

8 Web-Content-Management-System Drupal SYSTEMLANDSCHAFT Drupal 2 Testsystem Drupal 3 Qualitätssystem Drupal 1 Produktivsystem o Tests von Patches und Updates o Testsystem für Erweiterungen, Module o Ausbildungs- und Schulungssystem o Kopie des Produktivsystems o Zielsystem für das gesamte Webangebot o Pflege der Inhalte o Webkoordinator o Entwickler o Redakteure o Webkoordinator o Entwickler o Nutzer o Redakteure o Webkoordinator o Entwickler

9 Grundlegende Bedienung PRAKTISCHER EINSATZ Login ins System Redaktionsmodus Neue Seite erstellen

10 Grundlegende Bedienung LOGIN INS WEBCMS Login erfolgt mittels Shibboleth-Authentifizierung Zentrales Uni-Login Login-Link im Footermenü Schulungssystem: Erst nach erstem Login können Berechtigungen eingestellt werden

11 Grundlegende Bedienung REDAKTIONSMODUS Bearbeitungsleiste Inhalts- und Gruppenverwaltung

12 Grundlegende Bedienung NEUE SEITE ERSTELLEN

13 Grundlegende Bedienung NEUE SEITE ERSTELLEN

14 Grundlegende Bedienung NEUE SEITE ERSTELLEN ÜBUNG Seitentitel festlegen idealerweise mit Namen Mit beliebigen langen Inhalt (> 200 Wörter) füllen Z.B. Zwei Unterseiten anlegen Eine der beiden Unterseiten wieder löschen

15 Barrierefreiheit BARRIEREFREIHEIT Barrierefreies Webdesign ist die Kunst, Webseiten so zu gestalten, dass jeder sie nutzen und lesen kann. Quelle:

16 Barrierefreiheit BARRIEREN FÜR MENSCHEN MIT BEHINDERUNGEN Blindheit Sehbehinderung oder Farbenblindheit Einschränkung der Motorik der Arme oder Hände Taubheit oder Höreinschränkung Lernbehinderung Kognitive Behinderung

17 Barrierefreiheit BARRIEREARMES INTERNET 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

18 Barrierefreiheit UMSETZUNG DER 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

19 Barrierefreiheit BARRIEREFREIE-INFORMATIONSTECHNIK-VERORDNUNG 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

20 Barrierefreiheit CHECKLISTE FÜR REDAKTEURE Überschriften Listen Tabellen Bilder Links Navigation Einfache und klare Sprache

21 Barrierefreiheit ÜBERSCHRIFTEN BITV Bedingung Beschreibungen Überschriften und Label (Beschriftungen) kennzeichnen das Thema oder den Zweck. BITV Bedingung Abschnittsüberschriften Es sind Abschnittsüberschriften zu verwenden, die den Inhalt weiter strukturieren.

22 Barrierefreiheit LISTEN 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.

23 Barrierefreiheit TABELLEN BITV Bedingung 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 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.

24 Barrierefreiheit BILDER BITV Bedingung 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 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.

25 Barrierefreiheit LINKS BITV Bedingung Zweck eines Links Ziel und Zweck eines Links sind aus dem Linktext selbst ersichtlich.

26 Barrierefreiheit NAVIGATION BITV Bedingung 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.

27 Barrierefreiheit EINFACHE UND KLARE SPRACHE BITV Bedingung 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 Einheitliche Bezeichnung In einem Webangebot und innerhalb verbundener Webseiten werden Elemente mit gleicher Funktionalität einheitlich bezeichnet.

28 Barrierefreiheit EINFACHE UND KLARE SPRACHE Texte werden überflogen Lesen auf Bildschirmen anstrengender Darstellung, Strukturierung und Stil Aussagekräftige Überschriften wichtige Begriffe hervorheben Kernaussagen in Boxen zusammenfassen

29 Barrierefreiheit BEISPIEL: LINK ZUR PRÜFUNGSANMELDUNG 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

30 Barrierefreiheit BEISPIEL: LINK ZUR PRÜFUNGSANMELDUNG

31 Barrierefreiheit EINFACHE UND KLARE SPRACHE Texte werden überflogen Lesen auf Bildschirmen anstrengender Darstellung, Strukturierung und Stil Aussagekräftige Überschriften wichtige Begriffe hervorheben Kernaussagen in Boxen zusammenfassen

32 Barrierefreiheit SCREENREADER 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)

33 Barrierefreiheit COBRA (SCREENREADER) 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

34 Barrierefreiheit COBRA (SCREENREADER) Name Max Mustermann Erika Mustermann Maria Musterfrau Funktion Otto Normalverbraucher Personalausweisbeauftragte Führerscheinbeauftragte 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

35 WYSIWYG-Editor DER WYSIWYG-EDITOR WYSIWYG = What You See Is What You Get Erstellen und Bearbeiten von Web-Inhalten Zentrales Element

36 WYSIWYG-Editor FUNKTIONEN DES EDITORS Fett, kursiv und unterstrichen Unsortierte und sortierte Liste Ausrücken und Einrücken Rückgängig und Wiederholen Link einfügen/verändern und entfernen Bild einfügen/verändern Zitatblock Trennlinie einfügen Formatierungen zurücksetzen Vorlage/Überschriften Tabelle erstellen/bearbeiten Multimedia einbetten/bearbeiten Inhaltsverzeichnis einfügen Visitenkarte einbinden Embed a Node Redakteur benötigt keinerlei Vorkenntnisse über HTML & Co. Angelehnt an Textverarbeitungsprogramme

37 WYSIWYG-Editor FETT, KURSIV UND UNTERSTRICHEN Um gezielt Worte oder Wortgruppen hervorzuheben Keine kompletten Texte formatieren Nicht erlaubt ist Verwendung für Gliederungspunkte

38 WYSIWYG-Editor LISTEN Unsortierte Listen Sortierte Listen von 1..n Unterlisten durch Einrücken möglich Verwendung einer Liste >= drei Aufzählungspunkten

39 WYSIWYG-Editor LINK EINFÜGEN Verweis auf eine andere Seite, Anker auf derselben Seite oder auf ein Dokument Interne Seite: /node/node_id Externe Seite: vollständige Web-Adresse Dokument kann über Dateibrowser hochgeladen werden Beschreibungstext für Link eintragen

40 WYSIWYG-Editor LINK EINFÜGEN

41 WYSIWYG-Editor BILD EINFÜGEN 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

42 WYSIWYG-Editor ZITATBLOCK 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

43 WYSIWYG-Editor TRENNSTRICH Dient zur optischen Abgrenzung Beginnt auf neuer Zeile Löscht Fließtext

44 WYSIWYG-Editor ÜBERSCHRIFTEN Überschriften dienen zur Gliederung der Inhalte Automatische Formatierung Drei Stufen wählbar: Größe 2, 3 und 4 Hierarchisch verwenden

45 WYSIWYG-Editor INHALTSVERZEICHNIS Erstellt automatisch Übersicht Generiert Sprungmarken vorhandener Überschriften Zeigt Überschriften hierarchisch an

46 WYSIWYG-Editor TABELLEN 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

47 WYSIWYG-Editor MULTIMEDIA Einbinden von multimedialen Elementen möglich Diverse Formate [Flash, HTML5, Quicktime, ] Datei kann auch über Dateibrowser hochgeladen/ausgewählt werden

48 WYSIWYG-Editor SEITE EINBETTEN Interne Seiten einbinden [[nid:1234]] Vollständige Darstellung der Inhalte Änderungen an Originalseite automatisch sichtbar

49 WYSIWYG-Editor VISITENKARTE Mitarbeiter einheitlich darstellbar Bild im Quer-/Hochformat oder Platzhalter Eingabemaske für Personendaten

50 WYSIWYG-Editor EDITOR - ÜBUNG Überschriftebenen anlegen Inhaltsverzeichnis anlegen Listen anlegen Bilder einbinden Trennlinie einfügen Links setzen und entfernen Dateimanager

51 WYSIWYG-Editor ÜBERSCHRIFTEN Strukturierung der Inhalte mit Gliederungsüberschriften Verschiedene Überschriften einfügen Größe 1: Erste Ordnung Größe 2: Zweite Ordnung Größe 3: Dritte Ordnung Hierarchische Verwendung berücksichtigen

52 WYSIWYG-Editor INHALTSVERZEICHNIS Auf der Seite mit den Gliederungsüberschriften ein Inhaltsverzeichnis einfügen Weitere Überschriften hinzufügen / entfernen Verzeichnis aktualisieren

53 WYSIWYG-Editor LISTEN Sortierte Liste mit mind. 5 Punkten einfügen Unsortierte Liste mit mind. 5 Anstrichen einfügen Listenebene erhöhen bzw. verringern

54 WYSIWYG-Editor BILDER In die langen Textpassagen ein Bild einfügen Beschriftung und Titel eintragen Verschiedene Ausrichtungen und Größen ausprobieren Fließtext beachten / ausprobieren

55 WYSIWYG-Editor BILDFORMATIERUNG

56 WYSIWYG-Editor BILDFORMATIERUNG

57 WYSIWYG-Editor TRENNLINIE Mittels Trennlinie den Fließtext bei Bildern unterbinden Optische Trennung zwischen Inhalten

58 WYSIWYG-Editor LINKS Verschiedene Links einfügen Wort/Wortgruppe markieren Auf beliebige interne Seite verlinken Auf Dokument aus Dateibrowser verlinken [z.b. PDF] Auf externen Link [z.b. verlinken Jeweils den Linktitel eintragen

59 Dateimanager DATEIMANAGER

60 Dateimanager HANDHABUNG DES DATEIMANAGERS

61 Dateimanager DATEIEN HOCHLADEN UND LÖSCHEN

62 Dateimanager ORDNER ERSTELLEN UND LÖSCHEN

63 Dateimanager BILDER BEARBEITEN

64 Dateimanager BILDER BEARBEITEN

65 Dateimanager ÜBUNG Neue Ordner im eigenen Bereichsordner erstellen Je eine Bild- und eine Textdatei hochladen Größeres Bild auf bestimmten Ausschnitt zuschneiden

66 DRUPAL-SCHULUNG TEIL 2 Fortgeschrittenenschulung weiterführendes Arbeiten mit Drupal

67 Fortgeschrittenenschulung weiterführendes Arbeiten mit Drupal INHALTSVERZEICHNIS TEIL 2 1. Inhaltstypen Seite, Bildergalerie, News, Formular, Infoblock 2. Mehrsprachigkeit 3. Weitere Funktionen Menü, Berechtigungen

68 Neue Inhalte erstellen INHALTSTYPEN Neue Seite Bildergalerie News Formular Infoblock

71 Neue Inhalte erstellen INHALTSTYPEN - ÜBUNG Neue Seite Bildergalerie News Formular neue Galerie mit min. 5 Bildern erstellen Upload sowie Dateibrowser nutzen Bildergalerie auf der neu angelegten Unterseite einbinden Embed a Node - [nid:1234] Infoblock

73 Neue Inhalte erstellen INHALTSTYPEN - ÜBUNG Neue Seite Bildergalerie News Aktuelle Meldungen anlegen Sichtbarkeit automatisch auf Bereichsstartseite Wahlweise mit und ohne Bild Formular Infoblock

79 Neue Inhalte erstellen INHALTSTYPEN - ÜBUNG Neue Seite Bildergalerie News Formular Infoblock Formular mit folgenden Feldern anlegen: Anrede Name -Adresse Feedback -Versand einstellen für: 1. -Adresse des Formularausfüllers 2. -Adresse des Formularverantwortlichen

81 Neue Inhalte erstellen INHALTSTYPEN - ÜBUNG Neue Seite Bildergalerie News Formular Infoblock zum Bereich hinzufügen Portraitbild einbinden Zusammenspiel mit Kontaktblock einer Inhaltsseite erkunden Infoblock entfernen Infoblock

82 Mehrsprachigkeit MEHRSPRACHIGKEIT

83 Mehrsprachigkeit SPRACHE ZUWEISEN

84 Mehrsprachigkeit ÜBERSETZUNG HINZUFÜGEN

85 Erweiterte Funktionen MENÜ BEARBEITEN

86 Erweiterte Funktionen MENÜ BEARBEITEN

87 Erweiterte Funktionen BERECHTIGUNGEN Bereichsadministratoren verwalten Berechtigungen Meine Gruppen Mitglieder Redakteure hinzufügen/entfernen Redakteur zum Administrator ernennen/entfernen Erst nach erstem Login können Berechtigungen eingestellt werden!

88 Fortgeschrittenenschulung weiterführendes Arbeiten mit Drupal Fragen?

89 Fortgeschrittenenschulung weiterführendes Arbeiten mit Drupal WEITERFÜHRENDE INFORMATIONEN Webportal Informationen zum Webauftritt, Anleitungen und Support Relaunch des Internetauftritts Anforderungen, Projektablauf Feedbackfragebogen