HTML5 & CSS3 (Prags) (eBook)

Brian P. Hogan (Autor)

eBook Download: PDF

2012 | 1. Auflage
280 Seiten
O'Reilly Verlag
978-3-89721-317-3 (ISBN)

Infos

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.

Brian P. Hogan arbeitet seit 1995 als freiberuflicher Webdesigner und Berater. Zurzeit beschäftigt er sich mit der Entwicklung von Web-Anwendungen mit Ruby, jQuery, HTML5 und CSS 3. Er liebt es, vor allem im Bereich Webdesign und -entwicklung IT-Schulungen zu geben und als Autor zu arbeiten. Außerdem setzt er sich für die Zugänglichkeit von Websites ein, insbesondere für Menschen mit Sehbehinderungen.

Textauszug

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

Produkt-Details

• Erscheint lt. Verlag: 23.5.2012
• Verlagsort: Heidelberg
• Sprache: deutsch
• Themenwelt: Mathematik / Informatik ► Informatik ► Netzwerke
• Themenwelt: Mathematik / Informatik ► Informatik ► Programmiersprachen / -werkzeuge
• Themenwelt: Informatik ► Web / Internet ► HTML / CSS
• Schlagworte: CSS3 • HTML5 • Web • Webdesign • Webstandards
• ISBN-10: 3-89721-317-6 / 3897213176
• ISBN-13: 978-3-89721-317-3 / 9783897213173