Table Of Content

The Pragmatic Programmers HTML5 & CSS3 Webentwicklung mit den Standards von morgen Brian P. Hogan Deutsche Übersetzung von O’REILLY Übersetzt von Stefan Fröhlich HTML5 & CSS3 Webentwicklung mit den Standards von morgen HTML5 & CSS3 Webentwicklung mit den Standards von morgen Brian P. Hogan Deutsche Übersetzung von Stefan Fröhlich Beijing · Cambridge · Farnham · Köln · Sebastopol · Tokyo 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: O’Reilly Verlag Balthasarstr. 81 50670 Köln E-Mail: [email protected] Copyright der deutschen Ausgabe: © 2011 by O’Reilly Verlag GmbH & Co. KG 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 ISBN 978-3-89721-316-6 Dieses Buch ist auf 100% chlorfrei gebleichtem Papier gedruckt. Inhaltsverzeichnis Danksagungen 1 Vorwort 3 HTML5: Plattform oder Spezikation? . . . . . . . . . . . . . . . . . . . 4 Wie die Inhalte organisiert sind. . . . . . . . . . . . . . . . . . . . . . . 4 Über dieses Buch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Vorkenntnisse. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Online-Ressourcen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 1 HTML5 und CSS3 im Überblick 9 1.1 Eine Plattform für die Webentwicklung. . . . . . . . . . . 9 1.2 Abwärtskompatibilität . . . . . . . . . . . . . . . . . . . . . . . 13 1.3 Der Weg in die Zukunft ist steinig . . . . . . . . . . . . . . 15 Teil I: Bessere Benutzeroberflächen 21 2 Neue strukturelle Tags und Attribute 23 Tipp 1 Einen Blog mit semantischem Markup neu definieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Tipp 2 Pop-up-Fenster mit benutzerdefinierten Datenattributen. . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 3 Benutzerfreundliche Webformulare 45 Tipp 3 Daten mit neuen Eingabefeldern beschreiben. . . . . . 48 Tipp 4 Mit autofocus zum ersten Feld springen. . . . . . . . . . 56 Tipp 5 Platzhaltertext für Hinweise nutzen . . . . . . . . . . . . . 58 Tipp 6 In-Place-Editing mit contenteditable. . . . . . . . . . . . . 65 VI  Inhaltsverzeichnis 4 Bessere Benutzeroberflächen mit CSS3 73 Tipp 7 Tabellen mit Pseudoklassen stylen . . . . . . . . . . . . . . 75 Tipp 8 Links ausdrucken mit :after und content . . . . . . . . . 85 Tipp 9 Mehrspaltige Layouts . . . . . . . . . . . . . . . . . . . . . . . . 89 Tipp 10 Benutzeroberflächen für mobile Geräte mit Media Queries. . . . . . . . . . . . . . . . . . . . . . . . . . . 95 5 Mehr Barrierefreiheit 99 Tipp 11 Navigationshinweise mit ARIA-Rollen . . . . . . . . . . . . 101 Tipp 12 Barrierefreie aktualisierbare Bereiche erstellen. . . . . 106 Teil II: Neue Perspektiven und Klänge 111 6 Zeichnen mit dem canvas-Element 113 Tipp 13 Logos zeichnen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Tipp 14 Statistiken grafisch darstellen mit RGraph . . . . . . . . 122 7 Audio und Video einbetten 131 7.1 Ein bisschen Geschichte. . . . . . . . . . . . . . . . . . . . . . 132 7.2 Container und Codecs . . . . . . . . . . . . . . . . . . . . . . . 133 Tipp 15 Mit Audio arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Tipp 16 Video einbetten. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 8 Augenschmaus 149 Tipp 17 Scharfe Ecken abrunden. . . . . . . . . . . . . . . . . . . . . . 151 Tipp 18 Schatten, Verläufe und Transformationen. . . . . . . . . 159 Tipp 19 Echte Schriften nutzen. . . . . . . . . . . . . . . . . . . . . . . 169 Teil III: Jenseits von HTML5 175 9 Mit clientseitigen Daten arbeiten 177 Tipp 20 Einstellungen mit localStorage speichern . . . . . . . . . 180 Tipp 21 Daten in einer clientseitigen relationalen Datenbank speichern . . . . . . . . . . . . . . . . . . . . . . . . 186 Tipp 22 Offline arbeiten. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198 10 Mit anderen APIs spielen 201 Tipp 23 Den Verlauf erhalten. . . . . . . . . . . . . . . . . . . . . . . . . 203 Tipp 24 Über Domains hinweg kommunizieren . . . . . . . . . . . 206 Tipp 25 Chatten mit Web Sockets . . . . . . . . . . . . . . . . . . . . . 213 Tipp 26 Finden Sie sich selbst: Geolocation. . . . . . . . . . . . . . 220 Inhaltsverzeichnis  VII 11 Wie es weitergeht 225 11.1 CSS3-Übergänge . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 11.2 Web Workers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 11.3 Native Unterstützung für Drag-and-Drop. . . . . . . . . 230 11.4 WebGL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 11.5 Indexed Database API . . . . . . . . . . . . . . . . . . . . . . . 237 11.6 Clientseitige Formularvalidierung . . . . . . . . . . . . . . 238 11.7 Vorwärts! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 A Kurzreferenz 241 A.1 Neue Elemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241 A.2 Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 A.3 Formulare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 A.4 Attribute für Formularfelder . . . . . . . . . . . . . . . . . . 243 A.5 Barrierefreiheit. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 A.6 Multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 A.7 CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245 A.8 Clientseitige Speicherung . . . . . . . . . . . . . . . . . . . . 247 A.9 Zusätzliche APIs . . . . . . . . . . . . . . . . . . . . . . . . . . . 247 B jQuery-Einführung 249 B.1 jQuery laden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 B.2 jQuery-Grundlagen . . . . . . . . . . . . . . . . . . . . . . . . . 250 B.3 Methoden zum Verändern von Inhalten . . . . . . . . . . 251 B.4 Elemente erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . 254 B.5 Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254 B.6 Die Funktion document.ready . . . . . . . . . . . . . . . . . 255 C Audio und Video kodieren 257 C.1 Audio kodieren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 C.2 Video für das Web kodieren . . . . . . . . . . . . . . . . . . . 258 D Ressourcen 259 D.1 Ressourcen im Web . . . . . . . . . . . . . . . . . . . . . . . . . 259 E Literaturverzeichnis 263 Index 265 Danksagungen 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 ver- rü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 Susan- nah wäre dieses Buch nicht annähernd so gut geworden.