Weblifting.at

Weblifting Blog

HTML5 – Was bringen die neuen Standards?

18/08/2010 by Martin Mayr
HTML5 ist in aller Munde und wird die Art und Weise wie das Internet genutzt wird stark verbessern und vielleicht sogar revolutionieren.

Unter dem Schlagwort HTML5 werden oft folgende Technologien zusammengefasst: HTML5, CSS3, JavaScript. Vorweg muss aber gesagt werden, dass HTML5 noch kein „Standard“ ist. Derzeit trägt es den Status „Workng Draft“. Das W3C (World Wide Web Consortium) sieht eine Fertigstellung frühestens Ende 2010 vor. Viele Browser unterstützen jedoch schon heute Teile dieses Standards.

Welche Funktionen bietet nun dieses Bündel an Standards?

HTML5 + JavaScript

Die wichtigsten Funktionen im Überblick:

Web Storage – Informationen können direkt auf dem Computer der eine Website anzeigt gespeichert werden. Dies ermöglicht es zum Beispiel, offline Emails im Webinterface eines Emailanbieters zu lesen. Es ist auch möglich eine Datenbank anzulegen, die mittels SQL abgefragt werden kann.

Web Workers – Sogenannte Worker ermöglichen es im Hintergrund JavaScript-Programme auszuführen. Die Website/Webapplikation kann weiterhin benutzt werden während das Programm läuft.

Drag-And-Drop – Dateien können wie vom Dateimanager gewohnt per Drag and Drop einer Webapplikation zur Verfügung gestellt werden.

Geolocation – Eine Webapplikation kann auf die Position des Anwenders zugreifen um Ortsbasierte Funktionen anzuzeigen.

Semantic Web – HTML wurde um folgende semantische Tags erweitert: Navigationsmenü, Kopfzeile, Fußzeile, Artikel, Abschnitt, Randnotiz. Weiters wurde sogenannte Microdata eingeführt, um Elemente mit semantischer Information anzureichern. So wird die maschinelle Verarbeitung von Websites erheblich vereinfacht:

AccessibilityWAI-ARIA Attribute werden Teil von HTML und erlauben so einen Barrierefreien Zugang zu Webapplikationen.

Canvas und SVG – Das neue Canvas-Element erlaubt es, Grafiken dynamisch zu zeichnen und zu verändern. Es ist so zb. möglich, eine direkt mit der Maus veränderbare Collage von Fotos zu erstellen. Scaleable Vector Graphics ist eine standardisierte textuelle Beschreibung einer Grafik. Diese lässt sich im Gegensatz zu einer Bitmap verlustfrei vergrößern.

CSS(3)

Die folgenden Funktionen aus CSS2 und CSS3 spielen bei der Webentwicklung eine entscheidende Rolle und werden auch unter "HTML5" zusammengefasst, auch wenn CSS ein eigener Standard ist.

CSS Selectors – Neue Selektoren ermöglichen eine einfachere Auswahl der zu beschreibenden Elemente. Beispiele sind die Auswahl bestimmter Kind-Elemente (:nth-child()), die Elementauswahl nach bestimmten Attributen (input[type="text"]) oder die Negation (:not()).

Fonts – Mittels @font-face wird das laden von eigenen Schriftarten standardisiert. So ist man nicht mehr auf das Erstellen von Grafikdateien angewiesen, wenn der Browser die gewünschte Schriftart nicht unterstützt.

Farben – Man kann nun nicht nur eine Farbe angeben, sondern außerdem deren Deckkraft. So können halb-durchsichtige Hintergründe und Schriften erstellt werden. Weiters können Farben über RGB oder HSL definiert werden. Das Erstellen von Gradienten ist auch möglich.

Weitere Neuerungen sind etwa runde Ecken, Schatten sowie verschiedene Transformationen und Animationen.

Ausprobieren

Es gibt bereits einige Möglichkeiten, einen kleinen Vorgeschmack auf HTML5 zu bekommen. Eine schöne Zusammenfassung und Tutorials bietet http://www.html5rocks.com/ von Google, die optischen Schmankerln werden von Apple schön gezeigt http://www.apple.com/html5/, funktionieren teilweise aber nur in Safari. Eine weitere spannende Entwicklung zeigt zum Beispiel das Sencha Touch Framework auf. Damit ist es möglich, Webapplikationen für iOS (iPhone/iPad/iPod) und Android zu erstellen, die wie native Apps aussehen.

Zurück