HTML5 ist der neue Webstandard. Apple setzt darauf, dass Flash durch HTML5 ersetzt wird. Doch was ist genau HTML5? Was sind die Möglichkeiten und wie wird diese in zukünftigen Applikationen eingesetzt? Genau diese Fragen haben uns interessiert, deshalb haben wir recherchiert und sind auf eindrucksvolle Applikationen und Demos gestossen welche einen Überblick geben was uns in baldiger Zukunft erwartet.
Was versteht man unter HTML5
Grundsätzlich definiert HTML5 zahlreiche Elemente und Attribute, die als Sprachkern aufgefasst werden können. Vergleichbar ist dieser mit der HTML-4.01-Variante Strict. Die Spezifikation soll aber in Zukunft auch definieren, wie ältere Elemente und Attribute verarbeitet werden sollen. Denn ein HTML5-Browser soll auch problemlos mit bereits vorhandenen Webseiten umgehen können, die nicht mit den Regeln dieser Sprache geschrieben wurden.
Elemente von HTML5
Elemente sind zum Beispiel <audio>, <video> welche die Integration von Audio und Videoelementen ohne zusätzliche Plugins wie Flash ermöglicht oder <source> mit welchem verschiedene Quellen angegeben werden, aus denen das Darstellungsprogramm die passende aussucht. Ebenfalls ein Element ist <time> welches verwendet wird um Zeitangaben auszuzeichnen und Zeitangaben mit Metadaten auszustatten, sodass ein Browser damit z. B. einen interaktiven Kalender erzeugen kann.
Zusätzlich zu den Elementen können Anwendungungselemente mit <canvas> integriert werden welche eine Zeichenoberfläche erzeugt, mit der mit Hilfe von DOM-Methoden gezeichnet werden kann. Die Spezifikation sieht nur eine zweidimensionale Zeichenoberfläche vor, geht aber davon aus, dass in Zukunft auch dreidimensionale Kontexte eingeführt werden könnten.
Das <progres> Element gibt den Fortschritt einer bestimmten Aufgabe wieder. Das Element wird ebenfalls mit dem DOM gesteuert. Anwendungsbeispiele sind z. B. der Fortschritt bei einer mehrseitigen Umfrage.
Formulare
Auch für Formulare wurden einige Neuerungen definiert. Ursprünglich wurden sie in einer getrennten Spezifikation entwickelt, die Web Forms 2.0 hieß. Seit der Aufnahme in HTML5 wurde die getrennte Weiterentwicklung von Web Forms 2.0 eingestellt. Diese Spezifikation ist bereits sehr ausgereift und bringt z. B. diese neuen Features:
- Neue Eingabetypen, z. B. für E-Mail-Adressen, Internetadressen, Zeitangaben, etc. so dass diese vom Browser auf syntaktische Korrektheit geprüft werden können.
- Eingabefelder können als Pflichtfeld definiert werden.
- Eingabetemplates können erstellt werden und dynamisch hinzugefügt werden (z. B. um ein Bestellformular um mögliche Einträge zu erweitern).
- Datenlisten, z. B. um ein verstellbares Kontrollobjekt zu erzeugen mit dem beispielsweise die Lautstärke eines audio- oder video-Elements bestimmt werden kann.
- Klärung wie CSS-Eigenschaften sich auf Formularelemente auswirken.
Wie ihr seht, es stehen sehr viele Neuerungen an, wir wollen das ganze natürlich in der Praxis sehen und haben euch deshalb einige sehr eindrucksvolle Applikationen zusammengestellt welche bereits mit HTML5 Elementen entwickelt wurden. HTML5 wird von den Browser Firefox, Safari und Chrome unterstützt.
HTML 5 Love
Das ist eine ziemlich schicke Canvas-Audio Visualisierung mit dem Namen “HTML5 Love” welche von 9Elements umgesetzt wurde. HTML5 Love kombiniert das HTML5 Canvas und das Audio Element mit aktuellen Tweets, ziemlich beeindruckend.
Sketchpad
Michael Deal hat diese imposante Painting-Applikation mit dem Canvas Element und viel JavaScript umgesetzt. Sketchpad bietet Zeichnungs-Tools wie Brushes, Stifte, Füllmöglichkeiten und Text-Elemente aber auch Tools wie Spirographen, ungewöhnliche Schattierungen und Stempel. Es ist ziemlich einfach mit diesen Pattern ein Kunstwerk zu erstellen, selbst wenn man nicht sonderlich künsterlisch begabt ist.
Water Wave
Hakim El Hattab hat diese auf Canvas basierende Welle erstellt. In der Demo sieht man eine sprudelnde Welle welche sich nach der Mausposition richtet. Die Blasen platzen wenn man darauf klickt und aktuelle Tweets sind ebenfalls integriert.
Ambilight
Сергей Чикуёнок hat diese fantastische Ambilight Canvas Demo erstellt welche auf dem Philips TV LED Surround Light basiert. Das Video spielt mit dem HTML5 Video Element und der Hintergrund passt sich den Farben im Film an.
Particle Message
Steven Sanborn hat diese einzigartige Partikel-Message Demo entwickelt. Die Mitteilung wird durch zusammengesetze Kreise und Alpha Sprites zu einer Form eines Buchstabens animiert.
Space Debris
Roope Kangas hat dieses auf Canvas Physik basierende Demo entwickelt welches Boxen zeigt die auf die Mausposition und Klicks reagieren.
JSASCII
Es ist gut zu wissen, dass man mit dem HTML5 Canvas Element nicht nur Dinge darstellen kann, sondern dass damit auch Bilddaten gelesen werden können. Jacob Seidelin’s JSASCII Demo macht sich genau dies zu nutze. Das Tool holt sich mit dem getImageData() Bilddaten und reproduziert damit grossartige ASCII Kunstwerke.
Animated Backgrounds
Berry de Vos hat eine Demo eines animierten Background ( HTML5 Canvas) erstellt. Der Hintergrund sind animierte Balken welche sind horizontal bewegen und die Farben verändern.
Many Lines
Der Name “Many Lines” beschreibt diese Demo perfekt – diese Applikation zeichnet viele Linien rund um die Position des Cursers. Entwickelt wurde diese Applikation von Eric Ishii Eckhard und sie nutzt das Partikel System um die folgenden Linien zu zeichnen.
Open Web Tools Directory
Mozilla bietet uns wieder mal etwas spezielles – diesmal in der Form eines Open Web Tool Verzeichnis. Das Verzeichnis listet alle brauchbaren Applikationen und Tools für Webentwickler auf. Besonders die Suchfunktion ist ziemlich beeindruckend.
Surface Web Gallery
Ernest Delgado hat dieses Canvas Photo Experiment entwickelt – eine UI Implementation welche sehr nah an die Photo Table Applikation von Microsofts Surface kommt. Die Bilder können mit Drag n’Drop umhergeschoben und exportiert werden und dies alles im Browser.
Flickr 3D Wall
Peter Nederlof hat diese eindrucksvolle 3D Flickr Gallery mit HTML5 erstellt. Die Wände rotieren und bei Klick auf ein Panel erscheint ein Random Flickr Photo und die Kamera wird in eine andere Richtung gedreht.
Dynamic Image Injection with HTML 5
Paul Rouget pusht die Canvas Video Möglichkeiten auf eine neue und eindrucksvolle Art mit seiner Dynamic Image Injection. Die Applikation benutzt die DrawImage Methode des Canvas Elements. Damit können Bilder, Canvas und Videos in ein DOM Element geschrieben werden.
Browser Ball
Hier ist eine ziemlich witzige Demo von Mark Mahoney die den Namen Browser Ball trägt. Mit der Möglichkeit verschiedene übereinander liegende Browserfenster zu stapeln kann man damit den Ball von Fenster zu Fenster hüpfen lassen.
Liquid Canvas
Mit Liquid Canvas lassen sich Grafiken zu einer Website hinzufügen die über das Image Creation Tool, entwickelt von Steffen Rusitschka, generiert werden. Die Grösse der Elemente passt sich automatisch der Browsergrösse an, alles möglich mit HTML5.
2 Kommentare
Roman says:
Mrz 24, 2010
Coole Bericht und interessante Anwendungsbeispiele.
Leider fehlen die Code Beispiele?!
Webdesignlovers says:
Mrz 24, 2010
Hallo Roman – die Codes kannst du dir über den Quelltext anschauen und die genauen Spezifikationen zu HTML5 findest du hier http://dev.w3.org/html5/spec/Overview.html