HTML5Tutorial

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

Die Vielfalt der Geräte, die auf Websites zugreifen, wird immer größer. Gerade durch den Boom von mobilen Geräten wie Smartphones, Tablets (allen voran das iPad) oder Laptops kamen sehr viele neue Bildschirmauflösungen ins Spiel, die ebenfalls bedient werden möchten. Oftmals sehen Weblayouts, die für Desktop-Standardauflösungen gestaltet und umgesetzt wurden, auf kleinen Geräten einfach nur grausam aus. Die mobilen Geräte haben oft schon Techniken in ihre Browser integriert, die zumindest die Lesbarkeit gewährleisten sollen. Doch dem Designer in mir reicht das nicht.

Wollte man früher die Displayauflösung des Users abfragen, kamen häufig JavaScripts zum Einsatz. Relativ umständlich musste man dann noch die entsprechenden CSS-Klassen auf Basis dieser Skripte den HTML-Elementen hinzufügen. CSS2 erlaubte das Spezifizieren von verschiedenen Stylesheets für verschiedene Medientypen wie Screen oder Print. Doch das Ganze war relativ unflexibel. CSS3 schafft hier Abhilfe und führt die sogenannten Media Queries ein. Dieser Artikel soll das Prinzip der Media Queries kurz erklären und somit einen Einstieg in die Webentwicklung für verschiedenste Bildschirmauflösungen bieten. Read more »