Webdesign Möglichkeiten mit HTML5
Was lange währt wird gut
Ein Kollege hat mir heute einen interessanten Link zukommen lassen. Die Jungs von codecomputerlove.com haben eine Site ins Netz gestellt, auf der sie ein Retro Pong Story Spiel mit Hilfe von Flash und HTML5 Canvas implementieren. Das geniale daran ist, dass das Webdesign für das Spielfeld auf der linken Seite mit Flash und das auf der rechten Seite mit HTML5 Elementen umgesetzt ist. Um die Webseite korrekt anschauen zu können, benötigt ihr also einen Browser der wenigstens HTML5 Canvas unterstützt (z.B. Firefox, Safari, Chrome, Opera oder den kommenden Internet Explorer 9). Auf html5test.com könnt ihr checken, ob Euer Browser Canvas tauglich ist.
Der HTML5 Standard ist immer noch nicht in der entgültigen Version erschienen. Für uns Webdesigner bietet HTML5 sehr viele neue Möglichkeiten, mit denen sich eine Webseite gestalten und programmieren lassen. Das angesprochene Canvas Element kann beispielsweise zum Zeichnen von Grafiken verwendet werden. Diese Grafiken lassen sich via Scripting in Echtzeit anpassen (siehe Pong Story Beispiel). Es gibt eine Reihe neuer Javascript Funktionen, mit denen sich der Canvas manipulieren lässt. Abschliessend ruft man einfach .fill() oder .stroke() auf, um das Bild auf den Canvas zu zeichnen. Um mit Javascript zu checken, ob der Browser des Benutzers Canvas unterstützt, verwendet ihr einfach:
Neben neuen Markup Elementen und Canvas, bietet HTML5 weitere nette Sachen für den passionierten Webdesigner. Mit HTML5 Geolocation lässt sich eine Webseite zur Lokalisierung des Benutzers gestalten. Um den Bogen zurück zum Affiliate Marketing zu spannen, könnte man diese Funktionalität auch einsetzen um gezielt Werbung für Produkte oder Läden zu schalten, die sich in der Nähe des Users befinden. Leider funktioniert das nur bedingt, wenn der Benutzer über normales DSL im Internet surft. Mobile Endgeräte, die HTML Inhalte anzeigen können, sind hier klar besser.
Ein weiteres nettes Goodie für zukunftsorientiertes Webdesign, sind die WebWorker. Damit lassen sich in Zukunft Javascript Programme in einen separaten Thread auslagern. Das nervige Stop-The-World Syndrom, dass man manchmal in Firefox unter Linux hat wenn der Javascript Code die komplette Browserbenutzung lahm legt, gehört damit der Vergangenheit an. WebWorkers sind besonders für Webseiten interessant, die von sehr sehr vielen Benutzern gleichzeitig benutzt werden. Genau dann nämlich, wenn verbesserte Antwortzeiten der Webanwendung einen positiven Effekt auf die Umsätze haben.
Auch sehr interessant, leider bisher am wenigsten unterstützt, sind die WebSockets. Damit kann man asynchrone Kommunikation zwischen Nutzer und Server implementieren, die mit einem Bruchteil des Trafficverbrauchs auskommt, dass man mit heutigen Ajax-Poll-Comet Anwendungen hat. Der Server kann sogar Nachrichten an den Benutzer schicken, ohne das dieser die aktuelle Webseite neu laden muss. Ein gutes WebSockets Beispiel ist ein Poker Client, die ja heute meistens nur als downloadable .exe Datei oder mit Flash / Java angeboten werden. Stellt Euch also vor, dass ihr mit einem ganz normalen Browser ohne Plugins eine Runde Poker spielt und plötzlich knallt ein Hinweis hoch "Wow da hatte jemand 4 Asse an Tisch 10". Kein Problem mit HTML5 WebSockets. Gerade im Webdesign Bereich tun sich einige Möglichkeiten auf, da man nicht mehr auf Flash, ActiveX oder Plugins angewiesen ist. Wer sich vorab schon über die HTML5 Features informieren will, lest Pro HTML5 Programming das bei Apress erschienen ist.
Der HTML5 Standard ist immer noch nicht in der entgültigen Version erschienen. Für uns Webdesigner bietet HTML5 sehr viele neue Möglichkeiten, mit denen sich eine Webseite gestalten und programmieren lassen. Das angesprochene Canvas Element kann beispielsweise zum Zeichnen von Grafiken verwendet werden. Diese Grafiken lassen sich via Scripting in Echtzeit anpassen (siehe Pong Story Beispiel). Es gibt eine Reihe neuer Javascript Funktionen, mit denen sich der Canvas manipulieren lässt. Abschliessend ruft man einfach .fill() oder .stroke() auf, um das Bild auf den Canvas zu zeichnen. Um mit Javascript zu checken, ob der Browser des Benutzers Canvas unterstützt, verwendet ihr einfach:
function supports_canvas() {
document.createElement('canvas').getContext;
}Neben neuen Markup Elementen und Canvas, bietet HTML5 weitere nette Sachen für den passionierten Webdesigner. Mit HTML5 Geolocation lässt sich eine Webseite zur Lokalisierung des Benutzers gestalten. Um den Bogen zurück zum Affiliate Marketing zu spannen, könnte man diese Funktionalität auch einsetzen um gezielt Werbung für Produkte oder Läden zu schalten, die sich in der Nähe des Users befinden. Leider funktioniert das nur bedingt, wenn der Benutzer über normales DSL im Internet surft. Mobile Endgeräte, die HTML Inhalte anzeigen können, sind hier klar besser.
Ein weiteres nettes Goodie für zukunftsorientiertes Webdesign, sind die WebWorker. Damit lassen sich in Zukunft Javascript Programme in einen separaten Thread auslagern. Das nervige Stop-The-World Syndrom, dass man manchmal in Firefox unter Linux hat wenn der Javascript Code die komplette Browserbenutzung lahm legt, gehört damit der Vergangenheit an. WebWorkers sind besonders für Webseiten interessant, die von sehr sehr vielen Benutzern gleichzeitig benutzt werden. Genau dann nämlich, wenn verbesserte Antwortzeiten der Webanwendung einen positiven Effekt auf die Umsätze haben.
Auch sehr interessant, leider bisher am wenigsten unterstützt, sind die WebSockets. Damit kann man asynchrone Kommunikation zwischen Nutzer und Server implementieren, die mit einem Bruchteil des Trafficverbrauchs auskommt, dass man mit heutigen Ajax-Poll-Comet Anwendungen hat. Der Server kann sogar Nachrichten an den Benutzer schicken, ohne das dieser die aktuelle Webseite neu laden muss. Ein gutes WebSockets Beispiel ist ein Poker Client, die ja heute meistens nur als downloadable .exe Datei oder mit Flash / Java angeboten werden. Stellt Euch also vor, dass ihr mit einem ganz normalen Browser ohne Plugins eine Runde Poker spielt und plötzlich knallt ein Hinweis hoch "Wow da hatte jemand 4 Asse an Tisch 10". Kein Problem mit HTML5 WebSockets. Gerade im Webdesign Bereich tun sich einige Möglichkeiten auf, da man nicht mehr auf Flash, ActiveX oder Plugins angewiesen ist. Wer sich vorab schon über die HTML5 Features informieren will, lest Pro HTML5 Programming das bei Apress erschienen ist.
