html5 – derzeitigeleistungsfähigkeit und möglichkeitenin bezug auf aktuelle browser undmobile...

Masterarbeit

HTML5 – DerzeitigeLeistungsfähigkeit und Möglichkeitenin Bezug auf aktuelle Browser undmobile Endgeräte

Zur Erlangung des akademischen Grades einesMaster of Science- Media Processing and Interactive Services -

Fakultät InformatikReferent: Prof. Dr. Oliver BraunKorreferent: Prof. Dr. Klaus Chantelau

eingereicht von:Florian Schuhmann B. Sc.Matr.-Nr. 260357Martin-Luther-Ring 1898574 Schmalkalden

Schmalkalden, den 6. Dezember 2011

Zusammenfassung

Der Hype um HTML5 wird immer größer, doch was ist HTML5 genau und kann esschon genutzt werden?Diese Arbeit entstand im Zusammenhang mit dem spirit@fhs Projekt und beschäf-tigt sich mit diesen Fragestellungen. Daher wird neben einer Einführung in dasProjekt auch ein historischer Rückblick über die Auszeichnungssprache HTML ge-geben.Im weiteren Verlauf wird zuerst HTML5 in seinen Grundzügen näher vorgestelltbevor sich mehrere Kapitel verschiedenen neuen und interessanten Schnittstellenwidmen. Diese werden zuerst beschrieben und dann mit Quelltextauszügen und Pro-totypen veranschaulicht und getestet. Da die Bandbreite an Neuheiten im Umfeldvon HTML5 sehr groß ist, wird neben der Vorstellung von ausgewählten Neuheitenein Überblick über weitere neue Möglichkeiten geboten.Ein interessanter Bestandteil ist die Entwicklung von mobilen Apps mittels HTML5.Hierzu werden Applikationstypen unterschieden und relevante HTML5-Features ge-nannt. Es wird aber auch Kritik an HTML5 geübt und ein Ausblick auf HTML.nextgewährt.

Abstract

The hype about HTML5 is getting bigger, but what exactly is HTML5 and can italready be used?This work originated in connection with the spirit@fhs project and deals with thesequestions. Therefore, in addition to an introduction to the project, a historical reviewabout the HTML markup language is given.First of all HTML5 is presented in its basic features before following chapters intro-duce various new and interesting interfaces. Those will be first described and thenexplained and tested with source code statements and prototypes. Since the range ofinnovations is very broad within the field of HTML5, it will be a part of presentingselected innovations with an overview of other possibilities.Developing mobile apps with HTML5 is also a very interesting part, thus the typesof applications will be differentiated and relevant HTML5 features are stated. Alsocriticism on HTML5 is represented and a preview on HTML.next will be provided.

Danksagung

Ich möchte mich an dieser Stelle bei meiner Lebenspartnerin, Marie-Christin Reu-sche sowie bei meinen Eltern, Simona und Thomas Schuhmann, bedanken. Sie habenmich selbst nach der x-ten Spezifikationsänderung immer wieder ermutigt, unter-stützt und mir den Rücken freigehalten.Ein herzlicher Dank gilt Herrn Prof. Dr. Oliver Braun, der mir die Möglichkeit gabdieses Thema zu bearbeiten und stets bei Problemen oder Fragen zur Stelle war.Ein Dank geht auch an Herrn Prof. Dr. Klaus Chantelau, der gar nicht erst zögerteund sofort als Korreferent zur Verfügung stand.Mit Ronny Schleicher, Benjamin Lüdicke und Sebastian Stallenberger kam es wäh-rend der Zusammenarbeit zu interessanten und oft wilden Diskussionen, die unsneben Spaß auch auf viele Ideen und Anregungen brachten - danke dafür.Bei Petra Stein, Ricardo Volkert, Marcus Denison und Marcel Ziener möchte ichmich für das Lektorat dieser Arbeit bedanken.Für große Unterstützung in Sachen Grafik und Design bedanke ich mich bei StefanieRiewe, die unter anderem das Spirit-Logo entworfen hat.Außerdem gilt auch dem jetzigen PaDSLab Team mein Dank, da sie bei Fragen rundum LATEX immer Hilfestellungen gaben und die Erstellung dieser LATEX-Vorlage da-durch förderten.

Finally I’d like to thank Ian Hickson, Anne van Kesteren and other members of theWHATWG IRC channel, which always supported me with in solving my problemsand questions.

Inhaltsverzeichnis

1 Einleitung 1

2 Das Projekt spirit@fhs 32.1 Was ist spirit@fhs? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32.2 Teilprojektvorstellung . . . . . . . . . . . . . . . . . . . . . . . . . . . 42.3 StudWeb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

3 HTML 83.1 Die Entwicklungsgeschichte von HTML . . . . . . . . . . . . . . . . . 83.2 Die Idee des Neuanfangs mit XHTML . . . . . . . . . . . . . . . . . . 103.3 Das neue Zugpferd: HTML5 . . . . . . . . . . . . . . . . . . . . . . . 11

4 HTML5 im Überblick 154.1 Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154.2 Semantische Neuheiten . . . . . . . . . . . . . . . . . . . . . . . . . . 19

4.2.1 Neue Elemente zur Auszeichnung und Strukturierung . . . . . 214.2.2 Microdata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254.2.3 Barrierefreiheit mit WAI-ARIA . . . . . . . . . . . . . . . . . 27

4.3 Weitere Änderungen im Überblick . . . . . . . . . . . . . . . . . . . . 28

5 Geolocation API 325.1 Die API-Spezifikation . . . . . . . . . . . . . . . . . . . . . . . . . . . 325.2 Wie funktioniert die Ortsbestimmung in aktuellen Browsern? . . . . . 335.3 Datenstrukturen und Funktionen . . . . . . . . . . . . . . . . . . . . 345.4 Welche Risiken entstehen? . . . . . . . . . . . . . . . . . . . . . . . . 355.5 Prototyp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

6 Formularneuheiten 386.1 Formularelemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386.2 Formularattribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396.3 Input-Typen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406.4 Formularvalidierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

6.4.1 Automatische Validierung . . . . . . . . . . . . . . . . . . . . 416.4.2 Manuelle Validierung . . . . . . . . . . . . . . . . . . . . . . . 42

7 Multimedia-Elemente 437.1 Die HTML-Elemente und ihre Attribute . . . . . . . . . . . . . . . . 437.2 Media-API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457.3 Prototyp eines Videoplayers . . . . . . . . . . . . . . . . . . . . . . . 46

Florian Schuhmann B. Sc.V

Inhaltsverzeichnis Fachhochschule Schmalkalden WS 2011/12

7.4 Weitere Möglichkeiten der Inhaltseinbindung . . . . . . . . . . . . . . 49

8 Canvas 508.1 Grundlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 508.2 Canvas API und der 2D-Context . . . . . . . . . . . . . . . . . . . . 518.3 Prototyp zur Videobearbeitung im Browser . . . . . . . . . . . . . . . 528.4 Canvas Frameworks und deren Möglichkeiten . . . . . . . . . . . . . . 56

9 Weitere HTML5 API’s und Features 589.1 Offline Tauglichkeit . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

9.1.1 Application Cache . . . . . . . . . . . . . . . . . . . . . . . . 589.1.2 Web Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . 599.1.3 Alternativen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

9.2 Kommunikationsmöglichkeiten . . . . . . . . . . . . . . . . . . . . . . 609.2.1 WebMessaging API . . . . . . . . . . . . . . . . . . . . . . . . 619.2.2 Web Sockets . . . . . . . . . . . . . . . . . . . . . . . . . . . . 619.2.3 Weitere Kommunikations-API’s . . . . . . . . . . . . . . . . . 62

9.3 Interaktions-API’s . . . . . . . . . . . . . . . . . . . . . . . . . . . . 639.4 Weitere Spezifikationen . . . . . . . . . . . . . . . . . . . . . . . . . . 64

10 HTML5-Apps 6710.1 App-Typen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6710.2 Nativ vs. WebApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6710.3 Relevante HTML5-Features . . . . . . . . . . . . . . . . . . . . . . . 6810.4 Spirit HTML5 Android App . . . . . . . . . . . . . . . . . . . . . . . 69

11 Kritik, Ausblick und Fazit 7411.1 Kritik . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7411.2 Ausblick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7511.3 Fazit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

Literaturverzeichnis 77

Anhang 81

A Optionale Tags der HTML5-Syntax 82

Eidesstattliche Erklärung 87

Florian Schuhmann B. Sc.VI

1 Einleitung„Das Internet stellt heute eine unverzichtbare Infrastruktur dar, welchemittlerweile ähnlich wichtig ist wie andere Infrastrukturen, z.B. für Ver-kehr und Stromversorgung.”1

Diese Abhängigkeit wird durch das Web 2.0 oder besser Mitmach-Web und seineKomponenten noch verstärkt. Kaum eine Person ist heute nicht in einem sozia-len Netzwerk, bei Communities oder Twitter, angemeldet. Webseiten können schonnicht mehr als Dokumente, als welche sie konzipiert wurden, bezeichnet werden. Siewerden immer komplexer und wandeln sich zu richtigen Applikationen. Google zeigtmit Google Mail oder Google+ deutlich den Weg hin zu Web-Applikationen undweg von herkömmlichen Programmen. Ein weiteres eindrucksvolles Beispiel ist dieCloud9 IDE2 als Entwicklungsumgebung direkt im Browser.Die Entwicklung und Strukturierung von solchen Webseiten gestaltet sich immerschwieriger, da die Inhalte nicht nur immer komplexer werden, sondern auch derNutzer-Komfort und die Systemintegration in den Mittelpunkt rücken. Das Schlimms-te hierbei ist aber, dass das genutzte Werkzeug - HTML - aus dem Jahr 1999 stammt.In welche Richtung sich das Internet und die Webseiten entwickeln, war damals nochnicht abzusehen. Die Entwickler müssen allerlei Tricks anwenden, um die heutigenAnforderungen an Webseiten und damit Web-Applikationen zu erfüllen.HTML5 als neue Version des Standards soll diese Missstände in den Griff bekommenund das Web für die Zukunft rüsten. Daher beschäftigt sich diese Arbeit mit HTML5und den Spezifikationen in dessen Umfeld, um die heutige Anwendung einer nochnicht fertigen Spezifikation zu testen und deren Möglichkeiten zu präsentieren.Die Idee und Motivation hinter diesem Arbeitsthema entstand aus dem Fakultäts-projekt spirit@fhs, welches die Möglichkeit der Implementierung einer Studenten-plattform mit HTML5-Mitteln bot. Dies schuf die Chance der Teilhabe an einersichtbaren und positiven Veränderung in der Fakultät. Das Interesse mit einer grö-ßeren Gruppe von Beteiligten an einem Projekt zu arbeiten und so interessanteErfahrungen in allen tangierten Bereichen zu sammeln war, ein entscheidendes Kri-terium.Als großes Ziel stand anfangs die Entwicklung der studentischen Plattform mittelsHTML5 im Mittelpunkt. Da die Integration von verschiedenen HTML5-Features inein solches Portal vorerst keinen Sinn ergab, weitete sich dies schnell auf die Unter-suchung und prototypische Entwicklung einiger Features ohne direkten Bezug zurPlattform aus. Außerdem soll HTML5 abgegrenzt werden, um so den Funktionsum-fang besser erfassen zu können.

1[Bra10, S. 103]2Siehe http://cloud9ide.com/ oder http://ace.ajax.org/

Florian Schuhmann B. Sc. Seite 1 von 87

http://cloud9ide.com/

http://ace.ajax.org/

1. Einleitung Fachhochschule Schmalkalden WS 2011/12

Bevor sich die Arbeit aber diesem Themengebiet nähert, werden im Kapitel 2 dasProjekt spirit@fhs mit seinen Teilprojekten sowie die studentische Plattform Stud-Web vorgestellt. Das darauf folgende Kapitel widmet sich der Entwicklungsgeschich-te von HTML. Es beginnt bei den Ursprüngen des HTML und führt über den ver-suchten Neuanfang mit XHTML hin zu HTML5.Das Kapitel 4 beschäftigt sich mit dem Thema HTML5 und verdeutlicht die Synta-xunterschiede an Quellcodeauszügen. Weiterhin werden neue semantische Elemente,Microdata und die Barrierefreiheit, in diesem Kapitel aufgegriffen, bevor im letztenAbschnitt ein grober Überblick über verschiedene Neuerungen gegeben wird.In den Kapiteln 5 bis 8 stehen spezifische Neuheiten wie die Lokalisierung, Formu-lare und Multimedia-Elemente im Zentrum der Betrachtung. Dabei werden zuerstGrundlagen und Schnittstellen betrachtet. Im Anschluss folgt die Vorstellung derjeweiligen prototypischen Entwicklung.Die Vielfalt an neuen Schnittstellen und Spezifikationen im Umfeld von HTML5 istso gewaltig und schnelllebig, dass eine detaillierte Betrachtung all dieser im Rahmender Arbeit nicht möglich wäre. Dennoch versucht Kapitel 9 einen breiten Überblicküber die vorhandenen Möglichkeiten zu gewähren.Die Entwicklung von mobilen Applikationen wird in Kapitel 10 beleuchtet. Hierzuerfolgt eine Unterteilung und Gegenüberstellung von App-Typen sowie die Betrach-tung von relevanten HTML5-Features für diesen Bereich. Der letzte Abschnitt indiesem Kapitel befasst sich mit der Vorstellung einer auf das spirit@fhs Projektausgerichteten HTML5 Android App.Abschließen wird diese Arbeit mit einem Blick auf kritische Punkte von HTML5sowie einem Ausblick und dem Fazit.Der Quellcode der vorgestellten Prototypen ist in den Respositories Spirit-HTML5-App und HTML5-experiments des GitHub Profils FlorianX zu finden.3 Die direktenWeb-Adressen der betreffenden Dateien werden in den Kapiteln nochmals als Fuß-noten aufgeführt.

3https://github.com/FlorianX


https://github.com/FlorianX

2 Das Projekt spirit@fhsDieses Kapitel soll die Motivation für diese Arbeit und die Zusammenhänge imProjekt spirit@fhs verdeutlichen. Dazu werden das Gesamtprojekt und die vorhan-denen Teilprojekte vorgestellt. Weiterhin soll das Teilprojekt StudWeb, welches einevon mehreren prototypischen Entwicklungen dieser Arbeit darstellt, näher erläutertwerden.

2.1 Was ist spirit@fhs?Das Projekt spirit@fhs wurde im Jahr 2010 an der Fachhochschule Schmalkaldendurch Herrn Prof. Dr. Oliver Braun initiiert. Die Projektbezeichnung ist ein Akro-nym und setzt sich wie folgt zusammen:

SPIRIT = (ServicePoint: Information) => Read IT

Diese Darstellung ist eine Anlehnung an die Programmiersprache Scala1. Der starkeBezug zur Programmierung mit neuen Technologien wird so schon in der Projekt-bezeichnung widergespiegelt. Damit das Ausprobieren und Testen von neuen Tech-nologien nicht einfach ungenutzt verpufft, wird versucht, dass jede Applikation, dieinnerhalb dieses Projektes entsteht, einen Teil zu einem größeren Ganzen beiträgt.Das größere Ganze ist in diesem Sinne eine neue Stundenplanungssoftware. Da dieFakultät Informatik in den letzten Jahren die neuen Studiengänge

• Bachelor Multimedia-Marketing,• Bachelor IT-Servicemanagement und• Master Media Processing and Interactive Services2

ins Leben gerufen hat, ist das alte auf Prolog3-basierende Tool zur Stundenpla-nung an seine Grenzen gestoßen. Dieses Tool ermöglicht die Stundenplanung fürdie zwei bis dahin bestehenden Studiengänge und bot weiterhin die Möglichkeiteneines einfachen Newsportals. Das Projekt spirit@fhs beschäfftigt sich mit der Neuim-plementierung einer Stundenplanungssoftware und setzt dabei auf die Verwendungneuer und vielfältiger Technologien. So wurde bereits bei der Implementierung einerÜbergangslösung für eine neue Informationsplattform für Studierende die Program-miersprache Scala und das Framework Lift4 verwendet. Diese Applikation trägt denProjektnamen „News” und ist auf dem spirit@fhs GitHub Account5 verfügbar.

1Eine objektorientierte und funktionale Programmiersprache. Siehe http://scala-lang.org/2Ab Wintersemester 2011/12 umbenannt in „Angewandte Medieninformatik”.3Eine logische, deklarative Programmiersprache.4Ein Web-Framework für Scala. Siehe http://liftweb.net/5https://github.com/spirit-fhs


http://scala-lang.org/

http://liftweb.net/

https://github.com/spirit-fhs

2. Das Projekt spirit@fhs Fachhochschule Schmalkalden WS 2011/12

2.2 TeilprojektvorstellungSpirit@fhs untergliedert sich derzeit in zwölf Teilprojekte, von denen neun aktivbearbeitet werden. Die Bearbeitung von diesen Teilen erfolgt im Zusammenhangmit Master-, Bachelor-, Praktikums- oder einfachen Seminar-/Projektarbeiten.Die Abbildung 2.1 soll das Ausmaß des spirit@fhs Projekts verdeutlichen und dierelevanten Kommunikationsbeziehungen zwischen den Teilprojekten nachvollziehbarmachen. Sie zeigt die neun aktiven Projekte und deren Beziehungen zueinander.

Database

RESTfulService

Mobile Apps

libSpirit

C EJECT

DVD-RWDVD-RW

USB

SATA

PHONE

MICLINE

-IN

AUDIO

POWERPOWER

CARD

READER

LCD-ProLCD-Pro

SELECT

MENU

- +

NumLockCapsLock

ScrollLock

NumLock7

41

/8

52

*9

63

0

-+ScrollLock

ScrnPrintSysRq

PauseBreak

HomeEnd

PageDownPageUp

Insert

DeleteEnter

End

HomePgUp

PgDnDel.

Ins

F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12

Esc1 2 3 4 5 6 7 8 9 0( )

*&^%$#@!`~

-_ =+ \|

Ctrl

CtrlAlt

A S D F G H J K L

CapsLock

;: '"

Z X C V B N M

Shift

Shift

/?.>

,< Alt Gr

Q W E R T Y U I O P [{ ]}

Tab

EJECT

DVD-RWDVD-RW

USB

SATA

PHONE

MICLINE

-IN

AUDIO

POWERPOWER

CARD

READER

LCD-ProLCD-Pro

SELECT

MENU

- +

NumLockCapsLock

ScrollLock

NumLock7

41

/8

52

*9

63

0

-+ScrollLock

ScrnPrintSysRq

PauseBreak

HomeEnd

PageDownPageUp

Insert

DeleteEnter

End

HomePgUp

PgDnDel.

Ins

F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12

Esc1 2 3 4 5 6 7 8 9 0( )

*&^%$#@!`~

-_ =+ \|

Ctrl

CtrlAlt

A S D F G H J K L

CapsLock

;: '"

Z X C V B N M

Shift

Shift

/?.>

,< Alt Gr


Tab

EJECT

DVD-RWDVD-RW

USB

SATA

PHONE

MICLINE

-IN

AUDIO

POWERPOWER

CARD

READER

LCD-ProLCD-Pro

SELECT

MENU

- +

NumLockCapsLock

ScrollLock

NumLock7

41

/8

52

*9

63

0

-+ScrollLock

ScrnPrintSysRq

PauseBreak

HomeEnd

PageDownPageUp

Insert

DeleteEnter

End

HomePgUp

PgDnDel.

Ins

F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12

Esc1 2 3 4 5 6 7 8 9 0( )

*&^%$#@!`~

-_ =+ \|

Ctrl

CtrlAlt

A S D F G H J K L

CapsLock

;: '"

Z X C V B N M

Shift

Shift

/?.>

,< Alt Gr


Tab

MIgrate

StudWeb

alte Stundenplanung

Prolog

© Florian Schuhmann

EmployeeWeb PlanningWeb

Abbildung 2.1: Übersicht über die aktuellen spirit@fhs Teilprojekte (Quelle: EigeneDarstellung)

Den Mittelpunkt bildet derzeit das „Database” Projekt, welches einen RESTfulService bereitstellt und somit die Datenbank kapselt. Dieses Vorgehen ermöglichtes, die genutzte Datenbank auszutauschen, ohne dass in den anderen ApplikationenAnpassungen von Nöten sind. Die aktuelle Version setzt auf eine PostgreSQL Da-tenbank, die durch EclipseLink6 gekapselt wird, und auf einen RESTful Service, dermit Scala/Lift implementiert wurde.Weiterhin entsteht eine Client-Bibliothek „libSpirit” in C. Diese soll die REST-Anfragen so kapseln, dass es in den Programmierübungen auf einfache Weise mög-lich ist, Anfragen an die spirit@fhs-Datenbank zu stellen. Dies soll die Lehre aufpraktische und interaktive Art und Weise unterstützen.7

6EclipseLink ist ein Java Persistenz-Framework. Es wird hier als objekt-relationaler Mapper ver-wendet. Siehe http://www.eclipse.org/eclipselink/

7Quellcode: https://github.com/spirit-fhs/libspirit


http://www.eclipse.org/eclipselink/

https://github.com/spirit-fhs/libspirit


Das Projekt „PlanningWeb” wird mit Scala/Lift implementiert. Es dient zur Ver-waltung und Pflege von Daten sowie Informationen, die für die Stundenplanungbenötigt werden. Weiterhin ist es der erste Schritt, um die derzeit manuell durchge-führte Stundenplanung zu unterstützen. Die in dieser Applikation erzeugten Datenliegen aus Datenschutz- und Sicherheitsgründen in einer eigenen und nicht in derglobalen Datenbank-Applikation.8

Das Haskell9 Projekt „Migrate” bildet die Schnittstelle zwischen alter und neuerStundenplanung. Es soll die Stundenplanungsdaten vom alten System beziehen unddiese dann aufbereitet in das neue System einspielen. Dieses Projekt stellt zusätzlichdie Schnittstelle zwischen dem „PlanningWeb” und der „Database” dar. Die in derPlanung erzeugten Daten sind komplexer als jene, die in der globalen Datenbankbenötigt werden. Daher muss auch hier eine Aufbereitung erfolgen.10

Das Backend für Dozentinnen und Dozenten sowie für wissenschaftliche Mitarbeiterwird im Projekt „EmployeeWeb”mit Scala/Lift erstellt. Es bietet die Möglichkeit,dass Informationen, die die Lehre betreffen, in Form von News oder Terminen inspirit@fhs eingestellt werden können. Ein weiteres Feature ist die umfrageartigeVergabe von Referatsthemen.11

Das spirit@fhs Projekt springt auf den derzeitigen Hype um die Mobile Apps auf undbietet für die Betriebssysteme Android, iOS und Windows Phone 7 jeweils ein App-Projekt an. Wie auch in den anderen Projekten wird versucht auf neue Technologienund Sprachen zu setzen. So wird die App für das Google Betriebssystem mit Hilfevon Scala und dem Android SDK erstellt. Die Windows Phone 7 App basiert aufSilverlight12, XAML13, C#14 und F#15 sowie Linq16. Das iPhone erhält eine Appdie mittels HTML5, CSS3, PHP und jQuery17 erstellt wird.„StudWeb” stellt das Web-Frontend für Studenten dar. Dabei werden HTML5clientseitig und das Zend Framework18 auf der Serverseite genutzt. Dieses Projektwird im folgenden Abschnitt 2.3 näher erläutert.19

Das bereits erwähnte Projekt „News” entstand aus einer Projektarbeit und istaufgrund der Inaktivität nicht auf der Grafik zu finden. Es findet derzeit nur eineBearbeitung in Fehlersituationen statt.20

8Quellcode: https://github.com/spirit-fhs/planningweb9Eine rein funktionale Programmiersprache. Siehe http://haskell.org/

10Quellcode: https://github.com/spirit-fhs/timetable2db11Quellcode: https://github.com/spirit-fhs/employeeweb12Ist ein Framwork für das Schreiben und Ausführen von Rich Internet Applications. Siehe http:

//www.silverlight.net/13XAML ist eine von Microsoft entwickelte Beschreibungssprache für Oberflächen und Workflows.

Siehe http://msdn.microsoft.com/de-de/library/ms752059.aspx14C# ist eine objektorientierte Programmiersprache von Microsoft für das .NET-Framework. Siehe

http://msdn.microsoft.com/de-de/vcsharp/default.aspx15F# ist das funktionale Pendant zu C#. Siehe http://msdn.microsoft.com/de-de/fsharp/16Linq ist Teil des .NET-Frameworks und dient zur Abfrage von unterschiedlichen Datenquellen.

Siehe http://msdn.microsoft.com/de-de/netframework/aa90459417Ist ein umfangreiches JavaScript Framework. Siehe http://jquery.com/18Ist ein PHP-Framework. Siehe http://framework.zend.com/19Quellcode: https://github.com/spirit-fhs/studweb20Quellcode: https://github.com/spirit-fhs/news


https://github.com/spirit-fhs/planningweb

https://github.com/spirit-fhs/timetable2db

https://github.com/spirit-fhs/employeeweb

http://www.silverlight.net/

http://www.silverlight.net/

http://msdn.microsoft.com/de-de/library/ms752059.aspx

http://msdn.microsoft.com/de-de/vcsharp/default.aspx

http://msdn.microsoft.com/de-de/fsharp/

http://msdn.microsoft.com/de-de/netframework/aa904594

http://jquery.com/

http://framework.zend.com/

https://github.com/spirit-fhs/studweb

https://github.com/spirit-fhs/news


Die eigentliche Stundenplanung wird vom „Core” durchgeführt. Dieses Projekt wur-de im Rahmen einer Praktikumsarbeit als Prototyp in Haskell umgesetzt.21 Eineweitere Arbeit, die sich mit diesem Themengebiet beschäftigt, befasst sich mit derErstellung einer Domain Specific Language für die Abbildung von Stundenplandatenund deren Beziehungen in Haskell. Es finden zum jetzigen Zeitpunkt keine weiterenArbeiten an diesem Komplex statt, weshalb auch dieses Projekt nicht auf der Grafikzu finden ist.Mit Scala und dem Framework Akka22 versucht das Projekt „DistributedCalc”die sehr rechenintensive Erstellung der Stundenpläne auf verschiedene Ressourcen zuverteilen. Als Ressourcen könnten die PC-Pools der FH Schmalkalden, der AmazonWeb Service oder gar Freiwillige, wie bei SETI@home, dienen. Dieses Projekt stecktnoch in den Startlöchern und wird daher nicht in der Abbildung aufgeführt.

2.3 StudWebDas Projekt „StudWeb” soll als reines Studenten-Portal genutzt werden. Daher istder Login nur für Studenten möglich. Es bietet derzeit Funktionen zum Abrufenvon aktuellen Nachrichten und den dazugehörigen Kommentaren. Weiterhin könneneigene Kommentare zu den News verfasst und auch gelöscht werden. Die Abbildung2.2 zeigt die Single-Ansicht einer News, welche mit Kommentaren bestückt wurde.Das Portal soll die Studenten durch ein junges und frisches Design ansprechen.

Abbildung 2.2: Screenshot der Single-Ansicht einer News mit Kommentaren

Das Layout des Portals wird mit Hilfe von eingebetteten Hintergrundgrafiken undCascading Style Sheets erstellt. Des Weiteren setzt die Implementierung auf dasJavaScript Framework jQuery und den Einsatz des HTML5 Living Standards. Beider Darstellung des Layouts und der News wird hauptsächlich auf die Verwendungneuer Tags, wie <article> oder <nav> zurückgegriffen.

21Quellcode: https://github.com/spirit-fhs/core22Akka ist ein Scala-Framework und bietet bspw. Funktionalitäten für verteilte Systeme an. Siehe

http://akka.io/


https://github.com/spirit-fhs/core

http://akka.io/


Ein weiteres Detail, welches prototypisch entwickelt wurde, ist der Stundenplan.Dieser ist nicht mehr statisch wie es der Vergleich in Abbildung 2.3 zeigt, sonderndynamisch und wird für die jeweiligen Wochen erstellt. Das heißt, dass Ausfälleoder Verschiebungen im Stundenplan markiert und weitere Details angezeigt werdenkönnten.

(a) alter Stundenplan (b) neuer Stundenplan

Abbildung 2.3: Vergleich alter statischer und neuer dynamischer Stundenplan

Die Implementierung des Stundenplans basiert auf dem jQuery Kalender Pluginfullcalendar.23 Dieser wurde in der Darstellung der einzelnen Termine für die Ver-wendung im StudWeb angepasst. Dies betrifft die Anzeige von zusätzlichen Feldern,wie „Ort”, „Titel” und „Lehrbeauftragter”. Die Termine können entsprechend ihresTyps oder aufgrund ihres Status eingefärbt werden. So sind Übungen bspw. grün,Vorlesungen blau, ausgefallene Vorlesungen grau und verschobene Termine gelb.Weitere Details oder Informationen zu den Veranstaltungen werden beim Überfah-ren eines Termins mit der Maus in einem Tooltip angezeigt. Der Kalender erhältseine Daten über eine JSON-Schnittstelle.Die serverseitige StudWeb-Implementierung basiert auf PHP und dem ZEND-Frame-work. Durch die Nutzung dieses Frameworks können ein modularer Projektaufbauund die Verwendung des Modell-View-Controller-Konzepts realisiert werden. Somitbesteht die Möglichkeit, dass spätere Ideen oder neue Anforderungen als eigeneModule in das System integriert werden könnten. Als weitere Module und Funktio-nalitäten könnten in Zukunft eine Raumreservierung, ein Netzwerkkalender oder dieVergabe von Seminarthemen umgesetzt werden. Da sich diese Arbeit mit dem The-ma HTML5 beschäftigt, wird die serverseitige Implementierung mithilfe des ZEND-Frameworks im Folgenden nicht weiter erörtert.

23Der angepasste Quellcode ist hier zu finden: https://github.com/FlorianX/fullcalendar


https://github.com/FlorianX/fullcalendar

3 HTMLDas vorhergehende Kapitel hat das Projekt spirit@fhs und dessen Teile vorgestellt.Dabei wurde ein Überblick über die gesamte Projektstruktur und die verwendetenTechniken gegeben. Außerdem wurde das Teilprojekt StudWeb näher erläutert undin diesem Zusammenhang auch der Begriff HTML5 genannt. Um diesen besser ver-stehen zu können, wird in diesem Kapitel der Weg von HTML über XHTML zuHTML5 dargelegt.

3.1 Die Entwicklungsgeschichte von HTMLDie Entstehung von HTML ist auf ein Projekt von Tim Berners-Lee im Jahre 1989zurückzuführen. Er entwarf am CERN 1 bei Genf das World Wide Web, welchesdie Hypertext Markup Language als Text-Auszeichnungssprache beinhaltete. TimBerners-Lee schrieb in diesem Jahr seine Idee nieder und legte somit den Grundsteinfür das heute bekannte HTML.2 Die hier enstandene erste Version von HTML basiertauf der Standard Generalized Markup Language (kurz SGML).Die Metasprache SGML ist ein ISO-Standard und dient zur Erstellung von Aus-zeichnungssprachen. Sie legt Regelsätze für den Aufbau eines Dokuments fest, dazuzählen bspw. erlaubte Tag-Konstruktionen. Da diese Sprache sehr komplex ist, setz-ten die Browserhersteller nicht auf komplexe SGML-Parser, sondern entwickelteneigene HTML-Parser. Dies wird auch am folgenden Listing 3.1 deutlich. Es han-delt sich dabei um gültiges SGML, welches aber selbst die heutigen Browser nichtinterpretieren können:

Listing 3.1: Beispiel eines gültigen SGML-Dokuments.<!DOCTYPE html PUBLIC" -//W3C//DTD HTML 4.01// EN">

<><title/SGML -Dokument/

<p/erster und/<p<i>zweiter Absatz </i</p></>

1Die Europäische Organisation für Kernforschung.2Vgl. [BL89]


3. HTML Fachhochschule Schmalkalden WS 2011/12

Im Gegensatz dazu hier das für Browser verständliche HTML:

Listing 3.2: Das HTML-Pendant.<!DOCTYPE html PUBLIC " -//W3C//DTD HTML 4.01// EN"><html><head><title>HTML Dokument </title>

</head><body><p>erster und</p><p><i>zweiter Absatz </i></p>

</body></html>

Beide Versionen sind valides HTML und werden vom Validator3 des W3C4 als solchesgekennzeichnet. Hier zeigt sich bereits, dass sich das als Standard behauptet, wasdie Browserhersteller implementieren.HTML ist also als SGML-Anwendung entworfen und dann als solche in den folgendenJahren weiterentwickelt worden.So wurde im Jahr 1992 die nur textorientierte Urversion von HTML veröffentlicht.5Diese verbesserte Version wurde am Anfang des darauf folgenden Jahres überarbeitetund erhielt dabei neue Attribute bspw. zum Einbinden von Grafiken und Bildern.Die Entwicklung von HTML ging im selben Jahr noch weiter. Es sollte grundlegendüberarbeitet und erweitert werden. Dies geschah durch David Raggett, welcher esals „HTML+” veröffentlichen wollte, wozu es aber nie kam.6

Mit dem RFC18667 wurde im Jahr 1995 erstmals eine Versionsnummer in die Be-zeichnung integriert. Weiterhin enthielt diese Spezifikation die ersten Formularele-mente.Die Version 3.0 hinkte den Entwicklungen im Internet und auf dem Browsermarkthinterher und war vor ihrer geplanten Veröffentlichung schon veraltet. Daher erfolgteAnfang 1997 die Veröffentlichung der Version 3.2 von HTML, welche verschiedeneNeuerungen und Elemente wie Tabellen, Applets oder die Textflusssteuerung mitsich brachte.8

Im Dezember 1997 wurde bereits die Version 4.0 von HTML in den Recommendation-Status erhoben. Sie beinhaltete eine strikte Trennung von Inhalt und Darstellung,dies geschah durch die Einführung von Stylesheets. Weiterhin wurden Skripte undFrames sowie die HTML-Varianten Strict, Frameset und Transitional eingeführt.9

Im Jahr 1999 erschien die bisher letzte und als Standard geltende Version HTML 4.01.3http://validator.w3.org/4W3C steht für World Wide Web Consortium, welches das Standardisierungsgremium des WorldWide Webs darstellt und im Jahr 1994 von Tim Berners-Lee in den USA gegründet wurde.

5Siehe [BL92]6Vgl. [Rag93]7http://tools.ietf.org/html/rfc18668http://www.w3.org/TR/REC-html32-199701149Vgl. [CAM97]


http://validator.w3.org/

http://tools.ietf.org/html/rfc1866

http://www.w3.org/TR/REC-html32-19970114


Diese enthält verschiedene kleinere Anpassungen, Korrekturen und Optimierun-gen.10

Wie diese Entwicklungsgeschichte zeigt, sind Webstandards sehr schnelllebig undmanchmal bei der Veröffentlichung schon veraltet. Trotz der vielen Versionen undAnpassungen von HTML bleibt es eine Auszeichnungssprache, die zu einer Zeit ent-standen ist, zu der noch keiner die heutigen Wünsche, Möglichkeiten und Ausmaßedes World Wide Webs vor Augen hatte. Da die o. g. Standards meist nur der Praxisund damit den Browserherstellern hinterherliefen, sehnte sich das W3C nach einemNeuanfang: XHTML.

3.2 Die Idee des Neuanfangs mit XHTMLDie Idee der Extensible Hypertext Markup Language (kurz XHTML) kam im Jahr2000 auf. Mit ihr wollte das W3C einen auf XML-basierenden Neuanfang starten,da sie für die Erweiterung von HTML 4.0 keine Zukunft sahen.

„In discussions, it was agreed that further extending HTML 4.0 would bedifficult, as would converting 4.0 to be an XML application. The proposedway to break free of these restrictions is to make a fresh start with thenext generation of HTML based upon a suite of XML tag-sets.”11

Der Weg aus der komplexen SGML Vergangenheit heraus sollte also über die Exten-sible Markup Language (kurz XML) führen. XML ist genau wie SGML eine univer-selle Auszeichnungssprache. Sie basiert aber auf einfacheren Syntaxregeln bei denenes keine Ausnahmen gibt und besticht durch eine simple aber rigorose Fehlerbehand-lung.Die Version 1.0 von XHTML12 war als Übergangslösung geplant. Sie formulierteHTML 4.01 so um, dass die SGML-Basis durch XML ausgetauscht wurde. DesWeiteren wurde begonnen eine strikte Trennung von Inhalt und Formatierung zudefinieren. In dieser ersten Version wurden aber zu Gunsten der Kompatibilität zuHTML noch kleinere Formatierungen im Code erlaubt.Ein Jahr später erschien bereits XHTML 1.113, welches die o. g. Trennung nunstrikter durchsetzte. Außerdem wurde eine Modularisierung der Elemente eingeführtund nicht mehr benötigte Elemente, wie die HTML-Varianten bis auf Strict, ersatzlosgestrichen.Die XML-Revolution sollte mit XHTML 214 zur Vollendung kommen. Diese Versionsollte viele Neuerungen und Befehle mit sich bringen, die vollkommen neu definiertwurden und somit auch nicht mehr auf HTML 4.01 basierten. Den Weg weg vonHTML in Richtung XML wollten die Browserhersteller aber nicht gehen. Dahergründeten Mozilla, Apple und Opera im Jahr 2004 die Web Hypertext ApplicationTechnology Working Group (kurz WHATWG). Mit ihr sollen bestehende Technolo-

10http://www.w3.org/TR/html401/11[RP98]12http://www.w3.org/TR/xhtml1/13http://www.w3.org/TR/xhtml11/14http://www.w3.org/TR/xhtml2/


http://www.w3.org/TR/html401/

http://www.w3.org/TR/xhtml1/




gien unter dem Label Web Applications 1.0 (später HTML5) zu neuen Technologienweiterentwickelt werden. Im Jahr 2006 gab es die ersten Interessensbekundungendes W3C’s an einer Beteiligung der Entwicklung von HTML5. Darauf folgte im Jahr2007 die Gründung einer Arbeitsgruppe und die gemeinsame Arbeit am StandardHTML5. Im Juli 2009 wurde dann die Auflösung der XHTML 2-Arbeitsgruppe fürdas Ende des Jahres bekannt gegeben.15 Durch diesen Schritt steht nun der HTML5-Entwurf im Zentrum der Aufmerksamkeit.

3.3 Das neue Zugpferd: HTML5Bereits im Jahr 2006 hat Tim Berners-Lee in einem Blog-Eintrag aufgezeigt, dassder gewünschte Umschwung von HTML zu XHTML nicht funktioniert hat.

„It is necessary to evolve HTML incrementally. The attempt to get theworld to switch to XML, including quotes around attribute values andslashes in empty tags and namespaces all at once didn’t work.”16

Zu diesem Zeitunkt geht die WHATWG bereits den Weg der inkrementellen Weiter-entwicklung von HTML, die Berners-Lee als wichtig bezeichnet. HTML5 ist somitnur eine neuere Version von HTML 4.01, die aber als eigene Sprache und nicht mehrauf der Basis von SGML definiert wird. Die Standardisierung und Weiterentwick-lung von HTML5 ist aufgrund der Vielzahl der vorhandenen Spezifikationen unddem Vorhandensein von zwei Standardisierungsgruppen sehr undurchsichtig.Die WHATWG besaß vor der Zusammenarbeit mit dem W3C nur eine umfassen-de Spezifikation, welche HTML und weitere API’s17 spezifizierte. Diese wurde imZuge der Zusammenarbeit in „HTML5” umbenannt. Aufgrund des Standardisie-rungsprozesses des W3C’s, welcher auf eine HTML- und nicht auf eine umfassendeSpezifikation ausgerichtet ist, entfielen diverse Spezifikationsinhalte. Dadurch ent-schloss sich die WHATWG erneut eine separate Spezifikation bereitzustellen, welchewieder als „Web Applications 1.0” bezeichnet wurde.Die Verwirrung um den „richtigen” Standard wird noch verschärft, da seit Janu-ar 2011 beide Arbeitsgruppen unterschiedliche Entwicklungsmodelle nutzen. DieHTML Working Group des W3C arbeitet mit einem versionsgetriebenen Ansatzauf einen fertigen Stand des HTML5-Standards zu. Dies beinhaltet aber auch dieEinschränkung, dass keine neuen Features mehr hinzugefügt werden können.Dieser Sachverhalt hat die WHATWG dazu gebracht, auf ein versionsloses Ent-wicklungsmodell umzusteigen. Dadurch wurde ein „Living Standard” geboren. Dasheißt, dass die von der WHATWG erstellte Spezifikation ständigen Erweiterungen,Änderungen und Korrekturen unterliegt. Im Zusammenhang mit der Änderung desVorgehens wurde auch der Name der WHATWG Spezifikation von „HTML5” zu„HTML” geändert.18

15Vgl. [W3C09]16[BL06]17API steht für Application Programming Interface.18Siehe [Hic11b]



Die veröffentlichten Spezifikationen beider Arbeitsgruppen werden aus einem einzi-gen Dokument19 generiert, welches von Ian Hickson20 gepflegt wird. Die Trennungin jeweils eigene Spezifikationen soll den Standardisierungsprozess unterstützen undbeschleunigen.Am 4. Oktober 2011 wurden die beiden Spezifikationen der WHATWG durch IanHickson wieder zu einer einzigen zusammengefügt. Dies hat zur Folge, dass die zu-sammenfassende Spezifikation „Web Applications 1.0” in „HTML” umbenannt wur-de und die Spezifikation „HTML”, welche ein Subset der „Web Applications 1.0”Spezifikation darstellte, nicht mehr existiert.21

Im Folgenden werden die einzelnen Spezifikationsversionen kurz aufgeführt und er-läutert:

• HTMLDies ist die Zusammenfassung verschiedener Spezifikationen der WHATWGund umfasst somit alle HTML-spezifischen Inhalte sowie weitere API’s. DieserEntwurf wird als „Living Standard” bezeichnet und enthält neuere Featuresund Definitionen die in der Entstehung sind und noch nicht als „stable” be-zeichnet werden können.http://www.whatwg.org/html

• HTML5 - W3CDiese Spezifikation entspricht der o. g. Momentaufnahme und ist eine Unter-menge des WHATWG HTML-Standards. Es werden nur noch Korrekturenund keine Erweiterungen an ihr durchgeführt. Sie ist nur auf der Seite desW3C’s zu finden.http://www.w3.org/TR/html5/

• HTML5 for DevelopersDiese Version ist speziell für Web-Entwickler gedacht. Die Informationen fürBrowserhersteller wurden bei dieser Version entfernt.http://developers.whatwg.org/

Wie bei der Entwicklerversion von HTML erwähnt, enthält der HTML-Entwurfsehr viele Informationen, die nur für die Browserhersteller wichtig sind. Dabei han-delt es sich um Anforderungen, wie verschiedene Elemente interpretiert werden undum solche, die die Rückwärtskompatibilität sicherstellen sollen. In der Spezifikationwird daher klar zwischen den Anforderungen für Entwickler und denen für Brow-serhersteller unterschieden. Die HTML-Spezifikation beschreibt also nicht nur dieSprache, sondern auch die Verarbeitung im Browser. Damit die Unterschiede in denverschiedenen Browsern bald der Vergangenheit angehören, soll zusätzlich ein ein-heitlicher HTML-Parser definiert werden. Eine Test-Suite soll sicherstellen, dass dieSpezifikation und damit die beschriebenen Features in den Browsern vollständig und19Siehe http://www.whatwg.org/specs/web-apps/current-work/source20Er ist der Gründer der WHATWG und Angestellter der Google Inc.21Vgl. [Kes11b], http://twitter.com/WHATWG/status/121268735381221376 und http://

html5.org/r/6619


http://www.whatwg.org/html


http://developers.whatwg.org/

http://www.whatwg.org/specs/web-apps/current-work/source

http://twitter.com/WHATWG/status/121268735381221376

http://html5.org/r/6619

http://html5.org/r/6619


richtig implementiert wurden. Damit wird gewährleistet, dass die Spezifikation zumZeitpunkt der Fertigstellung sofort genutzt werden kann. Der Standard wird alsozusammen mit der Browserimplementation erstellt und nicht wie bisher zuerst derStandard und danach die flächendeckende Unterstützung im Browser.Der Begriff HTML5 kann also unterschiedlich aufgefasst werden: Als Momentauf-nahme, wie beim Entwurf des W3C’s, als lebender und sich weiterentwickelnderStandard oder als eine Zusammenfassung verschiedenster Technologien, Standardsund damit API’s. Die Abbildung 3.1 zeigt eine Zusammenfassung von neuen Stan-dards und Technologien im Bereich des Webs, die in die Spezifikationslandschaft desHTML5 eingeordnet werden.

Abbildung 3.1: Übersicht über das HTML5-Universum (Quelle: [Krö11b, S. 34])

Die kleinen Kreise stehen für die einzelnen, eigenständigen Spezifikationen. Der inne-re blaue Kreis stellt die HTML5-Spezifikation des W3C’s dar. Sie ist eine Teilmengeder WHATWG Spezifikation und wird daher vom grünen Kreis umschlossen. Dieblauen Spezifikationen werden vom W3C, die grünen von der WHATWG und dieorangenen von anderen Organisationen wie der IETF22 oder der Khronos Group23

22Internet Engineering Task Force, befasst sich mit der Weiterentwicklung und Standardisierungdes Internets (bspw. WebSockets). Siehe http://www.ietf.org/

23Ist ein Industriekonsortium für die Erstellung und Verwaltung von Multimedia-Standards (bspw.WebGL). Siehe http://www.khronos.org/


http://www.ietf.org/

http://www.khronos.org/


erstellt. Eine Besonderheit bilden die Spezifikationen innerhalb des grünen Kreises,welche von der WHATWG und demW3C publiziert werden. Alles was sich innerhalbdes gelben Kreises befindet wird bereits im Zusammenhang mit HTML5 genannt,wird aber teilweise nicht in den Spezifikationen aufgeführt.Wie diese Abbildung zeigt, gibt es nicht nur neue Elemente, schärfere Definitionenund Bewegung innerhalb der HTML-Spezifikation, sondern auch eine Vielzahl neu-er außen liegender API’s und Ideen. Da die HTML5-Spezifikation des W3C’s neueFeatures, wie das Canvas, nicht enthält und die der WHATWG nur noch ohne Versi-onsnummer vorhanden ist, wird in dieser Arbeit der leicht angepasste und gedehnteBegriff von HTML5 verwendet, welcher in der Abbildung als gelber Kreis dargestelltist.Im weiteren Verlauf der Arbeit werden verschiedene neue Elemente, Funktionen undAPI’s getestet. Manche davon gehören zum Entwurf des W3C’s oder sind im HTML-Entwurf der WHATWG enthalten. Dabei werden API’s, wie das Geolocation API,nicht ausgegrenzt, nur weil sie zu keiner der genannten Spezifikationen gehören. Siegehören dennoch zur Zukunft des Webs und damit wohl auch zum sich entwickelndenSchlagwort „HTML5”.


4 HTML5 im ÜberblickDas letzte Kapitel zeigte die Entwicklung vom Ur-HTML über XHTML zum heu-tigen HTML5. Dabei wurden verschiedene Spezifikationen und ihre Hintergründevorgestellt. In diesem Kapitel wird mit der Beleuchtung der technischen Seite vonHTML5 begonnen. Dazu werden unter anderem die Syntaxdefinition, semantischesHTML5 und die Unterstützung der Barrierefreiheit vorgestellt.

4.1 SyntaxWie in Kapitel 3.3 erläutert, ist HTML5 nur eine Weiterentwicklung von HTML 4.01.Daher ist die spezifizierte HTML5-Syntax kompatibel zu HTML4 und XHTML1.Wichtig hierbei ist aber, dass spezifische SGML-Eigenheiten in HTML5 nicht mehrunterstützt werden, da sie einerseits in den meisten Browser nie umgesetzt wurdenund sich andererseits HTML5 von SGML losgesagt hat. Dadurch das HTML5 nunkeine SGML-basierte Anwendung mehr ist, entfällt auch der bisher nötige Verweisauf eine DTD1 im Doctype. Der Doctype wird nur für die Unterscheidung der Bear-beitungsmodi im Browser benötigt. Hier gibt es bereits die erste Besonderheit. DerDoctype ist in HTML5 nicht nur kürzer, sondern auch case-insensitiv. Das heißt,dass die folgenden Doctypes gültig sind und damit den Browser in den StandardsMode versetzen:

Listing 4.1: Gültige HTML5 Doctypes<!DOCTYPE html><!DOCTYPE HTML><!doctype html><!dOctYpe hTMl>

Im Vergleich dazu ein fest vorgeschriebener HTML 4.01 Doctype:

Listing 4.2: HTML 4.01 Doctype<!DOCTYPE HTML PUBLIC" -//W3C//DTD HTML 4.01 Transitional //EN""http ://www.w3.org/TR/html4/loose.dtd">

Die wohl bedeutendere Eigenschaft von HTML5 ist, dass es in HTML- oder XML(XHTML)-Syntax geschrieben werden kann.2 Im letzteren Fall wäre der Doctype

1Document Type Definition, ist die Zusammenfassung von Deklarationsregeln für Dokumenteeines bestimmten Typs.

2Wenn ein HTML5-Dokument nach XML-Regeln erstellt wird, können HTML- und XML-Parserverwendet werden. Dies wird auch als „polyglot markup” bezeichnet. Siehe [Gra11]


4. HTML5 im Überblick Fachhochschule Schmalkalden WS 2011/12

optional, aber wenn er genutzt wird, dann ist nur die erste Variante des Listings 4.1erlaubt.Für die Verwendung von echtem XHTML5 gelten die strengen XML-Regeln unddamit auch die rigorose Fehlerbehandlung. Außerdem muss das erstellte Dokumentwohlgeformt sein, so muss für jedes Start- auch ein End-Tag vorhanden sein. Fallsim Dokument ein noch so kleiner Fehler auftritt, kann es vorkommen, dass dasgesamte Dokument nicht dargestellt wird und nur ein XML-Fehler erscheint. DieVerwendung des XHTML-Stils zum Schreiben eines Dokuments reicht aber nichtaus, damit dieses auch als solches behandelt wird. Hierzu ist es nötig, dass derContent-Type im HTTP-Header einem der folgenden entspricht.

Listing 4.3: Mögliche Content-Typesapplication/xhtml+xmlapplication/xmltext/xml

Erst dann wird das Dokument vom XML-Parser geparst. Dies war bisher bei XHTML1nicht der Fall. XHTML1 wurde und wird zwar nach präzisen XML-Regel geschrie-ben, aber vom Browser als normales HTML geparst. Durch die neue Definition, dassXHTML5 echtes XHTML und eine XML-Anwendung ist, wird bei der Verwendungdes richtigen MIME-Typs der XML-Parser des Browsers genutzt. Damit finden diestrikten XML-Regeln mit ihrer Fehlerbehandlung Anwendung.Ein gültiges XHTML5-Dokument könnte also wie folgt aussehen:

Listing 4.4: Ein gültiges XHTML5-Dokument<?xml version="1.0" encoding="UTF -8"?><html xmlns="http :// www.w3.org /1999/ xhtml"><head><title>Echtes XHTML5 </title>

</head><body><p>Ein Absatz im XHTML5 -Dokument!</p>

</body></html>

Das XHTML5 nun echtes XHTML ist und es bei der Verwendung des richtigenMIME-Typs nicht mehr mit dem HTML-Parser geparst wird, heißt aber nicht,dass der XHTML-Stil nicht zum Schreiben eines normalen - mit dem MIME-Typtext/html ausgelieferten - HTML5-Dokumentes verwendet werden kann. Sondernnur, dass der MIME-Typ für die Unterscheidung zwischen HTML- und XML-Parserverantwortlich ist.Die Nutzung von XHTML5 steht nicht nur für kritische Nebeneffekte3, sondern fürstrikte und einheitliche Regeln und damit aufgeräumten Code.

3Dies bedeutet, dass möglicherweise eine gesamte Webseite nicht dargestellt wird, weil irgendwoim Dokument ein minimaler Fehler vorhanden ist.



Warum wird dies hier noch einmal so explizit angeführt? Einfach aus dem Grund,da ein HTML5-Dokument auch in einem eher lockeren HTML-Stil verfasst werdenkann. Im Gegenteil zum XHTML können (müssen aber nicht) bei der HTML-Syntaxbspw. verschiedende Tags oder die Anführungszeichen bei Attributwerten einfachweggelassen werden.4 Hierfür sind zwar einige Regeln5 zu beachten und der Quell-code kann deutlich verkürzt werden, dadurch wird er aber sehr unübersichtlich. Einentsprechendes HTML5-Dokument, welches Tags unterschlägt, aber trotzdem gülti-ges HTML5 ist, könnte wie folgt aussehen:

Listing 4.5: Ein gültiges HTML5-Dokument<!doctype html><meta charset="UTF -8"><tiTlE>Ein HTML5 Beispiel </TITLE><P>Der erste Absatz im Dokument<p iD=example >Ein weiterer Absatz

Die fehlenden Tags werden dann vom HTML-Parser hinzugefügt, damit ein korrektesDocument Object Model6 entsteht. Das Listing 4.5 zeigt deutlich die Flexibilität vonHTML5 gegenüber dem strikten XHTML5. Beim Auslassen von Tags leidet aberdie Lesbarkeit und größere Dokumente werden schnell unübersichtlich. Die Lösunghierfür wäre die Anwendung der strengen XHTML-Regeln auf ein normales HTML5-Dokument, welches auch als solches mit dem MIME-Typ text/html ausgeliefertwird.Dabei gelten die drei wichtigsten Regeln:

• alle Tags öffnen und schließen• konsequente Kleinschreibung• Attributwerte ausschreiben und in Anführungszeichen7

Dadurch entsteht ein sauber strukturiertes und für Jedermann lesbares Dokument,welches gültiges HTML5 ist und leicht in echtes XHTML5 umgewandelt werdenkann. Das obige Beispiel im XHTML-Schreibstil würde wie folgt aussehen:

Listing 4.6: Ein gültiges HTML5-Dokument im XHTML-Stil<!DOCTYPE html><html><head><meta charset="utf -8" /><title>Ein HTML5 Beispiel </title>

</head><body><p>Der erste Absatz im Dokument </p>

4Eine Auflistung von optionalen Tags ist im Anhang A zu finden.5Siehe [Hic11a, 13.1.2.4 Optional tags]6Kurz DOM, ist eine plattform- und sprachunabhängige Schnittstelle für die Bearbeitung vonHTML- und XML-Dokumenten.

7Selbst boolsche Attribute, wie checked als checked=”checked” ausschreiben.



<p id="example">Ein weiterer Absatz </p><input type="checkbox" name="XHTML_Checkbox"

checked="checked" /></body>

</html>

HTML5 bietet also jegliche Freiheiten in Sachen Schreibstil, ob es als einfachesHTML5-Dokument, als HTML5-Dokument in XHTML-Stil oder als echtes XHTML5abgefasst wird, es bleibt gültiges (X)HTML5. Die Unterschiede liegen also nur in derLesbarkeit und dem im Browser verwendeten Parser, welcher die Tags in allen Fällengleich interpretieren sollte. Kleinere technische (und teilweise versionsunabhängige)Besonderheiten8 zwischen HTML5 und XHTML5 bestehen in den folgenden Eigen-schaften:

• Doctype- in HTML5 benötigt, um den Parser in den Standards Mode zu versetzen- in XHTML5 optional, muss bei Verwendung <!DOCTYPE html> entsprechen

• <noscript>- in HTML5 nur angezeigt, wenn JavaScript deaktiviert ist- in XHTML5 keine JavaScript-Abhängigkeit

• XML-Namensräume- in HTML5 ignoriert, da der Namensraum von Elementen wie <svg> oder<math> beim Parsen impliziert wird- müssen in XHTML5 explizit angegeben werden

• document.write() und document.writeln()- können in HTML5 genutzt werden- funktionieren in XHTML5 nicht

• Zeichensatz- in HTML5 über HTTP-Header, Byte Order Mark oder den Meta-Tag9

- in XHTML5 über die XML-Deklaration10 oder den HTTP-HeaderDer letzte wichtige Unterschied ist die bereits angesprochene Fehlerbehandlung vonXHTML, welche beim kleinsten Fehler, bspw. einem fehlenden Anführungszeichenoder einem Großbuchstaben an der falschen Stelle, nur eine Fehlermeldung ausgibtund die Webseite nicht mehr darstellt. Auch bei der Verwendung der HTML-Syntaxwäre ein fehlendes Anführungszeichen ein Fehler. Dieser würde aber im Gegensatzzu XHTML5 nicht dazu führen, dass das gesamte Dokument nicht angezeigt wird.Durch die sehr flexible Definition von HTML5 stehen die verschiedenen Syntaxenzur Wahl. Dies ermöglicht auch die Nutzung eines polyglotten Markups, welchesnicht die einzige interessante Neuheit von HTML5 ist, denn HTML5 unterstütztmit neuen Elementen die semantische Strukturierung von Webseiten und rüstet sieso für die Zukunft.

8Weitere Differenzen werden unter [WHAa] aufgeführt.9<meta charset=”utf-8”> oder <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8”>

10<?xml version=”1.0” encoding=”UTF-8”?>



4.2 Semantische NeuheitenDie Syntax und Definition von HTML5 lässt viele Variationen des Quelltextes zu.Bei der Verwendung der HTML5-Elemente sollte daher großer Wert auf die eigent-liche Bestimmung dieser Elemente gelegt werden. Die Elemente sollten also nichtzweckentfremdet werden. Eine Tabelle zur Gestaltung einer Liste ist vielleicht for-mal korrektes HTML5, aber aus semantischer Sicht der falsche Weg. Für die korrekteAuszeichnung von Listen sind die Tags <ol> oder <ul> vorhanden.Die Bedeutung und der vorgesehene Verwendungszweck von Elementen ist für die In-terpretation einer Webseite bspw. in einem Screenreader sehr wichtig. Viele Elementeund Attribute in HTML5 haben ihre eigene Semantik, die für eine weitere Verarbei-tung entscheidend sein kann. Screenreader wandeln ganze Webseiten in Sprache umund lesen sie dann vor. Damit dies überhaupt möglich ist, muss eine Webseite gutstrukturiert sein und die HTML-Mittel richtig eingesetzt werden. Dabei tritt dasProblem auf, dass die heutigen Webseiten viel komplexer und verzweigter sind, alsdie Web-Dokumente, für die HTML entworfen wurde.

Abbildung 4.1: Aufbereiteter Screenshot der Financial Times Deutschland Startseite(Quelle: Eigene Darstellung)

Die Abbildung 4.1 zeigt den Kopfbereich im Vergleich zur gesamten Startseite derFinancial Times Deutschland. Weiterhin wurden die strukturierenden Elemente indiesem Bereich farblich hervorgehoben.11 Zur Strukturierung der gesamten Startseitewurden mehr als 500 <div>-Elemente verwendet, wovon allein mehr als 50 im Kopfder Seite zu finden sind. Hinzu kommt, dass <div>-Elemente semantisch leere Hüllensind und damit eine semantische Strukturierung der Seite mit diesen Elementen fastunmöglich12 ist.Ein weiteres Problem in diesem Zusammenhang ist die in HTML4 vorhandeneBeschränkung auf sechs Überschriftsebenen. Das bedeutet, dass eine Webseite ei-gentlich nur in 6 Ebenen untergliedert werden könnte. Für die heutigen komplexenNewsportale wie www.ftd.de sind auch hier die Grenzen schnell erreicht.11Zur Hervorhebung wurde das Firefox Plugin Web Developer (Version 1.1.9) verwendet.12Um die Semantik in Webseiten einzubringen, wurde oft das rel-Attribut aus HTML4 verwendet.

Dies funktioniert zwar an manchen Stellen, enspricht aber nicht den Spezifikationen.



Eine Gliederung/Outline der Webseite ist aber enorm wichtig, da Screenreader diesezur Navigation verwenden und Suchmaschinen diese für die Indexierung nutzen.Um die Beschränkung zu verdeutlichen, wäre folgende Verteilung der Überschrifts-ebenen bei einer Redaktionsseite denkbar:

• <h1> - Logo/Titel der Seite• <h2> - Rubriktitel• <h3> - Artikeltitel• <h4> - Artikelsubtitel• <h5> - inhaltliche Gliederung des Artikels• <h6> - Kommentare

Eine weitere Strukturierung und Hierarchisierung der Webseite oder eines komple-xeren Artikels ist mit diesem Vorgehen fast gar nicht möglich. Das Einbinden vonWeb 2.0 Komponenten13 oder anderen Infoboxen, die in der Outline erscheinen unddamit eine sehr große und komplexe Webseite gliedern sollen, ist mit 6 Ebenen schierunmöglich. Hier stoßen viele Webseiten an ihre Grenzen und suchen daher Auswege.

Listing 4.7: Quelltextauszug einer Teaserbox der Seite http://www.ftd.de/<div class="box boxTeaser boxImgWide">[...]<span class="date">15:12</span><span class="h4">Ifo -Index </span><span class="h2">Rezessionsfaktor Merkel </span>

[...]

Die Financial Times Deutschland verzichtet fast gänzlich auf die Überschriftenele-mente und funktioniert die <span>-Tags als solche um. Das Listing 4.7 zeigt dieAnlehnung der CSS-Klassen an die HTML-Überschriften in einem Ausschnitt einerTeaserbox. Diese <span>’s erhalten zwar das Aussehen, jedoch nicht die Semantikvon richtigen <h >-Elementen. Die Probleme an dieser Strukturierung sind,

1. dass die verwendeten <span>-Tags genauso wie die <div>-Elemente keine se-mantische Bedeutung haben und

2. sie dadurch auch nicht in einer Outline erscheinen würden.Die Outline der Startseite der ftd.de sieht aufgrund der nicht genutzten Überschriften-Tags wie folgt aus:

1. Wirtschaft1. Newsletter: Eilmeldungen Finanzen2. Ein Fehler ist aufgetreten!3. Vielen Dank für Ihre Anmeldung14

Um diesen allgemeinen Problemen Herr zu werden, bringt HTML5 neue strukturie-rende Elemente mit sich, die im folgenden Abschnitt näher erläutert werden.13Rankings, Buttons der Social Network Seiten ect.14Die Outline wurde mit dem Firefox Plugin Web Developer (Version 1.1.9) erzeugt.


http://www.ftd.de/


4.2.1 Neue Elemente zur Auszeichnung und Strukturierung

Wie im vorhergehenden Abschnitt beschrieben ist die semantische Strukturierungeiner Webseite mit Mitteln von HTML4 sehr schwierig. Daher werden mit HTML5vier neue strukturierende Elemente eingeführt, die zusammen mit den Überschrifts-elementen die Struktur einer Webseite maßgeblich beeinflussen. Die folgenden Ele-mente gehören zur Kategorie des „sectioning content” und beeinflussen daher denGeltungsbereich von Überschrifts- und Footerelementen. Durch dieses Verhalten istes ab jetzt möglich, Webdokumente unendlich tief und vor allem auch semantischzu gliedern.

• <section>Dieses Element dient zur inhaltlichen Gliederung einer Webseite und derenInhalten. Es steht semantisch für einen inhaltlich zusammengehörenden Ab-schnitt und sollte nicht für Designzwecke genutzt werden.15

• <nav>Das <nav>-Element zeichnet einen Webseitenabschnitt mit internen und exter-nen Links als Navigation aus. Es sollte mit Bedacht eingesetzt werden, da eszum Auszeichnen von Hauptnavigationen entworfen wurde. Es kann mehrfachauf der Seite verwendet werden und könnte so auch eine Navigation in einemArtikel kennzeichnen.16

• <aside>Zusatzinformationen können durch dieses neue Element ausgezeichnet werden.Hierbei könnte es sich um eine Sidebar, Metainformationen oder Werbunghandeln.17

• <article>Für sich selbst stehende Inhalte gehören in das <article>-Element. SolcheInhalte könnten News, Blogposts, Kommentare oder Artikel sein. Bei der Ver-schachtelung dieses Elements ist darauf zu achten, dass das innere Elementimmer in Beziehung zum umgebenden Element stehen sollte. Ein Szenario füreine derartige Verschachtelung wären Kommentare zu einem Blogpost. Fallsein <article> ein Veröffentlichungsdatum hat, kann dieses mit dem neuenTag <time>18 maschinenlesbar ausgezeichnet werden.19

Diese neuen Elemente erzeugen neue Abschnitte in einem Webdokument und wirkensich auf die Geltungsbereiche von Überschriften aus. Es gibt noch zwei weitere neueElemente, die ihren Inhalt in eine Beziehung zu dem umgebenden Element stellen.Diese gehören nicht zur Kategorie „sectioning content” und erzeugen somit auchkeinen neuen Abschnitt im Dokument.

15Vgl. [Hic11a, 4.4.2 The section element]16Vgl. [Hic11a, 4.4.3 The nav element]17Vgl. [Hic11a, 4.4.5 The aside element]18<time> wurde am 29.10.2011 in der Spezifikationsrevision 6783 durch das allgemeinere <data>

ersetzt. Dieses kann durch das value-Attribut nicht nur die Zeit, sondern alle möglichen Inhaltemaschinenlesbar auszeichnen. Als Resultat der „W3C Technical Plenary / Advisory CommitteeMeetings Week” wurde am 10.11.2011 bekannt gegeben, dass <time> mit komplett neuer APIwieder eingeführt werden soll. Vgl. [Kes11c]

19Vgl. [Hic11a, 4.4.4 The article element]



Hierbei handelt es sich um die Elemente <header> und <footer>, die wie folgtgenutzt werden sollten:

• <header>Dieses Element dient zur Auszeichnung von hinführenden Inhalten, Navigatio-nen und Überschriften.20

• <footer>Das <footer>-Element umfasst in Beziehung stehende Inhalte wie bspw. denVerfasser oder Copyright-Informationen.21

Beide Elemente können nicht nur auf die gesamte Seite angewendet werden, sondernauch auf andere HTML-Elemente wie im folgenden Beispiel:

Listing 4.8: Möglicher HTML5-Aufbau einer Teaserbox<article><header><time pubdate datetime="2010 -08 -24 T14 :12+01:00">

15:12</time><hgroup><h2>Ifo - Index</h2><h1>Rezessionsfaktor Merkel </h1>

</hgroup></header>

[...]</article>

Das Listing 4.8 zeigt eine in HTML5 nachgebildete Teaserstruktur des Listings 4.7.Zur Auszeichnung der Teaserbox wurde das <article>-Element verwendet, welchesein <header>-Element enthält. Als Kopfdaten wurden das Veröffentlichungsdatum,ausgezeichnet durch den <time>-Tag mit dem pubdate-Attribut, und eine Samm-lung von Überschriften verwendet. Diese Struktur ist nicht nur für Laien, die sichden Quelltext ansehen, viel besser zu interpretieren, sondern auch für Screenreaderund Maschinen. Die Bedeutung der Inhalte wird bereits durch die HTML-Elementeund nicht mehr nur durch den Inhalt selbst übermittelt.Im Beispiel sticht ein weiteres neues Element heraus - das <hgroup>. Es dient alsÜberschrift für den Abschnitt in dem es steht und fasst mehrere Überschriftsebe-nen zusammen. Bei der Erzeugung der Outline wird aus diesem Element nur dieÜberschrift genutzt, die den höchsten Rang hat.22

In HTML5 sind die aus HTML4 bekannten Überschriftselemente <h1> bis <h6> inselber Funktion enthalten. Sie bilden auch hier die inhaltliche Struktur des Doku-ments mit dem Unterschied, dass sie nun abhängig von den vorgestellten struktu-rierenden Elementen eingesetzt werden können. Die Struktur bzw. Gliederung desDokuments wird durch den Outline-Algorithmus erzeugt.23

20Vgl. [Hic11a, 4.4.8 The header element]21Vgl. [Hic11a, 4.4.9 The footer element]22Vgl. [Hic11a, 4.4.7 The hgroup element]23Siehe [Hic11a, 4.4.11.1 Creating an outline]



Die Outline ist abhängig von Sectioning Elementen. Sobald ein neues strukturie-rendes Element geöffnet wird, können in diesem wieder die Elemente <h1> bis <h6>verwendet werden. Diese erscheinen dann in der Outline eine Hierarchieebene tiefer.Eine Seitengliederung sah bisher bspw. so aus:

Listing 4.9: Gliederung nach HTML4<h1>spirit@fhs </h1><h2>StudWeb </h2><h3>HTML5</h3><h2>EmployeeWeb </h2>

Mit HTML5 könnte diese nun wie folgt ausgezeichnet werden:

Listing 4.10: Gliederung mit HTML5<h1>spirit@fhs </h1><section><h1>StudWeb </h1><section><h1>HTML5</h1>

</section></section><section><h1>EmployeeWeb </h1>

</section>

Beide Strukturen würden die folgende Outline erzeugen:1. spirit@fhs

1. StudWeb1. HTML5

2. EmployeeWebDie vorgestellten Elemente bieten die Möglichkeit Webseiten semantisch zu struk-turieren und sie bis ins Unendliche zu gliedern. Um diese Neuerungen noch einmalganzheitlich betrachten zu können, wurde folgende Webseitenstruktur erstellt:

Listing 4.11: Beispielhafter Aufbau einer Webseite<!DOCTYPE html><html><head><title>Beispiel </title><meta charset="utf -8"/>

</head><body><header><h1>Scala und deren Frameworks </h1><nav><h1>Navigation </h1>



<ul><li><a href="lift.html">Lift</a></li><li><a href="akka.html">Akka</a></li>[...]

</ul></nav>

</header><section id="content"><article><footer><div>Verfasser: Max Mustermann </div><time pubdate datetime="2010 -09 -01 T14 :14+01:00">01 Sep .15:14 </time>

</footer><header><h1>Scala und deren Frameworks </h1>

</header><p>Scala ist eine [...] Scala Frameworks:</p><section><h1>Akka</h1><p> [...] </p>

</section><section><h1>Lift</h1><p> [...] </p>

</section></article>

</section><aside><h1>Sidebar </h1><ul><li><a href="impressum.html">Impressum </a></li>

</ul></aside><footer><p><small>Erstellt von Max Mustermann </small></p>

</footer></body></html>

Das Listing 4.11 zeigt die Nutzung der vorgestellten Elemente in einer Websei-te. Durch die Verwendung dieser neuen semantischen Elemente kann ein HTML-Dokument viel leichter von Maschinen verstanden werden. Wenn Suchmaschinenund Screenreader bei HTML5 angelangt sind, kennen sie die Bedeutungen der Tagsund können sie dementsprechend verwerten. Auf semantisch leere <div>-Elementemuss nur noch zurückgegriffen werden, wenn es sich um Designaspekte handelt.Doch es gibt noch weitere interessante neue Elemente und Konzepte, die nichts mitAbschnitten und der Outline zu tun haben.



4.2.2 Microdata

Die bisher vorgestellten neuen Elemente erlauben die semantische Strukturierungeiner Webseite. Für die semantische Auszeichnung ist es in manchen Situationenwünschenswert, dass bestimmte Elemente standardisiert mit einer genaueren Bedeu-tung verknüpft werden können. So könnten bspw. Suchmaschinen diese zusätzlichbereitgestellten Informationen für die Einstufung und Darstellung einer Webseitebei den Suchergebnissen nutzen.Ein Beispiel ist die Auszeichnung von Datums- und Zeitangaben durch das neue<time>-Element, welches bei richtiger Nutzung maschinenlesbar ist. Es hat aber nurdurch die Verwendung des Attributs pubdate die Bedeutung des Veröffentlichungs-datums in Bezug auf das gesamte Dokument oder das nächstgelegene <article>-Element. Ein Gründungsdatum wie im folgenden Listing kann also nicht explizit alssolches gekennzeichnet werden.

Listing 4.12: Auszeichnung eines Gründungsdatums<p>Die FH Schmalkalden wurde am<time datetime="1991 -10 -01">1. Oktober 1991</time> gegruendet.

</p>

Damit ein Dokument mit weiteren Informationen angereichert werden kann, stelltHTML5 das Konzept der Microdata bereit. Hierbei werden HTML-Elemente durchdie Verwendung von bestimmten Attributen zu „items” gruppiert und mit Name-Wert-Paaren angereichert. Die zwei wichtigsten Attribute sind:

• itemscopeDieses Attribut definiert ein Element, welches verschiedene und mehrfach ver-wendete Eigenschaften besitzen kann.24

• itempropDie Eigenschaften werden mit diesem Attribut gekennzeichnet. Das Attri-but trägt einen oder mehrere Eigenschaftsnamen. Die Werte dazu befindensich vorwiegend innerhalb des HTML-Elements. Bei den Elementen a, area,audio, embed, iframe, img, link, object, source oder video kann dieURL aus den Attributen href oder src als Wert verwendet werden.25

Bereits mit diesen beiden Attributen lässt sich das oben genannte Beispiel mit ma-schinenlesbaren Informationen anreichern.

Listing 4.13: Auszeichnung eines Gründungsdatums mit Microdata<p itemscope>Die FH Schmalkalden wurde am<time datetime="1991 -10 -01"itemprop="foundingDate">1. Oktober 1991</time>

gegruendet.</p>

24Vgl. [Hic11a, 5.2.2 Items]25Vgl. [Hic11a, 5.2.3 Names: the itemprop attribute]



Die folgenden Attribute sind nicht zwingend notwendig um zusätzliche Informatio-nen im Quellcode maschinenlesbar auszuzeichnen, sie sind aber hilfreich, wenn esum die standardisierte Nutzung und die Verwendungsmöglichkeiten des Microdata-Konzepts geht.

• itemtypeDieses Attribut bestimmt den Typ eines Elements bzw. das Vokabular. DieAngabe eines Typs ist sinnvoll, da so ein standardisiertes Format genutzt wer-den kann. Der Typ wird als URL26 angegeben.27

• itemrefDas itemref-Attribut referenziert auf die ID’s anderer Eigenschaften, die zumElement gehören, aber nicht in der Gruppierung stehen.28

• itemidDie itemid ist eine global eindeutige Eigenschaft bspw. die ISBN eines Bu-ches.29

Als übergreifendes Beispiel soll folgendes Listing dienen:

Listing 4.14: Nutzung des Microdata-Organisationsschemas<div itemscope itemtype="http :// schema.org/Organization"

itemref="x"><span itemprop="name">PaDSLab </span><img itemprop="image" src="logo.jpg" alt="PaDSLab"/><span itemprop="description">Das PaDSLab unterstuetztdas Projekt spirit@fhs [...]</span>

<span itemprop="url">http :// pads.obraun.net/lab.html</span>

<time itemprop="foundingDate" datetime="2011 -09 -01">01.09.2011 </time>

<span itemprop="employees founders" itemscopeitemtype="http :// schema.org/Person"><span itemprop="name">Marcus Denison </span>

</span></div><div id="x"><span itemprop="employees founders" itemscope

itemtype="http :// schema.org/Person"><span itemprop="name">Christian Linde </span>

</span></div>

Das Listing 4.14 zeigt die Auszeichnung einer Informationsseite einer Organisationmithilfe eines Microdataschemas. Es wurde ein Element mit dem Typ26Seit Juli 2011 gibt es eine Kooperation zwischen den Suchmaschinen Bing, Google und Yahoo,

welche auf http://www.schema.org/ ein Standardset an Schemas bereitstellen.27Vgl. [Hic11a, 5.1.3 Typed items]28Vgl. [Hic11a, 5.2.2 Items]29Vgl. [Hic11a, 5.1.4 Global identifiers for items]


http://www.schema.org/


http://schema.org/Organization erzeugt. Diese Organisation hat die folgendenmaschinenlesbar ausgezeichneten Eigenschaften:

• name = PaDSLab• image = logo.jpg• description = Das PaDSLab unterstuetzt das Projekt spirit@fhs[. . . ]• url = http://pads.obraun.net/lab.html• foundingDate = 2011-09-01

Weiterhin wurde ein außerhalb stehendes HTML-Element mit dem Attribut itemrefder Organisation hinzugefügt. Die Eigenschaften employees und founders gehörendem Schema Person an und wurden zwei Elementen zugewiesen. Dies bedeutet,dass diese Eigenschaften jeweils die Personen mit den Namen Marcus Denison undChristian Linde enthalten.Dieses Vorgehen ermöglicht es, dass Programme wie Browser und vor allem Suchma-schinen die Inhalte einer Webseite entsprechend ihrer Semantik verarbeiten und ineiner gewissen Weise verstehen können. Microdata und die dazugehörige JavaScript-API ist aber bisher in noch keinem Browser implementiert. Durch Microdata profi-tieren also die Suchmaschinen, doch was geschieht mit Screenreadern und im Bereichder Barrierefreiheit? Dies wird der folgende Abschnitt näher erläutern.

4.2.3 Barrierefreiheit mit WAI-ARIA

HTML5 macht auch im Bereich der Barrierefreiheit erstmals Fortschritte. Dabeisetzt die HTML5-Spezifikation auf Teile eines W3C Entwurfes für ein barrierefreiesInternet. Dieser Entwurf stammt aus der Arbeitsgruppe „Web Accessibility Initia-tive” und heißt „Accessible Rich Internet Applications” (kurz WAI-ARIA). Er be-schreibt die Anreicherung von Webseiten und deren bisher meist selbst gebauten unddamit für Screenreader schwer verständlichen Widgets30 mit verschiedenen Rollenund Eigenschaften. Durch dieses Vorgehen werden solche dynamischen Webseiten fürdie von Menschen mit Behinderungen genutzten Technologien besser verständlich.Aus diesem Grund werden mit HTML5 die zwei HTML-Attribute role und aria-*aus der WAI-ARIA eingeführt. Diese Attribute ermöglichen ein barrierefreies Mark-up. Außerdem besitzen viele HTML5-Elemente eine implizite ARIA-Semantik. Somüssen die bereits vorgestellten Strukturelemente oder die neuen Möglichkeiten derFormulargestaltung nicht extra ausgezeichnet werden. Wichtig hierbei ist, dass dieverwendeten Angaben für role und aria-* nicht der impliziten ARIA-Semantikwidersprechen.31

Die Verwendung der Attribute ist relativ einfach und entspricht meist den Erwartun-gen. So gilt bspw. für ein <nav>-Element immer role=„navigation”. Diese impliziteAuszeichnung ist jedoch nicht in jedem Fall möglich. Daher müssen die eingeführtenAttribute richtig verwendet werden.30Dies sind meist selbst entwickelte und auf normalen HTML-Elementen beruhende Menüs, Pro-

gressbars, Tabs, Slider und mit Ajax aktualisierte Bereiche.31Eine genaue Auflistung der impliziten ARIA-Semantik ist hier zu finden: [Hic11a, 3.2.7 WAI-

ARIA].


http://pads.obraun.net/lab.html


Listing 4.15: Formular mit Pflichtfeld<form action="post"><label for="name">Name:</label><input type="text" id="name" aria -required="true" />[...]

</form>

Bereits bei der Registrierung auf einer Webseite werden oft Felder mit JavaScriptauf Korrektheit und Vollständigkeit geprüft. Doch ein Screenreader, der die Web-seite vorliest, kann nicht wissen, welche Felder benötigt werden. Listing 4.15 zeigtdie Verwendung des Attributs aria-required=„true” als Lösung für dieses Pro-blem. Durch die Nutzung dieses Attributs kann ein ARIA-fähiger Screenreader dasentsprechende Element als Pflichtfeld erkennen und dementsprechend verarbeiten.

Listing 4.16: Barrierefreie Verwendung von Tabs<div id="tabcontainer"><ul id="tabs" role="tablist"><li role="tab" id="tab1">Tab 1</li><li role="tab" id="tab2">Tab 2</li>

</ul><div id="tab -1" aria -hidden="false"

aria -labelledby="tab1">[...]</div><div id="tab -2" aria -hidden="true"

aria -labelledby="tab2" style="display:none">[...]</div></div>

Ein weiteres Beispiel zeigt Listing 4.16. Hier wurde die auf sehr vielen Seiten verwen-dete Tab-Darstellung mit den neuen Attributen angereichert. Dadurch ist das auseiner Liste und <div>-Elementen bestehende Widget für einen Screenreader besserverständlich ausgezeichnet.HTML5 schafft es also, dass Webseiten barrierefreier und semantisch besser struk-turiert werden können. Was sich noch geändert hat, zeigt das folgende Kapitel ineinem Überblick.

4.3 Weitere Änderungen im ÜberblickIn den letzten Kapiteln wurden verschiedene interessante neue Elemente und Attri-bute vorgestellt, die durch HTML5 zu einem Standard zusammengefasst werden. Eskönnen aber nicht alle Änderungen betrachtet werden, da es unzählige kleine undgroße Neuerungen zu verbuchen gibt. Im Folgenden sollen daher weitere wichtigeNeuheiten zusammengefasst vorgestellt werden, bevor sich die nächsten Hauptkapi-tel mit den jeweiligen API’s näher beschäftigen.In HTML5 wurde nicht nur die Syntax leicht modifiziert und eine Vielzahl neu-er Elemente eingeführt, es wurden auch die Inhaltsmodelle der HTML-Elementevollständig überarbeitet. In HTML4 gab es nur Block- und Inline-Elemente, die zu-



sammen den sogenannten Flow-Content bildeten. Dies ändert sich nun mit HTML5und wird ein Stück weit komplexer.

Abbildung 4.2: Content-Modelle in HTML5 (Quelle: [Hic11a, 3.2.5.1 Kinds ofcontent])

Da HTML5 keine SGML-Anwendung mehr ist, besitzt es auch keine DTD. Somitsind die Content-Modelle nicht mehr als DTD-Entities definiert und dienen nur nochals beschreibende Ausdrücke oder Kategorien. Die Abbildung 4.2 zeigt die neuenKategorien, in die ein Element fallen kann, aber nicht muss.

• MetadataDies sind Daten, die die Darstellung, das Verhalten oder die Beziehungendes Inhaltes oder des Dokumentes beeinflussen. Beispiele dafür sind <title>,<style> oder <script>. Die Teilschnittmenge rührt daher, dass Metadatenauch außerhalb des Dokumentenkörpers vorkommen können.

• FlowDiese Kategorie beschreibt den Inhalt des Dokumentes, weshalb fast alle HTML-Elemente dieser Kateogrie zugeordnet werden können.

• SectioningElemente, die zu dieser Kategorie zählen, beeinflussen den Geltungsbereichvon Header- und Footer-Element. Dies sind die in Kapitel 4.2.1 vorgestelltenneuen strukturierenden Elemente.

• HeadingDiese Kategorie umfasst alle Elemente, die mit Überschriften zu tun habenund somit die Outline eines Abschnittes bilden. Dazu zählen die Elemente<h1> bis <h6> sowie <hgroup>.

• PhrasingHierbei handelt es sich um den Text eines Dokumentes sowie Elemente diediesen in irgendeiner Weise auszeichnen. Dies umfasst bspw. die Elemente <a>,<time> und <video>.



• EmbeddedDies sind Elemente, die externe Ressourcen importieren oder Inhalte einbin-den, die einem anderen Namensraum angehören. Dabei handelt es sich bspw.um die Elemente <audio>, <img> oder <svg>.

• InteractiveZu dieser Kategorie zählen die Elemente, die eine Nutzerinteraktion anstreben.Das sind bspw. die Elemente <button>, <img> (in Verbindung mit einer <map>)und <select>.

Dadurch, dass HTML5 abwärts kompatibel spezifiziert wird, sind trotz der kom-pletten Umgestaltung der Modelle nur geringfügige Änderungen spürbar. So könnennun bspw. <a>-Elemente alle anderen HTML-Elemente umschließen.32

Weiterhin wird mit HTML5 die Globalisierung von einigen HTML-Attributen ein-geführt. Attribute wie class, id und tabindex können so erstmals von allen Ele-menten getragen werden. Außerdem wurden die Standard-Typen text/javascriptfür <script> und text/css für <style> festgelegt und müssen damit nicht mehrexplizit als type-Attribut angegeben werden.Die HTML5-Spezifikation legt aber nicht nur Standard-Typen und neue Elementefest, sondern auch eine Streichliste33 und wie die darauf befindlichen Elemente vomBrowser behandelt werden müssen. Unter den gestrichenen Elementen befinden sichbspw. Frames, Doctype-Varianten und reine Präsentationselemente wie <big>. Hierist zu beachten, dass manche dieser Präsentationselemente einfach umdefiniert wur-den. So steht <small> nicht mehr für kleinen Text, sondern für Zusatzinhalte oder„Kleingedrucktes” und <hr> kommt nun nicht mehr als einfache horizontale Trenn-linie zum Einsatz, sondern markiert einen thematischen Umbruch im Abschnitt.Die HTML5-Spezifikation kann aber noch mehr als nur umdeklarieren und streichen,sie kann auch adaptieren. Dies gilt im Speziellen für die Ruby-Anotationen, die An-merkungen unterhalb des eigentlichen Textes sind. Diese stammen aus XHTML 1.1und wurden, genauso wie die Standards SVG34 und MathML35, in HTML5 inte-griert.

Listing 4.17: Beispiel einer MathML-Struktur für ein HTML5-Dokument<math><msup><msqrt><msup><mfenced open="(" close=")"><mrow><mi>a</mi><mo>+</mo><mi>b</mi>

</mrow></mfenced><mn>2</mn>

32Vgl. [Hic11a, 3.2.5 Content models]33Siehe [Hic11a, 16 Obsolete features]34Scalable Vector Graphics sind XML-basierte, zweidimensionale Vektorgrafiken.35Mathematische Formeln können mit der auf XML-basierenden Mathmatical Markup Language

dargestellt werden.



</msup></msqrt><mn>4</mn>

</msup></math>

Das Listing 4.17 zeigt die MathML-Auszeichnung der Formel√

(a + b)24. Wie im Ka-

pitel 4.1 erwähnt, muss bei der Verwendung des <math>-Elements in HTML5 keinNamensraum angegeben werden, da die Spezifikation die Implizierung dessen vor-sieht. Somit könnte der Quellcode aus dem Listing in ein HTML5-Dokument einge-fügt werden und ein MathML-fähiger Browser würde die Formel anzeigen. Dasselbeist mit SVG-Grafiken durch das neue Element <svg> möglich. Bei beiden Elemen-ten ist aber darauf zu achten, dass HTML5 nur die Container, also die genanntenElemente, spezifiziert und nicht deren Unterstützung. Diese kann also zwischen denBrowsern sehr stark schwanken.HTML5 bringt noch weitere Neuheiten wie die Abfragesprache XPath36, Attribu-te zur Steuerung der Ausführung von JavaScript und neue DOM-Methoden wiegetElementsByClassName() mit sich. Auf die Beleuchtung dieser meist kleinerenNeuheiten wird aufgrund der Vielzahl und des sich ständig weiterentwickelnden Li-ving Standards verzichtet.Der dieser Arbeit zugrunde liegende erweiterte HTML5 Begriff umfasst nicht nurdie bisher vorgestellten Neuerungen in Bezug auf die HTML-Elemente und derenSpezifikation, sondern auch die neuen JavaScript API’s. HTML5 beinhaltet nebendem reinen Markup auch neue Schnittstellen wie das Geolocation API, das API zurFormularvalidierung sowie das API für das <canvas>-Element, welche in den folgen-den Kapiteln näher vorgestellt und in prototypischen Entwicklungen veranschaulichtwerden.

36XML Path Language


5 Geolocation APIDieses Kapitel widmet sich dem Geolocation API und dessen Ortsbestimmung. DasAPI war anfangs Teil der WHATWG Spezifikation, wurde aber dann als eigenesProjekt ausgelagert und befindet sich nun im Standardisierungsprozess des W3C’s.Laut dem Zeitplan der Geolocation Working Group sollte die Spezifikation im 2.Quartal 2011 den Status „Proposed Recommendation” und im 4. Quartal 2011 „Re-commendation” erhalten.1 Der Entwurf ist aber noch als „Candidate Recommenda-tion” gekennzeichnet, da er Referenzen zum Web IDL-Spezifikationsentwurf enthält.Erst wenn der Web IDL-Entwurf den Status „Last Call”2 erreicht, wird auch dasGeolocation API auf das nächste Podest gehoben.3

Dieses API gehört also nicht zu einer HTML5-Spezifikation, wird aber dennoch imZusammenhang mit HTML5 sehr oft verwendet. Dies liegt vielleicht daran, dassmit HTML5 nicht nur neue HTML-Elemente, sondern auch eine Vielzahl von neuenJavaScript Schnittstellen eingeführt werden.

5.1 Die API-SpezifikationDas Geolocation API stellt ein high-level Interface für die Abfrage von nutzer- bzw.hardwarebezogenen geografischen Positionsdaten zur Verfügung. Wichtig ist, dassnur die Funktionsinterfaces und Datenstrukturen spezifiziert werden, aber nicht wo-her die Positionsdaten kommen. Das API wird als agnostisch (unwissend) über dieHerkunft der Daten definiert. Die Spezifikation gibt lediglich die folgenden mögli-chen Ressourcen für ortsbezogene Informationen an:

• Global Positioning System (GPS)• IP-basierte Ortsbestimmung• RFID• WiFi und Bluetooth MAC-Adressen4

• Funk-Zellen• direkte Nutzereingabe5

Diese Ressourcen sind die am häufigsten genutzten Möglichkeiten zur Bestimmungdes Standortes. Ein Browser kann diese oder auch andere Quellen nutzen, um die

1Vgl. http://www.w3.org/2008/geolocation/2Deadline hierfür ist der 18. Oktober 2011. Siehe http://www.w3.org/TR/WebIDL/ und http://lists.w3.org/Archives/Public/public-script-coord/2011JulSep/0467.html

3Vgl. http://lists.w3.org/Archives/Public/public-geolocation/2011Jun/0048.html4Die Media Access Control Adresse ist die physikalische Adresse der verwendeten Netzwerk-Hardware.

5Vgl. [Pop10, 2 Introduction]


http://www.w3.org/2008/geolocation/

http://www.w3.org/TR/WebIDL/

http://lists.w3.org/Archives/Public/public-script-coord/2011JulSep/0467.html

http://lists.w3.org/Archives/Public/public-script-coord/2011JulSep/0467.html

http://lists.w3.org/Archives/Public/public-geolocation/2011Jun/0048.html

5. Geolocation API Fachhochschule Schmalkalden WS 2011/12

Positionsdaten zu ermitteln und sie dann über das API standardisiert zur Verfügungzu stellen. Dabei ist wichtig, dass ein Nutzer des API und auch das API selbst nichtwissen woher die Daten stammen.Weiterhin wird in der Spezifikation festgeschrieben, dass eine Umsetzung des APIeinen Mechanismus zum Schutz der Nutzerdaten enthalten muss und diese nur mitausdrücklicher Genehmigung des Nutzers eingeholt werden dürfen.6

5.2 Wie funktioniert die Ortsbestimmung in aktuellenBrowsern?

Die Browser Firefox, Chrome und Opera nutzen zur Bestimmung des Standortes denGoogle Location Service. Microsoft verwendet im Internet Explorer den hauseigenenOrtungsservice Microsoft Location Service. Der einzige Unterschied ergibt sich inder Genauigkeit der bestimmten Position.Bei der Implementierung des Prototypen fiel auf, dass der Google Location Ser-vice meist nur wenige Meter neben der wirklichen Position lag. Die Bestimmungbeim Internet Explorer lieferte bspw. eine Position in Weimar anstatt Schmalkal-den. Diese Unterschiede können mit der vorhandenen Datenmenge oder mit demBerechnungsverfahren des genutzten Services in Verbindung stehen.Zur Positionsbestimmung sammeln alle Browser die folgenden Daten:

• öffentliche IP-Adresse• Informationen zu WLAN-Netzwerken in der Umgebung

– MAC-Adressen– Netzwerknamen (SSID7)– Signalstärken

Diese gesammelten Informationen werden dann an den entsprechenden Location Ser-vice gesendet. Beide Serviceanbieter vergeben eine zufällige Identifikationsnummerund gleichen die empfangenen Daten mit ihrer Geodatenbank ab. Dabei wird eineungefähre Position trianguliert, welche dann an den Browser zurückgeliefert wird.8

Die Genauigkeit der berechneten Position hängt von der Größe der zugrunde liegen-den Geodatenbank und der verwendeten Triangulationsverfahren ab. Im Hinblickauf die Verfahren sind nur Spekulationen möglich, über die Befüllung der Geoda-tenbanken sind genauere Informationen bekannt. So werden die Daten einerseits ausden Nutzern der Services und andererseits durch mobile Teams der Unternehmengeneriert.9

6Vgl. [Pop10, 4 Security and privacy considerations]7Der freiwählbare Name von Funknetzen wird als Service Set Identifier bezeichnet.8Siehe [Moz11],[Inc11], [ASA11] und [Zei11]9Siehe [Mic11, How does Microsoft assemble a Wi-Fi location database?]



5.3 Datenstrukturen und FunktionenDie Spezifikation des Geolocation API erweitert das navigator-Objekt um das neuegeolocation-Objekt. Damit stehen dem Browser drei neue Funktionen für die asyn-chrone Bestimmung der Position zur Verfügung:

• void getCurrentPosition(successCallback [, errorCallback, opt])Hierbei handelt es sich um die einfache Positionsbestimmung, welche auch als„one-shot request” bezeichnet wird. Diese Methode erwartet eine Callback-Methode für den Erfolgsfall. Weiterhin können ein Fehler-Callback und einKonfigurationsobjekt optional übergeben werden.

• long watchPosition(successCallback [, errorCallback, opt])Diese Methode unterscheidet sich von der obigen nur darin, dass sie die Po-sition überwacht. Das heißt, wenn sich die Position ändert, wird erneut derErfolgs-Callback mit den neuen Positionsdaten aufgerufen. Außerdem liefertdiese Methode eine Prozess-ID als Rückgabewert.

• void clearWatch(watchId)Der mit watchPosition gestartete Überwachungsprozess kann anhand deroben genannten ID identifiziert und mit dieser Methode abgeschaltet werden.

Für die Konfiguration der Positionsbestimmung ist das Objekt opt vorgesehen. Die-ses kann die drei Eigenschaften enableHighAccuracy, timeout und maximumAgeenthalten. Die beiden Letzteren werden in Millisekunden angegeben und stehen ei-nerseits für die maximale Wartezeit und andererseits für das maximale Cache-Alterder Daten. Das Setzen von enableHighAccuracy: true soll bewirken, dass genaue-re Daten gesammelt werden und diese die Präzision erhöhen.Im Fehlerfall wird der errorCallback ausgeführt. Dabei wird ein Fehlerobjekt über-geben, welches die Eigenschaften message und code enthält. Die übergebene Nach-richt soll lt. Spezifikation nur für Entwicklungszwecke genutzt werden. Es werdendie folgenden selbsterklärenden Fehlerfälle definiert:

• PERMISSION_DENIED (1)• POSITION_UNAVAILABLE (2)• TIMEOUT (3)

Der successCallback erhält ein Objekt vom Typ Position. Dieses enthält einentimestamp vom Zeitpunkt der Bestimmung und ein Objekt coords vom Typ Coord-inates, welches die berechneten Koordinaten enthält. Dabei handelt es sich um diegeografische Breite und Länge, Genauigkeit, Geschwindigkeit, Richtung, Höhe unddie Genauigkeit der Höhenangabe.10

10Vgl. [Pop10, 5 API Description]



5.4 Welche Risiken entstehen?Bisher folgen alle Browser der in der Spezifikation festgehaltenen Regelung, dassdie Nutzer explizit um Erlaubnis gefragt werden müssen, wenn eine Webseite dieseFunktionalität in Anspruch nehmen will. Beim Google Browser Chrome wird hierbeinur noch zwischen „Zulassen” und „Ablehnen” unterschieden. Die anderen Browserunterscheiden bei der Abfrage jedoch zusätzlich zwischen „einmal” und „immer”erlauben. Dies erhöht die Sicherheit und gibt dem Nutzer die volle Kontrolle.Falls Browser-Bugs oder Schädlinge die Sperre außer Kraft setzen, könnten personen-und ortsbezogene Daten gesammelt werden ohne das der Nutzer dies überhauptmitbekommt. Hierbei könnten Bewegungsprofile erstellt werden, ähnlich wie es beiApple Produkten Anfang 2011 aufgedeckt wurde.11

5.5 PrototypDer im Folgenden vorgestellte Prototyp dient zur Bestimmung und Anzeige der Posi-tionsdaten. Da die Positionsüberwachung der watchPosition-Funktion im Browserabläuft und die Callback-Funktionen nur ausgeführt werden, wenn sich die Positiondes Gerätes maßgeblich ändert, setzt diese Entwicklung auf dem „one-shot request”auf, welcher sich besser veranschaulichen lässt.Die folgenden Listings sind Ausschnitte aus dem auf GitHub12 veröffentlichten Quell-code. Dieser wurde zusätzlich mit Google Maps erweitert, um die Position und diegenaue Adresse auf einer Karte visualisieren zu können.Bevor das Geolocation API genutzt wird, sollte wie im folgenden Listing geprüftwerden, ob der Browser die Schnittstelle unterstützt. Andernfalls kann eine Aus-weichmöglichkeit wie ein Hinweistext geschaffen werden.

Listing 5.1: Verfügbarkeitscheck und Positionsanfrageif (typeof navigator.geolocation !== ’undefined ’) {navigator.geolocation.getCurrentPosition(successCallback , errorCallback , options);

}else// fallback

Beim Aufruf der getCurrentPosition-Funktion werden drei Variablen übergeben,die vorher definiert wurden. Dabei handelt es sich um zwei anonyme Funktionen inForm der Variablen successCallback und errorCallback sowie das Konfigurati-onsobjekt options. Wenn der Browser die Positionsdaten erhalten hat, löst er denübergebenen successCallback und im Fehlerfall den errorCallback aus.

11Vgl. [Str11]12Siehe https://github.com/FlorianX/HTML5-experiments/blob/master/geolocation_api/

index.html


https://github.com/FlorianX/HTML5-experiments/blob/master/geolocation_api/index.html

https://github.com/FlorianX/HTML5-experiments/blob/master/geolocation_api/index.html


Listing 5.2: Der Erfolgsfallvar successCallback = function(position) {

var msg = ’Timestamp: ’ + position.timestamp + ’<br>’ +’latitude: ’ + position.coords.latitude + ’<br >’ +’longitude: ’ + position.coords.longitude + ’<br>’ +’altitude: ’ + position.coords.altitude + ’<br >’ +’accuracy: ’ + position.coords.accuracy + ’<br >’ +’altitude accuracy: ’ + position.coords.altitudeAccuracy

+ ’<br>’ +’heading: ’ + position.coords.heading + ’<br >’ +’speed : ’ + position.coords.speed;// ... post the message to the page

};

Das Listing 5.2 zeigt den Erfolgsfall. Die Funktion erhält das in Kapitel 5.3 beschrie-bene Positionsobjekt und formatiert dieses mithilfe von HTML als String, welcherausgegeben werden kann. Mit console.log(position); könnte für Entwicklungs-zwecke auch eine Ausgabe in die JavaScript-Konsole des Browsers erfolgen.

Listing 5.3: Der Fehlerfallvar errorCallback = function(error) {

switch (error.code) {case error.TIMEOUT:alert(’Location Service doesn\’t answer , timeout!’);break;

case error.POSITION_UNAVAILABLE:alert(’Position unavailable ’);break;

case error.PERMISSION_DENIED:alert(’Permission denied ’);break;

default:alert(’Somethings wrong , sorry.’);break;

}};

Im Fall eines Fehlers bei der Positionsbestimmung wird der errorCallback, welcherein Fehlerobjekt erhält, ausgeführt. Das Listing 5.3 zeigt die Auswertung des Fehlersund eine darauf abgestimmte Ausgabe einer Fehlermeldung.

Listing 5.4: Die Einstellungenvar options = {enableHighAccuracy : true , // super accuracytimeout : 2000, // maximum waiting timemaximumAge : 0 // maximum acceptable cache age

};



Im Prototyp wurde mit einer Wartezeit von zwei Sekunden, einer hohen Präzisionund keinen gecachten Daten gearbeitet.Mit diesen wenigen Handgriffen und einer etwas erweiterten Behandlung im Erfolgs-fall zeigt der auf GitHub verfügbare Quellcode die aktuelle Position mit Adressdatenauf einer Karte an. Desweiteren ist ein Beispiel der Positionsüberwachung hinter-legt.


6 FormularneuheitenDer neue HTML-Standard führt verschiedene Neuerungen im Bereich der Formulareein. Diese Änderungen beinhalten neue oder längst bekannte und jetzt standardi-sierte Attribute, hinzugefügte Elemente und Inputfeld-Typen sowie ein integriertesValidierungs-API. Daher widmet sich dieses Kapitel den interessantesten Vertreternund wird diese näher vorstellen.1

6.1 FormularelementeIm Bereich der Formularelemente gibt es nur die folgenden drei Neuzugänge. Zumeinen das eher unspektakuläre <output>, welches das Ergebnis einer Berechnungrepräsentiert. Dieses gleicht einem normalen Input bis auf den Sachverhalt, dass esnicht vom Nutzer bearbeitet werden kann.2

Der zweite Neuzugang ist das <datalist>-Element. Es unterstützt oder ersetzt dieAutovervollständigung des Browsers mit definierten Werten der Webseite.

Listing 6.1: Verwendung des Elements <datalist><input type="text" list="languageData" id="language"/><datalist id="languageData"><option value="Scala"></option><option value="PHP"></option><option value="Haskell"></option><option value="C"></option><option value="C#"></option><option value="F#"></option><option value="C++"></option>

</datalist>

Das Listing 6.1 zeigt die Verwendung des Elements in Verbindung mit einem norma-len Texteingabefeld. Beginnt der Nutzer nun mit einer Eingabe in dieses Textfeld,würden Eingabevorschläge entsprechend der eingegebenen Zeichen erfolgen. Wennbeim Eingabefeld das Attribut autocomplete=„off” gesetzt wird, ist die Autover-vollständigung des Browsers deaktiviert. Anderenfalls könnten die Vorschläge derDatalist und die des Browsers angezeigt werden.

1Ein kleines „Testbecken” mit verschiedenen neuen Elementen, Attributen und Typen isthier zu finden: https://github.com/FlorianX/HTML5-experiments/blob/master/forms/index.html

2Vgl. [Hic11a, 4.10.15 The output element]


https://github.com/FlorianX/HTML5-experiments/blob/master/forms/index.html


6. Formularneuheiten Fachhochschule Schmalkalden WS 2011/12

Das Verhalten dieses Elements imitieren Webseiten derzeit durch die Verwendungvon Dropdownboxen und JavaScript. Somit stellt dieses neue Element eine wirklicheBereicherung dar.3

Das letzte neue Formularelement ist <keygen>. Es dient zur Generierung von Schlüs-selpaaren mithilfe des RSA-Verfahrens4. Die Spezifikation lässt aber offen, ob undinwieweit ein Browser dieses oder ein anderes Verfahren unterstützt. Wie die Abbil-dung 6.1 zeigt, führt dies zu einer unterschiedlichen Implementierung in den Brow-sern.

(a) Chrome (b) Firefox (c) Opera

Abbildung 6.1: Vergleich der <keygen> Implementierungen

Dieses Element könnte für die Generierung eines Client-Zertifikats genutzt werden.Dabei wird der private Schlüssel im sogenannten „key store” des Browsers gespei-chert, der öffentliche Schlüssel wird hingegen an den Server gesendet. Nun könnteder Server ein Client-Zertifikat erstellen, welches an den Browser zurückgesendetwird. Dieser kann sich somit gegenüber dem Server authentifizieren.5

6.2 FormularattributeHTML5 führt eine Reihe neuer Attribute für Formularelemente ein, wovon einigeim Folgenden kurz vorgestellt werden. Das Attribut form fügt ein Element einemFormular hinzu, obwohl es nicht innerhalb der Formular-Tags steht.

Listing 6.2: Zwei neue Attribute im Einsatz<input type="text" id="outer" form="testForm"

placeholder="Type something!"/><form id="testForm" >

<input type="button"onclick="alert(this.form.elements.outer.value)"value="Type and click!"/>

</form>

3Vgl. [Hic11a, 4.10.10 The datalist element]4RSA ist ein asymmetrisches Verschlüsselungsverfahren, welches auch für die digitale Signaturverwendet werden kann.

5Vgl. [Hic11a, 4.10.14 The keygen element]



Im Listing 6.2 wird ein Eingabeelement durch form=„testForm” dem darunterlie-genden Formular zugewiesen. Der Klick auf den Button zeigt, dass das Elementangesprochen und ausgelesen werden kann.6

Ein weiteres neues Attribut, welches im Listing verwendet wurde, ist placeholder.Der hier hinterlegte Text erscheint im Eingabefeld und verschwindet wenn der Nutzeres anklickt. Die Funktionalität hinter diesem Attribut wurde bisher mit JavaScriptrealisiert.7

HTML5-Formulare bieten weiterhin die Möglichkeit, dass Formularattribute durchdie neuen Attribute formaction, formenctype, formmethod, formnovalidate undformtarget überschrieben werden können. Diese Attribute können aber nur vonEingabefeldern der Typen image und submit getragen werden.8 Dies erlaubt bspw.die Verwendung von mehreren Buttons, welche ein Formular an unterschiedlicheURL’s senden.Die letzten Attribute, die hier aufgeführt werden sollen, sind required und pattern.Diese sind die ersten Möglichkeiten, die mit der neuen Formularvalidierung ein-geführt wurden, um Formulare vom Browser vor dem Absenden zu prüfen. Mitrequired kann ein Pflichtfeld markiert werden, welches nicht leer sein darf.9 MitHilfe von JavaScript Pattern können eigene Validierungsregeln für ein Element hin-terlegt werden.

Listing 6.3: Zwei neue Attribute im Einsatz.<form><input type="text" pattern="[0 -9]{2}.[0 -9]{2}.[0 -9]{4}"

placeholder="DD.MM.YYYY" required/><input type="submit" value="Check submitting"/>

</form>

Listing 6.3 zeigt dies anhand der Validierung einer Datumseingabe mit dem pattern-Attribut. Beim Versuch das Formular abzusenden, erscheint die Fehlermeldung, dassdas vorgegebene Format nicht eingehalten wurde.10

Diese neuen Attribute bieten auf eine einfache Weise die Möglichkeit, ein Formularvor dem Absenden ohne viel JavaScript zu validieren. Im Kapitel 6.4 werden weitereMöglichkeiten des neuen Validierungs-API’s vorgestellt.

6.3 Input-TypenEine weitere interessante Neuerung im Bereich der Formulare ist die Erweiterungder möglichen Typen des Elements <input>. Dies ist der heutigen Vielzahl an Ein-gabemöglichkeiten geschuldet. So musste bislang der Standardtyp text für jedwede

6Vgl. [Hic11a, 4.10.18 Association of controls and forms]7Vgl. [Hic11a, 4.10.7.2.12 The placeholder attribute]8Vgl. [Hic11a, 4.10.7.1.20 Image Button state] and [Hic11a, 4.10.7.1.19 Submit Button state]9Vgl. [Hic11a, 4.10.7.2.6 The required attribute]

10Vgl. [Hic11a, 4.10.7.2.9 The pattern attribute]



Eingabe genutzt werden. Dies ändert sich mit HTML5, da die folgenden 13 Typenhinzugefügt wurden:

• search• tel• url• email

• number• range• color• date

• month• week• time• datetime

• datetime-local

Diese neuen Typen ermöglichen es, dass browserinterne Widgets für die Nutzerein-gabe verwendet werden können. Bisher wurden bspw. die von Webseiten genutztenDatepicker mithilfe von JavaScript bereitgestellt. Die Eingabefelder, welche einemder sechs neuen Typen für Zeitangaben angehören, werden bereits vom BrowserOpera mit einem Datepicker ausgestattet.Wichtig hierbei ist, dass die Darstellung nicht in der Spezifikation geregelt wurde. Essind daher Unterschiede in den Browsern absehbar. So stellt der Browser Chromebspw. keinen Datepicker, sondern kleine Buttons zum Auf- und Abwärtsschaltenam Ende des Eingabefeldes dar. Felder vom Typ search werden auf Mac OS Xsystemweit gleich dargestellt. Das heißt, eigene Styleangaben werden ignoriert.Die unterschiedlichen Typen ermöglichen es auch, dass mobile Geräte, etwa mitTouchscreen, die Darstellung der Tastatur anpassen können. So wird beim number-Typ beim Android 2.2 Browser die Tastatur mit Zahlen eingeblendet.Die Darstellung und Unterstützung dieser neuen Input-Typen variiert zwischen denBrowsern und Systemen noch sehr stark. So ist die Unterstützung in Opera undChrome sowie beim iPhone sehr weit fortgeschritten, was aber nicht mit optimalgleichzusetzen ist.Als Letztes sei noch genannt, dass die Typen url und email sowie number und rangebereits Standardvalidierungsregeln unterliegen. Inwieweit diese beeinflusst oder ab-geändert werden können, wird das folgende Kapitel verdeutlichen.11

6.4 FormularvalidierungDie Validierung von Formularen vor dem Absenden war bisher nur mit JavaScriptmöglich. HTML5 ändert dies nun und stellt ein Validierungs-API bereit mit demder Browser die Prüfung übernimmt. Dieses bietet die Möglichkeit der automati-schen und der manuellen Validierung von Formularen. Dabei ist wichtig, dass eineserverseitige Validierung der empfangenen Daten weiterhin notwendig ist.

6.4.1 Automatische Validierung

Einige Eingabefeld-Typen haben bereits hinterlegte Validierungsregeln. Diese greifenaber nur, wenn das betreffende Feld einem Formular zugeordnet ist, es einen Namenhat und nicht die Attribute disabled oder/und readonly trägt. Wenn diese Regeln

11Vgl. [Hic11a, 4.10.7 The input element]



zutreffen, wird das Feld automatisch validiert ohne das die Validierung manuellaktiviert werden muss.Die Eigenschaft ele.willValidate12 verrät, ob ein Element automatisch validiertwird oder nicht. Falls die automatische Validierung explizit deaktiviert werden soll,kann dies entweder global für das Formular oder nur für ein Element geschehen,in dem das Attribut novalidate gesetzt wird. Diese Eigenschaft kann auch durcheinen Button mit dem Attribut formnovalidate verändert werden.

6.4.2 Manuelle Validierung

Das Validierungs-API bietet aber auch die Möglichkeit, dass Formulare manuellvalidiert werden können. Die bereitgestellten Funktionen können auf einzelne For-mularelemente, <fieldset>’s oder ganze Formulare angewandt werden.Eigene Validierungsregeln können mit JavaScript erstellt oder als JavaScript Pat-tern im pattern-Attribut des Elements hinterlegt werden. Damit die Meldungenan die Nutzer so einheitlich wie möglich gehalten werden können, besteht durchden Aufruf von ele.validationMessage der Zugriff auf die aktuell gültige Validie-rungsnachricht des Browsers zum entsprechenden Feldtyp. Eigene Validierungsnach-richten können mit ele.setCustomValidity(’Fehlermeldung’) pro Element oderFieldset gesetzt werden.Um ein Feld zu prüfen, egal ob nach eigenen oder nach Standardregeln, bietet dasValidierungs-API die folgenden Möglichkeiten an:

• ele.validity.valid• ele.validity.checkValidity()• ele.validity.valueMissing• ele.validity.typeMismatch• ele.validity.patternMismatch

• ele.validity.tooLong• ele.validity.rangeUnderflow• ele.validity.rangeOverflow• ele.validity.stepMismatch• ele.validity.customError

Diese liefern entsprechend true oder false zurück. Die gesamte Fehlerbehandlungs-routine wird nur durch ele.validity.checkValidity() ausgelöst. Alle anderenAufrufe validieren die Eingabe im Hintergrund und führen nicht zum Feuern desInvalid-Events und einer Fehlermeldung.13

12ele steht in diesem Zusammenhang für das Element, welches bspw. mitdocument.getElementById(ID) selektiert werden kann.

13Vgl. [Hic11a, 4.10.21 Constraints]


7 Multimedia-ElementeDie Nutzung von multimedialen Inhalten wie Video und Audio war bisher nur aufUmwegen im Web möglich. Dabei kam oft das Flash-Plugin zum Einsatz, welchesaber nur eine proprietäre Lösung darstellt. HTML5 ermöglicht nun die native Ein-bindung dieser Inhalte in eine Webseite und verdrängt Flash im Bereich der multi-medialen Inhalte auf den Platz der Notfall- oder Fallback-Lösung. Die großen Video-plattformen wie YouTube1 oder Vimeo2 setzen bereits diese neue Möglichkeit derIntegration ein. Welche HTML-Elemente eine Rolle spielen und wie sie mit JavaS-cript beeinflusst werden können, wird in diesem Kapitel näher betrachtet.Multimediale Inhalte können aber auch komplexerer Natur als nur Audio und Videosein. Hierbei könnte es sich bspw. um JavaApplets, Flash Applikationen oder anderePlugin-Inhalte handeln. Für solche Fälle hält HTML5 zwei weitere Elemente bereit,welche im letzten Abschnitt des Kapitels beschrieben werden.

7.1 Die HTML-Elemente und ihre AttributeDie neuen Elemente für Audio- und Video-Inhalte sind <video> und <audio>. Bei-de Elemente ähneln sich in ihren Attributen und ihrer Verwendung sehr stark. Sokönnen bei beiden Elementen die Mediadateien entweder per src-Attribut oder<source>-Element angegeben werden. Durch die Verwendung des <source>-Elementskönnen, wie im folgenden Listing dargestellt, mehrere Quelldateien angegeben wer-den, da nicht jeder Browser alle möglichen Formate unterstützt.

Listing 7.1: Verwendung des <source>-Elements<video controls><source src="movie.ogg" type="video/ogg;codecs=’theora , vorbis ’"/>

<source src="movie.mp4" type="video/mp4" /><source src="movie.webm" type="video/webm" />

</video>

Der Browser wählt dann die erste abspielbare Möglichkeit aus. Hierzu gibt es einfestgeschriebenes Vorgehen, in dem der Browser beginnt die Datei herunterzuladenund währenddessen entscheidet, ob sie abspielfähig ist. Um das ganze Vorgehenetwas zu erleichtern und zu beschleunigen, können die Attribute media und typeverwendet werden.

1Siehe [CZ10]2Siehe [Dou10]


7. Multimedia-Elemente Fachhochschule Schmalkalden WS 2011/12

Das media-Attribut kann Media Queries3, wie aus dem CSS bekannt, beinhal-ten. Durch die Verwendung von bspw. media=”handheld”, media=”screen” odermedia=”all” kann eine Medienquelle bestimmten Geräten zugewiesen werden. Diesist vor allem im mobilen Bereich von Nutzen, da so ein Video mit geringerer Auflö-sung für ein Handy bereitgestellt werden könnte.Es ist bisher nicht gelungen, ein einheitliches Videoformat festzulegen und nicht je-der Browser kann alle Videoformate und Codecs abspielen, daher unterstützt dastype-Attribut die Quellenauswahl des Browsers. Dabei darf das Attribut nur va-lide MIME-Typen nach RFC42814 enthalten. Wie das Listing 7.1 zeigt, kann essich dabei nur um die Angabe des Containerformats wie video/webm und auch umzusätzliche Informationen zum Codec handeln.5

Die folgende Tabelle führt die möglichen Audio- und Videoformate mit ihrer Brow-serunterstützung auf.

Codec/Format IE Firefox Opera Chrome SafariTheora/Vorbis − 3.5+ 10.5+ 3.0+ ∼H.264/AAC 9.0+ − − 3.0+ 3.1+WebM − 4.0+ 10.6+ 6.0+ ∼MP3 9.0+ − − 3.0+ 3.0+WAV ∼ 3.5+ 10.5+ 3.0+ 3.0+

Tabelle 7.1: Browserunterstützung der Formate (in Anlehnung an:[Krö11b, S. 273]und [Ref11])

Die in der Tabelle 7.1 mit einer Tilde gekennzeichneten Browser bilden eine Ausnah-me. Sie können das entsprechende Format nicht nativ abspielen, sondern nur sobaldder Codec auf dem Computer verfügbar ist.Die Video- und Audio-HTML-Elemente sind sehr stark miteinander verzahnt. Dieswird nicht nur im gleichen Aufbau, den gleichen Attributen und der ähnlichen Ver-wendung deutlich, sondern auch dadurch, dass ein <audio>-Element Videoquellenwiedergeben kann. Der einzige Unterschied in diesem Fall besteht darin, dass das<audio>-Element keinen Bereich für die Anzeige des Videobildes besitzt.Eine Besonderheit des Audio-Elements ist der eigene Konstruktor. Durch den Aufrufvon new Audio(’music.ogg’).play() kann eine Musikdatei geladen und gleichabgespielt werden. Dies ermöglicht den eventgetriebenen Einsatz von Audioinhaltenbspw. in Spielen oder als Feedback in Anwendungen, ohne das diese im Quellcodestehen müssen.6

Listing 7.2: Untertitel für ein Video<video src="movie.ogg"><track kind="subtitles" src="subtitles.de.vtt" />

3Siehe http://www.w3.org/TR/css3-mediaqueries/4Siehe http://tools.ietf.org/html/rfc42815Vgl. [Hic11a, 4.8.8 The source element]6Vgl. [Hic11a, 4.8.7 The audio element]


http://www.w3.org/TR/css3-mediaqueries/

http://tools.ietf.org/html/rfc4281


<track kind="captions" src="captions.de.vtt" /><track kind="metadata" src="metaInfo.de.vtt" />

</video>

Das HTML-Element <track> ist speziell für den Einsatz mit dem Video-Elementgedacht. Es dient zur zeitgesteuerten Anzeige von Inhalten wie bspw. Untertiteln,Beschreibungen, Metadaten oder Beschriftungen. Das hierfür verwendete Formatheißt Web Video Text Tracks und wird in der HTML-Fassung der WHATWG spezi-fiziert. Es unterliegt derzeit noch großen Änderungen und ist bisher in noch keinemBrowser vollständig implementiert.7

Ein weiterer Unterschied der beiden Elemente liegt im controls-Attribut. Diesesdient zur Einblendung des browsereigenen Players. Falls das Attribut bei einemVideo fehlt, wird der Player zwar nicht angezeigt, aber trotzdem das Video. ImGegensatz dazu ist das Audio-Element bei einem Fehlen dieses Attributs nicht aufder Webseite zu sehen. Die Steuerung der Medien kann dann über einen eigenenPlayer, ein separates Browserinterface oder durch JavaScript erfolgen. Hierzu wirddas Media-API benötigt, welches in den folgenden Abschnitten beleuchtet wird.

7.2 Media-APIDas vorhergehende Kapitel hat bereits gezeigt, dass die Elemente <video> und<audio> mehr Gemeinsamkeiten als Unterschiede haben. So ist es auch bei ihremJavaScript-API.Der einzige Unterschied liegt darin, dass ein Video-Element die Eigenschaften videoWidth und videoHeight besitzt, welche für die Auflösung des Videos stehen undnicht für die Größe der Darstellung.8

Das Media-API wird dann interessant, wenn bspw. ein eigener und nicht der brow-serinterne Player für die Wiedergabe verwendet werden soll. Dieser kann dann ohneProbleme in das Seitendesign eingearbeitet werden. Alle nachfolgenden Angabenwerden am Beispiel des Audio-Elements behandelt, gelten aber genauso für Video-Elemente.Die zwei Methoden, um ein Audio-Element abzuspielen, sind audio.play() undaudio.pause(). Um herauszufinden, ob ein Media-Element bereits abgespielt wird,ist die boolsche Eigenschaft audio.paused vorhanden.Mit audio.defaultPlaybackRate [= value] kann eine Abspielgeschwindigkeit alsStandard festgelegt werden. Die Eigenschaft audio.playbackRate [= value] be-zieht sich hingegen auf die aktuelle Abspielgeschwindigkeit des Mediums in Bezugauf eine Nutzereingabe. Beide Eigenschaften sind immer als Vielfaches der dateiei-genen Basisgeschwindigkeit zu verstehen.Die Lautstärke eines Mediums kann mit audio.volume [= value] beeinflusst wer-den. Die dafür vergebenen Werte müssen sich im Bereich von 0.0 bis 1.0 befinden.Mit audio.muted [= true/false] kann das Medium lautlos gestellt werden.

7Vgl. [Hic11a, 4.8.9 The track element] und [Hic11a, 4.8.10.13 WebVTT]8Vgl. [Hic11a, 4.8.6 The video element]



Die Länge eines Audiofiles ist in der Eigenschaft audio.duration zu finden. Dieaktuelle Abspielposition in Sekunden kann mit audio.currentTime [= value] so-wohl ausgelesen als auch neu gesetzt werden.Es sind noch weitere Methoden und Eigenschaften wie audio.load([value]),audio.autoplay oder audio.loop der Media-Elemente vorhanden. Diese werdenaber nicht näher beleuchtet, da es sich meist um boolsche Eigenschaften oder Zeit-angaben handelt, welche selbsterklärend sind.Viel wichtiger sind die folgenden Statuswerte eines Media-Elements, welche in dreiEigenschaften gesplittet sind. Fehlermeldungen befinden sich in audio.error, dieNetzwerkaktivitäten werden durch audio.networkState und der Ladezustand desMedien-Elements durch audio.readyState repräsentiert. Dabei können die folgen-den Werte angenommen werden:audio.error

• keine Fehler (null)• MEDIA_ERR_ABORTED (1)• MEDIA_ERR_NETWORK (2)• MEDIA_ERR_DECODE (3)• MEDIA_ERR_SRC_NOT_SUPPORTED (4)

audio.networkState• NETWORK_EMPTY (0)• NETWORK_IDLE (1)• NETWORK_LOADING (2)• NETWORK_NO_SOURCE (3)

audio.readyState• HAVE_NOTHING (0)• HAVE_METADATA (1)• HAVE_CURRENT_DATA (2)• HAVE_FUTURE_DATA (3)• HAVE_ENOUGH_DATA (4)

Neben diesen Statusmeldungen feuert ein Media-Element verschiedene Events wieloadstart, loadedmetadata, play und weitere. Diese sind bei der Programmierungeines eigenen Players sehr hilfreich.9

7.3 Prototyp eines VideoplayersDie Spezifizierung der HTML-Elemente für multimediale Inhalte ermöglicht nichtnur die grafische Anpassung mit CSS, sondern auch die komplette Integration inWebseiten und Applikationen mithilfe des Media-API. Als Videoplayer kann der

9Vgl. [Hic11a, 4.8.10 Media elements]



browserinterne, eine HTML5-Videoplayer Bibliothek10 oder eine Eigenentwicklungdienen. Daher soll ein einfacher, mit CSS angepasster Videoplayer erstellt werden,welcher der Abbildung 7.1 entspricht.11

Abbildung 7.1: Screenshot des Player-Prototypen

Wie der Screenshot zeigt, besitzt der Prototyp einen Play- und einen Mute-Buttonsowie eine Zeitanzeige. Für eine derartige Darstellung könnte das HTML-Grundgerüstwie folgt aussehen:

Listing 7.3: HTML-Grundgerüst des Prototypen<video width="400" height="225" id="video"

poster="../../ res/images/bigbugbunny.jpg"><source src="../../ res/video.ogv" />

</video><div id="controlContainer"><button id="playButton" type="button" title="Abspielen">play!</button>

<div id="time"><span id="shown">00:00</span>/<span id="duration"></span>

</div><button id="muteButton" type="button" title="Mute">mute!</button>

</div>

Der obere Teil des Listings 7.3 erstellt ein Video-Element mit einer festen Breite undHöhe sowie einem statischen Bild (poster). Zur Auszeichnung der Quelldatei wurdedas <source>-Element ohne Angabe der Attribute type oder media genutzt, da sichder Prototyp hauptsächlich mit der Steuerung der Media-Elemente und nicht mitder browserübergreifenden Bereitstellung von Videos beschäftigen soll.

10Ein aktueller Vergleich verschiedenster HTML5-Player ist auf http://praegnanz.de/html5video/ zu finden.

11Siehe https://github.com/FlorianX/HTML5-experiments/blob/master/media_api/index.html Der hier gezeigte Quellcode bedient mit einem Player jeweils ein Audio- und Video-Element.


http://praegnanz.de/html5video/

http://praegnanz.de/html5video/

https://github.com/FlorianX/HTML5-experiments/blob/master/media_api/index.html

https://github.com/FlorianX/HTML5-experiments/blob/master/media_api/index.html


Als nächstes wurde ein <div>-Container hinzugefügt, welcher den Player darstel-len soll und die Bedienelemente enthält. Die Elemente wurden mit einfachen CSS-Angaben wie Hintergrundfarbe, Schriftfarbe und Abständen versehen. Mit diesenwenigen Handgriffen ist ein Player bereits optisch fertiggestellt. Das Wichtigste, dieFunktionalität, fehlt jedoch und muss mit JavaScript hinterlegt werden.Zum besseren Handling der JavaScript Befehle wurde die Bibliothek jQuery zu-hilfe genommen. Die folgenden Anweisungen dürfen erst ausgeführt werden, wenndie Seite vollständig geladen ist. Daher wurden sie innerhalb der jQuery-Methode$(document).ready(function(){ ...}) notiert.

Listing 7.4: Videolaufzeit ermittelnvar element = $(’#video ’).get(0);$(element).bind(’loadedmetadata ’, function (){$(’#duration ’).html(element.duration);

});

Das Listing 7.4 zeigt die im vorhergehenden Kapitel angesprochene Nutzung derMedia-Events. Mit Hilfe der jQuery-Methode bind() kann eine Funktion an einEvent gebunden werden. Sobald also die Metadaten des Videos geladen sind, feuertdieses Event, die Gesamtlänge des Videos wird ausgelesen und an die entsprechendeStelle im HTML geschrieben.

Listing 7.5: Die Funktionalität des Play-Buttons$(’#playButton ’).click(function (){var interval;if(element.paused){element.play();$(this).html(’stop!’);interval = setInterval(function (){$(’#shown ’).html(element.currentTime);

}, 1000);}else{clearInterval(interval);element.pause();$(this).html(’play!’);

}});

Der Play-Button erhält durch das Listing 7.5 seine Funktionalität. Durch den jQuery-Aufruf wird ein click-Event an den Button gebunden. Feuert das Event, löst es dieanonyme Funktion aus, welche prüft, ob das Video pausiert ist. Liefert diese Bedin-gung true zurück wird element.play(), ansonsten element.pause() ausgeführt.Außerdem wird die Beschriftung des Buttons geändert und ein Intervall erzeugt, mitdem die aktuelle Abspielzeit des Videos im HTML erneuert wird.



Listing 7.6: Stummschaltung des Videos$(’#muteButton ’).click(function (){if(element.muted){$(this).html(’mute!’);element.muted = false;

}else{$(this).html(’unmute!’);element.muted = true;

}});

Die beschriebene Funktionalität des Play-Buttons wurde in Listing 7.6 auf den But-ton für die Stummschaltung angewandt.Dieser Prototyp zeigt, dass das Media-API die Erstellung eines Players auf einfa-che Weise ermöglicht, egal ob für Video- oder Audio-Inhalte. Somit können durchHTML5 nicht nur die Media-Elemente eingebunden, sondern sie können viel mehrvollständig in eine Umgebung integriert werden. Welche zwei weiteren Möglichkeitenes zur Einbindung von multimedialen Inhalten noch gibt, zeigt das folgende Kapitel.

7.4 Weitere Möglichkeiten der InhaltseinbindungMit HTML5 wird erstmals das weitverbreitete und in jedem Browser funktionierende<embed>-Element in den HTML-Standard aufgenommen. Es dient hauptsächlichzur Einbindung von Flash, kann aber auch mit anderen Arten von Plugin-Inhaltenumgehen. Neben den Attributen height, width und src kann mit type der MIME-Typ des Inhalts angegeben werden. Eine Besonderheit ist, dass es Attribute tragenkann, die an das Plugin übergeben werden sollen und nicht dem HTML-Standardentstammen.12

Die Alternative zu diesem Element ist das <object>. Werte oder Parameter, die anden eingebundenen Inhalt übergeben werden sollen, stehen hierbei in einem eigenen<param>-Element innerhalb des Objektes. Das <object> kann im Gegensatz zum<embed> Ersatzinhalte tragen. Außerdem kann es neben der Nutzung für Plugin-Inhalte auch für JavaApplets, Bilder und ganze HTML-Dokumente genutzt werden.Das <object>-Element kann auch als Formularelement genutzt und validiert wer-den. Dieses Element scheint die Allzweckwaffe von HTML5 zu sein, denn es kannnicht nur Flash einbinden, sondern macht HTML-Elemente wie <img> und <iframe>eigentlich überflüssig.13

Hierbei muss aber bedacht werden, dass jedes HTML-Element neben einem Zweckauch eine semantische Bedeutung hat und dementsprechend verwendet werden soll-te. Beide hier vorgestellten Elemente dienen zur Einbindung externer Inhalte. Alsbessere Wahl zeichnet sich in diesem Fall das <object>-Element aus, da es die Be-reitstellung von Ersatzinhalten ermöglicht.

12Vgl. [Hic11a, 4.8.3 The embed element]13Vgl. [Hic11a, 4.8.4 The object element]


8 CanvasDie im letzten Kapitel vorgestellten neuen Multimedia-Elemente sind die erstenGegner von Flash die HTML5 bereithält. In diesem Kapitel steht das Canvas alsneues Allroundtalent und damit als Flash-Konkurrent im Mittelpunkt. Neben denGrundlagen und der API-Einführung wird ein Prototyp zur Videobearbeitung imBrowser vorgestellt. Der letzte Abschnitt zeigt weitere Nutzungsmöglichkeiten desCanvas durch verschiedene Frameworks auf.

8.1 GrundlagenDas Canvas wurde ursprünglich von Apple entwickelt und befand sich bereits 2005 inAnsätzen in einer Spezifikationsversion der WHATWG.1 Dies unterstreicht die Kon-kurrentenposition gegenüber Flash, da Apple bisher auf keiner Version des iPhonesund Co Flash zulässt und gleichzeitig Erfinder der Alternative ist.2

Das HTML-Element <canvas> stellt seine komplette Größe, die mit height undwidth angegeben wurde, als Malfläche zur Verfügung. Weiterhin besteht die Mög-lichkeit, dass das Element Ersatzinhalte tragen und den zum Zeichnen benötigtenRendering Context bereitstellen kann. Die Malfläche wird als Bitmap bezeichnet,über welcher ein contextabhängiges Koordinatensystem liegt. Die folgenden zweiContexte befinden sich derzeit in der Spezifikationsphase:

• 2dWie der Name schon sagt, stellt dieser Context Mittel für die zwei dimensionaleBearbeitung und Darstellung von Grafiken für das Canvas zur Verfügung. Erist Bestandteil der HTML-Spezifikation der WHATWG und wird beim W3Cals separate Spezifikation geführt. Die Unterstützung in den großen Browsernist sehr weit fortgeschritten.

• WebGLBei WebGL handelt es sich um einen 3D-Context. Dieser wird von der KhronosGroup spezifiziert und basiert auf OpenGL ES 2.0. Alle großen Browser, bisauf den Internet Explorer, unterstützen bereits Teile dieses Contextes.3

Zu beachten ist, dass sich die Operationen, die die Contexte bereitstellen, auf dasGitternetz auswirken. Das heißt, wenn eine Skalierung ausgeführt wird, verändertsich das Gitternetz nicht, aber die Bitmap.4

1Siehe http://www.whatwg.org/specs/web-apps/2005-09-01/#dynamic2Im September 2011 wurde der neue Adobe Flash Media Server 4.5 vorgestellt, welcher diesesProblem durch die gezielte Auslieferung eines iOS-freundlichen Formats lösen soll. Vgl. [OP11]

3Siehe http://www.khronos.org/registry/webgl/specs/latest/4Vgl. [Hic11a, 4.8.11 The canvas element]


http://www.whatwg.org/specs/web-apps/2005-09-01/#dynamic

http://www.khronos.org/registry/webgl/specs/latest/

8. Canvas Fachhochschule Schmalkalden WS 2011/12

Das Canvas wird oft auch mit einer Scalable Vector Graphic verglichen oder gar alssolche aufgefasst. Dies ist aber nicht korrekt, da ein Browser die Möglichkeit besitzteine SVG komplett neu zu rendern, wenn sich ein Attribut des SVG-Objekts ändert.Das DOM stellt im Falle von SVG eine Art Szenegraph dar.Ein Canvas vergisst hingegen alle Operationen die durchgeführt wurden, weshalballes was gezeichnet wurde nicht mehr änderbar oder rekonstruierbar ist. Falls alsoein bereits gezeichnetes Objekt verschoben werden soll, muss die gesamte Szeneneu erstellt werden. Diese Funktionalität kann nur durch JavaScript bereitgestelltwerden, da ein Canvas keinen Szenegraphen besitzt.

8.2 Canvas API und der 2D-ContextDas Canvas-Element besitzt neben den beiden Variablen width und height, die dieBitmap löschen, sobald einer der Werte neu gesetzt wird5, nur drei Methoden. Dabeierstellt canvas.toDataURL(type [, ...]) aus der Bitmap eine DataURL6, welcheals Quelle für das <img>-Element oder für CSS Angaben dienen kann.Mit canvas.toBlob(callback [, type, ...]) wird ein JavaScript Objekt erzeugt,dass das Bild der Bitmap enthält. Außerdem wird das Objekt an eine Callback-Funktion weitergereicht.Die letzte und wichtigste Methode des Canvas ist canvas.getContext(contextId[, ...]). Durch die Angabe von 2d oder webgl liefert diese Funktion den benötig-ten Zeichen-Context zurück.Das API des Canvas ist sehr kurz gehalten, um so größer ist aber das des 2D-Contextes. Dieser stellt eine Reihe von Funktionen zum Zeichnen von 2D-Grafikenzur Verfügung. Das API wurde sehr minimalistisch entworfen und ist daher sehrumständlich. Es stellt nur die nötigsten Funktionen bereit, um alle geometrischenFiguren abbilden zu können. Um komfortabel mit dem API arbeiten zu können, sindFrameworks fast Pflicht. Im Folgenden wird nur eine Auswahl der Funktionen ge-nannt und teilweise vorgestellt, da eine Betrachtung aller Methoden zu umfangreichund zu context-spezifisch wäre. Außerdem beziehen sich alle nachfolgenden Aufrufeauf den Context und müssen als context.METHODE ausgeführt werden.Der einfachste Weg den Context zu nutzen ist mit drawImage(image, x, y [,...]) ein Bild zu zeichnen. Falls bereits ein ImageData-Objekt vorhanden ist , kannauch putImageData(imageData, x, y [, ...]) genutzt werden. Die Angaben xund y stehen immer für die Position im Gitternetz in Bezug zur linken oberen Ecke.Mit fillRect(x, y, w, h) und strokeRect(x, y, w, h) können gefüllte Recht-ecke oder nur deren Rahmen gezeichnet werden. Mit Hilfe von clearRect(x, y,w, h) kann ein bestimmter Bereich gelöscht werden. Dabei stehen die Angaben wund h für die Breite und Höhe des Rechtecks.Der 2D-Context bietet auch die Möglichkeit Pfade zu erstellen. Diese sollten mitbeginPath() beginnen und mit closePath() enden. Zum Zeichnen und Bewegen

5egal ob gleiche oder neue Werte6Hierbei wird das Bild Base64 kodiert und als URL repräsentiert. Eine derartige URL sieht wiefolgt aus: ’data:image/png;base64,RgABAQAAUhEUgAAAw0KGgoAAAANSIC. . . ’



können dann lineTo(x, y) und moveTo(x, y) verwendet werden. Weiterhin sindFunktionen für quadratische und Bézier-Kurven sowie für Kreisbögen etc. vorhan-den.Neben diesen einfachen Methoden bietet der Context auch Transformationen an. Soist eine Skalierung mit scale(x, y), eine Rotation mit rotate(angle) und eineVerschiebung mit translate(x, y) möglich. Außerdem können die Transformati-onsmatrizen auch direkt angegeben werden. Dies geschieht mit setTransform(a,b, c, d, e, f) und nicht mit transform(a, b, c, d, e, f), denn Letzteresmultipliziert die vorhandene Matrix mit den übergebenen Werten.Durch die Methoden save() und restore() kann der Context-Zustand wie beiOpenGl im Stack ablegt und wieder abgerufen werden. Dies erleichtert komplexeOperationen ungemein.Abschließend sei noch ohne Methoden-Nennung erwähnt, dass der 2D-Context ver-schiedene weitere Funktionen für Texte, Schatten, Muster, Farbverläufe und dasCompositing etc. bereithält.7

8.3 Prototyp zur Videobearbeitung im BrowserDieser Abschnitt beschäftigt sich mit einem Prototypen zur Videobearbeitung imBrowser.8 Es soll die Leistungsfähigkeit und die Möglichkeiten der HTML-Elementein Verbindung mit JavaScript dargestellt werden. Auch dieser Prototyp nutzt jQueryals Hilfsmittel für das Traversieren und die Eventbindung. Die folgende Abbildungzeigt den fertigen Prototypen in Aktion.

Abbildung 8.1: Screenshot des Prototypen

Bevor eine derartige Darstellung möglich ist, muss das HTML-Grundgerüst wie folgterstellt werden: Hierzu wird ein Video-Element, welches als Datenquelle dienen wird,und ein Canvas zur Präsentation der Effekte benötigt. Beide Elemente werden mitden gleichen Dimensionen erstellt.

7Vgl. [Hic11a, 4.8.11.1 The 2D context]8Siehe https://github.com/FlorianX/HTML5-experiments/blob/master/canvas/video/index.html


https://github.com/FlorianX/HTML5-experiments/blob/master/canvas/video/index.html

https://github.com/FlorianX/HTML5-experiments/blob/master/canvas/video/index.html


Listing 8.1: HTML-Grundgerüst<video width="400" height="225" controls id="origVideo"><source src="../../ res/video.ogv">

</video><canvas width="400" height="225" id="canvasVideo">Your browser does not support this graphic.

</canvas>

Die angesprochenen Effekte werden vor dem Gebrauch als Funktionen im Objekt9

effects gespeichert. Das Listing 8.2 zeigt einen Teil des Objektes mit den Funktio-nen für das Invertieren und die Grauskalierung des Videos. Eine weitere Funktionfür die Kantendetektion mit verschiedenen Operatoren ist im vollständigen Prototypzu finden und wurde aufgrund des Umfangs hier ausgelassen.

Listing 8.2: Definition der Effekte als Objektvar effects = {none: function (data){

return data;},

invert: function (data){var length = data.length;var counter = 0;while(counter < length){for(var i=0; i < 4; i++){data[counter] = (i == 3)? data[counter] :255 - data[counter ];

counter ++;}

}return data;

},

grey: function (data){var length = data.length;for (var i = 0; i < length; i += 4){

var r = data[i + 0]; // Rvar g = data[i + 1]; // Gvar b = data[i + 2]; // Bvar a = data[i + 3]; // Avar grey = ( r + g + b ) / 3;

data[i + 0] = grey; // Rdata[i + 1] = grey; // G

9JavaScript Objekte entsprechen in anderen Programmiersprachen bspw. einem assoziativen Ar-ray.



data[i + 2] = grey; // Bdata[i + 3] = 255; // A

}return data;

},[...]

}

Der hier verwendete data Parameter ist das CanvasPixelArray des ImageData-Objektes, welches später ausgelesen und an die hier vorgestellten Effekte übergebenwird. Dieses Array ist eindimensional und enthält die jeweiligen Werte für den Rot-,Grün-, Blau- und Alphakanal eines jeden Pixels fortlaufend.Zur Invertierung des Video-Frames wurde der aktuelle Wert eines jeden Kanals von255 subtrahiert. Eine Ausnahme bildet der Alphakanal, welcher nicht verändert wur-de. Die Erstellung des Grauwertbildes erfolgt durch die Addition der drei Farbkanäleund Division durch drei. Die jeweiligen Werte wurden dann im Array geändert. DerAlphakanal wird in diesem Fall auf das Maximum von 255 gesetzt.Mit dem folgenden Listing wird ein verstecktes Canvas erzeugt, welches später alsVideo-Zwischenspeicher und Pixelquelle dienen wird. Außerdem wurden die HTML-Elemente in JavaScript Variablen abgelegt, um besser auf sie zugreifen zu können.Das versteckte Canvas wird mit den selben Dimensionen erzeugt, wie das sichtbare.

Listing 8.3: Erzeugen eines nicht sichtbaren Canvasvar origVideo = document.getElementById(’origVideo ’);var canvasVideo = document.getElementById(’canvasVideo ’);var contextCanvasVideo = canvasVideo.getContext(’2d’);

var hiddenCanvas = document.createElement(’canvas ’);var contextHiddenCanvas = hiddenCanvas.getContext(’2d’);hiddenCanvas.width = canvasVideo.width;hiddenCanvas.height = canvasVideo.height;

Nachdem nun die Effekte und Variablen definiert wurden, muss ein Start für dieVideobearbeitung festgelegt werden. Dies geschieht im folgenden Listing:

Listing 8.4: HTML-Elemente mit Events versehenvar effect = ’none’;$(’#effect ’).bind(’change ’, function() {effect = $(’#effect ’).val();[...]

});var interval;$(’#origVideo ’).bind(’play’, function() {interval = setInterval(function(){drawToCanvas ();

}, 25);});



Für die Wahl des Effektes ist im HTML ein <select>-Feld vorhanden. Dieses wirdim Listing 8.4 mit einem change-Event ausgerüstet, welches bei einer Veränderungden neuen Wert für den Effekt im JavaScript setzt.Der letzte Teil des Listings 8.4 stattet das Video mit einem play Event aus. So-bald also das Video abgespielt wird, startet ein Intervall, der alle 25 Millisekundendie Funktion drawToCanvas() aufruft. Diese Funktion ist das zentrale Element desPrototypen und wird vom folgenden Listing gezeigt:

Listing 8.5: Die Zeichenfunktion des Prototypenfunction drawToCanvas (){

if(origVideo.paused || origVideo.ended){clearInterval(interval);

}

contextHiddenCanvas.drawImage(origVideo , 0,0, 400, 225);var imageData = contextHiddenCanvas.getImageData (0, 0,

400, 225);imageData.data = effects[effect ].apply(null ,[imageData.data , imageData.width ,imageData.height , matrix ]);

contextCanvasVideo.putImageData(imageData , 0, 0);}

Bei jedem Aufruf dieser Funktion wird zuerst geprüft, ob das Video angehaltenwurde. Ist dies der Fall, wird der erstellte Intervall gelöscht. Durch die folgende Zeilewird das Video als Bildquelle genutzt und auf das versteckte Canvas gezeichnet. ImNachfolgenden wird mit getImageData() ein ImageData-Objekt ausgelesen. DieserUmweg ist nötig, weil die Pixelwerte nicht aus einem Video gelesen werden können,sondern nur das Canvas eine derartige Funktion bereitstellt.Die so erhaltenen Pixelwerte werden nun durch apply(...) an die ausgewählteEffektfunktion weitergereicht. Diese berechnet die neuen Farbdaten und gibt siezurück. Mit der letzten Zeile des Listings werden die Daten dann auf das sichtbareCanvas geschrieben. Mit diesen Schritten ist eine Videobearbeitung auf Grundlagedes Canvas möglich.

Abbildung 8.2: Screenshot eines zweiten Prototypen



Dies lässt sich auch auf eine Bildbearbeitung herunterbrechen, wie ein weiterer Pro-totyp, welcher auf der Abbildung 8.2 zu sehen ist, zeigt.10 Die Möglichkeiten desCanvas als multimediales Werkzeug sind interessant und vielfältig. Was bereits jetztalles möglich ist, soll das folgende Kapitel zeigen.

8.4 Canvas Frameworks und deren MöglichkeitenDas Canvas und die Contexte sind in den neuen Browsern nativ verankert, wasein großer Vorteil gegenüber der Plugin-Nutzung von Flash ist. Da es bisher keinewirkliche Alternative zu Flash gab, war es in den nachfolgenden Anwendungsmög-lichkeiten meist zwingend notwendig auf dieses Medium auszuweichen. Dies ist dankdes Canvas nun nicht mehr notwendig.Das Canvas bietet durch die Low-Level-Konzipierung vielfältige Möglichkeiten derNutzung und das alles nativ vom Browser unterstützt. Die Masse der JavaScriptFrameworks für das Canvas wächst stetig an und abstrahiert dabei das API auf einbenutzerfreundlicheres Niveau. Daher sollen hier einige Frameworks kurz genanntwerden, um zu zeigen was bereits alles möglich ist.Schon eine kleine Bibliothek wie CanvasQuery11 ermöglicht eine bessere Bedienbar-keit des API in dem sie jQuery-ähnliche Befehlsketten integriert und so nur leichtabstrahiert. Die Frameworks EaselJS12, jCanvaScript13, LibCanvas14, bHive15 undjcotton16 besitzen weiterhin Möglichkeiten zur Erstellung von Animationen.Flash wird oft auch für Keyframe-Animationen genutzt. Das Framework Kapi17

stellt derartige Funktionalitäten für das Canvas zu Verfügung. Ein Szenegraph wirdim Projekt CAKE - Canvas Animation Kit Experiment18 entwickelt.

Abbildung 8.3: Screenshot von RGraph Diagrammen (Quelle: www.rgraph.net)

10Dieser ist unter der folgenden URL zufinden: https://github.com/FlorianX/HTML5-experiments/blob/master/canvas/image_processing/index.html

11https://gist.github.com/50513912http://easeljs.com/13http://jcscript.com/14https://github.com/theshock/libcanvas15http://www.bhivecanvas.com/16http://jcotton.sourceforge.net/index.htm17https://github.com/jeremyckahn/kapi18http://code.google.com/p/cakejs/


https://github.com/FlorianX/HTML5-experiments/blob/master/canvas/image_processing/index.html

https://github.com/FlorianX/HTML5-experiments/blob/master/canvas/image_processing/index.html

https://gist.github.com/505139

http://easeljs.com/

http://jcscript.com/

https://github.com/theshock/libcanvas

http://www.bhivecanvas.com/

http://jcotton.sourceforge.net/index.htm

https://github.com/jeremyckahn/kapi

http://code.google.com/p/cakejs/


Interaktive Diagramme wie es die Abbildung 8.3 zeigt können auf einfache Weisemit RGraph19 erstellt werden.Neben verschiedenen Canvas-Spielen wie Space Pirate Killer20 und dem NintendoSpiele Emulator JSNES21 sind bereits die ersten Spiele-Entwicklungsframeworks wieIMPACT 22, propulsion23 und xc.js24 vorhanden.25

Die genannten Frameworks sollen die Bandbreite zeigen auf welcher derzeit mitdem Canvas als Grundlage entwickelt wird. Viele dieser Entwicklungen überschnei-den sich mit den Anwendungsgebieten von Flash. Beim Canvas und den JavaScriptBibliotheken besteht aber der Vorteil, dass sie in jedem neueren Browser laufen unddamit plattformunabhängig sind. Der derzeitige Trend im Bereich des Computingstrebt hin zur Cloud und denWeb-Anwendungen. Dies wird durch die Möglichkeiten,die das Canvas in die HTML-Welt bringt, noch verstärkt.Abschließend sollen noch zwei bemerkenswerte Anschauungsbeispiele anhand derAbbildung 8.4 genannt werden, welche multimedial unterlegt zeigen, was derzeitmöglich ist. Ein Klick auf die Webseiten ist empfehlenswert, da die Screenshotsden entsprechenden Eindruck der Animationen und des Sounds nicht wiedergebenkönnen.

(a) Interaktives Musikerlebnis (Quelle: http://lights.elliegoulding.com/)

(b) Visualisierung des Google Suchaufkom-mens mit WebGL (Quelle: http://data-arts.appspot.com/globe-search)

Abbildung 8.4: Screenshots zweier Canvas Animationen

19http://www.rgraph.net/20http://stelter-media.de/space-pirat-killer/21http://fir.sh/projects/jsnes/22http://impactjs.com/23http://www.propulsionjs.com/24http://www.getxc.org/25Eine umfangreichere Übersicht über die derzeit vorhandenen Frameworks ist auf GitHub zu

finden: https://github.com/bebraw/jswiki/wiki/Game-Engines


http://lights.elliegoulding.com/

http://lights.elliegoulding.com/

http://data-arts.appspot.com/globe-search

http://data-arts.appspot.com/globe-search

http://www.rgraph.net/

http://stelter-media.de/space-pirat-killer/

http://fir.sh/projects/jsnes/

http://impactjs.com/

http://www.propulsionjs.com/

http://www.getxc.org/

https://github.com/bebraw/jswiki/wiki/Game-Engines

9 Weitere HTML5 API’s undFeatures

In den letzten Kapiteln wurden einige der vielen neuen Möglichkeiten die HTML5bietet genauer vorgestellt. Aufgrund der Vielzahl von Neuheiten wird dieses Kapi-tel weitere zusammengefasst vorstellen. Dies umfasst unter anderem Spezifikationenfür Offline-Applikationen, Drag&Drop-Funktionalitäten sowie neue Kommunikati-onsmöglichkeiten.

9.1 Offline TauglichkeitAls erstes sollen die neuen Offline-Fähigkeiten von Webapplikationen näher betrach-tet werden. Diese können im mobilen Leben ein entscheidendes Kriterium darstellen.Einfache Webseiten können durch die gezielte Anwendung folgender Techniken kurzeVerbindungsabbrüche oder ganze Zeiträume überbrücken.Die Offline Tauglichkeit geht einher mit der Datenspeicherung, welche in zwei Artenunterschieden werden kann. Zum einen in nutzer- und zum anderen in applikati-onsspezifische Daten. Der Application Cache zählt zu ersterer, alle weiteren Mög-lichkeiten zählen zur letzteren Art.Für die Überprüfung ob ein Browser on- oder offline ist, werden in der HTML-Spezifikation sogenannte Online- und Offline-Events sowie ein Netzwerk-Status spe-zifiziert. Dieses Wissen ist bspw. wichtig, wenn der Browser die Daten im Offline-Fallnur zwischenspeichern und sobald er wieder online ist mit dem Server synchronisie-ren soll.Der Netzwerk-Status kann mit navigator.onLine abgefragt werden. Dabei liefertdieser false, wenn er definitiv offline ist und true, wenn er online sein könnte.Zusätzlich feuern auf dem window-Objekt die Events offline und online.1

9.1.1 Application Cache

Der Application Cache ist also für die Applikationsdaten zuständig. Dies könntenBilder, HTML-, CSS- oder JavaScript-Dateien sein, die der Browser für den Offline-Zugriff vorrätig halten soll. Wichtig ist hierbei, dass dieser Cache nicht mit demBrowser-Cache verwechselt werden darf. Beim Application Cache legt der Entwicklerexplizit fest, was genau gecached werden soll und was nicht. Der Browser muss dieseDaten dann vorrätig halten, wenn der Nutzer dies erlaubt hat.

1Vgl. [Hic11a, 6.6.10 Browser state]


9. Weitere HTML5 API’s und Features Fachhochschule Schmalkalden WS 2011/12

Für diese Definition wird ein Cache Manifest benötigt, welches die Pfade der Res-sourcen enthält. Das Cache Manifest besitzt keine Dateiendung, wird UTF-8 kodiertund mit dem MIME-Typ text/cache-manifest ausgeliefert. Die Datei kann diefolgenden drei Abschnittstypen (mehrfach) enthalten:

• CACHE:In diesem Abschnitt müssen zwingend genaue Ressourcen angegeben werden,welche gecached werden sollen.

• NETWORK:Dieser Abschnitt kann auch Teilpfade enthalten und beschreibt alle Inhalte,die explizit vom Server geladen werden sollen.

• FALLBACK:Ersatzinhalte können in diesem Abschnitt für Ressourcen oder Teilpfade hin-terlegt werden.

Bei der Verwendung des Application Caches ist zu beachten, dass ein Update des Ca-ches nur erfolgt, wenn sich die Manifest-Datei ändert, nicht aber wenn sich Ressour-cen geändert haben. Ein manuelles Aktualisieren des Caches ist nur im JavaScriptdurch applicationCache.update() möglich. Der Browser bietet nur die Möglich-keit den Cache komplett zu löschen. Ein Cache Manifest für eine spirit@fhs-Webseitemit einem Blog, der nicht gecached werden soll, könnte wie folgt aussehen:

Listing 9.1: Möglicher Manifest-AufbauCACHE MANIFESTimages/spiritLogo.pngindex.htmlNETWORK:/blog/CACHE:partner.html# ErsatzinhalteFALLBACK:/ offlineMessage.html

Auf dem window.applicationCache-Objekt feuern verschiedene Events, die bspw.den Fortschritt der Cache-Erstellung melden. Außerdem kann der Status des Cachesmit Hilfe von applicationCache.status als Zahlencode ausgelesen werden.2

9.1.2 Web Storage

Web Storage ist der derzeit geläufigste und von den meisten Browsern unterstützteDatenspeicher im Browser. Die Datenspeicherung erfolgt in Form von Name-Wert-Paaren in einem Storage Objekt. Dafür stehen die globalen Objekte localStorageund sessionStorage zur Verfügung. Im Falle von sessionStorage werden die Da-ten nur für die aktuelle Session gespeichert und gelöscht, sobald das Fenster ge-schlossen wird. Für die Langzeitspeicherung ist localStorage vorgesehen.

2Vgl. [Hic11a, 6.6 Offline Web applications] und [Mah11b]



Der Zugriff auf diesen Datenspeicher ist nur von ein und derselben Webseite ausmöglich. Für die Zuordnung nutzt der Browser das verwendete Protokoll, den Hostund Port einer Webseite.Für die Bearbeitung des Datenspeichers stehen verschiedene Methoden zur Verfü-gung. So können mit setItem(key, data), getItem(key) und removeItem(key)einzelne Einträge gesetzt, gelesen und gelöscht werden. clear() setzt den gesamtenSpeicher der Webseite zurück. Diese Art der Datenspeicherung wird in der SpiritAndroid App verwendet und im Kapitel 10 in Aktion gezeigt.Events fehlen auch bei diesem HTML5-Feature nicht, sie feuern auf dem Eltern-objekt storage, sobald Änderungen an einem der beiden Speicher durchgeführtwerden. Dabei sind Informationen zum neuen und alten Wert, dem Schlüssel undder storageArea (local- oder sessionStorage) im Event enthalten.3

9.1.3 Alternativen

Für die Speicherung von Daten auf Clientseite gab es bis November 2010 noch zweiAlternativen: Web SQL und Indexed DB. Seitdem ist die Entwicklung des Web SQLStandards beim W3C eingestellt und es wird von einer Nutzung abgeraten. Zwarsind Implementierungen in Webkit-Browsern und Opera noch vorhanden, aber eineflächendeckende Unterstützung ist nicht mehr in Sicht.4

Als wirkliche Alternative ist also nur noch die Indexed DB vorhanden. Sie kann zuden NoSQL-Datenbanken gezählt werden und speichert die Daten als Objekte in ei-ner Schlüssel-Wert-Paar-Struktur ab. Der Unterschied zum Web Storage liegt darin,dass Felder innerhalb der abgelegten Daten mit Indiezes versehen werden könnenund ein Zeiger-Konzept vorhanden ist. Durch diese Änderungen ist der Datenspei-cher leistungsstärker und die Datenmenge kann leichter verwaltet werden.5

9.2 KommunikationsmöglichkeitenNeben diesen Möglichkeiten der offline Datenspeicherung versucht HTML5 auchProbleme der Kommunikation zwischen Fenstern, iFrames, Server und Client sowieüber verschiedene Domains hinweg zu lösen. Webseiten sind für die Browser in sichgeschlossene Einheiten, weshalb sie die Kommunikation und den Datenaustauschzwischen verschiedenen Quellen nicht zulassen.Damit dies aber ermöglicht werden kann und keine Sicherheitslücken wie Cross-Site-Scripting entstehen, führt HTML5 verschiedene neue Kommunikationsmöglichkeitenein.Die Kommunikation findet über das Senden von Nachrichten statt. Daher verwendenalle nachfolgend vorgestellten Varianten ein MessageEvent, welches feuert, wenn eineneue Nachricht im Fenster eintrifft.

3Vgl. [Hic11a, 12 Web storage] und [Mah11b]4Vgl. [Hic10]5Vgl. [MSG+11] und [Mah11b]



9.2.1 WebMessaging API

Das WebMessaging API stellt Methoden zur Verfügung, durch die eine Webseite miteinem eingebetteten iFrame kommunizieren kann. Wenn diese beiden Applikationenunterschiedliche Origins6 haben, würde eine Kommunikation als Cross-Site-Scriptingverstanden und vom Browser geblockt werden.Die WebMessaging API spezifiziert zwei Modelle - das Cross-Document und dasChannel Messaging. Mit Hilfe der Methode postMessage(data, receive_origin[,transfer]) kann im ersten Fall eine Nachricht versendet werden. Diese Nachrichtkann dann durch die Registrierung des message-Eventhandlers auf dem window-Objekt als MessageEvent empfangen und weiterverarbeitet werden wie dies dasfolgende Listing zeigt7:

Listing 9.2: Beispiel des Cross-Document Messagings// JS auf http :// example.de/index.htmliFrame.contentWindow.postMessage(’HTML5 for spirit@fhs ’,’http :// spirit.de/’)

// JS auf http :// spirit.de/index.htmlwindow.addEventListener(’message ’, function(event){

var sender = event.source;sender.postMessage(’YES!’, event.origin);

}, false);

Das Channel Messaging arbeitet hingegen mit einem Zwei-Wege-Kanal. Für die Iden-tifizierung dienen die Ports für Anfang und Ende des Kanals. Die Erzeugung einessolchen Kanals geschieht mit var channel = new MessageChannel();. Die Varia-ble channel enthält dann zwei Ports, wovon einer lokal verwendet und der anderebspw. mit Cross-Document Messaging an einen Empfänger versendet werden kann.8Nun können Eventhandler an die Ports gebunden werden, welche die Nachrichtenempfangen.9

9.2.2 Web Sockets

HTML5 bringt das Konzept der Web Sockets in den Browser. Hierbei handelt es sichum ein Protokoll, welches von der IETF10 entwickelt wird und eine bi-direktionaleVerbindung zwischen Browser und Server ermöglicht. Die WHATWG und das W3Cspezifizieren für dieses Protokoll die JavaScript Schnittstelle, durch welche eine dau-erhafte Verbindung mit einem TCP11-Socket aus dem Browser heraus erstellt werden

6Origin ist wie beim WebStorage die Zusammensetzung aus Protokoll, Host und Port einer Web-seite. Auch http://spirit.de und https://spirit.de sind somit unterschiedliche Origins.

7Vgl. [Hic11a, 11.4 Cross-document messaging]8Die Versendung erfolgt als Objektliste als „transfer”-Parameter.9Vgl. [Hic11a, 11.5 Channel messaging]

10http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol11TCP steht für Transmission Control Protocol.


http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol


kann. Sie ermöglichen durch eine dauerhafte Verbindung die Erstellung von Echt-zeitanwendungen.

Listing 9.3: Erstellen einer Web Socket Verbindungvar socket=new WebSocket("ws ://127.0.0.1:8080/");socket.onopen = function(){

// ...}socket.send("Hello!");

Ein Web Socket kann mit dem in Listing 9.3 dargestellten Konstruktor erstellt wer-den. Als Parameter reicht die Angabe einer URL, optional können aber zusätzlichein oder mehrere Protokolle definiert werden.Zur Steuerung des Sockets stehen wieder Eventhandler wie onclose, onerror undonopen zur Verfügung. Nachrichten können mit der Methode send(data) übertra-gen werden. Der Erhalt einer Nachricht über den Socket würde auch hier wieder einmessage-Event auslösen.12

Die Browserunterstützung ist sehr unterschiedlich ausgeprägt. So ist in den FirefoxVersionen 4 und 5 die API zwar vorhanden, aber deaktiviert. In aktuelleren Ver-sionen muss das Interface über MozWebSocket angesprochen werden.13 Der BrowserChrome nimmt wieder einer Vorreiterrolle ein und unterstützt die Spezifikation ge-genüber Safari und Opera vollständig. Eine Unterstützung im Internet Explorer istfür Version 10 angekündigt.14

9.2.3 Weitere Kommunikations-API’s

Außer den genannten neuen Kommunikationsmitteln hält HTML5 noch Server-sentEvents bereit. Diese sollen dafür dienen, dass ein Server Updates an einen Browsersenden kann, ohne dass dieser einen Request senden muss. Die Realisierung einesderartigen Vorgangs geschieht über das EventSource-Interface wie im folgenden Lis-ting dargestellt:

Listing 9.4: Erstellen einer EventSourcevar stream = new EventSource("twitterStream.php");stream.onmessage = function (event) {

alert(event.data);};

Durch diese Technik könnenWebseiten-Updates, die keine Userinteraktion erfordern,auf einfache Weise umgesetzt werden. Als Beispiel könnten Statusupdates, Börsen-infos, News oder Twitternachrichten einfach an den Browser gesendet werden, ohnedas diese extra angefordert werden müssten. Die Verarbeitung im Browser erfolgt

12Vgl. [Hic11a, 11.3 Web sockets]13Siehe https://developer.mozilla.org/en/WebSockets#AutoCompatibilityTable14Siehe http://caniuse.com/#feat=websockets


https://developer.mozilla.org/en/WebSockets#AutoCompatibilityTable

http://caniuse.com/#feat=websockets


auch hier wieder mit Events. Der Server muss die Daten als text/event-streamMIME-Typ versenden.HTML5 führt aber auch noch ein Media Streaming API und Peer-to-Peer Verbin-dungen unter der Rubrik „Video conferencing and peer-to-peer communication” ein.Diese befinden sich noch in einer experimentellen Phase und werden bisher vonkeinem Browser unterstützt.15

9.3 Interaktions-API’sDie Interaktionsmöglichkeiten zwischen Browser und Betriebssystem werden durchHTML5 erweitert. Es sind Spezifikationen für Web Notifications und ein Drag&DropAPI vorhanden, die das Leben des Browsernutzers erleichtern sollen.Unter Web Notifications verstehen sich System-Benachrichtigungen, die von einerWebseite ausgelöst werden können. Als Benachrichtigungstypen sieht die Spezifika-tion die folgenden vor:

• ambient notifications sind kurze Einblendungen, die ohne Nutzerinteraktionwieder verschwinden.

• interactive notifications leiten Nutzeraktionen an die Applikation weiter.• persistent notifications müssen explizit vom Nutzer geschlossen werden.• simple notifications bestehen nur aus einem Icon und etwas Text.• web notifications beinhalten Websprachen wie HTML und SVG.

Die Spezifikation sieht vor, dass auch Benachrichtigungssysteme wie Growl für MacOS, NotifyOSD für Linux oder das Windows Notification API angesprochen werdenkönnen.16

Abbildung 9.1: Screenshot einer Chrome Benachrichtigung

Listing 9.5: Benachrichtigung mit Chromevar notifications = window.webkitNotifications;

if(typeof notifications !== "undefined") {function spiritAlert () {

if(notifications.checkPermission () !== 0) {notifications.requestPermission ();

}

15Vgl. [Hic11a, 9 Video conferencing and peer-to-peer communication]16Ein lauffähiger Prototyp ist hier zu finden: https://github.com/FlorianX/

HTML5-experiments/blob/master/forms/index.html





var note = notifications.createNotification("../res/images/spiritIcon.jpg", "Spirit Error","The System is down! Attention!");

note.show();}

} else {alert("This is not Chrome! You’re browser doesn’t

support notifications.");}

Chrome ist bisher der einzige Browser der diese Funktionalität unterstützt, aberleider noch nicht genau nach Spezifikation. Das Listing 9.5 zeigt daher nur einein diesem Browser funktionierende Lösung, welche eine Benachrichtigung wie ausAbbildung 9.1 erzeugt.17

Eine weitere Neuheit in Sachen Interaktion ist das Drag&Drop API von HTML5. Esstammt ursprünglich aus dem Internet Explorer 5, wurde aber von den Entwicklernin Safari und Firefox übernommen, weshalb es später in der Spezifikation von IanHickson landete. Die Nutzung ist „horrible”18, wie dies selbst Ian Hickson umschrieb.Das Drag&Drop API stellt verschiedenste Events wie dragstart, dragover oderdrop und Attribute zur Verfügung. Darunter ist auch das draggable-Attribut, wel-ches ein HTML-Element als verschiebbar auszeichnet. Das „schreckliche” an diesemAPI ist, dass sich manche Events anders verhalten als dies im JavaScript üblichist. So muss bspw. das Event dragover mit event.preventDefault() abgebrochenwerden, da es sonst das „Droppen” verhindert. Die Standardisierung dieser Schnitt-stelle ermöglicht das Cross-Webseiten- und Cross-Browser-Drag&Drop und ist somitein entscheidender Interoperabilitätsbonus von HTML5.19

9.4 Weitere SpezifikationenDie neuen Möglichkeiten, die HTML5 bietet, reißen nicht ab, daher sollen im Fol-genden noch weitere interessante - aber sicher nicht alle - Vertreter genannt werden.Mit Web Workers20 lassen sich JavaScript-Berechnungen als Hintergrundprozesseauslagern, wodurch der Browser bei langen Berechnungen nicht mehr blockiert. DieShared Workers21 treiben dies auf die Spitze, in dem sie es ermöglichen, dass mehrereDokumente auf einen solchen Prozess zugreifen können.Workers sind in beiden Fällen völlig von der Außenwelt abgeschnitten und habendaher auch keinen Zugriff auf das DOM. Die Kommunikation findet, wie bei denanderen Neuheiten auch, nur über Events und deren Inhalte statt.17Vgl. [Gre11]18Siehe Twitterpost http://twitter.com/#!/Hixie/status/407525336119Vgl. [Hic11a, 8.6 Drag and drop]20Ein Prototyp mit den Türmen von Hanoi und der π-Berechnung ist hier zu finden:

https://github.com/FlorianX/HTML5-experiments/blob/master/workers/webworkers/index.html

21Folgender Prototyp ermöglicht die Synchronisation zweier Browserfenster: https://github.com/FlorianX/HTML5-experiments/blob/master/workers/sharedworkers/index.html


http://twitter.com/#!/Hixie/status/4075253361



https://github.com/FlorianX/HTML5-experiments/blob/master/workers/sharedworkers/index.html

https://github.com/FlorianX/HTML5-experiments/blob/master/workers/sharedworkers/index.html


Sie besitzen nur wenige Funktionalitäten des DOM-Interfaces und können bspw.mit postMessage() Nachrichten senden. Außerdem können sie weitere Scripte mit-hilfe von importScripts() nachladen und durch den Konstruktor-Aufruf weitereSub-Worker erstellen. Das folgende Listing 9.6 zeigt, wie Worker erstellt und ihnenNachrichten gesendet werden:

Listing 9.6: Erstellung der Worker// Web Workervar worker = new Worker(’worker.js’);// Shared Workervar sharedWorker = new SharedWorker(’worker.js’);

worker.postMessage(’Hi!’);sharedWorker.port.postMessage(’Hallo!’);

Da mehrere Dokumente auf einen Shared Worker zugreifen können, wird hier wie-der mit Kanälen und den entsprechenden Ports gearbeitet. Im Worker werden dannEvents wie self.onmessage oder self.onconnect verwendet. Der Shared Workererhält den Port, an den er antworten muss, über die Port-Eigenschaft des Message-Events.Die Versendung von Daten erfolgt mit JSON, weshalb auch komplexere Strukturenübertragen werden können. Die Worker bringen damit Nebenläufigkeit und auchverteiltes Rechnen in die Web-Welt und das JavaScript.22

Im Umfeld von HTML5 sind diverse weitere Spezifikationen angesiedelt und imEntstehen. So spezifiziert das W3C die Dateibearbeitung aus dem JavaScript heraus.Hierzu sind drei miteinander verwobene Spezifikationen vorhanden.Das File API spezifiziert neben der reinen Repräsentation von Dateien in WebApplikationen auch den Zugriff auf diese und deren Inhalte durch einen FileReader.Dieses API kann mit dem Drag&Drop API interagieren und ist für das Einlesen undVerarbeiten von Dateien auf dem Client verantwortlich.23

Auf diesem API basieren die Spezifikationen für das File API: Writer und das FileAPI: Directories and System. Erstere definiert einen Mechanismus zum clientseitigenSchreiben von Dateien, Letztere beschreibt eine Schnittstelle zur Ordnererstellungund Navigation im Dateisystem des Clients.24

Alle API’s können auf zwei Arten genutzt werden: asynchron und synchron. Dasasynchrone Vorgehen ist der Standardweg, um das Blockieren des Browsers zu ver-hindern. Die Kombination dieser API’s ermöglicht das Lesen, Schreiben und Struk-turieren von großen Datenmengen als Binär- oder anderes Datei-Format in einerabgeschotteten Ordnerstruktur (Sandbox) auf dem Client. Diese API’s werden bis-her nur von Chrome in einem fortgeschrittenen Maße unterstützt.Die Spezifikationen rund um den neuen HTML-Standard scheinen kein Ende zu fin-den. So versucht Mozilla ein WebAPI 25 zu entwicklen, das die Steuerung und Nut-22Vgl. [Hic11a, 10 Web workers]23Vgl. [RS11]24Vgl. [Uhr11b] und [Uhr11a]25https://wiki.mozilla.org/WebAPI


https://wiki.mozilla.org/WebAPI


zung von Kamera, Kontaktliste, SMS und Telefonie des Gerätes über den Browsererlaubt. Ähnliche und noch mehr Ziele verfolgt die „Device APIs Working Group”des W3C. Sie spezifizieren unter anderem den Zugriff auf den Batteriestatus, dieSensoren oder Vibration eines Gerätes.26 Dies zeigt eine klare Ausrichtung auf mo-bile Geräte wie Smartphones oder Tablets. Diese könnten durch die Vielzahl derSpezifikationen mit extrem eingebetteten Web-Applikationen bedient werden, ohnedas ein Unterschied zu nativen Entwicklungen zu erkennen wäre.Die letzten zwei neuen Spezifikationen, die aufgeführt werden sollen, sind das WebAudio27 und Fullscreen API 28. Hierbei handelt es sich bisher lediglich um Verfasser-entwürfe. Das Fullscreen API beschreibt, wie ein Element eine Vollbilddarstellunganfordern könnte. Für die Audiobearbeitung wurde von Google das Web Audio APIzur Standardisierung beim W3C eingereicht, welches bereits teilweise in Webkit-Browsern funktioniert. Es kann in Verbindung mit dem 2D- und WebGL-Contextdes Canvas-Elements genutzt werden, was Animationen und Applikationen bspw.durch Audioeffekte interaktiver gestaltet.29

Nach dieser Vielzahl von verschiedenen neuen Spezifikationen im HTML5-Universum,wird das nächste Kapitel einen Blick auf den Nutzen von HTML5 im Bereich dermobilen Geräte werfen.

26Siehe http://www.w3.org/2009/dap/27https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html28http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html29Interessante Beispiel-Applikationen mit WebGL und Audioeffekten können mit Chrome unter

folgender URL betrachtet werden: http://chromium.googlecode.com/svn/trunk/samples/audio/index.html


http://www.w3.org/2009/dap/

https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html

http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

http://chromium.googlecode.com/svn/trunk/samples/audio/index.html

http://chromium.googlecode.com/svn/trunk/samples/audio/index.html

10 HTML5-AppsDieses Kapitel wird sich mit dem Trend der mobilen Apps (Applikationen) beschäf-tigen. Dabei sollen zuerst die App-Typen abgegrenzt und gegenübergestellt werden.Anschließend erfolgt eine Aufzählung von bisher relevanten HTML5-Features zurmobilen App-Entwicklung sowie die Vorstellung der Spirit HTML5 Android App.

10.1 App-TypenDie App-Entwicklung kann auf drei unterschiedliche Arten stattfinden: Native App,WebApp und Hybrid App. Eine Native App wird speziell für ein bestimmtes Be-triebssystem entwickelt und fügt sich somit in das System ein. Sie ist dadurch platt-formabhängig und muss in der vom System vorgeschriebenen Programmierspracheverfasst werden. Für die Entwicklung von iOS-Apps sieht Apple Objective-C sowieC++ vor. Android hingegen setzt auf Java und Java-verwandte Sprachen sowie aufden Einsatz von C/C++ für Performance-kritischen Code.WebApps basieren dagegen auf Webstandards wie HTML(5), CSS und JavaScript.Es handelt sich hierbei um normale Webseiten, deren Darstellung für mobile End-geräte optimiert wurde. Diese Apps sind plattformunabhängig und benötigen nureinen Browser, der die verwendeten Standards unterstützt. Bei der Optimierungsollte das Konzept des Progressive Enhancement beachtet werden. Wenn bspw. Fea-tures von HTML5 eingesetzt werden, dann so, dass die WebApp trotz fehlenderBrowserunterstützung genutzt werden kann.Der letzte Typ der Apps, die Hybrid App, versucht nun die beiden genannten Wegezu vereinen. So sollen Apps mittels HTML5, JavaScript und CSS entwickelt unddann in eine Native App transformiert oder eingebunden werden. Die Entwick-lung erfolgt meist mithilfe von Frameworks wie PhoneGap1, welche zusätzlich nativeFunktionalitäten durch eine eigene API für die WebApp verfügbar machen und soeine Lücke schließen.

10.2 Nativ vs. WebAppEin Trend geht eindeutig in Richtung WebApps, was die Bandbreite an verfügbarenFrameworks zeigt. Der Vorteil scheint hier klar auf der Hand zu liegen - eine Appfür alle Plattformen. Doch ist das wirklich empfehlenswert?Eine App für alle Systeme heißt auch, dass die App immer gleich aufgebaut ist. Dochdie Usability und verschiedene Richtlinien der Plattformen sollten in der Konzeption

1Siehe http://phonegap.com/


http://phonegap.com/

10. HTML5-Apps Fachhochschule Schmalkalden WS 2011/12

einer App berücksichtigt werden. Android Smartphones haben bspw. einen physika-lischen „Back-Button”, in iOS ist dies über eine Navigations-Leiste geregelt. WeitereUnterschiede sind im App-Menü zu finden, da iOS eine Menü-Leiste und Androideinen Menü-Button besitzt. Es ist bereits schwierig, diese genannten Punkte untereinen Hut zu bringen, was deutlich macht, dass weitere systemspezifische Look-and-Feel-Eigenschaften ein integriertes Erscheinungsbild einer App auf unterschiedlichenPlattformen erschweren.Das Problem, dass WebApps oder Hybride nicht auf hardwarespezifische Detailswie den Batteriestatus oder die Kamera zugreifen können, wird durch API’s vonFrameworks wie PhoneGap oder durch neue Standards wie das WebAPI von Mozillagelöst. Durch diese Lösungen kann eine Hybrid App oder auch eine WebApp bspw.direkt auf die Kamera oder das Telefonbuch zugreifen.Standards können unterschiedlich interpretiert werden, weshalb auch Unterschiedebei der Darstellung von manchen Webseiten in verschiedenen Browsern auftreten.Das heißt aber, das Features gar nicht oder unterschiedlich implementiert sein kön-nen. Hier ist die Anwendung und das Vorgehen zur Nutzung dieser Features ent-scheidend.Ein Vorteil von WebApps ist, dass sie unabhängig von Zulassungsprozessen undBeschränkungen der App Stores genutzt werden können. Updates der WebAppssind, sobald sie auf demWebserver liegen, für jeden Nutzer verfügbar und unterliegenkeiner nochmaligen Kontrolle oder einem komplexen Verteilungsnetzwerk. Der AppStore stellt aber den Nativen Apps die Möglichkeit der gezielten Vermarktung bereitund ist somit auch förderlich.An diesen Punkten ist klar zu erkennen, dass beide App-Typen ihre Vor- und Nach-teile haben. Es ist schwer abzuschätzen, welcher Typ die bessere Wahl ist. Dahersollte immer von Fall zu Fall abgewogen werden, welches die optimalere Alternativefür das anvisierte Anwendungsgebiet darstellt.2

10.3 Relevante HTML5-FeaturesDie mobile App-Entwicklung, egal ob Hybrid App oder WebApp, kann sich ver-schiedene HTML5-Features zunutze machen, da viele Smartphones bereits einigeder HTML5-Neuerungen beherrschen.Oft wird in diesem Zusammenhang nur von den Multimedia-Elementen <video>,<audio> und <canvas> gesprochen, die bereits großflächig eingesetzt werden. Doches gibt noch weitere interessante HTML5-Features, die auf mobilen Plattformenverfügbar sind und dort dem Nutzer einen Mehrwert verschaffen.Die in Kapitel 4.2 eingeführten semantischen Elemente helfen auch hier bei einerbesseren Strukturierung und unterstützen die Interpretation des Browsers. Durchdie neuen Input-Typen und Formularelemente aus Kapitel 6 wird die Nutzung vonWebApp-Formularen für Anwender erleichert, da viele Touch-Smartphones ihre Tas-tatur auf die verschiedenen Typen abstimmen können. Bei einer geforderten Email-Eingabe werden bei Android bspw. das „@” und „.com” gleich auf der Standard-

2Vgl. [Mah11a] und [Eid11]



Tastatur eingeblendet und die Tastatur schaltet bei einer Nummern-Eingabe auto-matisch auf das Zahlenfeld um.Ein für den mobilen Einsatz sehr interessantes API ist das Web Storage API. Die-ses ist unterteilt in das localStorage und sessionStorage API, wovon aber nur daslocalStorage API oft in Apps Anwendung findet. Durch dieses ist es erstmals mit Ja-vaScript möglich, Daten lokal abzulegen. So können Daten nicht nur für eine längereZeit auf dem Gerät gespeichert, sondern auch Funkverbindungsabbrüche ausgegli-chen oder das Pre-Fetching3 realisiert werden.Der mit HTML5 eingeführte Application Cache ist für die Steuerung des Caching-Verhaltens zuständig und kann auch in diesem Bereich bereits verwendet werden.Durch ihn können Entwickler gezielt statische Inhalte wie Bilder, JavaScript- oderCSS-Dateien vom Browser cachen lassen, was die Netzwerkbelastung beim App-Aufruf minimiert.Das letzte interessante Feature ist das Geolocation API. Dieses wird bereits jetztschon häufig eingesetzt und ermöglicht so das Angebot von Apps mit Location BasedServices.HTML5 bietet also eine Reihe von Techniken, die für die Entwicklung von mobilenApplikationen, sei es auf richtiger App-Basis oder als optimierte Webseite, inter-essant sein dürften. Das nächste Kapitel zeigt die Anwendung einiger der genanntenTechniken bei der Erstellung der Spirit HTML5 App.

10.4 Spirit HTML5 Android App

Abbildung 10.1: App-Logo

Die bisherigen Abschnitte haben gezeigt, dass HTML5eine interessante Plattform für die App-Entwicklungdarstellt und die Umsetzung auf zwei Arten erfolgenkann. Die im Folgenden vorgestellte App wurde alseine Art Hybrid App entwickelt.4

(„Eine Art” aus dem Grund, weil nur die zur Verfü-gung stehenden Techniken Java und HTML5 sowie dasJavaScript Framework jQuery Mobile5 genutzt und da-bei auf die Verwendung einer zusätzlichen API Schichtwie PhoneGap verzichtet wurde.)Die Entscheidung fiel auf eine Hybrid App, um sehenzu können, wie sich auf HTML5-basierende Teile einer App in das System integrierenlassen. Nach kurzer Zeit stand außerdem fest, dass der entwickelte Prototyp alsrichtige App im Android Market angeboten werden sollte. Die Hybrid-Entwicklungermöglichte dies ohne Probleme. Für den Vertrieb über den Market ist ein App-Iconnötig. Dieses wurde, wie Abbildung 10.1 zeigt, an das neue Spirit Logo angelehnt,um den Wiedererkennungswert zu erhöhen.

3Pre-Fetching bezeichnet das intelligente Vorladen von in Zukunft benötigten Daten.4Der Quellcode ist hier zu finden: https://github.com/FlorianX/Spirit-HTML5-App5http://jquerymobile.com/


https://github.com/FlorianX/Spirit-HTML5-App

http://jquerymobile.com/


Die Abbildung 10.2 zeigt die veröffentlichte App in der Listen- und Einzelansichtder News. Die Anzeige eines Stundenplans ist bisher noch nicht möglich.

(a) Listenansicht (b) Einzelansicht

Abbildung 10.2: Screenshots der Spirit App

Eine Android App basiert auf verschiedenen Activities für jede mögliche Ansicht.Um HTML5 in eine App zu integrieren, ist also mindestens eine Activity nötig.

Listing 10.1: Android Activity in Javapublic class SpiritHtml5AppActivity extends Activity {

WebView webView;

@Overridepublic void onCreate(Bundle savedInstanceState) {[...]webView = (WebView)findViewById(R.id.webView);

WebSettings settings = webView.getSettings ();settings.setJavaScriptEnabled(true);settings.setDomStorageEnabled(true);

webView.setWebChromeClient(new WebChromeClient ());

webView.loadUrl("file :/// android_asset/www/index.html");

}

@Overridepublic boolean onKeyDown(int keyCode , KeyEvent event) {

if (( keyCode == KeyEvent.KEYCODE_BACK) &&



webView.canGoBack ()) {webView.goBack ();return true;

}return super.onKeyDown(keyCode , event);

}}

Das Listing 10.1 zeigt die SpiritHtml5AppActivity und deren Methoden onCreateund onKeyDown. Erstere wird aufgerufen, sobald die App gestartet wird. Sie initiali-siert eine Ansicht namens webView zur Anzeige von Webseiten und erlaubt in dieserdie Nutzung von JavaScript und DomStorage. Außerdem wird ein WebChromeClienterzeugt, welcher für alles zuständig ist, was das User Interface des Browsers betrifft.Dies umfasst bspw. die Anzeige von JavaScript Meldungen, die mittels alert()ausgelöst wurden. Als Letztes wird der WebView angewiesen eine lokale URL - dieeigentliche App - aufzurufen.Durch die zweite Funktion im Listing 10.1 soll das Zurückblättern per „Back-Button”eines Android-Smartphones in der App nutzbar gemacht werden. Ansonsten würdeein Klick auf diesen die App beenden.In der App ist noch zusätzlicher Java-Code für die Integration von Google Analyticsvorhanden, welcher aber zur besseren Übersicht entfernt wurde. Alle nachfolgendenListings entstammen der HTML-Datei, welche oben als URL aufgerufen wurde.

Listing 10.2: HTML-Struktur der App<div data -role="page" data -theme="b" id="newsPage"><div data -role="header"><h1>News</h1><a onclick="getNews(true);" data -icon="refresh"

data -role="button" data -theme="a"class="ui -btn -right">Update!</a>

</div><div data -role="content" id="newsList"></div>

</div>

Die Grundstruktur der App ist sehr minimal gehalten, da auf einem Smartphone oftPlatzmangel herrscht. Was aber in Listing 10.2 sofort auffällt, sind die vielen data-*Attribute. Diese wurden in HTML5 neu eingeführt und dienen zur Anreicherung desHTML’s mit Daten, die bspw. für die Bearbeitung mit JavaScript benötigt werden.In diesem Fall nutzt das verwendete Framework jQuery Mobile die entsprechen-den Angaben für Einstellungszwecke. So wird ein einfacher Link mit Hilfe vondata-role="button" als Button ausgezeichnet und erhält vorgegebene CSS- undJavaScript-Eigenschaften.jQuery Mobile ermöglicht nicht nur die Nutzung von bereits getesteten und ange-passten Design-Vorgaben und bietet damit Kompatibilität zu vielen Plattformen,sondern es stellt auch entsprechende Events für die Touch-Interaktionen wie „swi-pe”, „tap” und „taphold” zur Verfügung.



Listing 10.3: Initialisierung der App$(document).ready(function(){getNews ();

$(’.singleNews ’).live(’swiperight ’,function(event){$.mobile.changePage($(’#newsPage ’),{transition: "none"});

event.preventDefault ();});

});

Die HTML-Datei wird durch den Browser der Activity aufgerufen. Wenn die Dateivollständig geladen ist, wird die bereits bekannte jQuery Methode ready(...) aus-geführt. Diese ruft die Methode getNews([live]) auf, welche im folgenden Listingabgebildet ist. Außerdem wird ein Eventhandler bei allen Elementen mit der Klas-se singleNews für das Event swiperight hinterlegt. Wenn das Event feuert, wirddurch diese Funktion die Listenansicht geladen.Die Idee hinter diesem Konstrukt ist, dass ein Nutzer, der sich auf der Einzelansichteiner News befindet, durch ein Wischen über den Touchscreen wieder zur Startseitezurückgelangt.

Listing 10.4: Abrufen der News über REST oder den localStoragefunction getNews(live){$.mobile.showPageLoadingMsg ();live = typeof(live) != ’undefined ’ ? live : false;

if(typeof localStorage !== ’undefined ’){var localNewsJSON =localStorage.getItem(’SpiritApp_News ’);

}

if(localNewsJSON && !live){renderNews(JSON.parse(localNewsJSON));

}else{$.ajax({url: "http :// spirit.fh -schmalkalden.de/rest /1.0/ news",dataType: ’json’,success: function (data){localStorage.setItem(’SpiritApp_News ’,JSON.stringify(data));

renderNews(data);},



error: function(jqXHR , textStatus , errorThrown){$.mobile.hidePageLoadingMsg ();alert("Konnte keine Verbindung zumServer herstellen!");

}});

}}

Die in Listing 10.4 dargestellte JavaScript Funktion ist das Herzstück der App undfür die Datenhaltung zuständig. Mit der Variable live wird entschieden, ob dieDaten zwingend neu vom Server abgerufen werden sollen. Sie wird nur gesetzt,wenn der User explizit auf den Update-Button klickt.JavaScript kennt keine Default-Parameter-Werte, weshalb eine Prüfung für dieseVariable eingefügt werden musste, die einen Standardwert setzt.Des Weiteren wird geprüft, ob das localStorage API verfügbar ist und ob es bereitsDaten enthält. Falls dies der Fall ist, werden die Daten an die Funktion renderNews(data) übergeben, andernfalls wird mit einem jQuery Aufruf ein Ajax-Request gest-artet, der die Daten bei der REST-Schnittstelle abfragt. Diese werden dann sofortim localStorage gespeichert und an renderNews weitergereicht.Die erwähnte Funktion renderNews wurde hier nicht explizit aufgeführt, da siesich nur mit der HTML-Generierung und Darstellung der News beschäftigt undein create-Event triggert, um jQuery Mobile darauf hinzuweisen, dass die Seite ge-ändert wurde. Sie fügt außerdem für jede News eine extra HTML-Seite in den DOMein, welche als Einzelansicht dient.Mit diesen Schritten ist es möglich, eine einfache HTML5-App zu schreiben, dieim Market veröffentlicht werden kann, Daten abruft und sie speichert. Für weitereEntwicklungen in diesem Bereich wird aber eine WebApp empfohlen, da alle Studie-renden die Spirit-URL kennen und diese auch nutzen sollten. Dadurch entsteht einSingle-Point-of-Contact, der auf einfache Weise aktuell gehalten werden kann undein breiteres Publikum anspricht.


11 Kritik, Ausblick und FazitDie Sprache HTML entwickelt sich durch die vielen Neuheiten weg von einer reinenDokumentenbeschreibung, hin zur Grundlage von Web-Applikationen. Dieses Ka-pitel widmet sich daher im ersten Teil den kritischen Seiten von HTML5 und demWildwuchs an Spezifikationen. Außerdem wird ein kurzer Blick auf HTML.next ge-worfen, bevor im letzten Teil ein Fazit diese Arbeit abschließt.

11.1 KritikDer Fokus von HTML5 liegt auf den Web-Applikationen, weshalb sich die Spezifika-tionen weniger mit reinem HTML und mehr mit den JavaScript API’s beschäftigen.Web-Applikationen sollen sich durch HTML5 besser in das Betriebssystem integrie-ren lassen. Der Browser wird dadurch die zentrale Programmplattform, wie diesbereits Google im Betriebssystem Chromium OS vorsieht.Die treibenden Kräfte hinter diesem Standard sind aber nicht die speziell zusam-mengesetzten Arbeitsgruppen des W3C’s, sondern eher die Browserhersteller. Siesitzen am längeren „Implementierungshebel” und haben es nicht nur geschafft, dassdie geplante XML Revolution des W3C’s scheiterte, sondern auch, dass das W3Cden HTML-Entwurf der WHATWG teilweise übernahm. Außerdem stützen sichdie Browserhersteller bei ihren Implementierungen meist auf die Spezifikation derWHATWG, also auf ihre eigene. Es scheint also eine Art Diktatur der Browserher-steller entstanden zu sein. Ob dies von Vorteil ist, wird sich zeigen.1

In Bezug auf den Standardisierungsprozess der WHATWG und des W3C’s ist zusagen, dass die Vielzahl der vorhandenen und zum Teil unterschiedlichen Spezi-fikationen kaum einen Überblick ermöglichen. Dies wird durch den Wechsel desEntwicklungsmodells der WHATWG noch verstärkt. Die Masse an verschiedenenSpezifikationen und Tools wie Wiki’s, Bugtracker, Mailinglisten und Twitter aufbeiden Seiten ist kaum zu durchschauen und meist sehr verwirrend.Ein Großteil des Standards wird, wie bereits andere HTML-Versionen, der Imple-mentierung hinterher geschrieben. Die Übernahme von proprietären Entwicklungenwie dem Canvas oder Drag&Drop API geschah, weil sie bereits auf breiter Frontdurch verschiedene Browser unterstützt wurden. Dies zeigt den starken Einfluss derHersteller, da das Drag&Drop API selbst vom Verfasser als „schrecklich” empfundenwird, es aber dennoch in die Spezifikation gelangt ist.Weitere Kritik kommt von Douglas Crockford, einer JavaScript-Entwickler-Größe.Dieser ist der Meinung, dass bei der Spezifizierung von neuen HTML5-Elementen zu

1Vgl. [Krö11b, S. 453]


11. Kritik, Ausblick und Fazit Fachhochschule Schmalkalden WS 2011/12

wenig auf Sicherheitsaspekte, insbesondere auf Cross-Site-Scripting, geachtet wirdund die Spezifikation daher besser neu geschrieben werden sollte.2

Eine Gruppe von Web-Designern um Jeffrey Zeldman kritisiert unter dem Namen„THE HTML5 SUPER FRIENDS” eher die rein semantischen Fehler an HTML5.Dabei geht es bspw. um die Barrierebildung des Canvas und die annähernde seman-tische Gleichheit von HTML-Elementen wie <article> und <section>.3

Ob die Kritikpunkte an der Spezifikation beachtet werden oder nicht, liegt in beidenGremien allein in den Händen des Verfassers Ian Hickson.

11.2 AusblickDie vorhandenen Spezifikationen von HTML5 und den verschiedenen anderen Ideenin deren Umfeld sind viel versprechend. Wenn den Sicherheitsaspekten noch mehrAufmerksamkeit geschenkt wird, können die Sicherheitslücken sicher auch ausge-merzt werden. An HTML5 scheint zumindest im Augenblick kein Weg vorbei zuführen, da auch der einzige bisherige Konkurrent (XHTML2) nicht mehr weiterent-wickelt wird.Die Konkurrenz im multimedialen Bereich zieht sich langsam auch zurück. Adobegab am 9. November 2011 bekannt, dass die Entwicklung des Flash Players für mo-bile Geräte eingestellt wird und sich das Unternehmen stärker auf HTML5 konzen-trieren will.4 Ähnliche Spekulationen zur Zukunft von Microsofts Silverlight wurdenam gleichen Tag laut. Die Version 5 von Silverlight soll demnach der letzte Releasewerden.5

Wann und ob eine der beiden HTML-Spezifikationen je zum Standard erhoben wird,ist nicht abzusehen, zumal auch das neue Entwicklungsmodell der WHATWG nichtauf einen „fertigen” Stand hinarbeitet, sondern als Living Standard geführt wird.Die Planung des W3C’s dagegen sehen für dessen Spezifikation den Status Recom-mendation für das zweite Quartal 2014 vor. Doch diese Spezifikation enthält nureinen Bruchteil der vorgestellten Neuheiten.Dies erklärt, warum beim W3C bereits die ersten Ideensammlungen für eine neueHTML-Version anlaufen. Hierfür wurden bereits ein Wiki und Bugtracker bereitge-stellt.6 Das Projekt wird als HTML.next bezeichnet. Die Idee ist die freie Sammlungvon Ideen im Wiki sowie im Bugtracker. Im Wiki wird deutlich darauf hingewiesen,dass Ideen, die in HTML5 nicht umgesetzt werden sollen, einfach übernommen wer-den können. Die bisher gesammelten Ideen beziehen sich auf neue semantische Ele-mente für Ortsangaben, Teaserauszeichnung und die Einbindung von ZIP-Archiven.Außerdem sind verschiedene Vorschläge vorhanden, die auf neue Formular- und Mul-timediafunktionen wie eine Fullscreendarstellung abzielen. Die WHATWG setzt da-gegen auf die kontinuierliche Änderung und Erweiterung ihrer Spezifikation.

2Vgl. [Net10]3Vgl. http://zeldman.com/superfriends/4Vgl. [Win11]5Vgl. [Fol11]6http://www.w3.org/wiki/HTML/next


http://zeldman.com/superfriends/

http://www.w3.org/wiki/HTML/next

11. Kritik, Ausblick und Fazit Fachhochschule Schmalkalden WS 2011/12

11.3 FazitHTML5 bereichert die Webentwicklung durch viele interessante neue Möglichkei-ten, damit aus Webseiten richtige Applikationen werden können. Zu beachten istaber, dass der überwiegende Teil von HTML5 nicht aus reinem HTML, sondern ausJavaScript Schnittstellen besteht.Die vielen Quellcodebeispiele und prototypischen Implementierungen haben gezeigt,dass die zukünftige Technik bereits jetzt schon teilweise eingesetzt werden kann unddie Browser mit der Unterstützung schon sehr weit sind - sogar der Internet Explorer9. Natürlich sollte bei der Entwicklung neben dem Progressive Enhancement auchdas Testen der Applikationen an aller erster Stelle stehen.Die Verwendung von HTML5-Features sollte mit Bibliotheken wie Modernizr7 un-terstützt werden, da diese eine Feature-Erkennung bieten und so unterschiedlicheBrowserimplementierungen gezielt abfangen.Bei der Nutzung der WHATWG Spezifikation ist darauf zu achten, dass sich diesetäglich ändern kann. Außerdem enthält sie teilweise hochexperimentelle Inhalte undIdeen. Interessant ist auch die Hilfsbreitschaft der WHATWG Mitglieder in ihremIRC Channel. Entgegen diverser kritischer und negativer Meinungen8 konnte wäh-rend der Bearbeitung festgestellt werden, dass bspw. Ian Hickson und Anne vanKesteren stets beratend zur Seite standen.HTML5 bietet auch erkennbare Potentiale in der Spieleentwicklung mit dem Can-vas. Derzeit ist davon die Rede, dass iOS und Android den Spielekonsolen-Marktumkrempeln und Marktanteile ziehen.9 Wie lange wird es wohl dauern bis HTML5hier in den Mittelpunkt der Betrachtung rückt?Der Trend geht klar in Richtung HTML5 und das nicht nur für normale Webseitenund Web-Applikationen, sondern gerade auch für mobile Endgeräte. Daher wird fürweitere Web-Entwicklungen empfohlen, den Fokus auf HTML5 und die Optimierungfür mobile Endgeräte zu legen.

7http://www.modernizr.com/8Vgl. [Krö11b, S. 452 ff.] und http://molily.de/weblog/html5-prozess9http://heise.de/-1376769


http://www.modernizr.com/

http://molily.de/weblog/html5-prozess

http://heise.de/-1376769

Literaturverzeichnis[ASA11] ASA, Opera S.: W3C Geolocation API support in Opera Presto 2.7.

http://www.opera.com/docs/specs/presto27/geolocation/, 2011

[BL89] Berners-Lee, Tim: Information Management: A Proposal. http://www.w3.org/History/1989/proposal.html, März 1989

[BL92] Berners-Lee, Tim: HTML. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/MarkUp.html, Novem-ber 1992

[BL06] Berners-Lee, Tim: Reinventing HTML. http://dig.csail.mit.edu/breadcrumbs/node/166, Oktober 2006

[Bra10] Braun, Torsten: Das Internet der Zukunft. In: Informatik SpektrumBand 33 (2010), April, Nr. 2, S. 103–105

[BV10] Bongers, Frank ; Vollendorf, Maximilian: jQuery - Das Praxisbuch.1. Auflage. Bonn : Galileo Press, 2010

[CAM97] CAMBRIDGE, USA MA: The World Wide Web Consortium IssuesHTML 4.0 as a W3C Recommendation. http://www.w3.org/Press/HTML4-REC, Dezember 1997

[CC11] Craig, James ; Cooper, Michael: Accessible Rich Internet Applications(WAI-ARIA) 1.0. http://www.w3.org/TR/wai-aria/, Januar 2011. –W3C Candidate Recommendation

[CZ10] Carle, Kevin ; Zacharias, Chris: Introducing YouTube HTML5Supported Videos. http://youtube-global.blogspot.com/2010/01/introducing-youtube-html5-supported.html, Januar 2010. – TheOfficial YouTube Blog

[Dou10] Dougherty, Brad: Try our new HTML5 Player! http://vimeo.com/blog:268?utm_source=twitterfeed&utm_medium=laconica, Ja-nuar 2010. – Staff Blog

[Eid11] Eidhof, Chris: HTML5 IS NO SILVER BULLET FOR AP-PS. http://chriseidhof.tumblr.com/post/12170749641/html5-is-no-silver-bullet-for-apps, Oktober 2011

[Fol11] Foley, Mary J.: Will there be a Silverlight 6 (anddoes it matter)? http://www.zdnet.com/blog/microsoft/

Florian Schuhmann B. Sc.77

http://www.opera.com/docs/specs/presto27/geolocation/

http://www.w3.org/History/1989/proposal.html

http://www.w3.org/History/1989/proposal.html

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/MarkUp.html

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/MarkUp.html

http://dig.csail.mit.edu/breadcrumbs/node/166

http://dig.csail.mit.edu/breadcrumbs/node/166

http://www.w3.org/Press/HTML4-REC

http://www.w3.org/Press/HTML4-REC

http://www.w3.org/TR/wai-aria/

http://youtube-global.blogspot.com/2010/01/introducing-youtube-html5-supported.html

http://youtube-global.blogspot.com/2010/01/introducing-youtube-html5-supported.html

http://vimeo.com/blog:268?utm_source=twitterfeed&utm_medium=laconica

http://vimeo.com/blog:268?utm_source=twitterfeed&utm_medium=laconica

http://chriseidhof.tumblr.com/post/12170749641/html5-is-no-silver-bullet-for-apps

http://chriseidhof.tumblr.com/post/12170749641/html5-is-no-silver-bullet-for-apps

http://www.zdnet.com/blog/microsoft/will-there-be-a-silverlight-6-and-does-it-matter/11180


Literaturverzeichnis Fachhochschule Schmalkalden WS 2011/12

will-there-be-a-silverlight-6-and-does-it-matter/11180,November 2011

[Gra11] Graff, Eliot: Polyglot Markup: HTML-Compatible XHTML Docu-ments. http://www.w3.org/TR/html-polyglot/, Mai 2011. – WorkingDraft

[Gre11] Gregg, John: Web Notifications. http://www.w3.org/TR/notifications/, März 2011. – Working Draft

[Hic10] Hickson, Ian: Web SQL Database. http://www.w3.org/TR/webdatabase/, November 2010

[Hic11a] Hickson, Ian: HTML. http://www.whatwg.org/html, November 2011.– Living Standard

[Hic11b] Hickson, Ian: HTML is the new HTML5. http://blog.whatwg.org/html-is-the-new-html5, Januar 2011

[Hic11c] Hickson, Ian: HTML5. http://www.w3.org/TR/html5/, Mai 2011. –Working Draft

[Inc11] Inc., Google: Verwendung der Standortfreigabe. https://www.google.com/support/chrome/bin/answer.py?answer=142065&hl=de, 2011

[Kes11a] Kesteren, Anne van: Blog - Anne van Kesteren. http://annevankesteren.nl/, 2003-2011

[Kes11b] Kesteren, Anne van: WHATWG Weekly: Simplifying the DOM. http://blog.whatwg.org/weekly-simple-dom, Oktober 2011

[Kes11c] Kesteren, Anne van: WHATWG Weekly: TPAC 2011. http://blog.whatwg.org/weekly-tpac-2011, November 2011

[KP11] Kesteren, Anne van ; Pieters, Simon: HTML5 differences fromHTML4. http://www.w3.org/TR/html5-diff/, May 2011. – WorkingDraft

[Krö11a] Kröner, Peter: Gastartikel: HTML5 im Überblick.http://blogs.technet.com/b/sieben/archive/2011/03/09/gastartikel-html5-im-220-berblick.aspx, März 2011

[Krö11b] Kröner, Peter: HTML5 Webseiten innovativ und zukunftssicher. 2.Auflage. München : Open Source Press, 2011. – http://html5-buch.de

[Mah11a] Mahemoff, Michael: HTML5 vs Native: The Mobile App Debate. http://www.html5rocks.com/en/mobile/nativedebate.html, Juni 2011

[Mah11b] Mahemoff, Michael: ”Offline”: What does it mean and whyshould I care? http://www.html5rocks.com/en/tutorials/offline/whats-offline/, October 2011




http://www.w3.org/TR/html-polyglot/

http://www.w3.org/TR/notifications/

http://www.w3.org/TR/notifications/

http://www.w3.org/TR/webdatabase/

http://www.w3.org/TR/webdatabase/

http://www.whatwg.org/html

http://blog.whatwg.org/html-is-the-new-html5

http://blog.whatwg.org/html-is-the-new-html5


https://www.google.com/support/chrome/bin/answer.py?answer=142065&hl=de

https://www.google.com/support/chrome/bin/answer.py?answer=142065&hl=de

http://annevankesteren.nl/

http://annevankesteren.nl/

http://blog.whatwg.org/weekly-simple-dom

http://blog.whatwg.org/weekly-simple-dom

http://blog.whatwg.org/weekly-tpac-2011

http://blog.whatwg.org/weekly-tpac-2011

http://www.w3.org/TR/html5-diff/

http://blogs.technet.com/b/sieben/archive/2011/03/09/gastartikel-html5-im-220-berblick.aspx

http://blogs.technet.com/b/sieben/archive/2011/03/09/gastartikel-html5-im-220-berblick.aspx

http://html5-buch.de

http://www.html5rocks.com/en/mobile/nativedebate.html

http://www.html5rocks.com/en/mobile/nativedebate.html

http://www.html5rocks.com/en/tutorials/offline/whats-offline/

http://www.html5rocks.com/en/tutorials/offline/whats-offline/


[Mic11] Microsoft: Location and my privacy FAQ. http://www.microsoft.com/windowsphone/en-US/howto/wp7/web/location-and-my-privacy.aspx, 2011

[Moz11] Mozilla: Standortbezogenes Surfen. http://www.mozilla.org/de/firefox/geolocation/, 2011

[MSG+11] Mehta, Nikunj ; Sicking, Jonas ; Graff, Eliot ; Popescu, Andrei; Orlow, Jeremy: Indexed Database API. http://www.w3.org/TR/IndexedDB/, April 2011. – Working Draft

[Net10] Netherland, Wynn: Episode 0.2.6 - Douglas Crockford on JSON andJavaScript from TXJS. http://thechangelog.com/post/676820023/episode-0-2-6-douglas-crockford-on-json-and-javascript-f,Juni 2010. – Interview

[OP11] Offermann, Stefan ; Puccinelli, Susan: Adobe Announ-ces Adobe Flash Media Server 4.5 and Adobe Flash Access3.0. http://eon.businesswire.com/news/eon/20110907007466/en/Adobe/IBC/Flash-Media-Server, September 2011. – Pressemitteilung

[Pop10] Popescu, Andrei: Geolocation API Specification. http://www.w3.org/TR/geolocation-API/, September 2010. – W3C Candidate Recommen-dation

[Rag93] Raggett, David: A Review of the HTML+ Document Format. http://www.w3.org/MarkUp/htmlplus_paper/htmlplus.html, November 1993

[Ref11] Refsnes Data: w3schools.com - HTML5 Tutorial. http://www.w3schools.com/html5/, 2011

[RP98] Raggett, Dave ; Pemberton, Steven: Shaping the Future of HTML.http://www.w3.org/MarkUp/future/, Mai 1998

[RS11] Ranganathan, Arun ; Sicking, Jonas: File API. http://www.w3.org/TR/FileAPI/, Oktober 2011. – Working Draft

[Smi11a] Smith, Michael[tm]: HTML: The Markup Language. http://www.w3.org/TR/html-markup/, Mai 2011. – Working Draft

[Smi11b] Smith, Mike: History - HTML WG Wiki. http://www.w3.org/html/wg/wiki/History, Juni 2011

[Str11] Streit, Alexander von: Apple iPhone und iPad überwachenihre Besitzer. http://www.focus.de/digital/handy/iphone/apple-iphone-und-ipad-ueberwachen-ihre-besitzer_aid_620315.html, April 2011

[Uhr11a] Uhrhane, Eric: File API: Directories and System. http://www.w3.org/TR/file-system-api/, April 2011. – Working Draft


http://www.microsoft.com/windowsphone/en-US/howto/wp7/web/location-and-my-privacy.aspx



http://www.mozilla.org/de/firefox/geolocation/

http://www.mozilla.org/de/firefox/geolocation/

http://www.w3.org/TR/IndexedDB/

http://www.w3.org/TR/IndexedDB/

http://thechangelog.com/post/676820023/episode-0-2-6-douglas-crockford-on-json-and-javascript-f

http://thechangelog.com/post/676820023/episode-0-2-6-douglas-crockford-on-json-and-javascript-f

http://eon.businesswire.com/news/eon/20110907007466/en/Adobe/IBC/Flash-Media-Server

http://eon.businesswire.com/news/eon/20110907007466/en/Adobe/IBC/Flash-Media-Server

http://www.w3.org/TR/geolocation-API/

http://www.w3.org/TR/geolocation-API/

http://www.w3.org/MarkUp/htmlplus_paper/htmlplus.html

http://www.w3.org/MarkUp/htmlplus_paper/htmlplus.html

http://www.w3schools.com/html5/

http://www.w3schools.com/html5/

http://www.w3.org/MarkUp/future/

http://www.w3.org/TR/FileAPI/

http://www.w3.org/TR/FileAPI/

http://www.w3.org/TR/html-markup/

http://www.w3.org/TR/html-markup/

http://www.w3.org/html/wg/wiki/History

http://www.w3.org/html/wg/wiki/History

http://www.focus.de/digital/handy/iphone/apple-iphone-und-ipad-ueberwachen-ihre-besitzer_aid_620315.html



http://www.w3.org/TR/file-system-api/

http://www.w3.org/TR/file-system-api/


[Uhr11b] Uhrhane, Eric: File API: Writer. http://www.w3.org/TR/file-writer-api/, April 2011. – Working Draft

[W3C09] W3C: XHTML 2 Working Group Expected to Stop Work End of 2009,W3C to Increase Resources on HTML 5. http://www.w3.org/News/2009#entry-6601, Juli 2009

[WHAa] WHATWG: Differences Between HTML and XHTML.http://wiki.whatwg.org/wiki/HTML_vs._XHTML#Differences_Between_HTML_and_XHTML,

[WHAb] WHATWG: What are the various versions of the spec?http://wiki.whatwg.org/wiki/FAQ#What_are_the_various_versions_of_the_spec.3F,

[WHAc] WHATWG: What is HTML5? http://wiki.whatwg.org/wiki/FAQ#What_is_HTML5.3F,

[Win11] Winokur, Danny: Flash to Focus on PC Browsing and Mobile Apps; Ad-obe to More Aggressively Contribute to HTML5. http://blogs.adobe.com/conversations/2011/11/flash-focus.html, November 2011

[Zei11] Zeigler, Andy: W3C Geolocation API in IE9. http://blogs.msdn.com/b/ie/archive/2011/02/17/w3c-geolocation-api-in-ie9.aspx, Februar 2011. – Program Manager, Internet Explorer


http://www.w3.org/TR/file-writer-api/

http://www.w3.org/TR/file-writer-api/

http://www.w3.org/News/2009#entry-6601

http://www.w3.org/News/2009#entry-6601

http://wiki.whatwg.org/wiki/HTML_vs._XHTML#Differences_Between_HTML_and_XHTML

http://wiki.whatwg.org/wiki/HTML_vs._XHTML#Differences_Between_HTML_and_XHTML

http://wiki.whatwg.org/wiki/FAQ#What_are_the_various_versions_of_the_spec.3F

http://wiki.whatwg.org/wiki/FAQ#What_are_the_various_versions_of_the_spec.3F

http://wiki.whatwg.org/wiki/FAQ#What_is_HTML5.3F

http://wiki.whatwg.org/wiki/FAQ#What_is_HTML5.3F

http://blogs.adobe.com/conversations/2011/11/flash-focus.html

http://blogs.adobe.com/conversations/2011/11/flash-focus.html

http://blogs.msdn.com/b/ie/archive/2011/02/17/w3c-geolocation-api-in-ie9.aspx



Anhang


A Optionale Tags derHTML5-Syntax

Element Start-Tag End-Taghtml optional optionalhead optional optionalbody optional optionalli required optionaldt required optionaldd required optionalp required optionalrt required optionalrp required optional

optgroup required optionaloption required optionalcolgroup optional optionalthead required optionaltbody optional optionaltfoot required optionaltr required optionaltd required optionalth required optional

Tabelle A.1: Optionale Tags beim Verwenden der HTML5-Syntax(Quelle: [Hic11a,13.1.2.4 Optional tags])


Abbildungsverzeichnis

2.1 Übersicht über die aktuellen spirit@fhs Teilprojekte (Quelle: EigeneDarstellung) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2.2 Screenshot der Single-Ansicht einer News mit Kommentaren . . . . . 62.3 Vergleich alter statischer und neuer dynamischer Stundenplan . . . . 7

3.1 Übersicht über das HTML5-Universum (Quelle: [Krö11b, S. 34]) . . . 13

4.1 Aufbereiteter Screenshot der Financial Times Deutschland Startseite(Quelle: Eigene Darstellung) . . . . . . . . . . . . . . . . . . . . . . . 19

4.2 Content-Modelle in HTML5 (Quelle: [Hic11a, 3.2.5.1 Kinds of content]) 29

6.1 Vergleich der <keygen> Implementierungen . . . . . . . . . . . . . . . 39

7.1 Screenshot des Player-Prototypen . . . . . . . . . . . . . . . . . . . . 47

8.1 Screenshot des Prototypen . . . . . . . . . . . . . . . . . . . . . . . . 528.2 Screenshot eines zweiten Prototypen . . . . . . . . . . . . . . . . . . 558.3 Screenshot von RGraph Diagrammen (Quelle: www.rgraph.net) . . . 568.4 Screenshots zweier Canvas Animationen . . . . . . . . . . . . . . . . 57

9.1 Screenshot einer Chrome Benachrichtigung . . . . . . . . . . . . . . . 63

10.1 App-Logo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6910.2 Screenshots der Spirit App . . . . . . . . . . . . . . . . . . . . . . . . 70


Tabellenverzeichnis

7.1 Browserunterstützung der Formate (in Anlehnung an:[Krö11b, S. 273]und [Ref11]) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

A.1 Optionale Tags beim Verwenden der HTML5-Syntax(Quelle: [Hic11a,13.1.2.4 Optional tags]) . . . . . . . . . . . . . . . . . . . . . . . . . . 82


Listings

3.1 Beispiel eines gültigen SGML-Dokuments. . . . . . . . . . . . . . . . 83.2 Das HTML-Pendant. . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

4.1 Gültige HTML5 Doctypes . . . . . . . . . . . . . . . . . . . . . . . . 154.2 HTML 4.01 Doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . 154.3 Mögliche Content-Types . . . . . . . . . . . . . . . . . . . . . . . . . 164.4 Ein gültiges XHTML5-Dokument . . . . . . . . . . . . . . . . . . . . 164.5 Ein gültiges HTML5-Dokument . . . . . . . . . . . . . . . . . . . . . 174.6 Ein gültiges HTML5-Dokument im XHTML-Stil . . . . . . . . . . . . 174.7 Quelltextauszug einer Teaserbox der Seite http://www.ftd.de/ . . . 204.8 Möglicher HTML5-Aufbau einer Teaserbox . . . . . . . . . . . . . . . 224.9 Gliederung nach HTML4 . . . . . . . . . . . . . . . . . . . . . . . . . 234.10 Gliederung mit HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . 234.11 Beispielhafter Aufbau einer Webseite . . . . . . . . . . . . . . . . . . 234.12 Auszeichnung eines Gründungsdatums . . . . . . . . . . . . . . . . . 254.13 Auszeichnung eines Gründungsdatums mit Microdata . . . . . . . . . 254.14 Nutzung des Microdata-Organisationsschemas . . . . . . . . . . . . . 264.15 Formular mit Pflichtfeld . . . . . . . . . . . . . . . . . . . . . . . . . 284.16 Barrierefreie Verwendung von Tabs . . . . . . . . . . . . . . . . . . . 284.17 Beispiel einer MathML-Struktur für ein HTML5-Dokument . . . . . . 30

5.1 Verfügbarkeitscheck und Positionsanfrage . . . . . . . . . . . . . . . . 355.2 Der Erfolgsfall . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365.3 Der Fehlerfall . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365.4 Die Einstellungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

6.1 Verwendung des Elements <datalist> . . . . . . . . . . . . . . . . . 386.2 Zwei neue Attribute im Einsatz . . . . . . . . . . . . . . . . . . . . . 396.3 Zwei neue Attribute im Einsatz. . . . . . . . . . . . . . . . . . . . . . 40

7.1 Verwendung des <source>-Elements . . . . . . . . . . . . . . . . . . 437.2 Untertitel für ein Video . . . . . . . . . . . . . . . . . . . . . . . . . . 447.3 HTML-Grundgerüst des Prototypen . . . . . . . . . . . . . . . . . . . 477.4 Videolaufzeit ermitteln . . . . . . . . . . . . . . . . . . . . . . . . . . 487.5 Die Funktionalität des Play-Buttons . . . . . . . . . . . . . . . . . . 487.6 Stummschaltung des Videos . . . . . . . . . . . . . . . . . . . . . . . 49

8.1 HTML-Grundgerüst . . . . . . . . . . . . . . . . . . . . . . . . . . . 528.2 Definition der Effekte als Objekt . . . . . . . . . . . . . . . . . . . . . 538.3 Erzeugen eines nicht sichtbaren Canvas . . . . . . . . . . . . . . . . . 54


http://www.ftd.de/

Listings Fachhochschule Schmalkalden WS 2011/12

8.4 HTML-Elemente mit Events versehen . . . . . . . . . . . . . . . . . . 548.5 Die Zeichenfunktion des Prototypen . . . . . . . . . . . . . . . . . . . 55

9.1 Möglicher Manifest-Aufbau . . . . . . . . . . . . . . . . . . . . . . . . 599.2 Beispiel des Cross-Document Messagings . . . . . . . . . . . . . . . . 619.3 Erstellen einer Web Socket Verbindung . . . . . . . . . . . . . . . . . 629.4 Erstellen einer EventSource . . . . . . . . . . . . . . . . . . . . . . . 629.5 Benachrichtigung mit Chrome . . . . . . . . . . . . . . . . . . . . . . 639.6 Erstellung der Worker . . . . . . . . . . . . . . . . . . . . . . . . . . 65

10.1 Android Activity in Java . . . . . . . . . . . . . . . . . . . . . . . . . 7010.2 HTML-Struktur der App . . . . . . . . . . . . . . . . . . . . . . . . . 7110.3 Initialisierung der App . . . . . . . . . . . . . . . . . . . . . . . . . . 7210.4 Abrufen der News über REST oder den localStorage . . . . . . . . . 72


Eidesstattliche ErklärungIch versichere an Eides Statt durch meine eigenhändige Unterschrift, dass ich dievorliegende Arbeit selbstständig und ohne fremde Hilfe angefertigt habe. Alle Stel-len, die wörtlich oder dem Sinn nach auf Publikationen oder Vorträgen andererAutoren beruhen, sind als solche kenntlich gemacht. Ich versichere außerdem, dassich keine andere als die angegebene Literatur verwendet habe. Diese Versicherungbezieht sich auch auf alle in der Arbeit enthaltenen Zeichnungen, Skizzen, bildlichenDarstellungen und dergleichen.

Die Arbeit wurde bisher keiner anderen Prüfungsbehörde vorgelegt und auch nochnicht veröffentlicht.

Schmalkalden,den 6. Dezember 2011

Ort, Datum Florian Schuhmann B. Sc.


html5 – derzeitigeleistungsfähigkeit und möglichkeitenin bezug auf aktuelle browser undmobile...

Documents