WEB-CONTENT-MANAGEMENT-SYSTEM DER TU BERGAKADEMIE FREIBERG Einsteigerschulung und Basisinformationen zur Barrierefreiheit
Web-Content-Management-System der TU Bergakademie Freiberg INHALTSVERZEICHNIS 1. Web-Content-Management-System Drupal 2. Bearbeitungsleiste des WebCMS 3. Barrierefreiheit 4. WYSIWYG-Editor 5. Übung
Web-Content-Management-System Drupal WEB-CONTENT-MANAGEMENT-SYSTEM Software zur Erstellung und Verwaltung von Webseiten Freie Software GNU General Public License PHP-basiert unter Verwendung MySQL
Web-Content-Management-System Drupal AUFBAU VON DRUPAL Core mit Grundfunktionalität Module mit Zusatzfunktionen über 11.200 vollwertige Module davon 6.800 für Drupal 6
Web-Content-Management-System Drupal EIGENSCHAFTEN VON DRUPAL Strikte Trennung von Inhalt und Layout Inhaltstypen für verschiedenartige Seiten Versionierung der Inhalte Rollenbasiertes Rechtesystem Anpassung des Layouts Mehrsprachigkeit
Website der TU Bergakademie Freiberg VISION: EINHEITLICHER UND ÜBERSICHTLICHER WEBAUFTRITT Übersichtlich Übersichtlicher Seitenaufbau Gute Strukturierung der Inhalte Barrierefrei Einheitlich Einhaltung des Corporate Design Kohärente Navigation
Website der TU Bergakademie Freiberg VISION: EINHEITLICHER UND ÜBERSICHTLICHER WEBAUFTRITT Lebendig Aktuelle Inhalte Frische Optik Benutzerfreundlich Erstellung und Pflege von Web-Inhalten ohne Vorkenntnisse Einfache Bearbeitung der Inhalte Bedienfreundliche Umgebung
Website der TU Bergakademie Freiberg IST-ZUSTAND Mehrere WWW-Server Navigation uneinheitlich Unübersichtliche Darstellung der Inhalte Aufbau und Struktur der Inhalte unterschiedlich
Website der TU Bergakademie Freiberg IST-ZUSTAND Mangelhafte Mehrsprachigkeit Dynamische Breite der Inhalte Nichteinhaltung des Corporate Designs Unklare Verantwortlichkeiten
Website der TU Bergakademie Freiberg STRUKTUR Dreispaltigkeit Inhalte ausschließlich im Mittelteil Linke Spalte Haupt- und Unternavigation Rechte Spalte Bild/Logo, Kontakt, Links [ohne direkten Bezug zur Navigation]
Website-Struktur der TU Bergakademie Freiberg LOGIN INS WEBCMS Login erfolgt mittels Shibboleth-Authentifizierung Produktivsystem: http://drupal1.hrz.tu-freiberg.de/login Testsystem: http://drupal2.hrz.tu-freiberg.de/login geplant: nach Login Weiterleitung auf aktuelle Seite
Bearbeitungsleiste des WebCMS FUNKTIONEN Inhalt der aktuellen Webseite bearbeiten ältere Versionen der Webseite wiederherstellen Übersetzung für die aktuelle Webseite anlegen neue Webseite unterhalb der aktuellen anlegen Dateibrowser Menüs
Bearbeitungsleiste des WebCMS FUNKTIONEN Inhalt der aktuellen Webseite bearbeiten ältere Versionen der Webseite wiederherstellen Übersetzung für die aktuelle Webseite anlegen neue Webseite unterhalb der aktuellen anlegen Dateibrowser Menüs
Bearbeitungsleiste des WebCMS FUNKTIONEN Inhalt der aktuellen Webseite bearbeiten ältere Versionen der Webseite wiederherstellen Übersetzung für die aktuelle Webseite anlegen neue Webseite unterhalb der aktuellen anlegen Dateibrowser Menüs
Bearbeitungsleiste des WebCMS FUNKTIONEN Inhalt der aktuellen Webseite bearbeiten ältere Versionen der Webseite wiederherstellen Übersetzung für die aktuelle Webseite anlegen neue Webseite unterhalb der aktuellen anlegen Dateibrowser Menüs
Bearbeitungsleiste des WebCMS FUNKTIONEN Inhalt der aktuellen Webseite bearbeiten ältere Versionen der Webseite wiederherstellen Übersetzung für die aktuelle Webseite anlegen neue Webseite unterhalb der aktuellen anlegen Dateibrowser Menüs
Bearbeitungsleiste des WebCMS FUNKTIONEN Inhalt der aktuellen Webseite bearbeiten ältere Versionen der Webseite wiederherstellen Übersetzung für die aktuelle Webseite anlegen neue Webseite unterhalb der aktuellen anlegen Dateibrowser Menüs
Bearbeitungsleiste des WebCMS FUNKTIONEN Inhalt der aktuellen Webseite bearbeiten ältere Versionen der Webseite wiederherstellen Übersetzung für die aktuelle Webseite anlegen neue Webseite unterhalb der aktuellen anlegen Dateibrowser Menüs
Bearbeitungsleiste des WebCMS FUNKTIONEN Inhalt der aktuellen Webseite bearbeiten ältere Versionen der Webseite wiederherstellen Übersetzung für die aktuelle Webseite anlegen neue Webseite unterhalb der aktuellen anlegen Dateibrowser Menüs
Bearbeitungsleiste des WebCMS INHALTSTYPEN Neue Seite Bildergalerie Formular Block für die rechte Spalte
Bearbeitungsleiste des WebCMS INHALTSTYPEN Neue Seite Bildergalerie Formular Block für die rechte Spalte
Bearbeitungsleiste des WebCMS INHALTSTYPEN Neue Seite Bildergalerie Formular Block für die rechte Spalte
Bearbeitungsleiste des WebCMS INHALTSTYPEN Neue Seite Bildergalerie Formular Block für die rechte Spalte
Bearbeitungsleiste des WebCMS INHALTSTYPEN Neue Seite Bildergalerie Formular Block für die rechte Spalte
Bearbeitungsleiste des WebCMS INHALTSTYPEN Neue Seite Bildergalerie Formular Block für die rechte Spalte
Bearbeitungsleiste des WebCMS INHALTSTYPEN Neue Seite Bildergalerie Formular Block für die rechte Spalte
Bearbeitungsleiste des WebCMS INHALTSTYPEN Neue Seite Bildergalerie Formular Block für die rechte Spalte
Bearbeitungsleiste des WebCMS INHALTSTYPEN Neue Seite Bildergalerie Formular Block für die rechte Spalte
Barrierefreiheit BARRIEREFREIHEIT Barrierefreies Webdesign ist die Kunst, Webseiten so zu gestalten, dass jeder sie nutzen und lesen kann. Quelle: http://www.barrierefreies-webdesign.de/
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
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
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
Barrierefreiheit CHECKLISTE FÜR REDAKTEURE Überschriften Listen Tabellen Bilder Links Navigation Einfache und klare Sprache
Barrierefreiheit ÜBERSCHRIFTEN 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.
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.
Barrierefreiheit TABELLEN 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.
Barrierefreiheit BILDER 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.
Barrierefreiheit LINKS BITV Bedingung 2.4.9 Zweck eines Links Ziel und Zweck eines Links sind aus dem Linktext selbst ersichtlich.
Barrierefreiheit NAVIGATION 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.
Barrierefreiheit EINFACHE UND KLARE SPRACHE 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.
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
WYSIWYG-Editor SINN UND ZWECK DES EDITORS WYSIWYG = What You See Is What You Get Erstellen und Bearbeiten von Web-Inhalten Zentrales Element Redakteur benötigt keinerlei Vorkenntnisse über HTML & Co. Angelehnt an Textverarbeitungsprogramme
WYSIWYG-Editor FUNKTIONEN DES EDITORS Fett, kursiv und unterstrichen Hochgestellt und Tiefgestellt Eigenschaften der Zeile Unsortierte und sortierte Liste Zitatblock Eigenschaften der Zelle Ausrücken und Einrücken Rückgängig und Wiederholen Link einfügen/verändern und entfernen HTML-Quellcode bearbeiten Trennlinie einfügen Ausschneiden, Kopieren und Einfügen Zeile oberhalb, unterhalb einfügen und löschen Spalte links, rechts einfügen und löschen Zellen verbinden und verbundene Zellen trennen Anker einfügen/ändern Formatierungen zurücksetzen Multimedia einbetten/bearbeiten Bild einfügen/verändern Sonderzeichen einfügen Abkürzung Quellcode aufräumen Vorlage/Überschriften Akronym Textfarbe Tabelle erstellen/bearbeiten Embed a Node
WYSIWYG-Editor FETT, KURSIV UND UNTERSTRICHEN Um gezielt Worte oder Wortgruppen hervorzuheben Keine kompletten Texte formatieren Nicht erlaubt ist Verwendung für Gliederungspunkte
WYSIWYG-Editor LISTEN Unsortierte Listen Sortierte Listen von 1..n Unterlisten durch Einrücken möglich Verwendung einer Liste >= drei Aufzählungspunkten
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
WYSIWYG-Editor ANKER EINFÜGEN Anker = Sprungmarke Anker dient zur Schnellnavigation auf einer Seite Sprungmarke [i.d.r. Gliederungsüberschrift] mit Anker markieren Link auf Anker setzen
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: 150px, 300px und 810px Ausrichtung links- oder rechtsbündig
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
WYSIWYG-Editor TRENNSTRICH Dient zur optischen Abgrenzung Beginnt auf neuer Zeile Löscht Fließtext
WYSIWYG-Editor ÜBERSCHRIFTEN Überschriften dienen zur Gliederung der Inhalte Automatische Formatierung Drei Stufen wählbar: Größe 2, 3 und 4 Hierarchisch verwenden
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
WYSIWYG-Editor MULTIMEDIA Einbinden von multimedialen Elementen möglich Diverse Formate [Flash, HTML5, Quicktime, ] Datei kann auch über Dateibrowser hochgeladen/ausgewählt werden
WYSIWYG-Editor SEITE EINBETTEN Interne Seiten einbinden [[nid:1234]] Vollständige Darstellung der Inhalte Änderungen an Originalseite automatisch sichtbar
Übungsaufgaben ÜBUNGSAUFGABEN 1. Neue Seite anlegen 2. Überschriften 3. Listen 4. Bilder 5. Trennlinie 6. Links 7. Menü 8. Galerie 9. Rechte Spalte 10. Formular
Übungsaufgaben NEUE SEITE ANLEGEN Seitentitel festlegen idealerweise mit Namen Seiteneigenschaften Mit beliebigen Inhalt füllen zwei Unterseiten anlegen Eine der beiden Unterseiten wieder löschen
Übungsaufgaben ÜBERSCHRIFTEN Auf der Hauptseite: Überschrift A [Größe 2] Überschrift B [Größe 3] Auf der Unterseite: Überschrift C [Größe 2]
Übungsaufgaben LISTEN Auf ersten Seite nach der zweiten Überschrift sortierte Liste mit mind. 5 Punkten einfügen Auf zweiten Seite nach Überschrift eine unsortierte Liste mit mind. 5 Anstrichen einfügen
Übungsaufgaben BILDER Auf ersten Seite nach der ersten Überschrift ein Bild einfügen Ausrichtung: rechts Größe: 300px Rahmen: ja Beschriftung und Titel eintragen
Übungsaufgaben TRENNLINIE Auf ersten Seite vor der zweiten Überschrift eine Trennlinie einfügen Auf der zweiten Seite nach dem Text eine Trennlinie einfügen
Übungsaufgaben LINKS Auf zweiten Seite eine beliebige Wortgruppe markieren Link einfügen: /node/4449 Linktitel eintragen Auf der ersten Seite eine beliebige Wortgruppe markieren Dateibrowser beliebiges Dokument hochladen/auswählen Linktitel eintragen
Übungsaufgaben MENÜ Auf der ersten Seite eine neue Unterseite anlegen Beliebige Inhalte einstellen Auf Schulungsbereich [Bereichsseite] gehen Menü auswählen und anzeigen Drag&Drop Neu angelegte Unterseite soll neue Elternseite werden Die anderen beiden Seiten sollen davon Unterseiten sein
Übungsaufgaben BILDERGALERIE Neue Bildergalerie mit max. 5 Bildern erstellen Bildergalerie auf der neu angelegten Unterseite einbinden
Übungsaufgaben BLOCK FÜR DIE RECHTE SPALTE Infoblock mit beliebigen Inhalt erstellen Wichtung auf 2 setzen Zweiten Infoblock mit Wichtung 1
Übungsaufgaben FORMULAR Auf der zweiten Seite ein Formular mit Anrede und E-Mail-Adresse anlegen Weitere Felder nach Belieben hinzufügen
Übungsaufgaben INDIVIDUELLES ÜBEN Weitere Seiten anlegen, löschen Dokumente hochladen, verlinken Tabellen erstellen Bilder einfügen und ausrichten Multimedia einfügen
Übungsaufgaben INDIVIDUELLES ÜBEN Fragen?
Einsteigerschulung und Basisinformationen zur Barrierefreiheit WEITERFÜHRENDE INFORMATIONEN WebCMS Drupal Anleitungen, Materialien, Support [Webteam] http://tu-freiberg.de/webcms/ Relaunch des Internetauftritts Neuigkeiten, Projektablauf, Anforderungen http://tu-freiberg.de/relaunch-des-internetauftritts Feedbackfragebogen http://limesurvey.hrz.tufreiberg.de/limesurvey/index.php/129428/lang-de