HTML5 - was es kann (Teil 1) (Druckansicht)

http://www.computerwoche.de/_misc/article/articleprintpopup/index.c...

Video, Audio, Vektorgrafik

HTML5 - was es kann (Teil 1)

Datum: Autor(en): URL: 05.01.2011 Simon Hlsbmer http://www.computerwoche.de/2359851

Der neue Web-Standard HTML5 steht 2011 vor dem Durchbruch. Wir zeigen, was sich Entwicklern und Anwendern fr neue Mglichkeiten bieten.

HTML5 bringt neuen Schwung ins Web. Foto: Fotolia/Computerwoche Apple-Chef Steve Jobs hat ihn bereits vor fast einem Jahr angekndigt1 - den Tod von Adobe Flash. Und jetzt knnte die Multimedia-Entwicklungsplattform tatschlich 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 lstige Nachinstallationen auf Seiten der Anwender ntig sind.

Dabei ist HTML5 an sich schon sehr alt. Das World Wide Web Consortium (W3C)2, das ber alle Web-Standards wacht, arbeitet seit fast sieben (!) Jahren an dem jngsten HTML-Spross3 und knnte im schlimmsten Fall noch bis ins Jahr 2022 brauchen, bis der Standard tatschlich reif fr den Markt ist. Das behauptet zumindest Ian Hickson4, GoogleMitarbeiter und W3C-Mitglied.

Weitere elf Jahre zu warten mchte 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 Mglichkeiten, 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:

1 von 7

05.01.2011 13:45

HTML5 - was es kann (Teil 1) (Druckansicht)

http://www.computerwoche.de/_misc/article/articleprintpopup/index.c...

Prsentationsformen: Webdesigner bekommen dank neuer oder mchtigerer Tags wie <video> und <canvas> mehr Mglichkeiten, beispielsweise Grafiken interaktiver und aufwndiger zu gestalten. Datenaufbereitung: Ohne Internetverbindung lassen sich stndig aktuelle Web-Seiten nicht anzeigen. Mit neuen Tools fr die Datenverarbeitung wandeln sich Websites vom Rahmen fr die reine Inhaltedarstellung zu Stand-alone-Applikationen, die Daten zwischenspeichern und spter anzeigen, ohne dann noch eine Verbindung zum Internet zu bentigen. Weitere Extras: Dienste fr Lokalisierung und Prsentationen sind nur zwei Beispiele fr 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 ausrumen und fr ein einheitliches Bild sorgen. Auf den folgenden Seiten lesen Sie alle Details ber den Bereich der neuen Prsentationsformen. Die weiteren Bereiche stellen wir im Laufe der kommenden Wochen in gesonderten Artikeln vor.

Canvas Das neu eingefhrte <canvas>-Tag ist streng genommen ein Sndenfall. Damit wird ein rechteckiger Bereich auf der Website erstellt, in dem JavaScript-Code eingebaut werden kann, um Bitmapgrafiken dynamisch zu rendern. Ursprnglich war HTML als reine Auszeichnungssprache gedacht, um Daten grafisch darstellen zu knnen. Die Umsetzung dieser Darstellung blieb dem Browser berlassen. Das jetzt direkt im Code implementierte Rendering bricht mit dem alten Prinzip. Vor allem fr 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 fr 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 gestrubt hatte, mit dem Internet Explorer 9. Grund: Viele Anwender nutzten bereits Tools von Drittanbietern, die den Browser um die Mglichkeiten von <canvas> erweiterten.

Canvas nein: Der IE6 untersttzt kein HTML5. Trotz des neuen Standards funktioniert die identische Darstellung der Grafiken nicht in allen Web-Browsern bisher einwandfrei. So nahm Philip Taylor einen vollstndigen Canvas-Test5 vor, der alle Arten prft, auf die JavaScript mit grafischen Objekten umgehen kann. Sein Ergebnis: Viele Standardvorgnge - 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 hchst unterschiedlich - sehr komplexe Prozesse knnen sogar zum Selbstabsturz fhren und darin mnden, dass Websites in unleserlichen Hieroglyphen enden.

2 von 7

05.01.2011 13:45

HTML5 - was es kann (Teil 1) (Druckansicht)

http://www.computerwoche.de/_misc/article/articleprintpopup/index.c...

Canvas ja: Firefox 3.6 bietet bereits volle HTML5-Untersttzung. Wenn Sie selbst testen mchten, ob Ihr Browser HTML5 Canvas untersttzt, klicken Sie auf diesen Link6. 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)7. Die folgenden Versionen der gngigen Webbrowser untersttzen 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 fr die Einbettung von Bildern sorgt, ist der <video>-Befehl fr jedermann einfach nutzbar: Videodatei hochladen, Adresse des Videos im Tag angeben und fertig.

Wenn es doch nur so einfach wre Die Vorgehensweise ist in der Tat leicht, wie oben beschrieben, die untersttzten Videoformate sind jedoch sehr unterschiedlich. Wenn alle Browser die wichtigsten Standardformate untersttzten - wie bei den Bildern, wo jeder zumindest JPG, PNG und GIF kann - wre das egal. Jeder Browser aber hat eigene Strken und Schwchen und standardisierte Videoformate fr 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 gehrt, 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 auflsen, was auch von QuickTime verarbeitet wird.

Patente und Lizenzen OGG, H.264 und VP8 liefern vergleichbare Ergebnisse bei der Darstellung von Videos. Das einzige, worber sich Webentwickler Gedanken machen mssen, ist die Frage nach den Patenten. H.264 ist ein weit verbreitetes Format, kostet aber Lizenzgebhren seitens der MPEG LA Group8. Im Gegenzug spart H.264 auch Geld, weil es viele Hardware-Encoder gibt, die die komprimierten MPEG-Dateien mit geringem Aufwand verarbeiten knnen. So lsst sich besonders bei mobilen Gerten Strom sparen.

Die On2-Patente fr das VP8-Format wurden mittlerweile auf Royalty-free-Lizenzen9 umgestellt (einmalige Nutzung

3 von 7

05.01.2011 13:45

HTML5 - was es kann (Teil 1) (Druckansicht)

http://www.computerwoche.de/_misc/article/articleprintpopup/index.c...

ohne jede Einschrnkung), was die Beliebtheit von derart komprimierten Videos keinesfalls schmlert. 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 fr viele kleine Unternehmen und ihre Webdesigner und Videoproduzenten jedoch nicht von Belang, da die Lizenzgebhren meist bereits von den Herstellern der zur Weiterverarbeitung des Filmmaterials eingesetzten Werkzeuge bezahlt worden sind. Fr groe Unternehmen reicht das aber nicht aus, da beispielsweise die MPEG LA Group zustzlich abkassiert, wenn mit H.264 kodierte Videos einem breiten Publikum zugnglich gemacht werden. Sobald eine bestimmte Zuschauerzahl erreicht wird, werden besondere Lizenzen notwendig, die dann aber zumindest bis ins Jahr 2015 hinein unverndert gltig bleiben sollen - so verspricht es eine offizielle Erklrung10 der Rechteinhaber.

Wer es untersttzt Wenn Sie jetzt denken: Das ist aber alles kompliziert, dann haben Sie Recht. Am besten spielen Sie einfach ein wenig mit den neuen Mglichkeiten, die HTML5 bezglich Videoeinbettung bietet, herum und bieten ihre Filme in multiplen Formaten an - mittels eines Skriptes wird dann browserabhngig entschieden, welches Format ausgegeben wird. Auch fr das neue Video-Element gilt: Die aktuellen Versionen der gngigen Browser untersttzen 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 hier11. Wenn Sie die Logos fliegen sehen, sind Sie auf der sicheren Seite. Wenn nicht, sollten Sie nach- oder aufrsten.

Audio Fr 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 fr das finale Audio-Element die gleichen Regeln gelten werden wie fr das Video-Element. Wenn der Firefox-Browser beispielsweise das Ogg-Videoformat untersttzt, macht er das dementsprechend auch mit dem Ogg-VorbisAudioformat. Die einzig bekannte Ausnahme von dieser Regel ist die MPEG4-MP3-Familie. Viele Browser untersttzen MP3-Audios unabhngig vom MPEG4-Video. So bringt Google Chrome 7 zwar MP3 auf die Strae, MPEG4 aber nicht.

Browser im Check Lesen Sie in folgender Tabelle, welche aktuellen Browser welche der beschriebenen Video/Audio-Formate in HTML5 untersttzen:

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

4 von 7

05.01.2011 13:45

HTML5 - was es kann (Teil 1) (Druckansicht)

http://www.computerwoche.de/_misc/article/articleprintpopup/index.c...

Skalierbare Vektorgrafiken (SVG) Wie bereits im Textabschnitt ber Canvas beschrieben, war die Intention des HTML-basierten Webs die standardisierte Auslieferung von Daten, die anschlieend 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 untersttzt, sind endlich alle wichtigen Browser dabei.

Das SVG-Format soll die gleiche Art von Przision in die Beschreibung von grafischen Elementen bringen, wie es PostScript fr 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 Bildschirmauflsung anpasst und der Anwender je nach Bedarf vergrern 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? Natrlich nicht. HandyHersteller sorgen sich um den hohen Rechenaufwand, der fr die Darstellung von SVG-Objekten ntig ist - damit steigt auch der Stromverbrauch der Gerte. Die Unternehmen fhrten deshalb zwei Subsets ein: SVGB (SVG Basic) und SVGT (SVG Tiny) - beide lassen einige Features auen vor, die fr mobile Displays kaum Nutzen bringen: Objektmae anders zu konfigurieren als ber Pixel (ber Picas oder Millimeter) beispielsweise. SVGT kann zudem Flchen nur einfarbig fllen.

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 untersttzt - Internet Explorer 9 kann es hingegen nicht.

Nach dem Willen einiger anderer sollen besondere SVG-Effekte wie Farbfilter und Begrenzungen jedes beliebige Stck HTML eingepflegt werden knnen. So hat das Mozilla-Team den HTML5-Entwicklern einen Entwurf fr Vektoreneffekte12 fr das HTML-Subset CSS (Cascading Style Sheets)13 vorgelegt. Der Firefox setzt diesen Vorschlag bereits gut um - andere Browser sind hingegen noch sehr fehleranfllig in diesem Punkt. Das ist aber auch kein Wunder, haben die Firefox-Macher doch sowohl den Code als auch die Spezifikationen fr 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 lsst 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 knnen das bereits von Haus aus, weil sie die Grundlagen von SVG-Fonts untersttzen; IE und Gecko mssen erst noch angepasst werden.

Obwohl Vektorengrafiken "gestochen scharf" sind, haben es einige Anwender lieber etwas - knstlerisch anspruchsvoll verschwommener. Blur-Filter, die dies ermglichen, werden von Chrome, Opera und Firefox angeboten.

Kann Ihr Browser SVG? Mit diesem schnellen SVG-Test14 prfen 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 Winter15

5 von 7

05.01.2011 13:45

HTML5 - was es kann (Teil 1) (Druckansicht)

http://www.computerwoche.de/_misc/article/articleprintpopup/index.c...

zeigt die verschiedenen Mglichkeiten, die aktuell noch in der Experimentierphase sind.

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

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 OpenGL16 in das Canvas-Tag. Viele der aktuellen Browser untersttzen 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 lsst 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 verknpft ist. Die erreichte Performance hngt aber natrlich stark von der Grafikkarte und dem verfgbaren Arbeitsspeicher ab. Wer sich einige WebGL-Routinen anschauen mchte, die zum Browsertest geeignet sind, besucht am besten diese Seite von Andor Salga17.

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

Links im Artikel:
1 2 3 4 5 6 7 8 9

http://www.apple.com/hotnews/thoughts-on-flash/ http://www.w3.org/ http://www.w3.org/TR/html5/ http://blogs.techrepublic.com.com/programming-and-development/?p=718 http://philip.html5.org/tests/canvas/suite/tests/ http://www.wayner.org/node/73 http://code.google.com/p/explorercanvas/ http://www.mpegla.com/main/default.aspx http://en.wikipedia.org/wiki/Royalty-free http://www.mpegla.com/Lists/MPEG%20LA%20News%20List/Attachments/226/n-10-02-02.pdf http://www.wayner.org/node/72 http://people.mozilla.com/%7Eroc/SVG-CSS-Effects-Draft.html http://de.wikipedia.org/wiki/Cascading_Style_Sheets http://www.wayner.org/node/74

10 11 12 13 14

6 von 7

05.01.2011 13:45

HTML5 - was es kann (Teil 1) (Druckansicht)

http://www.computerwoche.de/_misc/article/articleprintpopup/index.c...

15 16 17 18

http://www.carto.net/papers/svg/samples/ http://de.wikipedia.org/wiki/OpenGL http://matrix.senecac.on.ca/%7Easalga/pjswebide/

http://www.infoworld.com/d/programming/html5-in-the-browser-canvas-video-audio-and-graphics808?page=0,0
IDG Business Media GmbH Alle Rechte vorbehalten. Jegliche Vervielfltigung oder Weiterverbreitung in jedem Medium in Teilen oder als Ganzes bedarf der schriftlichen Zustimmung der IDG Business Media GmbH. DPA-Texte und Bilder sind urheberrechtlich geschtzt und drfen weder reproduziert noch wiederverwendet oder fr gewerbliche Zwecke verwendet werden. Fr den Fall, dass in Computerwoche unzutreffende Informationen verffentlicht oder in Programmen oder Datenbanken Fehler enthalten sein sollten, kommt eine Haftung nur bei grober Fahrlssigkeit des Verlages oder seiner Mitarbeiter in Betracht. Die Redaktion bernimmt keine Haftung fr unverlangt eingesandte Manuskripte, Fotos und Illustrationen. Fr Inhalte externer Seiten, auf die von Computerwoche aus gelinkt wird, bernimmt die IDG Business Media GmbH keine Verantwortung.

7 von 7

05.01.2011 13:45