Fünfte Dimension

Dank HTML5 und CSS3 beherrschen Websites heute Funktionen, die vorher (auch mit Java) schlicht nicht möglich waren. Dabei verbessert HTML5 nicht nur die Darstelling von Webseiten auf Desktop-PCs, sondern unterstützt insbesondere das effiziente Entwickeln von Web-Anwendungen für mobile Geräte wie Smartphones und Tablets. Schon von daher wird HTML5 das Web und die im Web erhältlichen Anwendungen in Zukunft zweifelsohne dominieren. Dabei benötigt der Browser dank HTML5 beispielsweise keine zusätzlichen Plugins mehr, um Video- oder Audio-Inhalte wiederzugeben.

Insbesondere Entwicklern eröffnen HTML5 und CSS3 völlig neue Möglichkeiten, wie etwa Thread-Programmierung mit Web-Workers, direkte Zugriffsmöglichkeiten auf das Dateisystem mit <localStorage>, ein ausgefeilter Offline-Modus, zweidimensionalen Grafiken mit dem <canvas>-Element, Animationen mit CSS3 und das Verwenden beliebiger Web-Fonts mit @font-face, um nur die Wichtigsten zu nennen.

Das Beste daran: Schon heute stehen dazu zahlreiche professionelle und vor allem kostenlose Tools und Frameworks zur Auswahl, die auch den Neueinstieg in die Web-Programmierung unterstützen.

HTML5-Ressourcen im Web

Die derzeit populärste HTML5-Ressource stellt zweifelsohne Googles "HTML5 rocks" dar [1]. Möchten Sie sich mit den Möglichkeiten und Standards von HTML5 vertraut machen oder schlicht wissen, wie Sie bei Ihren Web-Projekten von den neuen Funktionen profitieren können, bietet Googles Web-Portal eine ideale Anlaufstelle.

Google hat "HTML5 rocks" 2010 ans Netz gebracht, um Entwickler und Webdesigner mit Demos, Code-Beispielen und Schritt-für-Schritt-Anleitungen im Umgang mit fast allen HTML5-Funktionen zu unterstützen und den Einstieg zu erleichtern (Abbildung 1). Die verfügbaren Code-Beispiele und Demos behandeln die Funktionen Offline-Modus, Geo-Location, Audio- und Video-Tags, sowie das <canvas>-Element und File-Storage.

Abbildung 1: Auf Googles "HTML5 rocks" können Entwickler und Web-Designer mit den neuen HTML-Features experimentieren.

"HTML5 rocks" bietet außerdem eine Reihe von interaktiven Präsentationen, die einen umfassenden Überblick über die Möglichkeiten von HTML5 liefern. Daneben findet sich eine Code-Sandbox, mit deren Hilfe Sie Ihre HTML5-Experimente mitsamt der neuen APIs und CSS-Eigenschaften in einer sichereren Umgebung ohne Gefährdung des eigenen Systems in die Praxis umsetzen.

Auch die offizielle Webseite des W3C-Konsortiums [2] ist einen Besuch wert und umfasst neben Links auf viele weite nützliche Ressourcen vor allem lesenswerte Anleitungen. Traditionell bietet die Webseite auch Validatoren für HTML und CSS an, mit deren Hilfe Sie als Web-Entwickler die Konformität Ihres Codes testen [3]. Erwähnung verdient in diesem Zusammenhang auch das W3C-Cheatsheet [4], eine Referenz aller HTML5-, CSS3- und XSLT-Befehle.

Auch die sehr empfehlenswerte deutsche Website Selfhtml5 [5] liefert eine Reihe von Beispielen und Anleitungen, wobei sie auch auch das Entwickeln von Apps für Mobilgeräte behandelt. Dazu gibt es erklärende Videos und unter HTML5 WebApps einen interessanten Link auf die HTML5-Version des populären Spiels "Cut the Rope" [6], die eindrucksvoll demonstriert, was HTML5 heute leistet.

Die Entwickler haben "Cut the Rope" von der nativen iOS-App auf HTML5 umgesetzt, was angesichts der zugrunde liegenden Physik und der aufwendigen Gestaltung eine echte Herausforderung war, die in Vor-HTML5-Zeitalter nicht umsetzbar gewesen wäre. Faktisch lässt sich kein Unterschied zwischen der nativen App und der HTML5-Web-App erkennen.

Mozillas Developer Network [7] offeriert ebenfalls eine eigene HTML5-Referenz mitsamt Code-Beispiele und Referenzen. Hier wird einmal mehr deutlich, dass Mozilla mit seiner Web-API ohnehin schon länger daran arbeitet, den Unterschied zwischen nativen und Web-Apps in Zukunft zu verwischen.

Maqetta

Mit dem quelloffenen, webbasierten Web-Editor Maqetta [8] erstellen Sie im Handumdrehen Benutzeroberflächen für Mobil- und Desktop-Anwendungen auf Basis von HTML5, CSS3 und Ajax. Das von IBM entwickelte Maqetta hat das Ziel, die Nachteile von Ajax-Umgebungen im Vergleich zu den proprietären Technologien wie Flash und Silverlight zu eliminieren. IBM übergab Maqetta erst Anfang 2012 unter einer Open-Source-Lizenz an die gemeinnützige Dojo-Stiftung, die unter anderem auch für das Javascript-Framework Dojo Toolkit [9] bekannt ist.

Sie laden Maqetta in der aktuellen Version 6.0.1 in Form eines ZIP-Archivs herunter [10] und installieren es dann auf einem lokalen Webserver. Hierzu genügt nach dem Entpacken des ZIP-Archivs der Aufruf von ./maqetta.server.unix.sh respektive maqetta.local.unix.sh. Anschließend steht das Tool sofort unter http://Server:50000/maqetta beziehungsweise http://127.0.0.1:50000/maqetta zur Verfügung.

Der WYSIWYG-Editor unterstützt Sie beim Erstellen von Webseiten oder von Oberflächen von Webanwendungen (Abbildung 2). Maqetta ermöglicht das Erstellen eines ansprechenden Layouts mit einem großen Umfang grafischer Elemente, die Sie einfach via Drag & Drop anwenden.

Abbildung 2: Der leistungsfähige Web-Editor Maqetta wurde ursprünglich von IBM entwickelt.

Maqetta ist im Unterschied zu anderen Lösungen nicht an eine einzelne, spezifische UI-Bibliothek gebunden. Sie können in der aktuellen Version problemlos auch andere bewährte Lösungen einbinden, wie etwa Yahoos YUI-Library oder JQuery UI (Abbildung 3).

Abbildung 3: Maqetta bindet bei Bedarf verschiedenste Widget-Bibliotheken ein.

Daneben unterstützt Maqetta Sie beim Entwickeln mobiler Anwendungen mit sogenannten Silhouetten, also Layout-Schablonen bekannter Geräte wie dem iPhone, damit Sie zielgenaue Layouts erstellen können (Abbildung 4).

Abbildung 4: Layout-Schablonen unterstützen bei Maqetta das zielgerichtete Entwickeln von Layouts.

Selbstständig können Sie bei Maqetta bei Bedarf auch in der Quellcode-Ansicht arbeiten. Es ist sogar möglich, gleichzeitig im visuellen- und im Code-Modus zu arbeiten. Darüber hinaus unterstützt Maqetta in vielfältiger Weise auch Teamarbeit mit Funktionen für Reviews, Bewertungen oder Kommentare.