Tag Archives: web applications

Neues in HTML5

Geschichte von HTML5

Das W3C sah die Zukunft für HTML in XHTML2. Es wollte ein XHTML2, das ähnlich wie XML kaum fehlertolerant ist und bei kleinsten Fehlern das Rendering der Page abbricht. Man spricht in solchen Zusammenhängen von drakonischer Fehlerbehandlung (draconian error handling).

2004 bildete sich eine Arbeitsgruppe zwischen Opera Software ASA und der Mozilla Foundation, die einen eigenen Entwurf entwickelte. Die Arbeitsgruppe nennt sich Web Hypertext Application Technology Working Group (WHATWG).  Die WHATWG störte sich daran, dass das W3C durch den akademischen Hintergrund viel zu lange für Weiterentwicklungen brauchte und wollte eine fehlertolerantere Interpretation.

Die WHATWG stellte 2004 ihr Konzept dem W3C vor. Das Konzept der WHATWG folgte diesen Zielvorgaben:

  • Stark fehlertolerant: Wenn der Browser etwas nicht versteht, soll er es einfach übersehen und die Seite weiterrendern
  • Die Technologie soll abwärts kompatibel sein
  • Das Markup wird mehr Scripting-Eigenschaften erhalten
  • Der praktische Nutzen wird priorisiert
  • Die Spezifikation ist Geräte-unabhängig
  • Die Weiterentwicklung wird in einem offenen Prozess erfolgen

Die Browserhersteller hatte Probleme damit, dass durch die Lesart der Weiterentwicklung des W3C alte Webseiten nicht mehr funktionieren würden. Andererseits konnte das W3C vor allem nichts damit anfangen, dass HTML Applikationsnähe bekommen sollte.

Das W3C lehnte den Entwurf ab, aber die WHATWG entwickelt ihr Konzept weiter, und nannte es „Web Applications 1.0“. In dieser Zeit gesellte sich Apple Inc. zur WHATWG.

Mit der Zeit sah die W3C ein, dass sie mit ihrem Ansatz nicht weiterkam und entschied 2006 ihre eigene Linie aufzugeben und auf der bisherigen Arbeit der WHATWG aufzusetzen. Ab diesem Zeitpunkt arbeiteten beide Organisationen gemeinsam. 2 Jahre später gab das W3C sogar die Entwicklung von XHTML2 auf.

Unterschiede

Die aktuelle Fassung von HTML5 ist bei beiden Gruppen trotzdem leicht unterschiedlich. Während die WHATWG die Fassung der W3C in ihrer Dokumentation includiert, erweitert sie diese um eigene Angaben und Features.

Die Unterschiede sind:

  • Ein Teil ist beim W3C schon in anderen Dokumenten definiert worden
    • Canvas 2D Graphics Context
    • Microdata und der Microdata Sprachumfang
    • Cross-document messaging (bekannt als Communications)
    • Channel messaging (auch bekannt als Communications)
  • Das W3C will manche Entwicklungen erst in späteren Versionen einbinden
    • Das sind: das „device“-Element, das „ping“-Attribut, das „time tacked“-Modell, das „WebSRT“-Format  sowie die Regeln um HTML nach ATOM zu konvertieren
  • Die WHATWG-Version führt auch mehr Beispiele an und gibt Tipps zur Implementierung

Was gehört nicht zur HTML5?

Folgende Features sind nicht Teil von HTML5, entweder wurden sie aus dem Vorhaben gestrichen oder es wurde durch Dritte fälschlicherweise angenommen, dass sie zu HTML5 gehören werden:

  • Web Workers
  • Web Storage
  • WebSocket API
  • WebSocket protocol
  • Server-sent Events
  • Web SQL Database
  • Media Type Sniffing
  • The Web Origin Concept
  • Geolocation API
  • SVG
  • MathML
  • XMLHttpRequest
  • Parts of CSS

Wann ist HTML5 einsetzbar?

Laut der WHATWG ist HTML5 fertig. Die Browser müssen nur alle Features unterstützen. Laut dem W3C wird die Entwicklung an HTML5 beendet sein, wenn beide Versionen zusammengeführt werden.

Die Unterschiede zwischen HTML 4 und HTML5?

Doctype

Man kann den MIME type eines Dokuments als text/html definieren

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
   <p>Example paragraph</p>
  </body>
</html>

oder als application/xhtml+xml

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

Es reicht nun also den doctype so anzugeben:

<!doctype html>

Character encoding wird nun mit

<meta charset="UTF-8">

angegeben. Man kann aber weiterhin

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

schreiben.

Da sich HTML5 weiter von SGML wegbewegt, entfällt die Angabe einer DTD, beispielsweise

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Internationalized Resource Identifier (IRI)

HTML5 unterstützt Internationalized Resource Identifier (IRI), also die internationalisierte Form der Uniform Resource Identifier (URI), wenn das Dokument als UTF-8 oder UTF-16 ausgezeichnet wurde.

Strukturierung

Es gibt neue Elemente, die die Strukturierung eines Dokumentes erleichtern sollen:

  • section: damit können Bereiche unterteilt werden
  • article: repräsentieren fremden Content (Blog-Eintrag oder einen Zeitungsartikel)
  • aside: Inhalte, der nur wenig Bezug zum Rest der Seite hat
  • hgroup: Der Header einer Section
  • header: repräsentiert Elemente, die bei Auszeichnung von Einleitungen oder der Navigation helfen können
  • footer: ist der footer einer Sektion, es kann Informationen z.B. über den Autor halten
  • nav: repräsentiert eine Sektion, die der Navigation dient
  • figure: beschreibt Elemente, deren Fluß unterschiedliche zum Rest der Seite ist, etwa ein Video
  • figcaption: ist ein Kind-Element von figure und beschreibt etwa die Bildunterschrift

 

Weitere neu eingeführte Elemente:

  • video and audio: für multimedia content
  • embed: wird bei plugin content benötigt
  • mark: beschreibte Inhalte, der Beziehung zu anderen Kontexten erhalten werden soll
  • progress: Um die Fortdauer einer Aktion zu markieren (etwa Download)
  • meter: zeigt Maßeinheiten (etwa freier Speicherplatz)
  • time: Datum oder Zeit
  • ruby, rt and rp: Um ruby Anmerkungen zu ermöglichen
  • wbr: Möglichkeit um Zeilenumbruch anzuzeigen
  • canvas: Um Grafiken zu rendern
  • command: Um Befehle aufrufbar zu machen
  • details: zusätzliche Informationen oder Steuerung ermöglichen
  • summary: bedeutet dessen Zusammenfassung oder Legende
  • datalist: kann zusammen mit seinem Attribut list verwendet werden, um Comboboxen zu erstellen
  • <input list="browsers">
     <datalist>
     <option value="Safari">
     <option value="Internet Explorer">
     <option value="Opera">
     <option value="Firefox">
     </datalist>
  • >keygen: Schlüsselpaar Generierung
  • output: etwa Ausgabe einer Kalkulation welche durch Script-Verarbeitung ermittelt wird

Neue Attribute:

  • Um Konsistenz zwischen den Elementen a, area und link zu erreichen, wurde das media-Attribut dem a- und area-Element sowie die Attribute hreflang und rel dem areal-Element zugewiesen
  • Target ist nun für a und area nicht mehr deprecated. Es kann nun sogar auch in base benutzt werden
  • Das value-Attribut für li ist nicht mehr deprecated sowie das start-Attribut für ol
  • Mit reversed kann man ol-Items als absteigend deklarieren
  • menu bekommt  neue Attribute, nämlich type und label, mit contextmenu kann man auf ein Kontextmenü zugreifen
  • in style kann man mit scope, um zugewiesen styles nur in diesem Bereich wirksam zu machen
  • async in script beeinflusst das Laden und das Ausführen von Scripts
  • html erhält manifest, mit dem das offline-Verhalten beeinflussen kann
  • link erfährt mit dem Attribute sizes die Möglichkeit die Größe von Favicons anzuzeigen
  • Iframe bekommt drei neue Attribute: sandbox, seamless und srcdoc

Formulare

  • Es gibt nun ein autofocus-Attribut für input, select, textarea und button. Kann von Usern in den Browser-Einstellungen abgeschaltet werden.
  • Für textarea und input gibt es ebenso neu ein placeholder-Attribut. Beispiel: <input placeholder=”me [at] domain [dot] com”>
  • Die Elemente input, output, select, textarea, button und fieldset können nun das Attribut form enthalten. Das ermöglicht die Plazierung außerhalb eins form-Elementes.
    <label>Email:
     <input form=x>
    </label>
    <form></form>
  • Input und textarea erhalten ein required-Attribut
  • Form bekommt ein novalidate-Attribut, was aussagt, dass es nicht validiert werden muss. Validation wird momentan nicht ausreichend unterstützt. Manche Browser zeigen keinen Fehlermeldung, aber erlauben kein Submit.
  • input und botton bekommen neue attribute
    • formaction überschreibt action
    • formenctype überschreibt enctype
    • formmethod überschreibt method
    • formnovalidate überschreibt novalidate
    • formtarget überschreibt target
  • Das type-Attribut des input-Elementes hat nun folgende neue Werte: tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range, color. Das Gute daran, wenn ein Browser den Input-Type nicht erkennt, dann fasst er ihn als type=text auf, sogar der IE6.
  • number<input min=”0″ max=”10″ step=”2″ value=”6″>
  • Slider (Regler-Ansicht)<input min=”0″ max=”10″ step=”2″ value=”6″>

Globale Attribute:

  • Die schon bestehenden Attribute:  class, dir, id, lang, style, tabindex und title sind nun auf alle Elemente anwendbar
  • Alle in HTML4 bekannten Attribute derart onevent-name sind nun globale Attribute
  • Diese globalen Attribute sind neu dazugekommen
    •  Contenteditable: zeigt, dass das element editierbar ist
    •  Contextmenu: zeigt auf ein Kontextmenü
    •  data-*: hiermit kann man eigene Attribute definieren
    • Draggable: kann in Zusammenhang with drag & drop benutzt werden
    • Hidden: ein Element ist nicht von Bedeutung
    • role and aria-*: Diese können für assisstierende Technologien benutzt werden
    • spellcheck: definiert, ob die Rechtschreibung von Elementen überprüft werden darf

Elemente, die eine teilweise Änderung erhalten haben

  • Ein a-Element ohne ein href-Attribute bedeutet nun ein Platzhalter
  • Address wird von section begrenzt
  • Das b-Element ähnelt nun einem span
  • cite-Element  ist nun der Titel eines Werkes (Buch, Gedicht, Lied…) und nicht der Name eines Autors
  • hr bedeutet nun einen thematischen Bruch
  • i ist eine Art von span, die eine alternative Stimme oder Stimmung oder einen Unterschied ausdrückt
  • Wenn es das User-Interface nicht vorsieht, soll label nicht mehr auf das Control fokussieren
  • menu wurde für Toolbars und Kontextmenüs umdefiniert
  • small ist nun zuständig für Seitenkommentare oder rechtliche Hinweise
  • strong bedeutet nun „wichtig“ statt „betont“
  • Unter head-Element darf nicht mehr object als Kind-Element vorkommen

Veränderte Attribute

  • Das type-Attribut ist bei script nicht mehr zwingend anzugeben, wenn ECMAScript gemeint ist und bei style nicht mehr, wenn CSS gemeint ist
  • Diese Elemente können zwar aber sollen nicht mehr benutzt werden
  • Border bei img
  • language bei script
  • Statt name bei a besser id
  • Summary bei table

Entfernte Elemente

  • Folgende Elemente werden zwar vom User Agent noch verstanden, sollen aber vermieden werden, weil sie Präsentations-bezogen sind, also besser mit CSS darstellbar: basefont, big, center, font, s, strike, tt, u
  • Diese Elemente werden nicht mehr unterstützt, weil sie die Usability und die Zugänglichkeit (Accessibilty) einschränken: frame, frameset, noframes
  • Diese Elemente werden ausgeschlossen, weil sie nicht oft benutzt wurden, unterschiedlich verstanden wurden und weil andere Elemente die Aufgaben übernehmen können:
    • abbr statt acronym
    • object statt applet
    • isindex kann von form Bausteinen gesteuert werden
    • ul statt dir
  • noscript kann nicht im XML-Kontext eingesetzt werden, da es nur durch den HTML-Parser genutzt werden kann.

Attribute, die nicht mehr benutzt werden sollen

  • rev und charset in link oder a
  • shape und coords in a.
  • longdesc in img und iframe
  • target in link
  • nohref in area
  • profile in head
  • version in html
  • scheme in meta
  • In object: archive, classid, codebase, codetype, declare und standby
  • valuetype und type in param
  • axis und abbr in td und th
  • scope in td

Attribute, die nicht mehr benutzt werden können, da sie besser mit CSS beschrieben werden:

  • align in caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead und tr
  • alink, link, text und vlinks in body
  • background in body
  • bgcolor in table, tr, td, th und body
  • border in table und object
  • cellpadding und cellspacings in table
  • char und charoffs in col, colgroup, tbody, td, tfoot, th, thead und tr
  • clear in br
  • compact in dl, menu, ol und ul
  • frame in table
  • frameborder in iframe
  • height in td und th
  • hspace und vspaces in img und object
  • marginheight und marginwidths in iframe
  • noshade in hr
  • nowrap in td und th
  • rules in table
  • scrolling in iframe
  • size in hr
  • type in li, ol und ul
  • valign in col, colgroup, tbody, td, tfoot, th, thead und tr
  • width in hr, table, td, th, col, colgroup und pre

Neue APIs

HTML5 führt einige neue APIs ein, die vor allem bei den neuen Elementen video und audio sowie den Attributen contenteditable und draggable einsetzbar sind.

Canvas

Mit canvas kann man ein Bild rendern, mit Javascript zeichnen, was man will. Momentan ist nur 2D möglich. Das canvas ist ein Rechteckiges Element, welches ein zweidimensionales Gitternetzwerk darstellt. Die Koordinaten (0,0) stellen die oberste linke Ecke da. Die erste Zahl bedeutet die x-Achse – nach rechts gehende, die zweite Zahl die y-Achse – also nach unten gehend.

Es gibt folgende Pfad-Funktionen: moveTo(x, y) um den Stift an den übergebenen Punkt an zu setzen, es gibt lineTo(x, y) um eine Linie zu dem übergebenen End-Punkt zu zeichnen.

Mit der Eigenschaft strokeStyle kann man dem Pfad eine Farbe übergeben und mit stroke() wird endlich gezeichnet.

Der Eigenschaft font kann man Schriftart- und Größe mitteilen. Mit der Funktion fillText() den Text schreiben.

Canvas selbst folgt nicht dem Box-Model. Es gibt auch Gradienten. Mit drawImage() lassen sich Bilder zeichnen.

Video

Video: früher musste man ein Plugin wie QuickTime oder Flash haben, um Videos abzuspielen. Nicht alle Codecs werden von allen Browser unterstützt und manche haben versteckte Lizenzkosten.

<video src="pr6.webm" width="320" height="240" controls></video>

Zusätzlich einstellbar: preload=“none“ und autoplay

Browser verschiedene Formate anbieten:

<video width="320" height="240" controls>
  <source src="pr6.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
  <source src="pr6.ogv"  type='video/ogg; codecs="theora, vorbis"'>
</video>

Es kann ebenso wichtig sein, den MIME type in htaccess zu setzen

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Da nicht alle Browser alle Codecs unterstützen, muss man verschiedene Codecs anbieten. Nach meiner Meinung ist das kein Fortschritt. Als Fallback muss man wieder einen Flash-Movie anbieten.

Semantic:

Microformat und RDFa und Microdata

html is root

2 Children: head and body

<section itemscope itemtype="http://data-vocabulary.org/Person">
<h1 itemprop="name">Mark Pilgrim</h1>
<p><img itemprop="photo"
     src="http://www.example.com/photo.jpg"
     alt="[me smiling]"></p>
<a itemprop="url" href="http://diveintomark.org/">dive into mark</a>

Fazit

HTML5 ist einsetzbar. Sogenannte „moderne Browser“ unterstützen schon viele Features, der Internet Explorer 9 wird ebenso ein Riesenschritt in diese Richtung unternehmen.

Ansonsten kann man mit Tools nachhelfen.

  • Mit Modernizer kann man feststellen, welche Features unterstützt werden.
  • Html5-shims ist etwa ein Scripts welches HTML5 Funktionalität in alten Browsern simuliert.
  • Explorercanvas ist eine JavaScript library, die dem IE canvas beibringt

Problem: Wenn ein Tag einem Browser nicht bekannt ist, dann wird er einmal inline angezeigt, zum zweiten wird aber auch der DOM-Tree durcheinander gebracht.

HTML5 bietet viele sinnvolle Neuerungen, mich faszinieren die Möglichkeiten einer Webseite mehr Semantik und Struktur zu geben.

Andererseits ist die Ungewissheit, wie ältere Browser die Webseite anzeigen oder der Aufwand, den man mit Workarounds hat, sicherlich ein Hindernis.

Da HTML5 alten Markup unterstützen wird, fällt ein wichtiger Anlass weg, direkt auf die neue Technologie aufzubauen.

Ich denke, dass in zwei Jahren jeder Web-Entwickler HTML5 verwenden wird.

Quellen