HTML5 & CSS3 in der Praxis - ReadingSample...Professional Series HTML5 & CSS3 in der Praxis von...

Professional Series

HTML5 & CSS3 in der Praxis

vonAlexis Goldstein, Louis Lazaris, Estelle Weyl

1. Auflage

Franzis-Verlag 2012

Verlag C.H. Beck im Internet:www.beck.de

ISBN 978 3 645 60167 2

schnell und portofrei erhältlich bei beck-shop.de DIE FACHBUCHHANDLUNG

http://www.beck-shop.de/Goldstein-Lazaris-Weyl-HTML5-CSS3-Praxis/productview.aspx?product=11041987&utm_source=pdf&utm_medium=clickthru_lp&utm_campaign=pdf_11041987&campaign=pdf/11041987

Video, Audio, Canvas – mit diesem Buch bekommen Sie eine leicht verständliche Einführung in all die neuen Möglichkeiten von HTML5 und CSS3. Von der ersten Seite anwerden die vorgestellten neuen Funktionalitätenund Design-Möglichkeiten in einer Beispiel-Website umgesetzt. Darüber hinaus erfahrenSie, was bei der Erstellung von Web-Appswichtig ist.

� HTML5 und die neuen FunktionalitätenHTML5 bietet viele Neuerungen – nutzen Sie die Möglichkeiten, um attraktive Webseiten zu entwickeln. Lernen Sie hier, wie Sie Ihre HTML-Datei sinnvoll strukturieren, Filme und Musik einbinden und moderne Formulare gestalten.

� CSS3 für Ihr individuelles Web-DesignKaum eine Website kommt mehr ohne die schicken Möglichkeiten vonCSS3 aus. Gestalten Sie Ihre Seiten individuell mit eingebundenen Fonts,mehrspaltigem Layout, Verläufen, abgerundeten Ecken, unterschiedlichenSchatteneffekten und multiplen Hintergründen.

� Canvas und SVG zur Erstellung von GrafikenDurch Canvas und SVG können Grafiken nun sehr einfach in Webseitenintegriert bzw. direkt in HTML5 codiert werden. Dieses Buch zeigt dieMöglichkeiten dieser beiden Methoden in einer Gegenüberstellung und anhand von Beispielen.

� Offline-Web-Apps für mobile GeräteWeb-Apps sind die einfachste Methode, um Apps für die unterschiedlichenmobilen Betriebssysteme zur Verfügung zu stellen. Dieses Buch zeigt,wie Sie dabei auch auf Funktionalitäten wie die Positionsbestimmungund Kartendarstellungen zurückgreifen können und die App als Offline-Web-App unabhängig von einer Internetverbindung machen.

Aus dem Inhalt:• Vorhang auf für HTML5 und CSS3!

• Ein grundlegendes HTML5-Template

• Die Seitenstruktur definieren

• HTML5-Semantik

• Formulare in HTML5

• Audio und Video: Formate, Kontrollele-mente, barrierefreie Medienwiedergabe

• CSS3-Selektoren

• Pseudoklassen

• Farbe in CSS3

• Abgerundete Ecken, Schatten, Verläufeund multiple Hintergründe

• Transformationen, Übergänge, Animationen

• Eingebettete Fonts mit @font-face

• Mehrspaltige Layouts

• Geolocation

• Offline-Web-Apps

• Web Storage

• HTML5-APIs

• Canvas, SVG und Drag and Drop

• Modernizr

• WAI-ARIA

• Microdata

Über die Autoren:Alexis Goldstein aus New York hat sich HTMLschon in den 1990er-Jahren selbst beigebracht.Sie arbeitet jetzt als Dozentin und ist Mit-Organi-satorin von Girl Develop It, einem günstigen Programmier-Einsteiger-Angebot für Frauen.

Louis Lazaris aus Toronto ist freiberuflicher Web-Entwickler und Web-Designer. Er schreibt für einige Top-Web-Design-Blogs, darunter seinen eigenen: Impressive Webs.

Estelle Weyl, eine Technikerin aus San Francisco,schreibt in mehreren technischen Blogs und istauch durch ihre Vorträge zu den Themen CSS3,HTML5, JavaScript und mobiles Web-Design bekannt.

Auf www.buch.cdDer komplette Quellcode des Buches inkl. Beispiel-Website The HTML5 Herald.

Alexis Goldstein / Louis Lazaris / Estelle Weyl

Web-Entwicklung

30,– EUR [D]ISBN 978-3-645-60167-2

Besuchen Sie unsere Website

www.franzis.de

Gol

dste

in /

Laza

ris /

Wey

lH

TML5

und

CSS

3in

der

Pra

xis

Alexis Goldstein / Louis Lazaris / Estelle WeylKnow-how

ist blau.

> Starten Sie durch in die Welt von HTML5 und CSS3

> Setzen Sie attraktive Web-Layouts individuell um

> Gestalten Sie moderne Web-Apps

HTML5 & CSS3in der Praxis


Was mit HTML5 und CSS3 alles möglich wird aufWebseiten und in Web-Apps!

60167-2 U1+U4 27.03.12 09:06 Seite 1


HTML5 und CSS3 in der Praxis

60167-2 Titelei_X 21.03.12 16:30 Seite 1

Mit 95 Abbildungen



60167-2 Titelei_X 21.03.12 16:30 Seite 3

Bibliografische Information der Deutschen Bibliothek

Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie;

detaillierte Daten sind im Internet über http://dnb.ddb.de abrufbar.

Alle Angaben in diesem Buch wurden vom Autor mit größter Sorgfalt erarbeitet bzw. zusammengestellt und unter Einschaltung wirksamer

Kontrollmaßnahmen reproduziert. Trotzdem sind Fehler nicht ganz auszuschließen. Der Verlag und der Autor sehen sich deshalb gezwungen,

darauf hinzuweisen, dass sie weder eine Garantie noch die juristische Verantwortung oder irgendeine Haftung für Folgen, die auf fehlerhafte

Angaben zurückgehen, übernehmen können. Für die Mitteilung etwaiger Fehler sind Verlag und Autor jederzeit dankbar. Internetadressen

oder Versionsnummern stellen den bei Redaktionsschluss verfügbaren Informationsstand dar. Verlag und Autor übernehmen keinerlei

Verantwortung oder Haftung für Veränderungen, die sich aus nicht von ihnen zu vertretenden Umständen ergeben. Evtl. beigefügte oder

zum Download angebotene Dateien und Informationen dienen ausschließlich der nicht gewerblichen Nutzung. Eine gewerbliche Nutzung

ist nur mit Zustimmung des Lizenzinhabers möglich.

© 2012 Franzis Verlag GmbH, 85540 Haar bei München

Authorized German translation of the English edition of HTML5 & CSS3 For The Real World (ISBN 9780980846904)

© 2011, SitePoint Pty Ltd.

This translation is published and sold by permission of O'Reilly Media, Inc.

Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Das Erstellen und

Verbreiten von Kopien auf Papier, auf Datenträgern oder im Internet, insbesondere als PDF, ist nur mit ausdrücklicher Genehmigung des

Verlags gestattet und wird widrigenfalls strafrechtlich verfolgt.

Die meisten Produktbezeichnungen von Hard- und Software sowie Firmennamen und Firmenlogos, die in diesem Werk genannt werden,

sind in der Regel gleichzeitig auch eingetragene Warenzeichen und sollten als solche betrachtet werden. Der Verlag folgt bei den Produkt-

bezeichnungen im Wesentlichen den Schreibweisen der Hersteller.

Lektorat: Anton Schmid

Satz: DTP-Satz A. Kugge, München

art & design: www.ideehoch2.de

Druck: GGP Media GmbH, Pößneck

Printed in Germany

ISBN 978-3-645-60167-2

60167-2 Titelei_X 21.03.12 16:30 Seite 4

5

Vorwort Kennen Sie Sjoerd Visscher? Ich würde mal darauf tippen, dass Sie ihn nicht kennen, doch eine in seinen Augen unwichtige Entdeckung bildet die Basis für HTML5, so wie wir es heute kennen und verwenden. Im holländischen Den Haag unternahm Herr Visscher 2002 einen Versuch, die Performance seines XSL-Outputs zu verbessern. Er wechselte von createElement-Aufrufen zum innerHTML-Element und musste feststel-len, dass alle nicht in HTML codierten Elemente nicht mehr mit CSS formatiert werden konnten.

Schneller Vorlauf zum Jahr 2008: HTML5 kommt langsam in Fahrt. Neue Elemente wurden spezifiziert, doch in der Praxis machen die Versionen 6 bis 8 des Internet Explo-rers Probleme. Die Browser haben Schwierigkeiten beim Erkennen unbekannter Elemente, wodurch sich CSS nicht auf sie auswirkt – ein großes Hindernis bei der Ein-führung von HTML5.

Knapp ein halbes Jahrzehnt nach seiner Entdeckung, gibt Sjoerd im Blog vom Sam Ruby, dem stellvertretenden Vorsitzenden der W3C HTML Working Group, folgenden Tipp zum Besten: »BTW, wenn du CSS-Regeln auf unbekannte Elemente im IE anwenden willst, musst du lediglich document.createElement(elementName) ver-wenden. Irgendwie weiß die CSS-Engine dann um die Existenz eines Elements mit diesem Namen.«

Ian Hickson, leitender Redakteur der HTML5-Spezifikationen, war genauso überrascht wie der Rest des Webs. Da er noch nie zuvor von diesem Trick gehört hatte, freute er sich besonders: »Diese kleine Information macht die Gestaltung von HTML5-Kompa-tibilitätsoptionen für IE7 viel leichter als je gedacht.«

Einen Tag später verfasste John Resig jenen Beitrag, der den Begriff »HTML5 Shiv« ins Leben rief. Danach ging es Schlag auf Schlag:

• Januar 2009: Remy Sharp erstellt das erste distributierbare Script zur Verwendung von HTML5-Elementen in IE.

• Juni 2009: Faruk Ateş integriert den HTML5 Shiv in das erste Release von Modernizr.

• Februar 2010: Ein bunt zusammengewürfeltes Team von Stars aus der JavaScript-Entwicklerszene, darunter Remy, Kangax, John-David Dalton und porneL verrin-gern gemeinsam die Dateigröße des Scripts.

• März 2010: Mathias Bynens und andere bemerken, dass sich der Shiv nicht auf gedruckte Seiten aus IE auswirkt. Es war ein trauriger Tag. Ich gebe eine inoffizielle Herausforderung an die Entwickler heraus, eine Lösung für das Problem zu finden.

6 Vorwort

• April 2010: Jonathan Neal entscheidet das Wettrennen für sich, indem er IE Print Protector (IEPP) präsentiert. IEPP verwendet den HTML5 Shiv und erweitert ihn um eine Unterstützung für gedruckte Elemente.

• April 2010: Remy ersetzt die ursprüngliche HTML5-Shiv-Lösung durch den neuen IEPP.

• Februar 2011: Alexander Farkas übernimmt den Stab und bringt das IEPP-Projekt auf den GitHub, betreibt Bugfixing, verbessert die Performance und fügt eine Test Suite hinzu.

• April 2011: IEPP v2 erscheint. Modernizr und der HTML5 Shiv erhalten den neues-ten Code, sodass Entwickler ohne Probleme HTML5-Elemente in Cross-Browser-Projekte integrieren können.

Die Geschichte des HTML5 Shiv ist nur ein Beispiel für den Anteil der Community an der fortschreitenden Entwicklung von Open Web. Nicht nur die W3C oder die Brow-serstrukturen beeinflussen unsere Arbeit im Web, sondern auch Menschen wie du und ich. Ich hoffe dass Sie dieses Buch dazu bringt, selbst einen Beitrag dazu zu leisten – denn der beste Weg zur Verbesserung der Arbeit ist das Einbringen neuer Erkenntnisse in die Community.

Die Arbeit mit HTML5 und CSS3 ist heute leichter als je zuvor – und sie macht auch noch Spaß. Dieses Buch ist gefüllt mit praktischen Informationen, die Ihnen dabei helfen, von HTML5 zu profitieren. Die Autoren – Alexis, Louis und Estelle – sind erfah-rene Web-Entwickler und vermitteln Ihnen HTML5-Know-How in Form einer realisti-schen Lernkurve.

Ich bin sicher, dass Ihnen dieses Buch gute Dienste leisten wird, und dass Sie genau so begeistert sein werden wie ich von der nächsten Generation des Web.

-

Paul Irish

jQuery Dev Relations

Chefentwickler von Modernizr und HTML5 Boilerplate

7

Einleitung Willkommen bei HTML5 & CSS3 in der Praxis. Wir freuen uns, dass Sie sich entschieden haben, mit uns auf die Reise durch die neueste und beste Front-End-Technologie zum Programmieren von Websites zu gehen.

Da Sie dieses Buch ausgewählt haben, gehen wir davon aus, dass Sie bereits über gewisse Vorkenntnisse in Sachen HTML und CSS verfügen. Womöglich sind Sie bereits ein erfahrener Profi, was Markup, Styling und Scripting angeht, und möchten sich nun über die neuen Features und Technologien informieren, die mit HTML5 und CSS3 in Ver-bindung stehen.

Das Erwerben neuen Wissens kann schwierig sein. Vielleicht haben Sie einfach nicht genug Zeit, sich durch die offiziellen Dokumentationen und Spezifikationen dieser web-basierten Sprachen zu arbeiten. Oder Sie können diese rein technisch orientierten Bücher nicht mehr sehen, die zwar gut als Nachschlagewerke funktionieren, doch kaum Praxisbeispiele bieten. Dieses Buch macht es anders: Es vermittelt Ihnen praktische Erfahrung und hilft Ihnen dabei, all die bei der täglichen Arbeit anfallenden Probleme zu lösen, wobei der Fokus auf HTML5 und CSS3 liegt.

Doch dieses Buch ist mehr als nur ein Schritt-für-Schritt-Tutorial. Zwischen den Praxis-beispielen vermitteln wir Ihnen jede Menge Theorie und technische Informationen, die zum Verständnis der Beispiele nötig sind. Dabei sind wir natürlich stets bemüht, Sie nicht mit einer Riesenmenge an coolen, neuen Informationen zu überfluten. Lassen Sie uns also beginnen!

Warum Sie dieses Buch lesen sollten

Dieses Buch richtet sich an Front-End-Entwickler und Web-Designer, die an der neues-ten Generation browserbasierter Technologien interessiert sind. Sie sollten zumindest über Grundkenntnisse in HTML und CSS verfügen, da wir nicht viel Zeit damit verbrin-gen werden, die Grundlagen von Markup und Styles zu vertiefen. Stattdessen konzent-rieren wir uns auf die mächtigen Funktionen von HTML5 und CSS3. Die letzten beiden Kapitel dieses Buchs beschäftigen sich mit einigen neuen JavaScript-APIs, die mit HTML in Verbindung gebracht werden. Diese Kapitel erfordern natürlich Grundkenntnisse in JavaScript – doch für den ganzen Rest des Buchs sind diese nicht nötig. Wenn Sie JavaScript noch nicht beherrschen, können Sie die entsprechenden Kapitel getrost überspringen oder sich später zu Gemüte führen.

8 Einleitung

Was Sie in diesem Buch finden

Dieses Buch besteht aus 11 Kapiteln und drei Anhängen. Die meisten Kapitel bauen auf-einander auf, sodass Sie am meisten davon profitieren, wenn Sie sie nacheinander lesen. Natürlich steht es Ihnen frei, zuerst ein Kapitel von großem Interesse für Sie zu lesen.

Kapitel 1: Einführung in HTML5 und CSS3

Bevor wir uns in die Praxis vertiefen, möchten wir Sie mit der Geschichte von und den Gründen für HTML5 und CSS3 vertraut machen. Darüber hinaus werfen wir einen Blick auf den Stand der Dinge in Sachen Browsersupport und führen Argumente dafür an, warum ein Großteil der neuen Technologien schon heute benutzt werden kann – solange sie mit Bedacht verwendet werden.

Kapitel 2: Markup im HTML5-Stil

In diesem Kapitel stellen wir Ihnen einige der neuen strukturellen und semantischen Elemente in HTML5 vor. An dieser Stelle beginnen wir auch mit dem Aufbau des HTML5 Herald, einer Demo-Site, an der wir gemeinsam für den Rest des Buches arbei-ten werden. Sie finden divs langweilig? Wir auch! Da trifft es sich gut, dass HTML5 jede Menge neue Optionen bietet: article, section, nav, footer, aside, und header!

Kapitel 3: HTML5-Semantik

Aufbauend auf Kapitel 2, wenden wir unseren Blick auf die neue Art, wie HTML5 Dokument-Outlines konstruiert. Anschließend lernen Sie eine Vielzahl weiterer seman-tischer Elemente kennen, die Ihnen viel Gestaltungsfreiraum beim Markup einräumen.

Kapitel 4: HTML5-Formulare

Viele nützliche und derzeit anwendbare Features in HTML5 beziehen sich auf Formu-lare. Viele Browser bieten nun eine Unterstützung für native Validierung von E-Mails und URLs, und einige Browser unterstützen gar native Datumsauswahlen, Schieberegler oder SpinnerBox-Felder. Das ist fast schon genug, um das Programmieren von Formu-laren zu einem Vergnügen zu machen! Das Kapitel deckt alles zum Thema HTML5-Formulare ab und bietet gescriptete Fallbacks für ältere Browser.

Kapitel 5: HTML5 Audio und Video

HTML5 wird oft als Nachfolger von Flash in Sachen Multimedia gehandelt – Grund dafür sind die neuen audio- und video-Elemente. Diese bieten native, scriptbare Container für Ihre Medien, ohne dass Sie auf ein Plugin eines Drittanbieters, wie Flash,

Einleitung 9

angewiesen sind. In diesem Kapitel lernen Sie alles, was Sie brauchen, um diese neuen Elemente zum Laufen zu bringen.

Kapitel 6: Einführung in CSS3

Nachdem wir HTML5 ausführlich behandelt haben, ist es an der Zeit, einen Blick auf dessen nahen Verwandten CSS3 zu werfen. Wir beginnen unsere Tour durch CSS3 mit einigen der neuen Selektoren, die Elemente auf einer Seite mit unvergleichbarer Flexibi-lität auswählen können. Weiter geht’s mit einigen neuen Wegen zur Farbdefinition in CSS3 – inklusive Transparenz. Am Ende erwarten Sie einige interessante »Quickies« – coole CSS3-Features, die Sie mit geringstem Aufwand in Ihre Seite integrieren: Text-schatten, Schlagschatten und abgerundete Ecken.

Kapitel 7: CSS3 Verläufe und multiple Hintergründe

Wann haben Sie zuletzt an einer Site gearbeitet, die weder über einen Verlauf noch ein Hintergrundbild verfügte? CSS3 bietet dafür die seit langem überfällige Unterstützung, damit Entwickler nicht mehr gezwungen sind, auf der Suche nach dem perfekten Ver-lauf bei minimaler Größe Bildbearbeitungsprogramme wie Photoshop zu bemühen. Nun können Sie lineare oder radiale Verläufe direkt in CSS definieren; ganz ohne Bilddateien. Ferner können Sie einem Element eine beliebige Zahl von Hintergrundbildern zuordnen. Es ist an der Zeit, all die überflüssigen divs aus Ihrem Code zu verbannen!

Kapitel 8: CSS3 Transformationen und Übergänge

Animationen galten lange als Domäne von JavaScript, doch CSS3 ermöglicht browser-gesteuerte Transformationen und Übergänge. Elemente lassen sich unter anderem rotie-ren, spiegeln oder verzerren. Übergänge sind eine willkommene Abwechslung zu den »digitalen«, harten Seitenwechseln, wie wir sie auf unseren Websites sehen. Am Ende dieses Kapitels werfen wir einen Blick in die Zukunft: Obwohl CSS-Keyframe-Anima-tionen bisher noch keine breite Unterstützung erfahren, sind wir sicher, dass auch Sie fasziniert davon sein werden.

Kapitel 9: Eingebettete Fonts und mehrspaltige Layouts

Bevorzugen Sie Arial oder Verdana, Georgia oder Times? Wie wäre es mit einem Font Ihrer Wahl? In diesem Kapitel erfahren Sie, wie Sie das Zeitalter der wenigen »web-sicheren« Fonts hinter sich lassen können, indem Sie beliebige Fonts in Ihre Seiten ein-betten, die vom Anwender über Stylesheets oder Bilder heruntergeladen werden. Darü-ber hinaus werfen wir einen Blick auf ein vielversprechendes neues CSS-Feature, das uns den mehrspaltigen Satz ohne zusätzliches Markup oder das verhasste float ermöglicht.

10 Einleitung

Kapitel 10: Geolocation, Offline Web Apps und Web Storage

Die neueste Browsergeneration wartet mit jeder Menge neuer JavaScript-APIs auf. Viele davon sind auf mobile Browser zugeschnitten, doch bieten sie auch Vorteile für Desk-top-Anwender. In diesem Kapitel lernen Sie drei der spannendsten APIs kennen: Geolocation, Offline Web Apps und Web Storage. Wir stellen auch einige APIs kurz vor, die über eingeschränkten Nutzen oder schlechten Support verfügen, und weisen Sie darauf hin, worauf Sie in Zukunft achten sollten.

Kapitel 11: Canvas, SVG und Drag-and-Drop

Das letzte Kapitel dieses Buchs widmen wir zwei konkurrierenden Technologien zum Zeichnen und Darstellen von Grafiken. Canvas ist eine Neuerung von HTML5 und bietet eine Pixeloberfläche sowie eine JavaScript-API zum Zeichnen von Formen. SVG gibt es schon seit Jahren, doch erst in letzter Zeit hat es den ihm zustehenden Browser-support erfahren. Zu guter Letzt stellen wir Ihnen mit Drag-and-Drop eine weitere neue JavaScript-API vor, das die native Steuerung von Interfaces durch Klickziehen erlaubt.

Anhang A: Modernizr

Eines der wichtigsten Tools am Werkzeuggürtel eines jeden HTML5-Superhelden. Modernizr ist eine praktische kleine JavaScript-Bibliothek, die Ihre Daten nach HTML- und CSS3-Support untersucht, wodurch Sie Ihre Site schrittweise modernisieren und im Bedarfsfall Fallback-Strategien anwenden können. In diesem Anhang geben wir Ihnen einen kurzen Überblick über die Verwendungsmöglichkeiten von Modernizr, den wir überall in diesem Buch einsetzen. Auf diese Weise haben Sie stets eine Referenz zur Hand, während Sie sich in den anderen Kapiteln vorwiegend auf HTML5 und CSS3 selbst konzentrieren können.

Anhang B: WAI-ARIA

WAI-ARIA ist eine eigene Spezifikation, die oftmals in einem Atemzug mit HTML5 genannt wird. WAI-ARIA bietet eine Sammlung von Tools, die es ermöglicht, Web-Anwendungen speziell auf die Bedürfnisse von behinderten Menschen zuzuschneiden. Dieses Thema könnte ein eigenes Buch füllen, doch wir wollen Ihnen diese Technologie in aller Kürze näherbringen und Ihnen verraten, wo es weiterführende Informationen dazu gibt.

Anhang C: Microdata

Bei Microdata handelt es sich um einen Bestandteil der HTML5-Spezifikation, die maschinenlesbare Labels definiert. Microdata befindet sich noch in Entwicklung, doch wir wollen Ihnen ein paar Beispiele nicht vorenthalten.

Einleitung 11

Wo Sie Hilfe finden

Der australische Verlag SitePoint, in dem die englische Originalausgabe erschienen ist, verfügt über eine aktive Community aus Web-Designern und Entwicklern, die nur darauf warten, Ihnen bei Problemen zur Seite zu stehen. Desweiteren finden Sie hier ein Fehlerverzeichnis für das Buch, das Sie nach den neuesten Updates durchsuchen können.

Die SitePoint-Foren

Die SitePoint-Foren1 sind Diskussionsorte für alle Fragen rund um die Web-Entwick-lung. Natürlich können Sie hier auch eigene Antworten posten. So funktionieren Foren – einige Leute fragen, andere antworten, und die meisten tun beides. Indem Sie Ihr Wissen teilen, helfen Sie anderen und stärken die Community. Da draußen hängen jede Menge interessierte und erfahrene Web-Designer und Entwickler herum. Die Foren sind großartig zum Lernen geeignet und bringen schnelle Antworten auf brennende Fragen.

Die Buch-Websites

Unter der URL http://sitepoint.com/books/rw1/ finden Sie eine Website zum Buch. Diese enthält die im folgenden genannten Rubriken. Die Code-Dateien finden Sie auch auf den Seiten zum Buch bei Franzis unter: www.buch.cd.

Das Code-Archiv Während Sie sich durch dieses Buch arbeiten, stoßen Sie auf einige Referenzen zum Code-Archiv. In diesem herunterladbaren ZIP finden Sie jede Zeile Code, die in diesem Buch abgedruckt ist. Wenn Sie also schnell mal einen Code ausprobieren und sich die Zeit zum Eintippen sparen möchten, laden Sie einfach die Archivdatei herunter.2

Updates und Fehlerverzeichnis Kein Buch ist perfekt, und aufmerksame Leser werden bestimmt den einen oder anderen Fehler aufspüren. Im Fehlerverzeichnis3 werden neu entdeckte programmiertechnische Fehler laufend aktualisiert.

1 http://www.sitepoint.com/forums/ 2 http://www.sitepoint.com/books/rw1/code.php 3 http://www.sitepoint.com/books/rw1/errata.php

12 Einleitung

Danksagungen

Alexis Goldstein

Besten Dank an Lisa Lang, Russ Weakley und Louis Simoneau. Euer Sinn für Details und eure beeindruckenden technischen Kenntnisse haben die Arbeit an diesem Buch für mich zum Vergnügen gemacht. Ein Dankeschön auch an meine Co-Autoren Louis und Estelle, die mich mit ihrem immensen Fachwissen, ihrer Riesenerfahrung und ihrer Fähigkeit, Bugs in neuen Browsern aufzuspüren, immer wieder begeistert haben. Ein ganz besonderer Dank gilt Estelle für ihre Aufmunterungen, für die ich überaus dankbar bin. Zu guter Letzt noch ein Dankeschön an meine Freundin Tabatha, die mehr über HTML5 und JavaScript-APIs weiß als die meisten meiner »nerdigen« Freunde. Ich danke Dir für Deine Geduld, Dein Feedback und Deine Unterstützung. Du hilfst mir dabei Dinge ernst zu nehmen – und das ist, wie alle, die mich kennen, wissen, ein wahr-haft monumentales Unterfangen. Danke, dass Du mich immer zum Lachen bringst.

Louis Lazaris

Ein Dankeschön geht an meine Frau, die meine seltsamen Arbeitszeiten während dieses Projekts klaglos ertragen hat. Danke an meine talentierten Co-Autoren Estelle und Alexis, die mir die Ehre gaben, meinen Namen unter die ihren zu setzen. Ein Danke-schön auch an unseren Experten Russ für all die technischen Eingaben während des Schreibens.

Estelle Weyl

Mein großer Dank geht an die gesamte Open Source Community. Dank »view source« konnte ich viel von Designern lernen, die mehr auf Markup als auf Plugins setzen. Ein ganz besonderes Dankeschön geht an Jen Mei Wu und Sandi Watkins, die mir zu Beginn meiner Karriere den rechten Weg wiesen. Danke auch an Dave Gregory und Laurie Voss, die mir dabei halfen, stets die richtigen Wörter zu finden. Ich danke Stephanie Sullivan für die Analyse von Code in den frühen Morgenstunden. Mein Dank geht auch an meine Entwicklerfreunde bei Opera, Mozilla und Google für das Design herausragender Browser. Diese gaben uns die Möglichkeit, mit HTML5 und CSS zu spielen und letztlich dieses Buch zu schreiben.

13

Konventionen dieses Buchs Auf den Buchseiten werden Sie auf einige unterschiedlich formatierte Textpassagen stoßen. Die Formatierung dient zur Unterscheidung verschiedener Informationsarten:

Beispiel-Code

Code wird in einer Schriftart mit fester Zeichenbreite dargestellt. Beispiel:

<h1>Ein perfekter Sommertag </h1>

<p>Es war ein schöner Tag für einen Spaziergang im Park. Die Vögel sangen

und

die Kinder waren noch in der Schule.</p>

Wenn sich der Code im Archiv des Buchs (auf www.buch.cd bzw. http://www.sitepoint. com/books/rw1/code.php) befindet, wird der Dateiname an oberster Stelle angegeben:

example.css

.footer {

background-color: #CCC;

border-top: 1px solid #333;

}

Wenn nur ein Teil der Datei wiedergegeben wird, indizieren wir dies mit dem Wort Auszug:

example.css (Auszug)

border-top: 1px solid #333;

Wenn einem bestehenden Beispiel neuer Code hinzugefügt wird, erscheint der neue Code fettgedruckt:

function animate() {

new_variable = "Hallo";

}

Wo bereits existierender Code erforderlich ist, sorgen drei Punkte als Auslassungs-zeichen dafür, dass nicht jede Codezeile wiederholt werden muss:

function animate() {

…

return new_variable;

}

14 Konventionen dieses Buchs

Einige Codezeilen sind so lang, dass sie nicht auf die Seitenbreite dieses Buchs passen und aus Layoutgründen umbrochen werden mussten. Ein ➥ indiziert so einen Zeilen-umbruch, den Sie bei der Codeeingabe ignorieren sollten:

URL.open("http://www.sitepoint.com/blogs/2007/05/28/user-style-she

➥ets-come-of-age/");

Tipps, Anmerkungen und Warnungen

Hey, Du!

Praktische Tipps helfen Ihnen weiter.

Ähm – entschuldigen Sie bitte…

Anmerkungen sind nützliche, aber nicht unbedingt erforderliche Zusatzinformationen, die mit dem eigentlichen Thema zusammenhängen.

Stellen Sie sicher …

… dass Sie sich diese wichtigen Hinweise zu Gemüte führen.

Aufgepasst!

Warnungen, die Sie auf dem richtigen Weg halten sollen.

15

Inhaltsverzeichnis

1 Vorhang auf für HTML5 und CSS3 ................................................................ 23 1.1 Was ist HTML5? .............................................................................. 23 1.2 Der Weg zu HTML5.......................................................................... 24 1.3 Welche HTML5-Spec ist denn nun die richtige?............................... 25 1.4 Warum sollte ich mich für HTML5 interessieren?............................. 26 1.5 Was ist CSS3? ................................................................................ 26 1.6 Warum sollte ich mich mit CSS3 auseinandersetzen? ..................... 27 1.7 Was meinen wir mit »in der Praxis«?............................................... 28 1.8 Der Browsermarkt .......................................................................... 29 1.9 Der wachsende mobile Markt ......................................................... 30 Und nun zur Praxis ......................................................................... 30

2 Markup im HTML5-Stil ................................................................................. 33 2.1 The HTML5 Herald .......................................................................... 33 2.2 Ein grundlegendes HTML5-Template .............................................. 34 2.2.1 Doctype ........................................................................................... 35 2.2.2 Das Element html............................................................................. 36 2.2.3 Das Element head............................................................................. 36 2.2.4 Das Spielfeld vorbereiten................................................................. 37 2.2.5 Der Rest ist Geschichte .................................................................... 39 2.3 HTML5 FAQ..................................................................................... 40 2.3.1 Warum funktionieren die Änderungen in älteren Browsern? ............. 40 2.3.2 Sollten all die Tags nicht geschlossen werden?................................ 42 2.3.3 Wie sieht es mit den Syntaxkonventionen von XHTML aus? .............. 42 2.4 Die Seitenstruktur definieren ......................................................... 43 2.4.1 Das Element header ......................................................................... 44 2.4.2 Das Element section........................................................................ 44 2.4.3 Das Element article........................................................................ 46 2.4.4 Das Element nav............................................................................... 46 2.4.5 Das Element aside ........................................................................... 48 2.4.6 Das Element footer ......................................................................... 48 2.5 Den HTML5 Herald strukturieren..................................................... 49 Zusammenfassung ......................................................................... 52

16 Inhaltsverzeichnis

3 Noch mehr HTML5-Semantik........................................................................ 53 3.1 Neue Perspektiven für Inhalte ........................................................ 53 3.2 Die Gliederung des Dokuments ...................................................... 54 3.3 Topaktuelle News........................................................................... 56 3.3.1 Das Element hgroup ......................................................................... 57 3.4 Weitere neue Elemente................................................................... 58 3.4.1 Die Elemente figure und figcaption ............................................... 59 3.4.2 Das Element mark............................................................................. 59 3.4.3 Die Elemente progress und meter .................................................... 60 3.4.4 Das Element time............................................................................. 61 3.5 Änderungen existierender Features ................................................ 62 3.5.1 »Veraltet« gibt’s nicht mehr ............................................................. 62 3.5.2 Blockelemente innerhalb Links........................................................ 63 3.5.3 Fett formatierter Text........................................................................ 63 3.5.4 Kursiv formatierter Text .................................................................... 63 3.5.5 Großer und kleiner Text.................................................................... 64 3.5.6 Ich zitiere:........................................................................................ 64 3.5.7 Beschreibungs- (nicht Definitions-) Listen........................................ 65 3.6 Weitere neue Elemente und Features.............................................. 65 3.6.1 Das Element details........................................................................ 65 3.6.2 Individuell geordnete Listen............................................................. 66 3.6.3 Abgegrenzte Stile............................................................................. 66 3.6.4 Das Attribut async für Scripte ........................................................... 67 3.7 Validieren von HTML5-Dokumenten................................................ 67 Zusammenfassung ......................................................................... 69

4 HTML5-Formulare ........................................................................................ 71 4.1 Zuverlässige Tools in Ihrem Werkzeugkasten ................................. 71 4.2 HTML5-Formularattribute ............................................................... 73 4.2.1 Das Attribut required....................................................................... 73 4.2.2 Das Attribut placeholder.................................................................. 77 4.2.3 Das Attribut pattern......................................................................... 80 4.2.4 Das Attribut disabled....................................................................... 81 4.2.5 Das Attribut readonly....................................................................... 81 4.2.6 Das Attribut multiple....................................................................... 81 4.2.7 Das Attribut form.............................................................................. 82 4.2.8 Das Attribut autocomplete ................................................................ 82 4.2.9 Das Element datalist und das Attribut list .................................... 83 4.2.10 Das Attribut autofocus ..................................................................... 83 4.3 Neue Feldtypen in HTML5 ............................................................... 84

Inhaltsverzeichnis 17

4.3.1 Suchfelder ....................................................................................... 85 4.3.2 E-Mail-Adressen............................................................................... 85 4.3.3 URLs ................................................................................................ 87 4.3.4 Telefonnummern.............................................................................. 88 4.3.5 Zahlen ............................................................................................. 88 4.3.6 Bereiche .......................................................................................... 89 4.3.7 Farben ............................................................................................. 90 4.3.8 Datum und Zeit ................................................................................ 91 4.4 Weitere Formularelemente in HTML5 .............................................. 93 4.4.1 Das Element output ......................................................................... 94 4.4.2 Das Element keygen ......................................................................... 94 4.5 Änderungen an existierenden Kontrollen und Attributen ................ 94 4.5.1 Das Element form............................................................................. 94 4.5.2 Das Element optgroup ...................................................................... 95 4.5.3 Das Element textarea ...................................................................... 95 Zusammenfassung ......................................................................... 95

5 HTML5 Audio und Video............................................................................... 97 5.1 Ein wenig Geschichte ..................................................................... 97 5.2 Der aktuelle Stand der Dinge.......................................................... 98 5.2.1 Video-Container-Formate ................................................................. 98 5.2.2 Video-Codecs................................................................................... 98 5.2.3 Audio-Codecs .................................................................................. 99 5.2.4 Welche Kombinationen funktionieren in aktuellen Browsern? .......... 99 5.3 Das Markup.................................................................................. 100 5.3.1 Native Kontrolle ermöglichen ......................................................... 100 5.3.2 Das Attribut autoplay ..................................................................... 101 5.3.3 Das Attribut loop............................................................................ 102 5.3.4 Das Attribut preload....................................................................... 102 5.3.5 Das Attribut poster ........................................................................ 103 5.3.6 Das Attribut audio .......................................................................... 103 5.3.7 Support für verschiedene Video-Formate hinzufügen ..................... 103 5.3.8 Der Befehl source........................................................................... 104 5.3.9 Wie steht es mit dem Internet Explorer 6-8? ................................... 105 5.3.10 MIME-Typen ................................................................................... 107 5.4 Kodieren von Videodateien für das Web ....................................... 108 5.5 Benutzerdefinierte Kontrollelemente anlegen .............................. 108 5.5.1 Etwas Markup und Styling für den Anfang ...................................... 109 5.5.2 Lernen Sie die Media Elements-API kennen.................................... 111 5.5.3 Das Video abspielen und pausieren............................................... 112


5.5.4 Die Tonspur des Videos aus- und einschalten ................................ 115 5.5.5 Auf das Ende des Videos reagieren ................................................ 116 5.5.6 Die Spielzeit aktualisieren ............................................................. 117 5.5.7 Weitere Funktionen der Media Elements-API .................................. 119 5.5.8 Attribute ........................................................................................ 120 5.6 Was ist mit Audio?........................................................................ 121 5.7 Barrierefreie Medienwiedergabe .................................................. 122 It’s Showtime ............................................................................... 122

6 CSS3: Eine kurze Einführung...................................................................... 125 6.1 Alte Browser an Bord holen .......................................................... 125 6.2 CSS3-Selektoren .......................................................................... 126 6.2.1 Kontext-Selektoren ........................................................................ 126 6.2.2 Attribut-Selektoren ........................................................................ 128 6.3 Pseudoklassen............................................................................. 129 6.4 Strukturelle Pseudoklassen.......................................................... 131 6.5 Pseudoelemente und Generated Content...................................... 133 6.5.1 Generated Content......................................................................... 134 6.6 Farbe in CSS3............................................................................... 135 6.6.1 RGBA ............................................................................................. 135 6.6.2 HSL und HSLA................................................................................ 136 6.6.3 Opacity .......................................................................................... 137 6.7 Das Erlernte in die Praxis umsetzen.............................................. 138 6.7.1 Abgerundete Ecken: border-radius ............................................... 140 6.7.2 Schlagschatten.............................................................................. 142 6.7.3 Innenschatten und Mehrfachschatten............................................ 144 6.7.4 Textschatten .................................................................................. 145 6.7.5 Weitere Schatten ........................................................................... 146 Weiter geht’s mit ... ...................................................................... 147

7 Verläufe und multiple Hintergründe in CSS3 .............................................. 149 7.1 Lineare Verläufe ........................................................................... 149 7.1.1 Die W3C-Syntax ............................................................................. 151 7.1.2 Die alte WebKit-Syntax................................................................... 154 7.1.3 Alles zusammenfügen.................................................................... 156 7.1.4 Lineare Verläufe mit SVG................................................................ 158 7.1.5 Lineare Verläufe mit IE-Filtern ........................................................ 159 7.1.6 Tools für Verläufe........................................................................... 160 7.2 Radiale Verläufe ........................................................................... 161 7.2.1 Die W3C-Syntax ............................................................................. 161


7.2.2 Die alte WebKit-Syntax................................................................... 163 7.2.3 Alles zusammenfügen.................................................................... 164 7.3 Sich wiederholende Verläufe........................................................ 166 7.4 Multiple Hintergrundbilder ........................................................... 167 7.5 Hintergrundgröße......................................................................... 170 Im Hintergrund ............................................................................. 171

8 Transformationen und Übergänge in CSS3................................................. 173 8.1 Transformationen......................................................................... 173 8.1.1 Verschieben................................................................................... 174 8.1.2 Skalieren ....................................................................................... 176 8.1.3 Drehen........................................................................................... 177 8.1.4 Schrägstellen................................................................................. 178 8.1.5 Den Ausgangspunkt einer Transformation ändern.......................... 179 8.1.6 Unterstützung für Internet Explorer 8 und früher ............................ 179 8.2 Übergänge ................................................................................... 180 8.2.1 transition-property ................................................................. 181 8.2.2 transition-duration ................................................................. 182 8.2.3 transition-timing-function ................................................... 183 8.2.4 transition-delay ....................................................................... 184 8.2.5 Die abgekürzte transition-Eigenschaft ......................................... 184 8.2.6 Mehrfachübergänge....................................................................... 185 8.3 Animationen................................................................................. 186 8.3.1 Keyframes...................................................................................... 187 8.3.2 Animationseigenschaften .............................................................. 188 8.3.3 Die abgekürzte animation-Eigenschaft ........................................... 190 Weiter geht’s................................................................................ 190

9 Eingebettete Fonts und mehrspaltige Layouts............................................ 193 9.1 Web-Fonts mit @font-face...................................................... 193 9.1.1 @font-face implementieren ........................................................... 194 9.1.2 Schriftart-Quellen deklarieren ........................................................ 196 9.1.3 Font Property-Deskriptoren ............................................................ 198 9.1.4 Unicode Range............................................................................... 199 9.1.5 Schriftarten zuweisen .................................................................... 199 9.1.6 Rechtliche Gesichtspunkte ............................................................ 200 9.1.7 Font-Dateien mit Font Squirrel erstellen ......................................... 201 9.1.8 Weitere Betrachtungen .................................................................. 204 9.2 Mehrspaltige Layouts mit CSS3.................................................... 205 9.2.1 Die Eigenschaft column-count ........................................................ 205


9.2.2 Die Eigenschaft column-gap............................................................ 206 9.2.3 Die Eigenschaft column-width ........................................................ 207 9.2.4 Die abgekürzte columns-Eigenschaft............................................... 209 9.2.5 Spalten und die Eigenschaft height ............................................... 209 9.2.6 Weitere Spaltenfunktionen ............................................................ 210 9.2.7 Weitere Überlegungen ................................................................... 212 9.2.8 Progressive Verbesserung.............................................................. 213 9.3 Media Queries.............................................................................. 213 9.3.1 Was sind Media Queries?............................................................... 214 9.3.2 Syntax ........................................................................................... 214 9.3.3 Flexibilität von Media Queries........................................................ 215 9.3.4 Browserunterstützung.................................................................... 215 9.3.5 Mehr erfahren ................................................................................ 216 Stilvoll leben................................................................................ 216

10 Geolocation, Offline-Web-Apps und Web Storage ...................................... 219 10.1 Geolocation.................................................................................. 220 10.1.1 Betrachtungen zur Privatsphäre ..................................................... 220 10.1.2 Methoden zur Geolocation............................................................. 221 10.1.3 Unterstützung prüfen mit Modernizr .............................................. 221 10.1.4 Die aktuelle Position ermitteln ....................................................... 222 10.1.5 Das Objekt Position ...................................................................... 223 10.1.6 Breiten- und Längengrad auslesen................................................. 224 10.1.7 Eine Karte laden............................................................................. 225 10.1.8 Ein letztes Wort zu älteren mobilen Geräten................................... 229 10.2 Offline Web Applications .............................................................. 229 10.2.1 So funktioniert der Applikations-Cache von HTML5........................ 230 10.2.2 Ihre Site für den Offline-Betrieb einrichten ..................................... 230 10.2.3 Erlaubnis für die Offline-Speicherung einholen .............................. 233 10.2.4 Offline testen................................................................................. 233 10.2.5 Den HTML5 Herald offline verfügbar machen ................................. 234 10.2.6 Speicherplatzbegrenzung für Offline Web Applications.................. 236 10.2.7 Die Fallback-Sektion ...................................................................... 236 10.2.8 Den Cache aktualisieren ................................................................ 237 10.2.9 Sind wir online? ............................................................................. 239 10.2.10 Weitere Informationen ................................................................... 240 10.3 Web Storage................................................................................. 240 10.3.1 Zwei Arten von Speicher ................................................................ 241 10.3.2 Die Datenstruktur von Web Storage................................................ 242 10.3.3 Daten speichern und auslesen....................................................... 242


10.3.4 Gespeicherte Daten konvertieren ................................................... 243 10.3.5 Die Abkürzung ............................................................................... 243 10.3.6 Elemente entfernen und Datenbestand löschen............................. 243 10.3.7 Speicherbegrenzungen .................................................................. 244 10.3.8 Sicherheitsbedenken..................................................................... 245 10.3.9 Web Storage für den HTML5 Herald................................................ 245 10.3.10 Web Storage mit dem Web Inspector analysieren........................... 248 10.4 Weitere HTML5-APIs ..................................................................... 249 10.4.1 Web Workers ................................................................................. 250 10.4.2 Web Sockets.................................................................................. 251 10.4.3 Web SQL und IndexedDB ............................................................... 251 Zurück ans Zeichenbrett............................................................... 252

11 Canvas, SVG und Drag and Drop ................................................................ 253 11.1 Canvas ......................................................................................... 253 11.1.1 Die Geschichte von Canvas ............................................................ 254 11.1.2 Ein canvas-Element erzeugen ......................................................... 254 11.1.3 Auf der Leinwand zeichnen ............................................................ 255 11.1.4 Canvas-Zeichnungen speichern ..................................................... 264 11.1.5 Ein Bild in die Leinwand hineinzeichnen ........................................ 265 11.1.6 Bilder manipulieren ....................................................................... 268 11.1.7 Videos mit Canvas manipulieren.................................................... 271 11.1.8 Text auf der Leinwand darstellen.................................................... 273 11.1.9 Probleme bei der Zugänglichkeit.................................................... 277 11.1.10 Weitere Informationen ................................................................... 277 11.2 SVG .............................................................................................. 278 11.2.1 Zeichnen mit SVG .......................................................................... 278 11.2.2 SVG-Grafiken mit Inkscape gestalten ............................................. 281 11.2.3 SVG-Filter....................................................................................... 281 11.2.4 Die Raphaël-Bibliothek verwenden ................................................ 282 11.3 Canvas versus SVG....................................................................... 285 11.4 Drag and Drop .............................................................................. 285 11.4.1 Die WAI-ARIA-Katze füttern............................................................. 286 11.4.2 Elemente ziehbar machen.............................................................. 288 11.4.3 Das Objekt DataTransfer ............................................................... 288 11.4.4 Abgelegte Elemente akzeptieren.................................................... 289 11.4.5 Weitere Informationen ................................................................... 292 Das war’s dann auch schon! ......................................................... 292


A Modernizr.................................................................................................. 295 A.1 Modernizr mit CSS verwenden...................................................... 295 A.2 Modernizr mit JavaScript verwenden ............................................ 297 A.3 Styling von HTML5-Elementen in IE8 und früher ........................... 298 A.4 Weitere Informationen.................................................................. 298

B WAI-ARIA ................................................................................................... 301 B.1 Wie WAI-ARIA die Semantik ergänzt ............................................. 301 B.2 Der aktuelle Status von WAI-ARIA ................................................. 302 B.3 Weitere Informationen.................................................................. 303

C Microdata .................................................................................................. 305 C.1 Reicht die HTML5-Semantik nicht aus?......................................... 306 C.2 Die Microdata-Syntax ................................................................... 306 C.2.1 Name/Wert-Paare verstehen .......................................................... 307 C.2.2 Itemtype verwenden ...................................................................... 307 C.3 Weitere Informationen.................................................................. 308

Stichwortverzeichnis ................................................................................. 309

23

1 Vorhang auf für HTML5 und CSS3

Dieses Kapitel illustriert, warum HTML5 und CSS3 so wichtig für Websites und Web-Apps sind und warum die Verwendung dieser Technologien von größter Bedeutung für Ihre Zukunft als Web-Professional ist.

Wenn Sie weniger an Theorie und Geschichte interessiert sind und sich direkt in den Praxiseinsatz von HTML5 und CSS3 stürzen wollen, können Sie dieses Kapitel natürlich überspringen und direkt mit Kapitel 2 loslegen.

1.1 Was ist HTML5?

Vom heutigen Standpunkt aus gesehen, hat HTML5 eine relativ turbulente Geschichte hinter sich. Sie wissen natürlich bereits, dass es sich bei HTML um die dominierende Seitenbeschreibungs- (oder Fachchinesisch »Markup«-)Sprache handelt, mit der Inhalte und Daten im World Wide Web beschrieben werden. HTML5 ist die neueste Ausbau-stufe dieser Markup-Sprache und enthält neue Funktionen, Verbesserungen bereits vor-handener Funktionen sowie scriptbasierte APIs.

Dabei handelt es sich bei HTML5 nicht um eine komplett neue Sprache – sie enthält immer noch alle gültigen Elemente von HTML 4 und XHTML 1.0. Desweiteren wurde bei der Entwicklung der Sprache auf plattformübergreifende Funktionalität, Kompatibi-lität mit älteren Browsern und großzügige Fehlerbehandlung geachtet.

Eine Zusammenfassung der Designprinzipien, die in die Entwicklung von HTML5 ein-geflossen sind, finden Sie auf der Seite »W3C HTML Design Principles«4. Das Wichtigste zuerst: HTML5 enthält Neudefinitionen vorhandener Markup-Elemente sowie neue Elemente, die Webdesignern mehr Freiheit bei der Semantik ihrer Markups verleihen. Warum Ihren Quellcode mit divs zupflastern, wenn es doch articles, sections, headers, footers und vieles mehr gibt? Der Begriff »HTML5« definiert darüber hinaus eine Reihe von anderen neuen Technologien und APIs. Darunter fallen das Zeichnen mit dem Element <canvas>, Offlinespeicher, die neuen <video>- und <audio>-Elemente, Drag-and-Drop-Funktionalität, Microdata, eingebettete Fonts und mehr. Diese und eine Vielzahl weiterer Elemente werden in diesem Buch ausführlich erläutert.

4 http://www.w3.org/TR/html-design-principles/

24 Kapitel 1: Vorhang auf für HTML5 und CSS3

Was ist eine API?

API steht für Application Programming Interface. Stellen Sie sich eine API wie eine grafische Benutzeroberfläche vor – mit dem Unterschied, dass es sich nicht um ein Interface für Menschen, sondern für Ihren Code handelt. Eine API bietet Ihrem Code eine Sammlung von »Tasten« (vordefinierte Methoden), die sozusagen gedrückt werden können, um eine bestimmte Aktion im System, einer Softwarebibliothek oder einem Browser auszulösen. API-basierte Kommandos sind ein Weg, komplexe Routinen im Hintergrund oder manchmal auch mithilfe der Software eines Drittanbieters ablaufen zu lassen. Einige der HTML5-APIs werden wir Ihnen in den nachfolgenden Kapiteln dieses Buchs näher vorstellen.

Sie brauchen sich keine Sorgen zu machen, wenn Sie über nur wenig Erfah-rung mit JavaScript oder APIs haben. Während Erfahrung mit JavaScript gene-rell nicht schadet, ist dies keine Voraussetzung für die Arbeit mit HTML5. Wir bringen Ihnen das Scripten in diesem Buch graduell näher, damit Sie sich nicht ratlos am Kopf kratzen müssen!

Desweiteren sollten Sie wissen, dass einige früher der HTML5-Spezifikation zugehörige Technologien aus der Spezifikation entnommen wurden, sodass sie rein technisch gese-hen nicht mehr unter die Kategorie »HTML5« fallen. Auf der anderen Seite waren viele andere Technologien nie Bestandteil von HTML5, haben sich aber im Lauf der Zeit in die Kategorie gemogelt. Diese Umstände haben die Verwendung möglichst umfassender Termini wie »HTML5 und verwandte Technologien« ausgelöst. Bruce Lawson hat des-halb den nicht ganz ernst gemeinten Begriff »NEWT« (New Exciting Web Technolo-gies)5 als Alternative vorgeschlagen. In vollem Bewusstsein, dass dies hitzige Streitereien auslösen kann, haben wir uns dazu entschlossen, all die besprochenen Technologien unter dem Überbegriff »HTML5« zu vereinen.

1.2 Der Weg zu HTML5

Die Webdesign-Industrie hat sich in relativ kurzer Zeit entwickelt. Noch vor zwölf Jah-ren galt eine Website mit Bildern und ansprechendem Design in Sachen Webcontent als State of the Art. Mittlerweile haben sich die Ansprüche deutlich erhöht. Ajax-basierte Web-Apps mit Scripting für die Kernfunktionalität auf Client-Seite werden langsam zum Standard. Websites bilden heutzutage eigenständige Softwareapplikationen nach, und als solche sehen sie die Entwickler auch. Darüberhinaus hat sich auch das Markup weiterentwickelt. HTML 4 hat den Weg frei gemacht für XHTML, was nichts anderes als HTML 4 mit strikter Syntax im XML-Stil ist. Momentan bilden sowohl HTML 4 als auch XHTML den Standard, doch HTML5 holt schnell auf. HTML5 bestand zu Beginn aus zwei separaten Spezifikationen: Web Forms 2.0 und Web Apps 1.0. Beide waren das

5 http://www.brucelawson.co.uk/2010/meet-newt-new-exciting-web-technologies/

1.3 Welche HTML5-Spec ist denn nun die richtige? 25

Ergebnis veränderter Anforderungen der Web-Landschaft wie schnellere, effizientere und leichter wartbare Web-Applikationen. Formulare und App-ähnliche Funktionalität sind die Herzstücke von Web-Apps, sodass auch HTML5 diesen Weg einschlug. Beide Spezifikationen wurden vereint und bilden nun das, was wir HTML5 nennen. Während HTML5 in Entwicklung war, wurde auch XHTML 2.0 vorangetrieben. Doch dieses Pro-jekt wurde zugunsten von HTML5 verworfen.

1.3 Welche HTML5-Spec ist denn nun die richtige?

Da die HTML5-Spezifikation von zwei verschiedenen Gruppen entwickelt wird (WHATWG und W3C), gibt es auch zwei unterschiedliche Versionen der Spec. Das W3C (oder World Wide Web Consortium) dürfte Ihnen bekannt sein – dieses verwaltet die originalen HTML- und CSS-Spezifikationen sowie einige weitere Web-Standards wie SVG (Scalable Vector Graphics) und WCAG (Web Content Accessibility Guidelines).

Die WHATWG (ausgeschrieben Web Hypertext Application Technology Working Group) ist dagegen weit weniger bekannt. Diese wurde im Jahre 2004 von Mitarbeitern von Apple, Mozilla und Opera nach einem W3C-Meeting gegründet, das diese unbe-friedigt verließen. Sie waren der Ansicht, dass das W3C mit dem strikten Fokus auf XHTML 2.0 die Bedürfnisse von Browserentwicklern und Anwendern ignorierte, statt an einem abwärtskompatiblem HTML-Standard zu arbeiten. Also machte sich die Gruppe selbständig und entwickelte die Spezifikationen Web Apps und Web Forms, die später in einer neuen Spec namens HTML5 aufgingen. Das W3C gab daraufhin nach und erstellte seine eigene HTML5-Spezifikation, die auf der Spec von WHATWG basierte.

Dieser Umstand führt bisweilen zu Verwirrung. Selbst in unserer Szene geschehen poli-tische Dinge, auf die wir als Designer und Entwickler keinen Einfluss haben. Allerdings tangieren uns diese Geschehnisse in Bezug auf unsere Arbeit nicht weiter. Die Version der WHATWG-Spezifikation findet sich unter http://www.whatwg.org/html/, wurde kürzlich ihrer Versionsnummer 5 beraubt und nennt sich nun schlicht »HTML«. Die Spezifikation wird als »lebendiger Standard« bezeichnet, um auszudrücken, dass sie sich in ständiger Entwicklung befindet und deshalb keiner fortschreitenden Versionsnum-mern mehr bedarf.6

Die WHATWG-Version behandelt nur auf HTML bezogene Features, inklusive der Neuerungen in HTML5. Darüber hinaus entwickelt die WHATWG weitere Spezifika-tionen, die verwandte Technologien beschreiben. Zu diesen Specs gehören auch Microdata, Canvas 2D Context, Web Workers, Web Storage und einige weitere.7

6 Siehe http://blog.whatwg.org/html-is-the-new-html5/ für eine Erklärung dieser Veränderung. 7 Details finden Sie unter http://wiki.whatwg.org/wiki/FAQ#What_are_the_various_versions_of_the_spec.3F.


Die Version von W3C finden Sie unter http://dev.w3.org/html5/spec/, während die weite-ren Spezifikationen für die verwandten Technologien unter http://dev.w3.org/html5/ zu finden sind.

Wo liegt denn nun eigentlich der Unterschied zwischen den Specs von W3C und WHATWG? In aller Kürze: Die WHATWG-Version ist ein wenig informeller und expe-rimenteller (und – was manche bestreiten mögen – mehr auf die Zukunft ausgerichtet). Doch im Großen und Ganzen sind sich beide Specs sehr ähnlich, sodass sich beide gleichermaßen zum Studium von HTML5 und den verwandten Technologien eignen.

1.4 Warum sollte ich mich für HTML5 interessieren?

Wie bereits erwähnt, besteht der Kern von HTML5 aus einer Reihe neuer semantischer Elemente sowie mehreren dazugehörigen Technologien und APIs. Ziel der Änderungen und Erweiterungen war es, Websites leichter programmierbar, benutzbar und zugäng-licher zu machen. Diese neuen semantischen Elemente machen Ihre Dokumente zusam-men mit anderen Standards wie WAI-ARIA und Microdata (auf die wir in den Anhängen B und C näher eingehen) sowohl für Menschen als auch für Maschinen zugänglicher – was sich in der allgemeinen Zugänglichkeit und bei der Suchmaschinenoptimierung bemerk-bar macht.

Beim Design der semantischen Elemente stand stets das dynamische Web im Vorder-grund, wobei der Fokus auf modularen und portablen Seiten lag. Dazu erfahren Sie mehr in den nachfolgenden Kapiteln.

Die mit HTML5 verknüpften APIs verbessern Techniken, die Web-Entwickler schon seit Jahren verwenden. Viele allgemeine Aufgaben werden erleichtert und verleihen dem Entwickler mehr Macht. Desweiteren macht Sie die Einführung von HTML5-basiertem Audio und Video unhabhängig von Drittanbieter-Software und Plugins, wenn Sie multimediale Inhalte über das Web transportieren wollen.

Das sind viele Gründe, um sich mit den neuen Features und APIs von HTML5 ausei-nanderzusetzen, was wir auf den folgenden Seiten in aller Ausführlichkeit tun werden.

1.5 Was ist CSS3?

Ein weiterer separater – jedoch nicht weniger wichtiger – Bestandteil des Webdesigns sind die Cascading Style Sheets (CSS). Wie Sie wahrscheinlich bereits wissen, handelt es sich bei CSS um eine Sprache zur Stildefinition, die bestimmt, wie ein HTML-Markup formatiert und präsentiert wird. CSS3 ist die neueste Version der CSS-Spezifikation. Der Begriff »CSS3« beschreibt nicht nur die neuen Features von CSS, sondern die dritte Stufe in der Progression der CSS-Spezifikation.8

8 http://www.w3.org/Style/CSS/current-work.en.html

1.6 Warum sollte ich mich mit CSS3 auseinandersetzen? 27

CSS3 enthält nahezu alles, was bereits in der Vorgänger-Spec CSS2.1 vertreten war. Die neuen Features helfen Entwicklern bei der Lösung einer Vielzahl von Problemen, ohne den Einsatz von nicht-semantischer Seitenbeschreibung, komplexem Scripting oder zusätzlichen Bildern zu verlangen.

Zu den neuen Funktionen in CSS3 gehören zusätzliche Auswahlelemente, Schlagschat-ten, abgerundete Ecken, verschiedene Hintergründe, Animationen, Transparenz und vieles mehr. CSS3 ist unabhängig von HTML5. In diesem Buch verwenden wir den Begriff CSS3 als Referenz auf die dritte Ausbaustufe der CSS-Spezifikation, wobei wir uns auf die Neuerungen von CSS3 konzentrieren.

1.6 Warum sollte ich mich mit CSS3 auseinandersetzen?

Später in diesem Buch präsentieren wir Ihnen Details zu den Neuerungen in CSS3. Bis es soweit ist, wollen wir Ihnen einen kleinen Vorgeschmack auf die neuen Techniken und deren essenzielle Bedeutung für Webdesigner geben. Einige Designelemente finden ihren Weg in nahezu jedes Projekt – dazu gehören Schlagschatten, Verläufe und abge-rundete Ecken. Solche gestalterischen Elemente sehen wir überall.

Bei korrektem Einsatz und in Harmonie mit dem Grundlayout der Site können solche Elemente das Seitendesign hervorragend abrunden. Natürlich denken Sie jetzt: Wir gestalten solche Designelemente bereits seit Jahren mithilfe von CSS. Doch stimmt das wirklich?

In der Vergangenheit haben Webdesigner bei der Gestaltung von Verläufen, Schatten und abgerundeten Ecken tief in die Trickkiste gegriffen. Oft waren zusätzliche HTML-Elemente dafür nötig. Wenn der HTML-Code sehr sauber sein sollte, mussten gescriptete Hacks herhalten. Im Fall von Verläufen mussten auf jeden Fall zusätzliche Bildelemente generiert und eingebunden werden. Wir haben uns an diese Workarounds gewöhnt, da es keinen anderen Weg gab, solche Elemente einzubringen.

CSS3 erlaubt die direkte Integration solcher Elemente ohne irgendwelche Tricks, was allen zugute kommt: sauberer HTML-Code, der für Menschen und Maschinen leicht les- und interpretierbar ist, deutlich leichtere Wartung, weniger Bilddateien und allge-mein sich schneller aufbauende Seiten.


Ein paar Worte zu Vendor Prefixes

Wenn Sie heute viele der neuen CSS3-Features nutzen möchten, benötigen Sie einige zusätzliche Codezeilen. Die Browserhersteller haben viele der neuen Funktionen mit eigenen Präfixes für die jeweiligen Eigenschaften implemen-tiert. Ein Beispiel: Wenn Sie ein Element in Firefox transformieren möchten, müssen Sie die Eigenschaft -moz-transform verwenden, während dieselbe Aufgabe in auf WebKit basierenden Browsern wie Safari und Google Chrome mit -webkit-transform aufgerufen wird. In einigen Fällen müssen Sie dafür bis zu vier Zeilen Code für eine einzige CSS-Eigenschaft hinzufügen. Dieser Umstand macht auf den ersten Blick einige der großen Vorteile zunichte, die durch den Verzicht auf Hacks, Bilder und nicht-semantische Beschreibung entstehen.

Doch die Browserentwickler haben diese Präfixe nicht eingeführt, um uns Entwickler zu schikanieren: Die Spezifikationen sind noch nicht final, und die frühzeitige Implementierung kann zu Bugs führen. Deshalb sollten Sie für den Moment sowohl eine Version mit den Vendor Prefixes als auch eine browser-unabhängige Version ohne vorangestellte Herstellerkürzel erstellen. Sobald die Specs finalisiert sind, werden die Präfixe mit großer Sicherheit aus dem Code verschwinden. Selbst wenn man den erhöhten Wartungsaufwand mit all den Präfixen in Betracht zieht, überwiegen die Vorteile bei der Nutzung von CSS3. Denn selbst wenn Sie für eine Designänderung mehrere Codezeilen mit den Präfixen verschiedener Hersteller editieren müssen, ist das immer noch einfa-cher als das Ändern von Grafikdateien, zusätzlichen Beschreibungszeilen und komplexen Scripts.

1.7 Was meinen wir mit »in der Praxis«?

»In der Praxis« betrachten wir unsere Arbeit an einer Website nie als abgeschlossen. Wir gestalten Webapplikationen und wir bringen sie immer wieder auf den neuesten Stand, betreiben Feintuning, suchen nach potenziellen Performance-Problemen und arbeiten kontinuierlich an Design, Layout und Inhalt.

In anderen Worten: In der Praxis verfassen wir niemals einen finalen Code, den wir nach der Eingabe als abgeschlossen betrachten und vergessen. Wir achten darauf, dass der Code zuverlässig funktioniert, leicht zu bearbeiten ist und spätere Verbesserungen nicht unmöglich macht. Das gilt natürlich nicht nur für Websites, die wir für uns selbst gestalten, sondern auch für Auftragsprojekte, die wir nach der Gestaltung und Imple-mentierung regelmäßig warten müssen. Wir sind ständig auf der Suche nach besserem Code. HTML5 und CSS3 sind deshalb ein großer Schritt in die richtige Richtung.

1.8 Der Browsermarkt 29

1.8 Der Browsermarkt

Obwohl sich HTML5 immer noch in Entwicklung befindet und darüber hinaus signifi-kante Änderungen bei der Seitenbeschreibung einführt, funktioniert es auch mit älteren Browsern, ohne Darstellungsprobleme oder gar Seitenfehler zu verursachen. Das bedeutet, dass Sie Ihre aktuellen Projekte mit gültigen HTML-4- oder XHTML-Markups problemlos als »Doctype HTML5« speichern können (mehr dazu in Kapitel 2), ohne dass sich das Erscheinungsbild der Site ändert. Die Änderungen und Neuerungen in HTML5 wurden in einer Art und Weise implementiert, die sicherstellt, dass die Abwärtskompa-tibilität zu älteren Browsern – sogar IE6! – gewährleistet ist.

Doch das betrifft lediglich die Seitenbeschreibung. Was geschieht mit all den anderen Funktionen von HTML5, CSS3 und verwandten Technologien? Laut einer aktuellen Statistik9 verwenden 47 % aller Anwender eine Version des Internet Explorer, welche die neuen Features nicht unterstützt. Aus diesem Grund haben die Entwickler an verschie-denen Lösungen gearbeitet, um solchen Anwendern die gleiche Erfahrung zu bieten wie den Usern neuerer Browser. Manchmal genügen ganz simple Fallback-Inhalte wie ein Flash Player für Browser ohne nativen Video-Support. Doch andererseits ist es auch oft vonnöten, Scripte zum Simulieren der neuen Features zu verfassen. Solche Techniken werden gemeinhin als Polyfills bezeichnet. Scripte zum Emulieren nativer Funktionen sind nicht immer der beste Weg, wenn man eine schnelle Website mit guter Perfor-mance aufbauen will, doch angesichts der spannenden neuen Funktionen kommen Sie meist nicht um diesen Zusatzaufwand herum.

Während wir Ihnen Fallback-Maßnahmen und Polyfills zum Umgehen der Browser-Inkompatibilitäten empfehlen, müssen wir Sie auch vor potenziellen Nachteilen und Fallen warnen, die damit einhergehen. Natürlich sind solche Maßnahmen nicht immer nötig: Wenn Sie zum Beispiel abgerundete Ecken unter Verwendung von CSS3 erstellen, spielt es kaum eine Rolle, dass der Anwender eines älteren Browsers die Ecken ohne Rundungen zu sehen bekommt. Die Funktionalität der Website leidet nicht darunter, und kein User wird sich über die fehlenden Rundungen beschweren.

Die Limitationen in Sachen Browserkompatibilität können sehr entmutigend wirken – doch dazu gibt es keinen Grund! Denn die gute Nachricht ist, dass mehr als 40 % der weltweiten Anwender Browser verwenden, die all die in diesem Buch vorgestellten Neuerungen unterstützen. Und diese Zahl steigt kontinuierlich mit neuen Browserver-sionen wie Internet Explorer 9. Im Lauf der Projekte in diesem Buch machen wir Sie immer wieder auf eventuell mangelhaften Support der besprochenen Features aufmerksam, sodass Sie stets darüber informiert sind, welche HTML5- und CSS3-Elemente Ihr Publikum zu sehen bekommt. Darüber hinaus lassen wir Sie wissen, wie Sie auf älteren Browsern ohne Verwendung von HTML5 und CSS3 ähnlich schöne Ergebnisse erzielen können.

9 http://gs.statcounter.com/#browser_version-ww-monthly-201011-201101-bar


1.9 Der wachsende mobile Markt

Ein weiterer triftiger Grund für die Auseinandersetzung mit HTML5 und CSS3 ist der regelrecht explodierende Markt für mobile Geräte. Eine Auswertung von StatCounter im Jahr 2009 ergab, dass gerade mal 1 % aller Web-Zugriffe von mobilen Geräten aus erfolgten.10 In weniger als zwei Jahren hat sich diese Zahl auf 4 % vervierfacht.11 Einige Statistiken weisen sogar noch höhere Zugriffsraten von unterwegs aus. Das illustriert, wie rasant der mobile Markt wächst.

4 % am Gesamtaufkommen ist fürwahr kein besonders hoher Anteil, doch die Wachs-tumsrate von 400 % in zwei Jahren lässt erahnen, wohin der Weg führt. Was bedeutet das für Entwickler, die sich mit HTML5 und CSS3 auseinandersetzen? Ganz einfach: Diese neuen Technologien werden von vielen mobilen Webbrowsern unterstützt – vom mobilen Safari auf dem iOS (iPhone und iPad) über Opera Mini und Opera Mobile bis hin zum Android-Betriebssystem. Viele dieser Browser unterstützen CSS3-Farb- und Transparenzfunktionen, die Canvas API, Web Storage, SVG, abgerundete Ecken, Offline Web Apps und vieles mehr.

Einige der neuen Technologien, die wir Ihnen in diesem Buch vorstellen, wurden sogar speziell im Hinblick auf den mobilen Einsatz entwickelt. Dazu gehören die Offline Web Apps und Web Storage, die Menschen, die viel unterwegs sind, das Leben leichter machen sollen. Mobile Geräte können nicht immer online sein, weshalb Offline-Funk-tionen von großer Bedeutung sind.

Mehr über diese Themen erfahren Sie in Kapitel 10 sowie immer wieder während unse-rer Projekte, wenn es darum geht, Websites für verschiedene Geräte und Plattformen zu gestalten.

Und nun zur Praxis Es ist unrealistisch, neue Technologien zu nutzen, die dann nur auf einer Browsergene-ration ordentlich funktionieren. In der Praxis müssen wir Anwendungen für eine Viel-zahl von Browsern und Plattformen entwickeln. Dazu gehören moderne Browser, ältere Versionen von Internet Explorer und der mobile Browser.

Nüchtern betrachtet, erinnert die Bereitstellung unterschiedlicher Instruktionen für verschiedene Browsertypen an die frühen Tage des Web mit all den Tricks und Work-arounds, um eine Site auf jedem denkbaren Browser korrekt darstellen zu können. Doch heute verwenden wir zukunftssicheren Code, sodass Sie nach dem »Ableben« der alten Browsergeneration lediglich die Fallbacks und Polyfills entfernen müssen, sodass der Code übrig bleibt, den die aktuellen Browser unterstützen. HTML5 und CSS3 sind die führenden Technologien in einer neuen, spannenden Welt des Web-Authoring. Da alle modernen Browser (inklusive IE9) starken Support für eine Vielzahl von HTML5- und

10 http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-200901-200912-bar 11 http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201011-201101-bar

1.9 Der wachsende mobile Markt 31

CSS3-Features bieten, wird das Aufbauen von leistungsstarken, leicht zu wartenden und zukunftssicheren Websites für uns Entwickler so leicht wie nie zuvor.

Während die Marktanteile der älteren Browser schrumpfen, wird Ihr Wissen um HTML5 und CSS3 immer wertvoller. Indem Sie den Umgang mit diesen Technologien schon heute lernen, bereiten Sie sich für eine goldene Zukunft im Webdesign vor. Nun genug über das »warum« – lassen Sie uns über das »wie« sprechen!

33

2 Markup im HTML5-Stil Nachdem wir Sie mit der Geschichte von HTML5 vertraut gemacht und Ihnen einige gute Gründe zum Erlernen von HTML5 präsentiert haben, ist es an der Zeit, Ihnen die Beispielsite vorzustellen, die wir Schritt für Schritt in diesem Buch aufbauen werden.

Nach einer schnellen Übersicht über die auf der Beispielsite enthaltenen Elemente beschäftigen wir uns mit den Grundlagen der HTML5-Syntax und geben Ihnen einige Praxistipps für den Code. Danach erhalten Sie Informationen zur Cross-Browser-Kom-patibilität und zur grundlegenden Seitenstruktur in HTML5. Zum Schluss lernen Sie einige spezifische HTML5-Elemente kennen und erfahren, wie Sie diese in die Site integ-rieren.

Lassen Sie uns loslegen!

2.1 The HTML5 Herald

Als Anschauungsbeispiel für dieses Buch haben wir eine Beispiel-Website gestaltet, die wir von Grund auf gestalten werden. Werfen Sie einen Blick auf das finale Ergebnis unter http://thehtml5herald.com/. Es handelt sich um eine im klassischen Stil gehaltene Zeitung namens The HTML5 Herald. Die Homepage enthält diverse Medienelemente wie Video, Bilder, Artikel und Anzeigen. Darüber hinaus bietet die Site ein Registrie-rungsformular.

Werfen Sie einen Blick auf den Quellcode und probieren Sie die Funktionalität der Site aus. In diesem Buch arbeiten wir uns Schritt für Schritt durch den Code der Site. Dabei gehen wir natürlich nicht auf jeden Aspekt der verwendeten CSS-Eigenschaften ein, die Ihnen bereits bekannt sein dürften – darunter fließende Layouts, absolute und relative Positionierung und grundlegende Schriftgestaltung. Stattdessen konzentrieren wir uns auf die neuen HTML5-Elemente, die verwendeten APIs und die neuen CSS3-Techniken zum Hinzufügen von Stilen und Interaktivität. In Bild 2.1 sehen Sie, wie die fertige Homepage aussehen wird.

34 Kapitel 2: Markup im HTML5-Stil

Bild 2.1: Die Titelseite des HTML5 Herald.

Während wir die Seite aufbauen, versuchen wir Ihnen alle neuen HTML5-Elemente, APIs und CSS3-Features zu erklären und Ihnen Tipps zur Verwendung mit auf den Weg zu geben. Viele Techniken befinden sich noch in Entwicklung, sodass wir Ihnen nicht allzu strenge Vorgaben auferlegen möchten.

2.2 Ein grundlegendes HTML5-Template

Während Sie sich mit HTML5 vertraut machen, empfiehlt es sich, eine Vorlage anzufertigen, auf der all Ihre neuen Projekte basieren. Im Fachjargon wird eine solche Vorlage als »Boilerplate« bezeichnet. Mit großer Wahrscheinlichkeit haben Sie schon bei Ihren existierenden XHTML- oder HTML-4.0-Projekten eine ähnliche Vorlage verwen-det. Wir empfehlen diese Vorgehensweise. Grundlegende HTML5-Templates finden Sie auch online in großer Zahl.12

In diesem Projekt bauen wir die Seite von Anfang an auf und erklären jeden einzelnen Schritt. Natürlich ist es unmöglich, all die neuen Features auf einer einzigen Seite zu ver-einen, weshalb wir auch einige Neuerungen kommentieren, die nicht auf der Beispielsite auftauchen. Auf diese Weise können Sie sich mit einer Vielzahl neuer Funktionen ver-

12 Einige HTML5-Templates finden Sie unter http://www.html5boilerplate.com/ und http://html5reset.org/.

2.2 Ein grundlegendes HTML5-Template 35

traut machen und selbst entscheiden, welche davon in Ihre eigenen HTML5- und CSS3-Websites einfließen. Wir beginnen mit dem Grundgerüst einer HTML5-Seite:

index.html (Auszug) <!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>The HTML5 Herald</title>

<meta name="description" content="The HTML5 Herald">

<meta name="author" content="SitePoint">

<link rel="stylesheet" href="css/styles.css?v=1.0">



</head>

<body>

<script src="js/scripts.js"></script>

</body>

</html>

Führen Sie sich den obenstehenden Code zu Gemüte. Wenn Sie mit dem Code von XHTML- oder HTML-4-Sites vertraut sind, werden Ihnen sofort die Unterschiede in einigen Bereichen auffallen.

2.2.1 Doctype

An oberster Stelle findet sich die Document Type Declaration, kurz doctype. Das ist ein simpler Weg, dem Browser – oder einem anderen Parser – mitzuteilen, um welche Art von Dokument es sich handelt. Im Fall von HTML-Dateien wird hier die spezifische HTML-Version angegeben. Die Doctype-Beschreibung sollte immer an oberster Stelle Ihres Dokuments stehen. In der Vergangenheit war die Doctype-Deklaration eine komplizierte, schwer zu merkende Sache – wie hier für XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Und für HTML 4 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

Über die Jahre hinweg generierten HTML-Tools Vorlagen mit bereits integrierten Doctype-Zeilen, oder sie boten Automatikfunktionen zum Integrieren eines solchen Headers. Und natürlich führt auch eine schnelle Websuche zu schnellen Ergebnissen über die nötigen Inhalte dieser Zeilen.


Obwohl uns dieser lange Textstring am Anfang unserer Dokumente nicht weiter störte (außer dass die Anwender einige wenige Extrabytes herunterladen mussten), tut es rich-tig gut, zu sehen wie kompakt und elegant HTML5 dieses Problem löst:

<!doctype html>

Einfach und auf den Punkt gebracht. Ihnen ist sicher aufgefallen, dass die »5« in der Deklaration nicht auftaucht. Obwohl HTML sozusagen bei »Version 5« angekommen ist, handelt es sich lediglich um eine Evolution vorangegangener HTML-Standards, und zukünftige Spezifikationen werden eine Weiterentwicklung des aktuellen Standards sein. Da Browser jeden im Web existierenden Inhalt lesen können müssen, ist die Angabe einer »Versionsnummer« obsolet.

2.2.2 Das Element html

In jedem HTML-Dokument taucht als Nächstes das Element html auf, das sich mit HTML5 nicht großartig geändert hat. In unserem Beispiel haben wir das Attribut lang mit dem Wert en hinzugefügt, um die Sprache des Dokuments auf Englisch zu spezifi-zieren. Bei Verwendung einer XHTML-basierten Syntax müssen Sie das Attribut xmlns hinzufügen. In HTML5 sind weder dieses noch das lang-Attribut zur korrekten Validie-rung und Funktionalität erforderlich.

Der bisher vorhandene Code sieht inklusive dem abschließenden </html>-Tag so aus:

<!doctype html>

<html lang="en">

</html>

2.2.3 Das Element head

Nun folgt die Sektion <head>. Die erste Zeile innerhalb der head-Sektion definiert die Zeichencodierung für das Dokument. Auch dieses wurde in HTML5 vereinfacht. So ging es bisher:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

HTML5 komprimiert die gesamte Zeile mit dem Tag <meta> auf das absolut Nötige:

<meta charset="utf-8">

In nahezu allen Fällen verwenden Sie den Wert utf-8 in Ihren Dokumenten. Eine komplette Erklärung der Zeichenkodierung würde den Rahmen dieses Buchs sprengen. Wenn Sie dennoch an den Grundlagen der Zeichencodierung interessiert sind, lesen Sie auf der W3C-Site nach.13

13 http://www.w3.org/TR/html-markup/syntax.html#character-encoding


Früh übt sich

Um sicherzustellen, dass alle Browser die Zeichencodierung korrekt interpre-tieren, muss die entsprechende Deklaration innerhalb der ersten 512 Zeichen des Dokuments erfolgen. Diese muss sich des Weiteren vor allen inhaltsbasie-renden Elementen befinden (wie dem Element <title>, das nun im Code unserer Beispielsite folgt).

Wir könnten Ihnen noch viel zu diesem Thema erzählen – aber wir wollen Sie wach halten, sodass wir Ihnen Details ersparen. Deshalb verwenden wir ganz einfach die reduzierte Deklaration und schreiten voran zum nächsten Bestandteil unseres Dokuments:

<title>The HTML5 Herald</title>

<meta name="description" content="The HTML5 Herald">

<meta name="author" content="SitePoint">

<link rel="stylesheet" href="css/styles.css?v=1.0">

Diese Zeilen unterscheiden sich kaum von der bislang verwendeten Syntax. Der Seiten-titel wird wie gewohnt deklariert, während es sich bei den <meta>-Tags um optionale Zeilen handelt, die wir als Beispiele eingebaut haben. Sie können so viele meta-Elemente integrieren, wie Sie wollen.

Das Herzstück dieser Codezeilen ist das Stylesheet, auf das im link-Element verwiesen wird. Auf den ersten Blick werden Sie hier nichts Ungewöhnliches sehen. Doch üblicherweise enthalten link-Elemente ein type-Attribut mit einem Wert text/css. Interessanterweise war dies in XHTML- oder HTML-4-Dokumenten nicht notwendig – selbst unter Verwendung des Strict-Doctypes. Die HTML5-Syntax ermutigt Sie dazu, auf das Attribut type zu verzichten, da alle Browser verlinkte Stylesheets auch ohne das Extra-Attribut erkennen.

2.2.4 Das Spielfeld vorbereiten

Das nächste Element in Ihrem Quelltext erfordert ein wenig Hintergrundwissen. HTML5 bietet eine Reihe neuer Elemente, wie zum Beispiel article und section, auf die wir später näher eingehen. Dadurch drängt sich der Gedanke auf, dass diese ein großes Problem für ältere Browser darstellen – was jedoch mitnichten der Fall ist. Die Mehrzahl der Browser interessiert sich schlicht nicht dafür, welche Tags Sie einsetzen. Wenn Sie ein HTML-Doument mit einem Tag <recipe> (oder gar <ziggy>) verwenden und Ihr CSS einige Stile mit diesem Element verknüpft, wird der Browser den ent-sprechenden Stil klaglos anwenden.

Natürlich würde sich dieses hypothetische Dokument nicht validieren lassen, doch es würde in fast allen Browsern korrekt interpretiert werden – mit Ausnahme des Internet Explorer. Vor Version 9 war es in IE nicht möglich, unbekannte Elemente mit einem Stil zu versehen. Diese mysteriösen Elemente wurden von der Rendering-Engine als »unbe-kannte Elemente« interpretiert, sodass es unmöglich war, deren Erscheinungsbild oder

Verhalten anzupassen. Das betrifft alle Elemente, die während der Entwicklungszeit dieser Browserversionen nicht definiert waren – darunter fallen natürlich auch (wie Sie sicher bereits ahnen) die neuen HTML5-Elemente.

Bei Entstehen dieses Buchs wurde Internet Explorer 9 gerade veröffentlicht, und die Userbasis war entsprechend klein, was dieses Problem verschärfte. Wir würden gerne die schönen neuen Tags verwenden, doch wenn wir keine CSS-Regeln darauf anwenden können, fallen unsere Seitendesigns auseinander.

Zum Glück gibt es eine Lösung für dieses Problem: Ein überaus simples, ursprünglich von John Resig entwickeltes JavaScript, das auf fast schon magisch anmutende Weise die neuen HTML5-Elemente für ältere Versionen von IE sichtbar macht. Wir haben dieses sogenannte »HTML5 Shiv«14 als <script>-Tag mit bedingten Kommentaren in unser Dokument eingebaut. Bedingte Kommentare, im Fachjargon Conditional Comments oder kurz CCs, sind ein proprietäres Feature von Internet Explorer. Sie geben Ihnen die Möglichkeit, spezifische Versionen dieses Browsers mit Scripten oder Stilen anzu-sprechen.15 Dieser bedingte Kommentar sagt dem Browser, dass der enthaltene Code nur bei niedrigeren Versionen des Internet Explorer interpretiert werden soll:



Anmerkung: Wenn Sie eine JavaScript-Bibliothek verwenden, die mit den neuen HTML5-Features oder APIs arbeitet, kann diese bereits das entsprechende Script zum Aktivieren der HTML5-Funktionalität enthalten, sodass Sie die Referenz auf Remy Sharps Script entfernen können. Dazu gehört unter anderem Modernizr16, eine JavaScript-Bibliothek, die aktuelle HTML- und CSS-Features erkennt. Mehr dazu im Anhang A. Modernizr enthält bereits den Code zum Aktivieren von HTML5-Elementen in älteren Versionen des IE, sodass Remys Script nicht mehr erforderlich ist.

Was ist mit Anwendern von IE 6 bis 8, die JavaScript deaktiviert haben?

Natürlich gibt es da draußen eine Gruppe von Anwendern, die nicht von Remys HTML5 Shiv profitieren können: Jene Anwender, die, aus welchem Grund auch immer, JavaScript deaktiviert haben. Uns Webdesignern wird immer wieder eingebläut, dass unsere Sites auf allen Systemen korrekt darge-stellt werden sollen – auch dann, wenn JavaScript deaktiviert ist. Da zwischen 40 % und 75 % unserer Zielgruppe den Internet Explorer verwendet, kann dies zu ernsten Problemen führen.

14 Womöglich ist ihnen die Bezeichnung »HTML5 Shim« geläufiger. Während es sich um identischen Code handelt, sind Varianten mit beiden Bezeichnungen im Umlauf. Wir beziehen uns stets auf die Originalbezeichnung »HTML5 Shiv«.

15 Weitere Informationen unter http://reference.sitepoint.com/css/conditionalcomments 16 http://www.modernizr.com/


Doch es ist nicht so schlimm wie es den Anschein hat: Verschiedene Studien haben ergeben, dass die Zahl der User mit deaktiviertem JavaScript so gering ausfällt, dass diese kein großes Problem darstellen. Laut einer Studie17 des Yahoo-Netzwerks vom Oktober 2010 verursachen User mit deaktiviertem JavaScript gerade mal 1 % des weltweiten Netzwerkverkehrs. Eine weitere Studie18 hat unter einer Milliarde Usern einen ähnlich niedrigen Anteil ermittelt. In beiden Studien kommen die meisten »JavaScript-Ausschalter« übrigens aus den USA.

Es gibt Möglichkeiten, HTML5-Elemente ohne die Verwendung von JavaScript für die Darstellung in älteren Browsern zu verwenden. Allerdings fallen diese Methoden sehr komplex aus und bringen einige Nachteile mit sich. Wenn Sie sich immer noch um die vergleichsweise geringe User-Zahl sorgen, können Sie einen hybriden Ansatz versuchen – also die Verwendung von HTML5-Elementen, bei denen das Nichtvorhandensein eines Stils keine großen Probleme aufwirft, während Sie das Grundgerüst der Site mit traditionellen Elementen wie divs aufbauen.

2.2.5 Der Rest ist Geschichte

Der Rest unserer Startvorlage enthält das übliche Element body zusammen mit seinem schließenden Tag und das abschließende </html>-Tag. Darüber hinaus haben wir eine Referenz zu einer JavaScript-Datei innerhalb eines script-Elements.

Ähnlich wie beim bereits behandelten Element link erfordert das Tag <script> nicht die Deklaration eines type-Attributs. In XHTML sollte das Tag <script> zur Validie-rung einer Seite mit externen Scripts etwa so aussehen:

<script src="js/scripts.js" type="text/javascript"></script>

Da es sich bei JavaScript um die einzige »echte« und für alle praktischen Belange ver-wendete Scriptsprache für das Web handelt, gehen alle Browser standardmäßig davon aus, dass Sie JavaScript verwenden – auch dann, wenn Sie es nicht explizit deklarieren. Deshalt ist das Attribut type in HTML5-Dokumenten unnötig:


Wir haben das script-Element ans Ende unserer Seite gestellt, womit wir in unseren Projekten die besten Erfahrungen gemacht haben. Denn wenn ein Browser auf ein Script trifft, wird er zunächst einmal das Script parsen und währenddessen die anderen Downloads und Seitenbeschreibungen pausieren. Das Ergebnis ist eine spürbar langsa-mer ladende Seite, sobald sich umfangreichere Scripts im oberen Bereich des Codes vor den anderen Inhalten befinden.

17 http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/ 18 http://visualrevenue.com/blog/2007/08/eu-and-us-javascript-disabled-index.html


Deshalb sollten die meisten Scripts am Seitenende platziert werden, sodass sie erst nach dem kompletten Ladevorgang der Seite geparst werden. Nur in Ausnahmefällen (wie dem HTML5 Shiv) muss ein Script bereits im head Ihres Dokuments auftauchen, da es ja aktiv werden soll, bevor der Browser mit dem Rendern der Seite beginnt.

2.3 HTML5 FAQ

Nach dieser schnellen Einführung in die Seitenbeschreibung per HTML5 wirbeln wo-möglich viele Fragen in Ihrem Kopf herum. Einige der brennendsten Fragen werden mit großer Wahrscheinlichkeit in den nachfolgenden FAQ beantwortet.

2.3.1 Warum funktionieren die Änderungen in älteren Browsern?

Viele Entwickler bezweifeln die volle Abwärtskompatibilität von HTML5. Um alle Zweifel auszuräumen, können wir HTML5 mit einigen der neuen CSS3-Features ver-gleichen, auf die wir in späteren Kapiteln näher eingehen werden.

Wenn ein neues CSS-Feature verfügbar wird (z. B. die Eigenschaft border-radius,die Elemente mit abgerundeten Ecken versieht), muss es auch in die Rendering-Engines der Browser integriert werden, sodass ältere Browser nicht in der Lage sind, diese zu erken-nen. Wird eine Seite in einem Browser betrachtet, der border-radius nicht unterstützt, werden die Ecken der entsprechenden Elemente spitz und nicht abgerundet dargestellt. Das betrifft auch viele weitere CSS3-Features, sodass sich die Darstellung durchaus unterscheiden kann.

Viele Entwickler gehen davon aus, dass HTML5 ganz ähnlich arbeitet. Während das auf einige der fortgeschrittenen Features und APIs zutrifft, auf die wir später näher einge-hen, verhält es sich bei den bereits vorgestellten Änderungen nicht so.

Die Syntax von HTML5 wurde stets im Hinblick auf die Interpretationsmöglichkeiten älterer Browser definiert. So sind zum Beispiel die 15 Zeichen, aus denen eine Doctype-Deklaration in HTML5 besteht, das Minimum an erforderlichen Zeichen für die Darstellung im Standards-Modus. Während XHTML eine deutlich längere Deklaration für die Zeichencodierung und ein Extra-Attribut für das Element html zur Validierung erfordert, ist dies zur korrekten Seitendarstellung in Browsern eigentlich gar nicht erfor-derlich. Das Verhalten älterer Browser wurde sorgfältig analysiert – und dabei ist herausgekommen, dass das Zeichencodieren vereinfacht und das xmlns-Attribut ent-fernt werden kann, ohne dass die Seitendarstellung in irgendeiner Weise beeinträchtigt wird.

Die vereinfachten script- und link-Elemente fallen ebenfalls in die Kategorie »Verein-fachen, ohne die Darstellung älterer Seiten zu beeinträchtigen«. Das Gleiche gilt für Boole’sche Attribute: Die Browser haben schon immer die Werte von Attributen wie checked und disabled ignoriert, sodass auf sie verzichtet werden kann. Aus diesem Grund sollten Sie – wie bereits in Kapitel 1 erwähnt – keine Angst vor der Benutzung von HTML5 haben. Die Sprache wurde unter Aspekten der Abwärtskompatibilität ent-

2.3 HTML5 FAQ 41

wickelt, um so viele existierende Inhalte wie möglich zu bewahren. Anders als bei CSS3 und JavaScript, wo Neuerungen nur dann funktionieren, wenn sie auch auf Browserseite implementiert wurden, gibt es keinen Grund, für die Verwendung der HTML5-Syntax auf eine neue Browsergeneration zu warten. Und wenn völlig neue semantische Elemente auftauchen, hilft Ihnen ein kleines JavaScript dabei, die Inhalte auch auf ande-ren Browsern korrekt darzustellen.

Was ist der Standards-Modus?

Als das standardbasierte Webdesign in den Kinderschuhen steckte, sahen sich die Browserhersteller mit einem großen Problem konfrontiert: Die Unterstüt-zung neuer Standards würde in vielen Fällen die Abwärtskompatibilität zu bereits existierenden Websites zunichte machen, die für ältere Browser konzi-piert waren. Die Hersteller benötigten einen Hinweis darauf, dass eine bestimmte Site zum Rendern nach den aktuellen Standards vorgesehen war. Den erforderlichen Hinweis gab Doctype: neue, den Standards entsprechende Seiten enthielten einen korrekt formatierten Doctype, während ältere, nicht den Standards entsprechende Seiten nicht darüber verfügten.

Mithilfe der Doctype-Informationen können Browser umschalten zwischen dem Standards-Modus (in dem das Rendering exakt nach den aktuellen Stan-dards erfolgt) und dem Quirks-Modus (in dem versucht wird, die »quirky« (engl. für sonderbaren, eigenartigen) Rendering-Fähigkeiten älterer Browser zu imitieren). Heutzutage verfügt nahezu jede Website über einen korrekten Doctype, sodass sie im Standards-Modus gerendert werden kann. Die Chancen, dass Sie auf eine Website stoßen, die im Quirks-Modus gerendert werden muss, sind verschwindend gering. Wenn ein User eine Website mit einem sehr alten Browser (z. B. IE4) anzeigen lässt, wird diese Seite entspre-chend gerendert. Genau diesen Vorgang bildet der Quirks-Modus nach; unab-hängig vom verwendeten Doctype.

Obwohl XHTML- und ältere HTML-Doctypes genaue Informationen über die Version der verwendeten Spezifikation enthalten, haben die Browser diese Infos nie ausgewertet. So lange ein scheinbar korrekter Doctype vorhanden ist, wird die Seite im Standards-Modus gerendert. Daraus folgend wurde der Doctype von HTML5 auf das Allernötigste reduziert, um den Standards-Modus in jedem Browser aktivieren zu können.

Weitere Informationen sowie eine Tabelle mit Gründen für eine Umschaltung auf den Quirks-Modus in verschiedenen Browsern finden Sie auf Wikipedia.19

Auch in der SitePoint CSS-Referenz20 können Sie sich über Standards- und Quirks-Modus informieren.

19 http://en.wikipedia.org/wiki/Quirks_mode/ 20 http://reference.sitepoint.com/css/doctypesniffing/


2.3.2 Sollten all die Tags nicht geschlossen werden?

Bei Verwendung einer XHTML-basierten Syntax müssen alle Elemente geschlossen wer-den – entweder mit einem korrespondierenden Closing Tag (z. B. </html>) oder im Falle von Void-Elementen mit einem Schrägstrich am Ende des Tags. Letztere Elemente können keine Child-Elemente enthalten – dazu gehören input, img oder link).

Sie können diese Art von Syntax natürlich auch in HTML5 verwenden, um zum Beispiel die Konsistenz zu wahren oder die Wartung zu erleichtern. Doch es ist nicht mehr nötig, zum Valdidieren von Void-Elementen einen Schrägstrich zu verwenden. Damit führt HTML5 die Reduzierung des Codes für mehr Übersicht konsequent fort.

Die meisten Elemente, die eingebettete Elemente enthalten können und aus irgendeinem Grund leer sind, müssen auch in HTML5 mit einem Closing-Tag versehen werden. Es gibt zwar Ausnahmen von dieser Regel, doch es ist einfacher, diese Regel stets anzuwen-den.

2.3.3 Wie sieht es mit den Syntaxkonventionen von XHTML aus?

Wo wir gerade beim Thema sind: Das Weglassen von Schrägstrichen ist nur einer von vielen Unterschieden zwischen HTML5 und XHTML. Genau genommen ignoriert der HTML5-Validator sämtliche Stilfehler in der Syntax und gibt nur dann Fehlermeldun-gen aus, wenn ernste Probleme beim Parsen des Dokuments entstehen würden. Für den Validator sind die folgenden fünf Zeilen identisch:

<link rel="stylesheet" href="css/styles.css" />

<link rel="stylesheet" href="css/styles.css">

<LINK REL="stylesheet" HREF="css/styles.css">

<Link Rel="stylesheet" Href="css/styles.css">

<link rel=stylesheet href=css/styles.css>

HTML5 erlaubt die Mischung von Groß- und Kleinschreibung bei Tags und Attributen sowie Attributwerte mit oder ohne Anführungszeichen (wenn diese Werte keine geschützten Zeichen oder Leerzeichen enthalten). In XHTML müssen alle Attribute über Werte verfügen – auch dann, wenn diese Werte redundant sind. Hier ein Beispiel für ein typisches Markup:

<input type="text" disabled="disabled" />

In HTML5 können Boole’sche Attribute, die also entweder »an« oder »aus« sind, ganz einfach ohne Wert definiert werden. Somit würde das obere input-Element wie folgt eingebunden werden:

<input type="text" disabled>

Sie sehen, die Anforderungen für die Validierung sind bei HTML5 viel lockerer, zumin-dest was die Syntax betrifft. Bedeutet dies, dass Sie gar keine Syntaxregeln mehr beach-ten müssen? Nein – davon raten wir sogar dringend ab. Entwickler sollten sich für einen Syntaxstil entscheiden und dabei bleiben – speziell dann, wenn Sie in einem Team arbeiten, wo es auf Lesbarkeit und einfache Wartung des Codes ankommt. Darüber

2.4 Die Seitenstruktur definieren 43

hinaus empfehlen wir (auch wenn dies keine Bedingung ist) einen minimalistischen Coding-Stil bei Einhaltung der Konsistenz. Hier einige praktische Richtlinien:

• Verwenden Sie, wie in XHTML, Kleinschreibung für alle Elemente und Attribute.

• Obwohl viele Elemente keine Closing-Tags benötigen, sollten Sie Elemente mit Inhalten dennoch schließen (z. B. <p>Text</p>).

• Obwohl Attributwerte ohne Anführungszeichen gesetzt werden können, sollten Sie diese dennoch verwenden, da es gut möglich ist, dass Sie des Öfteren Attribute ver-wenden, die Anführungszeichen erfordern (z. B. beim Deklarieren von Mehrfach-klassen, die durch Leerzeichen getrennt werden). Aus diesem Grund sollten Sie der Konsistenz wegen stets Anführungszeichen benutzen.

• Lassen Sie den Schrägstrich bei Elementen weg, die keine Inhalte enthalten (wie meta oder input).

• Vermeiden Sie redundante Boole’sche Attribute (verwenden Sie lieber <input type="checkbox" checked> als <input type="checkbox" checked="checked">).

Dabei handelt es sich lediglich um Vorschläge und nicht um allgemein gültige Regeln. Doch eine konsistente, einheitliche Syntax sorgt dafür, dass Sie stets über klaren, leicht les- und änderbaren Code verfügen.

Wenn Sie auf der anderen Seite zu viele Regeln und nutzlose Zeichen in Ihren Code ein-fließen lassen, negieren Sie die Vorteile, die HTML5 bei der Simplifizierung der Sprache bietet.

2.4 Die Seitenstruktur definieren

Nun, da die Grundstruktur unserer Site aufgebaut ist, können wir den Knochen ein wenig Fleisch hinzufügen. Später werden wir CSS3-Features und HTML5-Goodies hinzufügen, doch zunächst einmal müssen wir überlegen, welche Elemente im Grund-layout der Seite auftauchen sollen. Nachfolgend lesen Sie viel über Semantik. Dieser Begriff steht für die Art und Weise, wie ein bestimmtes HTML-Element seinen Inhalt beschreibt.

Da HTML5 eine viel größere Zahl an semantischen Elementen verwendet, müssen Sie sich mehr mit der Struktur und Bedeutung der Inhalte auseinandersetzen als dies zu Zeiten von HTML 4 oder XHTML der Fall war. Und das ist gut so! Die Bedeutung der Inhalte korrekt zu erfassen ist die Grundlage für ein gutes Markup.

Wenn Sie den Screenshot des HTML5 Herald betrachten oder die Site online besuchen, erkennen Sie folgende Struktur:

• Kopfzeile (Header) mit Logo und Titel

• Navigationsleiste

• Grundlayout (Body) mit drei Spalten


• Artikel und Anzeigen innerhalb der Spalten

• Fußzeile (Footer) mit Autoren- und Copyright-Informationen

Bevor wir entscheiden, welche Elemente sich für diese Bestandteile unserer Seite beson-ders gut eignen, sollten wir die verschiedenen Möglichkeiten bewerten. Zunächst möchten wir Ihnen einige neue semantische Elemente von HTML5 und deren Einsatzzwecke vorstellen.

2.4.1 Das Element header

Logischerweise beginnen wir mit dem Element header. Die WHATWG-Spezifikation beschreibt dieses als »eine Gruppe von einleitenden oder der Navigation dienenden Bestandteilen«21 Im Grunde genommen wandern alle Bestandteile, die Sie früher in <div id="header"> untergebracht haben, nun in den header.

Allerdings gibt es eine Vielzahl von Unterschieden zwischen header und dem alten div-Element, das oftmals für den Seitenkopf verwendet wurde. So ist der Einsatz dieses Elements nicht auf einmal pro Seite limitiert. Stattdessen können Sie die einzelnen Sek-tionen Ihres Inhalts immer wieder mit neuen header-Elementen strukturieren. Wenn wir von »Sektionen« sprechen, meinen wir nicht explizit das weiter unten beschriebene section-Element, sondern sprechen von der Strukturierung des Inhalts. Im nächsten Kapitel gehen wir näher darauf ein; für den Moment müssen Sie sich lediglich verge-genwärtigen, dass jede Sektion des Inhalts über einen eigenen Header verfügen kann.

Ein header-Element kann einleitende Inhalte oder Navigationshilfen enthalten, die sich auf die dargestellte Seite, die gesamte Website oder auch beides beziehen können.

Während ein header-Element meist zu Beginn einer Seite eingesetzt wird, ist seine Posi-tionierung nicht strikt vorgegeben. So kann der Titel eines Artikels oder Blogs auch links, rechts oder sogar unterhalb des eigentlichen Beitrags stehen – in allen Fällen ver-wenden Sie das header-Element zur Beschreibung dieses Inhalts.

2.4.2 Das Element section

Als nächstes sollten Sie sich mit dem section-Element von HTML5 vertraut machen. Die WHATWG-Spezifikation definiert section so:22 »Das section-Element repräsen-tiert eine allgemeine Sektion eines Dokuments oder einer Applikation. In diesem Kon-text versteht sich eine Sektion als thematisch zusammengehörige Gruppe von Inhalten, üblicherweise mit einer Überschrift.«

Des weiteren steht in der Definition, dass section nicht als allgemeiner Container für Stil- und Scripting-Zwecke verwendet werden soll. Doch wenn Sie section nicht als allgemeinen Container verwenden dürfen – zum Beispiel für die Gestaltung Ihres

21 http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element 22 http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element


gewünschten CSS-Layouts – für was soll das Element dann gut sein? Zumal unser alter Freund, der div, semantisch gesehen bedeutungslos ist.

Die Anwort auf diese Frage verbirgt sich in der Definition von section, genauer gesagt hinter dem Begriff »thematisch«. Genau aus diesem Grund ist das Zusammenfassen unterschiedlicher Inhalte in einer Sektion nicht erwünscht. Hier einige Beispiele für die korrekte Verwendung des section-Elements:

• Individuelle Sektionen eines Interface

• Segmente einer »Über«-Seite; z. B. einer Seite mit Hintergrundinformationen zu einem Unternehmen, die sich in Bereiche wie Geschichte, Ziele oder Team aufteilt

• Verschiedene Bestandteile einer umfangreichen Seite mit Geschäftsbedingungen

• Verschiedene Sektionen einer Online-News-Site – Artikel können mittels section in Rubriken wie Sport, Wirtschaft, Kultur, etc. aufgeteilt werden

Semantik!

Immer wenn neue semantische Elemente verfügbar werden, beginnen die Webdesigner über deren korrekten Einsatz und die eigentliche Intention der Spezifikation zu diskutieren. Vielleicht erinnern Sie sich an die Diskussionen über die Verwendung des Elements dl in früheren HTML-Spezifikationen. Natürlich bleibt auch HTML5 nicht von diesem Phänomen verschont – besonders dann, wenn die Sprache auf das section-Element kommt. Selbst Bruce Lawson, seines Zeichens eine respektierte HTML5-Autorität, hat zuge-geben, section in der Vergangenheit falsch verwendet zu haben. Der Beitrag von Bruce23 zu den begangenen Fehlern ist sehr lesenswert. Hier in aller Kürze:

• section ist allgemein, wenn also ein spezifischeres semantisches Element verfügbar ist (etwa article, aside oder nav), verwenden Sie dieses.

• section verfügt über eine semantische Bedeutung. Das heißt, dass die ent-haltenen Inhalte auf irgendeine Art zueinander in Beziehung stehen müssen. Wenn Sie nicht in der Lage sind, den gesamten Inhalt einer section mit wenigen Worten allumfassend zu beschreiben, benötigen Sie einen semantisch neutralen Container: den guten alten div.

So ist es immer mit der Semantik: Es besteht viel Interpretationsspielraum. Wenn Sie denken, ein Fallbeispiel für die Verwendung eines bestimmten Elements definieren zu können, dann kommunizieren Sie es. Für den Fall, dass Sie eine Rückmeldung darauf bekommen: Freuen Sie sich auf eine anregende Diskussion, die sowohl für Sie als auch für die Community wertvolle Informa-tionen hervorbringen kann.

23 http://html5doctor.com/the-section-element/


Behalten Sie dabei stets im Hinterkopf, dass Sie neue section-Elemente in bereits exis-tierende integrieren können. Beispiel: Auf einer News-Site sind die globalen Nachrichten in einer Sektion organisiert, die mit weiteren section-Elementen für jedes Land unter-teilt wird.

2.4.3 Das Element article

Das Element article ist dem section-Element bis auf einige Ausnahmen sehr ähnlich. Die Definition laut WHATWG:24 lautet wie folgt: »Das article-Element repräsentiert einen in sich abgeschlossenen Inhalt in einem Dokument, einer Applikation oder einer Site. Dieser Inhalt lässt sich unabhängig verbreiten oder verwenden, z. B. durch Ver-breitung in anderen Medien.«

Die Schlüsselwörter dieser Definition lauten in sich abgeschlossener Inhalt und unabhän-gig verbreiten. Während section jede Art von Inhalten enthalten kann, die thematisch zueinander passen, muss ein article ein in sich abgeschlossener Inhalt sein, der für sich allein stehen kann. Wenn Sie Zweifel über die korrekte Anwendung des Elements haben, versuchen Sie es ganz einfach mit Verbreitung: Wenn der Inhalt ohne Modifika-tionen auf einer anderen Site präsentiert oder via RSS, Twitter oder Facebook verbreitet werden kann, ist die Verwendung von article gerechtfertigt. Natürlich steht es Ihnen frei zu entscheiden, welchen Inhalt Sie als article kennzeichnen möchten, doch hier einige Vorschläge:

• Forenbeiträge

• Magazin-Beiträge oder Zeitungs-Artikel

• Blog-Artikel

• User-Kommentare

Wie schon beim section-Element können auch article-Elemente ineinander ver-schachtelt werden. Desweiteren können Sie auch sections in einen article packen und umgekehrt.

2.4.4 Das Element nav

Dieses Element ist fester Bestandteil nahezu jedes Projekts. nav repräsentiert genau das, was man von ihm erwartet: eine Gruppe von Navigationslinks. Neben dem Zusammen-fassen von unsortierten Links gibt es noch andere Anwendungsmöglichkeiten für das nav-Element. Sie können zum Beispiel das nav-Element um einen Textabsatz herumwi-ckeln, der Links für die Seitennavigation enthält.

In jedem Fall sollte dieses Element der Primärnavigation vorbehalten bleiben. So sollten Sie es beispielsweise nicht für eine Linksammlung in der Fußzeile einer Seite verwenden.

24 http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element


nav und Zugänglichkeit

Der Link »Navigation überspringen« ist ein oft und gern verwendetes Design-merkmal vieler Sites. Die Idee dahinter ist, dem User eines Screen Readers zu ermöglichen, nach einmaliger Verwendung der Hauptnavigation einer Site diese auf den folgenden Seiten zu unterbinden – denn es macht schließlich keinen Sinn, bei jedem Seitenwechsel die komplette Navigation nochmals durchlaufen zu müssen.

Das nav-Element macht diese Vorgehensweise besonders leicht: Wenn ein Screen Reader auf ein nav-Element stößt, könnte dieses dem Anwender erlau-ben, ohne zusätzlichen Link die Navigation zu überspringen. Die Spezifikation meint dazu: User Agents (z. B. Screen Reader), bei denen eine umfangreiche Navigation keinen Sinn macht, können vom Rendering der betreffenden Elemente ausgeschlossen werden. Umgekehrt tauchen die Navigationsele-mente bei anderen Parsern wie Browsern auf.

Aktuelle Screen Reader sind nicht in der Lage, nav zu erkennen. Das bedeutet jedoch nicht, dass Sie es nicht verwenden sollten. Technologien zur Verbesse-rung der Zugänglichkeit von Inhalten entwickeln sich stetig weiter, und Ihre Website wird ja noch länger bestehen. Indem Sie schon heute auf neue Standards setzen, erleichtern Sie Menschen mit Handicaps in der Zukunft den Zugang zu Ihrer Site.

Was ist ein User Agent?

Wenn Sie durch Spezifikationen blättern, stoßen Sie oftmals auf den Begriff User Agent. Dabei handelt es sich eigentlich um nichts anderes als einen Browser – eine Software, die der User dazu verwendet, auf die Inhalte einer Site zuzugreifen. Der Grund für die ungewöhnliche Bezeichnung liegt daran, dass User Agents nicht nur herkömmliche Browser sein können, sondern auch Screen Reader und sonstige Technologien, die Inhalte auf akustischem Weg oder auf eine andere Art und Weise zugänglich machen.

Sie können nav beliebig oft auf einer Seite verwenden. Wenn Ihre Seite beispielsweise über eine primäre Navigationsleiste verfügt, wäre das nav-Element ideal geeignet. Auch Links auf verschiedene Seitenbereiche (mit Seitenankern) können in ein nav-Element gepackt werden. Ähnlich wie beim Thema section ist auch bei nav eine lebhafte Diskussion über den richtigen Einsatz entbrannt – zum Beispiel warum man es nicht in einem footer verwenden sollte.

Einige Entwickler sind überzeugt davon, dass sich nav für die Paginierung oder die Kennzeichnung verstreuter Links eignet, oder für ein Suchfeld, das den primären Bestandteil einer Seite darstellt (so wie bei Google). Solche Entscheidungen liegen allein bei Ihnen als Entwickler.


Ian Hickson, der wichtigste Redakteur der WHATWG-HTML5-Spezifikation, hat direkt auf diese Frage geantwortet:

»Verwende [es] wann immer du class=nav verwendet hättest«.25

2.4.5 Das Element aside

Dieses Element repräsentiert einen Teil einer Seite, der laut Spezifikation »einen indirekten Bezug aufweist zum Inhalt rund um das aside-Element, und der als separat von diesem Inhalt betrachtet werden kann.«26

Das aside-Element kann einen Inhalt umfassen, der in Bezug steht zu:

• einem spezifischen, alleinstehenden Inhalt (so wie article oder section)

• einer gesamten Seite oder einem kompletten Dokument, wie das gewöhnlich bei einer »Sidebar« der Fall ist, die einer Seite oder Website hinzugefügt wird

Das aside-Element sollte niemals für primäre Seiteninhalte verwendet werden. Die aside-Inhalte können zwar für sich selbst stehen, doch Sie sollten dabei Teil des großen Ganzen sein.

Typische Anwendungsbeispiele für asides sind Sidebars, eine untergeordnete Linkliste oder eine Anzeige. Bedenken Sie auch, dass das aside-Element (ähnlich wie header) nicht durch seine Position auf einer Seite definiert wird. Es kann zwar »an der Seite« stehen, doch das ist nicht zwingend nötig. Die Definition bezieht sich ausschließlich auf die Art des Inhalts.

2.4.6 Das Element footer

Das letzte in diesem Kapitel vorgestellte Elemente ist footer. Wie bei header können Sie auch mehrere footer auf einer einzelnen Seite verwenden. Sie sollten footer zur Definition von Seitenbestandteilen verwenden, die Sie normalerweise mit <div id= "footer"> definieren.

Per Definition repräsentiert das footer-Element eine Fußzeile für jenen Inhalt, der dieser am nächsten ist. Dabei kann es sich um das gesamte Dokument, aber auch um einzelne Bestandteile wie section, article oder aside-Elemente handeln.

Eine Fußzeile enthält oftmals Copyright-Informationen, Autorennamen, Linklisten und ähnliche Inhalte, die in der Regel am Ende eines Inhaltssegments zu finden sind. Wie schon bei den bereits erörterten Elementen aside und header, sagt die Bezeichnung des Elements footer nichts über dessen Platzierung auf der Seite aus – ein footer kann auch über dem korrespondierenden Textabschnitt stehen. Beispiel: Die Autorenangabe

25 http://html5doctor.com/nav-element/#comment-213 26 http://dev.w3.org/html5/spec/Overview.html#the-aside-element

2.5 Den HTML5 Herald strukturieren 49

eines Blogposts kann auch über dem Beitrag statt darunter stehen, und wird dennoch als footer-Information betrachtet.

Wie wurden die neuen HTML5-Elemente ausgewählt?

Vielleicht fragen Sie sich, wie die Entwickler der Sprache auf die neuen seman-tischen Elemente gekommen sind. Theoretisch könnten doch Dutzende weitere solcher Elemente eingeführt werden – warum nicht ein comment-Element für Userkommentare oder ein ad-Element speziell für Werbeanzeigen?

Die Entwickler von HTML5 haben Millionen Websites analysiert, um jene Elemente herauszufiltern, die am häufigsten verwendet werden. Diese Elemente wurden aufgrund ihrer id und class-Attribute ausgewählt. Die Ergebnisse wurden dazu verwendet, um die Anzahl der neuen semantischen Elemente einzugrenzen.

Darüber hinaus haben die Entwickler von HTML5 auch darauf geachtet, nur Elemente hinzuzufügen, die im Einklang mit jenen Elementen stehen, die Webdesigner bereits heute verwenden. In anderen Worten: Wenn die meisten Websites ein div-Element mit der id header enthalten, macht es durchaus Sinn, ein neues Element namens header zu integrieren.

2.5 Den HTML5 Herald strukturieren

Mit dem neu erworbenen Wissen um die Grundlagen der Seitenstrukturen in HTML5 können wir uns nun an die Strukturierung unserer Beispielsite machen.

Lassen Sie uns ganz oben mit einem header-Element beginnen. Es macht Sinn, hier das Logo und den Titel der Zeitung sowie die Überschrift einzufügen. Desweiteren können wir hier ein nav-Element für die Seitennavigation hinzufügen.

Unter dem header wird der Hauptinhalt unserer Site in drei Spalten aufgeteilt. Während Sie nun verleitet sein könnten, das section-Element für diese Spalten zu verwenden, sollten Sie zunächst einmal über die Inhalte nachdenken. Wenn jede Zeile eine separate Informationssektion enthalten würde – also beispielsweise eine Sport- und eine Unter-haltungssektion – würde die Verwendung von section durchaus Sinn machen. Im Falle unserer Beispielsite ist die Unterteilung in drei Spalten aus rein kosmetischen Gründen geschehen, weshalb wir einen guten alten div für jede Spalte verwenden. Innerhalb dieser divs befinden sich Zeitungsartikel, die sich natürlich perfekt für das article-Element eignen.

Die rechte Spalte enthält jedoch Anzeigen, die wir mit dem Element aside zusammen-fassen und in einzelne article-Elemente aufteilen. Das mag seltsam erscheinen, doch erinnern Sie sich an die Definition von article? »ein in sich abgeschlossener Artikel, […] der unabhängig verwendbar ist«, heißt es in der Spezifikation. Eine Anzeige erfüllt dieses Kriterium perfekt, da sie ohne jede Modifikation auf verschiedenen Websites dar-gestellt werden kann.

Als Nächstes fügen wir ein weiteres article-Element für den letzten Artikel ein, der sich unterhalb der Anzeigen befindet. Dieser Artikel wird nicht in das aside-Element mit den drei Anzeigen integriert. Die Kriterien für aside wären nur erfüllt, wenn der article lediglich in Bezug zum Rest des Seiteninhalts steht – was er jedoch nicht tut. Der article ist Bestandteil des Hauptinhalts unserer Seite, sodass die Verwendung von aside semantisch inkorrekt wäre.

Demnach setzt sich die dritte Spalte aus zwei Elementen zusammen: einem aside und einem article. Um diese zusammenzuhalten und das Anwenden von Stilen zu erleich-tern, fassen wir sie in einem div zusammen. Wir verwenden hierbei weder section noch ein anderes semantisches Element, da dies implizieren würde, dass die Inhalte in article und aside thematisch zueinander gehörig wären, was sie aber definitiv nicht sind.

Darüber hinaus haben wir die gesamte obere Sektion unterhalb des Headers per div zusammengefasst, um das Anbringen von Stilen zu erleichtern. Zu guter Letzt haben wir einen footer an seinem angestammten Platz am Seitenende. Da die Fußzeile einige inhaltlich unterschiedliche Elemente enthält, haben wir diese in einzelne section-Elemente gepackt.

Die Autoreninfo bildet eine Sektion, wobei jeder Autor in seiner eigenen section ver-treten ist. Eine weitere section beinhaltet das Copyright und Zusatzinformationen.

Nach dem Hinzufügen der neuen Elemente sieht unser Dokument so aus:

index.html (Auszug) <body>

<header>

<nav></nav>

</header>

<div id="main">

<div id="primary">

<article></article>

…

</div>

<div id="secondary">

<article></article>

…

</div>

<div id="tertiary">

<aside>

<article></article>

…

</aside>

<article></article>

</div>

</div>

2.5 Den HTML5 Herald strukturieren 51

<footer>

<section id="authors">

<section></section>

</section>

<section id="copyright"></section>

</footer>


</body>

Bild 2.2 zeigt einen Screenshot unserer Seite mit überlagerten strukturellen Elementen.

Bild 2.2: Der HTML5 Herald mit allen strukturellen HTML5-Elementen.


Nun verfügen wir über eine Seitenstruktur, die als solide Basis für die Inhalte dienen kann.

Zusammenfassung

Damit sind wir am Ende dieses Kapitels angelangt. Sie haben die Grundlagen der Inhaltsstrukturen von HTML5 kennengelernt und haben damit begonnen, die Beispiel-seite unter Verwendung des neu erworbenen Wissens aufzubauen.

Im nächsten Kapitel analysieren wir, wie HTML5 mit unterschiedlichen Arten von Inhalten umgeht. Dann werden wir weitere neue, semantische HTML-Elemente hinzu-fügen.

309

Stichwortverzeichnis

Symbole #timeHolder 117 .htaccess-Datei 108, 198 ::after 134 ::before 134 ::selection 135 :active 129 :checked 129 :default 130 :disabled 129 :enabled 129 :focus 74, 129 :hover 129 :indeterminate 130 :in-range 130 :invalid 130 :link 129 :optional 130 :out-of-range 130 :read-only 131 :read-write 131 :required 130 :target 130 :valid 130 :visited 129 @font-face 193, 194, 203

Fehleranalysen 203 Rechtliche Gesichtspunkte 200

@font-face generator 201 @keyframes 187 @media 214 @-webkit-keyframes 187 <head> 36 <title> 37 3D-Grafik 256

A AAC 99 Abgegrenzte Stile 66 Abgerundete Ecken 140 Abwärtskompatibilität 183 accuracy 223 addEventListener 112, 114 all 214 Ältere Browser 40 altitude 223 Android 30 Angemeldet bleiben 245 animate 284 animation 190 animation-delay 189 animation-direction 189 animation-duration 188 Animationen 180, 186 animation-fill-mode 189 animation-iteration-count 189 animation-name 188 animation-play-state 190 Animationseigenschaften 188 animation-timing-function 188 Anonyme Funktionen 260 API 24 Application Programming Interface 24 Applikations-Cache 230, 234 arc 262 aria-required 75 article 37, 45, 46, 49, 54 aside 45, 48, 54 aside-Element 307 async 67 At-Regeln 194

310 Stichwortverzeichnis

Attribut-Selektoren 128 audio 97, 103 Audio 97, 121 Audio-Codecs 99 Aufgeteilter Inhalt 53 autocomplete 82 autofocus 83 Automatische Abwärtskompatibilität 183 autoplay 101 Autoren-Informationen 44 AVI 98

B background 167, 169 background-attachment 168 background-clip 168 background-color 168 background-image 167, 168 background-origin 168 background-position 168 background-repeat 168 background-size 168, 170, 171 Bedingte Kommentare 38 Bereiche 89 Beschreibung 279 Beschreibungslisten 65 big 64 Bild konvertieren 269 Bilder manipulieren 268 Bildschirmauflösung 215 Bildschirmtastatur 82 bind 288 Block 53 Blockelemente 63 Block-Level-Element 63 blockquote 56 Blog-Artikel 46 blur 74 body 39, 56 Body 43 Bogen 261, 262 Boilerplate 34

border-radius 140 box-shadow 142 break-after 210 break-before 210 break-inside 210 Breitengrad 224 Browser 29 Browser-Cache 230 buffered 121 button 84

C cache.manifest 230, 235, 237 cache.manifest-Datei 230, 232 Callback 222 canplay 119 canplaythrough 112 canvas

height 254 width 254

Canvas 253, 285 Bild hineinzeichnen 265 Browserunterstützung 253 Kontext 256 Koordinatensystem 258 Text darstellen 273 Zugänglichkeit 277

canvas.css 255, 266 Canvas-API 253 canvas-Container 255 canvas-Element 254 CanvasGradient 258, 260 CanvasPattern 258 CanvasRenderingContext2D-Objekt 256 Canvas-Zeichnungen speichern 264 Cascading Style Sheets 26 CCs 38 checkbox 84 Chrome 150 cite 54, 64 clearPosition 221 click-Event Handler 112

Stichwortverzeichnis 311

Codecs 98 color 85, 90, 185 Color stop 149 column-count 205 column-gap 206 column-rule 210 column-rule-color 210 column-rule-style 210 column-rule-width 210 columns 209 column-span 211 column-width 207 Conditional Comments 38 Content-Modelle 53 controls 100, 111 Coordinates 223, 224 coords 223 Copyright-Informationen 44 count 210 createPattern 258 CSS 26 CSS.-Verläufe 296 CSS3 26, 125, 149, 173 CSS3-Selektoren 126 CSS-Farbwert 257 cssgradients 296 CSS-Spezifikation 26 cubic-bezier() 183 currentSrc 120 currentTime 117

D Darüberfahren 180 datalist 83 dataTransfer 289 DataTransfer 288, 289 DataTransfer-Objekt 288 date 84, 91 Daten konvertieren 243 Datenbestand löschen 243 datetime 61, 84, 91 datetime-local 85, 91

Datum 91 Debugging Tools 203 Deckkraft 156 defer 67 Definition List 65 deprecated 62 desc 279 details 56, 65 determineLocation 225, 226 disabled 81 display: inline-block 175 displayOnMap 224, 226 div 44, 49 dl 65 Doctype 35, 41 Doctype-Deklaration 35 Document Object Model 133 Document Ready 226 Document Type Declaration 35 DOM 133, 277, 278 DOM-Knoten 277, 278, 285 DPI 171 Drag and Drop 253, 285, 297

Browserunterstützung 285 Drag-and-Drop-API 292 dragDrop.js 287, 288, 289, 290, 291 Drag-Funktionalität 288 draggable 286, 288 Dragonfly 203 dragover 286, 289 dragstart 288 draw 271, 277 draw() 255 drawImage 267 drawOneFrame 272, 277 Drehen 177 drop 286, 289 drop-Handler 290 dt 65 duration 121 Dynamisches Datum 93


E ease-out 183 Eingebettete Fonts 193 Eingebetteter Inhalt 54 Element

#timeHolder 117 a 63 article 46 aside 48 audio 97 b 63 big 64 details 65 div 44 dl 65 dt 65 figcaption 59 figure 59 footer 48 form 94 h1 55 h2 57 head 36 header 44 hgroup 57 html 36 i 63 input 73 keygen 94 mark 59 meter 60 nav 46 object 106 ol 66 optgroup 95 output 94 param 106 progress 60 script 39, 67 section 44 small 64 source 104

strong 63 style 66 textarea 79, 95 time 61 timeHolder 118 title 37 video 97, 271

Elemente entfernen 243 em 54, 60 email 84, 85 E-Mail-Adressen 85 Embedded Content 54 ended 117 Entwickler-Tools 203 EOT 197 error 119 Event Listener 288 Exceptions 244 Explicit Section 231 eXtensible Markup Language 278

F Fallback-Maßnahmen 29 Fallbacks 297 Fallback-Sektion 236 Farbe 135 Farben 90 Farbunterbrechung 149, 152 Farbunterbrechungen 163, 260 Fehlermeldungen 87 Felder fokussieren 73 Feldtypen 84 fieldset 56 figcaption 59 figure 56, 59 file 84 File-API 286 fill 263 fillRect 257 fillStyle 256, 258, 275 fillText 274, 276 Firebug 203


Firefox 28 Flash Player 29, 97 Flash Video 98 Flash-Fallback 106 Flash-Plugin 106 Flash-Video 106 float 205 Flow Content 53 focus 74 font 275 Font Property-Deskriptoren 198 Font Squirrel 201 Font-Dateien 201 font-family 194, 195, 199 Font-Formate 196

Browserunterstützung 196 Fonts 193 font-style 195, 198 font-variant 198 font-weight 195, 198 footer 48, 53 Footer 44 Forenbeiträge 46 form 82, 94 Formen 261 Formularattribute 73 Formulare 71 Formularelemente 71, 93 Formulierter Inhalt 54 Fortschrittsindikator 281 from 155, 187 Füllfarbe 257

G gap 210 Generated Content 133 Geolocation 219, 220, 298

Browserunterstützung 220 geolocation.js 221, 224, 226, 227, 228, 239,

283, 284 Geolocation-Abfrage

Chrome 221

Geolocation-API 220 getContext 256 getCurrentPosition 221 getElementById 227 getImageData 268, 269

Sicherheitsfehler 271 getItem 242 Gliederung 54, 56 Google Chrome 28 Google Maps 224, 227 GPS-Sensor 224 GradientType 160 Grafik drehen 284 Graustufen 269

H H.264 98 h1 54 h5o 56 halfalpha 138 halfopaque 138 handheld 214 header 44, 49, 53 Header 43 heading 224 Heading Content 54 Heading-Elemente 55 height 209 hgroup 57, 58 hidden 84 Hintergrundbild 164, 167 Hintergründe 149 Hintergrundeigenschaften 168 Hintergrundgröße 170 Hovern 180 HSL 136 HSLA 136 html 36 HTML 4 24 HTML5 23, 24

FAQ 40 HTML5 Herald 33


HTML5 Shim 38 HTML5 Shiv 38 HTML5-APIs 249 HTML5-Spec 25 HTML5-Spezifikation 25 HTML5-Validator 67

I IE8 und früher 298 IE-Filter 159, 160 image 84, 283 ImageData-Objekt 268 Image-Objekt 258 Immediate Mode 285 index.html 50, 105, 106, 110, 225, 286 Indexed Database API 251 IndexedDB 251 Indirekter Nachbar-Selektor 127 Individuell geordnete Listen 66 Inhaltstyp 107 Inkscape 281 Inline 53 Inline-Content 54 Innenschatten 144, 145 Interactive Content 54 Interaktiver Inhalt 54 Interfaces 223 Internet Explorer 9 29 iPad 30 iPhone 30 Item 307 itemprop 307 itemscope 307, 308 Itemtype 307

J JavaScript 219, 297 JavaScript deaktiviert 38 JavaScript-Bibliothek 295 jQuery 78, 288, 289, 290 jQuery-Bereitschaftscheck 254

K Karte 225 Keyframes 186, 187 keygen 93, 94 kind 122 Kind-Selektor 126 Komma 82 Kompatibilitätsmodus 197 Kontext-Selektoren 126 Kopfzeile 43 Kreis zeichnen 261, 278 Kursiv 63

L label 122 Labels 305 Längengrad 224 latitude 223 Layout 193, 205 Leerzeichen 82 Lineare Verläufe 149

IE-Filter 159 SVG 158

Linien 261 link 53 Lint Tools 69 list 83 loadeddata 120 loadedmetadata 120 Local Storage 241 localStorage 242 localStorage[key] 243 longitude 223 loop 102

M Magazin-Beiträge 46 mark 59 Markup 33 Markup-Sprache 23 media 214 Media Elements-API 111, 119


Media Queries 213 Browserunterstützung 215

media-Typ 214 Medientyp 214 Medienwiedergabe

Barrierefreie 122 Mehrfachschatten 144 Mehrfachübergänge 185 mehrspaltige Layouts 193 Mehrspaltige Layouts 193, 205 meta 53 Metadata Content 53 Metadaten-Inhalt 53 meter 93 Microdata 305 Microdata-Syntax 306 MIME-Typen 107 Mobile Geräte 30 Modernizr 38, 79, 125, 221, 295 month 84, 91 MPEG-4 98 multiple 81 Multiple Hintergrundbilder 167 muted 116

N Nachbar-Selektor 126 Nachfahren-Selektor 126 Name/Wert-Paare 306, 307 nav 45, 46, 47, 54 navigation 302 Navigationsleiste 43 navigator.onLine 239 Neigen 178 Nightly Builds 150 number 85, 88

O object 106 Offline Web Applications 229

Browserunterstützung 229 Speicherplatzbegrenzung 236

offline.html 237 offline.html-Datei 236 Offline-Speicherung

Erlaubnis 233 Offline-Web-Apps 219, 229 Ogg 98 onload-Event Handler 259 opacity 137 Opacity 137 OpenClipArt 286 Opera Mini 30 Opera Mobile 30 optgroup 95 originalEvent 289 OTF 196 output 93, 94

P p 53 param 106 parseInt 243 password 84 pattern 80 pause 114 pause() 113 paused 113 Pfade 261 Phrasing Content 54 placeholder 77, 78 play 271 play() 113, 114 playbackRate 120 playing 114, 120 Polyfilling 78 Polyfills 29 Position 223, 224 position: relative 174 Positionsbestimmung 220 poster 103 preload 102 preventDefault 290 print 214


progress 93 projection 214 Pseudoelemente 133 Pseudoklasse

link 129 visited 129 hover 129 active 129 focus 129 enabled 129 disabled 129 checked 129 indeterminate 130 target 130 default 130 valid 130 invalid 130 in-range 130 out-of-range 130 required 130 optional 130 read-only 131 read-write 131

Pseudoklassen 129 pubdate 61 Punktdichte 171 putImageData 270

Q Quirks-Modus 41

R Radiale Verläufe 161 radio 84 range 85, 89 Raphaël-Bibliothek 282 Raphaël-Container 283 Raphaël-Container-Objekt 283 Raphaël-Methode 283 readonly 81 readyState 121 Rechteck 257, 279

rect-Tag 279 register.html 71, 74, 77, 78 Reguläre Ausdrücke 80 Remember me on this computer 245 rememberMe.js 245, 246, 247, 248 repeating-linear-gradient 166 repeating-radial-gradient 166 required 73 reset 84 Retained Mode 285 reversed 66 rgb 135 RGB 135 RGBA 135, 257 RGB-Wert 257 roles 301 Rollen 301 rotate() 177 Rückwärts-Selektoren 127

S Safari 28, 30, 150 Save Video As… 114 Scalable Vector Graphics 25, 196, 278 scale(x,y) 176 Schatten 146 Schlagschatten 142 Schlüssel/Wert-Paar 242 Schlüsselbilder 186 Schrägstellen 178 Schriftarten 193, 199 Schriftartenkatalog 203 Schriftart-Quellen 196 scoped 66 screen 214 Screen Reader 277, 301 script 39, 53, 67 search 84, 85 secondsToTime() 117 section 37, 44, 45, 49, 54 Sectioning Roots 56 seeked 120


seeking 120 Seitenbeschreibungssprache 23 Seitenstruktur 43, 49 select 83 Selektoren 126 Semantik 45, 53 sensor-Parameter 224 Session Storage 241, 242 setItem 242 setTimeout 273 Skalieren 176 skew(x,y) 178 small 64 source 104, 195 Spaltenanzahl 205 Spaltenfunktionen 210 Spaltenübergreifende Elemente 211 Spaltenumbrüche 210 speed 224 Speicherbegrenzungen 244 Spielzeit 117 src 104, 120, 196 src-Eigenschaft 258 srclang 122 Standards-Modus 41 Storage 242 stroke 263 Stroke 256 strokeRect 257 strokeStyle 256 strong 54, 60, 63 Strukturelle Pseudoklassen 131 style 53, 66 styles.css 125, 127, 136, 139, 145, 147 submit 84 Subset 201 Suchfelder 85 SVG 25, 158, 196, 197, 253, 278, 285

Browserunterstützung 278 SVG-Filter 281

T tabindex 122 tagline 58 Tags schließen 42 td 56 tel 84, 88 Telefonnummern 88 Template 34 text 84 textAlign 275 textarea 79, 95 Textschatten 145 text-shadow 145 Theora 98 time 61, 84, 91 timeHolder 118 timestamp 223 timeupdate 117, 118 title 53 to 187 toDataURL 264 Tonspur 115 track 122 transform 173 Transformationen 173

Ausgangspunkt 179 transform-origin 176, 179 transition 184 transition-delay 184, 185 transition-duration 182, 185 transition-function 185 transition-property 181, 185 transition-timing-function 183 translate(x,y) 174 translatex 174 translatey 174 Transparent 275 TrueTypeFont 196 try/catch-Block 274 try/catch-Blöcke 244


TTF 196, 197 type 104 Typografie 193

U Übergänge 173, 180 Überschriften-Inhalt 54 Überschriftenstufen 54 Umrissfarbe 256 Unicode Range 199 Unicode-Bereich 199 unicode-range 199 url 84, 87 URLs 87 User Agent 47 User-Kommentare 46

V Validieren 67 value 78 Vendor Prefixes 28 veraltet 62 Verläufe 149

Sich wiederholende 166 Tools 160

Verschiebe-Funktionen 174 Verschieben 174 Verzögerungswerte 184 Video 97

Browserunterstützung 99 Kodieren 108 Kontrollelemente 108 Lizenzfragen 99 Tonspur 115

Video-API 111 Video-Codecs 98 Video-Container-Formate 98 videoControls.js 111, 112, 113, 115, 116,

117, 118 Video-Formate 103 videoHeight 121 Videos manipulieren 271

videoToBW.js 271, 272, 273, 274, 275, 276, 277

videoWidth 121 visibility 284 volumechange 116 Vorbis 99 Vorlage 34 VP8 98

W W3C 25 W3C HTML Design Principles 23 WAI-ARIA 301 WAI-ARIA-Katze 286 watchPosition 221 WCAG 25 Web Accessibility Initiative-Accessible Rich

Internet Applications 301 Web Apps 25 Web Content Accessibility Guidelines 25 Web Forms 25 Web Hypertext Application Technology

Working Group 25 Web Inspector 203, 248 Web Open Font Format 196 Web Sockets 251

Browserunterstützung 251 Web SQL 251

Browserunterstützung 251 Web Storage 219, 240

Browserunterstützung 240 Datenstruktur 242 Sicherheitsbedenken 245

Web Workers 250 Browserunterstützung 250

Web-Apps 219 Web-Font 201 Web-Fonts 193 WebGL 256 WebKit 28, 87, 145, 150, 154, 163, 175 -webkit-column-span 211 -webkitgradient 155


-webkit-gradient 163 -webkit-linear-gradient 155 WebM 98 Web-Storage-API 240 week 84, 91 WHATWG 25 Whitelist-Sektion 231 width 210 WOFF 196 World Wide Web Consortium 25 wrap 95

X XHTML 24, 67

Syntaxkonventionen 42 XHTML 2.0 25 XML 278

Z Zahlen 88 Zeichen-Subset 201 Zeit 91 Zeitungs-Artikel 46 z-index 167

Video, Audio, Canvas – mit diesem Buch bekommen Sie eine leicht verständliche Einführung in all die neuen Möglichkeiten von HTML5 und CSS3. Von der ersten Seite anwerden die vorgestellten neuen Funktionalitätenund Design-Möglichkeiten in einer Beispiel-Website umgesetzt. Darüber hinaus erfahrenSie, was bei der Erstellung von Web-Appswichtig ist.

� HTML5 und die neuen FunktionalitätenHTML5 bietet viele Neuerungen – nutzen Sie die Möglichkeiten, um attraktive Webseiten zu entwickeln. Lernen Sie hier, wie Sie Ihre HTML-Datei sinnvoll strukturieren, Filme und Musik einbinden und moderne Formulare gestalten.

� CSS3 für Ihr individuelles Web-DesignKaum eine Website kommt mehr ohne die schicken Möglichkeiten vonCSS3 aus. Gestalten Sie Ihre Seiten individuell mit eingebundenen Fonts,mehrspaltigem Layout, Verläufen, abgerundeten Ecken, unterschiedlichenSchatteneffekten und multiplen Hintergründen.

� Canvas und SVG zur Erstellung von GrafikenDurch Canvas und SVG können Grafiken nun sehr einfach in Webseitenintegriert bzw. direkt in HTML5 codiert werden. Dieses Buch zeigt dieMöglichkeiten dieser beiden Methoden in einer Gegenüberstellung und anhand von Beispielen.

� Offline-Web-Apps für mobile GeräteWeb-Apps sind die einfachste Methode, um Apps für die unterschiedlichenmobilen Betriebssysteme zur Verfügung zu stellen. Dieses Buch zeigt,wie Sie dabei auch auf Funktionalitäten wie die Positionsbestimmungund Kartendarstellungen zurückgreifen können und die App als Offline-Web-App unabhängig von einer Internetverbindung machen.

Aus dem Inhalt:• Vorhang auf für HTML5 und CSS3!

• Ein grundlegendes HTML5-Template

• Die Seitenstruktur definieren

• HTML5-Semantik

• Formulare in HTML5

• Audio und Video: Formate, Kontrollele-mente, barrierefreie Medienwiedergabe

• CSS3-Selektoren

• Pseudoklassen

• Farbe in CSS3

• Abgerundete Ecken, Schatten, Verläufeund multiple Hintergründe

• Transformationen, Übergänge, Animationen

• Eingebettete Fonts mit @font-face

• Mehrspaltige Layouts

• Geolocation

• Offline-Web-Apps

• Web Storage

• HTML5-APIs

• Canvas, SVG und Drag and Drop

• Modernizr

• WAI-ARIA

• Microdata

Über die Autoren:Alexis Goldstein aus New York hat sich HTMLschon in den 1990er-Jahren selbst beigebracht.Sie arbeitet jetzt als Dozentin und ist Mit-Organi-satorin von Girl Develop It, einem günstigen Programmier-Einsteiger-Angebot für Frauen.

Louis Lazaris aus Toronto ist freiberuflicher Web-Entwickler und Web-Designer. Er schreibt für einige Top-Web-Design-Blogs, darunter seinen eigenen: Impressive Webs.

Estelle Weyl, eine Technikerin aus San Francisco,schreibt in mehreren technischen Blogs und istauch durch ihre Vorträge zu den Themen CSS3,HTML5, JavaScript und mobiles Web-Design bekannt.

Auf www.buch.cdDer komplette Quellcode des Buches inkl. Beispiel-Website The HTML5 Herald.


Web-Entwicklung

30,– EUR [D]ISBN 978-3-645-60167-2

Besuchen Sie unsere Website

www.franzis.de

Gol

dste

in /

Laza

ris /

Wey

lH

TML5

und

CSS

3in

der

Pra

xis

Alexis Goldstein / Louis Lazaris / Estelle WeylKnow-how

ist blau.

> Starten Sie durch in die Welt von HTML5 und CSS3

> Setzen Sie attraktive Web-Layouts individuell um

> Gestalten Sie moderne Web-Apps



Was mit HTML5 und CSS3 alles möglich wird aufWebseiten und in Web-Apps!

60167-2 U1+U4 27.03.12 09:06 Seite 1

HTML5 & CSS3 in der Praxis - ReadingSample...Professional Series HTML5 & CSS3 in der Praxis von...

Documents

Transcript of HTML5 & CSS3 in der Praxis - ReadingSample...Professional Series HTML5 & CSS3 in der Praxis von...