AA_bunt_123rf-6226748_PeiLingHoo.jpg

© PeiLing Hoo, 123RF

Fünfte Dimension

Interessante Tool für HTML5-Entwickler

19.07.2012 "HMTL5 rocks" – das findet nicht nur Google, und so gibt es bereits eine erkleckliche Anzahl von Ressourcen, Frameworks und Werkzeugen rund um den brandneuen Web-Standard.

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

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.

Tipp

Google empfiehlt zwar jedem, der mit dem vollen Funktionsumfang von HTML5 experimentieren möchte, den hauseigenen Browser Chrome zu verwenden, inzwischen unterstützen aber die meisten gängigen Webbrowser HTML5. Eine Ausnahme stellt lediglich Microsofts Internet dar.

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

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

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

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.

HTML5 Boilerplate

Stehen Sie noch am Anfang Ihres HTML5-Abenteuers, sollten Sie sich das Open-Source-Tool HTML5 Boilerplate [11] ansehen. Bei Boilerplate handelt es sich um eine sehr professionell gemachte HTML/CSS/JS-Vorlage, die als Ausgangsbasis für eigene HTML5-Projekte dient. HTML5 Boilerplate wurde von Paul Irish entwickelt, einem Entwicklungsingenieur von Googles Chrome-Team, und steht aktuell in der Version 3.0 zum freien Download auf der Projektseite sowie auf Github [12] bereit. Sie finden dort sowohl eine hervorragend dokumentierte Version als auch eine ausschließlich aus Code bestehenden, abgestrippte Variante.

HTML5 Boilerplate vereinfacht dank Cross-Browser-Normalisierung, eingebauter Performance-Optimierungen und vieler weiterer Funktionen wie etwa Cross-Domain-Ajax das Arbeiten mit vielen HMTL5-Funktionen. Das Paket enthält unter anderem eine für Einsteiger recht nützliche .htaccess-Konfigurationsdatei. Sie bietet brauchbare Voreinstellungen wie eine Reihe von Standard-Caching-Regeln oder Einstellungen für das effiziente Wiedergeben von HTML5-Video. Zudem erlaubt HTML5 Boilerplate das einfache Verwenden von @font-face-Schriften sowie das komprimierte Ausliefern der auf der Website verwendeten Ressourcen.

Abbildung 5

Abbildung 5: Das Highlight von HTML5 Boilerplate stellt die mitgelieferte .htaccess-Datei dar.

Modernizr

Paul Irish hat zusammen mit Faruk Ates neben Boilerplate mit Modernizr [13] eine quelloffene Javascript-Bibliothek entwickelt, die bei Webdesignern ebenfalls viel Anklang findet, das sich mit ihr Darstellungsfehler von CSS3- und HTML5-Webseiten auf älteren Browsern verhindern lassen.

Laut Dokumentation [14] erkennt Modernizr, ob der jeweilige Browser HTML5 unterstützt, und ersetzt gegebenenfalls fehlende Funktionen durch "gewöhnlichen" HTML-Code, was eine gewisse Abwärtskompatibilität ermöglicht. Der Sinn des Ganzen besteht vorrangig darin, dass sich Entwickler mit HTML5 vertraut machen können, ohne Rücksicht auf das Vorhandensein HTML5-fähiger Browser beim Anwender nehmen zu müssen. Die Bibliothek unterstützt unter anderem <video> und @font-face.

Sproutcore

Ein weiteres sehr populäres Open-Source-HTML5-Framework für Web-Anwendungen ist Sproutcore [15]. Mithilfe des freien HTML5-Frameworks entwickeln Sie Web-Anwendungen, die im Zusammenspiel mit einem modernen HTML5-fähigen Browser problemlos mit Desktop-Applikationen konkurrieren können, ohne dass der Nutzer irgendwelche Plugins installiert muss.

Sproutcore stammt von der Firma Strobe Inc. [16], die von dem ehemaligen Apple-Mitarbeiter Charles Jolley gegründet wurde. Seit 2011 steht das Framework unter einer Open-Source-Lizenz (MIT License). Das Framework entstand ursprünglich als Fundament für Apples MobileMe-Dienst und ist unter Entwicklern wegen seiner Robustheit und Schnelligkeit beliebt. Außerdem skaliert das System gut.

Technisch unterscheidet sich das Framework dadurch von anderen Lösungen, dass Sproutcore die gesamte Business-Logik in Javascript umsetzt und daher vollständig auf Client-Seite implementiert wird, womit sich die Reaktionszeiten von Web-Anwendungen deutlich verringern lassen, weil sich der Datenaustausch zwischen Browser und Server auf ein Minimum reduziert. Sproutcore selbst ist allerdings in Ruby implementiert, womit Sie als Entwickler einer Web-Oberfläche aber nichts zu tun haben: Sie entwickeln mit Sproutcore, wie mit jeder anderen Web-Plattform auch, Programme in HTML5, Javascript und CSS3.

Um Sproutcore in der Version 1.9.2 unter Linux zu nutzen, brauchen Sie Ruby 1.9.2, jedoch bringen die meisten aktuellen Distributionen lediglich Ruby 1.8.2 mit. Erfreulicherweise besitzt Ruby mit Gems ein eigenes Paket-Management, das Ihnen ermöglicht, mehrere Versionen eines Programms oder einer Bibliothek kontrolliert zu installieren und wieder zu entfernen. Außerdem können Sie mit Hilfe des Ruby-Version-Managers RVM mehrere Ruby-Implementierungen und Gems-Versionen parallel nutzen. Sie checken RVM wahlweise direkt von Github auschecken oder nutzen den rvm-installer (Listing 1, Zeilen 1 bis 3).

Listing 1

$ curl -s https://rvm.beginrescueend.com/install/rvm -o rvm-installer
$ chmod +x rvm-installer
$ ./rvm-installer --version latest
$ rvm install ruby-1.9.2
$ rvm use 1.9.2
$ rvm --default use 1.9.2

Anschließend empfiehlt es sich, die PATH-Variable des Systems mit Ruby erweitern, wozu Sie die Datei ~/.bash_profile um folgende Zeile ergänzen:

[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm

Jetzt ist es problemlos möglich, die Ruby-Version 1.9.2 via RVM zu installieren (Listing 1, Zeilen 4 bis 6)

Ubuntu-Nutzer können mit relativ wenig Aufwand auch Sproutcore 1.8.2 ausprobieren, indem sie einfach die Pakete ruby-rvm und (falls noch nicht geschehen) build-essential installieren. Das Installieren von Sproutcore 1.8.2 erfolgt dann ganz einfach mit gem install sproutcore.

Der mit sproutcore server zu startende Sproutcore-Server nutzt per Default Port 4020. Eine ausführlicher "Getting-Started-Guide" [17] gibt darüber Auskunft, wie Sie ein erstes Projekt anlegen.

Abbildung 6

Abbildung 6: Mit RVM und Gems lassen sich mehrere Ruby-Versionen parallel installieren und nutzen.

Sencha Touch

Eines der bekanntesten Frameworks zum Erstellen plattformübergreifender Anwendungen für Smartphones ist das vollständig auf HTML5 und CSS3 basierende Sencha Touch [18]. Sencha Touch zeichnet sich – wie der Name schon nahe legt – durch eine sehr komfortable Verwaltung von Touch-Ereignissen aus und bringt eine umfassende UI-Bibliothek mit. Zur grafischen Gestaltung von Benutzeroberflächen nutzt es ausschließlich CSS3-Transitions und verzichtet (abgesehen von Icons) ganz auf Bilder. Darüber hinaus nutzt auch Sencha Touch eine große Anzahl an HTML5-Funktionen.

Sencha Touch unterstützt offiziell die Mobilplattformen Android, iOS und Blackberry 6, soll aber laut Hersteller Sencha Inc. auf jedem mobilen Browser funktionieren, der HTML5-Features unterstützt. Die aktuelle Version 2.0.2.2 der "Free Commercial Version" steht unter [19] zum kostenlosen Download zur Verfügung.

Jo HTML5 App Framework

Zu den nicht ganz so bekanntes HTML5-Frameworks zählt Jo [20], das die Plattformen Android, Blackberry, ChromeOS, iOS und WebOS unterstützt. Wie Sensa Touch eignet sich Jo vorrangig zum Entwickeln von mobilen Apps und bringt eine UI-Widget-Library und einfach zu implementierende CSS3-Animationen mit. Im Zusammenspiel mit der App Phonecap [21] ermöglicht Jo auch das Entwickeln mobiler Apps auf Basis von HTML5, die sich nativ übersetzen lassen. Bei Jo handelt es sich um freie Software, es wird unter einer OpenBSD-Lizenz auf Github [22] gehostet.

Was es sonst noch gibt

Möchten Sie als Entwickler schon jetzt Multimedia-Daten ausschließlich mit Hilfe von HTML5-Features wie <video> und <audio> einbinden, ohne sich Gedanken darum zu machen, welchen Browser der Anwender nutzt, können Sie neben der oben erwähnten Modernizr-Bibliothek auch den MediaElement Player [23] verwenden (Abbildung 7). Dabei stellt eine Open-Source-Javascript-Bibliothek mithilfe von CSS und dem populären Framework JQuery [24] einen universellen Video-Player zur Verfügung. Ein Skript prüft beim Laden der Seite, ob der anfragende Browser HTML5 unterstützt – falls nicht, ersetzt die Lösung automatisch das <video>-Tag durch ein Flash- oder Silverlight-Plugin.

Abbildung 7

Abbildung 7: Der MediaElement Player ermöglicht HTML5-Anwendungen mit Video-Tag auch auf älteren Browsern.

Um ein sehr leistungsfähiges Web-Entwicklungstool handelt es sich bei Aptana Studio [25] von Appcelerator. Die aktuelle Version 3.0 [26] unterstützt mit HTML5, CSS3, Javascript, Ruby, Rails, PHP und Python alle heute relevanten Web-Technologien. Aptana Studio bringt neben eigenen Validatoren auch diverse Browser-Emulatoren mit, ist allerdings nur bei nicht gewerblicher Nutzung kostenlos.

Fazit

HTML5 bietet derzeit vor allem beim Abspielen von Multimedia-Inhalten unbestreitbare Vorteile und macht das bisher übliche Verwenden von Plugins obsolet, sofern Sie mithilfe der HTML5-Tags <video> und <audio> Multimedia-Inhalte auf einfache Weise in Ihre Webseite integrieren. Sollte sich HTML5 wie zu erwarten durchsetzen, macht es also in naher Zukunft Flash und Silverlight überflüssig. Dass HTML5 aber deutlich mehr kann, als nur Plugins ersetzen, sollte unsere Übersicht gezeigt haben und macht hoffentlich Lust auf das Web 3.0. 

Infos

[1] "HTML5 rocks": http://www.html5rocks.com/en/

[2] W3C-Konsortium: http://www.w3.org

[3] W3C-Validator: http://validator.w3.org

[4] W3C-Cheatsheet: http://www.w3.org/2009/cheatsheet

[5] Selfhtml5: http://www.selfhtml5.org

[6] "Cut the rope": http://www.cuttherope.ie/dev

[7] Mozilla Developer Network: https://developer.mozilla.org/de

[8] Dojo Foundation – Maqetta: http://dojofoundation.org/projects/maqetta

[9] Dojo-Toolkit: http://dojofoundation.org/projects/dojo

[10] Maqetta-Download: http://maqetta.org/downloads/

[11] HTML5 Boilerplate: http://de.html5boilerplate.com

[12] HTML5-Boilerplate (Github): :https://github.com/paulirish/html5-boilerplate

[13] Modernizr: http://www.modernizr.com

[14] Modernizr-Doku: http://modernizr.com/docs/

[15] Sproutcore: http://www.sproutcore.com

[16] Strobe Inc.: http://www.strobecorp.com

[17] Sproutcore – Getting-Started-Guide: http://guides.sproutcore.com/getting_started.html

[18] Sensa Touch: http://www.sencha.com/products/touch/index.php

[19] Sensa-Touch-Download: http://www.sencha.com/products/touch/download/

[20] Jo HTML 5 App Framework: http://joapp.com

[21] Phonecap: http://phonegap.com

[22] Jo (Github): http://github.com/davebalmer/jo

[23] MediaElement Player: http://mediaelementjs.com

[24] JQuery: http://jquery.com

[25] Aptana Studio: http://www.aptana.com

[26] Aptana-Studio-Download: http://www.aptana.com/products/studio3

Tip a friend    Druckansicht beenden Bookmark and Share
Kommentare