HTML5

Erstellen von Anwendungen mit HTML5: Was Sie wissen müssen

Brandon Satrom

HTML5 ist da, und das Web ist nicht mehr dasselbe.

Das haben Sie so oder ähnlich sicher schon mal gehört. Dann haben Sie sich wahrscheinlich aufgeregt, mit den Augen gerollt oder “warum?” gemurmelt und etwas die Stirn gerunzelt. Oder auch alles zugleich.

Ich würde Ihnen nichts davon zum Vorwurf machen. HTML5 ist aufregend, und es hat das Potenzial, das Web, wie wir es kennen, zu verändern, aber es wird auch etwas zu sehr aufgeblasen. Was noch wichtiger ist: seine eigentliche Bedeutung wird leicht übersehen. Ich habe selbst auf alle diese Weisen reagiert, als ich Anwendungen mit HTML5 erstellte. Dies ist ein weites Feld; es ist schwer, bei HTML5 den Durchblick zu gewinnen, und noch schwerer, sich zu entscheiden, wo man mit dieser hochinteressanten neuen Technik beginnen soll.

Dies ist der erste Artikel in einer Serie für das MSDN Magazin, und das Ziel besteht darin, Ihnen ein vollständiges Bild davon zu geben, warum der erste Satz dieses Artikels richtig – und wichtig – ist. In den nächsten Monaten möchte ich Ihnen helfen zu verstehen, was HTML5 für Sie bedeutet, sowohl als Webentwickler, als auch als Entwickler, der Microsoft-Tools und Technologien verwendet. Ich hoffe, dass es mir gelingt, einige der Komplexitäten von HTML5 für Sie zu vereinfachen und die Hype etwas zu entmystifizieren. Ich werde auch die heute verfügbaren Funktionen von HTML5 vorstellen sowie einige der interessanten Technologien, die zwar etwas entlegener sind, aber Aufmerksamkeit verdienen. Außerdem geben ich Ihnen einige Tips, die Ihnen helfen, jetzt schon HTML5-Technologien zu übernehmen, während Sie weiterhin Ihren Benutzern mit älteren Browsern ein optimales Erlebnis ermöglichen.

Wenn Sie brennend an HTML5 interessiert sind, möchte ich dazu beitragen, dieses Interesse in Ideen umzusetzen, die Sie sofort praktisch nutzen können. Wenn Sie skeptisch sind, möchte ich Ihnen helfen, zu verstehen, warum HTML5 wichtig ist. Und auch wenn Sie noch nicht einmal wissen, was HTML5 überhaupt ist, keine Angst: das ist unsere erste Station in dieser Serie.

Was ist HTML5?

Sie haben vielleicht schon gemerkt, dass HTML5 für verschiedene Benutzer verschiedene Bedeutungen hat. Für einige bedeutet es einfach neue<header> und <footer> und eine Handvoll neuer Attribute für das Markup. Für andere bedeutetes es alles, was am Web neu und interessant ist, einschließlich Technologien, die in nur einem einzigen Browser implementiert sind oder andere Spezifikationen, die nicht offiziell zu HTML5 gehören. In der Tat ist das Verständnis der wirklichen Bedeutung von HTML5 oft der erste Stolperstein, mit dem viele von uns zu tun haben.

Und, ehrlich gesagt, es eine gewisse Rechtfertigung für die große Zahl der verschiedenen Definitionen. HTML5 ist riesig! Formal definiert durch eine internationale Normungsorganisation namens World Wide Web Consortium (W3C), besteht HTML5 aus über 100 Spezifikationen, die sich auf die nächste Generation der Webtechnologien beziehen. Mann könnte meinen, das es sich die W3C etwas zu leicht macht, wenn Sie alle diese mehr als 100 Spezifikationen unter dem Namen HTML5 zusammenfasst. Es ist zwar schwierig, etwas so vielfältiges wie HTML5 eindeutig zu definieren, aber ich glaube, dass die W3C versuchte, den Rahmen für das zu finden, was sich im Web ändert, indem es HTML5 als vereinheitlichendes Konzept für diese Veränderungen einführte.

HTML5 ist in der Tat ein Sammelbegriff, der eine Serie von HTML-, CSS- und JavaScript-Spezifikationen beschreibt, die entwickelt wurden, um Entwickler in die Lage zu versetzen, die nächste Generation von Websites und Anwendungen zu entwickeln. Das Bemerkenswerte an dieser Definition ist, dass sie aus drei Teilen besteht: HTML, CSS und JavaScript. Sie definieren, wie Entwickler verbessertes Markup, reichhaltigere Formatmöglichkeiten und neue JavaScript-APIs verwenden, um den größten Nutzen aus neuen Webentwicklungsfunktionen zu ziehen. Einfach gesagt: HTML5 = HTML + CSS + JavaScript.

Das ist alles. Bei HTML5 geht es um Änderungen an HTML, CSS und JavaScript. Besser als alle die über 100 Spezifikationen beschreiben diese drei Begriffe die Breite und den Anwendungsbereich von HTML5. Meinen Sie trotzdem, dass das zu stark vereinfacht ist? Das mag sein, aber wie Sie gleich sehen werden, ist eine umfassende Definition von HTML5 nicht so wichtig wie die Technologien, für die sich Ihrer Meinung nach Zeit und Anstrengung lohnen.

Da wir jetzt eine Definition haben, wollen wir kurz betrachten, welchen Platz Microsoft in der Welt von HTML5 einnimmt.

HTML5 und Internet Explorer

Wie erwähnt, wurde der Set von Spezifikationen, die HTML5 bilden, von der W3C zusammengestellt. Das W3C besteht aus Mitarbeitern, Organisationen und Einzelpersonen, die dazu beigetragen haben, die Zukunft des Webs zu definieren. Das W3C ist eine konsensbasierte Organisation. Es arbeitet normalerweise durch Bildung von Ausschüssen (Arbeitsgruppen genannt), um Arbeitsbereiche zu zusammengehörigen Spezifikationen einzuteilen. Spezifikationen können von jedem Mitglied vorgeschlagen werden, und alle Spezifikationen im Besitz der W3C – das sind mehr als die, die unter den Sammelbegriff HTML5 fallen – durchlaufen einen fünfstufigen Prozess vom ersten Entwurf bis zu offiziellen Empfehlung.

Microsoft ist Mitglied der W3C und spielt eine sehr aktive Rolle im Spezifikationsprozess für viele HTML5-Standards und Arbeitsgruppen. Wie alle wichtigen Anbieter von Browsern, hat Microsoft in großem Stil in HTML5 investiert und arbeitet mit der W3C und anderen Anbietern zusammen, um sicherzustellen, dass sich Entwickler darauf verlassen können, dass HTML5-Technologien zuverlässig in einer interoperablen Weise auf allen wichtigen Browsern implementiert wird.

Microsoft verfolgt als Browseranbieter vier Ziele:

1. Über Internet Explorer 9 das heute beste websitegeeignete HTML5 bereitzustellen.
2. Über Internet Explorer Platform Previews Entwicklern neue Funktionen darzustellen.
3. Durch Tests, die der W3C vorgelegt werden, in Interoperabilität zu investieren.
4. Instabile Standards über HTML5-Labs zu prototypisieren.

“Site-Ready HTML5” ist der Terminus, den Microsoft verwendet, um die HTML5-Technologien zu beschreiben, die Sie heute verwenden können, da sie von allen wichtigen Browsern unterstützt werden. Technologien wie die neuen HTML-Tags, Canvas, Scalable Vector Graphics, Audio und Video, Geolocation, Web Storage und viele neue CSS3-Module fallen alle in diesen Bereich, und sie werden in Internet Explorer 9 wie auch in den anderen Mainstream-Browsern implementiert. Wir werden in dieser Serie einige Zeit darauf verwenden, diese Technologien zu diskutieren, wie auch die Frage, wie Sie diese heute übernehmen können.

Für das, was über das heute Verfügbare hinausgeht, verwendet Microsoft öffentliche Platform Previews, um Entwickler darüber zu informieren, was die nächste Version des Browsers bringt, wie auch zum Sammeln von Feedback. Für Internet Explorer 9 hat Microsoft alle sechs bis acht Wochen Platform Previews veröffentlicht, in denen jeweils neue Erweiterungen, Funktionen und Verbesserungen von HTML5 vorgestellt wurden, damit Entwickler sie ausprobieren und bewerten können. Internet Explorer 9 wurde im März veröffentlicht, und Anfang Juli veröffentlichte Microsoft zwei Platform Previews für Internet Explorer 10. Man sieht also, dass Microsoft Internet Explorer Previews in regelmäßigen Abständen veröffentlicht. Als Entwickler werden Sie sicher diese neuesten Previews nutzen wollen, um zu erfahren und zu testen, wie diese Browser sich entwickeln und Einfluss darauf zu nehmen. Sie können den neuesten Internet Explorer Platform Preview unter IETestDrive.com herunterladen.

Um sicher zu gehen, dass HTML5 browserübergreifend funktioniert, hat Microsoft viel in Interoperabilität investiert, indem es der W3C die größte einzelne Suite von Testfällen im Zusammenhang mit HTML5 unterbreitete. Zum ersten Mal wird diese Suite von Testfällen von der W3C als autoritative Quelle für die HTML5-“Bereitschaft” der einzelnen Browser verwendet. Das Endergebnis für Sie und mich als Entwickler besteht darin, dass wir HTML5-Technologien einmal übernehmen und implementieren und dabei zuversichtlich sein können, dass sie in allen Browsern konsistent funktionieren. Weitere Informationen zu den Aktivitäten von Microsoft zur Interoperabilität finden Sie unter bit.ly/dxB12S.

Während einige HTML5-Technologien bereits in Internet Explorer 9 vorhanden sind und andere für Internet Explorer 10 über Internet Explorer Platform Previews angekündigt werden, brauchen ist für einige verbreitete und berichtenswerte Spezifikationen etwas mehr Arbeit von der W3C und den Browseranbietern nötig, bevor sie zur Implementierung in unseren Anwendungen bereit sind. Ein Bespiel dafür ist Web Sockets, eine interessante neue Spezifikation, mit der Entwickler bidirektionale Kommunikationskanäle mit Back-End-Servern eröffnen können, um ein Niveau von “Echtzeit”-Verbindungen zu ermöglichen, das zuvor in Webanwendungen nicht verfügbar war. Als Entwickler können Sie sich wahrscheinlich zahllose Verwendungen für Web Sockets in den Anwendungen vorstellen, die Sie gerade entwickeln. Aber die Web Sockets-Spezifikation ist immer noch einer schnellen Veränderung unterworfen, wobei entscheidende Aspekte noch im Fluss sind und innerhalb der W3C diskutiert werden. In dieser Situation wäre es heute schwierig, diese Funktion konsistent und zuverlässig für alle Browser bereitzustellen.

Für instabile und in der Entwicklung befindliche Spezifikationen wie Web Sockets (auf das wir in einem zukünftigen Artikel ausführlich eingehen werden) schuf Microsoft HTML5 Labs, eine Website, auf der Entwickler mit Probeimplementierungen dieser Technologien experimentieren können. Diese Website bietet Prototypen, die Sie herunterladen können sowie gehostete Demos für einige Spezifikationen. Das Ziel ist, Ihnen einen Platz zu geben, an dem Sie diese Spezifikationen selbst ausprobieren und Microsoft und der W3C Feedback geben können, während sie sich stabilisieren und der Implementierung in Browsern entgegengehen. Weitere Information zu HTML5 Labs finden Sie unter html5labs.com.

HTML5 und Microsoft-Entwicklertools

Neben der Beteilung von Microsoft an der W3C und den HTML5-Technologien, die vom Browser unterstützt werden, hat Microsofts Ansatz für HTML5 eine weitere Dimension, die für Entwickler wichtig ist: Den Ansatz für HTML5-Tools.

Anfang 2011 hat Microsoft zwei seiner Entwicklungstools durch Service Packs aktualisiert: Visual Studio 2010 und Expression Web 4. Die Service Packs für diese beiden Tools boten einen HTML5-Dokumenttyp zur Validierung sowie IntelliSense für neue HTML5-Tags und Attribute. Wenn Sie Visual Studio 2010 SP1 verwenden, können Sie das HTML5-Schema aktivieren, wenn Sie auf Extras | Optionen | Texteditor | HTML | Validierung klicken, und dann die Option HTML5 in der Target-Dropdownliste auswählen, wie in Abbildung 1 gezeigt. Sie können auch HTML5 als Standardschema in der HTML-Quellcodebearbeitungs-Symbolleiste in einer HTML-Datei festlegen, wie in Abbildung 2 gezeigt.

Abbildung 1 Aktivieren des HTML5-Schemas über das Optionsdialogfeld

Abbildung 2 Einstellen des HTML5-Schemas in der Symbolleiste HTML-Quellcodebearbeitung).

Sobald das Standardschema festgelegt ist, erhalten Sie IntelliSense-Unterstützung in Visual Studio für die 28 neuen semantischen Tags in HTML, wie auch neue tagspezifische und globale Attribute, wie in Abbildung 3 gezeigt.

Abbildung 3 HTML5 IntelliSense in Visual Studio 2010 SP1

Im Juni 2011 hat Microsoft seine Unterstützung für HTML5 weiter aktualisiert durch das Web Standards Update für Microsoft Visual Studio 2010 SP1. Diese Erweiterung, die mit allen Versionen von Visual Studio 2010 funktioniert, fügt VisualStudio weitere HTML5 IntelliSense und Validierung hinzu, sie umfasst JavaScript IntelliSense für neue Browserfunktionen wie Geolocation und DOM Storage, und bietet umfassende CSS3 IntelliSense und Validierung. Diese Erweiterung, die regelmäßig aktualisiert wird, um erweiterte Tools für HTML5 bereitzustellen, können Sie von bit.ly/m7OB13 herunterladen.

Für Expression Web 4 SP1 bietet das Einstellen des HTML5-Schemas unter Extras | Seitenoptionen denselben IntelliSense, und das Tool bietet auch CSS3 IntelliSense für mehrere CSS3-Probemodule wie Border-Radius, Box-Shadow, Transform und Ähnliches.

Wenn Sie WebMatrix verwenden (siehe https://www.microsoft.com/web/webmatrix/next/), haben Sie wahrscheinlich festgestellt, dass .html, .cshtml- oder .vbhtml-Dokumente, die Sie erstellen, Standardmarkups enthalten wie die in Abbildung 4 gezeigten. Wie ich im nächsten Artikel in dieser Serie zeigen werde, ist dies ein grundlegendes, gültiges HTML5-Dokument. Besonders bemerkenswert ist, dass der Dokumenttyp und die Metacharsettypen viel einfacher sind. Die Verwendung dieser Dokumenttypen löst den HTML5-Modus in allen modernen Browsern aus, und WebMatrix macht es Ihnen einfacher, indem es standardmäßig ein HTML5-Dokument bereitstellt.

Abbildung 4 Ein Standard HTML-Dokument in WebMatrix

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title></title>
      </head>
      <body></body>
    </html>

Wenn das für Sie noch nicht genug HTML5-Tools sind – nebenbei gesagt, alles seit Januar 2011 – befasst sich auch ASP.NET MVC seit kurzen damit, seit im April das ASP.NET MVC 3-Toolsupdate in MIX11 angekündigt wurde. Neben weiteren Toolfunktionen bietet das ASP.NET MVC 3-Toolsupdate die Option, den HTML5-Dokumenttyp für neue Projekte zu nutzen – und sendet Modernizr 1.7 in den Skriptordner neuer Anwendungen. Modernizr ist eine JavaScript-Bibliothek, die HTML5-Entwicklung sehr vereinfacht; ich werde in einem zukünftigen Artikel genauer darauf eingehen.

Das Bemerkenswerte hierbei ist, dass, obwohl HTML5 gerade erst auf den Browsern zu erscheinen beginnt, offizielle Toolunterstützung schnell hinzugefügt wird, und dass Microsoft sogar Unterstützung für Bibliotheken aus der Community (wie Modernizr) hinzufügt. Sie verfügen heute für das Targeting von HTML5 über einige Hilfe von Microsoft-Tools und Sie können erwarten, dass die HTML5-Unterstützung mit der Zeit besser und umfassender wird.

‘Übernehmen’ von HTML5 in Ihren Anwendungen

Das sollten jetzt erkannt haben, das HTML5 nicht eine einfache Einheit ist, die Sie in einem Schritt übernehmen oder migrieren können. Bei der Übernahme von HTML5 geht es nicht um eine einmalige Entscheidung, sondern darum, eine Evaluierung der einzelnen Technologien durchzuführen und zu entscheiden, welche Technologien die richtigen für Ihre Anwendung sind. Für jede HTML5-Technologie, die Sie evaluieren, achten Sie (mindestens) auf folgende Faktoren, wenn Sie sich entscheiden, welche Technologie für eine Übernahme durch Sie in Frage kommen.

1. Wie weit ist die Technologie browserübergreifend implementiert?
2. Wie würden Sie diese Technologie übernehmen und “Polyfill”-Unterstützung für Browser hinzufügen, die eine bestimmte Funktion nicht unterstützen?

Der erste Faktor ist am Wichtigsten, und sollte Ihnen in Kombination mit einer Kenntnis der Browser, die normalerweise von den Besuchern Ihrer Seite verwendet werden, ein klares Bild davon geben, welcher Teilset der über 100 Spezifikationen eine weitere Evaluierung lohnen. Dieser Teilset sollte aus einem Satz stabiler Spezifikationen bestehen, die Sie heute schon für Ihre Benutzer sicher übernehmen können.

Jedoch selbst mit diesem stabilen Satz von HTML5-Technologien sollten Sie nicht diejenigen Benutzer unberücksichtigt lassen, die noch nicht zu einem neueren Browser übergegangen sind. Wenn Sie intensiv mit der täglichen Entwicklungsarbeit für Ihre Website beschäftigt sind, haben Sie zweifellos eine ungefähre Vorstellung davon, wie viel Prozent der Benutzer Ihre Webseite mit einem bestimmten Browser besuchen. Für die meisten von uns wäre es einfach, sich die Prozentsätze der Benutzer anzusehen, die einen älteren Browser verwenden und zu dem Schluss zu kommen, dass die Einführung von HTML5-Technologien sich negativ auf diese Benutzer auswirken würde. Zum Glück gibt es das “Polyfilling”, sodass wir nicht auf einen fernen Tag in der Zukunft warten müssen, um HTML5 einzuführen.

Paul Irish (ein Entwickler bei den jQuery- und Modernizr-Projekten) definiert einen Polyfill als “… einen Shim, der eine zukünftige API imitiert und ein Sicherungssystem für ältere Browser bietet.” Ein Polyfill ist wie ein Spachtel für Ihre Websites; es ist eine Methode, um festzustellen, ob eine gegebene HTML5-Funktion für den Benutzer, der gerade Ihre Website besucht, verfügbar ist, und entweder einen Shim bereitzustellen, der den Support “ausfüllt”oder einen Verfahren, das Ihrer Website dennoch eine volle Funktionalität ermöglicht.

Die beliebteste Bibliothek im Zusammenhang mit Polyfilling ist Modernizr, die JavaScript-Bibliothek, die ich früher erwähnte. Modernizr bietet einige grundlegende Polyfills für semantisches Markup, Funktionsauffindung für wichtige HTML5-Technologien und Unterstützung für bedingtes CSS basierend auf unterstützten Funktionen. Wie erwähnt, soll Modernizr in einem späteren Artikel behandelt werden; es wird auch (neben vielen anderen Polyfilling-Bibliotheken) eine wichtige Rolle in der ganzen Serie spielen. Um mehr zu erfahren, laden Sie Modernizr unter modernizr.com herunter. 

Wenn es darum geht, auszuwählen, welche Technologien Sie übernehmen wollen, ist Ihre endgültige Liste möglicherweise eine Kombination aus weithin unterstützten Spezifikationen, für die Sie Polyfill-Unterstützung für bestimmte Browser haben. Nur Sie kennen die genaue Zusammensetzung dieser Liste, die auf Ihren aktuellen Anforderungen und Kontexten basiert.

In den kommenden Monaten werde ich verschieden bemerkenswerte Spezifikationen vorstellen, von Geolocation und Forms and Canvas bis zu Web Workers, Web Sockets und IndexedDB. Einige von diesen werden weithin unterstützt und sind “websitefertig”, und einige, wie Web Sockets, sind zu bahnbrechend, um sie unberücksichtigt zu lassen, gleichgültig, wie weit sie heute sind. Bei jeder Spezifikation werde ich die derzeitige und zukünftige Unterstützung behandeln, sowie einige Grundlagen dazu, wie Sie die Funktionen der Spezifikation auf Ihren Websites implementieren können und wie Sie Polyfill-Unterstützung für Browser hinzufügen können, die eine bestimmte Funktion nicht unterstützen.

Wenn sich heute weiter in HTML5 vertiefen möchten, schlage ich vor, dass Sie sich ein paar Bücher zum Thema besorgen. Ich empfehle besonders “Introducing HTML5” (New Riders, 2010) von Bruce Lawson und Remy Sharp, und “HTML5 Up and Running” (O’Reilly Media, 2010) von Mark Pilgrim. Und besuchen Sie auf jeden Fall W3C.org für aktuelle Informationen zu allen Spezifikationen, sowie BeautyoftheWeb.com und IETestDrive.com, um Internet Explorer 9 und Internet Explorer 10 Platform Preview herunterzuladen und mehr zu dem großartigen HTML5-Erlebnis zu erfahren, das Microsoft über den Browser ermöglicht.

Vor allem, beginnen Sie heute mit der Einführung von HTML5. Das Web wird bestimmt nicht mehr so sein, wie es war, und Sie können Teil des Katalysators dabei sein, indem Sie die nächsten großartigen Webanwendungen mit HTML5 erstellen.

Brandon Satrom arbeitet als Developer Evangelist für Microsoft in der Nähe von Austin. Er veröffentlicht Blogs unter UserInexperience.com und Sie können ihm auf Twitter folgen unter Twitter.com/BrandonSatrom.

Unser Dank gilt den folgenden technischen Experten für die Durchsicht dieses Artikels: Jon Box, Damian Edwards und Clark Sell