Copyright © 2011 O’Reilly Verlag GmbH & Co. KG
Die Informationen in diesem Buch wurden mit größter Sorgfalt erarbeitet. Dennoch können Fehler nicht vollständig ausgeschlossen werden. Verlag, Autoren und Übersetzer übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene Fehler und deren Folgen.
Alle Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt und sind möglicherweise eingetragene Warenzeichen. Der Verlag richtet sich im Wesentlichen nach den Schreibweisen der Hersteller. Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
Kommentare und Fragen können Sie gerne an uns richten:
Copyright der deutschen Ausgabe:
1. Auflage 2011
Die Originalausgabe erschien 2011 unter dem Titel
HTML5 and CSS3 bei Pragmatic Bookshelf, Inc.
Bibliografische Information der Deutschen Nationalbibliothek
Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der
Deutschen Nationalbibliografie; detaillierte bibliografische Daten
sind im Internet über http://dnb.d-nb.de abrufbar.
Übersetzung und deutsche Bearbeitung: Stefan Fröhlich, Berlin
Lektorat: Inken Kiupel, Köln
Korrektorat: Friederike Daenecke, Zülpich
DTP: Andreas Franke, SatzWERK, Siegen; www.satz-werk.com
Produktion: Karin Driesen, Köln
Belichtung, Druck und buchbinderische Verarbeitung:
Druckerei Kösel, Krugzell; www.koeselbuch.de
Dieses Buch ist auf 100% chlorfrei gebleichtem Papier gedruckt.
Danksagungen
Vorwort
HTML5: Plattform oder Spezikation?
Wie die Inhalte organisiert sind
Über dieses Buch
Vorkenntnisse
Online-Ressourcen
1. HTML5 und CSS3 im Überblick
1.1 Eine Plattform für die Webentwicklung
Aussagekräftigeres Markup
Multimedia mit weniger Plugins
Bessere Anwendungen
Kommunikation mit anderen Dokumenten
Web Sockets
Clientseitige Speicherung
Bessere Benutzeroberflächen
Bessere Formulare
Verbesserte Barrierefreiheit
Fortschrittliche Selektoren
Visuelle Effekte
1.2 Abwärtskompatibilität
1.3 Der Weg in die Zukunft ist steinig
Internet Explorer
Barrierefreiheit
Veraltete Tags
Konkurrierende Unternehmensinteressen
HTML5 und CSS3 befinden sich noch in der Entwicklung
I. Bessere Benutzeroberflächen
2. Neue strukturelle Tags und Attribute
1 Einen Blog mit semantischem Markup neu definieren
Auf den Doctype kommt es an
Kopfzeilen
Fußzeilen
Navigation
Abschnitte und Artikel
Artikel
Das aside-Tag und Seitenleisten
aside-Elemente sind keine Seitenleisten
Styling
Ausweichlösung
2 Pop-up-Fenster mit benutzerdefinierten Datenattributen
Das Verhalten vom Inhalt trennen oder warum onclick böse ist
Mehr Barrierefreiheit
onclick beseitigen
Ausweichlösung
3. Benutzerfreundliche Webformulare
3 Daten mit neuen Eingabefeldern beschreiben
Verbessertes Formular für unser AwesomeCo-Projekt
Das grundlegende Formular
Slider mithilfe von range erstellen
Zahlen und Spinboxen
Datumswerte
URL
Farbe
Ausweichlösungen
Den Farbwähler ersetzen
Modernizr
4 Mit autofocus zum ersten Feld springen
Ausweichlösung
5 Platzhaltertext für Hinweise nutzen
Ein einfaches Registrierungsformular
Autovervollständigung verhindern
Ausweichlösung
6 In-Place-Editing mit contenteditable
Das Profilformular
Die Daten ablegen
Ausweichlösung
Bearbeitungsseiten erstellen
Die Zukunft
4. Bessere Benutzeroberflächen mit CSS3
7 Tabellen mit Pseudoklassen stylen
Verbesserte Abrechnungen
Gestreifte Zeilen mit :nth-of-type
Spaltentexte ausrichten mit :nth-child
Die letzte Zeile fett darstellen mit :last-child
Rückwärts zählen mit :nth-last-child
Ausweichlösung
HTML-Code ändern
JavaScript verwenden
8 Links ausdrucken mit :after und content
Das CSS
Ausweichlösung
9 Mehrspaltige Layouts
Spalten spalten
Ausweichlösung
10 Benutzeroberflächen für mobile Geräte mit Media Queries
Ausweichlösung
Die Zukunft
5. Mehr Barrierefreiheit
11 Navigationshinweise mit ARIA-Rollen
Landmark-Rollen
Rollen für die Dokumentstruktur
Ausweichlösung
12 Barrierefreie aktualisierbare Bereiche erstellen
Die Seite erstellen
Höfliche, aber bestimmte Aktualisierung
Alles vorlesen lassen
Bereiche ausblenden
Ausweichlösung
Die Zukunft
II. Neue Perspektiven und Klänge
6. Zeichnen mit dem canvas-Element
13 Logos zeichnen
Das Logo zeichnen
Text einfügen
Linien zeichnen
Den Ursprung verschieben
Farben
Ausweichlösung
14 Statistiken grafisch darstellen mit RGraph
Daten mit HTML beschreiben
Ein Balkendiagramm aus HMTL erstellen
Alternativen Inhalt anzeigen
Ausweichlösung
Die Zukunft
7. Audio und Video einbetten
7.1 Ein bisschen Geschichte
7.2 Container und Codecs
Video-Codecs
Codecs und unterstützte Browser
H.264
Theora
VP8
Audio-Codecs
Codecs und unterstützte Browser
Advanced Audio Coding (AAC)
Vorbis (OGG)
MP3
Container und Codecs als Team
15 Mit Audio arbeiten
Aufbau der grundlegenden Liste
Ausweichlösung
16 Video einbetten
Ausweichlösung
Die Grenzen von HTML5-Video
Audio, Video und Barrierefreiheit
Die Zukunft
8. Augenschmaus
17 Scharfe Ecken abrunden
Ein Anmeldeformular auflockern
Browserspezifische Selektoren
Ausweichlösung
Unterstützung für abgerundete Ecken ermitteln
jQuery Corners
Unser formCorners-Plugin
Die Abrundung aufrufen
Ein kleiner IE-Trick
18 Schatten, Verläufe und Transformationen
Die grundlegende Struktur
Einen Verlauf hinzufügen
Schatten für das Ansteckschild
Das Namensschild drehen
Transparente Hintergründe
Ausweichlösung
Drehen
Farbverläufe
Transparenz
Alles zusammengenommen
19 Echte Schriften nutzen
@font-face
Schriftformate
Formate und unterstützte Browser
Schrift ersetzen
Ausweichlösung
Die Zukunft
III. Jenseits von HTML5
9. Mit clientseitigen Daten arbeiten
20 Einstellungen mit localStorage speichern
Formular für die Einstellungen
Einstellungen speichern und laden
Einstellungen anwenden
Ausweichlösung
Serverseitige Speicherung
Cookies und JavaScript
21 Daten in einer clientseitigen relationalen Datenbank speichern
CRUD in Ihrem Browser
Die Oberfläche für die Notizen
Mit der Datenbank verbinden
Eine Notiztabelle erstellen
Notizen laden
Bestimmte Datensätze abrufen
Datensätze einfügen, aktualisieren und löschen
Verpacken
Ausweichlösung
22 Offline arbeiten
Mit dem Manifest einen Cache definieren
Manifest und Caching
Die Zukunft
10. Mit anderen APIs spielen
23 Den Verlauf erhalten
Den aktuellen Zustand speichern
Den vorherigen Status abrufen
Standardwert
Ausweichlösung
24 Über Domains hinweg kommunizieren
Die Kontaktliste
Nachrichten senden
Die Support-Website
Nachrichten empfangen
Ausweichlösung
25 Chatten mit Web Sockets
Die Chat-Oberfläche
Mit dem Server sprechen
Ausweichlösung
Flash Socket Policy ähm, was ?
Server
26 Finden Sie sich selbst: Geolocation
AwesomeCo lokalisieren
Wie man gefunden wird
Ausweichlösung
Die Zukunft
11. Wie es weitergeht
11.1 CSS3-Übergänge
Timingfunktionen
11.2 Web Workers
11.3 Native Unterstützung für Drag-and-Drop
Drag-and-Drop-Events
Elemente ablegen
Stilregeln ändern
Dateien ziehen
Nicht alles ist gut
11.4 WebGL
11.5 Indexed Database API
11.6 Clientseitige Formularvalidierung
11.7 Vorwärts!
A. Kurzreferenz
A.1 Neue Elemente
A.2 Attribute
A.3 Formulare
A.4 Attribute für Formularfelder
A.5 Barrierefreiheit
A.6 Multimedia
A.7 CSS3
A.8 Clientseitige Speicherung
A.9 Zusätzliche APIs
B. jQuery-Einführung
B.1 jQuery laden
B.2 jQuery-Grundlagen
B.3 Methoden zum Verändern von Inhalten
Ein- und Ausblenden
html, val und attr
append, prepend und wrap
CSS und Klassen
Verkettungen
B.4 Elemente erstellen
B.5 Events
Bind
Ursprüngliches Event
B.6 Die Funktion document.ready
C. Audio und Video kodieren
C.1 Audio kodieren
C.2 Video für das Web kodieren
D. Ressourcen
D.1 Ressourcen im Web
Apple – HTML5
CSS3.Info
Font Squirrel
HTML5
HTML5 – Mozilla Developer Center
Web Socket-Server mit Node.js implementieren
Probefahrt mit Microsoft IE9
Ruby und Web Sockets – TCP für den Browser
Flash-Richtliniendatei einrichten
Typekit
Unit Interactive: „Better CSS Font Stacks“...
Video für Alle!
Video.js
Wo kann ich ... verwenden?
E. Literaturverzeichnis
Stichwortverzeichnis
Ich habe mich förmlich auf die Arbeit an diesem Buch gestürzt, noch bevor ich mit dem vorherigen fertig war. Die meisten Freunde, meine Familie und auch mein Verleger haben mich wahrscheinlich für verrückt erklärt, weil ich mir keine Pause gegönnt habe, aber sie haben mich dennoch unterstützt. Dieses Buch ist also das Ergebnis vieler wundervoller und hilfsbereiter Menschen.
Dave Thomas und Andy Hunt kann ich gar nicht genug dafür danken, dass sie mir die Möglichkeit gegeben haben, ein zweites Mal mit ihnen zusammenzuarbeiten. Ihre Anmerkungen haben mir sehr dabei geholfen, diesem Buch die richtige Form zu geben. Ich bin stolz darauf, ein Pragmatic Bookshelf-Autor zu sein.
Daniel Steinberg hat mir dabei geholfen, dieses Buch anzuschieben, unter Vertrag zu kommen und von Anfang an die richtigen Weichen zu stellen. Ich bin sehr dankbar für all die Unterstützung, die ich von ihm erhalten habe – und dafür, dass er mir beigebracht hat, meine Texte klarer zu formulieren. Auch jetzt habe ich beim Schreiben seine Stimme im Ohr.
Daniel konnte seine Arbeit an diesem Buch nicht fortsetzen, gab mich aber in wirklich gute Hände. Susannah Pfalzer hat mir während des ganzen Projekts unglaublich viel geholfen, mich bei der Stange gehalten und mich angetrieben, noch besser zu werden. Sie verstand es, immer genau zur richtigen Zeit die richtigen Fragen zu stellen. Ohne Susannah wäre dieses Buch nicht annähernd so gut geworden.
Meine technischen Gutachter haben mir in beiden Feedback-Runden extrem viel dabei geholfen, Inhalte deutlicher herauszuarbeiten und verständlicher zu präsentieren. Vielen Dank an Aaron Godin, Ali Raza, Charles Leffingwell, Daniel Steinberg, David Kulberg, Don Henton, Doug Rhoten, Edi Schlechtinger, Jon Mischo, Jon Oebser, Kevin Gisi, Marc Harter, Mark Nichols, Noel Rappin, Paul Neibarger, Sam Elliott, Sean Canton, Srdjan Pejic, Stephen Wolff, Todd Dahl und Erik Watson.
Besonderer Dank gilt auch den tollen Leuten bei ZenCoder für ihre Hilfe bei der Videokodierung der Beispieldateien und dafür, dass sie es vielen Webautoren durch ihre Arbeit so viel leichter machen, Videos für HTML5 vorzubereiten.
Ein herzlicher Dank geht auch an meine Geschäftspartner Chris Johnson, Chris Warren, Mike Weber, Jon Kinney, Adam Ludwig, Gary Crabtree, Carl Hoover, Josh Anderson, Austen Ott und Nick Lamuro für die Unterstützung bei diesem und vielen anderen Projekten. Besonderer Dank gilt auch Erich Tesky dafür, dass er mich gelegentlich auf den Boden der Tatsachen zurückholte, und dafür, dass er für mich auch dann als Freund da war, wenn ich mal frustriert war.
Außerdem möchte ich meinem Vater dafür danken, dass er von mir immer nur das Beste erwartet und mich unermüdlich zum Durchhalten angetrieben hat. Erst dadurch wurde das Unmögliche möglich.
Mein ewiger Dank und meine Liebe gelten meiner wundervollen Frau Carissa und unseren Töchtern Ana und Lisa. Sie haben auf eine Menge Wochenenden und Abende verzichtet, damit ich im Büro weiterhacken und schreiben konnte. Jedes Mal, wenn ich nicht weiter wusste, hat mir Carissas unerschütterlicher Glaube, dass „ich es schon schaffe“, weitergeholfen. Ich habe großes Glück, dass die drei ein Teil meines Lebens sind.
Drei Monate im Web sind wie ein ganzes Jahr in Echtzeit.
Wir Webentwickler denken meistens so, weil wir ständig von irgendetwas Neuem hören. Vor einem Jahr schienen HTML5 und CSS3 noch in weiter Ferne zu sein. Aber schon heute setzen Unternehmen diese Technologien ein, weil in Browsern wie Google Chrome, Safari, Firefox und Opera bereits Teile der Spezifikation implementiert wurden.
HTML5 und CSS3 helfen dabei, das Fundament für die nächste Generation von Webanwendungen zu legen. Sie geben uns die Möglichkeit, Websites zu erstellen, die leichter zu entwickeln, zu pflegen und die benutzerfreundlicher sind. HTML5 bietet neue Elemente für die Definition der Struktur einer Website und die Einbettung von Inhalten. Daher müssen wir nicht mehr auf zusätzliches Markup oder extra Plugins zurückgreifen. CSS3 bietet fortschrittliche Selektoren, grafische Erweiterungen und bessere Unterstützung für Schriften. Dadurch werden Websites visuell ansprechender, auch ohne die Ersetzung von Schriften durch Grafiken, komplexe JavaScripts oder grafische Tools. Die erweiterte Unterstützung für Barrierefreiheit ermöglicht bessere Ajax-Anwendungen für behinderte Menschen, und dank der Offline-Möglichkeiten können wir mit der Entwicklung von Anwendungen beginnen, die auch ohne Internetverbindung funktionieren.
In diesem Buch erfahren Sie alles darüber, was Sie bereits jetzt mit HTML5 und CSS3 machen können, selbst wenn Ihre Benutzer Browser verwenden, die noch nicht alle Funktionen unterstützen. Bevor wir damit anfangen, nehmen wir uns ein paar Sekunden Zeit und sprechen über HTML5 und andere Buzzwords.
HTML5 ist eine Spezifikation, die einige neue Tags und neues Markup sowie wundervolle JavaScript-APIs beschreibt, aber gleichzeitig ist es in einen Sog aus Hypes und Versprechungen geraten. Leider hat sich der HTML5-Standard zu einer HTML5-Plattform entwickelt, was zu einer schrecklichen Verwirrung bei Entwicklern, Kunden und sogar bei Autoren führt. In manchen Fällen werden Teile der CSS3-Spezifikation wie etwa Schatten, Verläufe und Transformationen plötzlich „HTML“ genannt. Browserhersteller versuchen, sich gegenseitig darin zu übertrumpfen, wie viel „HTML5“ sie unterstützen. Und Kunden machen plötzlich komische Anfragen wie zum Beispiel: „Meine Website wird doch in HTML5 gemacht, oder?“
Für den größten Teil dieses Buches konzentrieren wir uns auf die Spezifikationen von HTML5 und CSS3 sowie darauf, wie Sie die damit beschriebenen Techniken nutzen können. Im letzten Teil des Buches sehen wir uns eine Reihe verwandter Spezifikationen an, die einmal Teil von HTML5 waren, aber bereits jetzt auf verschiedenen Plattformen im Einsatz sind. Dazu gehören Web SQL Databases, Geolocation und Web Sockets. Zwar gehören diese Dinge technisch gesehen nicht zu HTML5, können Ihnen aber in Kombination mit HTML5 und CSS3 dabei helfen, tolle Anwendungen zu erstellen.
Jedes Kapitel in diesem Buch konzentriert sich auf eine bestimmte Gruppe von Problemen, die wir mit HTML5 und CSS3 lösen können. Für jedes Kapitel gibt es einen Überblick sowie eine Tabelle mit den im Buch behandelten Tags, Funktionen und Konzepten. Der Hauptinhalt jedes Kapitels ist in „Tipps“ unterteilt, die Ihnen jeweils ein bestimmtes Konzept vorstellen und Sie durch die Erstellung eines einfachen Beispiels führen. Die Kapitel dieses Buchs wurden themenweise zusammengestellt. Anstatt die Themen in einen HTML5- und einen CSS3-Teil zu gliedern, ist es sinnvoller, die Kapitel anhand der gelösten Probleme zusammenzufassen.
Jeder Tipp enthält einen Abschnitt mit der Überschrift „Ausweichlösung“, in dem Lösungen für diejenigen Benutzer gezeigt werden, deren Browser noch keine Unterstützung für HTML5 und CSS3 bieten. Wir werden eine Vielzahl von Techniken verwenden, damit diese Ausweichlösungen funktionieren: von Bibliotheken von Drittherstellern bis hin zu unseren eigenen jQuery-Plugins. Die Tipps können Sie in beliebiger Reihenfolge lesen.
Jedes Kapitel schließt mit einem Abschnitt mit der Überschrift „Die Zukunft“, in dem wir diskutieren, wie das jeweilige Konzept angewendet werden kann, wenn es weitere Verbreitung findet.
Dieses Buch konzentriert sich auf das, was Sie heute schon verwenden können. Es gibt mehr HTML5- und CSS3-Funktionen, deren Verwendung noch nicht weit verbreitet ist. Darüber erfahren Sie mehr in Kapitel 11.
Wir beginnen mit einem kurzen Überblick über HTML5 und CSS3 und sehen uns einige der neuen strukturellen Tags an, mit denen Sie den Inhalt Ihrer Seiten beschreiben können. Anschließend arbeiten wir mit Formularen, und Sie erhalten die Gelegenheit, einige Formularfelder und -funktionen wie zum Beispiel Autofokus und Platzhalter zu verwenden. Danach können Sie mit den neuen Selektoren von CSS3 spielen und lernen, wie Sie Stilregeln auf Elemente anwenden, ohne Ihrem Inhalt zusätzliches Markup hinzuzufügen.
Anschließend erkunden wir die Audio- und Videounterstützung in HTML5. Dabei lernen Sie, wie Sie mit dem canvas-Element Formen zeichnen. Außerdem werfen Sie einen Blick auf Schatten, Verläufe und Transformationen in CSS3 und lernen, wie Sie mit Schriften arbeiten.
Im letzten Abschnitt verwenden wir die clientseitigen Funktionen von HTML5, wie zum Beispiel Web Storage und Web SQL Databases, und behandeln die Erstellung von clientseitigen Offline-Anwendungen. Wir setzen Web Sockets ein, um uns mit einem einfachen Chat-Dienst zu unterhalten. Außerdem erfahren Sie, wie es mit HTML5 möglich ist, Nachrichten und Daten über Domains hinweg zu versenden. Sie spielen mit der Geolocation-API und manipulieren den Browserverlauf. Zum Abschluss werfen wir einen Blick auf einige Dinge, die zwar nicht jetzt gleich nützlich sind, aber in naher Zukunft wichtig sein werden.
In Anhang A finden Sie eine Auflistung aller in diesem Buch behandelten Funktionen mit Querverweisen auf die entsprechenden Kapitel. Wir arbeiten in diesem Buch häufig mit jQuery, deshalb gibt Ihnen Anhang B einen kurzen Überblick. Außerdem finden Sie hier Informationen zur Kodierung von Audio- und Videodateien für HTML5.
Dieses Buch richtet sich in erster Linie an Webentwickler, die ein solides Verständnis von HTML und CSS mitbringen. Wenn Sie gerade erst anfangen, ist dieses Buch trotzdem nützlich für Sie. Ich würde Ihnen dann aber die Bücher Webdesign mit Webstandards [Zel08] und Web Design for Developers [Hog09] ans Herz legen.
Ich gehe außerdem davon aus, dass Sie über ein grundlegendes Verständnis von JavaScript und jQuery[1] verfügen, denn damit implementieren wir viele unserer Ausweichlösungen. Anhang B gibt eine kurze Einführung in jQuery und die grundlegenden Methoden, die wir verwenden werden.
Sie brauchen Firefox 3.6, Google Chrome 5, Opera 10.6 oder Safari 5, um den Code in diesem Buch zu testen. Wahrscheinlich brauchen Sie sogar jeden dieser Browser, um auch alles zu testen, was wir schreiben. Denn jeder Browser macht alles ein bisschen anders.
Außerdem brauchen Sie eine Möglichkeit, Ihre Websites mit dem Internet Explorer zu testen. Nur so können Sie sichergehen, dass unsere Ausweichlösungen auch wirklich funktionieren. Wenn Sie Ihre Beispiele in mehreren Versionen des Internet Explorer testen müssen, können Sie IETester für Windows herunterladen. Die Software unterstützt IE 6, 7 und 8 in einer einzigen Anwendung. Wenn Sie nicht Windows verwenden, sollten Sie darüber nachdenken, eine virtuelle Maschine wie z.B. Virtual Box oder VMware oder einen Service wie etwa CrossBrowserTesting[2] oder MogoTest[3] zu verwenden.
[1] http://www.jquery.com
[2] http://crossbrowsertesting.com/
[3] http://www.mogotest.com/
Auf der englischen Website zum Buch[4] finden Sie Links auf ein interaktives Diskussionsforum sowie zu den Errata dieses Buchs. Dort finden Sie auch einen Link zum Quellcode für alle Beispiele in diesem Buch. Außerdem können Leser des E-Books auf den grauen Kasten oberhalb der Codeausschnitte klicken, um die Snippets direkt herunterzuladen.
Sollten Sie einen Fehler finden, erstellen Sie bitte einen Eintrag auf der Seite mit den Errata, damit wir uns darum kümmern können. Wenn Sie eine elektronische Version dieses Buchs lesen, finden Sie in der Fußzeile jeder Seite Links, über die Sie ganz einfach Errata übermitteln können.
Außerdem sollten Sie unbedingt den Blog zu diesem Buch besuchen, „Beyond HTML5 and CSS3“.[5] Ich veröffentliche dort entsprechendes Material, Aktualisierungen und funktionierende Beispiele zu diesem Buch.
Sind Sie bereit? Super! Legen wir los mit HTML5 und CSS3.
[4] http://www.pragprog.com/titles/bhh5/
[5] http://www.beyondhtml5andcss3.com/
HTML5[6] und CSS3[7] sind mehr als lediglich zwei neue Standards, die vom World Wide Web Consortium (W3C) und seinen Arbeitsgruppen vorgeschlagen wurden. Für die Technologien, die Sie jeden Tag verwenden, sind die beiden Standards der nächste Schritt und sollen Ihnen dabei helfen, bessere und modernere Webanwendungen zu entwickeln. Bevor wir tief in die Details von HTML5 und CSS3 einsteigen, sprechen wir zunächst über einige Vorteile von HTML5 und CSS3 sowie über einige Herausforderungen, die sich daraus ergeben.
Eine Menge neuer Funktionen in HTML drehen sich darum, eine bessere Plattform für webbasierte Anwendungen zu entwickeln. Von aussagekräftigeren Tags, besserer Cross-site- und Cross-window-Kommunikation, bis hin zu Animationen und verbesserter Multimedia-Unterstützung – mit HTML5 stehen Entwicklern eine Menge neuer Tools zur Verfügung, die der Verbesserung der User Experience dienen.
In jeder HTML-Version wird neues Markup eingeführt. Aber nie zuvor gab es so viele Erweiterungen, die sich direkt auf die Beschreibung von Inhalten beziehen. Elemente für die Definition von Überschriften, Fußzeilen, Navigationsabschnitten, Seitenleisten und Artikeln lernen Sie in Kapitel 2 kennen. Dort behandeln wir auch Messwerte und Fortschrittsbalken und erklären, wie Ihnen benutzerdefinierte Datenattribute dabei helfen können, Daten in Markup abzubilden.
Sie brauchen kein Flash und auch kein Silverlight mehr für Video, Audio und Vektorgrafiken. Flash-basierte Videoplayer sind zwar relativ einfach zu verwenden, funktionieren aber nicht auf den mobilen Geräten von Apple. Da diese Geräte einen wichtigen Markt ausmachen, lernen Sie, wie Sie Video ohne Flash verwenden können: In Kapitel 7, erfahren Sie, wie Sie Audio und Video in HTML5 mit entsprechenden Ausweichlösungen einsetzen können.
Entwickler haben alles Mögliche versucht, um umfangreichere, interaktivere Webanwendungen zu erstellen – von ActiveX-Elementen bis hin zu Flash. HTML5 bietet erstaunliche Funktionen, die in einigen Fällen Technologien von Drittanbietern vollkommen überflüssig machen.
Webbrowser verhindern, dass wir Skripten einer Domain dazu nutzen, Skripten auf einer anderen Domain zu verändern oder damit zu kommunizieren. Durch diese Einschränkung werden Endbenutzer vor Cross-Site Scripting geschützt, mit dem nichts ahnenden Besuchern von Webseiten schon allerhand fiese Dinge angetan wurden.
Allerdings führt das dazu, dass überhaupt keine Skripten funktionieren, selbst dann, wenn wir sie selbst schreiben und wissen, dass wir dem Inhalt vertrauen können. HTML5 bietet einen Workaround, der sowohl sicher als auch einfach zu implementieren ist. Wie Sie das zum Laufen bekommen, erfahren Sie im Abschnitt „24 Über Domains hinweg kommunizieren“.
HTML5 bietet Unterstützung für Web Sockets, mit denen Sie eine dauerhafte Verbindung zu einem Server herstellen können. Anstatt ständig vom Backend aus Fortschrittsaktualisierungen zu pollen, kann Ihre Webseite einen Socket abonnieren, und das Backend kann dann Benachrichtigungen an Ihre Benutzer pushen. Damit werden wir im Abschnitt „25 Chatten mit Web Sockets“ ein bisschen spielen.
Wir tendieren dazu, HTML5 als Webtechnologie zu verstehen. Aber in Verbindung mit der Web Storage- und der WebSQL Database-API können wir Browseranwendungen entwickeln, bei denen die Daten dauerhaft und vollständig auf dem Clientrechner verbleiben. Wie Sie diese APIs verwenden, erfahren Sie in Kapitel 9.
Die Benutzeroberfläche ist ein sehr wichtiger Teil jeder Webanwendung. Und tagtäglich springen wir durch brennende Reifen, um die Browser das zu tun zu lassen, was wir möchten. Für die Gestaltung einer Tabelle oder runder Ecken verwenden wir entweder JavaScript-Bibliotheken oder tonnenweise zusätzliches Markup. Mit HTML5 und CSS3 gehören solche Praktiken der Vergangenheit an.
HTML5 bietet auch verbesserte Steuerelemente für Benutzeroberflächen. Lange Zeit waren wir gezwungen, JavaScript und CSS zu verwenden, um Slider, Kalender-Datepicker und Farbwähler zu bauen. All das gibt es in HTML5 als eigenständige Elemente, ebenso wie Dropdown-Menüs, Kontrollkästchen und Optionsfelder. In Kapitel 3, lernen Sie, wie Sie diese Elemente verwenden können. Auch wenn das noch nicht in jedem Browser so ganz funktioniert, sollten Sie es im Auge behalten – insbesondere dann, wenn Sie webbasierte Anwendungen entwickeln. Neben der erhöhten Benutzerfreundlichkeit auch ohne JavaScript-Bibliotheken gibt es noch einen weiteren Vorteil: mehr Barrierefreiheit. Screenreader und Browser können diese Steuerelemente so implementieren, dass auch Behinderte sie einfach anwenden können.
Die Beschreibung unserer Inhalte mit den neuen HTML5-Elementen erleichtert es Programmen wie Screenreadern, unsere Inhalte zu verarbeiten. So ist die Navigation einer Website beispielsweise viel leichter zu finden, wenn Sie nur nach dem nav-Tag zu suchen brauchen statt nach einem bestimmten div oder einer ungeordneten Liste. Fußzeilen, Seitenleisten und andere Inhalte können einfach neu angeordnet oder ausgelassen werden. Das Einlesen von Seiten wird allgemein unproblematischer, und damit werden die Erfahrungen für Menschen angenehmer, die auf unterstützende Technologien angewiesen sind. Außerdem kann über die neuen Elementattribute die Funktion von Elementen angegeben werden, sodass Bildschirmlesegeräte diese leichter verarbeiten können. In Kapitel 5, lernen Sie, wie Sie diese neuen Attribute einsetzen, damit sie von aktuellen Bildschirmlesegeräten verwendet werden können.
CSS3 bietet Selektoren, mit denen Sie Tabellenzeilen abwechselnd auswählen, alle aktivierten Kontrollkästchen oder sogar den letzten Absatz in einer Gruppe auswählen können. Sie erreichen mehr mit weniger Code und weniger Markup. Dadurch wird es auch viel leichter, HTML zu gestalten, das Sie nicht verändern können. In Kapitel 4, lernen Sie, diese Selektoren effizient einzusetzen.
Schlagschatten für Texte und Bilder bringen Tiefe in eine Webseite. Verläufe sorgen für eine zusätzliche Dimension. Mit CSS3 können Sie Elementen Schatten und Verläufe hinzufügen, ohne auf Hintergrundbilder oder zusätzliches Markup zurückzugreifen. Sie können Transformationen anwenden, um Ecken abzurunden oder Elemente zu verzerren oder zu drehen. Wie das alles funktioniert, erfahren Sie in Kapitel 8.
[6] Die HTML5-Spezifikation finden Sie unter http://www.w3.org/TR/html5/.
[7] CSS3 ist auf mehrere Module verteilt. Den aktuellen Status können Sie unter http://www.w3.org/Style/CSS/current-work mitverfolgen.
Einer der entscheidenden Gründe für Sie, HTML5 bereits heute zu verwenden, ist, dass es in den meisten aktuellen Browsern funktioniert. Derzeit können Sie sogar in Internet Explorer 6 mit der Verwendung von HTML5 beginnen und Ihr Markup langsam migrieren. Es wird sogar beim Validierungsservice des W3C korrekt validiert (natürlich nur bedingt, da die Standards immer noch weiterentwickelt werden).
Wenn Sie schon mit HTML oder XML gearbeitet haben, haben Sie die Doctype-Deklaration bereits kennengelernt. Sie dient dazu, Validierern und Editoren mitzuteilen, welche Tags und Attribute verwendet werden können und wie das Dokument geformt sein soll. Und eine Menge Webbrowser stellen darüber fest, wie die Seite dargestellt werden soll. Ein gültiger Doctype lässt Browser oft Seiten im „Standards Mode“ darstellen.
Im Vergleich zu dem eher ausführlichen Doctype XHTML 1.0 Transitional, der für viele Websites verwendet wird
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ist der HTML5-Doctype lächerlich einfach:
html5_why/index.html
<!DOCTYPE html>Schreiben Sie das in den oberen Teil Ihres Dokuments, und schon verwenden Sie HTML5.
Natürlich können Sie keines der neuen HTML5-Elemente verwenden, wenn Ihr Zielbrowser diese nicht unterstützt. Aber Ihr Dokument wird bereits als HTML5 validiert.
Es gibt einige Hürden, die der weiteren Verbreitung von HTML5 und CSS3 im Wege stehen. Manche sind offensichtlich, andere nicht.
Der Internet Explorer verfügt derzeit über die größte Anwenderbasis, und die Versionen 8 und darunter bieten eine äußerst schwache Unterstützung für HTML5 und CSS3. Beim IE 9 sieht die Situation schon besser aus, aber er ist noch nicht weit verbreitet. Das bedeutet nicht, dass wir HTML5 und CSS3 nicht trotzdem für unsere Websites verwenden können. Wir bekommen es hin, dass unsere Websites im Internet Explorer funktionieren, sie müssen ja nicht genauso funktionieren wie die Versionen für Chrome und Firefox. Wir müssen lediglich Ausweichlösungen anbieten, sodass wir keine Benutzer verärgern oder Kunden verlieren.
Die Benutzer müssen mit unseren Websites interagieren können, ganz gleich ob sie seh- oder hörbehindert sind, ältere Browser, langsame Verbindungen oder mobile Geräte verwenden. In HTML5 werden einige neue Elemente eingeführt, zum Beispiel audio, video und canvas. Mit Audio und Video gab es immer schon Schwierigkeiten in puncto Barrierefreiheit, aber das canvas-Element stellt uns vor neue Herausforderungen. Mit diesem Element können wir Vektorbilder über JavaScript innerhalb des HTML-Dokuments erstellen. Hieraus ergeben sich Schwierigkeiten für Sehbehinderte, aber auch für die fünf Prozent der Webbenutzer, die JavaScript deaktiviert haben.[8]
Wir dürfen nicht mit den neuen Technologien davongallopieren und dabei die Barrierefreiheit aus den Augen verlieren. Wir müssen geeignete Ausweichlösungen für die neuen HTML5-Elemente bieten – ebenso wie für Menschen, die den Internet Explorer verwenden.
In HTML5 wurden eine Menge neuer Elemente eingeführt, aber die Spezifikation schafft auch einige gebräuchliche Elemente ab, die Sie eventuell in Ihren Webseiten verwenden.[9] Diese sollten Sie beim Umstieg entfernen:
basefont
big
center
font
s
strike
tt
u
Einige dieser Tags sind ziemlich veraltet. Aber da draußen finden Sie viele Seiten, die mit visuellen Editoren wie zum Beispiel Dreamweaver bearbeitet werden und deshalb eine Menge font- und center-Tags enthalten.
Neben gestalterischen Elementen wurde auch die Unterstützung von Frames entfernt. Frames waren immer sehr beliebt in Enterprise-Webanwendungen wie zum Beispiel PeopleSoft, Microsoft Outlook Web Access und sogar in speziell entwickelten Portalen. Trotz der weit verbreiteten Verwendung haben Frames so viele Schwierigkeiten im Hinblick auf Benutzerfreundlichkeit und Barrierefreiheit mit sich gebracht, dass man sie loswerden musste. Dementsprechend sind die folgenden Elemente verschwunden:
frame
frameset
noframes
Sie sollten Möglichkeiten finden, das Layout Ihrer Benutzeroberflächen mit regulärem CSS und ein bisschen JavaScript auch ohne Frames zu gestalten. Falls Sie mit Frames dafür sorgen, dass Kopfzeile, Fußzeile und Navigation auf jeder Seite Ihrer Anwendung gleich angezeigt werden, können Sie das auch mit den Tools Ihres Webentwicklungs-Frameworks erreichen. Einige andere Elemente sind verschwunden, weil es bessere Optionen dafür gibt:
acronym wird durch abbr ersetzt.
applet wird durch object ersetzt.
dir wird durch ul ersetzt.
Zusätzlich zu den veralteten Elementen sind auch viele Attribute nicht mehr zulässig. Dazu gehören Darstellungsattribute wie zum Beispiel:
align
link, vlink, alink und text für das body-Tag
bgcolor
height und width
scrolling für das iframe-Element
valign
hspace und vspace
cellpadding, cellspacing und border für table
Falls Sie für Ihre Links target verwenden, wie z.B. in:
<a href="http://www.google.com" target="_blank">sollten Sie stattdessen JavaScript verwenden, da auch target abgeschafft wurde.
Das Attribut profile des head-Tags wird auch nicht mehr unterstützt. Das ist etwas, was Sie tendenziell in einer Menge WordPress-Vorlagen finden.
Zu guter Letzt ist das Attribut longdesc für img- und iframe-Elemente verschwunden. Für Verfechter der Barrierefreiheit ist das ein bisschen enttäuschend, da longdesc die allgemein anerkannte Möglichkeit war, Benutzern mit Bildschirmlesegeräten zusätzliche beschreibende Informationen zu bieten.
Falls Sie vorhaben, HTML5 für Ihre vorhandenen Websites zu verwenden, sollten Sie diese Elemente ausfindig machen und entfernen oder durch semantischere Varianten ersetzen. Validieren Sie Ihre Seiten unbedingt mit dem Validierungsservice des W3C[10], der Ihnen dabei helfen wird, veraltete Tags und Attribute aufzuspüren.
Der Internet Explorer ist nicht der einzige Browser, dessen Entwickler die Einführung von HTML5 und CSS3 hinauszögern. Google, Apple und die Mozilla Foundation haben ebenfalls ihre eigenen Vorstellungen und kämpfen um die Vorherrschaft. Sie streiten über die Unterstützung von Video- und Audio-Codecs und bringen ihre Standpunkte in ihren Browser-Versionen klar zum Ausdruck. So spielt Safari beispielsweise MP3 über das audio-Element ab, aber keine ogg-Dateien. Firefox unterstützt dagegen ogg-Dateien, aber keine mp3-Dateien.
Irgendwann werden diese Unterschiede entfallen. Bis dahin können wir lediglich intelligente Entscheidungen darüber treffen, was wir selbst unterstützen – indem wir unsere Implementierungen auf die von unseren Zielgruppen verwendeten Browser beschränken oder alles mehrfach implementieren, für jeden Browser einmal – bis die Standards endgültig feststehen. Es ist aber alles nicht so schlimm, wie es sich anhört. Mehr darüber erfahren Sie in Kapitel 7.
Die Spezifikationen sind noch nicht endgültig. Das bedeutet, dass sich alles innerhalb dieser Spezifikationen ändern kann. Firefox, Chrome und Safari bieten eine gute Unterstützung für HTML5. Aber wenn sich die Spezifikation ändert, werden sich die Browser mit ihr verändern, und dies kann wiederum zu veralteten und defekten Websites führen. Während dieses Buch geschrieben wurde, wurde die CSS3-Eigenschaft box-shadow aus der Spezifikation entfernt und wieder hinzugefügt. Das Protokoll Web Sockets wurde verändert, und die Client-Server-Kommunikation wurde dadurch zunichte gemacht.
Wenn Sie den Fortschritt von HTML5 und CSS3 mitverfolgen und immer auf dem Laufenden bleiben, ist alles gut. Eine ganze Menge der Dinge, die wir in diesem Buch diskutieren, wird lange funktionieren.
Wenn Sie über etwas stolpern, das in einem Ihrer Zielbrowser nicht funktioniert, verwenden Sie einfach JavaScript und Flash als Spachtelmasse, um diese Lücken zu füllen. Sie entwickeln Lösungen, die für alle Benutzer funktionieren. Und im Laufe der Zeit können Sie JavaScript und die anderen Ausweichlösungen nach und nach entfernen, ohne Ihre eigentlichen Implementierungen zu ändern.
Aber bevor Sie zu viel über die Zukunft nachdenken, fangen wir einfach an, mit HTML5 zu arbeiten. Eine ganze Menge neuer struktureller Tags warten darauf, Sie im nächsten Kapitel kennenzulernen. Und wir wollen sie doch nicht so lange warten lassen, oder?
[8] http://visualrevenue.com/blog/2007/08/eu-and-us-javascript-disabled-index.html
[9] http://www.w3.org/TR/html5-diff/
[10] http://validator.w3.org/