Weblog

Im Grunde ist der Umstieg auf Adobe AIR nicht weiter schwer und so bringt die AIR Applikation gleich mehrere Vorteile mit sich. Zum einen ist kein Flash-Plugin mehr erforderlich denn AIR bringt eine native Unterstützung zur Befütterung des Clipboards mit. Zum zweiten – und das dürfte der interessantere Punkt sein – hat man in einer Adobe AIR Applikation Zugriff auf das lokale Filesystem. Und drittens benötigen AIR Applikationen keinen Browser und auch keine Internetanbindung mehr, womit sich auch die Anwenderfreundlichkeit weiter erhöhen dürfte.

Der Screenshot des experimentellen YAML Builders unter AIR zeigt deshalb bereits ein neues Feature, den vollständigen Exports des YAML-Projekts in ein lokales Nutzerverzeichnis. Die copy & paste Orgien könnten damit der Vergangenheit angehören. Der vom Builder generierte Code kann mit einem Klick lokal gesichert werden als indiviudell konfiguriertes “Simple Project”. Parallel steht die Clipboard-Ausgabe einzelner Files weiterhin zur Verfügung.

Das ist zunächt einmal ein Testbalon – zu einer stabilen Version ist noch ein Stückchen hin. Im nächsten Schritt werde ich mir anschauen müssen, wie unter AIR die Versionsverwaltung und automatische Updates funktionieren, sonst macht eine solche Applikation auf Dauer keinen Sinn. Das ist der Vorteil eines Online-Dienstes, hier hat man immer volle Versionskontrolle.

Natürlich schreibe ich diesen Blogbeitrag nicht grundlos. Ich möchte Feedback zu dieser Idee an sich und weitere Tipps für kleine Änderungen, welche bei dieser Gelegenheit gegebenenfalls am Builder vorgenommen werden könnten/sollten. Falls jemand der Mitlesenden bereits Erfahrungen mit Adobe AIR gesammelt hat wäre ich ebenfalls dankbar, wenn ich gelegentlich die eine oder andere Frage loswerden könnte, die sich sicherlich noch auftun wird.

Zum Thema CSS-Sprites gibt es weiterhin eine kleine Demo von David, welche er soeben online bereit gestellt hat.

Weitere Vorträge im Netz:

• Jan Eric Hellbusch, “WCAG 2.0 und BITV2 für Einsteiger”
• Jens Meiert: HTML5: Barrierefreiheit, Performance, Wartbarkeit
• Christian Heilmann: Barrierefreiheit im Datennetz

Vor ca. 1,5 Jahren, im Sommer 2007 sprach ich Dirk Ginader per Skype auf ein kleines Problem an. Damals machte ich gerade meine ersten Schritte mit jQuery und wollte für das Redesign von YAML.de ein Tabscript verwenden, um mehrfach hintereinander aufgelistete Quelltextabschnitte aufgeräumter präsentieren zu können. Zu diesem Zweck sah ich mir verschiedene Tab-Lösungen (mit und ohne jQuery) an, die jedoch alle am gleichen Problem krankten.

Die Tabs funktionieren generell nur in Verbindung mit JavaScript. Dennoch erwarteten sämtliche existierenden Scripte von mir, den für die Tabreiter notwendigen Markup (UL-Liste) fest im Layout zu integrieren. Ich hielt das für unsinnig, denn zum Wesen von unaufdringlichem bzw. zugänglichem JavaScript gehört, dass Bedienelemente, die nur in Verbindung mit der JavaScript-Applikation benötigt werden, auch per JavaScript erzeugt werden sollten.

Daraus entstand folgende Idee: Man definiert einen Bereich der Webseite, welcher die Tabinhalte beinhaltet und definiert ein HTML-Element, welches als Trenner zwischen den Tabinhalten fungiert und den Namen des Tabreiters beinhaltet. Im einfachsten Fall wäre das Bereich aus gleichrangigen Überschriften und Absatztexten. Per JavaScript könnten aus den Überschriften die Tabreiter generiert werden. Die dazwischen befindlichen Absatztexte (oder was auch immer sich zwischen den Trennelementen befindet) würden als Inhalte der Tabs interpretiert und entsprechend gestaltet. Das Schöne daran: Ist JavaScript deaktiviert, so stört kein unsinniger Listenmarkup und die Tabinhalte präsentieren sich im normalen Textfluss der Webseite.

Mit dieser Idee trat ich also im Sommer 2007 an Dirk heran und es dauerte nur wenige Tage bis die erste Version des Plugins Gestalt annahm, die im Übrigen bis heute auf YAML.de in der Dokumentation der Subtemplates ihren Dienst tut. Schon lange hatten wir vor, dieses Plugin zu verfeinern und zusammen mit YAML zu veröffentlichen. Dass es dennoch bis ins Jahr 2009 gedauert hat - naja, sei es drum. Ein großer Teil der Verzögerung floss nämlich eben in die Verfeinerung des Plugins, über die Dirk in seinem Blog auch ausführlich berichtet. So ist es gerade bei den so gern auf modernen Webseiten verwendeten Tabs alles andere als trivial, diese wirklich barrierfrei zu gestalten. Nun hat Dirk bei Yahoo in London den besonderen Vorteil, mit Artur Ortega einen blinden Kollegen neben sich sitzen zu haben, und beide gemeinsam konnten die sich langsam entwickelnde Lösung nicht nur theoretisch durchdenken, sondern auch unmittelbar im Praxistest auf Herz und Nieren testen. Vielen Dank Euch beiden, wirklich eine reife Leistung.

Momentan stehe ich mit Dirk in Kontakt, um noch weitere Verbesserungen an seinem Plugin vorzunehmen. So soll das Script in der nächsten Version unabhängig von animierten Übergängen eine vollständige Druckausgabe aller Tabinhalte unkompliziert ermöglichen und eine optionale Synchronisierung der Containerhöhen der Tabinhalte möglich sein. Eine Anreicherung mit ARIA ist ebenfalls denkbar.

Übrigens: Auf die gleiche Art und Weise ließen sich auch zugänglichere Accordion-Boxen erstellen. Die Probleme dürften sich gleichen, ebenso wie der aufgezeigte Lösungsweg.

Kleine, frische Ideen sollte man sofort umsetzen, sonst bleiben sie zulange liegen und verkümmern. So geschehen vor einigen Monaten, als ich mir angesehen habe, wie man JavaScript geschickt in Bookmarklets einsetzt.

Heute, einen Tag nach dem Release von YAML 3.0.6, kam diese Idee wieder hoch und ich habe YAML ein kleines Bookmarklet spendiert, mit dessen Hilfe sich das YAML-Debug-Stylesheet auf jeder beliebigen Webseite per Klick auf den Bookmark zu- und abschalten lässt. Das Debugging-Stylesheet wurde in V3.0.6 bereits leicht verbesser, an der Online-Variante für das Bookmarklet habe ich heute noch etwas weiter geschraubt und werde sicher auch in den nächsten Tagen noch die eine oder andere Ergänzung integrieren. Insgesamt ist dieses kleine Helfertool aber schon sehr nützlich und erlaubt eine schnelle und unkomplizierte Fehlerkontrolle - auch und vor allem bei Ferndiagnosen.

Erreichbar ist das Bookmarklet über die Debugging-Seite der Online-Dokumentation. Einfach den Link aus der Hinweisbox als Lesezeichen im Browser speichern, auf eine YAML-Webseite gehen und den Bookmark anklicken - voila.

Nach aktuellem Stand sind folgende Funktionen implementiert:

• Verfügbarkeitstest für YAML’s iehacks.css Stylesheet (Funktioniert gesichert über Einbindung ins zentrale Stylesheet)
• Hervorhebung von DIV-Containern mit ID- und Klassenbezeichnung (einschl. YAML-Subtemplates und .floatbox-Klasse)
• Hervorhebung der Gliederungsebenen bei Überschriften (H1..H6)
• Hervorhebung spezieller Textauszeichnungen (z.B. abbr, code, q, cite)
• Hervorhebung inhaltsleerer Elemente
• Hervorhebung von Elementen mit Inline-Styles
• Hervorhebung von Skip-Ankern

Viel Spaß damit und bitte hinterlasst konstruktives Feedback hier in den Kommentaren für Verbesserungen.