HTML5 & CSS3 (Prags) - Brian P. Hogan - ebook

HTML5 & CSS3 (Prags) ebook

Brian P. Hogan

0,0

Opis

HTML5 und CSS3 gehören zu den spannendsten neuen Technologien, die das Web in Zukunft prägen werden. Die meisten Features werden bereits heute von modernen Browsern unterstützt, und insbesondere im mobilen Web sind sie stark auf dem Vormarsch. Höchste Zeit also, die neuen Möglichkeiten zu erkunden und sich fit für die Zukunft zu machen! Dieses Buch richtet sich an Webentwickler, die bereits Grundkenntnisse in HTML und CSS mitbringen und die ohne viel Umschweife in die praktische Arbeit mit den neuen Webstandards einsteigen möchten. Es stellt ihnen in verständlicher Form die neuen Elemente und APIs von HTML5 sowie interessante CSS3-Features vor, die schon lange auf der Wunschliste vieler Webdesigner standen. Zunächst machen Sie sich mit den Neuerungen vertraut und erfahren, wie Sie Audio, Video und Vektorgrafiken in Ihre Website einbetten, ohne auf Flash zurückzugreifen. Danach lernen Sie weitere wichtige Features kennen, die die Entwicklung von Websites mit HTML5 und CSS3 wesentlich komfortabler machen: Geolocation, Web Sockets, Offline-Unterstützung für Webanwendungen und Cross-Document Messaging. Außerdem lernen Sie CSS3-Selektoren kennen, die beeindruckende neue Design-Möglichkeiten bieten und für eine verbesserte Usability und Accessibility sorgen. Obwohl die Entwicklung von HTML5 und CSS3 noch nicht abgeschlossen ist, werden die beiden neuen Standards bereits heute von den meisten modernen Browsern unterstützt. Für Nutzer älterer Browser sollten Sie Fallback-Möglichkeiten implementieren, damit auch sie problemlos auf Ihre Website zugreifen können. Solche Ausweichlösungen werden Ihnen für alle im Buch vorgestellte Features und Lösungen an die Hand gegeben. Darüber hinaus stehen Ihnen die entwickelten Beispiele als Download-Code zur Verfügung.

Ebooka przeczytasz w aplikacjach Legimi na:

Androidzie
iOS
czytnikach certyfikowanych
przez Legimi
Windows
10
Windows
Phone

Liczba stron: 272

Odsłuch ebooka (TTS) dostepny w abonamencie „ebooki+audiobooki bez limitu” w aplikacjach Legimi na:

Androidzie
iOS
Oceny
0,0
0
0
0
0
0



HTML5 & CSS3: Webentwicklung mit den Standards von morgen

BrianP.Hogan

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 TitelHTML5 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.

O’Reilly Verlag Balthasarstr. 81 50670 Köln [email protected]

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 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.

Vorwort

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: Plattform oder Spezikation?

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.

Wie die Inhalte organisiert sind

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.

Über dieses Buch

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.

Vorkenntnisse

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/

Online-Ressourcen

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/

Kapitel 1. HTML5 und CSS3 im Überblick

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.

1.1 Eine Plattform für die Webentwicklung

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.

Aussagekräftigeres Markup

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.

Multimedia mit weniger Plugins

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.

Bessere Anwendungen

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.

Kommunikation mit anderen Dokumenten

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“.

Web Sockets

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.

Clientseitige Speicherung

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.

Bessere Benutzeroberflächen

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.

Bessere Formulare

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.

Verbesserte Barrierefreiheit

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.

Fortschrittliche Selektoren

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.

Visuelle Effekte

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.

1.2 Abwärtskompatibilität

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.

Joe fragt ...: Ich mag aber die selbstschließenden Tags in XHTML. Kann ich sie weiterhin verwenden?

Natürlich können Sie! Viele Entwickler haben sich wegen der strikteren Anforderungen an das Markup in XHTML verliebt. XHTML-Dokumente verlangen, dass Attribute in Anführungszeichen eingefasst werden, dass Sie Inhaltstags selbst schließen, für Attributnamen Kleinbuchstaben verwenden, und haben so wohlgeformtes Markup in das World Wide Web eingeführt. Der Umstieg auf HTML5 bedeutet nicht notwendigerweise, dass Sie Ihre Gewohnheiten ändern müssen. HTML5-Dokumente sind valide, egal ob Sie lieber die HTML5- oder die XHTML-Syntax verwenden. Sie müssen jedoch die Auswirkungen selbstschließender Tags verstehen.

Die meisten Webserver liefern HTML-Seiten mit dem MIME-Type text/html aus, weil der Internet Explorer unfähig ist, den XHTML-Seiten zugeordneten MIME-Type application/xml+xhtml zu verarbeiten. Deshalb neigen Browser dazu, selbstschließende Tags zu entfernen, weil solche Tags vor HTML5 nicht als valides HTML angesehen wurden. Wenn Sie beispielsweise ein selbstschließendes script-Tag oberhalb eines h2-Tags verwenden

<script language="javascript" src="application.js" /><h2>Help</h2>

dann würde der Browser den schließenden / entfernen, und der Renderer würde anschließend davon ausgehen, dass sich h2 innerhalb des script-Tags befindet, das nie geschlossen wird. Das ist der Grund, warum Sie häufig script-Tags explizit mit einem schließenden Tag finden, obwohl ein selbstschließendes Tag valides XHTML-Markup ist.

Seien Sie sich also solcher möglichen Probleme bewusst, wenn Sie selbstschließende Tags in Ihren HTML5-Dokumenten verwenden. Denn diese Dokumente werden mit dem MIME-Type text/html ausgeliefert. Mehr zu diesem und anderen Problemen können Sie unter http://www.webdevout.net/articles/beware-of-xhtml#myths erfahren.

1.3 Der Weg in die Zukunft ist steinig

Es gibt einige Hürden, die der weiteren Verbreitung von HTML5 und CSS3 im Wege stehen. Manche sind offensichtlich, andere nicht.

Internet Explorer

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.

Barrierefreiheit

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.

Kuchen und Zuckerguss

Ich mag Kuchen. Ich mag Torte lieber, aber Kuchen ist auch ziemlich gut. Am allerliebsten mag ich Kuchen mit Zuckerguss.

Wenn Sie Webanwendungen entwickeln, dürfen Sie nicht vergessen, dass die hübsche Benutzeroberfläche und die schicken JavaScripts lediglich der Zuckerguss auf dem Kuchen sind. Ihre Website kann auch ohne dieses ganze Zeug richtig gut sein. Und genau wie bei einem Kuchen brauchen Sie ein Fundament, auf das Sie den Zuckerguss auftragen können.

Ich habe einige Leute kennengelernt, die keinen Zuckerguss mögen. Sie kratzen ihn vom Kuchen ab. Ich habe auch Leute kennengelernt, die Webapplikationen aus verschiedenen Gründen ohne JavaScript verwenden.

Backen Sie für diese Menschen zuerst einen wirklich tollen Kuchen. Und tragen Sie erst dann den Zuckerguss auf.

Veraltete Tags

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.

Konkurrierende Unternehmensinteressen

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.

HTML5 und CSS3 befinden sich noch in der Entwicklung

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/

Teil I. Bessere Benutzeroberflächen

Kapitel 2. Neue strukturelle Tags und Attribute

In den ersten Kapiteln dieses Buchs sprechen wir darüber, wie wir mit den Funktionen von HTML5 und CSS3 unseren Benutzern verbesserte Interfaces bieten können. Sie erfahren, wie Sie bessere Formulare erstellen, Tabellen einfacher gestalten und die Barrierefreiheit Ihrer Seiten für unterstützende Geräte verbessern. Außerdem erfahren Sie, wie Sie bei der Erzeugung von Inhalten die Usability von Stylesheets für den Druck optimieren, und Sie erforschen das „In-place-Editing“ mit dem neuen Attribut . Zunächst sehen wir uns aber an, wie wir mit den neuen Elementen von HTML5 unsere Seiten besser strukturieren können.

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!