HTML5Tutorial

Täglich landen mehrere Artikel und Beiträge in meinem Newsreader, die sich direkt oder indirekt mit den Themen HTML5, CSS3 und JavaScript beschäftigen. Klar, das Thema ist aktuell und wichtig. Aber übertreiben wir mit der Besessenheit, mit dem Durchspielen von zahllosen Tutorials und mit dem Lesen von hunderten von Artikeln?

Mit diesem Thema beschäftigt sich der aktuelle Post des Blogs webdesigner depot und fordert “Stop obsession over HTML5 and CSS3″. Im Artikel nennt der Autor einige Bereiche, die für einen Web Designer mindestens genau so wichtig sind, wie die Weiterbildung in diesem Bereich, und fordert Verhältnismäßigkeit. Auch wenn ich mir damit ein wenig ins eigene Fleisch schneide: da ist auf jeden Fall was dran und man sollte vielleicht mal darüber nachdenken.

CSS3 bietet vielen neue Funktionen gegenüber seines Vorgängers. Beispielsweise musste man sich bei CSS2 mit wenigen Pseudoklassen wie :hover oder :active zufrieden geben. Mit CSS3 kommen weitere wie :first-child und :last-child oder :target hinzu. Dies erleichtert unter anderem das Erstellen on Navigationsmenüs ohne Hilfe von JavaScript. Es gibt aber auch noch weitere Möglichkeiten, solche mit reinem HTML und CSS umzusetzen.

Liste von Tutorials zum Thema Navigationsmenü mit CSS3

Der Blog Splashnology hat eine Liste an Tools, Tutorials und Techniken zusammengestellt, die bei der Erstellung von Menüs zur Website-Navigation helfen sollen und die aktuellen CSS-Technologien abdecken.

zur Liste

Bereits gestern hat der prominenteste und größte HTML5-Verfechter Google ein neues Projekt mit dem Namen Swiffy vorgestellt. Das Online-Tool soll es ermöglichen, Flash-Anwendungen und Animationen in Form von SWF-Dateien per Upload in HTML5 zu konvertieren. Die erstellte HTML5-Anwendung oder Animation soll dann in den neueren Webkit-basierten Browsern wie Safari und Chrome lauffähig sein. Ein eigener Test mit Firefox 5 zeigte aber auch hier ordentliche Ergebnisse.

Googles Swiffy ist bisher noch experimentell und es werden nicht alle Funktionen von Flash unterstützt. Google selbst nennt als aktuellen Stand Flash 5, dessen Funktionen größtenteils mit Swiffy umsetzbar sein sollen. Selbst grundlegende ActionScript 2-Anweisungen kann Swiffy in JavaScript übersetzten. Trotzdem warnt Google vor zu großen Erwartungen.
Technisch gesehen generiert Swiffy eine JSON-Datei, die per HTML, SVG und CSS gerendert wird. Die so erzeugte Anwendung oder Animation ist in den meisten Fällen ein wenig größer als das original SWF.  Read more »

Wer vorhat, sich mit einer eigenen App für Googles mobiles Betriebssystem Android in die Welt der Selbstständigkeit aufzumachen, der sollte sich deren Website Handbuch für die App Galaxy von Google mal zu Gemüte führen. Sie bietet nicht nur einen tollen Leitfaden für die erfolgreiche Vermarktung von Android Apps, sondern ist zudem ein geniales und kreatives Beispiel für die Verwendung von HTML5 bei der Website-Erstellung.

Auf der Website begibt man sich mit einer Rakete auf die Reise ins All. Die Rakete kann hierbei u.a. über die Cursor-Tasten gesteuert werden. Im All passiert man verschiedene Stationen, Informationstafeln, auf denen der eigentliche Content zu finden ist. Die ganze Website ist sehr Detailgetreu mit netten Spielereien und liebevoll gestalteten Grafiken. Von der technischen Seite her findet man bei genauem Hinsehen einige HTML5 Schmankerl wie z.B. die Verwendung der Geolocation API zum Anzeigen der Landesflagge.

Für mich eine sehr gelungene Website.

Sehr gut gestaltete HTML5-Website: Handbuch für die App Galaxy von Google

Nicht nur im Umfeld der Desktop-Browser spielt HTML5 dank zahlreicher Webapps und weitreichender Unterstützung durch Google und anderen Firmen eine immer größere Rolle. Auch der Mobilbereich profitiert vom neuen Standard und seinen zahlreichen neuen Features und gerade deshalb sind die mobilen Versionen der Browser auch vorne mit dabei, wenn es um die HTML5 Unterstützung geht – siehe html5test.com. Da wundert es auch nicht, dass immer mehr Frameworks aus dem Boden schießen, die speziell die Entwicklung von Webapps für mobile Endgeräte wie Smartphones oder Tablets erleichtern sollen.

Einer dieser Kandidaten ist jQuery Mobile, quasi die mobile Schwester des bekannten JavaScript Frameworks jQuery, welches sich bereits einer großen Verbreitung und Akzeptanz bei der Entwicklung ansprechender User Interfaces erfreut. Es geht bei jQuery nicht um Applikationslogik oder Datenspeicherung, sondern in erster Linie um die Präsentationsschicht, die Art und Weise, wie Webapps aussehen und sich bedienen lassen, um das User Interface. Und genau dies ist eine große Herausforderung bei der Entwicklung mobiler Webapps, was auf den unter vielen Herstellern aufgeteilten Browsermarkt zurückzuführen ist. Wollte man bisher eine Webapp erstellen, die auf allen Geräten gleich aussieht, war viel Handarbeit gefragt. jQuery Mobile hat sich zum Ziel gemacht, diese Hürde zu verringern und alle wichtigen Browser in gleichem Maße zu unterstützen. Besonderen Schwerpunkt legt jQuery Mobile hier natürlich auf die Bedienung per Touchscreen, die sich in vielen Punkten von der klassischen Webnavigation unterscheidet. Read more »