Workshop der VkIB Herzogsägmühle,

Transkript

1 Barrierefreie Internetseiten mit dem Redaktionssystem TYPO3 Workshop der VkIB Herzogsägmühle,

2 Vorstellung Jan Wischnat, Internetentwicklung seit 1996 System- und Internetbetreuer bei der Gemeinde Schwangau seit 1999 Aktiv in der TYPO3 Community seit 2001 Engagiert in der VKIB seit 2005 Mehr:

3 Barrierefreies Internet BayBITV seit Anfang Barrieren nicht nur für Behinderte Vorteile von barrierefreien Seiten aus Sicht des Seitenbetreibers Nachteile von barrierefreien Seiten aus Sicht des Seitenbetreibers

4 Homepage für Behindertenvertreter Kostenlos für Mitglieder der VkIB Farben und obere Grafik wird angepasst Optional: Eigene www-adresse (mtl. 2,50 ) Bei Interesse: an jan@wischnat.de Beispiel:

5 TYPO3 Open Source Weite Verbreitung Modular aufgebaut, flexibel erweiterbar Leichte Bedienung

6 Das TYPO3-"Frontend" der vkib.de

7 Anmeldung am TYPO3-"Backend Benutzername: workshop Passwort: workshop

8 TYPO3-Inhaltselement anlegen 1/3 Bei 1, 2 und 3 jeweils auf den Text klicken, nicht auf das Symbol...

9 TYPO3-Inhaltselement anlegen 2/3 Klicken Sie auf Seiteninhalt (1). (In diesem Dialog kann man auch neue Seiten anlegen, aber dazu später mehr...)

10 TYPO3-Inhaltselement anlegen 3/3 Der Minimalfall: Überschrift (1) eingeben, Text im "Rich Text Editor-RTE" (2) eingeben, dann Speichern und Bearbeitung schliessen (3)...

11 Inhaltselement ansehen und ändern Mit der Lupe (1) kann das Ergebnis angesehen werden, mit dem Stift (2) kann der Seiteninhalt erneut bearbeitet werden / geändert werden.

12 Eine neue Unterseite anlegen 1/3 Bei 1, 2 und 3 jeweils auf den Text klicken, nicht auf das Symbol...

13 Eine neue Unterseite anlegen 2/3 (1) erzeugt die neue Seite als Unterseite, (2) erzeugt die Seite als Seite auf der gleichen Navigationsebene wie die aktuelle Seite. Wir möchten eine Unterseite - wir klicken auf

14 Eine neue Unterseite anlegen 3/3 1: Häkchen entfernen, 2: Seitennamen eingeben 3: Speichern und Bearbeitung schliessen.

15 Unterseite ansehen und ändern Mit der Lupe (1) kann die Unterseite angesehen werden, mit dem Stift (2) kann die Unterseite geändert werden...

16 Einen Link erzeugen 1/2 Zuerst den zu verlinkenden Text markieren, dann auf das Linksymbol (2) klicken.

17 Einen Link erzeugen 2/2 Ein Klick auf (1) erzeugt einen Link zur TYPO3-Seite Workshop, mit (2) kann man eine zuvor hochgeladene Datei (siehe "Dateien hochladen") verlinken, mit (3) kann man eine beliebige www-adresse verlinken. Wichtig, den Titel (4) nicht vergessen!

18 Dateien u. Bilder hochladen 1/2 Auf Dateiliste (1) klicken, auf das graue Ordnersymbol (2) klicken und kurz warten. In dem dann erscheinenden Menü auf Datei-Upload (3) klicken.

19 Dateien u. Bilder hochladen 2/2 Auf Durchsuchen (1) klicken, beliebige Datei (kleiner als 1 MegaByte) auf Ihrem PC aussuchen (2), bestätigen (3) und dann auf Upload (4) klicken. Datei wird nun hochgeladen und kann z.b. Verlinkt werden.

20 Mit Bildern arbeiten 1/2 Bei einem Inhaltselement den Typ (1) auf Text mit Bild ändern, die folgende Meldung mit OK bestätigen.

21 Mit Bildern arbeiten 2/2 Auf das blaue Ordnersymbol (1) klicken um ein zuvor hochgeladenes Bild auszuwählen ODER mit (2) ein neues Bild hochladen. Mit (3) die Position des Bildes innerhalb des RTE-Textes bestimmen. Mit (4) die gewünschte Anzeigebreite bestimmen. Mit 5 wird das Bild im Frontend mit einer Zoom-Funktion ausgestattet. WICHTIG: Die Felder "Alternativer Text" (6) und "Titeltext" (7) sollen die Kurzbeschreibung des Bildes enthalten, wg. Barrierefreiheit. Dann speichern und ansehen.

22 Reihenfolge der Inhaltselemente ändern Mit den Pfeilen (1) können Sie die Reihenfolge der einzelnen Inhaltselemente ändern. Tip: Wenn Sie ein neues Inhaltselement anlegen möchten, das als erstes / ganz oben auf der Seite erscheint, klicken Sie auf dieses Symbol (2).

23 Mit Inhaltsspalten arbeiten Sie können mit (1) die Spalte ändern, in der das Inhaltselement im Frontend angezeigt wird.

24 Vorschau & Danke Vorschau auf den nächsten Workshop: Das TYPO3-Newsmodul Menüs und Inhaltsübersichten Inhalte strukturieren und gliedern Vielen Dank für Ihre Aufmerksamkeit :-)