So verwenden Sie jetzt HTML5 auf Ihrer Website

Es gab viele Artikel über HTML5, wie zum Beispiel „Was kann man von HTML5 erwarten?“ “ und „Wie wird HTML5 das Web verändern?“ und so weiter, aber für Webentwickler ist das Wichtigste: Was kann ich jetzt mit HTML5 machen und wie fange ich an, es zu verwenden? Die gute Nachricht ist, dass in HTML5 bereits viele Dinge verfügbar sind.

Eines müssen Sie jedoch zu Beginn verstehen: Sie müssen Ihre Zielgruppe kennen, sonst sollten Sie kein HTML5 verwenden. Wenn die meisten Besucher Ihrer Website IE6 verwenden, gibt es für Sie absolut keinen Grund, HTML5 zu verwenden. Wenn andererseits die Besucher Ihrer Website alle mobile Browser wie iPhones und iPads verwenden, worauf warten Sie dann noch? Sie können jetzt loslegen! Warten Sie, hier sind einige Richtlinien. Es ist noch nicht zu spät, damit anzufangen, nachdem Sie sie gelesen haben.

Welche HTML5-Funktionen können Sie jetzt nutzen?

Obwohl der HTML5-Standard noch ein Entwurf ist und in den Händen von Standardisierungsorganisationen noch diskutiert wird, wurden wichtige Teile von vielen modernen Browsern implementiert. Apple Safari, Google Chrome, Mozilla Firefox, Opera und Microsoft IE9 unterstützen bereits einige Funktionen von HTML5.

Schauen wir uns zunächst an, wie die einzelnen Browser auf der HTML5 TEST-Website abschneiden:

*Apple Safari 5.0: 208

* Google Chrome 5.03: 197

*Microsoft IE7: 12

*Microsoft IE8: 27

*Mozilla Firefox 3.66: 139

* Opera 10.6: 159

Es scheint offensichtlich, dass die meisten Mainstream-Browser, die nicht zum IE-Kern gehören, HTML5 gut unterstützen und dafür sorgen können, dass „Websites, die den HTML5-Entwurf verwenden“, sehr gut funktionieren.

Zurück zum Anfang: Sie können jetzt den HTML5-Dokumenttyp verwenden. Es gibt keinen Grund, ihn nicht zu verwenden. Sie können ihn sogar auf der gesamten Website abfragen und ersetzen:

wird:

Der folgende Code sieht sauberer und unkomplizierter aus, nicht wahr? Wenn Browser Ihre Webseiten standardkonform darstellen würden, würden sie dies immer noch tun.

Lassen Sie uns über das Video sprechen. In vielen Veröffentlichungen zu HTML5 werden die aktuellen Konkurrenten erwähnt, insgesamt vier: Flash, H.264, OGG und WebM. All dies könnte in Zukunft ein Standardformat werden, und keines davon wird in allen Browsern auf allen Plattformen korrekt abgespielt. Leider scheinen die Browser-Sponsoren in absehbarer Zeit kein öffentliches Format für diese Funktion vorbereitet zu haben.

Es ist also offensichtlich, dass das Video-Tag noch nicht das Stadium erreicht hat, in dem es angewendet werden kann. Aber warten Sie, man sollte davon ausgehen, dass das HTML5-Video-Tag formatunabhängig ist. Da ein Video mehrere Quell-Tags enthalten kann, muss es tatsächlich auf diese Weise funktionieren. Wenn Ihr Browser die erste Option nicht unterstützt, versucht er es mit der zweiten, dann mit der dritten, der vierten, der fünften ...

HTML zur Bewältigung solcher Situationen ist ein Open-Source-Projekt, das webbasierte Videos ohne den Einsatz von Skripten und Browser-Sniffing unterstützt und hier zu finden ist.

Semantisch gesehen sind die Tags mit klarer Semantik eine große Veränderung in HTML5. Die Änderung, die Sie sehen können, besteht darin, dass Ihre Website jetzt mit Code ähnlich diesem gefüllt ist:

In HTML5 können Sie es so ausdrücken:

Ist die Semantik klarer? Natürlich müssen wir weiterhin CSS [Cascading Style Sheets] verwenden, um diese Elemente zu formatieren. Aber warten Sie, keine Version des IE unterstützt diese Tags! Das ist ein riesiges Problem für die Menschen! Haben wir wirklich so viel Pech? Zum Glück haben wir eine Lösung: Sie müssen lediglich den folgenden Code in das HEAD-Tag Ihrer Seite einfügen:

HTML5 Shiv ist ein Open-Source-Projekt, das auf einer einfachen Entdeckung basiert: Wenn Sie ein DOM-Element im IE erstellen, können Sie diesen Namen in Stilen verwenden. Zum Beispiel, wenn Sie verwenden

Erstellen Sie ein DOM-Element, dann können Sie der aktuellen Seite eine beliebige Anzahl von foo-Tags hinzufügen, die vom IE formatiert werden. HTML5 Shiv enthält einige HTML5-Elemente, die der IE nicht erkennen kann, und erstellt sie dann einzeln. Auf diese Weise können Sie beispielsweise diese HTML5-Tags verwenden:

Smart Forms, eine weitere Funktion, die HTML5 intelligenter macht. Wenn Sie es satt haben, jedes Mal das gleiche Skript zu schreiben, um die Gültigkeit einer E-Mail-Adresse oder etwas wie einer Telefonnummer, Internetadresse usw. zu überprüfen, sind Sie nicht allein! Es gibt einen Grund dafür, den Browser all diese lästige Arbeit erledigen zu lassen, nicht wahr? Ganz wahr.

Hier ist die Syntax:

Was werden diese älteren Browser tun? Der intelligentere Teil: Wenn sie ein TYPE-Attribut mit einem Wert sehen, den sie nicht kennen, rendern sie das Element mit dem Standardwert Text, was genau das von uns erwartete Abwärtskompatibilitätsergebnis ist. Browser, die HTML5 unterstützen, überprüfen diesen Feldtyp automatisch, aber Sie sollten Ihre vorherigen Skripte besser nicht wegwerfen, zumindest nicht, bis IE9 populär wird.

Wenn Sie sich fragen, was Browser, die diese Art von Aktionen unterstützen, über die Validierung hinaus tun, können Sie diese Formulare auf Ihrem iPhone ausprobieren. Sie werden feststellen, dass sich der mit dem Formular verbundene Tastaturtyp ändert, manchmal ist er alphanumerisch mit einem angehängten @-Symbol und einige haben sogar direkt eine Taste.com. Sie müssen lediglich den Wert des Typattributs ändern.

Es geht auch etwas smarter, hier ist ein neues Attribut:

Dieser Wert kann einfach einen Text angeben, ein Effekt, den man im Internet oft sieht. Wenn Sie darauf klicken, wird der Wert wieder zum Text, wenn Sie ihn verlassen Früher wurde für die Verarbeitung Javascript verwendet, aber jetzt übernimmt der Browser dies für Sie.

Welche HTML5-Funktionen können Sie sofort nutzen?

Aus verschiedenen Gründen (von denen keiner mit IE abgekürzt wird) sind noch nicht alle HTML5-Elemente einsatzbereit. Die Browserunterstützung wird bald verfügbar sein, und in nicht allzu ferner Zukunft werden Sie sofort zwei einsatzbereite Elemente haben.

Magische Schriftarten: Jeder Designer hat einen Traum und hofft, dass alle Besucher der Website beim Entwerfen die Schriftarten installieren, die sie benötigen. Früher gab es verschiedene Methoden, darunter Bilder, Flash usw., aber jetzt gibt es sie Sie haben dieses Recht und können Ihre Besucher dazu zwingen, die von Ihnen angegebenen Schriftarten zu installieren. Dies ist, was CSS3 unterstützt: @font-face-Attribut. Firefox-Versionen vor 3.5 und mobile Versionen von Safari (vor iOS 4) unterstützen dieses Attribut nicht. Wenn Ihre Website viele ähnliche Besuche hat, müssen Sie möglicherweise warten.

Unabhängig davon gibt es keinen wirklichen Grund dafür, dass alle Browser dieselbe Schriftart verwenden. Wenn Sie benutzerdefinierte Schriftarten für Browser bereitstellen möchten, die dieses Attribut unterstützen, und dann eine alternative Schriftart für Browser bereitstellen möchten, die dieses Attribut nicht unterstützen, ist dies derzeit auch eine gute Lösung: http://www.fontsquirrel.com/. Fontface/Generator ist eine gute Anlaufstelle.

Schatten und abgerundete Ecken sind Dinge, die viele Designer glücklich machen. Textschatten, Blockschatten, abgerundete Blockecken usw. sind jetzt von CSS3 unterstützte Standards. Auch hier gilt: Wenn Sie das Rendering in verschiedenen Browsern nicht anhand der Pixelperfektion messen möchten, können Sie diese Funktionen jetzt nutzen. CSS3-Generatoren helfen Ihnen dabei.

Welche Funktionen könnten Sie eines Tages nutzen?

Dieser Katalog enthält Funktionen, über die Entwickler und Designer seit Jahren nachdenken. Leider kann es noch einige Jahre dauern, bis sie in der realen Welt eingesetzt werden können.

Intelligente Formulare wurden bereits erwähnt, aber tatsächlich gibt es noch viele weitere nützliche Elemente, die nicht erwähnt wurden, aber vor einer breiteren Unterstützung gibt es keine Möglichkeit, sie zu verwenden.

Schiebewähler:

Farbauswahl:

Datumsauswahl:

Eingabefeld mit regelmäßiger Validierung:

Erforderliche Eingabefelder:

Keines dieser Tags bietet browser- oder plattformübergreifende Unterstützung, aber wenn dieser Tag kommt, werden Sie diese Tags auf jeden Fall gerne verwenden.

Gedruckte Layouts, eine weitere CSS3-Funktion, werden noch Jahre von ihrer vollständigen Implementierung entfernt sein. Bietet Designern mehrspaltige Layoutfunktionen. Derzeit kann es nur in den Testfällen von Firefox und Safari implementiert werden.

Geolokalisierungserkennung: Mit der Zunahme standortbasierter Dienste wie Gowalla und Foursquare ist es für Browser nützlich, zu wissen, wo sich der Benutzer befindet. Daher ist es nicht verwunderlich, dass auf Mobiltelefonen basierende mobile Browser die ersten sind, die diese Funktion implementieren. Firefxo 3.5 und Safari 5 bieten bereits Unterstützung für die Geolokalisierung. (Der ähnliche Dienst von Chrome wird über Gears implementiert, wird jedoch schrittweise auf HTML5 umgestellt.)

Offline arbeiten und Daten lokal speichern ist eine gute Idee, wenn Sie nicht wissen, dass Sie keine Internetverbindung haben oder eine Anwendung haben, die große Datenmengen verarbeiten muss und häufig darauf ausgeführt werden muss Die Kommunikation mit Kunden ist einfacher als Sie denken Vielleicht haben Sie mehr Daten, oder Sie möchten mehr Daten auf Ihrem Telefon speichern, um zu viel Datenverlust zu vermeiden. Die Lösung besteht derzeit darin, die Anwendung offline zu synchronisieren an die Cloud, wenn eine Verbindung besteht.

Browser, die diese Funktion unterstützen, sind: Firefox 3.5+, Safari Mobile 3.1+, Safari 4+, Chrome 4+.

Zeichenflächen, Animationen und Transformationseffekte – eines der Versprechen von HTML5 kann mithilfe des Canvas-Elements und einiger CSS3-Eigenschaften erreicht werden, um eine vollständig illustrierte und vollständig animierte Website zu erstellen. Dies entspricht dem Standard vom 12. Juli 2010.

Grün = erreicht, Rot = nicht geplant

Verknüpfungen zu hochmodernem HTML5

Wenn Sie nicht darauf warten können, dass IE8 stirbt, gibt es viele Möglichkeiten, ihn zu überspringen und weiterzumachen – auch hier hängt alles von Ihren Besuchern ab. Sehen Sie sich die Zugriffsprotokolle Ihrer Website an, um zu sehen, welche Browser-Header am häufigsten besucht werden. Eine Möglichkeit, dies zu tun, besteht beispielsweise darin, den Chrome Frame von Google zu verwenden, um eine Chrome-Instanz in den IE einzubetten. Wenn Sie wissen, dass Besucher Ihrer Website möglicherweise GCF [Google Chrome Frame] installiert haben, können Sie es zu Ihrem HEAD hinzufügen Das META-Tag in der vorherigen Zeile zwingt den IE, GCF zur Anzeige Ihrer Website zu verwenden:

[Herausgeber: Ich möchte Sie jedoch daran erinnern, dass dadurch der ursprüngliche IE7-Kompatibilitätsmodus von IE=7 ungültig wird. Bitte wägen Sie es selbst ab, wenn Sie dies wünschen. ]

In Verbindung mit einem kurzen Skript von Google, das es Benutzern, die GCF nicht installiert haben, ermöglicht, zur GCF-Installationsseite zu springen, können Sie möglicherweise die Einschränkungen des IE umgehen. [Herausgeber: Ich bin verrückt, es scheint, als würde kostenlose Werbung für GCF kostenlosen Traffic bringen ...]

Die in diesem Artikel aufgeführten Elemente sind nur ein kleiner Teil der aktuellen HTML5- und CSS3-Entwürfe. Wenn Sie einige der neuen Funktionen verwenden müssen, ist es notwendig, die vorhandenen Open-Source-Projekte zu überprüfen, damit Sie Probleme mit der Serverkompatibilität minimieren können .

Viele Medien konzentrieren sich bei der Berichterstattung über HTML auf dessen Haltung, etwa „erst 2022“ und „Flash-Killer“. Die Realität ist, dass HTML5 ein lang erwartetes und völlig neues Upgrade des längst überfälligen HTML4 ist – Sie können es also noch heute verwenden.