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: 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: 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.

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 5 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

LinuxCommunity kaufen

Einzelne Ausgabe
 
Abonnements
 

Ähnliche Artikel

Kommentare

Infos zur Publikation

title_2014_09

Digitale Ausgabe: Preis € 5,95
(inkl. 19% MwSt.)

Mit der Zeitschrift LinuxUser sind Sie als Power-User, Shell-Guru oder Administrator im kleinen Unternehmen monatlich auf dem aktuelle Stand in Sachen Linux und Open Source.

Sie sind sich nicht sicher, ob die Themen Ihnen liegen? Im Probeabo erhalten Sie drei Ausgaben zum reduzierten Preis. Einzelhefte, Abonnements sowie digitale Ausgaben erwerben Sie ganz einfach in unserem Online-Shop.

NEU: DIGITALE AUSGABEN FÜR TABLET & SMARTPHONE

HINWEIS ZU PAYPAL: Die Zahlung ist auch ohne eigenes Paypal-Konto ganz einfach per Kreditkarte oder Lastschrift möglich!       

Tipp der Woche

Schnell Multi-Boot-Medien mit MultiCD erstellen
Schnell Multi-Boot-Medien mit MultiCD erstellen
Tim Schürmann, 24.06.2014 12:40, 0 Kommentare

Wer mehrere nützliche Live-Systeme auf eine DVD brennen möchte, kommt mit den Startmedienerstellern der Distributionen nicht besonders weit: Diese ...

Aktuelle Fragen

Videoüberwachung mit Zoneminder
Heinz Becker, 10.08.2014 17:57, 0 Antworten
Hallo, ich habe den ZONEMINDER erfolgreich installiert. Das Bild erscheint jedoch nicht,...
internes Wlan und USB-Wlan-Srick
Gerhard Blobner, 04.08.2014 15:20, 2 Antworten
Hallo Linux-Forum: ich bin ein neuer Linux-User (ca. 25 Jahre Windows) und bin von WIN 8 auf Mint...
Server antwortet mit falschem Namen
oin notna, 21.07.2014 19:13, 1 Antworten
Hallo liebe Community, Ich habe mit Apache einen Server aufgesetzt. Soweit, so gut. Im Heimnet...
o2 surfstick software für ubuntu?
daniel soltek, 15.07.2014 18:27, 1 Antworten
hallo zusammen, habe mir einen o2 surfstick huawei bestellt und gerade festgestellt, das der nic...
Öhm - wozu Benutzername, wenn man dann hier mit Klarnamen angezeigt wird?
Thomas Kallay, 03.07.2014 20:30, 1 Antworten
Hallo Team von Linux-Community, kleine Zwischenfrage: warum muß man beim Registrieren einen Us...