04 August, 2011 von Thomas Noschka · 1 Kommentare

HTML5 Demos – von Canvas bis hin zu Videos

Codes aus HTML5 Demos herausnehmen und nutzen

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.

Autor Thomas Noschka
Wer schreibt hier?
Hallo, ich bin Thomas – Blogger, Grafik- und Interface Designer. Ich skate gerne, trinke Tee, reise oft und sehe das Internet als große Spielwiese an. Wenn du mehr über mich wissen möchtest, dann besuche mich auf Twitter, Facebook, Google+ und YouTube
1 Comments:

Hinterlasse ein Kommentar!

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *