Transkription:

Klaus Miesenberger: Weiter im Programm. Eric Eggert vorzustellen ist, glaube ich, relativ müßig. Er spricht über frische Webtechniken, er ist nicht mehr so frisch, Gott sei Dank, bei accessible media dabei, ein Experte in allen Belangen des barrierefreien Web-Designs. Yatil.de, freier Webentwickler, HTML, Accessibility, Usabilty, CSS und so weiter, Vorträge, Webkrauts, Cooperation, W3C-Unterstützung in Arbeitsgruppen und so fort und so weiter. Frische Webtechniken, praktische HTML5- und CSS 3-Beispiele und jetzt gleich der Beamer auch ins Laufen. Und dann kann der Eric loslegen.

Eric Eggert: Okay, wenn der Beamer zoomt… 1, 2, 3, okay. Ja, wenn der Beamer zoomt ist das natürlich einfacher als wenn ich das mache. Ja. Mal gucken, ob hier alles funktioniert. Ja, ich mache also im Prinzip alles, hauptsächlich hoffentlich meine Kunden glücklich, als freier Webentwickler. Mein Name ist Eric Eggert, ich twittere als @yatil, das ist die beste Art, mit mir Kontakt aufzunehmen, alternativ über Mail oder was es noch so gibt, dieses Telefondings geht auch. Alle Infos auf meinen Webseiten, ericeggert.de, yatil.de.

Und ich rede heute ein bisschen über HTML5 und CSS 3 und möchte an praktischen Beispielen das ein oder andere zeigen. Das heißt, es wird auch keinen klassischen Vortrag geben. Und es wird Codes zu sehen geben zu dieser fortgeschrittenen Stunde. Tut mir leid. Okay. Erst mal: Was ist HTML5? HTML kennen wir seit 1991, damals die erste Veröffentlichung von HTML Tags, damals noch nicht von W3C, das gab es damals nämlich noch nicht. Danach HTML 2.0, HTML 3.2, das auch ORF erfolgreich eingesetzt hat damals, im gleichen Jahr HTML 4.0 von W3C. Und dann gab es so einen kleinen Shift, erst mal gab es noch mal ein HTML 4.01 nach zwei Jahren, also ein sehr vorsichtiges Upgrade. Und dann hat das W3C angefangen mit XHTML und hat 2000 XHTML 1 veröffentlicht. Wer benutzt XHTML? Okay. Wer von Euch liefert XHTML auch als XML aus? Okay. Also zwei Leute nutzten XHTML. Auch für den Internet Explorer? Okay. Niemand benutzt hier XHTML. Eine Ausbaustufe XHTML 1 und dann sollte es irgendwann XHTML 2 geben. Darauf warten wir immer noch.

Aber das Warten hat ein Ende, denn es wird kein XHTML 2 mehr geben und ich werde auch gleich darauf eingehen warum. Die Zukunft ist HTML5, das jetzt in der Entwicklung ist, das 2009 einen sehr gebrauchsfähigen Zustand erreicht hat und das jetzt im Prinzip sehr gut eingesetzt werden kann mit Abstrichen, darauf gehe ich gleich kurz ein. Warum sich XHTML 2 nicht durchsetzen konnte, XHTML nicht durchsetzen konnte, liegt daran, wie es entwickelt wurde und zwar liegen jedem Standard Designprinzipien zugrunde. Und Designprinzipien sind eine tolle Sache. Designprinzipien bei XHTML 2.0 lesen sich folgendermaßen: Als generisches XML so generisches XML wie möglich, das heißt es ist wichtig, dass XML der Kernbestandteil ist. Und es soll nichts geben, was diese XML-Bestandteile dupliziert.

Und dann steht da drin, dass sie mehr Usability wollen, indem sie innerhalb der Begrenzungen von XML eine einfach zu schreibende Language haben, also eine Markup Sprache, und dass diese Dokumente einfach zu benutzen sind. Das sind gute Vorzeichen eigentlich und der Standard, wenn man Leute fragt, ist von einem Standardstandpunkt her sehr gut. Er ist nur nicht praktikabel, weil er nicht zurückgeht auf die Grundlagen von HTML 4 und deshalb auch nicht rückwärts kompatibel ist.

Das heißt, XHTML 2 hätte effektiv das Web kaputt gemacht. Die Designprinzipien von HTML5 lesen sich komplett anders. Da steht, erst mal gibt es ein ganzes Dokument HTML5 Designprinzipien und dort steht drin, dass die wichtigsten Prinzipien Compatibility, Utility und Interoperability sind. Und die Benutzbarkeit im Sinne von Anwendungen, möglichst breite Anwendungsfälle, aber auch kompatibel zu den meisten Dokumenten. Und auch, dass es in vielen Fällen funktioniert. Und dann das Wichtigste ist im Case of conflict, also falls man einen Konflikt hat, falls es, falls die Designprinzipien sich…

Aus dem Publikum: Mehr zum Mund…

Eric Eggert: Mehr zum Mund, das Mikro. Falls die Designprinzipien sich widersprechen, dann sollen die Nutzer vor den Autoren, vor den Implementatoren stehen, über denen, die die Spezifikationen schreiben, über der theoretischen Purity, also, über der theoretischen Reinheit. Das heißt, es ist nicht wichtig, dass es so gutes HTML wie möglich ist, sondern dass es den Nutzern am meisten dient. Und viele Leute können sich mit diesem Grundsatz wesentlich besser anfreunden, unter anderem die Browser-Hersteller. Und deswegen setzt sich das jetzt so langsam durch. HTML5 ist aber anders als HTML 4. HTML5 ist nämlich nicht nur HTML, sondern es ist auch HTML, also die Beschreibungssprache, und dazu ein ganzes großes, eine ganze Werkzeugkiste von Javascript APIs. Das heißt, Javascript ist mit HTML tief verwurzelt, tief verbunden und das merkt man auch später in den Beispielen.

Das nächste, was ich vorstellen will ganz kurz ist CSS 3. Jetzt gibt es nicht das CSS 3, sondern es gibt verschiedene Module, einige wenige habe ich hier aufgelistet. Das sind aber die, wo sich in nächster Zeit die hauptsächlichen, hauptsächlichen Änderungen abspielen werden. Die auch alle schon irgendwie in Browsern implementiert sind, die man alle heute schon nutzen kann, in Teilen zumindest. Dazu gehören natürlich an vorderster Front die Selektoren, die man einsetzen kann. Dann Media Queries, das heißt, man kann auf die verschiedenen Medien, auf die eine Webseite ausgegeben wird, eingehen und kann spezielles CSS dafür ausliefern. Dann gibt es die Möglichkeit von Multicolumn Layouts, also Text in Spalten umbrechen lassen. Es gibt ein Modul, das nennt sich Backgrounds and Borders, um visuell ansprechende Boxen zu machen, Hintergründe und Rahmen besser definieren zu können, als das mit CSS 2 noch möglich war. Dann gibt es, gibt es ein Modul, das nennt sich einfach Color. Das bietet neue Möglichkeiten für Farbwerte, Schriften, es gibt 2D- und 3D-Transformationen, mit denen man Objekte beliebig verändern kann.

Es gibt Transitionen, mit denen man zwischen zwei Zuständen hin und her wechseln kann und wo die Zwischenschritte auch gezeigt werden. Da werde ich auch gleich noch ein Beispiel haben, damit das klarer ist und Animationen. Wichtig ist, HTML5 und CSS 3 sind keine abgeschlossenen Spezifikationen. HTML5 ist einfach noch nicht fertig und wird es wahrscheinlich auch nie sein, wird aber immer Bestandteile haben, die fertig sind. Das ist das Konzept dahinter. Es wird nie vom W3C heißen, okay, jetzt nehmt dieses HTML5 und das wird das sein, was ihr habt. Es mag sein, dass irgendwann so ein Dokument rauskommt, aber die Weiterentwicklung in diesem Dokument, was essentiell eigentlich ein Wiki ist von Browserherstellern, wo Sie eintragen, was Sie jetzt gemacht haben, das wird genauso weitergehen, weil das der Weg ist, der uns in den letzten zwei Jahren unheimlich viele neue Werkzeuge gebracht hat, die wir nutzen können.

CSS 3 ist deshalb keine abgeschlossene Spezifikation, weil die einzelnen Module in sich unterschiedlichen Entwicklungsprozessen unterliegen und einen unterschiedlichen Status haben. Und deswegen auch unterschiedlich umgesetzt werden. Auch wichtig sich klar zu machen ist, dass die Implentimentation im Browser noch lückenhaft ist von beiden Techniken. Das heißt, wenn man diese Techniken einsetzt, muss man darauf vorbereitet sein, Workarounds zu nutzen, muss man darauf eingestellt sein, Sachen wirklich, wirklich auch doppelt zu durchdenken, weil die Unterstützung von den Browsern noch nicht komplett da ist. Das wird sich für einen großen Marktanteil aber im nächsten Jahr ändern. Der Firefox 4 wird rauskommen, ich denke, da habe ich auch das Wort von Marco Zehe dafür, dass das passiert. Und der Internet Explorer 9 wird veröffentlicht.

Das sind zwei große Baustellen und beide Browser bringen wirklich sehr sehr viele von diesen Werkzeugen mit, damit wir die benutzen können. Ja, man tut sich so ein bisschen schwer mit diesem Begriff HTML5, CSS 3 und möchte eigentlich gerne so einen Überbegriff haben, so einen Umbrella Turn, und den gibt es jetzt ganz neu und zwar NEWT. Und zwar NEWT heißt New Exciting Web Technologies. Genau. So ein NEWT ist ein Molch, deshalb auch dieses schöne Logo, das wir gespendet bekommen haben. New Exciting Web Technologies, und darüber rede ich heute, also das HTML, CSS 3, aber auch noch andere Sachen, die nicht unter diese Spezifikationen fallen.

Dazu gehört unter anderem SVG, XHTP, nein, XMLHTTPRequest 2, also Ajax 2, Geolocation, Websockets, Web Open Font Format und Datenbanksachen wie Web DB und Index DB. Das sind Spezifikationen, die gerade entwickelt werden, die sehr aufregend sind, deswegen der Name, und die wir zum großen Teil schon nutzen können. Dazu gesellt sich noch WebGL, das ist eine Möglichkeit, 3D-Animationen und 3D-Grafiken im Internet umzusetzen.

So. Damit von dem theoretischen Teil in den Praxisteil und ich fange relativ niedrig an im Level und gehe erst mal auf die, auf die neuen Markup-Sachen ein, also wie zeichne ich Inhalte aus. Dazu gibt es im Großen und Ganzen einige neue Elemente, das sind die acht wichtigsten: Artikel für Stücke, für Gegenstände, für Artikel. Section für Abschnitte innerhalb von einer Webseite, Aside für Zusatzinformationen, Nav für Navigationsbereiche, dann gibt es Header and Footer für den Kopfbereich und den Fußbereich, wobei das, muss man auch dazu sagen, das meint inhaltlich den Fußbereich, der muss nicht unten stehen, der kann auch ganz oben stehen, der kann auch in der Mitte stehen, aber der inhaltliche Fußbereich. Mit dem Header genauso. Dann gibt es Details, das ist eine Möglichkeit, um solche Ausklapper zu spezifizieren und im HTML zu benutzen, wie man sie auch auf ORF.at findet. Sehr spannende Sache.

Und das Figure-Element, das ist ein Element, um zum Beispiel Bilder mit Text-Unterschrift zu veröffentlichen. Alle Browser stellen diese Elemente dar, das heißt, man hat kein Problem mit zum Beispiel Firefox, mit Safari, nur ein Browser macht natürlich Probleme. IE hat einfach den Umgang mit unbekannten Elementen anders implementiert. HTML5 definiert, wie die Browser damit umgehen sollen, der Internet Explorer macht das falsch.

Man kann es ihm aber beibringen. Es gibt ein ganz kleines Javascript für Internet Explorer kleiner als 9, das man einbindet, das diese, und zwar ganz oben im Quelltext, und das kündigt dem Internet Explorer die einzelnen Elemente an. Und da sind noch viel mehr als ich jetzt aufgezählt habe. Deswegen gibt es das extern bei Google Code gehostet unter HTML5 findet man das. Und man macht das da rein und kann diese Elemente dann auch mit CSS anfassen. Das bedeutet natürlich, dass man angewiesen ist auf Javascript im Zweifelsfall für Internet Explorer kleiner als 9. Aber das ist bei den meisten modernen Seiten sowieso eine Grundvoraussetzung, um gut mit der Seite navigieren zu können. Ansonsten gibt es halt eine relativ kaputte bis kaputte Ansicht, die alles untereinander darstellt, auf die Zugänglichkeit der Information an sich hat das aber keinen Einfluss in der Regel. Die Frage ist auch, ist HTML5 barrierefrei, weil es ist ja noch nicht implementiert in Browsern. Also müssen wir uns darüber Gedanken machen. Es gibt eine Seite von Steve Faulkner, die nennt sich html5accessibility.com. Und dort hat Steve Faulkner diese, eben diese Accessibility-Merkmale aufgelistet. Und wenn man sich da durch scrollt sieht man viele rote Xe und man bekommt eigentlich nicht die, den Eindruck, dass das barrierefrei sein könnte, was man da hat.

In Wirklichkeit ist es so, dass er testet, ob die neuen HTML5 Accessibility-Merkmale schon umgesetzt sind. Und das ist oft nicht der Fall. Das ist, wird aber in Firefox 4 zum Beispiel der Fall sein. Und deswegen muss man konstatieren, dass HTML5 mindestens genauso accessible ist wie HTML 4.01, aber es noch weitere Zusatzfeatures bietet. Wenn man diese aktivieren will, muss man den Browsern auch nachhelfen und ich habe ein kleines Script geschrieben, dass man bei GitHub sich angucken kann. Das nennt sich accessifyhtml5.js. Und was das macht ist effektiv einfach die, die entsprechende Elemente raussuchen und den Area Rules vergeben. Diese Rollen sind im HTML5 Standard festgelegt und können deswegen sehr einfach damit quasi auf die Elemente angemeldet werden. Wo ich das zum Beispiel gemacht habe ist bei der A-Tag-Seite, deswegen hatte Marco vorhin ein ARIA-Event angesagt bekommen, und, beim Navigationsbereich, und ich benutze aber nur das Standard-HTML5-Navigations-Nav-Element.

Noch ein Accessibility-Feature ist der Outline-Algorithm, also der Struktur-Algorithmus. Und zwar wird der Dokumenten-Baum geparst, wir brauchen in HTML5 eigentlich, sobald alle Browser das verstehen, keine verschachtelten Überschriften mehr. Dadurch, dass wir diese Struktur, Strukturelemente haben wie Section, Article, Footer, können wir diese benutzen, um uns, um uns diese Struktur erstellen zu lassen.

Im Beispiel habe ich zum Beispiel nur H1-Elemente benutzt, diese werden allerdings geparst oder sollen geparst werden. Und bekommen dann eben die Wertigkeit jeweils zugeteilt. Das heißt, ein H1-Element kann durchaus im Kontext als H3-Element auftauchen. Das bedeutet aber gleichzeitig nicht, dass ich von einer beliebigen Seite die Überschrift, einen Artikel nehmen kann mit Überschrift und das per Copy und Paste in meine Vorlage übernehmen kann. Und ich bekomme sofort eine richtige Dokumentenstruktur. Es ist viel komplizierter, als es jetzt ausschaut, zum Glück nicht für uns als Autoren, aber intern die Abläufe, aber ich glaube, das ist wirklich eine spannende Neuigkeit und eine spannende Neuerung. So, jetzt aber wirklich zu Beispielen. HTML5 Audio. HTML5 liefert neue, neue Elemente mit für Audio und Video und man kann damit ganz einfach Audiodateien und Videos einbinden in Webseiten.

Das ist der HTML-Code dazu, es ist also eigentlich nur ein Audioelement und man schreibt die Quelldateien dann mit Source-Elementen in dieses Element. Man hat auf dem Audio ein paar Attribute, die man nutzen kann, beispielsweise Controls, wenn man das angibt, dann werden automatisch Kontrollelemente angegeben, das heißt, man kann dann sofort Play drücken, Pause drücken und so weiter und so fort. Man kann die, das Stück immer wiederholen lassen über Loop, mit Auto-Play kann man das Stück losspielen lassen beim Laden der Seite. Und mit Preload kann man definieren, wie, inwiefern der Inhalt vorgeladen werden soll.

Es gibt verschiedene, es gibt verschiedene Codex, die unterstützt werden, also verschiedene Audioformate. Firefox kann OGG und WAV, Safari 5 kann nur, kann MP3 und WAV, Chrome kann kein WAV, dafür OGG und MP3, das ist sehr kompliziert. Letztlich heißt dieser Chart, wenn man ein OGG hat und ein MP3, dann ist man gut. Dann ist alles okay. Und deswegen können wir konstatieren, die Browserunterstützung ist super, wenn das jetzt umspringt, für IEs kleiner 9, der IE9 wird das auch können, für IE’s kleiner 9 kann man einfach ein Flash dann quasi als Alternative benutzen. Und ich habe da auch das praktische Beispiel dabei, das ist eine Webseite, die wir gemacht haben, nennt sich deathofademon.com. Genau, jetzt suche ich mir meinen Chrome und schiebe das mal hier rüber. Funktioniert. Okay. Und jetzt suche ich die Maus, da ist sie. Okay. Und diese Webseite ist entstanden für eine befreundete Band und wir haben, wir haben die ein bisschen unterstützt und dabei es genommen als Showcase für Best Practices. Auch HTML5 und CSS 3.

Man kann hier oben auf das Album klicken und dann zu einem Song wechseln. Das ist das Booklet. Und wenn Du dann irgendwie hier diesen Song sehr zufällig, was zufällig jetzt auch der kostenlose Download ist, also bitte einfach runterladen. Und jetzt brauche ich den Sound und dann müsste das jetzt gleich losspielen, wenn das WLAN mitmacht. Wir sehen hier einen Ladebalken, das ist alles HTML und hier sehen wir, wie das Lied abspielt, wir hören es nur nicht, weil ich keinen Sound anhabe. Das ist alles HTML und wir können auch zum Beispiel hier in diesen Balken reinklicken und springen dann direkt hier zu dem Song. Um uns das mal im Quelltext anzugucken, Pause.

Im Quelltext sind das hier ein relatives Div-Wirrwarr, das liegt daran, weil ich, weil ich das HTML im Zuge dieser Sache einfach noch nicht angefasst habe großartig, sondern erste Mal mit CSS die visuelle Ausrichtung in Angriff genommen habe. Wir nutzen jPlayer, das ist ein jQuery-PlugIn, und einfach mit der Klasse jplayer-play definiert man quasi den Playknopf. Dadurch, dass das richtige HTML-Elemente sind links kann man die natürlich auch handhaben.

Man kann die mit der Tastatur steuern, man kann laut und leise verstellen, auch das mit der Tastatur, und man hat also sofort eine zugängliche Art, einen Audioplayer zu machen. Und das ist, das ist wirklich eine feine Sache. Für den Internet Explorer gibt es ein ganz kleines Flashvideo, das nicht sichtbar eingeblendet wird, das heißt, auch der nutzt diese HTML-Konstrukte, dasselbe HTML-Konstrukt, dieselben Javascriptaufrufe, um das MP3 dann halt durch dieses Flash abzuspielen. Das heißt, man hat tatsächlich einen sehr direkten, eine sehr direkte Nutzung von der Technologie. Bildet quasi die HTML5-API nach über diese, über diese Flashgeschichte. Und das ist, das ist, glaube ich, das Wichtige, wenn man nicht sagt, okay, dann machen wir, wenn Flash da ist, dann haben wir einen anderen Player als wenn nicht Flash da ist, sondern man hat immer den gleichen Player, man nutzt nur eine andere Technologie. Genau. So.

Jetzt wieder zurück zur Präsentation finden. Sehr ähnlich, ja, und natürlich die Seite auch, das wollte ich auch noch gerade noch mal klar machen, das ist natürlich auch weitestgehend barrierefrei, wir würden nie sagen, da gibt es keinen Verbesserungsbedarf. Sicherlich ein paar Sachen, aber wir haben die nach bestem Wissen und Gewissen umgesetzt, was für uns die Selbstverständlichkeit ist, wie wir Websachen angehen. Ob das jetzt für eine Metalband ist oder für, irgendwie für ein Ministerium oder für eine Uni, uns ist es wichtig, dass wir immer unser bestes Wissen und Gewissen einsetzen, und es gibt nicht die Möglichkeit Accessibility optional dazu zu buchen, sondern es ist, entweder es geht so, wie wir das machen oder es geht nicht und deswegen finde ich diese Trennung zwischen accessible und inaccessible Websites, es gibt gute und schlechte. Danke Marco.

HTML5 Video ist im Prinzip sehr analog, deswegen möchte ich da auch gar nicht sehr lange darauf eingehen, man hat ein zusätzliches Attribut, das nennt sich Poster, bei dem kann man also entweder irgendwie ein Poster einbinden in der Größe des Videos oder man kann zum Beispiel ein Standbild dort einblenden und dadurch steuern, was angezeigt wird, wenn das Video noch nicht läuft. Ansonsten geht das genauso, man braucht ein MP4, ein OGG-Format, OGG ist die freie Opensource-Variante. Und wenn man das angibt, dann funktioniert das in jedem Browser. Und es gibt ein sehr gutes Javascript, eine sehr gute JQuery-Plugin-Lösung für HTML5-Video, das nennt sich JMedia-Element. Und da gucken wir auch mal gerade in ein Demo rein. Falscher Browser. So, genau. Das ist auch, den findet man auf Protofunc.com/jme und ich habe jetzt ein Demo rausgesucht, weil das spannend ist mit dem, was wir von Wien.at gesehen haben.

Nämlich das ist auch ein Video und was es auch hat sind Captions tatsächlich. Das heißt, mit dieser HTML5-Sache wird es möglich sein, Captions einzubinden. Momentan funktioniert das auch schon, ach so, ich habe auf den falschen Browser geklickt, das ist ja geschickt. Okay, ich klicke mal hier drauf. Mit Captions. Im Moment steht da noch: This is a simple example for srt-captions. SRT ist ein Format für diese Untertitelung und das funktioniert einfach, indem man einen Link rein postet und wird dann über diese JQuery-Plugin-Lösung mit rein geladen. Und das ist eine Try to be accessible and nice to your users. Und das ist eine schöne Art, diese Dinge rein zuladen und einfach zu zeigen und zu benutzen. Denn dieses SRT-Format soll auch von den Browsern unterstützt werden.

Das wird gerade diskutiert, hier funktioniert das schon, weil hier mit JavaScript Elemente gemacht werden, die dann angezeigt werden über dem Video, man könnte das genauso gut unter dem Video anzeigen oder neben dem Video, man ist da völlig frei. Man kann das mit Javascript, mit CSS völlig frei gestalten und kann dadurch Untertitel rein laden. Was ich eine sehr wichtige Sache finde, das ist also eingebaute Accessibility in HTML5. Da müssten wir jetzt das, genau, das Mikrophone nennt sich das. So sieht ein SRT-File übrigens aus, also total einfach und auch leicht zu parsen. Geht ja auch mit Javascript, wie wir gesehen haben. Okay, jetzt die Frage:

Frage A: Die Frage ist, Du hast eben gezeigt, dass man bei dem Video quasi ein Standbild für die Information solange bereitstellen kann für den Benutzer, bis quasi das Video vollständig geladen ist oder bis das Ganze quasi lauffähig ist. Nun denke ich jetzt, okay, für die Sehenden haben wir etwas, was haben wir für die Blinden?

Eric Eggert: Das ist eine gute Frage. Darüber wird diskutiert, ob man Alternativtext für dieses Poster braucht. Das kommt aber auch darauf an, was auf dem Poster zu sehen ist. Wenn auf dem Poster natürlich irgendwie nur der Filmtitel steht, ist das kein Mehrwert, weil der wird woanders auf der Seite sicherlich auftauchen in der Regel. Und die Leute beim W3C in der HTML5 Arbeitsgruppe sind sich sehr uneinig, ob sie da etwas anbieten wollen, ob, oder ob sie sagen, das ist jetzt keine essentielle Information, was auf dem Poster zu sehen ist. Ich persönlich finde, dass das sehr wohl eine essentielle Information sein kann und man wenigstens einen Mechanismus anbieten sollte.

Aber ich bin ja auch nicht das W3C, deswegen weiß ich nicht, ob das, ob die auf mich hören. Ansonsten solche Anmerkungen? Also ich bin in der HTML5 Arbeitsgruppe, Ihr könnt das auch alle sein, die nehmen wir alle, deswegen bin ich dort. Deswegen bin ich dort. Und dann wird man auch in regelmäßigen Abstimmungen tatsächlich auch gefragt, was man denn für eine Meinung hat zu dem, zu dem Thema. Und das wäre sehr sehr gut, wenn sich Webentwickler mehr engagieren würden in diesen, in diesen Gruppen. Das gilt auch für, für CSS 3 und für sämtliche Accessibility-Gruppen, wir haben viel zu wenig Leute dort. Außer bei der HTML5-Arbeitsgruppe, da sind das jetzt 650 oder so etwas, macht es nicht einfacher, aber es ist wichtig, dass wir mit starker Stimme sprechen als Webentwickler.

Es gibt eine Sache von HTML5, die ist komplett nicht barrierefrei. Das nennt sich Canvas. Canvas ist ein Mechanismus, ein Element, um auf einer Bildschirmfläche zu zeichnen. Also im Prinzip Leinwand, die direkte Übersetzung. Das Problem ist nur, man benutzt da Javascript auf diese Leinwand und man kann im Moment noch nicht Informationen hinterlegen, was eigentlich zu sehen ist. Also ist Canvas ein schwarzes Loch in Sachen Barrierefreiheit. Man wirft da Sachen rein und rein und rein und kann nicht rausholen, was da jetzt eigentlich drauf ist. Es gibt verschiedene Ansätze, das zu lösen, das, das Beliebteste im Moment und das, was wahrscheinlich auch das Rennen machen wird, ist es, einen Shadow Dong zu haben. Das heißt, man hat in dem HTML noch mal ein Dokumentenmodell, einen Dokumentenbaum, in dem man noch einmal sagt, was man eigentlich getan hat. Ich weiß nicht, ob das im Einzelfall wirklich einem blinden Nutzer weiterhilft, ich habe einen Strich gezeichnet von 0/100 bis 0/200. Also ich halte das für eine mögliche Lösung, aber vielleicht noch nicht für die Lösung, die alles überstrahlt. Ich weiß aber keine bessere. Also falls jemand eine gute Idee hat irgendwie, einfach Bescheid sagen. Das bauen die schon ein. Ja?

Andreas Hafenscher: Ich wiederhole die Frage: Wozu ist Canvas eigentlich gut?

Eric Eggert: Okay. Was ist der Sinn hinter Canvas, das ist eine gute Frage von Andreas. Es gibt mehrere Nutze, Nutzungsmöglichkeiten. Zum einen gibt es die Möglichkeit, Dinge zu visualisieren, man kann also aus Tabellen Diagramme machen, man kann aus, man kann aber auch Kontrollelemente animieren, wenn man das gerne möchte. Beispielsweise, wenn man so einen Musikplayer hat, könnte man den auch mit visuellen Lösungen quasi diese, dieses Audio noch mal visuell zeigen, das ist sicherlich auch eine Barrierefreiheitsache. Also wenn man visuell sagen kann, okay, das Audio klingt jetzt so oder es klingt anders.

Also es gibt verschiedene Möglichkeiten, wie es angewendet wird. Oft auch einfach nur für visuelle Spielereien. Wenn es natürlich für visuelle Spielereien angewendet wird ist das auch im Moment noch kein Problem aus Sicht der Barrierefreiheit, weil das meistens nicht inhaltlich dazu beiträgt, ich zeige auch gleich noch ein paar Beispiele. Der Internet Explorer kann das nicht. Das ist aber kein Problem, denn es gibt zwei Plug-ins, zwei Javascriptsachen. Das eine heißt ExCanvas und das andere heißt Canvas Text. Die wirft man rein und man kann Canvas genauso benutzen wie in jedem anderen Browser auch.

Also das ist ein absoluter, eine absolute API-Replacement. Und das benutzt in dem Fall Internet Explorer proprietäre Technologie. Und das möchte ich auch gerade noch mal zeigen. Ich habe nämlich da ein paar Beispiele vorbereitet. Ich habe ja gesagt da gibt es etwas zu sehen. Hier sind ein paar aus meiner Lap Sammlung, ein paar Sachen, hier mit Canvas. Beispielsweise hat man die Möglichkeit, hier solche Gradientssachen zu machen. Ich bewege jetzt also die Maus über den Bildschirm und im Hintergrund bewegt sich so eine Farbänderung und dadurch hat man so einen interaktiven Effekt. Ich habe Webseiten gesehen, die hatten nur wegen dieses Effekts Flash eingesetzt. Das funktioniert jetzt alles mit HTML.

Ich weiß nicht, ob das sehr sinnvoll ist, aber es zeigt, was damit gemacht werden kann generell. Dann haben wir ein Beispiel mit Canvas und Video. Genau, und zwar ist das eine herumrennende Katze, das liegt daran, weil das ein Opensource-Video ist und das Beispiel und ich einfach opensourcemäßig runter geladen habe und dann in meine Sammlung übernommen habe. Und das links ist die Katze, ist ein Videoelement, HTML5 Video, das rechts, was jetzt so ein bisschen ruckelt, das ist tatsächlich das Video live auf dem Canvas gezeichnet. Also man kann das nutzen, um solche Effekte zu machen zum Beispiel. Ob man jetzt die Katze da im Kreis laufen lassen möchte weiß ich nicht. Dann habe ich hier ein visuell spannenderes Beispiel, auch wieder ein Video und auch wieder mit dem Hintergrund, auf dem Hintergrund wird also per Canvas ein Bild gelegt, das folgendes macht: Klick. Noch mal klicken. Das ging aber letztens noch. Ah, da geht es. Und das legt also ein gepixeltes Bild von dem Video als Hintergrund ab. Und das wird live aktualisiert. Man hat also im Prinzip so eine Reproduktion des Videos dahinter. Das finde ich ganz schön, um irgendwie ein Ambiente zu präsentieren.

Auch eine spannende Sache. Dann haben wir auch noch andere Sachen. Zum Beispiel das hier. Also das ist jetzt auch ein Canvas, das ist so ein Lade-Spinner und der ist komplett in Canvas gemacht. Warum würde man so etwas tun? Erstens: Es verbraucht wesentlich weniger Speicherplatz als eine Gif-Datei so ein kleines Script. Und es funktioniert ähnlich gut. Und man kann es, wie gesagt, in allen Browsern einsetzen. Ja, hier können wir auch kurz mal in den Quelltext gucken. Und zwar gibt es hier die Javascriptfunktion Bildspinner. Und die nimmt halt in x und y die Größe und wie groß diese Slides sein sollen, Slides sein sollen und die Gradanzahl. Und baut dann, je nachdem wie die Anwendung ist, so einen Spinner. Und gerade, wenn man viel auf der Seite hat, die sich vielleicht noch unterscheiden, die unterschiedliche Farben haben, ist das natürlich eine sehr ressourcenschonende Sache und man muss nicht immer irgendwie in Photoshop neue Grafiken rausrendern. So. Das war das.

Wieder zurück zur Präsentation. Zu neuen Formularelementen möchte ich jetzt gar nichts wiederholen. Das ist ganz gut gelaufen, da muss ich nicht viel sagen. Das haben wir schon gesehen und ich verweise gerne auf den Vortrag von heute morgen, auf den ersten, das war ein sehr guter Vortrag dazu. Und da wurden auch diese HTML5 Sachen erwähnt. Und jetzt muss ich mich sputen, das werde ich jetzt auch tun. Und ich habe das accessibility-, accessifyhtml5-Javascript daraufhin heute Morgen direkt angepasst und habe dort dem HTML5 Required die aria-required-Attribut true gegeben, das heißt, jetzt braucht man nicht mehr mit Klassen arbeiten, sondern man kann sagen, hey, das ist Required, wir basteln das da ein. Genau.

Und damit komme ich zu den CSS-Demos. Erstes Demo: Einbindung von Schriftarten. Das ist sehr neu, das ist sehr funktional und funktioniert cross Browser. Das heißt, wir können jetzt endlich Schriften auf Anzeigen, die der Benutzer nicht auf seinem Computer hat, hurra. Ich habe ein Beispiel dabei natürlich. Wo ist mein Mauszeiger? Font, klick. Fontfacedemo. Hier habe ich zwei Schriftarten genommen, die ich nie auf meinem System installieren würde, eine Schriftart, die man nicht lesen kann, die aber vielleicht für Überschriften ganz spannend ist und hier unten eine mit solchen pixeligen Icons. Das ist auch eine spannende Sache. Und vielleicht kann man die als, als Element, als Dekoelement irgendwo einsetzen.

Wir können hier auch live die, das CSS ändern, können hier zum Beispiel Arial davor schreiben, da würde ich natürlich nie machen in Wirklichkeit sondern Helvetica. Wir können das auch in der Größe Font-size 5 EM größer vergrößern, das geht alles live, das ist alles echter Text, wir können den markieren, wir können den kopieren. Alles gut. Und wieder zurück, zurück, zurück. Wieder zurück zur Präsentation. Dann drei Sachen, die ich zusammen jetzt einfach nur kurz vorstelle, die man jetzt auch schon nutzen kann. Rounded corners, gradients and box shadow. Also abgerundete Ecken, Farbverläufe und Schatten auf Elementen. Funktioniert wir folgt: Zurück.

Gradients, hier können wir den Schattenwert einstellen dynamisch, können den Schatten nach rechts rausziehen, können den aber auch noch weniger transparent machen, da funktioniert nur so halb gut. Können dem auch eine andere Farbe geben, zum Beispiel red. Wir können, dynamisch, weil das halt CSS ist und keine Grafiken. Wir können ganz dynamisch die Border-radii verändern und können damit viel schneller und mit viel weniger Aufwand schicke Effekte machen oder so etwas wie das. Hier einfach mal red rein geschrieben, das funktioniert also auch. Es gibt uns die Möglichkeit, grafisch viel besser, viel besser mit diesen Sachen umzugehen. Und jetzt zu dem letzten echten Slide: Animationen. Das ist ein großes großes großes großes großes großes Thema. Es gibt fast unendlich viele Möglichkeiten und Beispiele und Demos. Ich zeige ein paar und zwar ganz einfache Beispiele. Weil ich möchte jetzt auch nicht die Zeit überanspruchen. Der Thomas will ja auch noch reden.

Corners, Gradients, Box Shadow, das ist das Falsche. Beispielsweise hier solche animierten Bar Charts. Das ist kein Flash, das ist alles HTML, das ist eine unsortierte Liste, die da mit Javascript entsprechend animiert wird. Und auch dieser Effekt, dieser Farbübergang, das ist eine Transition, man kann damit also sehr einfach visuelle Effekte zeigen.

Noch ein Beispiel: Hier haben wir ein Bild, das bin ich. Ich bin sehr groß, noch größer als sonst schon. Und man kann einen animierten Bildwechsel machen, indem man hier drauf klickt und wumm, ist es ein anderes Bild. Und das ist kein Flash, sondern einfach nur ein bisschen, ein bisschen CSS und ein bisschen Gedrehe. Auch hier können wir kurz in die Source reingucken, effektiv sagt der, sagen wir hier über CSS, dass wir das rotieren um zweieinhalb Grad. Und dann sagen wir, okay, und wenn sich da etwas ändert bei diesem Element, also bei dem Bild, dann wollen wir, dass das über eine Sekunde passiert, und zwar wollen wir das für diese Transitionsachen, für diese Transformationsachen. Das heißt, nur wenn gedreht wird oder zum Beispiel verschoben oder skaliert, dann wollen wir das animieren. Und dann können wir per, per Javascript einfach sagen, okay, und jetzt drehen wir das um 180 Grad. Was der Browser dann nicht macht, ist, es einfach auf 180 Grad zu drehen. Das wäre zu einfach. Sondern er berechnet alle Zwischenschritte für uns, wir müssen uns darum nicht kümmern und zeigt uns dann das fertige Endergebnis an.

Und das ist, glaube ich, eine sehr schöne Art und Weise, solche Animationen zu machen. Kleines Problem, das funktioniert natürlich mittlerweile auch noch nur in Web kit Browsern, also in Chrome und Safari, Firefox wird da mit Version 4 nachlegen und Internet Explorer 9 wird das haben. Genau. Dann möchte ich noch ein Beispiel zeigen, was zu diesem related Technologies gehört. Das ist Geolocation, und zwar möchte jetzt mein Server meine physische Lokalität orten und deswegen bekomme ich hier so ein, so eine Anzeige und ich muss mich jetzt ein bisschen beeilen und auf lau klicken, sonst war es das nämlich mit der Demo. Und, jetzt hat er mich gefunden. Zeigt mir sofort an, oder gibt mir per Javascript die Koordinaten zurück, latitude and longitude und man kann das dann ganz einfach auf eine Google Maps werfen, vielleicht auch auf eine Wien.at Maps irgendwann, man kann, man kann über Yahoo Placemaker kann man sich den Stadtteil heraussuchen lassen und die Koordinaten des Stadtteils abfragen und kann dann relativ genau feststellen, dass wir jetzt in Kaisermühle, 1220 Wien, Österreich sind. Was eine spannende Sache ist, wenn man location based Services hat und deswegen sollte man da auf jeden Fall rein schauen als Option. Ja. Danke, das waren New Exciting Web Technologies.

Klaus Miesenberger: Herzlichen Dank, Eric. Fragen?

Eric Eggert: Traut sich wer? Ja.

Frage A: Ich habe eine Frage zum Thema Barrierefreiheit und HTML5. Und zwar: Soweit ich weiß gibt es in älteren JAWS-Versionen Screenreader Probleme mit dem HTML5 Elementen, dass die irgendwie gar nicht gelesen werden oder irgendwie, also zumindest habe ich schon mal darüber gelesen, dass nur die neuesten Versionen bis 100 Prozent unterstützen.

Eric Eggert: Genau, also es gibt, es gibt ein Problem in einem Browser, es gibt einen Window-Eyes-Bug, und zwar werden dort Navigationselemente in Headerelementen nicht gelesen. Dagegen können wir nichts tun. Meine Einstellung dazu ist, auch da, da diese Screenreaderentwickler sehr schnell jetzt versuchen, auf diese neuen Technologien sowieso aufzuspringen, einfach beibehalten und es steht jedem Screenreadernutzer frei auch gerne NVDA zu benutzen, das kann das, das bekommt das gratis mit. Und es kann nicht sein, dass man auf einzelnen Seiten Lösungen für einzelne Browserversionen oder Screenreaderversionen macht. Deswegen stehe ich auf dem Standpunkt, weil das nur ein Screenreader unter vielen ist, dass man da die Technologie nutzt. Und einfach abwartet, bis dieser Bug behoben ist, weil das ist definitiv einfach ein Problem von dem Screenreader und nicht meines.

Klaus Miesenberger: Eine Frage noch? Nächstes Mal weiter vorne sitzen.

Frage B: Ich habe noch eine Frage zu Deinen Beispielen mit IE9 beziehungsweise zu Versionen kleiner als IE9. Du hast immer wieder gesagt, na ja, da gibt es so ganz tolle Javascripts, die man da irgendwo reinschmeißt und dann funktioniert das äquivalent oder genau so. Jetzt frage ich mich, wenn ich so viel Javascript in meine Seite haue, welche Auswirkungen hat das auf die Performance von einem IE 8 oder einem IE7?

Eric Eggert: Ja, das ist eine gute Frage. Es hat wahrscheinlich, jetzt finde ich natürlich das, was ich gerne hätte, nicht. Es hat sicherlich eine Auswirkung. Aber die Alternative ist oft ein Flash raus zu geben zum Beispiel. Ob das eine bessere Performance hat wage ich zu bezweifeln. Viele, viele Sachen nutzen auch Flashtechnologie, nutzen tatsächlich Internet Explorer eigene Technologien wie VML, was kein Webstandard ist, sondern was Microsoft-Technik ist, um diese Sachen anzuzeigen. Die können im einzelnen Fall sogar schneller sein als bei einem anderen Browser die Canvas. Implementierung zum Beispiel. Das ist abzuwägen.

Es gibt das HTML5 Boilerplate und einen Ausschnitt davon sind diese Polyfields. Das ist die All in One entirely not alphabetical no bullshit guide to HTML Fallbacks. Hauptsache no Bullshit. Und damit kann man einzelne Teile von HTML5 nachbilden. Was man nicht tun sollte ist diese ganzen Polyfills, diese ganzen Überbrückungslösungen reinballern, falls man es mal brauchen könnte. Sondern nur, ich nutze jetzt Audio, also suche ich mir einen Flash Fallback für dieses Audio. Ich benutze jetzt Canvas, dann suche ich mir ein Canvas Fallback dazu. Alles andere ist natürlich Nonsens.

Klaus Miesenberger: Herzlichen Dank, Eric. Ich denke, wir machen jetzt Schluss. Wir müssen wieder Kraft tanken. Und dann für den Ritt in den Westen.

Bilder von web’n’foto.