HTML5: Der Game-Changer für das Web
So wie die CD einst die Kassette ersetzt hat, zeichnet sich ab, dass durch HTML5 wohl auch Flash in naher Zukunft aussterben wird. Bereits einige iOS und viele Android-Geräte unterstützen gar kein Flash mehr, sodass es schon jetzt hauptsächlich nur noch auf Desktop PCs genutzt wird. HTML5 bietet zwei entscheidende Eigenschaften, die Flash nicht zu bieten hat: mobile Funktionen und semantische Markups. Doch dies ist längst nicht alles. TWT Interactive zeigt, warum HTML5 mehr ist als nur der “Flash-Killer”.
Durch immer schnellere Verbindungen und die ständige Weiterentwicklung leistungsstarker Endgeräte, sind Videos heute fast überall im Netz präsent. Auch immer mehr Unternehmen setzen auf das Bewegtbild-Format und kreieren durch eine geschickte Komposition von Story und Design herausragende Erlebniswelten für ihre Kunden. Der Wunsch nach mehr Multimedia-Inhalten ist unweigerlich mit dem Erfolgszug von HTML5 verknüpft.
Schneller, einfacher, HTML5
Die rasante Verbreitung der mobilen Endgeräte und die Beliebtheit von Multimedia-Inhalten begünstigen die Weiterentwicklung von HTML5. Doch was genau ist HTML5? HTML5 ist eine textbasierte Auszeichnungssprache zur Strukturierung und semantischen Auszeichnung von Content wie z.B. Texten, Bildern und Hyperlinks in Dokumenten. HTML5 ist noch nicht perfekt, denn es steckt noch immer in den Kinderschuhen, dennoch arbeiten bereits einige Unternehmen recht erfolgreich damit.
HTML5 soll die Nachfolge von HTML4 antreten und es ersetzt die Dokumentbeschreibungsstandards HTML 4.01 und XHTML 1.0. HTML5 bietet unzählige neue Feature wie z.B. Video, Audio, lokalen Speicher und dynamische 2D- und 3D-Grafiken, die mit HTML4 nicht unterstützt und bislang nur durch zusätzliche Plugins ermöglicht werden konnten.
Neue Features bieten viele Vorteile
All diese Eigenschaften und neuen Funktionen machen HTML5 zu einer perfek-ten Basis für Werbetreibende und Online-Händler. Dies sind die wichtigsten Vorteile im Überblick:
• Neue Techniken: Bietet z. B. die Möglichkeit Video und Audio für mobile Geräte ohne Flash einzubinden
• Mobile Geräte: Fast alle aktuellen mobilen Geräte unterstützen einen großen Umfang von HTML5 Elementen und CSS3 Eigenschaften
• Neue Formatierungsmöglichkeiten: Schlagschatten, Textschatten, abgerundete Ecken ohne zusätzliche Grafiken über CSS3 sind möglich
• Performance: HTML5 ist hardwarebeschleunigt in modernen Browsern, z. B. wichtig für Seiten auf denen viele Videos eingebunden werden sollen
• Semantik: Neue Elemente und Attribute um Seiten besser auszuzeichnen und die Bedienbarkeit zu optimieren
Hier haben wir die wichtigsten Unterschiede zu HTML 4.01 und neue Elemente detailliert zusammengefasst:
Die Dokumenttypangabe
In HTML5-Dokumenten besteht die Dokumenttypangabe aus der Zeichenkette „“. Dabei spielt Groß- und Kleinschreibung keine Rolle. In allen modernen Browsern bewirkt diese Zeichenkette eine Verarbeitung des Quelltextes im standardkonformen Modus.
Einbindung von SVG und MATHML
Durch HTML5 wird ein leichteres Einbinden von SVG und MathML in den HTML-Quelltext ermöglicht. Dabei gibt es jedoch zwei Beschränkungen:
• Die Elemente dürfen keine Namensraumpräfixe beinhalten
• Der Namensraumpräfix für XLink (bei Attributen) muss „xlink“ lauten
Multimedia-Elemente
Mit HTML5 gibt es spezifische Elemente zur Einbindung von Audio- und Videodateien. Dafür können eine oder mehrere Quellen bzw. unterschiedliche Formate hinterlegt werden. Aus denen wählt der Browser dann ein für ihn verständliches Format aus. Um Anwendungen oder interaktive, nicht auf HTML basierenden Content einzubinden, beschreibt HTML5 das zuvor proprietäre embed-Element. Darüber hinaus gibt es nun eine Zeichenoberfläche (Canvas-Element), auf der mit Hilfe von Skripten zweidimensionale und dreidimensionale Bilder gezeichnet werden können.
Strukturierende Elemente
Mit den Elementen section, nav, article, aside, header und footer wird eine Strukturierung erleichtert. Im Gegensatz zu div-Kästen, die bisher für eine Strukturierung von HTML-Dokumenten genutzt wurden, kann durch das neue Element nun auch definiert werden, welche Art von Inhalt sich in dem Element befindet. Das Element section bezeichnet beispielsweise einen Abschnitt eines durchgängigen Textes, nav ein Menü, article einen Artikel und footer den Seitenfuß.
Elemente zur Textauszeichnung
Für die Textauszeichnungsebene wurden die Elemente time für dynamisch lokalisierte Zeitangaben, mark für hervorgehobene Textabschnitte, ruby, rp und rt für einfache Ruby-Annotierungen und das vormals proprietäre wbr-Element, das Textumbruchsmöglichkeiten in langen Wörtern bietet, hinzugefügt.
Interaktive Elemente
Die Elemente details und summary ähneln in ihrem Aufbau den figure und fig-caption-Elementen. Der Inhalt des summary-Elements wird permanent angezeigt, der restliche Inhalt des details-Elements kann ein- und ausgeblendet werden. Um Werkzeugleisten und Kontext-Menüs zu erstellen, werden das menu-Element als strukturierende Basis und das command-Element (bisher nur von Firefox unterstützt) als Interaktionspunkt definiert.
HTML5 Best Practices
Mobee
Die Website des Carsharing-Dienstes mobee ist nach dem sogenannten Free-Floating-Prinzip konzipiert. Die gut designte Website überzeugt vor allem durch das das ungewöhnliche Scrolling. Neben den Parallax-Effekten ist aber auch der Split Screen ein Eyecatcher.
Lander
Auch die Website des Online-Tools Lander besticht durch innovatives Design. Hier wird sichtbar, was mit HTML5 alles möglich ist und dass selbst ein Experte wie Lander bereits auf HTML5 setzt ist ein weiterer Punkt der für die neue Auszeichnungssprache spricht.
Happy
Auch die Website des interaktiven Musik-Videos “Happy” von Pharrell Williams basiert auf HTML5. Ganze 24 Stunden Filmmaterial wurden erfolgreich verarbeitet – ein schönes Beispiel dafür, welche Projekte mit HTML5 bereits heute möglich sind.
Fazit
Webseiten-Verantwortliche sollten sich mit dem Thema HTML5 auseinandersetzen und evaluieren, ob und in welchem Rahmen die Technologie für sie von Nutzen sein kann.
Hans J. Even
Geschäftsführer TWT Interactive GmbH
Diplom-Kaufmann
E-Mail: presse@twt.de
Durch immer schnellere Verbindungen und die ständige Weiterentwicklung leistungsstarker Endgeräte, sind Videos heute fast überall im Netz präsent. Auch immer mehr Unternehmen setzen auf das Bewegtbild-Format und kreieren durch eine geschickte Komposition von Story und Design herausragende Erlebniswelten für ihre Kunden. Der Wunsch nach mehr Multimedia-Inhalten ist unweigerlich mit dem Erfolgszug von HTML5 verknüpft.
Schneller, einfacher, HTML5
Die rasante Verbreitung der mobilen Endgeräte und die Beliebtheit von Multimedia-Inhalten begünstigen die Weiterentwicklung von HTML5. Doch was genau ist HTML5? HTML5 ist eine textbasierte Auszeichnungssprache zur Strukturierung und semantischen Auszeichnung von Content wie z.B. Texten, Bildern und Hyperlinks in Dokumenten. HTML5 ist noch nicht perfekt, denn es steckt noch immer in den Kinderschuhen, dennoch arbeiten bereits einige Unternehmen recht erfolgreich damit.
HTML5 soll die Nachfolge von HTML4 antreten und es ersetzt die Dokumentbeschreibungsstandards HTML 4.01 und XHTML 1.0. HTML5 bietet unzählige neue Feature wie z.B. Video, Audio, lokalen Speicher und dynamische 2D- und 3D-Grafiken, die mit HTML4 nicht unterstützt und bislang nur durch zusätzliche Plugins ermöglicht werden konnten.
Neue Features bieten viele Vorteile
All diese Eigenschaften und neuen Funktionen machen HTML5 zu einer perfek-ten Basis für Werbetreibende und Online-Händler. Dies sind die wichtigsten Vorteile im Überblick:
• Neue Techniken: Bietet z. B. die Möglichkeit Video und Audio für mobile Geräte ohne Flash einzubinden
• Mobile Geräte: Fast alle aktuellen mobilen Geräte unterstützen einen großen Umfang von HTML5 Elementen und CSS3 Eigenschaften
• Neue Formatierungsmöglichkeiten: Schlagschatten, Textschatten, abgerundete Ecken ohne zusätzliche Grafiken über CSS3 sind möglich
• Performance: HTML5 ist hardwarebeschleunigt in modernen Browsern, z. B. wichtig für Seiten auf denen viele Videos eingebunden werden sollen
• Semantik: Neue Elemente und Attribute um Seiten besser auszuzeichnen und die Bedienbarkeit zu optimieren
Hier haben wir die wichtigsten Unterschiede zu HTML 4.01 und neue Elemente detailliert zusammengefasst:
Die Dokumenttypangabe
In HTML5-Dokumenten besteht die Dokumenttypangabe aus der Zeichenkette „“. Dabei spielt Groß- und Kleinschreibung keine Rolle. In allen modernen Browsern bewirkt diese Zeichenkette eine Verarbeitung des Quelltextes im standardkonformen Modus.
Einbindung von SVG und MATHML
Durch HTML5 wird ein leichteres Einbinden von SVG und MathML in den HTML-Quelltext ermöglicht. Dabei gibt es jedoch zwei Beschränkungen:
• Die Elemente dürfen keine Namensraumpräfixe beinhalten
• Der Namensraumpräfix für XLink (bei Attributen) muss „xlink“ lauten
Multimedia-Elemente
Mit HTML5 gibt es spezifische Elemente zur Einbindung von Audio- und Videodateien. Dafür können eine oder mehrere Quellen bzw. unterschiedliche Formate hinterlegt werden. Aus denen wählt der Browser dann ein für ihn verständliches Format aus. Um Anwendungen oder interaktive, nicht auf HTML basierenden Content einzubinden, beschreibt HTML5 das zuvor proprietäre embed-Element. Darüber hinaus gibt es nun eine Zeichenoberfläche (Canvas-Element), auf der mit Hilfe von Skripten zweidimensionale und dreidimensionale Bilder gezeichnet werden können.
Strukturierende Elemente
Mit den Elementen section, nav, article, aside, header und footer wird eine Strukturierung erleichtert. Im Gegensatz zu div-Kästen, die bisher für eine Strukturierung von HTML-Dokumenten genutzt wurden, kann durch das neue Element nun auch definiert werden, welche Art von Inhalt sich in dem Element befindet. Das Element section bezeichnet beispielsweise einen Abschnitt eines durchgängigen Textes, nav ein Menü, article einen Artikel und footer den Seitenfuß.
Elemente zur Textauszeichnung
Für die Textauszeichnungsebene wurden die Elemente time für dynamisch lokalisierte Zeitangaben, mark für hervorgehobene Textabschnitte, ruby, rp und rt für einfache Ruby-Annotierungen und das vormals proprietäre wbr-Element, das Textumbruchsmöglichkeiten in langen Wörtern bietet, hinzugefügt.
Interaktive Elemente
Die Elemente details und summary ähneln in ihrem Aufbau den figure und fig-caption-Elementen. Der Inhalt des summary-Elements wird permanent angezeigt, der restliche Inhalt des details-Elements kann ein- und ausgeblendet werden. Um Werkzeugleisten und Kontext-Menüs zu erstellen, werden das menu-Element als strukturierende Basis und das command-Element (bisher nur von Firefox unterstützt) als Interaktionspunkt definiert.
HTML5 Best Practices
Mobee
Die Website des Carsharing-Dienstes mobee ist nach dem sogenannten Free-Floating-Prinzip konzipiert. Die gut designte Website überzeugt vor allem durch das das ungewöhnliche Scrolling. Neben den Parallax-Effekten ist aber auch der Split Screen ein Eyecatcher.
Lander
Auch die Website des Online-Tools Lander besticht durch innovatives Design. Hier wird sichtbar, was mit HTML5 alles möglich ist und dass selbst ein Experte wie Lander bereits auf HTML5 setzt ist ein weiterer Punkt der für die neue Auszeichnungssprache spricht.
Happy
Auch die Website des interaktiven Musik-Videos “Happy” von Pharrell Williams basiert auf HTML5. Ganze 24 Stunden Filmmaterial wurden erfolgreich verarbeitet – ein schönes Beispiel dafür, welche Projekte mit HTML5 bereits heute möglich sind.
Fazit
Webseiten-Verantwortliche sollten sich mit dem Thema HTML5 auseinandersetzen und evaluieren, ob und in welchem Rahmen die Technologie für sie von Nutzen sein kann.
Hans J. Even
Geschäftsführer TWT Interactive GmbH
Diplom-Kaufmann
E-Mail: presse@twt.de