M•A•D Projekt

Projektziele

M•A•D steht für Marc’s Applied Design, zu deutsch also Marcs angewandte Gestaltung (von Webseiten). Im Rahmen dieses Projektes möchte ich eine Vorlage (Template) erstellen (im Folgenden M•A•D-Vorlage genannt), welche eine barrierefreie Gestaltung meiner Webseiten ermöglicht. Die M•A•D-Vorlage soll für alle meine Webauftritte verwendbar sein.1 Hierzu habe ich bereits im ersten Halbjahr 2010 die drei wichtigsten Websites von mir generell auf ein einheitliches Design umgestellt2 (vgl. sie hier auch die Artikel Diskussion: Eine Web-Präsenz planen und umsetzen und Diskussion: Lösungsansätze zur Planung und Umsetzung einer Web-Präsenz).

Die drei Webpräsenzen3 sollen nun erneut überarbeitet werden und auf die neu zu erstellende M•A•D-Vorlage angepasst werden. Die M•A•D-Vorlage muss zum einen sowohl den (X)HTML als auch den CSS Standard berücksichtigen und umsetzen. Ebenso muss die Struktur den Vorschlägen für eine semantische Auszeichnung gerecht werden. Da alle drei Websites in deutscher Sprache gehalten sind, sollen auch die semantischen Auszeichnungen in deutsch und nicht wie bisher in englischer Sprache erfolgen; dies hat vor allem Auswirkungen auf die Vergabe von Klassen und IDs in den Stylesheets. Auch weitere Webseiten können dann von mir in dieses Konzept aufgenommen und überarbeitet werden.4

Steht die M•A•D-Vorlage, also das Gerüst für Struktur und Layout, werden auf allen Webseiten die Inhalte auf Barrierefreiheit geprüft und gegebenenfalls überarbeitet. Dies heißt auch, dass Plugins oder Widgets, die von Drittanbietern implemntiert sind, bei nicht barrierefreiem Inhalt entfernt werden. Das endgültige Ziel des Projektes ist es, einen barrierefreien Webauftritt der von mir festgelegten Websites umzusetzen. Mit den umgesetzten Webauftritten werde ich dann bei Biene 2011 teilnehmen.5 Eine Dokumentation des Projektverlaufes stelle ich auf koschel.IT bereit.

Umsetzungen und Aufgaben im Projekt

Um das Ziel eine barrierefreie Vorlage für all meine Websites umzusetzen, bedarf es einiger Vorüberlegungen, einger Voraussetzungen und etlicher Aufgaben. Diese möchte ich nun kurz erläutern.

Solide Grundlage: Das YAML-Framework

Die bisherigen Vorlagen meiner Websites beruhen auf dem YAML-Framework. Dieses soll auch bei der neuen M•A•D-Vorlage die Grundlage bilden. Die Verwendung des YAML-Frameworks garantiert ein in fast allen Browsern einheitliches Aussehen der Webseite.6 Die verwendeten Strukturen richten sich nach (X)HTML und CSS Standards und halten semantische Auszeichnungen bereit. Ebenso sind die Vorlagendateien hervorragend dokumentiert. Obwohl die Macher des YAML-Framework aus Deutschland stammen, haben sie die Kommentare in den Vorlagendateien auf englisch und deutsch dokumentiert. Leider sind jedoch zur besseren internationalen Verständlichkeit die Klassen und IDs in englischer Sprache verfasst worden. So wurden zum Beispiel die IDs der drei Hauptbereiche <div id="header">, <div id="main"> und <div id=footer"> genannt. Hier wollte ich ursprünglich einheitlich deutsche Bezeichnungen verwenden und die Dateien des YAML-Framework für meine Bedürfnisse anpassen. Ich habe mich jedoch aus Gründen der Kompatibilität neuerer Versionen dagegen entschieden.

Begleitende Artikel und Linklisten

Bevor ich mich jedoch an diese Aufgabe mache, möchte ich mich vorher noch generell mit dem Thema Barrierefreiheit vertrauter machen. Hierzu lese ich bereits entsprechende Fachliteratur und schaue mich auf den einschlägigen Webseiten um. Hieraus soll zum einen eine Linkliste mit den für mich interessanten Themen rund um Barrierefreiheit und den von mir als Hindergrundwissen notwendigen Webseiten erstellt werden. Das Wissen möchte ich dann zusätzlich in eigenen Artikeln verarbeiten. Der Artikel Barrierefreie Informationstechnik-Verordnung vom 17. Juli 2002 (BGBl. I S. 2654) ist bereits online und stellt die Bedingungen der BITV dar. Ein weiterer Artikel „Barrierefrei — Na und?“ ist bereits in Arbeit und beschäftigt sich mit Barrierefreiheit im Internet generell. Ebenso befindet sich der Artikel „Strukturierung von Webseiten“ in Arbeit, in dem ich die Struktur moderner Webauftritte und die heute auf den meisten Webseiten üblichen Inhaltselemnte erörtere.

Erstellung der M•A•D-Vorlage

Mit dem Anpassen der Dateien des YAML-Framework wird in diesem Zusammenhang auch die eigentliche M•A•D-Vorlage entwickelt. Die erste Anwendung der M•A•D-Vorlage soll für koschel.IT angepasst werden. Dies bedeutet die M•A•D-Vorlage muss nach der initialen Erstellung für ein WordPress Template angepasst werden.

Ebenso müssen die Layout gestalterischen Elemente des YAML-Frameworks isoliert werden und in eine seperate Datei ausgelagert werden. Es sollen also Stilangaben, die Farben oder Hintergrundgrafiken betreffen in einer eigenen Datei ausgegliedert werden, um so schneller die Anpassungen für die weiteren Projektseiten umsetzen zu können. Ebenso soll für die verwendeten WordPress typischen Auszeichnungen und Styles sowie den von Plugins verwendeten Klassen und IDs ein eigenes Stylesheet angelegt werden. Dies soll die Übersicht zwischen den Standard-YAML Dateien, den von mir erstellten und für alle meine Webseiten gültigen Stildefinitionen und den für den individuellen Webauftritt notwendigen Stildefinitionen erhöhen.

Textinhalte überprüfen

Bei allen drei Projektseiten (koschel.eu, koschel.IT und music-knoten.de) müssen die Inhalte auf die Verwendung der Standards sowie auf Barrierefreiheit hin überprüft werden. Dies bedeutet bei koschel.IT vor allem die verwendeten Plugins zu prüfen, ggf. abzuschalten und nach Alternativen Ausschau halten. Für music-knoten.de heißt dies eine komplette Neuprogrammierung der Inhalte.

Um zukünftig leichter neue Artikel oder Texte auf den Webseiten einzufügen soll ein Style-Guide entworfen werden, der die Verwendung der einzelnen Stilangaben festlegt. Dieser muss zunächst konzipiert werden und soll auf koschel.IT als erstes Anwendung finden. Hierbei sollen besonders die Verwendung der Überschriften und besondere Auszeichnungen, wie Abkürzungen, Blockquotes und Fremdwörter Berücksichtigung finden.

Projektseiten

Begleitend zu meinen Tätigkeiten im Projekt, richte ich auf koschel.IT eine Projektseite ein, die zum einen Informationen rund um das Projekt liefert, zum anderen auch die Aufgaben listet und verwandte Links ausweist.

Auf mad.koschel.eu wird die generelle Projekt Homepage eingerichtet. Hier sind Informationen und Angebote rund um Webdesign und Websiteerstellung beheimatet. Ebenso wird es möglich sein, von mad.koschel.eu die endgültige Vorlagen downzuloaden.

Aufgaben

  1. Artikel „Barrierefrei — Na und?“ schreiben
  2. Artikel „Strukturierung von Webseiten“ schreiben
  3. Entwicklung der M•A•D Vorlage
  4. Neustrukturierung der YAML-Dateien inklusive der Ausgliederung layoutspezifischer Dateien und der für das Webprojekt spezifischen Dateien.
  5. Überprüfen der Textinhalte auf Standard und ggf. umfangreiche Anpassungen
  6. Konzeption und Erstellung eines Style-Guide
  7. Einrichten der Projektseiten auf koschel.it und koschel.eu
  8. Linkliste für begleitende Artikel und weiterführenden Infos anlegen

Fußnoten

  1. Die drei Projektseiten haben unterschiedliche Voraussetzungen:
    • koschel.IT ist ein Blog aud WordPress Basis
    • koschel.eu ist eine statische Seite
    • music-knoten.de ist eine selbst programmierte Seite auf Basis von PHP und MySQL

    (zum Text zurück)

  2. Ürsprünglich war noch meine Webpräsenz Foto-Knoten vorgesehen. Hierbei handelt es sich aber um ein Photoblog mit besonderen Anforderungen an das Design und Layout, so dass ich die Umsetzung dieser Webpräsenz nach hintengestellt habe. (zum Text zurück)
  3. Zunächst werden drei Websites aktiv im Projekt eingebunden werden (koschel.IT, koschel.eu und music-knoten.de) später sollen dann weitere folgen. (zum Text zurück)
  4. Eine Liste der meiner weiteren (momentan inaktiven) Webpräsenzen finden Sie auf den Seiten von koschel.eu. (zum Text zurück)
  5. BIENE ist der Wett­bewerb, der seit 2003 die besten barriere­freien Ange­bote im Inter­net auszeichnet. (zum Text zurück)
  6. Das YAML-Framework unterstützt die folgenden Browser:
    • Internet Explorer 5.x
    • Internet Explorer 6.0
    • Internet Explorer 7.0
    • Internet Explorer 8.0
    • Camino 0.6+
    • Konqueror 3.3+
    • Galeon 1.3+
    • Epiphany 1.4.8+
    • Lynx (Textbrowser)
    • Firefox 1.0+
    • Mozilla Suite 1.7.1+
    • SeaMonkey 1.0+
    • Apple Safari 1.0.3+
    • Google Chrome 1.0+
    • Netscape 8.0+
    • Opera 6+

    (zum Text zurück)