Web

Video, Audio, Vektorgrafik

HTML5 - was es kann (Teil 1)

12.02.2011
Von 


Simon Hülsbömer betreut als Senior Research Manager Studienprojekte in der Marktforschung von CIO, CSO und COMPUTERWOCHE. Zuvor entwickelte er Executive-Weiterbildungen und war rund zehn Jahre lang als (leitender) Redakteur tätig. Hier zeichnete er u.a. für die Themen IT-Sicherheit und Datenschutz verantwortlich.

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.

Canvas nein: Der IE6 unterstützt kein HTML5.
Canvas nein: Der IE6 unterstützt kein HTML5.

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.

Canvas ja: Firefox 3.6 bietet bereits volle HTML5-Unterstützung.
Canvas ja: Firefox 3.6 bietet bereits volle HTML5-Unterstützung.

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