HTML5-Tools für Web-Entwickler

Native Audio- und Video-Wiedergabe ohne zusätzliche Plug-Ins, Thread-Programmierung mit Web-Workers, zweidimensionale Grafiken mit dem Canvas-Element , Zugriff auf das Datei-System mittels Local-Storage, Offline-Modus, Geo-Location für Smartphone-Anwendungen, verspielte grafische Animationen mit CSS3, beliebige Web-Fonts mit @font-face, und die Liste geht noch weiter... HTML5 wartet mit unzähligen innovativen Features auf und stellt damit einen Quantensprung in der Entwicklung von Web-Anwendungen und Webseiten dar.

Mit professionellen Tools und Frameworks, die kostenlos angeboten werden, sorgen Branchenriesen wie Google, Adobe und IBM für eine schnelle Verbreitung des neuen HTML-Standards, der die Zukunft des Internets bestimmen wird und dieses Jahr vor dem Durchbruch zu stehen scheint. Aber auch kleinere und weniger bekannte Hersteller bieten innovative und vielversprechende Lösungen an, die die Entwicklung von HTML5-Projekten beschleunigen und vereinfachen können. Welche das sind, erfahren Sie in diesem Beitrag.

HTML5 Rocks!

Wer mit HTML5 noch nicht vertraut ist und erfahren möchte, wie er von den neuen Features bei eigenen Anwendungen und Websites profitieren kann, dem sei das Web-Portal "HTML5 Rocks” von Google empfohlen. Im Jahr 2010 ins Leben gerufen bietet die Seite Web-Designern und -Entwicklern zahlreiche Code-Beispiele, Demos, sowie Schritt-für-Schritt-Anleitungen zum Umgang mit fast allen HTML5-Features an. Wie der Internetprimus erklärt, soll dieses umfangreiche Angebot die Vorteile von HTML5 verdeutlichen und den Einstieg erleichtern. Zu den behandelnden Themen zählen unter anderem Offline-Modus, Geo-Location, Audio- und Video-Tags, sowie Canvas und File-Storage.

Auf der Seite verfügbar sind zudem eine interaktive Präsentation, die einen umfassenden Überblick über die Möglichkeiten von HTML5 bietet, sowie eine Code-Sandbox, auf der Developer das Erlernte in die Praxis umsetzen und sich austoben können. Diese sorgt für eine sichere Umgebung, in der alle neuen APIs und CSS-Eigenschaften auf einfache Weise getestet werden können.

Um alle Features von HTML5 Rocks nutzen zu können, empfiehlt Google zwar die Nutzung des hauseigenen Browsers Chrome. Die meisten Demos sollen laut Anbieter jedoch auch in anderen HTML5-fähigen Browsern funktionieren.

HTML5 Rocks!
Im Jahr 2010 ins Leben gerufen bietet die Seite Web-Designern und -Entwicklern zahlreiche Code-Beispiele, Demos, sowie Schritt-für-Schritt-Anleitungen zum Umgang mit fast allen HTML5-Features an.

Sproutcore
Sproutcore diente als solide Basis für das MobileMe-Angebot der Jobs-Company und hat sich unter Entwicklern in erster Linie aufgrund seiner Robustheit, Schnelligkeit und Skalierbarkeit einen Namen gemacht. Das Besondere an dem Framework besteht jedoch darin, dass die gesamte Business-Logik mit JavaScript umgesetzt und vollständig auf Client-Seite implementiert wird.

Adobe Edge
Mit "Adobe Edge” stellt der Multimedia-Riese ein neues Tool zur Animation und zum Interaktions-Design für Webseiten zur Verfügung, mit dem sich Flash-ähnliche Inhalte auf Basis von HTML5, JavaScript und CSS3 realisieren lassen.

HTML5 Boilerplate
Mit Cross-Browser-Normalisierung, eingebauten Performance-Optimierungen und erweiterten Features, zu denen etwa Cross-Domain-Ajax zählt, vereinfacht Boilerplate die Arbeit mit vielen Standard-Funktionen, die eigentlich gar nicht so leicht zu implementieren sind. Im Paket enthalten ist zudem eine .htaccess-Konfigurationsdatei, die vor allem für Anfänger sehr praktisch sein kann.

Modernizr
Bei Modernizr handelt es sich um eine quelloffene JavaScript-Library, mit der sich Darstellungsfehler von CSS3- und HTML5-Websites auf älteren Browsern verhindern lassen sollen.

Sencha Touch
"Sencha Touch" ist eins der populärsten Frameworks für die Erstellung plattformübergreifender Anwendungen für Smartphones. Es basiert vollständig auf HTML5, JavaScript und CSS3 und wartet mit einer einfachen Verwaltung für Touch-Ereignisse, sowie einer umfassenden UI-Bibliothek auf.

Jo HTML5 App Framework
Realisiert von David Balmer, Senior Software Engineer WebOS Developer Relations, ist das Jo Framework kompatibel mit vielen der wichtigsten Smartphone-Plattformen: iOS, Android, Chrome OS, Blackberry und WebOS. Wie der Anbieter erklärt, ist das Framework speziell für die Entwicklung von Apps konzipiert, also nicht für traditionelle Websites, und wartet mit wiederverwendbaren UI-Widgets und einfach zu implementierenden CSS3-Animationen.

Maqetta
Mit dem quelloffenen und Web-basierenden Web-Editor "Maqetta” lassen sich Benutzeroberflächen für Desktop- und Mobile-Anwendungen erstellen - auf Basis von HTML5, CSS3 und Ajax. Die Lösung wurde von IBM als Antwort zu Flash und Silverlight entwickelt - mit dem Ziel, die Defizite von Ajax-Umgebungen gegenüber diesen proprietären Lösungen auszugleichen.

Media Element Player
Wer schon heute die Möglichkeiten von HTML5-Video ausnutzen möchte, der kann auf den "Media Element Player” zurückgreifen. Dabei handelt es sich um eine kostenlose JavaScript-Bibliothek aus dem Open-Source-Bereich, die mithilfe von CSS und dem populären Framework "JQuery” einen universellen Video-Player implementiert.

Sproutcore

Eins der bisher populärsten HTML5-Frameworks für Web-Anwendungen aus dem Open-Source-Lager ist sicherlich "Sproutcore”. Die Lösung wurde von der Firma Strobe Inc. entwickelt, die vom Ex-Apple-Mitarbeiter Charles Jolley gegründet wurde nachdem er die Jobs-Company verlassen hat. Das System diente als solide Basis für das MobileMe-Angebot der Jobs-Company und hat sich unter Entwicklern in erster Linie aufgrund seiner Robustheit, Schnelligkeit und Skalierbarkeit einen Namen gemacht. Das Besondere an dem Framework besteht jedoch darin, dass die gesamte Business-Logik mit JavaScript umgesetzt und vollständig auf Client-Seite implementiert wird. Dadurch sollen sich die Reaktionszeiten von Web-Anwendungen deutlich verringern lassen, da der Datenaustausch zwischen Server und Browser auf ein Minimum reduziert wird.

Die Lösung ist in Ruby implementiert, der Programmierer kommt damit aber kaum in Berührung. Gearbeitet wird stattdessen hauptsächlich mit JavaScript, HTML5 und CSS3. Ferner schafft Sproutcore mit Objekt-Orientierung, einer durchdachten Template-Engine, flexiblem Data-Binding und einem konsequenten MVC-Ansatz (Model-View-Controller) eine professionelle Grundlage für moderne Web-Anwendungen, die den Vergleich mit nativen Desktop-Applikationen nicht scheuen müssen.

Adobe Edge

Mit "Adobe Edge” stellt der Multimedia-Riese ein neues Tool zur Animation und zum Interaktions-Design für Webseiten zur Verfügung, mit dem sich Flash-ähnliche Inhalte auf Basis von HTML5, JavaScript und CSS3 realisieren lassen. "Das Tool hilft Web-Entwicklern bei der Erstellung von Web-Inhalten, die ohne die Software nur aufwändig, fehleranfällig und mit vielen Detailkenntnissen von Hand zu produzieren sind”, so André Jay Meissner, Business Development Manager Web Technologies bei Adobe. Die Lösung verfügt über einen fortgeschrittenen Editor auf Basis einer Timeline, der in Anlehnung an Adobe After Effects gestaltet wurde. Der Fokus, so Meissner, liegt dabei auf Produktivität und reibungsloser Bedienbarkeit.

Die Software arbeitet nativ mit HTML. Nutzer können auf diese Weise Bewegung zu existierenden HTML-Inhalten hinzufügen, ohne das Design CSS-basierter Layouts zu beeinträchtigen. Zudem ermöglicht die Anwendung, visuell reichhaltige Inhalte von Grund auf zu erstellen. Dabei kommen bekannte Zeichentools zum Einsatz, die HTML-Elemente aus CSS3-Stilen erzeugen. Anwender können zudem standardisierte Ressourcen wie beispielsweise SVG-, PNG-, JPG- und GIF-Dateien importieren und sie über CSS3 beeinflussen. Die Bühnendarstellung verwendet die WebKit-Engine, um Design, Vorschau und Bearbeitung von Inhalten mit der gleichen Genauigkeit zu realisieren, die man von Flash gewohnt ist.

Das Tool ist für die Betriebssysteme Windows und Mac OS X erhältlich und wird zurzeit als Preview-Version (2.0) auf Adobe Labs zum kostenlosen Download angeboten. Nach Angaben des Herstellers wird das erste Release 1.0 erst nächstes Jahr erscheinen.

HTML5 Boilerplate

Wer einen schnellen und vor allem leichten Einstieg in die Welt von HTML5 sucht, der wird das Open-Source-Tool "HTML5 Boilerplate” sicherlich zu schätzen wissen. Entwickelt von Paul Irish, Developer Programs Engineer bei Googles Chrome-Team, stellt die Lösung eine professionelle Vorlage dar, die als solide Basis für HTML5-Projekte dienen soll.

Mit Cross-Browser-Normalisierung, eingebauten Performance-Optimierungen und erweiterten Features, zu denen etwa Cross-Domain-Ajax zählt, vereinfacht Boilerplate die Arbeit mit vielen Standard-Funktionen, die eigentlich gar nicht so leicht zu implementieren sind. Im Paket enthalten ist zudem eine .htaccess-Konfigurationsdatei, die vor allem für Anfänger sehr praktisch sein kann. So bietet sie beispielsweise einige Standard-Caching-Regel, vordefinierte Einstellungen für die effiziente Wiedergabe von HTML5-Video und erlaubt zudem die einfache Nutzung von @font-face-Schriftarten, sowie die komprimierte Auslieferung (gzip) der auf der Website verwendeten Ressourcen.

Boilerplate steht derzeit in Version 2.0 zur Verfügung. Den Quellcode finden Interessierte auf der Projektseite beziehungsweise auf GitHub. Eine ausführliche Dokumentation (auf Englisch) sorgt für einen relativ schnellen Start.

Modernizr

Neben Boilerplate bietet Irish - gemeinsam mit Projekt-Manager Faruk Ates, einem weiteren renommierten Software-Entwickler aus Kalifornien - eine andere hilfsreiche Lösung, die unter Web-Entwicklern recht beliebt ist: "Modernizr”. Dabei handelt es sich um eine quelloffene JavaScript-Library, mit der sich Darstellungsfehler von CSS3- und HTML5-Websites auf älteren Browsern verhindern lassen sollen.

Der Clou: Das Tool erkennt die jeweilige Unterstützung des eingesetzten Browsers automatisch und ersetzt fehlende Features mit traditionellem HTML-Code, der von allen Browsern unterstützt wird. Dank dieser Rückwärtskompatibilität können Developer schon heute mit HTML5-Features arbeiten, wenngleich viele ältere Browser, die noch sehr häufig verwendet werden, die neue Web-Spezifikation noch nicht unterstützen. Zu den implementierten Funktionen des neuen Web-Standards zählen unter anderem @font-face, "Multiple Backgrounds”, sowie HTML5-Video, um nur einige Beispiele zu nennen.

Sencha Touch

"Sencha Touch” ist eins der populärsten Frameworks für die Erstellung plattformübergreifender Anwendungen für Smartphones. Es basiert vollständig auf HTML5, JavaScript und CSS3 und wartet mit einer einfachen Verwaltung für Touch-Ereignisse, sowie einer umfassenden UI-Bibliothek auf. Mit Ausnahme von Icons verzichtet die Library weitgehend auf Bilder und nutzt CSS3-Stylesheets zur graphischen Gestaltung der Benutzeroberflächen. Animationen lassen sich mit Hilfe von CSS-Transitions realisieren. Zudem macht das Framework von neuen HTML5-Funktionen Gebrauch, um die Realisierung von Offline-Applikationen auf einfache Weise zu gestatten. Dabei lassen sich Anwendungsressourcen lokal auf dem Gerät speichern, so dass die Anwendung auch dann verwendet werden kann, wenn keine Internetverbindung verfügbar ist.

Offiziell unterstützt werden in der aktuellen Version von Sencha Touch die mobilen Plattformen iOS, Android und Blackberry 6. Das Framework soll laut Anbieter aber auf jedem mobilen Browser laufen, der die neuen HTML5-Features unterstützt.

Jo HTML5 App Framework

Ein weniger bekanntes, aber dennoch interessantes HTML5-Framework für mobile Anwendungen ist "Jo”. Realisiert von David Balmer, Senior Software Engineer WebOS Developer Relations, ist die Lösung kompatibel mit vielen der wichtigsten Smartphone-Plattformen: iOS, Android, Chrome OS, Blackberry und WebOS. Wie der Anbieter erklärt, ist das Framework speziell für die Entwicklung von Apps konzipiert, also nicht für traditionelle Websites, und wartet mit wiederverwendbaren UI-Widgets und einfach zu implementierenden CSS3-Animationen.

Ferner setzt das Tool das "Document Object Model” (DOM) der verschiedenen Browser-Implementierungen, sowie gerätespezifische Ereignisse in ein einheitliches und konsistentes Ereignismodell um, das die Entwicklung plattformübergreifender Anwendungen vereinfachen soll. In Kombination mit dem Tool "PhoneGap” ermöglicht Jo die Entwicklung mobiler Apps auf Basis von HTML5, die nativ übersetzt werden können.

Jo ist Open-Source und steht unter der OpenBSD-Lizenz zur Verfügung. Der Source-Code wird bei Github gehostet, wo Interessierte auch eine detaillierte Dokumentation mit vielen Code-Beispielen finden.

Maqetta

Mit dem quelloffenen und Web-basierenden Web-Editor "Maqetta” lassen sich Benutzeroberflächen für Desktop- und Mobile-Anwendungen erstellen - auf Basis von HTML5, CSS3 und Ajax. Die Lösung wurde von IBM als Antwort zu Flash und Silverlight entwickelt - mit dem Ziel, die Defizite von Ajax-Umgebungen gegenüber diesen proprietären Lösungen auszugleichen. Anfang des Jahres hat Big Blue das Tool als Open-Source an die gemeinnützige Dojo Foundation übergeben, die unter anderem für die Entwicklung des populären JavaScript-Frameworks "Dojo Toolkit” verantwortlich ist.

Websites beziehungsweise Anwendungsoberflächen können mit Hilfe eines WYSIWYG-Editors aus einem Vorrat von graphischen Elementen erstellt und mittels Drag and Drop layoutet werden. Von Vorteil dabei ist, dass das Tool nicht an einer GUI-Bibliothek gebunden ist. So sind in der aktuellen Version die bewährten Lösungen "JQuery UI” und Yahoos "YUI Library” bereits integriert.

Für die Entwicklung mobiler Anwendungen bietet das Programm zudem Silhouetten bekannter Geräte wie das iPhone, mit denen sich genaue Layouts erstellen lassen. Wie bei üblichen Web-Editoren der Fall ist, steht neben der Design-Ansicht auch eine Quellcode-Ansicht bereit. Anwender können in beiden Modi simultan editieren. Praktisch sind zudem die vielen Kollaborations-Features. So können mehrere Anwender im Team gleichzeitig an der selben Datei arbeiten, sowie Bewertungen, Reviews und Kommentare hinterlassen.

Media Element Player

Wenn es um das Abspielen von Multimedia-Content geht, bietet die neue HTML5-Spezifikation klare Vorteile gegenüber dem bis jetzt erforderlichen Einsatz von Plug-Ins. So lassen sich mithilfe der neu eingeführten Konstrukte <video> und <audio> Multimedia-Dateien direkt in die Website integrieren - unkompliziert und schnell. Aufgrund der Tatsache, dass viele ältere Browser noch sehr häufig verwendet werden, kann kann auf Plug-Ins wie Flash oder Microsofts Silverlight allerdings noch nicht verzichten. Wer dennoch schon heute die Möglichkeiten von HTML5-Video ausnutzen möchte, der kann auf den "Media Element Player” zurückgreifen. Dabei handelt es sich um eine kostenlose JavaScript-Bibliothek aus dem Open-Source-Bereich, die mithilfe von CSS und dem populären Framework "JQuery” einen universellen Video-Player implementiert.

Das Tool erlaubt es Web-Entwicklern, im HTML-Code ausschließlich mit dem Video-Tag zu arbeiten. Wenn die Seite geladen wird, prüft ein Skript, was für ein Browser die Anfrage gesendet hat. Unterstützt der identifizierte Browser die HTML5-Spezifikation nicht, so wird der Video-Tag automatisch durch einen Flash- beziehungsweise Silberlight-Plugin ersetzt. Ansonsten wird der Code ohne weiteres nativ ausgeführt. Was die Kodierung der Videodateien angeht, ist die Software recht flexibel und unterstützt viele gängige Formate, darunter H.264, WMV und FLV. (sh)