Home / LinuxUser / 2012 / 08 / Interessante Tool für HTML5-Entwickler

Newsletter abonnieren

Lies uns auf...

Folge LinuxCommunity auf Twitter

Top-Beiträge

Debian leicht gemacht
(161 Punkte bei 4 Stimmen)

Heftarchiv

LinuxUser Heftarchiv

EasyLinux Heftarchiv

Ubuntu User Heftarchiv

Ubuntu User Heftarchiv

Partner-Links:

Das B2B Portal www.Linx.de informiert über Produkte und Dienstleistungen.

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.

Tip a friend    Druckansicht Bookmark and Share
Kommentare

3046 Hits
Wertung: 119 Punkte (7 Stimmen)

Schlecht Gut

Infos zur Publikation

Infos zur Publikation

LinuxUser 05/2014

Aktuelle Ausgabe kaufen:

Heft als PDF kaufen

LinuxUser erscheint monatlich und kostet in der Nomedia-Ausgabe EUR 5,95 und mit DVD EUR 8,50. Weitere Informationen zum Heft finden Sie auf der LinuxUser-Homepage.

Im LinuxUser-Probeabo erhalten Sie drei Ausgaben für 3 Euro. Das Jahresabo (ab EUR 60,60) können Sie im Medialinx-Shop bestellen.

Tipp der Woche

Bilder vergleichen mit diffimg
Bilder vergleichen mit diffimg
Tim Schürmann, 01.04.2014 12:40, 1 Kommentare

Das kleine Werkzeug diffimg kann zwei (scheinbar) identische Bilder miteinander vergleichen und die Unterschiede optisch hervorheben. Damit lassen sich nicht nur Rätsel a la „Orignial und Fäls...

Aktuelle Fragen

Owncloud mit Linuxmint 15 32 Bit
Santana Muggel, 24.04.2014 16:45, 0 Antworten
Hallo, ich habe nach dem Artikel in Heft 05.2014 versucht, owncloud einzurichten. Bei der Inst...
programm suche
Hans-Joachim Köpke, 13.04.2014 10:43, 8 Antworten
suche noch programme die zu windows gibt, die auch unter linux laufen bzw sich ähneln sozusagen a...
Funknetz (Web-Stick)
Hans-Joachim Köpke, 04.04.2014 07:31, 2 Antworten
Bei Windows7 brauche ich den Stick nur ins USB-Fach schieben dann erkennt Windows7 Automatisch, a...
Ubuntu 13.10 überschreibt immer Windows 8 Bootmanager
Thomas Weiss, 15.03.2014 19:20, 8 Antworten
Hallo Leute, ich hoffe das ich richtig bin. Ich habe einen Dell Insipron 660 Ich möchte gerne Ub...
USB-PTP-Class Kamera wird nicht erkannt (Windows-only)
Wimpy *, 14.03.2014 13:04, 15 Antworten
ich habe meiner Frau eine Digitalkamera, AGFA Optima 103, gekauft und wir sind sehr zufrieden dam...