Kurs:Neueste Internet- und WWW-Technologien/HTML 5

HTML5 ist kein einzelnes Paket, sondern eine Sammlung von neuen Features, von denen die meisten schon in modernen Browsern implementiert sind. Der erste Arbeitsentwurf wurde am 22.01.2008 veröffentlicht, der letzte am 29.05.2012^[1]. Die Spezifikation wird voraussichtlich 2014 verabschiedet. Es gibt nur einen Doctype: <!DOCTYPE html>.

Audio

HTML5 definiert eine native Unterstützung für das Abspielen von Audio-Dateien, ohne das Flash nötig wäre.

<audio>

controls – Steuerung anzeigen
loop – Wiederholung, wenn abgespielt
autoplay – Sofort nach dem Laden abspielen
preload – Audio zusammen mit der Seite laden

<syntaxhighlight>

src – Quelldatei
type – MIME-Type der Datei

Der Browser prüft nun der Reihe nach die angegebenen Typen und spielt den ersten unterstützen ab.

Audio-Wiedergabe in Firefox

Beispiel

<audio controls="controls">
  <syntaxhighlight src="song.ogg" type="audio/ogg" />
  <syntaxhighlight src="song.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

Falls keiner der angebotenen Typen unterstützt wird, wird der Fallback-Content angezeigt, also der normale Text im audio-Tag.

Video

Der video-Tag ähnelt stark dem audio-Tag. Zusätzlich gibt es hier aber noch die Attribute:

width - Breite
height - Höhe
muted - Ohne Ton starten
poster – Platzhalterbild, bis Play gedrückt wird

Der source-Tag verhält sich wie beim Audio-Pendant.

Beispiel

<video width="320" height="240" controls="controls">
  <syntaxhighlight src="movie.mp4" type="video/mp4" />
  <syntaxhighlight src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

YouTube mit HTML5-Videos kann man sich hier ansehen: youtube.com/html5

Es haben sich drei Video-Formate im Web durchgesetzt, vom Standard wird aber keiner explizit vorgeschrieben:

Format	Video-Codec	Audio-Codec
WebM	VP8	Vorbis
Theora	Theora	Vorbis
MP4	H.264	AAC

Das MP4-Format ist nicht quelloffen.

Video for Everybody

Um nicht für jeden Browser-Typ andere Videos anbieten zu müssen und um die Browserkompatibilität zu erhalten, bietet "Video for Everybody" ^[2] eine universelle Lösung.

<video id="movie" width="320" height="240" preload controls>
	<syntaxhighlight src="__VIDEO__.webm" type='video/webm; codecs="vp8, vorbis"' />
	<syntaxhighlight src="__VIDEO__.ogv" type='video/ogg; codecs="theora, vorbis"' />
	<syntaxhighlight src="__VIDEO__.mp4" />
	<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
		<param name="movie" value="__FLASH__.SWF" />
		<param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
		<p>Download video as <a href="__VIDEO__.mp4">MP4</a>, <a href="__VIDEO__.webm">WebM</a>, 
		or <a href="__VIDEO__.ogv">Ogg</a>.</p> 
	</object>
</video>

In diesem Beispiel wird WebM, Theora und MP4 zuerst getestet, dann, falls kein Video-Tag unterstützt wird, ein Flash-Videoplayer angezeigt und als letzte Möglichkeit angeboten, das Video herunterzuladen.

Strukturiende HTML-Elemente

Dies sind neue HTML-Elemente, die einer Webseite mehr Struktur geben soll. Dies geht einher damit, dass Tags wie <strong> auch wirklich zur Hervorhebung und nicht zur Formatierung eingesetzt werden. So werden die Seiten auch von Suchmaschinen leichter lesbar.

<article> Eigenständige Komponente einer Seite, z.B. Forums- oder Blogeintrag, Zeitungsartikel

<section> Abschnitt eines Dokuments, typischerweise mit Überschrift, z.B. Kapitel, Tabs

<nav> Abschnitt mit Navigationslinks

<aside> Abschitt der lose mit dem Inhalt verknüpft ist, z.B. Hintergrund-Informationen, Anzeigen

<hgroup> Gruppierung von h1-h6-Elementen in einer Überschrift

<header> Kopf, z.B. Überschrift und Einleitung

<footer> Fußzeile, z.B. Autor, Copyright-Hinweis, weiterführende Links

<time> Zeit mit maschinenlesbarer Form

<mark> Markierter Abschnitt im Text

Beispiel

(Basierend auf dem HTML5 Working Draft^[3])

Diese Webseite besteht aus einem Buch mit einzelnen Kapiteln, einer Navigationsleiste, einem Bereich für weiterführende Links und einem Footer.

<!DOCTYPE html>
<html>
	<head>
		<title>My Book</title>
	</head>
	<body>
		<nav>
		  <a href="books/">Books</a> |
		  <a href="magazines/">Magazines</a> |
		  <a href="about/">About</a>
		</nav> 
		<article class="book">
			<header>
				<hgroup>
					<h1>My Book</h1>
					<h2>A sample with not much content</h2>
				</hgroup>
				<p><small>Published by Publishing Ltd. on 
					<time datetime="2012-05-14" pubdate>May 14, 2012</time></small></p>
			</header>
			<section class="chapter">
				<h1>My First Chapter</h1>
				<p>This is the first of my chapters. It doesn't say much.</p>
				<p>But it has two paragraphs!</p>
			</section>
			<section class="chapter">
				<h1>It Continutes: The Second Chapter</h1>
				<p>Bla dee bla, dee bla dee bla. Boom. <mark>This is really important!</mark></p>
			</section>
			<section class="appendix">
				<h1>Appendix: Overview of Examples</h1>
				<p>These are demonstrations.</p>
			</section>
		</article>
		<aside>
		  <p>You might also like: <a href="his_book.html">His book</a></p>
		</aside> 
		<footer>
			<a href="../">Back to index...</a>
		</footer>
	</body>
</html>

Canvas

Das Canvas-Element erlaubt das dynamische Zeichnen von Bitmaps in 2D. Der Markup sieht folgendermaßen aus:

<canvas id="canvas" width="500" height="350">
    Fallback Content
</canvas>

Wird Canvas vom Browser nicht unterstützt, wird der Fallback Content zwischen den Tags angezeigt. Zum Zeichnen holt man sich nun den Zeichenkontext in JavaScript:

var canvas = document.getElementById('canvas');  
var context = canvas.getContext('2d');

Beispiel

In diesem Beispiel wird das Wikiversity-Logo gezeichnet. Dazu wird beim Laden der Seite die draw-Methode aufgerufen. In dieser wird wird der Zeichenkontext aufgerufen. In diesem werden nun die sechs Rechtecke in Blau gezeichnet. Dann wird ein Pfad begonnen, in dem ein Kreisbogen gezeichnet wird, in diesem Fall der Halbkreis, der den Globus symbolisiert. Dabei wird der Startpunkt, der Radius, der Start- und Endwinkel und die Richtung angegeben (mehr Informationen auf dieser Canvas-Referenzkarte). Nun wird der Pfad beendet und mit Blau gefüllt. Zum Schluss wird in fetter Schrift WIKIVERSITY unter das Bild geschrieben.

HTML

<body onload="draw();">
	<canvas id="canvas" width="1000" height="900"></canvas>
</body>

JavaScript

function draw(){
	var ctx = document.getElementById('canvas').getContext('2d');

	ctx.fillStyle = "#069";
	ctx.fillRect (32, 339, 936, 31);
	ctx.fillRect (64, 387, 125, 322);
	ctx.fillRect (313, 387, 125, 322);
	ctx.fillRect (562, 387, 125, 322);
	ctx.fillRect (811, 387, 125, 322);
	ctx.fillRect (32, 726, 936, 31);
	
	ctx.beginPath();
	ctx.arc(500, 330, 315, Math.PI, 0, false);
	ctx.closePath();
	ctx.fill();

	ctx.font = "bold 95pt sans-serif";
	ctx.fillStyle = "#696969";
	ctx.fillText("WIKIVERSITY", 40, 860);
}

Ergebnis

Vereinfachtes Wikiversity-Logo

Ergebnis

SVG

SVG (Scalable Vector Graphics) ist XML-basiert und textorientiert. Im Gegensatz zum Canvas ist das enstehende Bild eine Vektorgrafik, die skalierbar ist. Der SVG-Code ist über das SVG-DOM veränderbar, außerdem gibt es Event-Handler.

Da das Wikiversity-Logo bereits als SVG-Datei vorliegt, kann man es einfach in seinen HTML-Quelltext einbinden.

Vergleich Canvas - SVG

Canvas	SVG
Auflösungabhängig	Auflösungunabhängig
Nach dem Rendern nicht mehr veränderbar	Veränderung der Attribute wird sofort gerendert
Keine Event-Handler	Event-Handler
Geeignet für Grafik-intensive Anwendungen, wie Spiele, bei denen in einem neuen Bild viel neu gerendert wird	Geignet für große Flächen, wie z.B. Karten

Es hängt also vom Anwendungsfall ab, welche Technologie besser geeignet ist.

Geolocation

Um eine Seite an den Standort des Nutzers anzupassen, also z.B. interessante Orte in der Nähe anzuzeigen, erhält man mit der Geolocation dessen geographischen Koordinaten. Dabei muss der Nutzer vorher zustimmen, um seine Privatsphäre zu wahren. Dazu wird von Firefox der Google Location Service genutzt, welcher die Position anhand der IP-Adresse und WLAN-Netzen in Reichweite ermittelt.^[4] Bei mobilen Geräten kann zusätzlich der Funkmast, an dem das Handy angemeldet ist und der GPS-Sensor genutzt werden.

Demo

Beispiel

function getLocation() {
  navigator.geolocation.getCurrentPosition(showMap, handleError);
}

function showMap(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  var accuracy = position.coords.accuracy;
  // show a map
}

function handleError(error) {
  if (error.code == 1) {
    // user said no!
  }
}

Der Methode getCurrentPosition werden zwei Callback-Methoden übergeben, wobei die erste bei einer erfolgreichen Lokalisierung und ansonsten die zweite Methode aufgerufen wird. Über den übergebenen position-Parameter erhält man den Längen- und Breitengrad und die Genauigkeit der Lokalisierung. In der Fehlerbehandlungsmethode kann man über den übergebenen error-Parameter den Grund für den Fehler herausfinden, also z.B. ob der Nutzer den Zugriff verweigert hat.

Local Storage

Local Storage bietet ein lokales persistentes Speichern von Daten auch nach Verlassen der Seite oder Schließen des Browsers. Im Gegensatz zu Cookies werden dabei keine Daten an den Server gesendet, sondern nur auf der Client-Seite gespeichert. Zum Speichern benutzt man Key/Value-Paare wie in einem Assoziativen Datenfeld

Interface:

interface Storage {
  getter any getItem(in DOMString key);
  setter creator void setItem(in DOMString key, in any data);
  deleter void removeItem(in DOMString key);
  void clear();
  readonly attribute unsigned long length;
  getter DOMString key(in unsigned long index);
};

Das Lesen und Schreiben ist entweder über diese Methoden möglich oder über eine Array-Synatax:

var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("bar", foo);

//oder:

var foo = localStorage["bar"];
// ...
localStorage["bar"] = foo;

Demo

Sicherheitsaspekte:

Positiv ist, dass kein Übermittlung an Server stattfindet, was der Privatsphäre zuträglich ist.
Es gibt ein Local-Storage-Objekt für jede Domain, was problematisch bei Hosting-Services ist, wo viele Nutzer ihre Webseiten unter der gleichen Domain anlegen und so auf den Speicher der anderen Nutzer zugreifen können.
DNS-Spoofing ermöglicht Zugriff auf Speicher anderer Domains.

Drag'n'Drop

HTML 5 erlaubt natives Drag and Drop ohne JQuery oder ähnliche Bibiliotheken. Dazu benutzt man das neue Attribut draggable. Zusätzlich wurden neue Events eingeführt:

dragstart
drag
dragenter
dragleave
dragover
drop
dragend

Mit dropzone können auch Dateien in den Browser gezogen werden.

Beispiel

HTML

<p>
    Choose your favorite fruits:
</p>
<div id="dropzone" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<div id="drag1" class="fruit" draggable="true" ondragstart="drag(event)">
    Apple
</div>
<div id="drag2" class="fruit" draggable="true" ondragstart="drag(event)">
    Banana
</div>
<div id="drag3" class="fruit" draggable="true" ondragstart="drag(event)">
    Strawberry
</div>
<div id="drag4" class="fruit" draggable="true" ondragstart="drag(event)">
    Peach
</div>

JavaScript

function drag(event) {
    event.dataTransfer.setData("Text", event.target.id);
}

function dragEnter(event) {
    event.target.className = "over";
}

function dragLeave(event) {
    event.target.className = "";
}

function allowDrop(event) {
    event.preventDefault();
}

function drop(event) {
    event.target.className = "";
    var data = event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
    event.preventDefault();
}

CSS

#dropzone {
    width: 350px;
    height: 90px;
    padding: 10px 10px 10px 20px;
    border: 2px solid #aaaaaa;
    border-radius: 7px;
}
#dropzone.over {
    border: 2px dashed #aaaaaa;
}
div.fruit {
    width: 100px;
    background-color: #eee;
    border: 1px solid #aaaaaa;
    margin-bottom: 2px;
}

Ergebnis

Die 4 Elemente, die verschiebbar sein sollen, erhalten das Attribut draggable. Zusätzlich wird beim Start des Drag-Vorgangs in dem DataTransfer-Objekt die ID des Elements gespeichert. Wird das Element über die Zone gezogen, in der es abgelegt werden kann, wird dessen Klasse auf over geändert und dadurch der Rand gestrichelt gezeichnet. Beim Herausziehen oder Ablegen wird diese Änderung wieder rückgängig gemacht. Wird das Objekt abgelegt, wird die ID aus dem DataTransfer-Objekt gelesen und das Element dieser ID an das div der Zone angehängt

Kompatibilität

Die Browserunterstützung ist immer noch ein großes Problem. Zwar sind die meisten Features von den gängigen Browsern implementiert, aber das nicht immer in vollem Umfang und mit der gleichen Performance. Einen Überblick bietet html5readiness. Die Daten dafür kommen von When can I use..., wo detaillierte Informationen verfügbar sind. Einen Überblick über die HTML5-Fähigkeiten des eigenen Browsern und eine Rangliste der am besten unterstützenden Browser erhält man unter HTML5Test.

Eine einfache Überprüfung, ob ein Feature unterstützt wird, bietet die Bibliothek Modernizr^[5]:

function getLocation() {
  if (Modernizr.geolocation) {
    navigator.geolocation.getCurrentPosition(showMap);
  } else {
    // no native support
  }
}

Die Bibiliothek erzeugt ein Objekt mit den gewünschten Eigenschaften und ruft es sofort wieder ab. Kommt nichts oder undefined zurück, wird das Feature nicht unterstützt.

Weblinks

Einzelnachweise

↑ http://www.w3.org/TR/html5/ W3C HTML 5 Working Draft
↑ http://camendesign.com/code/video_for_everybody Video for Everybody
↑ http://www.w3.org/TR/html5/the-section-element.html#the-section-element Ein Beispiel für das section Element im W3C HTML 5 Working Draft
↑ https://www.mozilla.org/de/firefox/geolocation/ Geolokalisierung in Firefox
↑ http://modernizr.com/ Modernizr

[1] ttp://www.w3.org/TR/html5/ W3C HTML 5 Working Draft

[2] ttp://camendesign.com/code/video_for_everybody Video for Everybody

[3] ttp://www.w3.org/TR/html5/the-section-element.html#the-section-element Ein Beispiel für das section Element im W3C HTML 5 Working Draft

[4] ttps://www.mozilla.org/de/firefox/geolocation/ Geolokalisierung in Firefox

[5] ttp://modernizr.com/ Modernizr

[1]

[2]

[3]

[4]

[5]