HTML5 Demos – von Canvas bis hin zu Videos

Erstellt am 4. August 2011 von Texblock

Tolle Demos mit offenen Codes

Bringe dir HTML5 bei und verpasse deinen Webseiten einen Tritt in den Hintern! HTML5 wird als die neue Standard-Sprache im Internet angesehen und verpasst uns neue Möglichkeiten der visuellen Gestaltung. Wer sich einen Eindruck von den neuen Features und Optionen verschaffen möchte, sollte sich daher einige Demos ansehen und sich den Code näher anschauen. Für diese Zwecke empfehle ich euch eine interessante Seite…

Sicherlich klingelt es jetzt in euren Köpfen: Richtig, ich habe erst vor kurzem einen Artikel mit einem interessanten Link, zur Einführung in HTML5 mit Beispielen und einigen Tutorials, veröffentlicht. Dort sind sehr wichtige und äußerst reizvolle Basics dabei, die ihr euch unbedingt aneignen solltet, sofern ihr tiefer in diese Materie ansteigen möchtet.
In diesem Artikel möchte ich wieder auf den selben Zug aufspringen und euch mit weiterem Basis-Wissen zu HTML5 füttern. Und zwar habe ich in den letzten Tagen die Seite »html5demos.com« entdeckt, die in einem wirklich minimal reduzierten aber übersichtlichen Rahmen gestaltet wurde. Hier findet ihr auch die Basis aller Dinge, mit der schönen Beispielen und den komplette Codes, die ihr sofort in euren Projekten einbauen könnt. Das ist wirklich perfekt, da ihr so die Funktionen auf einem Blick habt und abwägen könnt, welche Elemente ihr in euren Projekten verwenden könnt.

Ich möchte an dieser Stelle noch etwas tiefer in die HTML5 Seite eintauchen und euch den Aufbau näher bringen: neben den aufgeführten Demos, seht ihr sofort, welche Technologie dafür verwendet wird und vor allem welche Browser das unterstützen. Letztes ist vor allem wichtig, da nicht alle Menschen auf dem aktuellsten Stand sind und noch alte Versionen laufen lassen.
Wenn wir uns zum Beispiel den Bereich »Drag and Drop« anschauen, der sich weiter unten befindet, gelangen wir auf eine neue Seite, die sofort die Funktionalität erklärt. Ihr seht einen Mülleimer in Grautönen, der gefüttert werden möchte. Durch das drücken und ziehen der 5 bestehenden Elemente, könnt ihr die Mülltonne in diesem Sinne »füttern«. Beim loslassen, also droppen, färbt sich das Bild, was die Interaktion verdeutlicht. Je nach dem, welches Element in das Bild reingezogen wird, poppt eine Meldung der Tonne auf – genial.

Natürlich warten noch viele andere HTML5 Beispiele auf euch. Unbedingt anschauen, da ihr hier wirklich sehr viel lernen könnt und schöne Beispiele bekommt.