HTML5 - was es kann (Teil 1)

Apple-Chef Steve Jobs hat ihn bereits vor fast einem Jahr angekündigt - den Tod von Adobe Flash. Und jetzt könnte die Multimedia-Entwicklungsplattform tatsächlich schneller sterben, als Adobe lieb sein kann. HTML5 bietet viele der Features, die Webseitenbetreiber bisher nur in Flash umsetzen konnten - Audio, Video und interaktive Grafiken - von Haus aus, ohne dass lästige Nachinstallationen auf Seiten der Anwender nötig sind.

Dabei ist HTML5 an sich schon sehr alt. Das World Wide Web Consortium (W3C), das über alle Web-Standards wacht, arbeitet seit fast sieben (!) Jahren an dem jüngsten HTML-Spross und könnte im schlimmsten Fall noch bis ins Jahr 2022 brauchen, bis der Standard tatsächlich reif für den Markt ist. Das behauptet zumindest Ian Hickson, Google-Mitarbeiter und W3C-Mitglied.

Weitere elf Jahre zu warten möchte sich in der Industrie aber niemand zumuten und so werden bereits jetzt viele HTML5-Features in die Webbrowser implementiert. So stehen zumindest den Nutzern der neuesten Browser die Möglichkeiten, die HTML5 bietet, offen - sofern sie auf den Websites auch schon ausgenutzt werden.

Vier Kernbereiche

Die neuen Features lassen sich grob in vier Bereiche unterteilen:

• Präsentationsformen: Webdesigner bekommen dank neuer oder mächtigerer Tags wie <video> und <canvas> mehr Möglichkeiten, beispielsweise Grafiken interaktiver und aufwändiger zu gestalten.

• Datenaufbereitung: Ohne Internetverbindung lassen sich ständig aktuelle Web-Seiten nicht anzeigen. Mit neuen Tools für die Datenverarbeitung wandeln sich Websites vom Rahmen für die reine Inhaltedarstellung zu Stand-alone-Applikationen, die Daten zwischenspeichern und später anzeigen, ohne dann noch eine Verbindung zum Internet zu benötigen.

• Weitere Extras: Dienste für Lokalisierung und Präsentationen sind nur zwei Beispiele für viele kleine Verbesserungen, die bisher in der offiziellen HTML5-Spezifikation noch gar nicht auftauchen.

• Behebung alter Fehler: Jeder Browser verarbeitet HTML-Quellcode bisher anders. HTML5 soll diese Unterschiede ausräumen und für ein einheitliches Bild sorgen.

Auf den folgenden Seiten lesen Sie alle Details über den Bereich der neuen Präsentationsformen. Die weiteren Bereiche stellen wir im Laufe der kommenden Wochen in gesonderten Artikeln vor.

Canvas

Das neu eingeführte <canvas>-Tag ist streng genommen ein Sündenfall. Damit wird ein rechteckiger Bereich auf der Website erstellt, in dem JavaScript-Code eingebaut werden kann, um Bitmapgrafiken dynamisch zu rendern. Ursprünglich war HTML als reine Auszeichnungssprache gedacht, um Daten grafisch darstellen zu können. Die Umsetzung dieser Darstellung blieb dem Browser überlassen. Das jetzt direkt im Code implementierte Rendering bricht mit dem alten Prinzip. Vor allem für grafisch anspruchsvolle Webdesigner ist das Tag eine gute Sache, weil sie es nun selbst in der Hand haben, wie bestimmte Seitenelemente aussehen sollen. Die Idee für das Canvas-Element stammt von Apple, das das Tag in sein WebKit-Projekt eingebaut hatte. Alle Hersteller kopierten die Idee - schlussendlich folgte auch Microsoft, das sich lange gesträubt hatte, mit dem Internet Explorer 9. Grund: Viele Anwender nutzten bereits Tools von Drittanbietern, die den Browser um die Möglichkeiten von <canvas> erweiterten.

Trotz des neuen Standards funktioniert die identische Darstellung der Grafiken nicht in allen Web-Browsern bisher einwandfrei. So nahm Philip Taylor einen vollständigen Canvas-Test vor, der alle Arten prüft, auf die JavaScript mit grafischen Objekten umgehen kann. Sein Ergebnis: Viele Standardvorgänge - wie das Zeichnen einer Linie - sind in allen Browsern nahezu gleich implementiert. Einige andere grafische Routinen wie das Rendering von Text oder Kurven realisieren die Programme jedoch höchst unterschiedlich - sehr komplexe Prozesse können sogar zum Selbstabsturz führen und darin münden, dass Websites in unleserlichen Hieroglyphen enden.

Wenn Sie selbst testen möchten, ob Ihr Browser HTML5 Canvas unterstützt, klicken Sie auf diesen Link. Dort sind einige Links mittels eines jQuery-Plugins animiert worden. Das Plugin sucht sich die Links aus dem Quelltext heraus und gibt sie in Form einer animierten Linkwolke aus, die auf die Bewegungen des Mauszeigers reagiert. Wenn die Animation bei Ihnen funktioniert (vgl. auch die beiden Bilder) nutzen Sie bereits einen HTML5-tauglichen Browser. Internet Explorer 8 oder niedriger kann das nur mithilfe eines speziellen Plug-ins von Google (ExplorerCanvas). Die folgenden Versionen der gängigen Webbrowser unterstützen Canvas von Haus aus:

• Apple Safari 5

• Google Chrome 8

• Microsoft Internet Explorer 9

• Mozilla Firefox 3.6

• Opera 10.60

Video und Audio

Das Tag <video> erscheint auf den ersten Blick harmlos. Ähnlich wie beim <img>-Element, das für die Einbettung von Bildern sorgt, ist der <video>-Befehl für jedermann einfach nutzbar: Videodatei hochladen, Adresse des Videos im Tag angeben und fertig.

Wenn es doch nur so einfach wäre… Die Vorgehensweise ist in der Tat leicht, wie oben beschrieben, die unterstützten Videoformate sind jedoch sehr unterschiedlich. Wenn alle Browser die wichtigsten Standardformate unterstützten - wie bei den Bildern, wo jeder zumindest JPG, PNG und GIF kann - wäre das egal. Jeder Browser aber hat eigene Stärken und Schwächen und standardisierte Videoformate für alle Plattformen gibt es schon einmal gar nicht. Aktuell sind das von der Open-Source-Community entwickelte Ogg-Format, MPEG H.264 und VP8 von On2, das seit kurzem zu Google gehört, die am weitesten verbreiten Videoformate im Web. Es gibt aber noch mehr - Apple-Anwender arbeiten mit QuickTime, und so kann der Safari-Browser auch nur alles auflösen, was auch von QuickTime verarbeitet wird.

Patente und Lizenzen

OGG, H.264 und VP8 liefern vergleichbare Ergebnisse bei der Darstellung von Videos. Das einzige, worüber sich Webentwickler Gedanken machen müssen, ist die Frage nach den Patenten. H.264 ist ein weit verbreitetes Format, kostet aber Lizenzgebühren seitens der MPEG LA Group. Im Gegenzug spart H.264 auch Geld, weil es viele Hardware-Encoder gibt, die die komprimierten MPEG-Dateien mit geringem Aufwand verarbeiten können. So lässt sich besonders bei mobilen Geräten Strom sparen.

Die On2-Patente für das VP8-Format wurden mittlerweile auf Royalty-free-Lizenzen umgestellt (einmalige Nutzung ohne jede Einschränkung), was die Beliebtheit von derart komprimierten Videos keinesfalls schmälert. Die OGG-Dateien unterstehen im Gegensatz zu VP8 und H.264 keinen eingeklagten Patentrechten und werden derzeit noch ziemlich ungeniert eingesetzt. Das kann sich schlagartig ändern, sobald die Patentinhaber hier Ernst machen.

Die Patentfrage ist für viele kleine Unternehmen und ihre Webdesigner und Videoproduzenten jedoch nicht von Belang, da die Lizenzgebühren meist bereits von den Herstellern der zur Weiterverarbeitung des Filmmaterials eingesetzten Werkzeuge bezahlt worden sind. Für große Unternehmen reicht das aber nicht aus, da beispielsweise die MPEG LA Group zusätzlich abkassiert, wenn mit H.264 kodierte Videos einem breiten Publikum zugänglich gemacht werden. Sobald eine bestimmte Zuschauerzahl erreicht wird, werden besondere Lizenzen notwendig, die dann aber zumindest bis ins Jahr 2015 hinein unverändert gültig bleiben sollen - so verspricht es eine offizielle Erklärung der Rechteinhaber.

Wer es unterstützt

Wenn Sie jetzt denken: Das ist aber alles kompliziert, dann haben Sie Recht. Am besten spielen Sie einfach ein wenig mit den neuen Möglichkeiten, die HTML5 bezüglich Videoeinbettung bietet, herum und bieten ihre Filme in multiplen Formaten an - mittels eines Skriptes wird dann browserabhängig entschieden, welches Format ausgegeben wird. Auch für das neue Video-Element gilt: Die aktuellen Versionen der gängigen Browser unterstützen es:

• Apple Safari 5

• Google Chrome 8

• Microsoft Internet Explorer 9

• Mozilla Firefox 3.6

• Opera 10.60

Um Ihren Browser zu testen, klicken Sie hier. Wenn Sie die Logos fliegen sehen, sind Sie auf der sicheren Seite. Wenn nicht, sollten Sie nach- oder aufrüsten.

Audio

Für das Audio-Tag gilt das Gleiche wie beim Video. <video> produziert sowohl Sound als auch Bilder, <audio> verarbeitet nur den Sound. Die meisten Audiotracks sind lediglich ein Subset des Videoformats. So ist das beliebte MP3-Format nichts anderes als eine Unterklasse des MPEG-Videoformats. Es ist davon auszugehen, dass deshalb für das finale Audio-Element die gleichen Regeln gelten werden wie für das Video-Element. Wenn der Firefox-Browser beispielsweise das Ogg-Videoformat unterstützt, macht er das dementsprechend auch mit dem Ogg-Vorbis-Audioformat. Die einzig bekannte Ausnahme von dieser Regel ist die MPEG4-MP3-Familie. Viele Browser unterstützen MP3-Audios unabhängig vom MPEG4-Video. So bringt Google Chrome 7 zwar MP3 auf die Straße, MPEG4 aber nicht.

Browser im Check

Lesen Sie in folgender Tabelle, welche aktuellen Browser welche der beschriebenen Video/Audio-Formate in HTML5 unterstützen:

HTML5 Video/Audio

Browser	H.264/MPEG-4	Ogg Theora / Ogg Vorbis	VP8
Apple Safari 5	Ja	Nein	Nein
Google Chrome 8	Ja	Ja	Ja
Microsoft IE 9	Ja	Nein	Nein
Mozilla Firefox 3.6 / 4.0	Nein / Nein	Ja / Nein	Nein / Ja
Opera 10.60	Nein	Ja	Ja

Skalierbare Vektorgrafiken (SVG)

Wie bereits im Textabschnitt über Canvas beschrieben, war die Intention des HTML-basierten Webs die standardisierte Auslieferung von Daten, die anschließend vom lokalen Rechner (Browser) interpretiert werden sollte. Das SVG-Format (Scalable Vector Graphics) wurde zu genau dem gleichen Zweck entwickelt - einfachen ASCII-Text in grafische Formen umzusetzen. Seit 1999 arbeiten verschiedene Fachgremien an dem Format - nun biegen sie auf die Zielgerade ein. Nachdem auch Microsoft mit dem IE9 SVG unterstützt, sind endlich alle wichtigen Browser dabei.

Das SVG-Format soll die gleiche Art von Präzision in die Beschreibung von grafischen Elementen bringen, wie es PostScript für Druckvorlagen sicherstellt. Statt Objekte durch die Spezifikation einzelner Pixel zu beschreiben, ist das Ganze aus Linien und Formen gemacht, die mithilfe von Tags definiert sind. So stellt folgendes Beispiel einen Kreis mit einem Radius von 40 Pixeln dar:

<circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red">

Weil der Browser die Objekte der Bildschirmauflösung anpasst und der Anwender je nach Bedarf vergrößern und verkleinern kann, ist das Ergebnis immer gleich gut. Filme und Spiele, denen animierte Schemata zugrunde liegen, sind dank der Vektortechnik platzsparend und schnell - mit Gzip-Kompression wird der Quellcode noch einmal um bis zu 80 Prozent eingedampft.

SVGB und SVGT

Also SVG gut, alles gut? Bedeutet Microsofts SVG-Einstieg eine einheitliche Vektorsprache? Natürlich nicht. Handy-Hersteller sorgen sich um den hohen Rechenaufwand, der für die Darstellung von SVG-Objekten nötig ist - damit steigt auch der Stromverbrauch der Geräte. Die Unternehmen führten deshalb zwei Subsets ein: SVGB (SVG Basic) und SVGT (SVG Tiny) - beide lassen einige Features außen vor, die für mobile Displays kaum Nutzen bringen: Objektmaße anders zu konfigurieren als über Pixel (über Picas oder Millimeter) beispielsweise. SVGT kann zudem Flächen nur einfarbig füllen.

Es geht auch animiert

Etliche Entwickler experimentieren auch mit einem flexibleren Vektor-Standard. So wurde das <animate>-Tag geboren, das einen Pfad beschreibt, an dem sich Objekte entlang bewegen. Nachdem eine Grafik aus dem Code erstellt worden ist, rechnet die SVG-Engine eine neue Position aus und zeichnet die Grafik an dieser Stelle erneut. Derzeit wird <animate> von allen Gecko- und WebKit-Browsern unterstützt - Internet Explorer 9 kann es hingegen nicht.

Nach dem Willen einiger anderer sollen besondere SVG-Effekte wie Farbfilter und Begrenzungen jedes beliebige Stück HTML eingepflegt werden können. So hat das Mozilla-Team den HTML5-Entwicklern einen Entwurf für Vektoreneffekte für das HTML-Subset CSS (Cascading Style Sheets) vorgelegt. Der Firefox setzt diesen Vorschlag bereits gut um - andere Browser sind hingegen noch sehr fehleranfällig in diesem Punkt. Das ist aber auch kein Wunder, haben die Firefox-Macher doch sowohl den Code als auch die Spezifikationen für die SVG-Einbindung gleichzeitig entworfen.

Ein dritter Bereich, in dem sich die Browser noch sehr unterscheiden, ist die Integration von SVG-basierten Schriften. Anders als PostScript lässt es die Standardversion von SVG nicht zu, dass jeder beliebige Strich in ein Bildzeichen respektive einen Teil eines Buchstabens umgesetzt wird. Nur die WebKit-Browser können das bereits von Haus aus, weil sie die Grundlagen von SVG-Fonts unterstützen; IE und Gecko müssen erst noch angepasst werden.

Obwohl Vektorengrafiken "gestochen scharf" sind, haben es einige Anwender lieber etwas - künstlerisch anspruchsvoll - verschwommener. Blur-Filter, die dies ermöglichen, werden von Chrome, Opera und Firefox angeboten.

Kann Ihr Browser SVG?

Mit diesem schnellen SVG-Test prüfen Sie Ihren Browser, ob er in der Lage ist, eingebettete SVG-Tags zu verarbeiten. Eine gelungene Zusammenstellung von SVG-Beispielen und Browser-Tests von Andre Winter zeigt die verschiedenen Möglichkeiten, die aktuell noch in der Experimentierphase sind.

Lesen Sie in folgender Tabelle, welche aktuellen Browser welche der beschriebenen SVG-Formate in HTML5 unterstützen:

SVG im Browser-Check

Browser	Zeigt SVG an	SVG-Effekte in HTML	SVG-Filter	SVG-Schriften	SVG in CSS	Animierte SVGs
Safari 5.0 / 6.0	Ja / Ja	Teilweise / Teilweise	Nein / Jja	Ja / Ja	Ja / Jja	Ja / Ja
Chrome 8.0 / 9.0	Ja / Ja	Teilweise / Teilweise	Teilweise / Teilweise	Ja / Ja	Ja / Ja	Ja / Ja
IE 8.0 / 9.0	Nein / Ja	Nein / Teilweise	Nein / Nein	Nein / Nein	Nein / Ja	Nein / Nein
Firefox 3.6 / 4.0	Ja / Ja	Ja / Ja	Ja / Ja	Nein / Nein	Nein / Ja	Nein / Ja
Opera 10.60 / 11.0	Ja / Ja	Teilweise / Teilweise	Ja / Ja	Ja / Ja	Ja / Ja	Ja / Ja

WebGL = Canvas 3D

WebGL bringt die Features von OpenGL in das Canvas-Tag. Viele der aktuellen Browser unterstützen es bereits, sofern der Anwender es von sich aus aktiviert, indem er einige Konfigurationsdateien anpasst. Bei Google Chrome wird WebGL beispielsweise über die Kommandozeile eingeschaltet - mit Hilfe des Parameters "--enable-webgl". In Mozilla Firefox lässt sich WebGL über die Konfiguration der "about:config" aktivieren.

WebGL ist kein offizieller Bestandteil von HTML5, wird aber oft mit diesem zusammen beschrieben, weil die 3D-Technologie eng mit dem Canvas-Element verknüpft ist. Die erreichte Performance hängt aber natürlich stark von der Grafikkarte und dem verfügbaren Arbeitsspeicher ab. Wer sich einige WebGL-Routinen anschauen möchte, die zum Browsertest geeignet sind, besucht am besten diese Seite von Andor Salga.

Der Artikel stammt von Peter Wayner von unserer US-Schwesterpublikation InfoWorld. Die HTML5-Reihe wird fortgesetzt. (sh)