Einer meiner Lieblingsblogs, Instantshift, hat einen Artikel mit mehr als 70 gelungenen HTML5-Websites veröffentlicht – sehr gut zur Inspiration und zum Ideen holen. Außerdem sieht man bei einigen Beispielen eindrucksvoll, was mit HTML5 möglich ist. Unter den Seiten sind sowohl promimente Vertreter wie z.B. die Apple-Website, aber auch einige unbekannte Schmankerl. Auf jeden Fall lohnt sich das Reinschauen!
Googles neuster Streich, das Social Network Google+, setzt voll auf HTML5. Wen wundert’s, schließlich ist Google größter Verfechter des neuen Webstandards. Leider kommt man im Moment nur per Einladung ins neue und bessere Facebook. Google hat aber eine tollte HTML5-basierte Website eingerichtet, auf der man sich über die wichtigsten Funktionen von Google+ informieren kann. Für mich wieder ein sehr gelungenes HTML5-Beispiel.
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 »