computerwoche.de

Web

Geotargeting, Web Workers, iFrames

HTML5 - was es kann (Teil 5)

04.05.2011
Von 


Simon Hülsbömer betreut als Senior Research Manager Studienprojekte in der Marktforschung von CIO, CSO und COMPUTERWOCHE. Zuvor entwickelte er Executive-Weiterbildungen und war rund zehn Jahre lang als (leitender) Redakteur tätig. Hier zeichnete er u.a. für die Themen IT-Sicherheit und Datenschutz verantwortlich.
Alle Posts des Autors Email: Connect:

Verlaufs-API

Das History-Objekt macht es möglich, in begrenztem Umfang mit dem Browser-Verlauf zu kommunizieren. Stellen Sie sich vor, Sie klicken durch eine 100teilige Bilderstrecke und möchten danach auf die Seite zurück, auf der Sie vorher gewesen sind. Bisher erforderte das reichlich Geduld mit dem "Zurück"-Button in der Menüleiste des Browsers. In HTML5 schafft JavaScript nun Abhilfe:

<script type="text/javascript"> function changeURL(url, title) { if (typeof history.pushState == "undefined") { alert("Browser doesn't allow changing history with pushState"); } else { var state = {address : url}; window.history.pushState(state.address, title, url); } </script>

Wichtigster Effekt der Verlaufs-API ist das flüssigere Navigieren über den Browser und durch seine Verlaufslisten. Hier besteht für Entwickler noch viel Raum für Experimente.

Rückgängig-Funktionen

Viele der vorgestellten neuen Features machen den Browser vom reinen Darstellungsmedium zu einem Kommunikationskanal. Um die clientseitigen Eingaben aber auch richtig verwalten zu können, fehlt noch eine Rückgängig-Funktion. Hier kommen die Undo Transaction History und das UndoManager-Objekt ins Spiel. Zumeist sind es Formulareingaben, die in der Undo Transaction History gespeichert werden. Mittels des UndoManager können diese Daten dann auch noch nachträglich verändert werden - je nachdem was der Entwickler zulässt.

Textstrukturierung

Um die Übersichtlichkeit im Quellcode zu verbessern und textlastige Websites ansprechender zu gestalten, führt HTML5 abseits der althergebrachten <div>-Bereiche zahlreiche neue Tags ein. Wer in XML arbeitet, wird sich in dieser Art der strukturierten Auszeichnung schnell zurechtfinden. <article> zeichnet Anfang und Ende eines Artikels aus, <section> bezeichnet einen Absatz innerhalb eines Artikels, <nav> wird für Navigationselemente verwendet. Weitere Beispiele sind unter anderem <aside> (Inhalte, die nicht Hauptbereich einer Seite gehören), <footer> und <header> (Fuß- und Kopfzeile unter / über einem Absatz oder einer Seite) sowie das Meta-Elemente <hgroup> (Informationen über einen Absatz innerhalb eines Artikels). In Kombination mit den Überschrift-Elementen <h1> bis <h6> ergeben sich weitere Möglichkeiten der (verschachtelten) Strukturierung.

Auf der folgenden letzten Seite der HTML5-Serie stellen wir Ihnen noch einmal alle neuen Elemente vor.