Webentwicklung mit HTML5. INT03A... · Eine wesentliche Eigenschaft von HTML5 ist se ine...

Webentwicklung

WEBD04

Webentwicklung mit HTML5

Semantisches Markup, Multimedia & Canvas, Frameworks, Geolocation

1213A04

Autor: Dr. Thomas Wecker Fachlektorat: Dr. Florence Maurice

Falls wir in unseren Studienheften auf Seiten im Internet verweisen/verlinken, haben wir diese nach sorgfältigen Erwägungen ausgewählt. Auf Inhalt und Gestaltung haben wir jedoch keinen Einfluss. Wir distanzieren uns daher ausdrücklich von diesen Seiten, soweit darin rechtswidrige, insbesondere jugendgefährdende oder verfassungsfeindliche Inhalte zu Tage treten sollten.

0214

N0

1

WEBD04

Webentwicklung mit HTML5Semantisches Markup, Multimedia & Canvas, Frameworks, Geolocation

Inhaltsverzeichnis0114 N01

Einleitung .................................................................................................................................... 1

1 HTML5 Übersicht ................................................................................................................ 3

1.1 Abwärtskompatibilität und Fallbacklösungen .................................................. 4

1.2 Einfache Codeerstellung mit Texteditoren ........................................................ 5

1.2.1 Windows .................................................................................................................. 5

1.2.2 Mac ............................................................................................................................ 5

Zusammenfassung ................................................................................................................. 7

2 Neue Elemente: Semantisches Markup ...................................................................... 8

2.1 Barrierefreiheit und SEO-Aspekte ....................................................................... 17


3 Benutzerfreundliche Formulare ..................................................................................... 18


4 Multimedia-Einbettung: Natives Audio und Video .................................................. 26

4.1 Container und Codecs ........................................................................................... 26

4.2 Audioeinbettung ..................................................................................................... 28

4.3 Videoeinbettung ..................................................................................................... 31


5 Dynamisch erzeugte Bitmap-Grafiken mit canvas .................................................. 36

5.1 Ein einfaches Beispiel ............................................................................................ 36

5.2 Fallbacklösung für Internet Explorer .................................................................. 39

5.3 Ein Beispiel mit Text und Logo ........................................................................... 41


6 HTML5-Frameworks ........................................................................................................... 44

6.1 Übersicht .................................................................................................................. 44

6.2 HTML5 Boilerplate ................................................................................................ 46

6.3 Standardbeispiel mit Boilerplate .......................................................................... 50


WEBD04

7 Über HTML5 hinaus ............................................................................................................ 54

7.1 Clientseitige Daten verwenden ........................................................................... 54

7.2 Offline arbeiten mit AppCache ........................................................................... 58

7.3 Geolocation .............................................................................................................. 60


8 Ausblick und Schlusswort ............................................................................................... 65

Anhang

A. Lösungen der Aufgaben zur Selbstüberprüfung ............................................... 66

B. Glossar ...................................................................................................................... 70

C. Literatur ................................................................................................................... 72

D. Abbildungsverzeichnis .......................................................................................... 74

E. Sachwortverzeichnis .............................................................................................. 76

F. Einsendeaufgabe ..................................................................................................... 79

WEBD04

WEBD04Webentwicklung mit HTML50812 N01

Einleitung

Liebe Fernschülerin, lieber Fernschüler,

das World Wide Web Consortium (W3C) hat beschlossen, den bisherigen Standard XHTML nicht mehr weiterzuentwickeln. HTML5 – der neue „Quasi-Standard“ – wurde weltweit von der Webentwickler-Gemeinde mit großem Enthusiasmus begrüßt und feiert seitdem seinen Siegeszug bei unzähligen neuen Projekten oder Relaunches bestehender Websites. Quasi-Standard deshalb, weil die endgültige Verabschiedung durch das W3C noch weit in der Zu-kunft liegt. Das hat aber die Webdesigner – mit Google als Vorreiter – nicht daran gehindert, sofort HTML5 in breitem Umfang einzusetzen. Das wurde dadurch möglich, dass auch die Browser-Entwickler sofort damit begonnen haben, ihre Produkte an HTML5 anzupassen. Deshalb werden heute werden die wichtigsten Elemente des De-facto-Standards von allen wichtigen Browsern unterstützt. Das schließt vor allem auch die Browser auf mobilen Gerä-ten ein, deren Bedeutung immer größer wird.

HTML5 besitzt viele Eigenschaften, auf die Webentwickler schon lange gewartet haben: Semantisches Markup mithilfe neuer Sprachelemente, dynamisch generierte Bitmap-Grafi-ken mit dem Element canvas, und nicht zuletzt die einfache Einbindung nativer Audio- und Videoelemente. Die für mobile Geräte so wichtigen Touch-Techniken werden mit HTML5 ebenso ermöglicht, wie die Drag&Drop-Fähigkeit oder das Arbeiten mit clientseitigen Daten.

Bemerkenswert ist auch die Nachricht, dass das neue Fundament von Windows8-Applikati-onen aus HTML5, CSS3 und JavaScript besteht. Auch Unternehmen wie Adobe, Apple, Google und Amazon sind mit HTML5-spezifischen Applikationen auf dem Markt. Mit den-selben drei Technologien können auch plattformunabhängig Apps für mobile Geräte entwi-ckelt werden, die sich wie native Apps verhalten. Und ganz aktuell hat IBM unter dem Na-men „Maquetta“ ein neuartiges HTML5-Authoring-Tool angekündigt.

Mit HTML5 steht uns also eine Auszeichnungssprache für Webseiten zur Verfügung, die nicht nur alle Anforderungen an moderne Web-2.0-Sites erfüllt, sondern auch die Basis an-derer wichtiger Plattformen bildet. Ich bin deshalb zuversichtlich, dass es Ihnen bei der Lek-türe dieses Studienhefts nicht langweilig wird und es Ihnen hoffentlich auch Spaß macht, HTML5 zu erlernen. Alle in diesem Heft gezeigten Beispiele, Skripts und andere Hilfsmittel finden Sie auf dem mitgelieferten Datenträger.

Dr. Thomas Wecker

WEBD04 1

2 WEBD04

HTML5 Übersicht 1

1 HTML5 Übersicht

Lernziele

In diesem kurzen Kapitel möchte ich Ihnen einen ersten Überblick über die wich-tigsten Eigenschaften von HTML5 geben und zeigen, wie Sie ohne weitere Hilfsmit-tel HTML5-Code auf Ihrem Rechner erstellen können.

HTML5 bildet die Grundlage zur Entwicklung von Webanwendungen der nächsten Genera-tion. Es ermöglicht uns, in Zukunft Websites leichter zu erstellen und zu pflegen, aber vor allem auch viel benutzerfreundlicher zu machen. HTML5 bietet zahlreiche neue Elemente zur Strukturierung und Einbettung der Inhalte von Webseiten. Auf viele bisher übliche zu-sätzliche „Markups“ (d. h. Auszeichnungselemente) kann damit zum Glück verzichtet wer-den: Dazu gehören z. B. unzählige DIVs, aber auch Plug-ins wie z. B. Flash oder Silverlight. Die folgende Abbildung zeigt die Grundstruktur eines HTML5-Dokuments:

Abb. 1.1: HTML5-Grundstruktur

Wenn Sie früher schon viel mit XHTML gearbeitet haben, fällt Ihnen sicher vor allem der vergleichsweise überaus simple Doctype-Befehl auf, der die Browser veranlasst, das Doku-ment im Standard-Modus anzuzeigen. Auch das Meta-Tag zur Definition des Zeichensatzes UTF-8 ist kompakter, als es das in XHTML war. Auch die Syntax hat sich bei HTML5 im Vergleich zu XHTML vereinfacht: Manche End-Tags können weggelassen werden, die selbst schließenden Elemente (wie z. B. <br />) sind in HTML5 nicht mehr obligatorisch und Attribute müssen nur noch dann in Anführungszeichen geschrieben werden, wenn sie Leer-zeichen enthalten. Eine weitere Vereinfachung betrifft die bisher obligatorische Angabe des MIME-Typs für CSS und JavaScript. Bisher waren Sie eine Schreibweise wie in den folgen-den beiden Beispielen gewohnt:

Mit HTML5 können die Angaben type="text/javascript" bzw. type="text/css" weggelassen werden.

Sie werden sich an diese Syntaxregeln automatisch gewöhnen, während Sie das Studienheft durcharbeiten, sodass ich diese Regeln hier nicht im Detail erläutern muss.

<script type="text/javascript">

<link href="demo.css" rel="stylesheet" type="text/css">

Simpler Doc-type-Befehl und einfache Syntax

WEBD04 3

1 HTML5 Übersicht

Die neuen Markup-Elemente werden Sie gleich im nächsten Kapitel genauer kennenlernen. In den folgenden Kapiteln dieses Studienhefts werde ich Sie mit weiteren Neuerungen von HTML5 vertraut machen, die bereits jetzt großen Anklang in der Webentwickler-Gemeinde gefunden haben und schon vielfach eingesetzt werden: Multimedia-Einbettung, das canvas-Element, benutzerfreundliche Formulare, HTML5-Frameworks, clientseitige Datenspeiche-rung, und die Geolocation-API. Natürlich kann ich in diesem Studienheft nur einen Teil der vielen neuen Komponenten und Eigenschaften von HTML5 vorstellen. Wenn Sie das Thema vertiefen möchten, finden Sie sowohl im Netz, als auch in zahlreichen Büchern weiterfüh-rende Informationen.

1.1 Abwärtskompatibilität und Fallbacklösungen

Eine wesentliche Eigenschaft von HTML5 ist seine Abwärtskompatibilität. Damit ist es mög-lich, HTML5 bereits heute zu verwenden, weil es in den meisten wichtigen Browsern (Firefox, Chrome, Safari, IE9) korrekt verarbeitet und angezeigt wird. HTML5-Dokumente werden vom Validierungsdienst des W3C korrekt validiert und man kann HTML5 sogar für den „größten Feind“ aller Webdesigner – den Internet Explorer – einsetzen. Dieser wird al-lerdings die Webseiten nicht genauso anzeigen, wie moderne Browser mit perfekter HTML5-Unterstützung. Selbst beim IE8 ist diese Unterstützung noch mangelhaft. Erst mit dem IE9 hat sich die Situation deutlich gebessert – aber IE9 ist leider noch nicht so weitverbreitet.

Es ist durchaus möglich, dafür zu sorgen, dass auch diese älteren Versionen des Internet Ex-plorers HTML5-basierte Websites in zufriedenstellender Weise anzeigen. Dafür wurden in der Literatur zahlreiche Ausweichlösungen vorgeschlagen. Ich habe mich entschlossen, aus folgenden Gründen auf diese „Fallbacklösungen“ in meinem Studienheft – von wenigen Ausnahmen abgesehen – nicht im Detail einzugehen:

• Ich möchte, dass Sie sich ganz auf die neuen Eigenschaften und Möglichkeiten von HTML5 konzentrieren können und nicht ständig durch diese – häufig etwas „knifflige“ Behandlung von Spezialfällen abgelenkt werden. Ich werde Sie also in diesem Studien-heft soweit wie möglich mit lästigen Tabellen verschonen, in denen aufgeführt wird, welcher Browser welches Sprachelement bereits voll unterstützt (falls Sie sich doch dafür interessieren, sehen Sie am besten bei http://caniuse.com nach. Diese Quelle bietet immer die aktualisierte Tabellen zur Browserunterstützung.) Ich werde Sie auch nicht mit lan-gen JavaScripts konfrontieren, die nämlich fast immer für die „Fallbacklösungen“ not-wendig sind.

• Die Entwicklung ist auf diesem Gebiet sehr schnelllebig: Ich möchte deshalb nicht, dass Sie sich hier mit komplizierten Sonderlösungen beschäftigen müssen, die sich vielleicht schon wieder von selbst erledigt haben, wenn Sie das Studienheft in Händen halten.

• Falls Sie mit solchen Lösungen arbeiten wollen (oder müssen), ist es sehr leicht, die ent-sprechenden Quellen im Web zu finden.

HTML5 kann man heute schon verwenden

4 WEBD04

http://caniuse.com

HTML5 Übersicht 1

1.2 Einfache Codeerstellung mit Texteditoren

Die Erstellung eines HTML5-Dokuments kann ganz einfach mit den Bordmitteln von Win-dows-PCs bzw. Macs erfolgen. Selbstverständlich ist es ungleich bequemer und effizienter, dafür so mächtige Webeditoren wie Dreamweaver zu verwenden. Ich verzichte aber in die-sem Studienheft aus zwei Gründen ganz bewusst auf den Einsatz solcher Hilfsmittel:

• Meine langjährige Erfahrung als IT-Trainer hat immer wieder gezeigt, dass sich bei Ler-nenden die wichtigsten Sprachelemente von HTML besser einprägen, wenn sie diese we-nigstens einmal komplett manuell eingegeben haben.

• Ich möchte die erfolgreiche Lektüre dieses Studienhefts nicht von der Voraussetzung teu-rer Software abhängig machen.

1.2.1 Windows

Falls Sie Ihren HTML-Code auf einem Windows-PC eingeben, verwenden Sie bitte das „Notepad“ (Start>Alle Programme>Zubehör>Editor). Dieser Editor ist ein ganz primitives Programm, mit dem man lediglich Buchstaben und Zahlen eingeben kann. Er ist eigentlich dafür gedacht, einfache Textdokumente ohne jegliche Formatierung zu erstellen. Beim Ab-speichern muss man deshalb darauf achten, dass man als Dateiendung auch explizit .html eingibt und nicht die Voreinstellung für Textdateien .txt verwendet.

Abb. 1.2: Speicheroptionen beim Notepad

Bitte beachten Sie, dass vor dem Speichern im Drop-down-Menü Codierung die Option UTF-8 (8-bit Unicode Transformation Format) ausgewählt werden muss, damit später auch die deutschen Umlaute korrekt vom Browser dargestellt werden.

Wenn Sie einen deutlich leistungsfähigeren Editor verwenden möchten, können Sie sich für Windows-PCs das kostenlose Notepad++ herunterladen (http://notepad-plus-plus.org).

1.2.2 Mac

Falls Sie Ihren HTML-Code auf einem Mac eingeben, verwenden Sie bitte das Programm TextEdit. Damit dieses Ihren Code nicht als formatierten Text interpretiert, müssen Sie in den Programmeinstellungen folgende Änderung vornehmen: Wählen Sie bitte im Hauptmenü den Befehl TextEdit>Einstellungen und selektieren dann das Register „Neues Dokument“. Selektieren Sie dort bitte die Option „Reiner Text“. Selektieren Sie dann bitte das Register „Öffnen und Sichern“.

WEBD04 5

http://notepad-plus-plus.org

1 HTML5 Übersicht

Abb. 1.3: Speicheroptionen beim TextEdit

Dort aktivieren Sie bitte oben nach der Überschrift „Beim Öffnen von Dateien“ die Option „Formatierungsbefehle in HTML-Dateien ignorieren“. Selektieren Sie dann bitte unten in diesem Register unter der Überschrift „Optionen für das Sichern von HTML“ folgende Ein-träge in den drei Drop-down-Menüs: Dokumentart: HTML 4.01 Strict (HTML5 wird leider noch nicht angeboten), CSS: Kein CSS, Codierung: Unicode (UTF-8). Achten Sie beim Spei-chern von Dateien darauf, dass Sie auch die Dateiendung .html eingeben. Wenn Sie einen leistungsfähigen Editor verwenden möchten, kommt für den Mac dafür z. B. der kostenlose Taco-Editor infrage (http://taco-html-edit.softonic.de/mac).

6 WEBD04

http://taco-html-edit.softonic.de/mac

HTML5 Übersicht 1

Zusammenfassung

• HTML5 bietet zahlreiche neue Auszeichnungselemente.

• HTML5 macht Plug-ins zur Darstellung von Multimedia-Elementen überflüssig.

• Die Grundstruktur und Syntax von HTML5 ist einfacher, als die von XHTML.

• HTML5 zeichnet sich durch seine Abwärtskompatibilität aus, d. h., Sie können HTML5 bereits heute mit den allermeisten Browsern einsetzen.

• Für ältere Browser existieren unterschiedliche Fallbacklösungen, die in der Regel mit JavaScript implementiert werden.

Aufgaben zur Selbstüberprüfung

Überprüfen Sie nun bitte Ihre neu erworbenen Kenntnisse. Lösen Sie die nachfolgenden Aufgaben bitte schriftlich und vergleichen Sie Ihre Lösungen mit den Musterlösungen im Anhang. Es ist sehr wichtig und in Ihrem eigenen Interesse die Aufgaben eigenständig zu lösen, ehe Sie im Anhang oder dem Text dieses Kapitels nachschlagen.

1.1 Erstellen Sie bitte auf Ihrem Rechner mit dem jeweils vorhandenen Editor eine HTML-Datei mit der HTML5-Grundstruktur.

1.2 Fügen Sie bitte in den body dieses Dokuments einige Ihnen bekannte strukturelle Elemente ein (z. B. Überschriften, Paragrafen, Listen usw.) und testen Sie dann das Ergebnis bitte in einem Browser.

WEBD04 7

2 Neue Elemente: Semantisches Markup


Lernziele

In diesem Kapitel lernen Sie wichtige neue Auszeichnungselemente von HTML5 kennen. Sie erfahren, was Semantisches Markup ist und welche Vorteile es für die Barrierefreiheit und Suchmaschinenoptimierung von Websites hat.

In keiner neuen HTML-Version sind so viele Erweiterungen eingeführt worden, die sich un-mittelbar auf die Auszeichnung von Inhalten beziehen. Dies sind die neuen Markup-Elemen-te header, nav, footer, section, article, aside. Bevor ich Ihnen die Anwendung dieser Elemente an einem einfachen Beispiel demonstriere, hier zunächst eine kurze Be-schreibung:

header: Kopfbereich der ganzen Webseite (Logo, Banner, Titel, Suchfeld, usw.) oder Be-ginn eines Bereichs (vergl. section).

nav: Gruppierung von Navigationslinks der Haupt- und Subnavigation (nicht für Ele-mente der Metanavigation (Copyright, AGBs, Impressum, usw.), die man meist eher im footer unterbringt.

section: Logischer Bereich einer Webseite, wie z. B.: Einführung, alle Beiträge eines Blogs, Aktuelles, Kontaktinformationen.

article: Damit können die meisten Inhalte einer Seite beschrieben werden, wie z. B. die einzelnen Artikel eines Blogs (Postings) oder auch Inhalte, die über RSS-Feeds verbreitet werden.

aside: Inhalte, die nicht unmittelbar zum Hauptinhalt der Seite gehören: Zitate, Infogra-fiken, Marginalien oder auch weiterführende Links (z. B. Bloggroll bei einem Blog).

footer: Fußzeile der Seite oder Abschluss eines Bereichs.

Alle diese Elemente können natürlich mehrmals auf einer Webseite verwendet werden. In diesem Fall ist es notwendig, diese Tags zusätzlich mit IDs bzw. Klassen zu versehen. Damit können sie zum Aufbau eines Seitenlayouts gezielt mithilfe von CSS-Regeln referenziert werden. Der schematische Aufbau eines Blogs könnte demnach so aussehen:

8 WEBD04

Neue Elemente: Semantisches Markup 2

Wie Sie sicher bereits wissen, werden einmalig auftretende Elemente mit IDs identifiziert, mehrmals auftretende Elemente mit Klassen. Ich möchte Ihnen nun die Anwendung dieser neuen Tags an einem einfachen Beispiel demonstrieren. Ich verwende gerade diese Beispiel-seite deshalb immer wieder gerne, weil sie einerseits relativ simpel ist – aber doch komplex genug, um die meisten Themen damit erklären zu können. Wie die Seite im Firefox angezeigt wird, sehen Sie in der folgenden Abbildung:

<body>

<header id=page_header>...</header>

<nav id=main_navigation>...</nav>

<section id=postings>

<header id=postings_header>...</header>

<article class=posts>

<header class=article_header>...</header>

<p>...</p>

<p>...</p>

<aside class=quote>...</aside>

<footer class=article_footer>...</footer>

</article>

<article>

<header class=article_header>...</header>

<p>...</p>

<p>...</p>

<aside class=quote>...</aside>

<footer class=article_footer >...</footer>

</article>

<footer id=postings_footer>...</footer>

</section>

<footer id=page_footer>...</footer>

</body>

WEBD04 9


Abb. 2.1: Beispielseite im Firefox

Wie das Layoutschema in der folgenden Abbildung veranschaulicht, handelt es sich um ein starres Layout mit einem Header-Bereich, einem gefloateten Navigationsbereich, dem Con-tent und einem Footer (Beispiel auf Datenträger):

10 WEBD04


Abb. 2.2: Beispielseite Layoutschema

Werfen wir einen Blick auf den HTML-Code. Dieser basiert zwar bereits auf der HTML5-Grundstruktur, nutzt aber zunächst noch nicht die gerade eingeführten neuen Markup-Ele-mente. Stattdessen werden zahlreiche mit IDs versehene DIV-Container verwendet, um mit-hilfe von CSS das Layout zu generieren:

WEBD04 11


Abb. 2.3: HTML-Code-Beispielseite (ohne semantisches Markup)

Auf diese Weise wurden in den letzten Jahren die meisten Websites implementiert. Die Folge: Häufig entsteht so eine unüberschaubare Zahl von DIV-Containern, die oft schwer zu gestal-ten und zu pflegen sind. Die folgende Abbildung zeigt nun, wie unser Beispiel aussieht, wenn wir statt DIVs die neuen Markup-Tags anwenden. Der umfassende Container holder hat ja keine inhaltlich relevante Bedeutung und deshalb bleibt es hier bei einem DIV-Tag. Die relevanten Stellen habe ich rot markiert (Beispiel auf Datenträger):

Neue Tags statt vieler DIVs

12 WEBD04


Abb. 2.4: HTML-Code-Beispielseite: semantisches Markup

Gut, ich gebe ja zu, dass in diesem einfachen Fall auch die DIVs noch gut zu überschauen sind. Aber ich hoffe, dass Sie gerade deshalb gut nachvollziehen können, wie die DIV-Con-tainer sinnvoll durch entsprechende Tags ersetzt werden können. Übrigens: Ich schreibe die Attributwerte in meinen Codebeispielen aus alter Gewohnheit noch in Anführungszeichen. HTML5 würde es prinzipiell auch erlauben, diese wegzulassen.

WEBD04 13


Wenn Sie genau hinsehen, sollte Ihnen noch eine weitere Änderung im HTML-Code auffal-len: Der „Hilfscontainer“ mit der Klasse brclear, den wir bisher für die Beendigung des Umfließens eingesetzt hatten, ist in dem modifizierten Code nicht mehr vorhanden. Stattdes-sen wurde der section mit dem Content die neue Klasse cf zugewiesen. Sie werden gleich anschließend in diesem Abschnitt den Grund dafür kennenlernen.

Damit nach diesen Änderungen im Quellcode die Seite im Browser wieder korrekt angezeigt wird, muss nun auch noch der CSS-Code entsprechend angepasst werden. Sehen wir uns in der folgenden Abbildung an, wie dieser jetzt aussehen muss:

2.5 a: Teilbild

14 WEBD04


Abb. 2.5: CSS-Code-Beispielseite (an semantisches Markup angepasst)

Die Anpassung war in diesem Fall denkbar einfach: An den rot markierten Stellen mussten lediglich die bisherigen ID-Selektoren durch normale Tag-Selektoren ersetzt werden, also

#header muss durch header ersetzt werden,

#nav muss durch nav ersetzt werden usw.

Es musste also an der markierten Stellen nur das #-Zeichen entfernt werden. Die Anpassung ist deshalb so einfach, weil man als erfahrener Webdesigner für die IDs auch schon bisher „sprechende Namen“ verwendet hat, um sich später im eigenen Design besser auszukennen. In unserem Fall hießen die IDs genau so, wie jetzt die neuen Markup-Tags.

Falls man ganz sicher gehen möchte, dass die neuen Markup-Elemente auch von älteren Browsern, die diese noch nicht „kennen“, richtig dargestellt werden, kann im Stylesheet noch folgende Erweiterung vorgenommen werden: Man ergänzt für alle neuen Elemente die Regel display:block . Damit werden die neuen HTML5-Elemente wenigstens wie andere Block-Level-Elemente (z. B. DIVs) behandelt. Ich habe im oben gezeigten Stylesheet darauf verzichtet, um es übersichtlich zu halten.

Es gibt aber noch eine Änderung: Wie ich zuvor schon erwähnt habe, wurde die Klasse brclear (sie gehörte bisher zu dem „Hilfscontainer“) durch die Klasse cf ersetzt („cf“ steht für „clear float“). Interessant ist jetzt natürlich, wie die Regel für die Klasse cf aussieht und wie mit ihrer Hilfe das Umfließen des Elements nav beendet wird. Das ist eigentlich ein reines CSS-Thema und hat zunächst mit HTML5 nicht unmittelbar etwas zu tun:

2.5 b: Teilbild

cf { zoom: 1; }

cf:before,

cf:before, cf:after { content: ""; display: table; }

cf:after { clear: both; }

WEBD04 15


Es handelt sich um das sog. „Micro clearfix Hack“, das von Nicolaus Gallagher entwickelt wurde (http://nicolasgallagher.com/micro-clearfix-hack). Ich kann seine Funktionsweise an dieser Stelle nur ganz kurz erklären und empfehle Ihnen deshalb die Lektüre der oben zitier-ten Originalveröffentlichung: Mithilfe der sog. Pseudoelemente before und after besteht die Möglichkeit, beim Öffnen eines HTML-Dokuments im Browser – nur mithilfe von CSS – automatisch Inhalt zu generieren. In diesem Fall (Zeile 3 und 4 des CSS-Codes) ist der In-halt lediglich eine leere Zeichenkette (""), deren Darstellungsmodus auf table gesetzt wird. Diesem „on the fly“ erzeugten Element wird dann die Eigenschaft clear: both ge-geben, die das Umfließen beendet. Die ersten beiden Zeilen des CSS-Codes enthalten noch etwas „CSS-Zauberei“ und dienen vor allem dazu, dieses Verfahren auch für den Internet Ex-plorer anzupassen.

Nach dieser Modifikation von HTML- und CSS-Code sieht die Seite im Firefox wieder exakt genauso aus, wie in der vorhin gezeigten Abbildung. Sollten Sie daran zweifeln, habe ich ei-nen guten Tipp: Machen Sie die Aufgaben zur Selbstüberprüfung am Ende des Kapitels – dann können Sie sich selbst überzeugen! Noch eine Anmerkung zum Thema CSS: Ich möchte mich in diesem Studienheft ganz auf die Eigenschaften und Möglichkeiten von HTML5 kon-zentrieren und das Thema CSS so weit wie möglich aussparen. HTML5 wird perfekt ergänzt durch CSS 3 und JavaScript. Deshalb ist diesen Themen jeweils ein eigenes Studienheft ge-widmet.

Kehren wir zurück zu unserer Beispielseite: Wenn lediglich die bisherigen DIV-Container mit IDs durch gleichnamige Tags ersetzt wurden – wo liegt denn da der Vorteil? Diese berech-tigte Frage führt uns endlich zu dem Titel dieses Kapitels: „Semantisches Markup“. Bevor ich Ihnen erklären kann, was damit gemeint ist, müssen wir den Begriff Semantik klären. Schlägt man diesen in Wikipedia nach, findet man folgende Erklärung:

Semantik (von altgriechisch ί sēmaínein „bezeichnen“), auch Bedeutungs-lehre, nennt man die Theorie oder Wissenschaft von der Bedeutung der Zeichen. Zeichen können in diesem Fall Wörter, Phrasen oder Symbole sein. Die Semantik beschäftigt sich typischerweise mit den Beziehungen zwischen Zeichen und Bedeutungen dieser Zei-chen.

Was bedeutet das nun in Bezug auf HTML-Tags? Auch hier hilft uns wieder Wikipedia wei-ter, wenn wir den Begriff Semantisches Web nachschlagen (Zitat verkürzt):

Das Semantische Web […] ist ein neues Konzept bei der Weiterentwicklung des World Wide Webs und des Internets. Im Rahmen zur Weiterentwicklung […] wird es erforder-lich, dass Maschinen die von Menschen zusammengetragenen Informationen verarbei-ten können. All die in menschlicher Sprache ausgedrückten Informationen im Internet sollen mit einer eindeutigen Beschreibung ihrer Bedeutung (Semantik) versehen werden, die auch von Computern „verstanden“ oder zumindest verarbeitet werden kann. Die ma-schinelle Verwendung der Daten aus dem von Menschen geflochtenen Netz der Daten ist nur möglich, wenn die Maschinen deren Bedeutung eindeutig zuordnen können. Nur dann stellen sie Informationen dar.

Was ist also der Vorteil des semantischen Markups? Mit den beiden gerade zitierten Defini-tionen ist eigentlich schon alles gesagt, aber ich fasse es gerne noch mal kurz und knapp zu-sammen:

Semantisches Markup macht es Computern (und natürlich auch Menschen, die den Code lesen oder bearbeiten müssen) leichter, die Bedeutung und den Zusammenhang des Inhalts zu verstehen.

Semantisches Markup erleichtert es Computern und Menschen, den Inhalt zu erfassen

16 WEBD04

http://nicolasgallagher.com/micro-clearfix-hack


Ich komme jetzt noch mal kurz auf unseren „Hilfscontainer“ zurück, den bisher immer unsere Standard-Methode zur Beendigung des Umfließens war: Unter dem Aspekt des „semanti-schen Webs“ ist dieser selbstverständlich nicht mehr akzeptabel. Wie soll eine Maschine des-sen Bedeutung erfassen? Jetzt kennen Sie endlich den Grund, warum ich Ihnen vorhin eine semantisch korrekte Alternative gezeigt habe, die ganz ohne dieses zusätzliche DIV-Tag aus-kommt.

Eine sehr empfehlenswerte allgemeine Einführung in die Thematik finden Sie hier:

http://www.positioniseverything.net/easyclearing.html

2.1 Barrierefreiheit und SEO-Aspekte

Webseiten, die mit diesen neuen semantischen Tags ausgezeichnet worden sind, können sehr viel leichter von den Suchmaschinen-Crawlern interpretiert werden. Damit können diese neuen HTML5-Elemente künftig einen wesentlichen Beitrag zur Suchmaschinenoptimie-rung (SEO: Search Engine Optimization) leisten. Erfreulicherweise gilt: Was gut ist für Such-maschinen ist meistens auch gut für die Barrierefreiheit. Die semantischen Tags bieten tat-sächlich auch für die Zugänglichkeit von Webseiten Vorteile. Beispiel: Wird der Navigationsbereich – wie in unserem Beispiel – mit dem nav-Tag ausgezeichnet, könnten Screenreader für Blinde oder sehbehinderte Menschen passende Optionen zur Vermittlung der Inhalte anbieten oder den Navigationsbereich gleich überspringen.

Zusammenfassung

• HTML5 stellt neue Tags zur Auszeichnung von Inhalten zur Verfügung: header, nav, footer, section, article, aside.

• Mit diesen neuen Tags kann auf die vielen DIV-Container, mit denen bisher Webseiten erstellt wurden, verzichtet werden.

• Semantisches Markup bedeutet: Informationen im Internet werden mit einer eindeutigen Beschreibung ihrer Bedeutung versehen, die von Computern verstanden und verarbeitet werden kann.

• Semantisches Markup ist ein wichtiges Element zur Suchmaschinenoptimierung.

• Semantisches Markup erleichtert die Zugänglichkeit von Webseiten für blinde und seh-behinderte Menschen.


2.1 Stellen Sie bitte die Beispielseite „Meine tolle Firma“ in der eben erklärten Weise auf das semantische Markup um (der Ausgangscode befindet sich auf mitgeliefer-tem Datenträger).

2.2 Benutzen Sie dabei die semantisch korrekte Methode zur Beendigung des Umflie-ßens (Micro Clearfix Hack).

Was gut ist für Suchmaschi-nen ist auch gut für die Barrierefreiheit

WEBD04 17


3 Benutzerfreundliche Formulare


Lernziele:

In diesem Kapitel lernen Sie weitere neue Elemente und deren Attribute kennen, die mit HTML5 speziell für das Markup von Formularen eingeführt worden sind. Damit lassen sich wesentlich benutzerfreundlichere Formulare erstellen, die auch auf mo-bilen Geräten gut funktionieren.

Formulare spielen im Web 2.0 eine sehr wichtige Rolle: Ob bei Suchvorgängen, Bestellungen in Online-Shops oder dem Posten von Beiträgen in sozialen Netzwerken: Immer hat man es als User mit Formularen zu tun, die heute natürlich auch auf mobilen Geräten gut nutzbar sein müssen. Am besten, wir sehen uns das gleich mal an dem konkreten Beispiel in der fol-genden Abbildung an (Beispiel auf Datenträger):

Abb. 3.1: Beispiel-Formular im Firefox

Ich möchte an dieser Stelle noch mal betonen: Ich versuche, mich in diesem Studienheft so weit wie möglich auf das Thema HTML5 zu konzentrieren. Deshalb verzichte ich bei diesem Beispielformular auch auf alle „kosmetischen“ Maßnahmen, die man hier natürlich zur Ge-staltung mit CSS anwenden könnte. Werfen wir einen Blick auf den Quellcode, den die fol-gende Abbildung zeigt: Sie erkennen, dass natürlich in diesem Formular auch altbekannte Elemente aus früheren HTML-Versionen Verwendung finden. Dazu gehört das form-Tag selbst, das label-Tag für die Beschriftung, die „klassischen“ Eingabefelder (z. B. für Namen) und schließlich die bekannten Buttons zum Löschen und Absenden. Noch eine Anmerkung zum form-Tag: Wir wollen uns ja hier auf HTML5 konzentrieren und Sie wissen sicher be-reits, dass die Verarbeitung von Formularen nur mithilfe serverseitiger Programmierung (heute meist mit PHP) erfolgen kann. Deshalb habe ich bei form das Attribut action weg-gelassen, da wir in diesem Kontext dafür keine sinnvolle Verwendung haben. Wir können unser Beispiel-Formular also im Browser ansehen, absenden und auch löschen – darüber hi-naus wird allerdings nichts passieren. Im form-Tag des Beispiel-Formulars sehen Sie das

HTML5-Formulare funktionieren auch gut auf mobilen Geräten

18 WEBD04

Benutzerfreundliche Formulare 3

Attribut autocomplete. Damit wird die Autovervollständigung im gesamten Formular ak-tiviert. Man kann aber autocomplete auch individuell bei einzelnen Eingabefeldern ange-ben. Mit autocomplete="off" wird die Autovervollständigung abgeschaltet, wenn Sicherheitsüberlegungen dagegensprechen.

Abb. 3.2: Beispiel-Formular Quellcode

WEBD04 19


In der folgenden Abbildung sehen Sie unser Beispiel-Formular, wie es vom Safari-Browser unter Windows dargestellt wird. Ich werde darauf bei der Erklärung der neuen Formularele-mente zurückkommen:

Abb. 3.3: Beispiel-Formular im Safari (Windows)

Sehen wir uns nun die neuen Elemente nacheinander an. Vorher noch kurz eine Wiederho-lung der Bedeutung der Attribute name und id, die bei allen Tags verwendet werden: name wird benötigt, um später das Formular mit einer serverseitigen Software zu verarbeiten. Man sollte deshalb für dieses Attribut einen „sprechenden“ Wert wählen. Das macht es dem Pro-grammierer leichter, den Inhalt des zugehörigen Eingabefeldes richtig auszulesen. id wird dagegen benutzt, um das entsprechende Element später mithilfe von CSS zu gestalten (was wir, wie gesagt, in diesem Heft gar nicht umsetzen werden). Die Attribute name und id dürf-ten theoretisch denselben Wert besitzen – ich habe bewusst für name englische Ausdrücke oder Abkürzungen verwendet, um den Unterschied der beiden Attribute hervorzuheben. Ich brauche in der folgenden Liste auf diese nicht mehr im Einzelnen eingehen.

20 WEBD04


• <input type="search" autofocus>

– Spezielles Eingabefeld zur Auszeichnung von Suchfeldern. Diese können dadurch in Abhängigkeit vom jeweiligen Betriebssystem besonders gekennzeichnet werden. So stellen beispielsweise Browser auf allen Apple-Geräten diese Suchfelder immer mit abgerundeten Ecken dar (s. dazu auch weiter unten den Screenshot des Formulars auf einem iPhone).

– Neu ist hier auch das Attribut autofocus: Dadurch wird der Cursor beim Laden der Seite automatisch in dieses Eingabefeld gesetzt. Bitte beachten Sie hier die Syn-tax, die man als Attributminimalisierung bezeichnet: Statt autofocus="auto-focus" steht hier lediglich der Attributname (es ist aber ebenso die lange Schreib-weise erlaubt).

• <input type="text" placeholder="Nachname">

– Dies ist das bekannte Standard-Eingabefeld, das wir bereits aus früheren HTML-Ver-sionen kennen. Das hier verwendete Attribut placeholder gehört aber zu den wichtigen Neuerungen, die HTML5 für Formulare gebracht hat. Die Bedeutung er-klärt sich eigentlich von selbst: Wie Sie ja in der Abbildung oben bereits gesehen ha-ben, können Sie damit einen Platzhaltertext anzeigen lassen. Dieser gibt den Nutzern einen Hinweis, welche Daten in das Feld einzugeben sind. Klickt man in das Feld und gibt dort Daten ein, wird der Platzhaltertext automatisch überschrieben. place-holder sollte logischerweise nicht mit autofocus kombiniert werden: Letzteres würde ja den Hinweistext sofort löschen, wenn das Eingabefeld den Focus erhält.

– Bei diesem Eingabefeld wurde zusätzlich das Attribut required angegeben. Dies kennzeichnet ein Feld als obligatorisch. Die folgende Abbildung zeigt diesen Effekt in Aktion, d. h., das Formular wurde ohne Eingabe in dieses Feld gesendet:

Abb. 3.4: Das Attribut required in Aktion (Firefox)

• <input type="number"

– Eingabefeld für Zahlen. Mithilfe der Attribute min und max lassen sich hier Min-dest- und Maximalwerte festlegen. Das Attribut steps legt dabei die Schritte fest. Firefox stellt, wie die Abbildung weiter zeigt, dieses Feld als normales Textfeld dar und zeigt darin den Platzhaltertext an. Webkit-Browser wie Safari und auch Opera zeigen dagegen ein Eingabefeld mit zwei kleinen Pfeilen nach oben und unten (sog. „Spinboxen“), mit denen man in Schritten von steps den Eingabewert erhöhen oder erniedrigen kann (s. Abbildung oben).

WEBD04 21


• <input type="date"

– Dieses Eingabefeld dient zur Datumseingabe, was man gerade bei Online-Reise-buchungen sehr häufig benötigt. Klickt man in das Feld, erscheinen dazu – je nach Browser und Plattform – unterschiedliche „Kalender-Widgets“, die mit JavaScript implementiert werden. Die folgende Abbildung zeigt die Umsetzung auf dem iPhone:

Abb. 3.5: Das Element input type="date" in Aktion (iPhone, Safari)

• <input type="range"

– Dieses Eingabefeld dient – ähnlich dem number-Feld – der Eingabe von Zahlen. In diesem Fall kommt es allerdings nicht auf den genauen Wert an. Opera und Webkit-Browser wie Safari stellen deshalb dieses Feld als Schieberegler dar (s. Abbildung oben). Denkbar wäre z. B. eine Anwendung als Bewertungsskala für den Grad der Zufriedenheit bei einem Onlineangebot, oder auch für einen Lautstärkeregler.

• <input type="email"

– Dieses Eingabefeld dient zur Eingabe von Mailadressen. Bei einigen Browsern wird automatisch gleich eine Syntaxprüfung der Eingabe vorgenommen, d. h. es wird ge-prüft, ob beispielsweise auch ein @-Zeichen vorkommt. Man kann diese Validierung im Browser mit dem Attribut novalidate auch unterbinden (das geht auch für das ganze Formular, wenn man dieses Atribut in das form-Tag schreibt). Smartphones blenden automatisch die passende Tastatur mit dem @-Zeichen ein, wenn der Focus auf dem Maileingabefeld liegt.

• <input type="url"

– Dieses Eingabefeld dient zur Eingabe absoluter Webadressen einschließlich Angabe des Protokolls. Bei einigen Browsern wird automatisch eine Syntaxprüfung vorge-nommen. Das iPhone blendet auch hier die passende Tastatur ein.

22 WEBD04


• <input type="tel"

– Dieses Eingabefeld ist für Telefonnummern vorgesehen. Das iPhone blendet automa-tisch die passende Zahlen-Tastatur ein, wie die folgende Abbildung zeigt:

Abb. 3.6: Das Element input type="tel" in Aktion (iPhone, Safari)

•

– Dieses Element stellt eine Besonderheit dar: Es ist die Kombination aus einem nor-malen Textfeld und dem datalist-Element. Letzteres ähnelt im Aufbau einer Aus-wahlliste, wie sie mit dem datalist-Element implementiert wird. Die einzelnen Vorgaben werden mithilfe des option-Elements geschrieben. Der Bezug zwischen dem Textfeld und dem datalist-Element erfolgt durch denselben Wert bei den At-tributen list bzw. id.

– User können bei diesem Formularelement entweder aus einer Reihe vorgegebener Vorschläge wählen, oder wahlweise eigene Eingaben vornehmen. Die folgende Ab-bildung zeigt ein datalist-Element in Aktion: Schreibt der User ein h, wird bereits die Option HTML5 angeboten.

Abb. 3.7: Das Element datalist in Aktion (Firefox)

Nicht explizit verwendet habe ich in unserem Beispiel-Formular einige andere speziellen Fel-der, die durch HTML5 bereitgestellt werden: type="color", type="keygen" und type="output". Neben dem date-Feld für Datumsangaben gibt es auch noch die speziel-len Felder für datetime, datetime-local, month, week und time. Zum Abschluss die-ses Kapitels sehen Sie in der folgenden Abbildung noch unser Beispiel-Formular auf dem iPhone:

<input type="text" list="intliste">

<datalist id="intliste"

<option value="…"

<option value="…"

</datalist>

WEBD04 23


Abb. 3.8: Beispiel-Formular auf dem iPhone (Safari)

Sie können die iPhone-spezifische Implementierung des Suchfelds, des Kalenders (nach er-folgter Eingabe) und des Schiebereglers für die Bewertungsskala erkennen.

Sie können die neuen Formularelemente übrigens ohne Bedenken einsetzen. Schlimmsten-falls werden sie von älteren Browsern wie normale Input-Elemente, d. h. als gewöhnliche Textfelder angezeigt.

24 WEBD04


Zusammenfassung

• HTML5 stellt zahlreiche neue Elemente zur Erstellung benutzerfreundlicher Formulare zur Verfügung.

• Das search-Element (mit dem optionalen Attribut autofocus) sorgt für eine spezielle Kennzeichnung von Suchfeldern.

• Durch das optionalen Attribut autofocus wird der Cursor beim Laden der Seite auto-matisch in das Eingabefeld mit diesem Attribut gesetzt

• Das Attribut placeholder ergänzt die Beschriftung von Formularelementen und un-terstützt die Benutzer mit einem Platzhaltertext, die richtigen Inhalte in die einzelnen Felder einzugeben.

• Das Attribut required markiert Pflichtfelder in Formularen.

• Für spezielle Eingaben stehen die Elemente number, date, range, email, url und tel zur Verfügung.

• Das datalist-Element wird mit einem normalen Textfeld kombiniert. Es erlaubt dem Benutzer, entweder aus seiner Reihe von Vorschlägen (den option-Elementen) zu wäh-len oder selbst Eingaben zu machen.


3.1 Ist es sinnvoll, die Attribute placeholder und autofocus bei einem Eingabe-feld gleichzeitig zu benutzen?

3.2 Warum sind die neuen Eingabefelder gerade für Formulare auf Smartphones be-sonders vorteilhaft?

3.3 Erklären Sie bitte die beiden Attribute novalidate und required.

3.4 Was ist der Unterschied zwischen den Codefragmenten type="range" und steps="10".

WEBD04 25

4 Multimedia-Einbettung: Natives Audio und Video


Lernziele

In diesem Kapitel erfahren Sie, wie HTML5 die Einbettung von Multimedia-Elemen-ten ohne Plug-ins möglich macht. Sie erfahren, was Container und Codecs sind und warum die wunderbare neue Multimedia-Welt leider doch noch nicht so perfekt ist.

Moderne Websites sind ohne Video- und Audioelemente kaum noch denkbar: Denken Sie an die vielen Videoanleitungen, Hörproben oder Podcasts – von Youtube, Vimeo oder MyVideo ganz zu schweigen. Bisher konnten diese Elemente nur mithilfe von Browser-Plug-ins ein-gesetzt werden. Die größte Bedeutung hatte hier bisher zweifellos Adobes Flash-Player – aber auch Microsofts Silverlight und Apples Quicktime haben bis jetzt eine Rolle gespielt. Dank der mit HTML5 nun eingeführten Elemente audio und video können Multimedia-Inhalte in Webseiten eingebettet werden, ohne dass die Besucher zu Download und Installa-tion eines Plug-ins gewungen werden. Deshalb nennt man solche Multimedia-Elemente auch „natives Audio“ bzw. „natives Video“.

Browser, die diese neuen Tags unterstützen – und das sind (mit Ausnahme des Internet Ex-plorers vor Version 9) schon sehr viele – können solche Medien abspielen. Leider kommt jetzt eine unangenehme Einschränkung: Sie können das nur unter der Voraussetzung, dass sie die verwendeten „Codecs“ (stellen Sie sich Codecs zunächst als eine Art Videoformat vor) auch decodieren können. Hier endet derzeit (2012) leider die heile Multimedia-Welt von HTML5: Bisher gibt es keinen gültigen Standard in Bezug auf HTML5-kompatibles Audio und Video. Dadurch entwickeln sich die verschiedenen Browser eher auseinander und dieser neue „Browserkrieg“ um HTML5-Video wird – wie immer – auf dem Rücken der Webdesigner ausgetragen. Diese müssen sich nämlich einen genauen Überblick verschaffen, welcher Browser welches Videoformat unterstützt und welchen Aufwand sie treiben wollen, um eine größtmögliche Zielgruppe zu erreichen. Eine wesentliche Rolle bei diesem Konflikt spielen die jeweiligen Lizenzbedingungen. Um diese Problematik besser verstehen zu können, müs-sen wir uns wohl oder übel etwas genauer mit dem Thema Container und Codecs befassen.

4.1 Container und Codecs

Ein Container ist – wie der Name ja schon sagt – ein „Behälter“ oder eine „Verpackung“, die die eigentliche Multimedia-Information (Audiostreams und Videostreams) enthält. Dazu kommen oft noch zusätzliche Informationen: Das sind die sog. „Metadaten“, wie beispiels-weise Untertitel, Menüstrukturen oder zusätzliche Audiospuren. Ein Container ist also ein Verbunddokument und wird auch als „Metadatendatei“ bezeichnet. Folgende Container ste-hen derzeit zur Verfügung:

• MP4

• OGG

• WebM

Audio und Video ohne Plug-ins

Container sind Behälter, Codes sind Formate

26 WEBD04

Multimedia-Einbettung: Natives Audio und Video 4

Die Codecs sind das eigentliche Format, mit dem Video- oder Audiodateien bzw. -Streams codiert worden sind. Folgende Audio-Codecs stehen zur Verfügung:

• AAC (S4, C3, iOS): Audioformat, das von Apple im iTunes-Store verwendet wird. Es bietet bei gleicher Da-teigröße eine bessere Audioqualität als MP3 und unterstützt mehrere Audioprofile. AAC wird von allen Apple-Produkten, sowie vom Open Source-Player VLC sowie von Flash unterstützt. AAC ist nicht lizenzfrei.

• Vorbis (F3, C4, O10): Lizenzfreies Open-Source-Format, das von Firefox, Opera und Chrome unterstützt wird. Vorbis wird auch mit den Video-Codecs Theora und VP8 kombiniert.

• MP3 (IE9, S4, C3, iOS): Verbreitetes und beliebtes Audioformat. Obwohl MP3 mit Patenten belegt ist, wird es von Safari und Chrome unterstützt – nicht jedoch von Firefox und Opera.

Die unterstützenden Browser bzw. Plattformen sind in Klammern angegeben. Dabei bedeuten: IE = Internet Explorer, F = Firefox, S = Safari, C = Chrome, O = Opera, iOS = mobile Apple-Geräte (jeweils mit den entsprechenden Versionsnummern).

Folgende Video-Codecs sind derzeit in Gebrauch:

• H.264 (IE9, S4, C3, iOS): Dieser Codec wurde von der MPEG-Gruppe entwickelt und standardisiert. Dank der Möglichkeit, verschiedene Profile einzubetten, muss ein Video mit H.264 nur einmal co-diert werden, wird aber auf den unterschiedlichsten Plattformen immer optimal darge-stellt. Microsoft und Apple sind Lizenznehmer von H.264 und YouTube konvertiert seine Videos ebenfalls mit diesem Codec. Damit kann H.264 als „Quasi-Standard“ betrachtet werden.

• Theora (F3.5, C4, O10): Dieser lizenzfreie Codec wurde von der Xiph.Org Foundation entwickelt und wird von Firefox, Chrome und Opera unterstützt. Dies gilt jedoch nicht für Internet Explorer, Safari und alle iOS-Gräte.

• VP8 (IE9, F4, C5, O10.7): Dieser Codec wurde von Google entwickelt, ist ähnlich zu H.264, jedoch frei von Lizenz-gebühren. Firefox, Chrome und Opera und auch Flash unterstützen VP8 – nicht aber Safari und iOS-Geräte.

Audio- und Video-Codecs werden für die Auslieferung und Wiedergabe in einen Container zusammengepackt. Diese Container und Codecs werden nur in bestimmter Weise miteinan-der kombiniert. Diese Kombinationen sind es, die dann von bestimmten Browsern unter-stützt werden, und zwar:

• H. 246-Video mit AAC-Audio oder MP3-Audio in einem MP4-Container

• Theora-Video mit Vorbis-Audio in einem OGG-Container

• VP8-Video mit Vorbis-Audio in einem WebM-Container: Diese komplett lizenzfreie Lösung ist eine gemeinsame Entwicklung der Open Video Alliance, zu der sich Google, Mozilla und Opera zusammengeschlossen haben.

Analysiert man die oben bei den Codecs angegebene Browserunterstützung, wird sofort klar, dass man weder mit der Kombination H.264/AAC/MP4 noch mit Theora/Vorbis/OGG alle Browser bedienen kann. VP8/Vorbis/WebM ist auch noch zu neu, als dass es schon von allen

Es gibt drei gültige Kombi-nationen aus Container, Audio- und Video-Codec

WEBD04 27


Browsern und Plattformen unterstützt wird und scheidet deshalb als Standardlösung vorerst aus. Jetzt kommt noch eine zusätzliche Hürde ins Spiel: Ich habe es ja in der Einleitung zu diesem Kapitel schon erwähnt, dass uns mal wieder der Internet Explorer das Leben schwer macht: Erst ab der Version 9 versteht der überhaupt die neuen Elemente audio und video. Selbst wenn wir den lästigen IE6 mal ganz ignorieren: IE7 und IE8 haben noch eine so große Verbreitung, dass wir deren Nutzer auf keinen Fall bei der Implementierung von Audio und Video vernachlässigen dürfen.

Die Konsequenz aus dieser Situation lautet: Wir müssen derzeit leider sowohl für Audio, als auch für Video separate Lösungen für drei verschiedene Plattformen implementieren. Glück-licherweise klingt das schlimmer, als es ist. Kurz zusammengefasst lautet das Rezept: Wir co-dieren diese mit allen drei Codecs und bieten zusätzlich auch noch die altbewährte Flash-Variante. Aber sehen wir uns das am besten an praktischen Beispielen an:

4.2 Audioeinbettung

Beginnen wir mit einem einfachen Audiobeispiel, dessen Quellcode die folgende Abbildung zeigt. Hier sollen zwei Hörproben angeboten werden. Für jede davon gibt es ein Audio-element, das sich innerhalb eines article-Tags befindet. Zum Zweck der späteren Gestal-tung mithilfe von CSS besitzt jedes audio-Tag eine id. Das Attribut controls sogt für die Anzeige der üblichen Steuerelemente in dem vom Browser generierten Player (Beispiel auf Datenträger).

Abb. 4.1: HTML-Code Audioeinbettung

28 WEBD04


Innerhalb des audio-Tags befinden sich drei source-Elemente, die genau so aufgebaut sind, wie das Ihnen schon lange bekannte img-Tag: Das Attribut src liefert den relativen Pfad zur Audioquelle, type den zugehörigen MIME-Type. Wie Sie bei der ersten Hörprobe sehen, gibt es hier drei source-Tags:

<source src="audio/gitarre.ogg" type="audio/ogg">

Vorbis-Audio im OGG-Container: funktioniert in Firefox, Chrome und mobilen Geräten mit iOS.

<source src="audio/gitarre.mp4" type="audio/mpeg">

ACC-Audio im MP4-Container: funktioniert in IE9, Safari, Chrome und mobilen Geräten mit iOS.

<source src="audio/gitarre.mp3" type="audio/mpeg">

MP3-Audio im MP4-Container: funktioniert in Safari und Chrome.

Für alle anderen Browser, die das audio-Element nicht erkennen oder mit keinem der Codecs etwas anfangen können, wird hier die denkbar primitivste Fallbacklösung angeboten, nämlich der Download der MP3-Datei:

<a href="audio/gitarre.mp3">Download drums.mp3</a>

Anschließend können die Benutzer solcher Browser die MP3-Datei mit einem Player ihrer Wahl auf ihrem Rechner abspielen. Bemerkenswert ist, dass sich alle unsere insgesamt vier „Angebote“ innerhalb des einen Audioelements befinden. Sehen wir uns in der folgenden Abbildung einmal an, wie diese Seite vom Firefox angezeigt wird:

Abb. 4.2: Das Audiobeispiel im Firefox

Der Firefox-Browser wertet offensichtlich die erste Variante aus, mit der er etwas anfangen kann (Vorbis/OGG) und zeigt netterweise den in diesem Fall überflüssigen Download-Link gar nicht erst an. Genauso macht es Safari mit der Variante AAC/MP4, wie das nächste Bild zeigt:

WEBD04 29

view-source:http://www.dip2.de/HTML5/audio/gitarre.ogg

view-source:http://www.dip2.de/HTML5/audio/gitarre.mp4




Abb. 4.3: Das Audiobeispiel im Safari

Benutzer des Internet Explorers 8.0 (und älter) müssen dagegen mit den Download-Links vorlieb nehmen, wie der folgende Screenshot zeigt:

Abb. 4.4: Das Audiobeispiel im Internet Explorer 8.0

Ich darf Ihnen nicht verschweigen, dass für die Fallbacklösung weitaus komfortablere und elegantere Implementierungen existieren: So kann man, wie oben schon erwähnt, für den In-ternet Explorer statt dem Download eine Flash-Lösung anbieten. Das geht aber nicht ohne etwas JavaScript-Code. Und wie ich ja schon erwähnt habe, möchte ich Sie in diesem Studi-enheft nicht zu sehr mit diesen „Tricksereien“ vom Wesentlichen ablenken. Bei Bedarf finden Sie dafür unzählige Beispiele im Netz. Im nächsten Abschnitt über Videoeinbettung werden Sie ohnehin die Flash-Variante kennenlernen.

Internet Explo-rer 8.0 erkennt das audio-Tag nicht

30 WEBD04


4.3 Videoeinbettung

Sehen wir uns auch hier ein einfaches Beispiel an, dessen Quellcode die folgende Abbildung zeigt. Hier soll ein Video so eingebettet werden, dass es von allen Browsern und mobilen Ge-räten korrekt angezeigt wird. Wie Sie ja schon wissen, bedeutet das: Codierung mit drei Codecs, die in den zugehörigen Containern angeboten werden. Zusätzlich eine Fallback-lösung für den Internet-Explorer auf Flash-Basis. Der relevante Code-Teil beginnt direkt nach dem header-Tag mit dem video-Element. Das Attribut controls kennen wir ja schon und mit width und height kann die Darstellung des Videos skaliert werden. Das habe ich hier nur aus einem einzigen Grund gemacht: Damit der Screenshot der Seite nicht so breit wird. Sonst ist es natürlich sinnvoller, das Video in seinem ursprünglichen Format abzuspielen (Beispiel auf Datenträger).

Abb. 4.5: HTML-Code Videoeinbettung

WEBD04 31


Genau wie beim audio-Element im vorigen Abschnitt gibt es hier drei source-Tags:

<source src="video/inline-skater.mp4" />

H.264-Video im MP4-Container: funktioniert in Safari, Chrome und mobilen Geräten mit iOS.

<source src="video/inline-skater.ogv"/>

Theora-Video im OGG-Container: funktioniert in Firefox, Chrome und Opera.

<source src="video/inline-skater.webm" />

VP8-Video im WebM-Container: funktioniert bereits jetzt in Firefox und Chrome.

Wie die folgende Abbildung zeigt, wertet Firefox wieder die erste Variante aus, mit der er etwas anfangen kann (Theora/OGG):

Abb. 4.6: Das Videobeispiel im Firefox

Wie Sie sehen, wird hier zusätzlich noch der Download des Videos in allen Formaten ange-boten. Das ist aber hier wirklich optional, denn die Fallbacklösung mit Flash, die ich Ihnen später erklären werde, sollte wirklich immer funktionieren, wenn sonst „alle Stricke reißen“. Auch Safari sucht sich „seine“ Variante aus (H.264/MP4), wie das nächste Bild zeigt:

32 WEBD04

view-source:http://www.dip2.de/HTML5/video/inline-skater.ogv

view-source:http://www.dip2.de/HTML5/video/inline-skater.webm

view-source:http://www.dip2.de/HTML5/video/inline-skater.mp4


Abb. 4.7: Das Videobeispiel im Safari

Jetzt müssen wir uns mit der Fallbacklösung für den Internet Explorer (in der Version 8.0 oder älter) befassen. Dazu wird innerhalb des video-Elements das object-Tag platziert, mit dem man auch bisher schon immer Flash-Elemente implementiert hat:

<object width="450" height="337" type="application/x-shockwave-flash" data="swf/flowplayer-3.2.2.swf">

<param name="movie" value="swf/flowplayer-3.2.2.swf" />

<param name="allowfullscreen" value="true" />

<param name="flashvars"

value='config={"clip":{"url":"../video/inline-ska-ter.mp4",

"autoPlay":false, "autoBuffering":true

}

}' />

</object>

Internet Explo-rer 8.0 erkennt das video-Tag nicht

WEBD04 33


Uns kommt jetzt sehr entgegen: Flash unterstützt ebenfalls den H.264-Codec, mit dem wir unser Video ja bereits für Safari und Chrome codiert haben. Unsere Datei inline-ska-ter.mp4 kann allerdings nicht direkt vom Flash-Player abgespielt werden: Wir benötigen dazu einen Flash-basierten Video-Player. Dieser ist dann in der Lage, unsere MP4-Datei ein-zulesen und dann wird das Ganze vom Flash-Player wiedergegeben. Ich verwende in diesem Beispiel den Flowplayer – eine Open-Source-Software, die man kostenlos herunterladen kann (http://flowplayer.org). Der Player muss zusammen mit der Videodatei vom Webserver ausgeliefert werden. In unserem Beispiel liegt die SWF-Datei mit dem Player (flowplay-er-3.2.2.swf) im Unterorder SWF, wie Sie am Wert des Attributs data im object-Tag sehen können. Es folgen mehrere param-Tags, in denen die erforderlichen Daten an den Flowplayer übermittelt werden. Ich möchte darauf nicht näher eingehen – ich denke, das meiste ist ohnehin selbst erklärend. Etwas komplizierter ist allenfalls der Wert des Attributs value: Hier muss man wissen, dass der Pfad zur eigentlichen Videodatei relativ zum Spei-cherort des Players angegeben werden muss. Da dieser im Unterordner SWF liegt und das Video im Unterordner video, ergibt sich daraus der Pfad "../video/inline-ska-ter.mp4". Wenn Sie diese Vorgehensweise für ein eigenes Beispiel anwenden möchten, sollte es Ihnen nicht schwerfallen, die notwendigen Angaben entsprechend anzupassen. Die folgende Abbildung zeigt das Ergebnis im Internet Explorer 8.0.

Abb. 4.8: Das Video-Beispiel im Internet Explorer 8.0

34 WEBD04

http://flowplayer.org


In der Fachliteratur und im Web werden für die Fallbacklösung weitaus raffiniertere Varian-ten vorgeschlagen. So können z. B. die optionalen Download-Links automatisch verborgen werden, wenn entweder das native Video oder die Flash-Version Anwendung findet. Die Downloads wären ja nur die letzte Rettung für Nutzer, deren Browser das video-Element nicht erkennt und die außerdem kein Flash-Plug-in installiert haben. Für solche Lösungen muss JavaScript eingesetzt werden. Hier erfreuen sich vor allem die komfortablen Funktio-nen zunehmender Beliebtheit, die in dem JavaScript-Framework jQuery enthalten sind. Da diesem ein eigenes Studienheft gewidmet ist, möchte ich darauf hier nicht näher eingehen.

Zusammenfassung

• HTML5 ermöglicht mithilfe der neuen Elemente audio und video die Anzeige von Au-dio- oder Videoelementen ohne Plug-ins.

• Zur Nutzung von nativem Audio oder Video werden Codecs und Container benötigt. Für diese existiert leider bisher kein browserübergreifender Standard.

• Als Konsequenz muss man Audio- und Video-Streams mit mehreren Codecs codieren und in den zugehörigen Containern anbieten.

• Für Versionen des Internet Explorers ab 8.0 und älter, sowie andere ältere Browser muss eine Fallbacklösung mithilfe von Flash implementiert werden.

• Für die Flash-Lösung kann zum Glück das ohnehin bereitgestellte H.264-Format verwen-det werden.

• Für die Flash-Lösung benötigt man einen Flash-basierten Video-Player, der zusammen mit der Videodatei vom Webserver ausgeliefert werden muss.

• Für raffiniertere Fallbacklösungen wird JavaScript eingesetzt. Dabei greift man gerne auf komfortable Lösungen zurück, die das JavaScript-Framework jQuery anbietet.

Aufgabe zur Selbstüberprüfung

4.1 Schreiben Sie bitte den Code für die Einbettung der beiden (fiktiven) Audio- bzw. Video-Containern mein-audio.mp4 und mein-video.ogv.

WEBD04 35

5 Dynamisch erzeugte Bitmap-Grafiken mit canvas


Lernziele

Das canvas-Element hat bei der Einführung von HTML5 die größte Aufmerksam-keit erregt. In diesem Kapitel werden Sie erfahren, was es damit auf sich hat und wie man das canvas-Tag anwendet.

Bisher habe ich Sie in diesem Studienheft mit dem Einsatz von JavaScript verschont. Damit ist jetzt Schluss: Das canvas-Element ist nämlich nur ein leerer Behälter – in dem Fall eine leere Zeichenfläche – auf der man mithilfe von JavaScript grafische Objekte erstellen kann. Es handelt sich also „eher um eine Programmierschnittstelle als um ein Element“, wie Brian Hogan in seinem empfehlenswerten Buch treffend schreibt (Brian P. Hogan und Stefan Fröh-lich: HTML5 & CSS3: Webentwicklung mit den Standards von morgen. Verlag: O'Reilly). Mit canvas und etwas JavaScript-Kenntnissen lassen sich auf der Zeichenfläche dynamische Bitmap-Grafiken – also Pixelbilder – generieren. Mit dem XML-basierten SVG-Format (Scalable Vector Graphics) ist dies grundsätzlich auch für Vektorgrafiken möglich. SVG ge-winnt zurzeit sehr an Bedeutung, da es eine verlustfreie Skalierung möglich macht. Dies ist zu Zeiten von unterschiedlichen Bildschirmauflösungen bis hin zu Retina-Displays bei iPad und iPhone eine überaus wichtige Eigenschaft. Wenden wir uns aber nun dem canvas-Ele-ment zu: Es ist dem img-Tag sehr ähnlich und wird folgendermaßen in den HTML-Code ein-gebunden:

<canvas id="meinbild" width="400" height="200"> </canvas>

Für canvas gibt es nur die Attribute width und height. Gibt man diese nicht an, wird au-tomatisch eine Zeichenfläche mit 350 Pixeln Breite und 150 Pixeln Höhe angelegt. Über die id kann die Größe auch per CSS angepasst werden, was allerdings zu Verzerrungen des ge-zeichneten Motivs führen kann, wenn man die Größe nachträglich ändert.

5.1 Ein einfaches Beispiel

Die Erstellung grafischer Objekte erfolgt mithilfe eines Koordinatensystems, dessen Ur-sprung sich in der oberen linken Ecke der Zeichenfläche befindet. Sehen wir uns ein ein-faches Code-Beispiel an (Beispiel auf Datenträger):

Das canvas-Element ist eine leere Zeichen-fläche und so ähnlich wie das img-Tag aufgebaut

36 WEBD04

Dynamisch erzeugte Bitmap-Grafiken mit canvas 5

Abb. 5.1: Eine einfache Zeichnung mit canvas

Lassen Sie uns nun den JavaScript-Code Zeile für Zeile analysieren:

window.onload = zeichnen; function zeichnen() {

Die Funktion zeichnen enthält die JavaScript-Befehle, die die Zeichnung in dem canvas-Element generieren. Diese Funktion darf nicht ausgeführt werden, bevor das canvas-Ele-ment auch tatsächlich vom Browser geladen wurde. Mithilfe des globalen Event-Handlers window.onload wird die Funktion zuverlässig erst dann aufgerufen, wenn das Dokument vollständig geladen wurde.

var canvas = document.getElementById('mein_canvas');

Mithilfe der ID des canvas-Elements wird dieses in die gleichnamige Variable canvas gela-den.

if (canvas.getContext)

Prüfung, ob der Browser die Methode getContext des canvas-Elements unterstützt.

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

Vorbereitung der Zeichenfläche durch Aufruf des Kontexts 2d für das canvas-Element (der-zeit ist nur der Parameter 2d möglich – in Zukunft wird es auch 3d geben).

Gezeichnet wird im canvas-Element mit Ja-vaScript

WEBD04 37


context.fillStyle = "rgba(250,0,0, 0.5)";

Definition der Füllfarbe (Modus RGBA, d. h., die letzte Zahl definiert die Alpha-Transparenz – in diesem Fall also halb durchlässig) für den aktuellen Kontext.

context.fillRect (10, 10, 180, 180);

Zeichnet ein Quadrat mit der Breite 180 Pixel an der durch die Koordinaten (10,10) angege-benen Position Koordinaten.

context.strokeStyle = "rgba(0,220,0, 50)";

Definition der Linienfarbe für den aktuellen Kontext.

context.lineWidth = 3;

Definition der Linienstärke für den aktuellen Kontext.

context.beginPath();

Startet die Erstellung eines Pfades.

context.moveTo(20, 250);

Koordinaten für den Anfangspunkt des Pfads.

context.lineTo(50, 220);

Definition einer Linie vom zuvor gewählten Anfangspunkt zum Punkt mit den hier angege-benen Koordinaten (ebenso die folgenden Befehle).

context.stroke();

Mit diesem Befehl werden die zuvor definierten Linien explizit gezeichnet.

context.closePath();

Beendet die Pfaderstellung.

Wie Sie sehen, befindet sich das gesamte JavaScript im Head-Bereich des HTML-Dokuments (auf die grün dargestellten Codezeilen werde ich erst etwas später zurückkommen). Das canvas-Element selbst wird erst anschließend im Body-Bereich definiert, wobei die Verbin-dung zwischen Skript und Element über dessen id="mein_canvas" erfolgt. Die nächste Abbildung zeigt, wie diese Beispielseite in Firefox aussieht:

38 WEBD04


Abb. 5.2: Das einfache canvas-Beispiel im Firefox

Wenn Sie das Beispiel ansehen (es befindet sich auf dem mitgelieferten Datenträger), können Sie – wie bei jedem anderen vom Browser angezeigten Bild – die Grafikdatei mit dem Kon-textmenü (rechte Maustaste) herunterladen. Sie werden dann feststellen, dass es sich bei dem generierten Bild um eine Datei im PNG-Format handelt.

5.2 Fallbacklösung für Internet Explorer

Es wird Sie jetzt sicher schon nicht mehr wundern, dass uns natürlich auch hier wieder der Internet Explorer 8.0 (und ältere Versionen) Schwierigkeiten macht: Er kennt ganz einfach das canvas-Element nicht. Deshalb zeigt Internet Explorer 8 auch nur das folgende Bild:

Abb. 5.3: Das einfache canvas-Beispiel im Internet Explorer 8.0

WEBD04 39


Hier wird die „ultimative Fallbacklösung“ benutzt: Diese besteht schlicht in einem Textab-satz, der innerhalb des canvas-Elements angeordnet ist und dem Nutzer mitteilt, dass sein Browser dieses nicht kennt. An der Stelle könnte man für IE-User „zum Trost“ auch mit dem img-Tag ein statisches Bild als Alternative einfügen.

Zum Glück geht das aber auch etwas besser, denn hier können zwei Fallbacklösungen auf Basis von JavaScript weiterhelfen: Viel zitiert wird die von Google entwickelte und bereitge-stellte JavaScript-Lösung ExplorerCanvas (http://code.google.com/p/explorercanvas). Auch das flashcanvas-Skript (http://flashcanvas.net) verspricht, die meisten Zeichenelemente für ältere Internet Explorer zugänglich zu machen. Leider können beide Lösungen im Praxistest doch nicht alle Möglichkeiten des canvas-Elements umsetzen. Ich werde Ihnen deshalb nur bei diesem einfachen Beispiel einmal den Einsatz von ExplorerCanvas einmal demonstrieren und bei dem folgenden, komplexeren Beispiel auf eine Fallbacklösung verzichten.

Das ExplorerCanvas-Skript muss von der oben angegebenen Quelle heruntergeladen und in den Quellordner des Beispiels kopiert werden. Dann wird das Skript innerhalb eines Condi-tional Comments in das HTML-Dokument eingebunden:

Conditional Comments sind Bedingungsabfragen, die innerhalb eines HTML-Kommentars in eckige Klammern eingebunden werden. Sie werden ausschließlich vom Internet Explorer ausgewertet und sind für alle anderen Browser irrelevant. In diesem Beispiel wird das Explo-rerCanvas-Skript nur dann verwendet, wenn es sich um einen Internet Explorer mit einer Versionsnummer kleiner als 9 handelt. Das Resultat sehen Sie in der folgenden Abbildung:

Abb. 5.4: Das einfache canvas-Beispiel im Internet Explorer 8.0 mit ExplorerCanvas



Zwei Fallback-lösungen für den Internet Explorer 8.0

40 WEBD04

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

http://flashcanvas.net


5.3 Ein Beispiel mit Text und Logo

Lassen wir nun den lästigen Internet Explorer hinter uns und sehen uns in der folgenden Ab-bildung noch das Code-Beispiel eines etwas anspruchsvolleren Beispiels an (es befindet sich ebenfalls auf dem mitgelieferten Datenträger). Neben der Generierung von geometrischen Objekten und Linien kommt hier noch die Ausgabe von Text hinzu. Die Abbildung zeigt nur den Skript-Teil – ansonsten ist die Struktur des Dokuments genau wie die des vorangegan-genen Beispiels:

Abb. 5.5: Ein komplexeres canvas-Beispiel mit Text und Logo

Ich werde für dieses Beispiel jetzt nur noch die neu hinzugekommenen Skript-Befehle erläu-tern:

context.save();

Mit dieser Methode wird der aktuelle Zustand des canvas-Elements gesichert. Damit könn-ten jederzeit Änderungen bis zu diesem „Wiederherstellungspunkt“ rückgängig gemacht werden.

context.translate(20,4);

Verschiebt den Koordinatenursprung zum angegebenen Punkt.

WEBD04 41


context.fillRect(0,0,88,30);

Zeichnet Quadrat.

context.fillStyle = "rgba(250,250,10, 1)";

Neue Definition der Füllfarbe. Bei diesem Pfad für das Dreieck wird keine Linienfarbe, son-dern nur eine Füllfarbe generiert.

context.lineWidth = 1;

Neue Definition der Linienstärke.

context.save();

Neuer „Wiederherstellungspunkt“.

context.translate(45,0);

Neuer Koordinatenursprung.

context.beginPath();

Startet die Erstellung eines Pfades.

...

Mehrere Befehle zur Definition von Linien.

context.fill();

Mit diesem Befehl wird innerhalb der zuvor definierten Linien die Füllung generiert.

context.closePath();

Beendet die Pfaderstellung.

context.restore();

Dieser Befehl ist das Gegenstück zu save(): Damit wird der letzte gespeicherte Zustand wie-derhergestellt.

Die nächste Abbildung zeigt, wie diese Beispielseite in Firefox aussieht:

Abb. 5.6: Das komplexere canvas-Beispiel im Firefox

42 WEBD04


Sie merken es schon: Das Generieren komplexer Zeichnungen mithilfe von JavaScript-Befeh-len ist kein Zuckerschlecken. Aus diesem Grund hat Google dankenswerterweise das Tool Canvasdraw entwickelt (https://sites.google.com/site/canvasdraw: Hier kann man auf einer Zeichenfläche mit entsprechenden Werkzeugen so zeichnen, so wie man es aus den gängigen pixelbasierten Malprogrammen (z. B. Paint) gewohnt ist. Am Schluss kann man die fertige Zeichnung als HTML-Dokument exportieren. Darin ist dann automatisch ein canvas-Ele-ment mit dem vollständigen JavaScript-Code enthalten. Man kann anschließend diese Code-Teile ganz einfach über Kopieren/Einfügen in seine eigenen bestehenden HTML-Seiten ein-bauen. Probieren Sie es aus!

Die Verwendung des canvas-Elements bringt im Vergleich zur Einbindung herkömmlicher Grafiken mehrere Vorteile: Besonders interessant ist die dynamische Generierung von Gra-fiken beim Laden der Seite im Browser. So können beispielsweise „on the fly“ Infografiken auf der Basis aktueller Daten angezeigt werden, wenn die Webseite z. B. via PHP eine Da-tenbankanbindung besitzt. Auch bei Animationen und der Entwicklung von Onlinespielen ist der Einsatz des canvas-Elements auf dem Vormarsch.

Zusammenfassung

• Die Syntax des canvas-Elements ist der des altbekannten img-Tags ähnlich.

• Gleichzeitig ist das canvas-Element dem script-Element sehr ähnlich: Es stellt nur eine leere Zeichenfläche bereit, auf der man mithilfe von JavaScript grafische Objekte erstel-len kann.

• Die Verknüpfung eines canvas-Elements mit dem zugehörigen JavaScript erfolgt mit-hilfe einer id.

• Für Versionen des Internet Explorers ab 8 und älter benötigt man eine Fallbacklösung. Dafür stehen im Netz zwei kostenlose Skriptlösungen zur Verfügung: ExplorerCanvas und flashcanvas.

• Die ultimative Fallbacklösung für alte Browser besteht in einem Textabsatz, der inner-halb des canvas-Elements angeordnet ist und dem Nutzer mitteilt, dass sein Browser dieses nicht kennt. Hier könnte man auch als Alternative ein statisches Bild einfügen.

• Mit dem Tool Canvasdraw von Google steht eine komfortable Möglichkeit zur Erstel-lung von canvas-Elementen samt zugehörigem JavaScript-Code zur Verfügung.


5.1 Schreiben Sie bitte den Code, mit dem die Methode getContext() für ein canvas–Element bereitgestellt wird.

5.2 Mit welchen Methoden wird die Erstellung eines Pfades in einem canvas-Ele-ment begonnen bzw. beendet?

5.3 Worauf muss man beim Erstellen grafischer Objekte mit JavaScript in einem canvas–Element im Hinblick auf den Ladevorgang achten?

Bequemes Zeichnen mit Canvasdraw von Google

WEBD04 43

https://sites.google.com/site/canvasdraw

6 HTML5-Frameworks

6 HTML5-Frameworks

Lernziele:

In diesem Kapitel erfahren Sie, welche große Erleichterung und Zeitersparnis die Verwendung von HTML5-Frameworks mit sich bringt. Nach einer Übersicht über die wichtigsten Frameworks werfen wir gemeinsam einen Blick hinter die Kulissen eines der beliebtesten Vertreter: „HTML5 Boilerplate“.

Kein Entwickler von Webprojekten kommt mehr an HTML5 vorbei. Es geht bei der Imple-mentierung nicht mehr um das „ob“, sondern um das „wie“. Das gilt vor allem dann, wenn die geplante Website auch auf mobilen Geräten optimal angezeigt werden soll – und das ist heute bei dem außerordentlichen Wachstum auf dem Markt der Smartphones und Tablets ei-gentlich selbstverständlich. Wie wir bereits gesehen haben, bringt HTML5 bei mobilen Ge-räten Vorteile beim Einsatz bestimmter Formularelemente – aber auch bei der Nutzung der APIs (s. späteres Kapitel in diesem Studienheft).

Ganz so einfach, wie ich Ihnen das bisher geschildert habe, ist die Sache dann aber leider doch nicht. Bei der Behandlung der Fallbacklösungen für die leidigen älteren Versionen des Internet Explorers und anderer älterer Browser haben Sie bestimmt eine leise Ahnung be-kommen, was da auf Sie zukommen könnte. Schon die an sich wünschenswerte Verwendung von semantischem Markup wird von IE8 nicht verstanden, von den großartigen Neuerungen ganz zu schweigen, die CSS3 mit sich bringt. Werden dann noch JavaScripts für interaktive Benutzeroberflächen auf ein vom Browser bereits falsch interpretiertes Markup angewandt, zeigen ältere Browser ihren Besitzern womöglich überhaupt keinen sinnvollen Inhalt mehr an. Die Entwicklung vollständig „Cross-Browser“-kompatibler HTML5-Websites mit voller Funktionalität stellt also eine echte Herausforderung dar.

Glücklicherweise wurden für fast alle damit verbundenen Probleme von der Web-Entwick-lergemeinde sogenannte „Workarounds“ – also provisorische Hilfskonstruktionen – erdacht. Diese alle selbst zusammenzusuchen und korrekt in ein Projekt zu integrieren, würde sehr viel Zeit in Anspruch nehmen. Hier kommen die HTML5-Frameworks ins Spiel: Das sind frei im Web verfügbare Sammlungen von HTML-Musterseiten mit fertig eingebundenen Styles-heets und JavaScript-Bibliotheken, die eine perfekte Basis für eigene Webprojekte bilden. Da-bei haben diese „Grundgerüste“ unterschiedliche Schwerpunkte: vom semantischen Markup über perfektes CSS3-Styling bis zur ausgefeilten Interaktivität mit JavaScript.

6.1 Übersicht

Aus Platzgründen ist es unmöglich, alle diese Frameworks hier im Einzelnen darzustellen. Ich werde mich also auf eine kurze Übersicht beschränken und verweise auf die angegebenen Quellen im Netz.

• 52framework: eines der ersten HTML5-Frameworks. Damit werden Layouts auf der Ba-sis eines 16-spaltigen Rasters generiert. Die Spaltenbreite des Rasters beträgt 52 Pixel bei einem Spaltenabstand von 8 Pixeln. Die Seiten besitzen semantisch korrektes Markup. Natives Audio und Video werden ebenso unterstützt wie neue Formularelemente, das canvas-Element, und lokale Datenspeicherung. 52framework-Websites werden sogar vom Internet Explorer 6 korrekt dargestellt.

http://www.52framework.com

HTML5-Frame-works machen die Entwick-lung von HTML-Projek-ten viel ein-facher

44 WEBD04


HTML5-Frameworks 6

• lessframework: besteht aus Codefragmenten, mit deren Hilfe sehr schnell HTML5-Websites für Mobilgeräte entwickelt werden können. Es enthält vier unterschiedliche Layouts auf der Basis eines CSS-Spaltenrasters mit einer Breite von 68 Pixeln bei einer Spaltenbreite von 24 Pixeln. Das Standardlayout für Desktop-Browser besteht aus zehn solchen Spalten und hat eine feste Breite von 992 Pixeln. Weitere Layouts für Tablets und Smartphones werden mithilfe von Media Queries angewandt.

http://lessframework.com

• G5 Framework: zur Erstellung von Websites auf der Basis von HTML5, PHP und der beliebten JavaScript-Bibliothek jQuery. Das Framework basiert auf einem in der Einheit Prozent definierten zwei- bis sechsspaltigen Layoutraster. Deshalb passt sich dieses elas-tisch an die Dimensionen eines übergeordneten Behälters an.

http://framework.gregbabula.info

• Gravity: Gravity ist ein Framework zur Erstellung leistungsstarker, leicht zu pflegender HTML5-Websites. Es basiert auf SASS („Syntactically Awesome Stylesheets“) – einer Er-weiterung von CSS3. Gravity ermöglicht die schnelle Entwicklung von Prototypen. Es umfasst zahlreiche nützliche Elemente, wie z. B. typografische Presets, Media Queries, Styles für Buttons und Formulare sowie eine Definition von Spaltenbreiten mithilfe von Variablen.

http://gravityframework.com

• Bootstrap: HTML5-Frameworks von Twitter, das bereits in der Version 2.0 veröffent-licht wurde (04/2012). Bootstrap basiert auf einem sich selbst anpassenden Rastersystem mit 12 Spalten. Es umfasst eine ausführliche Dokumentation für die zahlreichen Styles zur Formatierung von Tabellen und Formularen. Darüber hinaus bietet es viele Icons, Buttons und Navigationselemente.

http://twitter.github.com/bootstrap

• Gridless: verzichtet, wie der Name schon sagt, auf ein festes Raster. Das Framework be-sitzt zahlreiche Optionen und eignet sich zur Erstellung typografisch anspruchsvoller HTML5-Websites für alle Plattformen (Desktop, Tablets, Smartphones). Gridless basiert auf dem Prinzip „Mobile First“, d. h., es geht von einem Layout für mobile Geräte aus, das dann für größere Viewports um zusätzliche Elemente erweitert wird.

http://thatcoolguy.github.com/gridless-boilerplate

• Webshim: ist eine modulare Polyfill-Bibliothek, mit deren Hilfe die präzise Umsetzun-gen von HTML5-Funktionen möglich ist (als Polyfill bezeichnet man einen Code, der äl-teren Browser eine Technologie zur Verfügung stellt, die diese nativ nicht bieten). Ent-wickler können damit moderne Cross-Browser-fähige Websites erstellen. Webshim nutzt die bekannten JavaScript-Bibliotheken jQuery und Modernizr und hat eine modulare Im-plementierung: Nur solche Elemente, die für eine konkrete Anwendung benötigt werden, müssen auch geladen werden.

http://afarkas.github.com/webshim/demos

• html5boilerplate: HTML5 Boilerplate ist eine Sammlung von professionellen Tipps und Tricks, die helfen sollen, Projekte schnell und flexibel zu realisieren, ohne eine bestimmte Entwicklungsphilosophie vorzuschreiben. Es umfasst HTML-, CSS, JavaScript- und viele weitere Dateien. Sie dienen als Basis für die Entwicklung robuster und zukunftssicherer Websites mit hoher Performance. Wichtige Eigenschaften sind: Cross-Browser-Normali-sierung, Performance-Optimierung, Vorbereitung für HTML5-Video und Nutzung von @font-face, gzip-Auslieferung der Ressourcen und vieles mehr.

http://html5boilerplate.com/#v2

WEBD04 45








6 HTML5-Frameworks

HTML5 Boilerplate (Boilerplate bedeutet im Englischen ursprünglich „Kochplatte“ – im übertragenen Sinn aber auch „Baustein“) ist besonders populär und ich möchte Ihnen des-halb dieses Framework im nächsten Abschnitt genauer vorstellen.

6.2 HTML5 Boilerplate

Paul Irish, der Hauptentwickler von HTML5 Boilerplate, legt Wert darauf, dies sei überhaupt kein Framework. Betrachtet man den Begriff Framework im engeren Sinn, muss man ihm zu-stimmen, denn Boilerplate stellt weder Layoutvorlagen oder Raster zur Verfügung. Dafür hat man als Webdesigner aber den Vorteil völliger gestalterischer Freiheit. Boilerplate wird je-denfalls immer im Zusammenhang mit den Frameworks genannt, aber wenn es gar keines ist, was ist es dann? Es handelt sich um eine bereits mit allen Raffinessen ausgestattete Start-seite mit einer Sammlung von JavaScript-Bibliotheken, einem vorkonfigurierten Stylesheet und diversen anderen Hilfsdateien. Nach dem Download sieht man in dem entpackten Boi-lerplate-Ordner folgende Dateien und Unterordner:

Abb. 6.1: Ordnerinhalt von HTML5 Boilerplate 3.0

Es würde den Rahmen dieses Studienheftes sprengen, wenn ich Ihnen hier alle Bestandteile von Boilerplate ausführlich beschreiben würde. Ich muss Sie deshalb auf die im Netz verfüg-bare ausführliche Dokumentation einschließlich sehr lehrreicher Videos verweisen (z. B. vom Entwickler Paul Irish persönlich unter:

http://www.youtube.com/watch?v=OXpCB3U_4Ig).

Lassen Sie mich also hier eine kurze Übersicht über die wichtigsten Elemente und deren Be-deutung geben:

• css: enthält das externe Stylesheet style.css. Es enthält die Cross-Browser-Norma-lisierung der Styles (basierend auf der in normalize.css publizierten Technik) sowie zahlreiche weitere interessante vorkonfektionierte Elemente. Darüber hinaus werden hier an einer vordefinierten Stelle die eigenen CSS-Styles eingefügt. Mit dem CSS-Aspekt von Boilerplate wird sich ein nachfolgendes Studienheft befassen.

HTML5-Boilerplate: Das „Rundum-Sorglos-Paket“

46 WEBD04

http://www.youtube.com/watch?v=OXpCB3U_4Ig

HTML5-Frameworks 6

• img: Viele Boilerplate-Projekte werden auf dem webbasierten Hosting-Dienst GitHub erstellt („Social Coding“). Der Ordner img enthält die Datei .gitignore, in die man alle Dateien und Ordner aus GitHub eintragen kann, die für das aktuelle Projekt nicht benö-tigt werden.

• js: enthält die JavaScript-Dateien plugins.js und script.js. In Erstere sollen Skripts anderer Entwickler („3rd Party Scripts“) eingefügt werden, in Letztere eigene Skripts. Im Ordner js befindet sich außerdem der Unterordner libs, in dem die bekann-ten JavaScript-Bibliotheken jQuery und modernizr untergebracht sind (über diese wichtigen Komponenten erfahren Sie mehr in nachfolgenden Studienheften).

• .htaccess: Konfigurationsdatei für Apache-Webserver (es gibt alternativ auch ent-sprechende Dateien für andere Server). Diese Datei ist ein zentraler Bestandteil von Boi-lerplate und enthält viele nützliche Voreinstellungen:

– einen speziellen Header für Internet Explorer, damit Seiten immer im neuesten Mo-dus oder via Google Chrome Frame dargestellt werden (Chrome Frame ist ein kos-tenloses Plug-in zur Unterstützung moderner HTML5-Seiten im Internet Explorer.)

– Automatisches Laden der Webfonts von allen Domains.

– AddType-Angaben zur Auslieferung aller neuen Medientypen im richtigen MIME-Typ. Dies betrifft die Audio- und Video-Dateien, die wir bereits im Kapitel über Mul-timedia-Einbettung kennengelernt haben, aber auch herunterladbare Schriften und SVG-Grafiken.

– Unterstützung der GZIP-Kompression zur Erhöhung der Performance.

– Diverse Expire-Header: Mit diesen wird festgelegt, welche Dateien stets aktuell vom Server geladen werden müssen (z. B. HTML-Dateien, die sonst nicht aktuell sein könnten), bzw. welche aus dem lokalen Cache geladen dürfen (z. B. Bilder).

– Aktivierung der eigenen Fehlerseite (s. nächster Hauptpunkt)

– Globale Definition von UTF-8 als Zeichensatz.

– Automatische Domainumleitung von www.meinedomain.de auf meinedomain.de.

• 404.html: ist eine Vorlage zur Erstellung einer eigenen 404-Fehlerseite (die Fehlermel-dung „Not Found”, wenn die Kommunikation mit dem Webserver nicht klappt).

• apple-touch-icons: verschiedene Varianten der Apple-Touch Icons. Diese werden auf iPhone /iPad verwendet, wenn man für eine Webseite ein „Lesezeichen“ als Icon auf dem Homescreen ablegen möchte.

• crossdomain.xml: diese XML-Datei erlaubt Browser-Plug-ins wie Flash-Player oder Adobe Reader Daten von anderen Domains zu laden.

• favicon.ico: Favoriten-Symbol für Boilerplate. Diese Platzhalter-Datei muss bei Be-darf durch ein eigenes Favicon ersetzt werden.

• humans.txt: Textdatei zur Aufnahme von lesbaren Projektinformationen (z. B. Namen der Entwickler)

• index.html: Vorlage für die Startseite des Projekts. Mit dem Inhalt werden wir uns gleich anschließend genauer beschäftigen.

• robots.txt: hier können bestimmte Seiten der Website von der Indizierung durch Suchmaschinen-Crawler ausgeschlossen werden.

WEBD04 47

6 HTML5-Frameworks

Sehen wir uns nun in der nächsten Abbildung den Quellcode der Startdatei index.html von Boilerplate genauer an:

Auch hier würde es den Rahmen sprengen, würde ich alle enthaltenen Elemente ausführlich besprechen und ich muss mich auf eine kurze Übersicht beschränken. Bekannte Elemente der HTML5-Grundstruktur wie z. B. doctype oder charset werde ich hier nicht mehr kom-mentieren:

Abb. 6.2: Quellcode der index.html von HTML5 Boilerplate 3.0

48 WEBD04

HTML5-Frameworks 6

• 

– Serie von konditionalen Kommentaren für unterschiedliche Versionen von Internet Explorer. Jeder Version wird im html-Tag eine andere Klasse hinzugefügt. Damit lassen sich auf komfortable Weise im zentralen Stylesheet Sonderangaben für unter-schiedliche IE-Versionen machen. Die in allen html-Tags vorhandene Klasse no-js ist für die JavaScript-Bibliothek Modernizr relevant: Ist auf dem Client JavaScript ak-tiviert, ersetzt Modernizr diese Klasse automatisch durch die Klasse js und ermög-licht damit unterschiedliche Formatierungen bei aktiviertem und deaktiviertem Ja-vaScript. Modernizr benutzt intern übrigens das bekannte Skript HTML5 shiv (auch unter dem Namen HTML5 shim bekannt), mit dessen Hilfe die neuen Markup-Ele-mente auch in älteren Browsern einer Gestaltung zugänglich gemacht werden kön-nen.

• <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

– Diese Angabe bewirkt, dass Internet Explorer das Dokument immer im neuesten Rendering-Modus anzeigt. Falls das Plug-in Chrome Frame installiert ist, wird dieses zur Darstellung herangezogen.

• <meta name="viewport" content="width=device-width">

– Wichtige Voreinstellung, damit für die Seite auf mobilen Geräten der richtige View-port eingestellt wird und diese dann in Verbindung mit Media Queries korrekt dar-gestellt wird.

• 

– Hinweis, dass Favicon und Apple-Icons (auch für Android-Geräte) direkt auf der obersten Ordner-Ebene (im sog. Root-Verzeichnis) liegen sollen.

• <script src="js/libs/modernizr-2.5.3.min.js"></script>

– Alle benötigten Skripts werden aus Performance-Gründen erst am Ende der Seite eingebunden. Lediglich die Bibliothek Modernizr muss bereits im Head platziert wer-den.

• 

– Anzeige diverser Hinweise speziell für Benutzer von IE6.

• <div role="main">

– Optionales Markup für den Hauptcontainer der Seite. Mit dem neuen Attribut role (ein Bestandteil des Konzepts WAI Aria Markup) werden Inhalte in Bezug auf ihre Funktion gekennzeichnet. Dies ist relevant für das automatische Auslesen der Infor-mation, für die Zugänglichkeit und damit für die konsequente Umsetzung der Idee von einem semantischen Web.

– Wie schon gesagt ist dieses div-Tag optional, d. h., man kann es durch beliebige eigene Codestrukturen für den Inhalt der Seite ersetzen (und genau das werde ich Ih-nen gleich im nächsten Abschnitt mit meinem Standardbeispiel demonstrieren).

WEBD04 49

6 HTML5-Frameworks

• 

– Einbindung aller benötigten JavaScript-Dateien mit Ausnahme von Modernizr (s. oben).

• <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

– Hier wird die wichtige JavaScript-Bibliothek online von Google CDN (Content Delivery Network) geladen. Dadurch wird ein schneller Zugriff auf die Funktionen ermöglicht.

• <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>

– Hier wird eine lokale Kopie von jQuery als Ausweichlösung geladen, falls der Onlinezugriff nicht funktioniert.

• <script src="js/plugins.js"></script> <script src="js/script.js"></script>

– Laden der weiter oben bereits erwähnten beiden JavaScript-Dateien plugins.js und script.js.

• 

– Für User von Google Analytics wird hier gleich der erforderliche Code eingefügt. Man muss lediglich die eigenen Zugangsdaten einfügen. Nutzt man Google Ana-lytics nicht, kann der gesamte Code-Block gelöscht werden.

Ich denke, Sie haben durch die Beschäftigung mit Boilerplate langsam eine Ahnung davon bekommen, dass die professionelle Umsetzung von HTML5-Projekten alles andere als „ein Spaziergang“ ist. Gleichzeitig haben Sie bestimmt erkannt, dass Ihnen mit HTML5 Boilerpla-te ein echtes „Rundum-Sorglos-Paket“ zur Verfügung steht, das Ihnen die mühsame und zeit-raubende eigene Entwicklung geeigneter Lösungen erspart.

6.3 Standardbeispiel mit Boilerplate

Ich möchte das Kapitel mit einem kleinen Boilerplate-Anwendungsbeispiel abschließen. Dazu ist es naheliegend, mein altes Standardbeispiel, mit dem wir uns zu Beginn dieses Stu-dienheftes beschäftigt hatten, mit Boilerplate neu aufzusetzen. Ich muss dafür lediglich in der Boilerplate-Startdatei das eben beschriebene Tag <div role="main"> durch den Inhalt meines bisherigen body-Tags ersetzen.

Zu Beginn des Studienheftes hatte ich Ihnen ja schon gezeigt, wie ich den ursprünglichen HTML-Code mithilfe der neuen HTML5-Tags in ein semantisches Markup überführen konn-te. Dabei konnten drei DIV-Container durch die neuen Tags header, nav und footer er-setzt werden. Am Stylesheet mussten nur geringfügige Änderungen vorgenommen werden, damit das Beispiel anschließend wieder genauso im Browser dargestellt wurde wie zuvor. Ich hatte bisher keinen Gebrauch von der Möglichkeit gemacht, die neu eingefügten Tags sec-tion, article und aside mithilfe von entsprechenden CSS-Regeln eigens zu gestalten. Das möchte ich jetzt mit den ersten beiden ändern (aside bleibt weiterhin ohne spezielle Formatierungen). Dazu werden im Stylesheet nur folgende simple Codezeilen ergänzt:

50 WEBD04

HTML5-Frameworks 6

Der section-Bereich erhält also nun eine eigene Hintergrundfarbe, die einzelnen artic-le-Bereiche bekommen einen Rahmen und etwas oberen Außenabstand. Natürlich muss dann noch der gesamte body-Inhalt unseres Beispiels an die dafür vorgesehene Stelle in der Datei index.html von Boilerplate kopiert werden. Jetzt wollen wir uns das Beispiel aus-nahmsweise nicht, wie gewohnt, im Firefox ansehen, sondern im Internet Explorer 8. Der Grund ist ganz einfach: Sie wissen ja schon, dass dieser Browser die neuen Markup-Elemente überhaupt nicht unterstützt. Deshalb könnte man normalerweise auch nicht erwarten, dass IE8 unsere Beispielseite korrekt darstellt. Mithilfe der in Boilerplate eingebauten Fallbacklö-sungen (hier kommt vor allem modernizr ins Spiel) sieht diese aber, wie folgende Abbildung zeigt, erfreulicherweise genau so aus, wie wir uns das vorgestellt haben:

Abb. 6.3: Beispielseite im Internet Explorer 8 mit Boilerplate

Um den gravierenden Unterschied deutlich zu machen, habe ich diese modifizierte Variante unseres Standardbeispiels (also mit zusätzlichen CSS-Styles für section und article) auch noch ohne Boilerplate implementiert. Dann sieht sie im IE8 nämlich leider nur so aus:

section {

background-color: #CCC;

}

article {

border: thin solid #666;

margin-top: 10px;

}

Semantisches Markup auch mit Internet Explorer 8.0

WEBD04 51

6 HTML5-Frameworks

Abb. 6.4: Beispielseite im Internet Explorer 8 ohne Boilerplate

Dieses Bild hat nur noch wenig mit unserem gewohnten Layout zu tun: Genau genommen gibt es überhaupt kein Layout mehr, sondern IE8 zeigt nur noch eine primitive Darstellung der einzelnen HTML-Elemente in ihrer natürlichen Reihenfolge, d. h. so, wie sie im Quell-code aufeinanderfolgen. Es würde unseren Rahmen sprengen, wenn ich Ihnen hier noch wei-tere „Vorher-Nachher-Beispiele“ zeigen würde – erfinden Sie doch einfach selbst welche! Das aktuelle Boilerplate-Paket (das ist die Version 3.0 im Mai 2012) sowie mein damit implemen-tiertes Beispiel finden Sie auf dem mitgelieferten Datenträger. Es ist gut, wenn Sie die von mir verwendete Version von Boilerplate selbst zur Verfügung haben, damit die Erklärungen in diesem Studienheft mit dem Code übereinstimmen. Selbstverständlich sollten Sie aber für die Entwicklung eigener Projekte auf die jeweils neueste Version zurückgreifen, die Sie im Web herunterladen können, denn die Entwicklung von HTML5-Boilerplate wird sicher im-mer weitergehen.

Zusammenfassung

• HTML5-Frameworks vereinfachen die Entwicklung von Cross-Browser-kompatiblen Websites, die auch auf mobilen Geräten funktionieren und können damit sehr viel Zeit sparen.

• Frameworks sind frei im Web verfügbare Sammlungen von HTML-Musterseiten mit fer-tig eingebundenen Stylesheets und JavaScript-Bibliotheken.

• Die meisten Frameworks beinhalten auch schon Vorlagen für das Web-Layout. Diese ba-sieren meist auf einem mithilfe von CSS implementierten Gestaltungsraster.

• Eine Ausnahme stellt HTML5-Boilerplate dar: Es stellt weder Layoutvorlagen, noch ein Gestaltungsraster zur Verfügung. Es handelt sich um eine mit allen Raffinessen ausge-stattete Startseite, einer Sammlung von JavaScript-Bibliotheken, einem vorkonfigurier-ten Stylesheet und diversen anderen Hilfsdateien.

52 WEBD04

HTML5-Frameworks 6


6.1 Nennen Sie bitte alle in diesem Studienheft aufgeführten HTML5-Frameworks, die mit einem Spaltenraster arbeiten.

6.2 Wir haben es hier mit einem sehr schnelllebigen Bereich der Webtechnologie zu tun. Verschaffen Sie sich deshalb bitte unbedingt im Internet einen Überblick über die aktuell verfügbaren HTML5-Frameworks.

6.3 Laden Sie sich bitte die aktuelle Version von HTML5-Boilerplate herunter und im-plementieren Sie damit das Standardbeispiel aus diesem Studienheft.

WEBD04 53

7 Über HTML5 hinaus


Lernziele:

In diesem letzten Kapitel möchte ich Ihnen noch einige weiterführende Funktionen und Technologien vorstellen. Wenn diese auch nicht unmittelbar zur Spezifikation von HTML5 gehören, sind sie damit doch eng verbunden und bieten zusätzliche at-traktive Möglichkeiten bei der Entwicklung von Websites.

Einige dieser weiterführenden Funktionen wurden aus der HTML5-Spezifikation ausgeglie-dert. Andere – wie das später in diesem Kapitel erklärte Geolocation – waren das ohnehin noch nie. Trotzdem nennt man diese Funktionen meist im Zusammenhang mit HTML5, weil sie parallel damit implementiert werden.

7.1 Clientseitige Daten verwenden

Zuerst möchte ich ihnen eine Möglichkeit vorstellen, mit deren Hilfe Daten auf dem Client – also auf den Rechner des Besuchers einer Webseite – gespeichert werden können. Dazu wurden bisher die Cookies verwendet. Dazu benötigt man JavaScript, PHP oder eine andere serverseitige Technik. Cookies erfreuten sich bei den Usern noch nie besonders großer Be-liebtheit, weil sie unter Verdacht standen, die Sicherheit des Clientrechners zu gefährden. Oft genug wurde sie deshalb auf den Clientbrowser deaktiviert oder waren sogar Anlass, gleich das ganze JavaScript komplett zu deaktivieren: Eine schlechte Lösung, weil viele Funktionen auf modernen Seiten des Web 2.0 ohne JavaScript überhaupt nicht verfügbar sind. Wer Coo-kies deaktiviert, kann beispielsweise keinen Onlineshop nutzen, aber auch eine Log-in-Funk-tionalität lässt sich sinnvoll nur mit Cookies realisieren.

Zusammen mit HTML5 wurden nun andere Lösungen zur Speicherung von Daten auf dem Clientrechner eingeführt. Unter der Bezeichnung Web Storage unterscheidet man hier die neuen JavaScript-Objekte localStorage und sessionStorage. Darüber hinaus gibt es auch noch die Möglichkeit, Daten in Datenbanken auf den Client zu speichern. Für Letztere wurde zunächst Web SQL Databases entwickelt. Diese Spezifikation konnte sich aber nicht bei allen Browserherstellern durchsetzen. Deshalb konzentriert man sich derzeit auf die neue Spezifikation IndexedDB. Da diese aber noch nicht endgültig implementiert ist, möchte ich das Thema im vorliegenden Studienheft nicht weiter vertiefen. Die Speicherung clientseiti-ger Daten mit localStorage und sessionStorage wird dagegen schon von vielen Browsern unterstützt. Die mit localStorage gespeicherten Daten bleiben auch über Browsersitzungen hinweg erhalten und können nur von der Website ausgelesen werden, die sie auch gespeichert hat. Mit sessionStorage gespeicherte Daten werden am Ende einer Sitzung gelöscht. Ich möchte Ihnen nun ein einfaches Beispiel für localStorage vorstel-len. Werfen wir erst einmal einen Blick auf den Code (Beispiel auf Datenträger):

localStrorage und session-Storage statt Cookies

54 WEBD04

Über HTML5 hinaus 7

Abb. 7.1: HTML-Code für localStorage-Beispiel

Es handelt sich um ein recht einfaches Formular, mit dem die Besucher der Seite drei ver-schiedene Voreinstellungen für die Darstellung der Seite vornehmen können: Hintergrund-farbe, Schriftgröße und Schriftfarbe. Die Formularelemente sind jeweils innerhalb einer un-geordneten Liste untergebracht und werden von label- und legend-Tags begleitet. Bemerkenswert ist vielleicht noch, dass der Parameter action im form-Tag leer ist, d. h., er wird hier für die Funktionalität gar nicht benötigt. Ansonsten muss ich das Markup des For-mulars wohl nicht weiter kommentieren. Sehen wir uns in der nächsten Abbildung an, wie unser Beispiel im Browser aussieht:

WEBD04 55


Abb. 7.2: Das localStorage-Beispiel im Firefox

Man kann also als Benutzer aus den drei Drop-down-Menüs einen passenden Wert auswäh-len. Klickt man anschließend auf den Button „Änderungen speichern“, werden die ge-wünschten Einstellungen sofort vom Browser angewandt. Das Entscheidende an lo-calStorage ist aber, dass diese Einstellung gespeichert bleibt, wenn man später das Dokument wieder aufruft. Probieren Sie es einfach selbst aus! (Beispiel auf Datenträger). In-teressant ist jetzt natürlich vor allem, wie diese Funktionalität implementiert wurde. Es ist nicht schwer zu erraten, dass dazu JavaScript benutzt werden muss. Sehen wir uns das Skript in der nächsten Abbildung einmal an. Die Zeilennummerierung kommt daher, dass die Ab-bildung die Anzeige der Boilerplate-Datei scripts.js in Dreamweaver zeigt:

56 WEBD04


Abb. 7.3: Das localStorage-Skript

Ich gehe davon aus, dass Sie bereits über grundlegende JavaScript-Kenntnisse verfügen. Trotzdem werden Sie wohl nicht alle Zeilen dieses Skripts verstehen können. Das ist ganz einfach zu erklären: Hier werden Funktionen aus der beliebten JavaScript-Bilbiothek jQuery verwendet. Und Sie werden sich sicher an das vorausgegangene Kapitel erinnern: Die steht uns automatisch zur Verfügung, wenn wir mit HTML5-Boilerplate arbeiten. Und genau das habe ich bei diesem Beispiel gemacht: Der in der Abbildung oben gezeigte HTML-Code be-findet sich im body-Tag einer Boilerplate-Vorlage. Wie Sie ja gelernt haben, gibt es im Boi-lerplate-System für eigene Skripts einen ganz bestimmten Platz: In der Datei scripts.js, die automatisch eingebunden wird. Und genau da befindet sich auch das hier gezeigte Skript. Da Boilerplate automatisch auch jQuery einbindet, können wir die darin definierten Funkti-onen ganz einfach verwenden und brauchen uns darum nicht weiter zu kümmern. Sie wer-den die Details dieser überaus nützlichen Bibliothek in einem nachfolgenden Studienheft kennenlernen. Damit Sie mein Beispiel verstehen können, muss ich Ihnen lediglich die we-nigen jQuery-Befehle erklären, die hier tatsächlich verwendet werden:

• Beginnen wir mit der anonymen Funtion $(function(): Diese wird aufgerufen, so-bald das DOM der Seite (das Document Object Model) analysiert worden ist. Wenn es mehrere Instanzen dieser Funktion gibt, erfolgt deren Aufruf in der Reihenfolge ihres Auftretens. Es kann also durchaus sein, dass das Dokument noch gar nicht dargestellt,

Dank HTML5-Boilerplate be-quemer Zugriff auf jQuery-Funktionen

WEBD04 57


wird, es aber vom Browser bereits „geparsed“ wurde. Damit ist sichergestellt, dass keine Objekte im Skript referenziert werden, die der Browser noch gar nicht kennt. Übrigens: alle jQuery-Funktionen beginnen mit dem $-Zeichen.

• Der Zugriff auf HTML-Elemente mit der ID=" hintergrund_farbe " erfolgt mit dem Befehl $("#hintergrund_farbe"). Möchte man – wie im Fall eines Formular-elements – dessen Wert abfragen, geschieht das mit dem Aufruf der Methode $("# hintergrund_farbe ").val().

• Die Definition von CSS-Regeln auf ein bestimmtes Element ist mit der Methode $("bo-dy").css("backgroundColor", $("# hintergrund_farbe ").val()); möglich. In diesem Fall wird also für die CSS-Eigenschaft backgroundColor des body-Tags genau der Wert festgelegt, der aus dem entsprechenden Formularelement ausgelesen wurde.

• Die Funktion Einstellungen_laden(); greift auf das Formular selbst zu. Sie „hört“ auf einen Event-Handler, der mit dem submit-Button verknüpft ist. Klickt der User die-sen an, wird die Funktion Einstellungen_speichern(); aufgerufen, die Sie gleich anschließend im Code sehen. Der Mechanismus mithilfe eines Event-Handlers erklärt jetzt auch, warum das Attribut action im Formular keinen Wert benötigt, wie man es sonst aus der Formularverarbeitung gewohnt ist.

Die restlichen Funktionen stammen aus der localStorage-Spezifikation: Dabei greift das Skript auf das Objekt window.localStorage und dessen Methoden zu. Mithilfe von

• localStorage.setItem("hintergrund_farbe ", $("# hintergrund_farbe ").val());

wird ein Name/Wertpaar festgelegt. Mit der Funktion

• localStorage.getItem("hintergrund_farbe ");

kann dieser Wert umgekehrt wieder ausgelesen und in einer Variable (hier bgcolor) gespei-chert werden. Damit sollten die Funktionen Einstellungen_speichern() und Einstellungen_laden() für Sie verständlich sein. In Letzterer werden die in den Varia-blen gespeicherten Werte in die zugehörigen Formularfelder geschrieben. Anschließend wird die Funktion Einstellungen_anwenden(); aufgerufen, die die vom User ausgewählten Einstellungen schließlich auf die Seite anwendet. Das erfolgt mithilfe der oben bereits erläu-terten jQuery-Funktionen zur Definition von CSS-Regeln.

Während der Speicherplatz von Cookies auf 4 kBytes beschränkt war, gibt es bei localStorage dafür grundsätzlich keine Restriktion und er beträgt in der Praxis bis zu mehreren Hundert Kilobytes. Die hier vorgestellte Methode localStorage funktioniert mit den neuesten Versio-nen von Internet Explorer, Firefox, Chrome und Safari. Auf die Erweiterung des Skripts mit einer Fallbacklösung für ältere Browser muss ich aus Platzgründen verzichten.

7.2 Offline arbeiten mit AppCache

Sie haben ja bereits erfahren, dass es neben der Speicherung von Benutzerdaten mit localSto-rage und sessionStorage auch noch die Möglichkeit gibt, Daten in Datenbanken auf den Cli-ent zu speichern. Gehen wir also von einer fiktiven Anwendung aus, mit der sich online ein Adressbuch bearbeiten lässt: also Anlegen, Ändern und Löschen von Adressen. Wie im Ein-zelnen diese Adressdaten gespeichert und die zugehörige Funktionalität implementiert wird, braucht uns hier gar nicht zu interessieren. Jetzt kommt eine neue Anforderung an diese An-wendung hinzu: Sie soll auch offline funktionieren, weil bei mobilen Geräten ja gelegentlich

58 WEBD04


keine Internetverbindung möglich ist. Die für die Anwendung erforderlichen Komponenten (HTML, Bilder, Skripts, usw.) müssen also für den Offline-Betrieb in einem „AppCache“ ge-speichert werden. Dazu muss man eine Manifest-Datei mit der Endung .appcache erstellen, die für unser fiktives Beispiel zum Beispiel so aussehen könnte:

Sie enthält also eine Liste aller clientseitigen Daten unserer Anwendung, die in einem Cache des Browsers für den Offline-Betrieb vorhanden sein müssen. Die Zeilen, die mit dem „Gar-tenzaun“ beginnen, sind Kommentarzeilen. Sie haben eine besondere Bedeutung im Fall von Änderungen einer der Komponenten, die in der Manifest-Datei deklariert sind. Der Cache einer Anwendung wird nämlich nur dann aktualisiert, wenn sich die zugehörige Manifest-Datei auch ändert. Gibt es also Änderungen an einem Bild oder einem Skript werden diese Änderungen nicht automatisch im AppCache gespeichert. Hier kommt die Kommentarzeile ins Spiel: Gibt es Änderungen an den beteiligten Dateien, kann man den Browser zu einer Überprüfung bringen, indem man die Versionsnummer im Kommentar ändert. Damit er-reicht man, dass die Benutzer der Anwendung die neueste Version aller nötigen Komponen-ten in ihrem AppCache haben und damit auch offline arbeiten können. Die Manifest-Datei muss mit dem MIME-Typ text/cache-manifest ausgeliefert werden. Wenn wir für un-sere Adressbuch-Anwendung HTML5 Boilerplate verwenden, brauchen wir uns darum kei-ne Gedanken mehr machen, denn in der mitgelieferten .htaccess-Datei wird dieser MIME-Typ schon definiert. Das funktioniert aber nur, wenn die Manifest-Datei von einem Webserver bereitgestellt wird, d. h. lokales Testen ist in diesem Fall nicht möglich.

Alle Dateien, auf die zugegriffen wird, müssen angegeben werden, mit Ausnahme der Datei, die das Manifest einbindet. Diese Einbindung könnte z. B. in der Startdatei index.html er-folgen und aktiviert den Anwendungscache für unser „Adressbuch-App“:

Auch weitere Seiten mit einem manifest-Attribut, zu denen der Nutzer navigiert, werden implizit dem Anwendungscache hinzugefügt. Der Ablauf bei der Benutzung der Anwendung sieht dann so aus: Beim ersten Aufruf werden alle in der Manifest-Datei aufgelisteten Kom-ponenten heruntergeladen und im Cache gespeichert. Wird dann die Internetverbindung un-terbrochen, können die Benutzer trotzdem offline weiter mit dem Adressbuch arbeiten. Die Relevanz dieser Technologie liegt auf der Hand: Anstatt für mobile Geräte unterschiedlicher Hersteller aufwendig native Apps in der jeweiligen proprietären Programmiersprache zu ent-wickeln, ist dies so auch mit den vielen Webdesignern vertrauten Standardtechniken mög-lich.

CACHE MANIFEST

# version = 1.0.1

index.html

images/logo.png

css/style.css

js/libs/jquery-1.7.1.min.js

js/scripts.js

<html manifest="adressen.appcache">

...

</html>

Manifest-Datei für offline-An-wendungen mit AppCache

WEBD04 59


7.3 Geolocation

Falls Sie bereits ein Smartphone benutzen, ist Ihnen die Funktionalität von Geolocation mit Sicherheit gut bekannt: Es ist eine Technik, die den aktuellen Standort einer Person über den Standort der von ihr verwendeten Computer (einschließlich Smartphones oder anderer mo-biler Geräte) ermittelt. Dazu können die IP-Adresse, die MAC-Adresse, der Standort des be-nutzten WLAN-Hotspots oder – falls verfügbar – natürlich auch die GPS-Daten des Rech-ners herangezogen werden. Diese nützliche Technologie wird auf der Grundlage der Geolocation-API von Firefox, Safari Chrome und Internet Explorer ab Version 9 bereits un-terstützt. Sehen wir uns dazu gleich ein ganz einfaches Beispiel an:

Abb. 7.4: HTML- und JavaScriptCode für ein einfaches Geolocation-Beispiel

Die eigentliche Standortbestimmung wird mit der Methode getCurrentPosition() des Objekts navigator.geolocation durchgeführt, die in der Geolocation-API spezifiziert ist. Diese Methode verwendet eine anonyme Funktion mit dem Objekt position als Para-meter. Aus den verschiedenen Attributen dieses Objekts wird der gewünschte Inhalt extra-hiert und Zeile für Zeile in der Variable ausgabe gesammelt. Zuletzt wird dieser kumulierte Inhalt von ausgabe am Bildschirm ausgegeben.

Und so sieht diese Seite im Firefox aus, nachdem man als User in einem Dialogfenster den Zugriff auf den eigenen Standort erlaubt hat

Standortbe-stimmung mit Static Map API von Google

60 WEBD04


Abb. 7.5: Das Geolocation-Beispiel im Firefox

Die Geolocation-API selbst liefert also lediglich die Koordinaten, mit denen man anschlie-ßend ganz verschiedene Dinge machen kann. Ein Anwendungsbeispiel besteht darin, sich die mithilfe von Geolocation gewonnene Position auf Google Maps anzeigen zu lassen. Auch dafür möchte ich Ihnen gleich ein kleines Beispiel zeigen:

Abb. 7.6: HTML-Code für die Kombination von Geolocation mit Google-Maps

Wie schon bei früheren Beispielen, habe ich das Markup an die vorgesehene Stelle in einer Boilerplate-Vorlage geschrieben, um wieder in den Genuss der Vorteile dieses Frameworks zu kommen (Beispiel auf Datenträger). Wie Sie sehen, ist gar nicht sehr viel HTML-Code notwendig: Man benötigt lediglich ein img-Tag, bei dem das Attribut src als Quelle auf die Static Map API von Google verweist. Innerhalb dieses absoluten, externen Pfads müssen dann nach dem Fragezeichen noch einige weitere Angaben eingebunden werden. Dabei muss man sich an die in der API vorgeschriebene Syntax halten. Ich denke, die meisten dieser Angaben sind selbsterklärend. Die Angabe sensor=false bedeutet, dass vorerst kein GPS oder eine andere clientseitige Methode zur Standortbestimmung verwendet worden ist. Die Angabe der drei grünen Marker bedeutet, dass wir neben unserem eigenen Standort später in der Karte zur besseren Orientierung auch noch diese drei Orte angezeigt haben möchten.

WEBD04 61


Der Code funktioniert übrigens nicht mehr, wenn man darin explizite Zeilenumbrüche oder zusätzliche Leerzeichen eingibt. Lädt man das Beispiel in einem Browser, muss man zunächst die Genehmigung zum Zugriff auf den eigenen Standort erteilen. Anschließend zeigt sich folgendes Bild©:

Abb. 7.7: Das Geolocation-Beispiel mit Google-Maps im Firefox (© Google/Geocontent)

Wie wir es gewünscht haben, werden bestimmte vordefinierte Standorte mit grünen Mar-kern in der Karte angezeigt, mein eigener Standort dagegen mit dem roten Marker. Natürlich wird diese Funktionalität auch hier erst wieder durch ein JavaScript bereitgestellt. Das Skript ist ziemlich kurz und sieht (platziert in der Boilerplate-Datei scripts.js) folgendermaßen aus:

Abb. 7.8: Das Geolocation-Skript

62 WEBD04


In der Funktion finde_mich() wird die eigentliche Standortbestimmung mit der Methode getCurrentPosition() des Objekts navigator.geolocation durchgeführt. Diese Methode benutzt ihrerseits eine anonyme Funktion mit dem Objekt position als Parame-ter. In dieser Funktion wird schließlich die Funktion zeigePosition() aufgerufen. Diese liefert die Attribute des Objekts position zurück: die für die Standortbestimmung benötig-ten Koordinaten für Längen-und Breitengrad meines Aufenthaltsorts.

Damit das alles funktionieren kann, müssen im Anschluss verschiedene Variablen deklariert werden. Die Variable zeigePosition ist, wie schon gesagt, selbst wieder eine Funktion mit den Parametern Längen und Breitegrad. Für meinen Standort wird in markierung ein roter Marker mit einem Y definiert, dem die Koordinaten für Längen-und Breitengrad zuge-wiesen werden. In der Variable bild wird mithilfe der schon bekannten jQuery-Funktion das im Markup definierte img-Tag als Objekt gespeichert (um jQuery müssen wir uns dank Boilerplate nicht kümmern). Dessen Quellangabe (im Attribut src) wird jetzt mit der Me-thode attr des Objekts bild um den Inhalt der Variable markierung erweitert. Mit der Methode replace() wird noch der Parameter sensor von false auf true gesetzt. Zu-letzt werden alle zuvor in den einzelnen Variablen gesammelten Informationen in das Bild-Attribut src zurückgeschrieben.

Damit die Standortbestimmung auch ausgeführt wird, muss unmittelbar nach der Definition des img-Tags in der HTML-Datei (s. oben) natürlich die Funktion finde_mich() mit fol-gendem Code aufgerufen werden:

Auch bei diesem Beispiel muss ich aus Platzgründen auf die Ergänzung durch eine Fallback-lösung verzichten.

Zusammenfassung

• Im Rahmen von HTML5 können clientseitige Daten mit den Objekten sessionSto-rage und localStorage gespeichert werden.

• Dazu wird mit den Methoden setItem() bzw. getItem() ein Name/Wertpaar gespei-chert bzw. ausgelesen.

• Grundsätzlich können Daten sogar auch in Datenbanken auf dem Client gespeichert werden. Die ursprüngliche Spezifikation Web SQL Databases hat sich nicht durchge-setzt. Die neue Spezifikation ist noch in Entwicklung (Mai 2012) und heißt IndexedDB.

• AppCache wird für die Implementierung von Offlineanwendungen benutzt. Dazu muss eine Manifest-Datei spezifiziert und in die beteiligten Dokumente eingebunden werden.

• Mithilfe der Geolocation API kann man die Koordinaten des Standorts eines Gerätes aus-lesen. Das kann man beispielsweise nutzen, um die Static Map API von Google zu ver-wenden. Mithilfe der dort spezifizierten Syntax und etwas JavaScript kann der Standort der Besucher relativ leicht bestimmt werden.

<script type="text/javascript" charset="utf-8">

finde_mich ();

</script>

WEBD04 63



7.1 Worin unterscheiden sich die Objekte localStorage und sessionStorage?

7.2 Was wird genau bei der Benutzung der Methoden getItem() bzw. setItem() gespeichert?

7.3 Was ist die Bedeutung der Kommentarzeilen in einer Manifest-Datei?

7.4 Wie lautet die Methode in vollständiger Punktschreibweise, die man zur Standort-bestimmung mithilfe der Geolocation API benutzt?

64 WEBD04

Ausblick und Schlusswort 8

8 Ausblick und Schlusswort

Ich hoffe, diese Einführung in das interessante Thema HTML5 hat Ihre Erwartungen erfüllt und Sie haben dadurch einen guten Überblick gewinnen können. Sie wissen jetzt: HTML5 unterstützt das semantische Web, ermöglicht benutzerfreundliche Formulare, lässt uns Au-dio und Video ohne Plug-ins genießen und stellt mit dem canvas-Element eine ganz neue Möglichkeit zur Generierung von Grafiken bereit. Darüber hinaus erlaubt HTML5 die Spei-cherung clientseitiger Daten und in Kombination mit App Cache auch die Entwicklung von Web-Anwendungen, die auch offline funktionieren. Schließlich haben wir die Möglichkeit, mit Geolocation unseren Standort relativ zu vorgegebenen Orientierungspunkten zu bestim-men – und diese Liste ließe sich noch lange fortsetzen. Die Zukunft stellt Webentwickler(-innen) vor große Herausforderungen: Das Ziel, attraktivere und vor allem auch intelligen-tere Websites zu entwickeln, die kompatibel mit unzähligen Browserversionen und immer mehr mobilen Geräten sein müssen, lässt sich am besten mit HTML5 und den damit eng ver-bundenen Technologien CSS und JavaScript erreichen.

Als künftige(r) Webentwickler(-in) werden Sie sich mit diesen Themen sehr befassen müs-sen. Diese entwickeln sich sehr dynamisch weiter, d. h., wenn Sie dieses Studienheft in Hän-den halten, gibt es mit Sicherheit schon wieder einige neue Aspekte, die Sie kennenlernen sollten. Man kann lesen, dass sogar der Begriff HTML5 schon wieder veraltet sei, wie folgen-des Zitat beweist ("Going forward, the WHATWG is just working on "HTML", without wor-rying about version numbers. http://wiki.whatwg.org/wiki/FAQ#What_is_HTML5.3F).

Deshalb ist es unumgänglich, stets „am Puls der Zeit“ zu sein. Dabei hilft neben der regelmä-ßigen Lektüre von Fachzeitschriften (ich kann hier z. B. das „Internet Magazin“ empfehlen) vor allem das Studium der einschlägigen Quellen im Internet. Ich habe Ihnen deshalb im An-schluss – neben der üblichen Empfehlung einiger Fachbücher – sehr viele relevante Webad-ressen nach Themen geordnet angegeben. Diese stellen sicher einen guten Ausgangspunkt für die Weiterverfolgung der aktuellen Entwicklung dar.

Ich möchte Ihnen zuletzt noch ein paar Hinweise geben, die die große Bedeutung von HTML5 im Webdesign noch mal unterstreichen:

• Mithilfe von HTML5, CSS 3 und JavaScript lassen sich auch Animationen erstellen. Na-tives Audio und Video haben Sie ja in diesem Studienheft selbst kennengelernt. Die Kon-sequenz daraus ist: Das Autorenprogramm Flash hat sicherlich seinen Höhepunkt hinter sich. Das hat auch der Hersteller Adobe längst akzeptiert und bringt mit Adobe Edge ein neues Autorenprogramm auf der Basis von HTML5/JavaScript auf den Markt. Darin wird - ganz ähnlich zu Flash – eine Vorgehensweise auf der Basis einer Timeline ange-wandt. Mit einem weiteren Produkt Adobe Wallaby soll sogar in begrenztem Umfang die Konvertierung von Flash-Content nach HTML5 möglich sein.

• Das bedeutendste Webdesign-Werkzeug ist nach wie vor Adobe Dreamweaver. Schon seit der Version CS5.5 besitzt er eine weitreichende HTML5-Unterstützung. Man kann mit Sicherheit davon ausgehen, dass sich dieser Trend in der dieser Tage veröffentlichten neuen Version CS6 noch weiter fortsetzt.

Wir dürfen jedenfalls gespannt sein, welche Entwicklung HTML5 und die damit eng ver-knüpften Technologien CSS und JavaScript in den kommenden Jahren nehmen wird. Auf je-den Fall haben Sie sich jetzt eine Pause verdient, bevor Sie beginnen, sich mit der Einsen-deaufgabe zu beschäftigen. Ich hoffe natürlich, dass Ihnen die Lektüre dieses Studienhefts neben aller Mühe auch etwas Spaß gemacht hat.

Vielen Dank für Ihre Aufmerksamkeit und weiterhin viel Erfolg!

WEBD04 65

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

A Lösungen der Aufgaben zur Selbstüberprüfung

A. Lösungen der Aufgaben zur Selbstüberprüfung

Kapitel 1

1.1 Erstellen Sie bitte auf Ihrem Rechner mit dem jeweils vorhandenen Editor eine HTML-Datei mit der HTML5-Grundstruktur.

Bitte befolgen Sie während dieser Arbeit exakt die in diesem Kapitel für Ihre jewei-lige Plattform (PC/Mac) gegebenen Anleitungen.

1.2 Fügen Sie bitte in den body dieses Dokuments einige Ihnen bekannte strukturelle Elemente ein (z. B. Überschriften, Paragrafen, Listen usw.) und testen Sie dann das Ergebnis bitte in einem Browser.

Öffnen Sie bitte die so erstellte Webseite in Ihrem Standard-Browser (wenn möglich auch noch in einem weiteren modernen Browser auf Ihrer Plattform). Kontrollieren Sie bitte genau, ob alle von Ihnen im Code eingegebenen Elemente auch korrekt an-gezeigt werden.

Kapitel 2

2.1 Stellen Sie bitte die Beispielseite „Meine tolle Firma“ in der eben erklärten Weise auf das semantische Markup um (der Ausgangscode befindet sich auf mitgeliefertem Da-tenträger).

2.2 Benutzen Sie dabei die semantisch korrekte Methode zur Beendigung des Umflie-ßens (Micro Clearfix Hack).

Vergewissern Sie sich bitte, dass nach dem Einbau der neuen Tags und der zugehö-rigen Änderungen im CSS-Code die Seite anschließend wieder genau so dargestellt wird, wie in der folgenden Abbildung:

Vergleichen Sie bitte Ihre Lösungen! Bei freier Formulierung kommt es nicht auf wörtliche Übereinstimmung an, sondern auf inhaltliche. Sind Sie zu einem anderen Ergebnis gekom-men, sollten Sie das entsprechende Kapitel dieses Studienheftes wiederholen und die zuge-hörige Aufgabe nach einer Pause noch einmal schriftlich lösen. Gegebenenfalls berichtigen Sie Ihr Ergebnis nach einem erneuten Versuch. Lassen Sie kein falsches Ergebnis stehen.

66 WEBD04

Lösungen der Aufgaben zur Selbstüberprüfung A

Kapitel 3

3.1 Ist es sinnvoll, die Attribute placeholder und autofocus bei einem Eingabefeld gleichzeitig zu benutzen?

placeholder sollte nicht mit autofocus kombiniert werden, da autofocus ja den Hinweistext sofort löschen würde, wenn das Eingabefeld den Focus erhält.

3.2 Warum sind die neuen Eingabefelder gerade für Formulare auf Smartphones beson-ders vorteilhaft?

Weil auf mobilen Geräten viele der neuen Eingabefelder in einer dem kleineren Bildschirm angemessenen, benutzerfreundlichen Weise dargestellt werden (z. B. Ka-lender-Widgets, Spinboxen, Schieberegler usw.). Außerdem wird auch die richtige Tastatur angezeigt.

3.3 Erklären Sie bitte die beiden Attribute novalidate und required.

novalidate unterbindet die automatische Validierung der Benutzereingaben durch den Browser. required kennzeichnet ein Eingabefeld als obligatorisch (Pflichtfeld).

3.4 Was ist der Unterschied zwischen den Codefragmenten type="range" und steps="10".

type="range" spezifiziert ein speziell für die Eingabe von Zahlen vorgesehenes Formularelement (<input type="range">). Dabei kommt es auf den genauen Wert nicht an (wird oft als Schieberegler angezeigt). Bei dem ebenfalls für die Eingabe von Zahlen vorgesehenen Formularelement (<input type="number">) sind dagegen nur bestimmte Werte erlaubt, wobei steps="10" die Schrittweite festlegt.

WEBD04 67

A Lösungen der Aufgaben zur Selbstüberprüfung

Kapitel 4

4.1 Schreiben Sie bitte den Code für die Einbettung der beiden (fiktiven) Audio- bzw. Video-Containern mein-audio.mp4 und mein-video.ogv.

Ihr Code sollte etwa so aussehen:

Kapitel 5

5.1 Schreiben Sie bitte den Code, mit dem die Methode getContext() für ein canvas-Element bereitgestellt wird.

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

5.2 Mit welchen Methoden wird die Erstellung eines Pfades in einem canvas-Element begonnen bzw. beendet?

context.beginPath(); context.closePath();>

5.3 Worauf muss man beim Erstellen grafischer Objekte mit JavaScript in einem canvas–Element im Hinblick auf den Ladevorgang achten?

Die Objekte und zugehörigen Methoden stehen erst dann zur Verfügung, wenn das canvas-Element auch tatsächlich vom Browser geladen wurde.

Kapitel 6

6.1 Nennen Sie bitte alle in diesem Studienheft aufgeführten HTML5-Frameworks, die mit einem Spaltenraster arbeiten.

52framework, lessframework, G5 Framework Gravity, Bootstrap.

6.2 Wir haben es hier mit einem sehr schnelllebigen Bereich der Webtechnologie zu tun. Verschaffen Sie sich deshalb bitte unbedingt im Internet einen Überblick über die ak-tuell verfügbaren HTML5-Frameworks.

Sehen Sie sich bitte die Websites der im Studienheft genannten Frameworks an und verfolgen Sie die dort veröffentlichten Neuerungen. Durchsuchen Sie außerdem re-gelmäßig das Web mit den Suchbegriffen „HTML5, Framework, Template“ usw.

6.3 Laden Sie sich bitte die aktuelle Version von HTML5-Boilerplate herunter und im-plementieren Sie damit das Standardbeispiel aus diesem Studienheft.

Vergewissern Sie sich bitte, dass nach dem Einbau der neuen Tags und der zugehö-rigen Änderungen im CSS-Code die Seite anschließend wieder genau so dargestellt wird wie in der oben bereits gezeigten Abbildung.

<audio id="test" controls>

<source src=" mein-audio.mp4" type="audio/mpeg">

</audio>

<video width="450" height="337" controls>

<source src=" mein-video.ogv" type="video/ogg">

</video >

68 WEBD04

Lösungen der Aufgaben zur Selbstüberprüfung A

Kapitel 7

7.1 Worin unterscheiden sich die Objekte localStorage und sessionStorage?

Mit localStorage gespeicherte Daten bleiben auch über Browsersitzungen hinweg erhalten, mit sessionStorage gespeicherte Daten werden am Ende einer Sitzung ge-löscht.

7.2 Was wird genau bei der Benutzung der Methoden getItem() bzw. setItem() ge-speichert?

Ein Name/Wertpaar

7.3 Was ist die Bedeutung der Kommentarzeilen in einer Manifest-Datei?

Mit einer dort angegebenen Versionsnummer erreicht man, dass die Benutzer der Anwendung die neueste Version aller nötigen Komponenten in ihrem AppCache ha-ben und damit auch offline arbeiten können.

7.4 Wie lautet die Methode in vollständiger Punktschreibweise, die man zur Standortbe-stimmung mithilfe der Geolocation API benutzt?

navigator.geolocation.getCurrentPosition(function(position){hier folgt Aufruf einer JavaScript-Funktion mit ihren eigenen Parametern})

WEBD04 69

B Glossar

B. Glossar

Hier finden Sie eine kurze Erklärung zu den im Studienheft eingeführten Begriffen:

Android Von Google entwickeltes Betriebssystem für Smartphones und Tablets.

App (Application) Anwendung auf Smartphones oder Tablets.

AppCache Speicherbereich auf dem Client, in dem die für eine Anwen-dung erforderlichen Komponenten (HTML, Bilder, Skripts, usw.) gespeichert werden, damit die Anwendung auch offline funktioniert.

Blog Kunstwort aus Web und Log (für Logbuch). Auf einer Website geführtes Tagebuch oder Journal, in dem der „Blogger“ Auf-zeichnungen führt oder einfach seine Gedanken veröffentlicht.

Blogroll Linksammlung innerhalb eines Blogs, die zu anderen Weblogs führt.

Boilerplate Beliebtes Startpaket für HTML5-Projekte. Enthält eine mit al-len Raffinessen ausgestattete Startseite, eine Sammlung von JavaScript-Bibliotheken, ein vorkonfiguriertes Stylesheet und diverse anderen Hilfsdateien.

Canvas Ein HTML5-Element, das in den Markup-Code eingebaut wer-den kann. Es ist nur eine leere Zeichenfläche, auf der man mit-hilfe von JavaScript grafische Objekte erstellen kann.

Client Im Fall des Internets ist das ein Rechner, auf dem mithilfe eines Browsers Webseiten angesehen werden.

Codec Das eigentliche Format, mit dem Video- oder Audiodateien bzw. -Streams codiert worden sind.

Container „Behälter“ oder „Verpackung“, die die eigentliche Multimedia-Information (Audiostreams und Videostreams) enthält.

Fallbacklösung Ausweichlösung, damit modern Websites auch mit älteren Browsern in akzeptabler Weise angesehen warden können.

Framework Im Web verfügbare Sammlungen von HTML-Musterseiten mit fertig eingebundenen Stylesheets und JavaScript-Bibliotheken, die eine perfekte Basis für eigene Webprojekte bilden.

Geolocation Technik, die den aktuellen Standort einer Person über den Standort der von ihr verwendeten Computer (einschließlich Smartphones oder anderer mobiler Geräte) ermittelt.

HTML5 Aktueller „Quasi-Standard“ der Auszeichnungssprache für Webseiten. Befindet sich in stetiger Weiterentwicklung.

HTML5shiv/HTML5shim JavaScript-Bibliothek, die es ermöglicht, die neuen HTML5-Elemente auch im Internet Explorer (alle Versionen) zu nutzen und mit Style-Informationen zu formatieren.

70 WEBD04

Glossar B

jQuery Freie JavaScript-Klassenbibliothek, mit der komfortabel auf die einzelnen Elemente einer Webseite (im Rahmen des Document Object Model) zugegriffen werden kann.

Markup Der HTML-Code, in dem alle Elemente auf einer Webseite mit entsprechenden Tags markiert („ausgezeichnet“) werden.

Modernizr FreieJavascript-Bibliothek mit der geprüft werden kann, ob ein Browser bestimmte HTML5- oder CSS3-Features nativ unter-stützt.

Natives Audio/Video In den HTML-Code eingebettete Audio- bzw. Video-Contai-ner, die von Browsern ohne zusätzliches Plug-in wiedergege-ben werden können.

Posting Beitrag in einem Webforum oder Blog.

SEO Search Engine Optimization (Suchmaschinenoptimierung).

Server Im Fall des Internets ist das ein Rechner (meist Linux), auf dem eine Serversoftware läuft (meist Apache).

W3C World Wide Web Consortium.

XHTML Bisheriger, auf XML basierender Standard der Auszeichnungs-sprache für Webseiten.

WEBD04 71

C Literatur

C. Literatur

Hogan, B. P. & Fröhlich, S. HTML5 & CSS3: Webentwicklung mit den Standards von mor-gen. Verlag: O’Reilly. ISBN-13: 978-3897213166. Preis: 34,90 €.

Gull, C. & Münz, S. HTML5 Handbuch. Franzis Verlag. ISBN-13: 978-3645601511. Preis: 40,00 €.

Kröner, P. HTML5: Webseiten innovativ und zukunftssicher. Source Press. ISBN-13: 978-3941841345. Preis: 39,90 €.

Kunisch, M. T. & Ginader, D. HTML5 und CSS3: Die neuen Webstandards in der Praxis. Galileo Computing. ISBN-13: 978-3836217163. Preis: 34,90 €.

Prevezanos, C. Jetzt lerne ich HTML5: Start ohne Vorwissen.Markt und Technik. ISBN-13: 978-3827246745. Preis: 24,95 €.

Lawson, B. & Sharp, R. HTML5: Eine Einführung für Umsteiger.Addison-Wesley. München. ISBN-13: 978-3827330734. Preis: 29,80 €.

Pilgrim, M. Durchstarten mit HTML5. O’Reilly, ISBN 978-3815830536. Preis: 29,90 €.

Koch, D. Das große Buch: HTML5. Data Becker. ISBN-13: 978-3815830703. Preis: 29,95 €.

Öggl, B. & Förster, K. HTML5: Leitfaden für Webentwickler.Addison-Wesley. ISBN-13: 978-3827328915. Preis: 34,95 €.

Wempen, F. HTML5: Schritt für Schritt.Microsoft Press Deutschland. ISBN-13: 978-3866455504. Preis: 39,90 €.

Informationsquellen im Internet

Bei einem so dynamischen Thema ist es keine gute Idee, nur statische Weblinks aufzulisten. Ich empfehle Ihnen deshalb, zusätzlich nach unterschiedlichen Schreibweisen des Begriffs „html5“ zu suchen (also auch „html 5“). Aus diesem Grund gebe ich hier nur einige ausge-wählte Links zu dem Thema an.

Grundlagen

• http://de.selfhtml.org

• http://www.peterkroener.de/html5-was-geht-heute-schon-was-geht-nicht-der-grosse-ueberblick

• http://www.webkrauts.de/category/html5-einfuehrung

• http://www.html-seminar.de/html-5-strukturierende-elemente.htm

• http://html5doctor.com

• http://html5gallery.com

• http://diveintohtml5.info

• http://www.youtube.com/html5

• http://www.html-seminar.de/html-5-strukturierende-elemente.htm

• http://html5please.com

72 WEBD04

http://de.selfhtml.org

http://www.peterkroener.de/html5-was-geht-heute-schon-was-geht-nicht-der-grosse-ueberblick

http://www.peterkroener.de/html5-was-geht-heute-schon-was-geht-nicht-der-grosse-ueberblick

http://www.webkrauts.de/category/html5-einfuehrung

http://www.html-seminar.de/html-5-strukturierende-elemente.htm

http://html5doctor.com

http://html5doctor.com

http://www.youtube.com/html5

http://diveintohtml5.info

http://www.html-seminar.de/html-5-strukturierende-elemente.htm

http://html5please.com

Literatur C

• http://caniuse.com

• http://notepad-plus-plus.org

• http://taco-html-edit.softonic.de/mac

• http://www.positioniseverything.net/easyclearing.html

• http://nicolasgallagher.com/micro-clearfix-hack

Video

• http://code.google.com/p/video4all

• http://m.vid.ly

• http://flowplayer.org

• http://camendesign.com/code/video_for_everybody

Canvas

• http://code.google.com/p/explorercanvas

• http://www.html5canvastutorials.com

• https://sites.google.com/site/canvasdraw

• https://sites.google.com/site/canvimationhelp/introduction

• http://flashcanvas.net

• http://www.canvasdemos.com

Frameworks

• http://stylishwebdesigner.com/10-best-html5-and-css3-frameworks

• http://html5boilerplate.com/#v2

• http://www.youtube.com/watch?v=NMEB78VX2P0

• http://www.youtube.com/watch?v=OXpCB3U_4Ig

• http://www.52framework.com

• http://lessframework.com

• http://framework.gregbabula.info

• http://gravityframework.com

• http://twitter.github.com/bootstrap

• http://thatcoolguy.github.com/gridless-boilerplate

• http://afarkas.github.com/webshim/demos

Jenseits HTML5

• http://www.alistapart.com/articles/application-cache-is-a-douchebag

• http://t3n.de/news/html5-local-storage-daten-offlinebetrieb-speichern-350314/

• http://www.webmasterpro.de/coding/article/javascript-html5-local-storage-tutorial.html

• http://www.html5rocks.com/de/tutorials/appcache/beginner

• http://9elements.com/html5demos/geolocation

WEBD04 73

http://caniuse.com

http://notepad-plus-plus.org

http://taco-html-edit.softonic.de/mac


http://nicolasgallagher.com/micro-clearfix-hack

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

http://m.vid.ly

http://flowplayer.org

http://camendesign.com/code/video_for_everybody

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

http://www.html5canvastutorials.com

https://sites.google.com/site/canvasdraw

https://sites.google.com/site/canvimationhelp/introduction

http://flashcanvas.net

http://www.canvasdemos.com

http://stylishwebdesigner.com/10-best-html5-and-css3-frameworks


http://www.youtube.com/watch?v=NMEB78VX2P0

http://www.youtube.com/watch?v=OXpCB3U_4Ig








http://www.alistapart.com/articles/application-cache-is-a-douchebag

http://t3n.de/news/html5-local-storage-daten-offlinebetrieb-speichern-350314/

http://www.webmasterpro.de/coding/article/javascript-html5-local-storage-tutorial.html

http://www.webmasterpro.de/coding/article/javascript-html5-local-storage-tutorial.html

http://www.html5rocks.com/de/tutorials/appcache/beginner

http://9elements.com/html5demos/geolocation

D Abbildungsverzeichnis

D. Abbildungsverzeichnis

AbbildungsverzeichnisWEBD04

Abb. 1.1: HTML5-Grundstruktur ......................................................................................... 3

Abb. 1.2: Speicheroptionen beim Notepad .......................................................................... 5

Abb. 1.3: Speicheroptionen beim TextEdit .......................................................................... 6

Abb. 2.1: Beispielseite im Firefox ......................................................................................... 10

Abb. 2.2: Beispielseite Layoutschema .................................................................................. 11

Abb. 2.3: HTML-Code-Beispielseite (ohne semantisches Markup) ................................ 12

Abb. 2.4: HTML-Code-Beispielseite: semantisches Markup ........................................... 13

Abb. 2.5: CSS-Code-Beispielseite (an semantisches Markup angepasst) ...................... 15

Abb. 3.1: Beispiel-Formular im Firefox ............................................................................... 18

Abb. 3.2: Beispiel-Formular Quellcode ................................................................................ 19

Abb. 3.3: Beispiel-Formular im Safari (Windows) ............................................................. 20

Abb. 3.4: Das Attribut required in Aktion (Firefox) ......................................................... 21

Abb. 3.5: Das Element input type="date" in Aktion (iPhone, Safari) ............................ 22

Abb. 3.6: Das Element input type="tel" in Aktion (iPhone, Safari) ............................... 23

Abb. 3.7: Das Element datalist in Aktion (Firefox) ........................................................... 23

Abb. 3.8: Beispiel-Formular auf dem iPhone (Safari) ....................................................... 24

Abb. 4.1: HTML-Code Audioeinbettung ............................................................................ 28

Abb. 4.2: Das Audiobeispiel im Firefox ............................................................................... 29

Abb. 4.3: Das Audiobeispiel im Safari ................................................................................. 30

Abb. 4.4: Das Audiobeispiel im Internet Explorer 8.0 ...................................................... 30

Abb. 4.5: HTML-Code Videoeinbettung ............................................................................. 31

Abb. 4.6: Das Videobeispiel im Firefox ............................................................................... 32

Abb. 4.7: Das Videobeispiel im Safari .................................................................................. 33

Abb. 4.8: Das Video-Beispiel im Internet Explorer 8.0 ..................................................... 34

Abb. 5.1: Eine einfache Zeichnung mit canvas .................................................................. 37

Abb. 5.2: Das einfache canvas-Beispiel im Firefox ........................................................... 39

Abb. 5.3: Das einfache canvas-Beispiel im Internet Explorer 8.0 ................................... 39

Abb. 5.4: Das einfache canvas-Beispiel im Internet Explorer 8.0 mit ExplorerCanvas ............................................................................................... 40

Abb. 5.5: Ein komplexeres canvas-Beispiel mit Text und Logo ...................................... 41

Abb. 5.6: Das komplexere canvas-Beispiel im Firefox ...................................................... 42

Abb. 6.1: Ordnerinhalt von HTML5 Boilerplate 3.0 .......................................................... 46

Abb. 6.2: Quellcode der index.html von HTML5 Boilerplate 3.0 ................................... 48

Abb. 6.3: Beispielseite im Internet Explorer 8 mit Boilerplate ........................................ 51

Abb. 6.4: Beispielseite im Internet Explorer 8 ohne Boilerplate ..................................... 52

Abb. 7.1: HTML-Code für localStorage-Beispiel ............................................................... 55

74 WEBD04

Abbildungsverzeichnis D

Abb. 7.2: Das localStorage-Beispiel im Firefox .................................................................. 56

Abb. 7.3: Das localStorage-Skript ......................................................................................... 57

Abb. 7.4: HTML- und JavaScriptCode für ein einfaches Geolocation-Beispiel ........... 60

Abb. 7.5: Das Geolocation-Beispiel im Firefox .................................................................. 61

Abb. 7.6: HTML-Code für die Kombination von Geolocation mit Google-Maps ....... 61

Abb. 7.7: Das Geolocation-Beispiel mit Google-Maps im Firefox (© Google/Geocontent) ......................................................................................... 62

Abb. 7.8: Das Geolocation-Skript ......................................................................................... 62

WEBD04 75

E Sachwortverzeichnis

E. SachwortverzeichnisSachwortverzeichnis

Symbols

.htaccess ....................................................... 47

Numerics

52framework ............................................... 44

A

AAC .............................................................. 27

Abwärtskompatibilität ................................ 4Adobe ........................................................... 65

Adobe Dreamweaver ................................. 65

Adobe Edge ................................................. 65

Adobe Wallaby ........................................... 65

Anwendungscache ..................................... 59

Apache-Webserver ..................................... 47

AppCache .................................................... 58

Apple-Touch Icons ..................................... 47

article .............................................................. 8aside ................................................................ 8Attribute ........................................................ 3Attributminimalisierung ........................... 21

Audio ............................................................ 26

natives ..................................................... 26

Ausweichlösungen ....................................... 4autocomplete ............................................... 19

autofocus ..................................................... 21

Autovervollständigung ............................. 19

B

Barrierefreiheit ........................................... 17

Bitmap-Grafik ............................................. 36

Boilerplate ................................................... 61

Bootstrap ..................................................... 45

C

canvas ........................................................... 36

Canvasdraw ................................................ 43

Chrome Frame ..................................... 47, 49

Codecs .......................................................... 26

Conditional Comments ............................. 40

Container ..................................................... 26

Cookies ......................................................... 54

CSS3 .............................................................. 44

CSS-Regeln .................................................... 8

D

datalist-Element ......................................... 23

Daten

clientseitige ............................................ 54

Datumseingabe .......................................... 22

DIV-Container ............................................ 13

Doctype ......................................................... 3

Document Object Model .......................... 57

DOM ............................................................ 57

E

Eingabefelder .............................................. 18

ExplorerCanvas .......................................... 40

F

Fallbacklösung ..................................... 30, 32

Fallbacklösungen ......................................... 4

Favicon ........................................................ 47

favicon ......................................................... 47

Flash ............................................................. 65

Flash-Player ......................................... 26, 34

Flowplayer .................................................. 34

footer .............................................................. 8

Formulare .................................................... 18

Frameworks ................................................ 44

G

G5 Framework ............................................ 45

Geolocation .......................................... 54, 60

Geolocation-API ........................................ 60

GitHub ......................................................... 47

Google Analytics ....................................... 50

Google CDN ............................................... 50

Google Maps ............................................... 61

GPS-Daten .................................................. 60

Gravity ......................................................... 45

Gridless ........................................................ 45

Grundstruktur .............................................. 3

GZIP-Kompression .................................... 47

H

H.264 ............................................................ 27

header ............................................................ 8

HTML5 ................................................... 3, 65

shim ......................................................... 49

shiv .......................................................... 49

76 WEBD04

Sachwortverzeichnis E

HTML5 Boilerplate ............................. 44, 46

html5boilerplate ......................................... 45

HTML5-Frameworks ................................. 44

I

IDs .................................................................. 9ID-Selektoren .............................................. 15

IndexedDB ................................................... 54

Irish, Paul .................................................... 46

J

jQuery ..................................... 35, 47, 57, 63

K

Klassen ........................................................... 9

L

Layout

starres ...................................................... 10

lessframework ............................................. 45

localStorage ................................................. 54

M

Mailadressen ............................................... 22

Manifest-Datei ............................................ 59

Markup-Elemente ........................................ 8Markups ......................................................... 3Meta ................................................................ 3Metadaten .................................................... 26

Meta-Tag ........................................................ 3MIME-Typ ....................................... 3, 47, 59

Modernizr .................................................... 49

modernizr ............................................. 47, 51

MP3 ............................................................... 27

MP4 ............................................................... 26

Multimedia .................................................. 26

MyVideo ...................................................... 26

N

nav .................................................................. 8Notepad .......................................................... 5Notepad++ ..................................................... 5novalidate .................................................... 22

O

offline ........................................................... 58

OGG ............................................................. 26

P

Pixelbilder ................................................... 36

placeholder .................................................. 21

Platzhaltertext ............................................ 21

PNG-Format ............................................... 39

Pseudoelemente ......................................... 16

Q

Quicktime .................................................... 26

R

required ....................................................... 21

Retina-Display ........................................... 36

S

Scalable Vector Graphics .......................... 36

Schieberegler .............................................. 22

section ............................................................ 8

Seitenlayout .................................................. 8

Semantik ...................................................... 16

Semantisches Markup ............................... 16

Semantisches Web ..................................... 16

SEO .............................................................. 17

serverseitige Programmierung ................ 18

sessionStorage ............................................ 54

Silverlight .................................................... 26

Smartphone ................................................. 44

Social Coding ............................................. 47

Spinboxen .................................................... 21

Standard ........................................................ 3

Standard-Modus .......................................... 3

Standort ................................................ 60, 62

Standortbestimmung ................................. 60

Static Map API ........................................... 61

Suchfelder ................................................... 21

Suchmaschinen .......................................... 17

SVG .............................................................. 36

SVG-Grafiken ............................................. 47

Syntaxprüfung ........................................... 22

T

Tablet ........................................................... 44

Taco-Editor ................................................... 6

Tag-Selektoren ........................................... 15

Telefonnummern ....................................... 23

TextEdit ......................................................... 5

Theora .......................................................... 27

WEBD04 77

E Sachwortverzeichnis

U

Umfließen .................................................... 15

Umlaute ......................................................... 5UTF-8 ........................................................ 3, 5

V

Video ............................................................ 26

natives ..................................................... 26

Vimeo ........................................................... 26

Vorbis ........................................................... 27

VP8 ................................................................ 27

W

Web 2.0 ......................................................... 18

Web SQL Databases .................................. 54

Web Storage ................................................ 54

Webadressen ............................................... 22

Webanwendungen ....................................... 3WebM ........................................................... 26

Webshim ...................................................... 45

WHATWG ................................................... 65

Windows ........................................................ 5

X

XHTML ......................................................... 3XML .............................................................. 36

Y

Youtube ........................................................ 26

Z

Zahlen .......................................................... 21

Zeichensatz ................................................... 3

78 WEBD04

Date post:	09-Sep-2020
Category:	Documents
Upload:	others
View:	4 times
Download:	0 times

Webentwicklung mit HTML5. INT03A... · Eine wesentliche Eigenschaft von HTML5 ist se ine...

Documents