HTML5 Spezial
Einige Beispiele
Einige Beispiele zu den tollen neuen Möglichkeiten, die sich durch HTML5 ergeben
Was ist HTML5?
Seit der Erfindung des WWW werden Online-Inhalte in der HyperText Markup Language - HTML - formatiert. Die Gestaltungsmöglichkeiten waren jedoch auf Textformatierungen wie fette oder kursive Darstellung beschränkt. Mit der Zunahme der Datenübertragungsgeschwindigkeit kamen später auch die Darstellung von Bildern, Tabellen, Formulare und deren individuelle Gestaltung mit Hilfe von Cascading Style Sheets - CSS - hinzu.
Jedoch sind die Browser bis Heute für die Darstellung von Animationen und Video-Inhalten auf Plug-ins angewiesen. Windows Media, Apples Quicktime-Plug-in und der Real Player boten frühe Möglichkeiten, Bewegtbilder im Internet zu betrachten. Erst die amerikanische Firma Macromedia mit ihrer Entwicklungsumgebung Flash konnte das Format-Durcheinander beseitigen. 2005 schließlich kaufte Adobe Macromedia und entwickelte den Flashplayer zu einem quasi Internet-Standard für Animationen und Videos. Da zeitgleich die Internet-Verbindungen immer schneller wurden, entstanden zahlreiche Multimedia-Portale wie beispielsweise YouTube, die ihre Inhalte mit Hilfe des Plug-ins darstellen lassen.
HTML5 ist nicht zuletzt wegen Apples negativer Haltung zu Flash, in den vergangenen Monaten und Jahren stärker ins Interesse der Öffentlichkeit gerückt. Sowohl im iPhon, als auch im iPad ist kein Flash Player installiert. Wir finden die Einstellung von Apple in diesem Zusammenhang toll! HTML5 als der logischen Weiterentwicklung des HTML 4.01 Standards wird, dies ist bereits jetzt erkennbar, ein sehr großer Wurf.
Im folgenden finden sie einige Beispiele für die neuen Fähigkeiten von HTML5.
HTML5 canvas Beispiele
Das etwas andere Apfelmännchen
Das Apfelmännchen ist die umgangssprachliche Bezeichnung für die in der Chaosforschung wichtigen Mandelbrot-Menge. Die durch diese Forschung entstehenden Bilder sind oft sehr schön anzusehen und werden auch als Fraktalgrafiken bezeichnet. Vereinfacht lässt sich die Mandelbrot-Menge, als eine bestimmte Menge von Zahlen, aus der komplexen Zahlenebene umschreiben. Mathematisch werden wir dieses Thema hier nicht weiter ausführen, unsere etwas andere Umsetzung in einem HTML5 canvas Element finden sie in dem unteren Beispiel.
Pythagoras-Baum
Ein weiteres Beispiel eines Fraktals, in der Mathematik bekann als Pythaoras-Baum.
Ein Homepage Countdown in ein canvas Element
Ein Nachteil der meistens durch animated-Gifs realisierten Countdown- oder Loading-Images ist die Ladezeit der Bilder selbst. Aus diesem Grund können diese Bilder immer nur sehr kleine Images sein. Unser Idee einen Countdown in einem HTML5 canvas Element zu realisieren umgeht dieses Problem.
Gravitation
Kugeln, die von der Maus angezogen werden. Auch hier wird die neue HTML5 canvas Funktion genutzt.
Moderne Browser wie Firefox, Safari, Chrom und Opera unterstützen die neue HTML5 canvas Funktion.
Beinahe ideales Gas
Eine Simulation eines virtuellen Gasuniversums. Auch hier wird die neue HTML5 canvas Funktion genutzt.
Moderne Browser wie Firefox, Safari, Chrom und Opera unterstützen die neue HTML5 canvas Funktion.
Quadrate
Diese Quadrate folgen den Bewegungen der Maus, in einem Canvas-Element, das sich vollflächig im Hintergrund der Webseite befindet.
Röhre
Die Röhre rotiert um die eigen Achse und zeigt mit den einen Öffnung immer auf die Maus. Die ist ein Beispiel für die HTML5 canvas Funktion. Das canvas Element gestattet das dynamische Rendern von Grafiken.
Moderne Browser wie Firefox, Safari, Chrom und Opera unterstützen die neue HTML5 canvas Funktion.
HTML5 video Beispiel
Egal ob auf einem normalen Computer, Laptop oder auf einem mobilen Gerät, gab es immer Probleme bei der Darstellung von Videos. Ein Webentwickler musste hier zum Teil erheblichen Aufwand betreiben, damit ein Video auf den meisten Browsern darstellbar war. Durch die neue HTML5 video Funktion wird die Darstellung von bewegten Bildern jetzt erheblich vereinfacht.
