1253981383|%d.%m.%Y
Als vor mehr als zehn Jahren HTML 4.01 in seiner Entstehungsphase war, interessierten sich die meisten Webdesigner noch mehr für den Browser-Krieg zwischen Netscape und Internet Explorer als für Details des neuen HTML-Standards. In dieser Hinsicht hat sich viel getan. Das Bewusstsein für robuste Web-Standards ist in Entwicklerkreisen halbwegs kollektiv geworden, und Browser bemühen sich um Umsetzung der Standards statt um konkurrierende, eigenbrötlerische Konzepte. Doch etwas hat abgenommen: die Bereitschaft, sich mit unendlicher Geduld mit den Standards auseinanderzusetzen. Da kommt ein Einführungsvideo natürlich gerade recht.
Brad Neuberg: Introduction to HTML 5 — en, ca. 42min.), veröffentlicht im September 2009
Dass Brad Neuberg, der Introducer des Videos, zu Google gehört, kann man natürlich als störend empfinden. Aber die totale Neutralität, von der manche Web-Hardliner träumen, gibt es ohnehin nicht. Auch Einrichtungen wie das W3-Konsortium oder die WHATWG sind letztlich Konsortien interessierter Unternehmen, keine Mönchsklöster.
Neuberg beginnt seine Einführung mit dem Verweis auf die enormen technischen Fortschritte, die es in den letzten Jahren im Bereich der Browser-Engines gegeben hat. Besonders durch die dramatischen Verbesserungen bei den JavaScript-Engines ist eine neue Situation eingetreten: Web-Browser haben client-seitig ein hohes Datenverarbeitungspotenzial. Ausgehend davon behandelt Neuberg in seiner Einführung Aspekte von HTML 5, die das gestiegene client-seitige Verarbeitungspotenzial der modernen Browser-Engines nutzen:
- Vektorgrafik
- Video
- Geo-Location
- Web-Application-Cache
- Webworker
Vektorgrafik
Mit VML, Flash, Silverlight und anderen Technologien haben einzelne Anbieter immer wieder versucht, die offensichtliche Lücke für dynamische Vektorgrafik im Web zu füllen. Möglicherweise hat der Erfolg von Flash das Leiden an dieser Lücke erträglich gehalten. Doch auf die Dauer sind nur intrinsische Lösungen sinnvoll. Die Schlüssel dafür sind das SVG-Format und das neue canvas-Element von HTML 5.
SVG
Das Problem von SVG (Scalable Vector Graphics) bislang war, dass es zwar von allen begrüßt wurde und die Möglichkeiten von Vektorgrafik im Web hervorragend bediente, doch die Integration fehlte. Neuere Browser sind zwar in der Lage, SVG direkt und ohne Fremd-Plugin im Browserfenster darzustellen, doch eine weitere Hürde war bis zuletzt die Frage der Einbettung. Weder das zu generische object-Element von HTML noch die zu XML-spezifische Namensraum-Lösung wurden der Praxis wirklich gerecht. HTML 5 löst das Problem so schlicht, wie es sich der gesunde Menschenverstand diesseits komplexer Markup-Konzepte vorstellt:
<p>Irgendwo mitten in einem <strong>HTML</strong>-Dokument:</p> <svg width="200" height="200"> <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5" rx="8" ry="8" id="myrect" class="chart" /> </svg> <p>Und weiter mit HTML!</p>
SVG wird also in HTML 5 einfach zu einem normalen HTML-Element, und sein Inhalt kann alle SVG-spezifischen Elemente enthalten. Es ist unschwer sich vorzustellen, dass diese schlichte Lösung erhebliche Auswirkungen auf die Art haben wird, Webdesign zu betreiben. Da die meisten Websites heute template-basiert sind, kann SVG in HTML-Templates durchaus gestalterische Aufgaben übernehmen, z.B. bei Seiten-Headern.
Jedes Element innerhalb eines SVG-Bereichs kann id- und class-Atrribute erhalten und ist damit als Objekt im Document Object Model (DOM) ansprechbar. Im Klartext bedeutet das, dass sich SVG-Grafiken zur Laufzeit problemlos mit Hilfe von JavaScript dynamisch verändern lassen, was zahlreiche Möglichkeiten eröffnet.
Übrigens darf neben SVG auch die Formelbeschreibungssprache MathML direkt innnerhalb von HTML 5 notiert werden.
Das canvas-Element
Wie im Artikel Dynamic HTML 5 bereits beschrieben, ist das canvas-Element eine Art Container für dynamische Grafiken, der mit Hilfe von Scriptsprachen wie JavaScript beschreibbar ist. Das Problem war bislang immer das Fehlen eines grafischen JavaScript-Objekts. HTML 5 sieht für das canvas-Element sogenannte Kontexte vor. Einen Kontext für 2D-Grafik mit Hilfe von JavaScript liefert HTML 5 dabei gleich mit. Ein schönes Beispiel dafür, welche Vorteile es hat, dass HTML 5 nicht mehr isoliert als Markup-Sprache entwickelt wird, sondern als integrative Basis-Webtechnologie.
Manche Entwickler mögen sich fragen, wie denn nun die Elemente svg und canvas sich ergänzen, oder ob sie sich nicht vielmehr gegenseitig behindern. Brad Neuberg geht auf dieses Thema ein. SVG, so sagt er, sei gut geeignet, um zunächst statisch definierte, grafische Elemente dynamisch zu skalieren. Canvas dagegen sei das Mittel der Wahl, um beliebige grafische Effekte dynamisch zu generieren. Als Beispiel nennt er die Download-Seite des Firefox-Browsers, auf der eine SVG-basierte Weltkarte zu sehen ist. Download-Zugriffe werden in Echtzeit via Geo-Location geortet und scheinen als Lichtpunkte auf der Grafik auf. Letzteres geschieht mittels JavaScript, Ajax-Schnittstelle und canvas. Auch für browser-basierte Spiele, denen eine große Zukunft bescheinigt wird, sei canvas das bessere Mittel der Wahl, weil die Koordination zwischen grafischen Effekten und Tastaturereignissen damit besser möglich sei.
Video
<video> as easy as <img>, so lautet die Botschaft. Und das ist in der Tat eine wichtige Botschaft in einer Zeit, in der ganze Teile der Fernsehprogramme zu Video-Fenstern im Browser werden. Auch Filme wie der, um den es hier im Artikel geht, sollten heute selbstverständlich in Webseiten integrierbar sein. Und zwar nicht mehr mit der unsäglich kruden Misch-Syntax aus object und embed, die auf einen in Flash programmierten Player verweist, der in der Lage ist, Videos wiederzugeben. Diese umständliche Notlösung, ohne die allerdings Portale wie YouTube gar nicht möglich wären, soll durch das video-Element ersetzt werden, das so problemlos funktionieren soll wie das img-Element. Ergänzt übrigens um ein audio-Element für Musik- und Sprachwiedergabe.
Das Problem dabei sind die unterschiedlichen Video-Codecs und leider auch die Lizenzen, die daran hängen. Die Querelen rund um die Codecs und ihre Lizenzen drohten die Implementierung eines Video-Standards fürs Web teilweise sogar ganz zu kippen. Doch glücklicherweise scheint man doch weiter auf dem Weg zu einer solchen Implementierung zu sein.
Brad Neuberg zeigt weitere Vorteile des video-Elements auf. Dazu gehört auch die Manipulierbarkeit durch JavaScript. Nutzbar einerseits natürlich für Spielereien wie rotierende oder zoomende Video-Fenster, aber auch zur script-gesteuerten Kontrolle über Videos. Neuberg zeigt einige Beispiele dafür. Im Zusammenhang mit dem video-Element geht er nebenbei auch auf jene neuen HTML-5-Elemente ein, die gerne zuerst genannt werden, wenn es um Neuerungen in HTML 5 geht, die aber eigentlich nur einen kleinen Teil der neuen Möglichkeiten ausmachen.
Geo-Location
Einige mögen sich zunächst fragen, was die Erkennung von Standorten (Geo-Location) mit HTML 5 zu tun hat. Brad Neuberg geht in seinem Video auf ein Feature ein, das noch nicht so bekannt ist wie etwa canvas oder video. Vielleicht deshalb, weil es kein neues HTML-Element dafür gibt. Die Geo-Location-Funktionalität wird vielmehr durch ein neues Scripting-Objekt bereitgestellt, das ein neues Unterobjekt des bekannten navigator-Objekts ist. Das Stück JavaScript-Code, das Neuberg präsentiert, könnte noch für Furore und Zündstoff sorgen:
navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showLocation(lat, lon); } }
Es handelt sich hier nicht um Pseudo-Wunschdenken-Code, sondern um funktionierendes HTML-5-Scripting! Mit Hilfe verschiedener technischer Methoden, die im Hintergrund ablaufen, versuchen HTML-5-fähige Browser, den Standort ihres Benutzers zu ermitteln. Über JavaScript kann eine Webseite den Standort wie gezeigt erfragen. Die Daten, die im Beispiel in lat und long gespeichert sind, können via Ajax-Schnittstelle beispielsweise an eine Webanwendung gesendet werden. Interessant ist das etwa für Social-Networking-Anwendungen. Aber natürlich auch für die Werbeindustrie. Und erst Recht für den Schäuble-Staat …
Web-Application-Cache
Cloud-Computing gilt als die Zukunft produktiven Arbeitens mit Computern. Zugriff auf eigene oder mit Anderen geteilte Daten von überall aus, geräteunabhängig, standortunabhängig. Doch während immer mehr Daten in die Server-Wolken wandern, wird auf den leistungsfähigen PCs viel Potenzial verschenkt. Ungenutzter Festplattenspeicher, ungenutzte Rechenleistung. Wirklich effizient ist deshalb nicht einfach nur die Verlagerung von Daten in die Cloud, sondern ein möglichst nahtloses, verteiltes Nutzen der Rechenleistung auf Client- und auf Server-Seite.
HTML 5 bietet eine Schnittstelle dafür an. Die Schnittstelle äußert sich HTML-seitig eher unauffällig durch ein neues Attribut im einleitenden <body>-Tag:
<body manifest="./cache/manifest">
Das manifest-Attribut benennt ein lokales Verzeichnis, in dem Dateien abgelegt werden, die für die Offline-Verwendung einer Webanwendung erforderlich sind. Die Webanwendung kann in dem benannten Verzeichnis alle erforderlichen Dateien ablegen. Dadurch kann der Anwender mit der Webanwendung auch dann arbeiten, wenn er gerade nicht online ist, was vor allem auch für unterbrechungsfreies Arbeiten etwa in Zügen oder Flugzeugen wichtig ist.
Die lokale Speicherung von Anwendungsdateien ist jedoch nur die eine Seite der lokalen Datenspeicherung. Die andere ist die lokale Datenhaltung. HTML 5 führt ein Scripting-Objekt ein, dass es Webanwendungen ermöglicht, Nutzdaten, die mit Hilfe der Webanwendung erzeugt werden, auf dem Rechner das Benutzers zu speichern. Das Objekt implementiert nichts Geringeres als ein einfaches, SQL-fähiges DBMS. Brad Neuberg erläutert die Funktionsweise im Video.
Webworker
Mit Webworkern sind in diesem Fall keine Webdesigner, Webentwickler oder Webautoren gemeint. Es handelt sich vielmehr um die Integration von Multitasking in JavaScript. Neuberg nennt im Video das Beispiel eines Scripts, das ohne Ende höhere Primzahlen ermitteln soll. Das produziert in herkömmlichen Browsern eine klassische Endlosschleife, die schlimmstenfalls den gesamten Browser lahmlegt. HTML 5 führt eine neue Technik ein, um Script-Teile im Hintergrund ihre Arbeit verrichten zu lassen, ohne dass andere Script- oder Browser-Prozesse dadurch blockiert werden.
Fazit
Wer das Video bis zum Ende guckt, wird einen guten Eindruck davon gewinnen, warum die große Welle von Google Wave, die demnächst über uns hereinbrechen wird, als HTML 5 Application bezeichnet wird. Dort werden all die neuen Funktionen und Schnittstellen voll ausgeschöpft, besonders diejenigen für clientseitige Datenspeicherung und Webworkers. Das Video hilft vielleicht besser zu verstehen, dass HTML 5 nicht mehr nur eine Markupsprache ist, sondern ein Basispaket an heute benötigter Webtechnologie. Der größte und spannendste Teil der Neuerungen von HTML 5 steckt eigentlich nicht so sehr in den neuen HTML-Elementen, sondern in den neuartigen Möglichkeiten des Scriptings. Es spricht nichts dagegen, HTML 5 einfach nur als Markupsprache für alltägliche Webdokumente zu nutzen. Doch sein Potenzial reicht viel, viel weiter.
Posting-Vorschau:
Vorschau schließen