HTML5Tutorial

Der Trend ist eindeutig: immer mehr Dienste, die bisher von klassischen Desktop-Anwendungen übernommen wurden, verlagern sich langsam aber sicher ins Internet oder wie man so schön sagt „in die Cloud“. Dazu gehören neben E-Mail oder Newsreader, die ohnehin auf einer bestehenden Internetverbindung basieren, auch Office-Tätigkeiten oder Datenspeicher. Viele Dieser Cloud-Anwendungen sind somit stark von der Darstellungsfähigkeit des verwendeten Browsers abhängig. Nicht selten benötigt man zusätzliche Plug-Ins oder Software wie den Flash Player, um die gewünschten Inhalte korrekt darstellen zu können.

Ein sehr verbreiteter Vertreter dieser Art, der auf nahezu allen Rechnern installiert ist, ist der Adobe Reader zum Anzeigen von PDFs. Adobes PDF-Format hat sich in den letzten Jahren zu einem unverzichtbaren Format zum Austausch von Dokumenten gemacht und findet eine große Verbreitung im Internet. Und für die Darstellung von PDF Dateien im Browser benötigt man eben jenen Adobe Reader. Doch damit will Mozilla jetzt Schluss machen und stellt mit der Version 0.2 seines Firefox PDF-Readers nun eine Lösung vor, die PDFs per JavaScript rendern und in einem HTML5 Canvas anzeigen soll. Seit dieser Version ist der Firefox PDF-Reader nun pixelgenau bei der Darstellung von PDF Inhalten und bringt Unterstützung von TrueType Schriften und verbesserte grafische Darstellung.

Mit dem Firefox PDF-Reader geht Mozilla also einen weiteren großen Schritt in Richtung Plug-In-loses Internet-Browsing… HTML5 macht’s möglich!

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.

zur Google+-Tour

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

Über Sinn oder Sinnlosigkeit solcher Anwendungen lässt sich streiten, fest steht: es gibt sie und sie demonstrieren die Fähigkeiten des HTML5 Canvas in Verbindung mit JavaScript. Ein weiteres Beispiel aus genannter Kategorie ist The Endless Mural, bei dem der Benutzer ähnlich wie bei Silk einen Pfad zeichnen kann, die dann mit komplexeren Formen nachgezeichnet werden. Die Formen lassen sich mit diversen Schiebern und Knöpfen manipulieren, oder man greift auf eine der vorgefertigten zurück. Heraus kommt ein Formen-Wirrwarr… nicht besonders hübsch aber dafür ohne Flash und dadurch doch irgendwie cool.

The Endless Mural demonstriert Fähigkeiten des HTML5 Canvas

Die Anwendung verwendet die JavaScript Bibliothek Okapi JS. Da die Anwendung auf HTML5 basiert, ist sie wie immer nur in modernen Browsern lauffähig. Das Projekt wurde btw. realisiert, um die HTML5-Fähigkeit des Internet Explorers 9 zu demonstrieren.

zur Anwendung