Was kommt mit HTML5?

HTML5 ist derzeit in aller Munde. Mancher Webdesigner nutzt schon die neuen Tags, die im neuen Standard des World Wide Web-Consortiums (W3C) spezifiziert sind. Darüber hinaus gibt es schon zahlreiche Experimente und Demos, die die neuen Spezifikationnen in kreative Lösungen umsetzen. Doch welche Möglichkeiten stecken hinter der neuen Version des Web-Standards?

Ein Vorgeschmack bietet dieses Beispiel: http://html5demos.com/canvas-grad

Die komplette Demo verzichtet dabei auf Browserplugins. Sie läuft rein mit HTML5, CSS und Javascript. Alle drei Technologien arbeiten noch enger zusammen, so dass noch mehr Interaktivität durch den Browser möglich sein soll. Neben der Zusammenarbeit mit den Technologien auf der Clientseite gibt es weitere zahlreiche Neuerungen, die für den Begriff HTML5 stehen.

Strukturwandel

Ältere Webseiten boten zur Strukturierung des Mark-Ups diverse Möglichkeiten. Einigen dürften noch Tabellenlayouts in Erinnerung sein, die durch den Einsatz der div-Container nach und nach verdrängt wurden. Es handelt sich um das Universalwerkzeug des Webdesigners, um Inhalte zu Gruppieren, sei es die Navigation der Webseite, der Inhalt oder gar jeder einzelner Artikel eines Blogs. Bei der Verschachtelung der Container ist der Fantasie keine Grenzen gesetzt. Klassen- und ID-Attribute dienten zur Selektion im CSS oder im Javascript-Code.

Eine klare Semantik durch den Quellcode war nur schwer zu erkennen. Deshalb wurden neue Elemente eingefügt, die die div-Container an bestimmten Stellen ersetzen sollen. Die Flexibilität der Gruppierung und Strukturerung  bleibt wohl erhalten, nur dass anstatt div nun das jeweilige Element steht. Im CSS kann mit einfachen Selektoren anstatt mit class- oder id-Attributen gearbeitet werden. Auffällig ist, dass der Aufbau stark an moderne Blogapplikationen erinnert. Im Beispielbild werden diese Punkte deutlicher. Dies ist allerdings nicht die einzige Möglichkeit seine Webseite zu strukturieren. Die Durchsetzungskraft dieser neuen Tags wird sich wohl noch zeigen.

Neuer DOCTYPE

Mit dem neuen Standard kommt auch eine neue Dokumententypdefinition (DTD). Hierbei sei zu erwähnen: Es wird etwas einfacher für den Entwickler mit HTML5, denn die DTD beschränkt sich auf: <!DOCTYPE html>

Vorbei ist es mit den langen eingebauten URLs, die aus einem bestehenden HTML-konformen Dokument kopiert wurden. Die Empfehlung ist nichts weiter als die oben genannte Zeile. Zwar ist es möglich, auch eine längere DTD anzugeben, dies wird vom W3C aber nicht empfohlen und für die Nutzung von HTML5 reicht wirklich nur diese Zeile. Darüber hinaus bleibt zu erwähnen, dass viele HTML-Dokumente, die valide waren auch valide bleiben, trotz des neuen DOCTYPEs.

Formulare: Neue Input-Typen und Attribute

Neben der neuen DTD kommen auch neue Input-Typen für Formulare. Die bekanntesten unter den Inputtypen sind text, textarea oder password. Darunter fallen unter anderen ein Eingabefeld für E-Mail, URL oder ein Autocompletion-Feld. Man fragt sich natürlich, was sich durch die neuen Typen ändern, denn oftmals wurde das normale Textfeld in Kombination mit Javascript zur Erweiterung von Funktionalitäten oder zur einfachen Validierung verwendet.

Die neuen Feldertypen verzichten darauf, dass der Entwickler noch Funktionalitäten in Javascript implementieren muss. So muss beim E-Mail-Textfeld kein regulärer Ausdruck in einer Javascript-Funktion versteckt werden um zu überprüfen, ob die Eingabe auch einer E-Mail-Adresse entspricht. Die Validierung von Formulardaten vereinfacht sich um einiges. Für eigene reguläre Ausdrücke kann man noch immer ein Textfeld um das pattern Attribut erweitert werden. Sämtlicher Code bleibt also im HTML-Dokument. Darüber hinaus können sogar Felder als Pflichtfeld gesetzt werden. Die Browserhersteller liefern dazu das Aussehen und die Standardmeldungen. Die Browserhersteller haben aber noch einige Arbeit vor sich, denn viele Feldtypen sind nur teilweise implementiert, so dass man derzeit nicht davon ausgehen kann, dass jeder Nutzer das gleiche Formular sieht. Dies wird sich erst ändern, wenn alle Hersteller soweit nachgezogen sind. Ein weiterer schöner Nebeneffekt der neuen Inputfelder ist, dass viele Smartphone-Hersteller  ihre Eingabetastaturen den Feldern entsprechend Anpassen. So soll zum Beispiel bei einem Nummernfeld nur ein Tastenfeld aus Ziffern erscheinen und keine komplette QWERTZ-Tastatur. Dies erleichtert dem Benutzer die Eingabe deutlich.

Das Beispiel 01_inputs.html zeigt drei neue Eingabetypen mit ein paar neuen Attributen. Die ersten beiden Typen werden von allen Browsern unterstützt. Der Colorpicker wird zum Beispiel von Chrome aber nicht von Firefox unterstützt.

<!DOCTYPE HTML>
<html>
<head>
<meta charset=“UTF-8″>
<title>Inputs</title>
</head>
<body>
<section>
<form action=““ method=“get“>
<pre>
E-Mail:    <input type=“email“ name=“userEmail“ placeholder=“E-Mail bitte“ required />
URL:       <input type=“url“ name=“homepage“ placeholder=“URL bitte“ />
Farbe:     <input type=“color“ name=“favcolor“ />

<input type=“submit“ />
</pre>
</form>
</section>
</body>
</html>

Canvas: Malen im Browser

Eine weitere Neuerung ist das Canvas-Tag. Mit diesem neuen Tag ist es möglich im Browser Grafiken zu erstellen oder zu bearbeiten. Die Schnittstelle bildet auch hier wieder Javascript. Neben den einfachen Funktionen zum Zeichnen von Formen, wie zum Beispiel Rechtecke, Ellipsen oder Kurven. Die Transformation von Grafiken wird wohl ebenso unterstützt werden, sowie das Schreiben von eigenen Filtern.

Das Beispiel 02_canvas.html implementiert eine einfache Leinwand. Sobald die Maus über die Leinwand bewegt wird, wird eine rote Spur nachgemalt.

<!DOCTYPE HTML>
<html>
<head>
<meta charset=“UTF-8″>
<title>Canvas</title>
<style>
#myCanvas {
border: #cccccc dotted 3px;
}
</style>
</head>
<body>
<section>
<canvas id=“myCanvas“ width=“500″ height=“500″></canvas>
<input type=“button“ value=“leeren“ id=“clearCanvas“/>
<script>
var canvas = document.getElementById(„myCanvas“);
var ctx = canvas.getContext(„2d“);
var brushSize = 4;
// setze Farbe des Context
ctx.fillStyle = „#FF0000“;
document.getElementById(„myCanvas“).onmousemove = malen;

// leere Zeichenfläche
document.getElementById(„clearCanvas“).addEventListener(‚click‘, function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}, false);

// Funktionen
function malen(event) {
var x = event.clientX;
var y = event.clientY;
ctx.fillRect(x, y, brushSize, brushSize);

}
</script>
</section>
</body>
</html>

Web Storages

Eine neue Möglichkeit zur Zustandsspeicherung bieten die sogenannten Web Storages. Bisher verschwinden HTTP-Anfragen eigentlich in die Zustandslosigkeit. Nur mit Cookies kann sich der Browser Daten aus einer Anfrage merken. Doch der zugewiesene Speicher ist relativ begrenzt. Laut der Spezifikation reicht die Kapazität maximal bis 4 Kilobytes und 20 Cookies pro Website. Beim wiederholten Besuch werden zudem die Daten des Cookies an den Server wieder gesendet, solange bis das Verfallsdatum des Cookies erreicht ist. Dies kann, wie bei vielen Webseiten üblich bis zum Ende der derzeit möglichen Zeit.

Ein neuer Ansatz zur Speicherung von Daten auf der Clientseite bilden die sogenannten „Web Storages“. Konkret soll es zwei mögliche Speicherarten geben. Einerseits soll es möglich sein Daten nur solange zu speichern werden bis der Browser geschlossen wird (Session Storage) und andererseits solange bis der Browser selbst die Daten löscht oder diese durch den Nutzer gelöscht werden (Local Storage). Beide Arten der Speicherung bedienen sich Javascript zum Schreiben, Lesen oder Löschen von Daten. Die Kapazität soll dabei vom Browser abhängig sein. Einige Ansätze zielen darauf, dass der Nutzer wohl selbst entscheiden kann, wie viel Speicherplatz dem Browser zugesprochen wird. Hauptsächlich sollen die Werte als Schlüssel-Wert-Paare abgelegt werden. Anders als zu den Cookies, sollen die Daten auf dem Client verbleiben und nicht automatisch zurückgesendet werden. Ein weiterer Ansatz zur Persistenz von Daten sollte eine WebSQL-Datenbank sein, doch die Browserhersteller waren sich in diesem Fall nicht ganz einig. Ein kompletter Austausch von Cookies von Heute auf Morgen ist jedoch unwahrscheinlich. Denn für viele Webseiten- und Webapplikationsbetreiber sind sie noch unentbehrlich.

Das Beispiel 03_storages.html zeigt einen Anwendungsfall für Web Storages. Dort wurden zwei Klickzähler implementiert, die jeweils eine Speicherart nutzen.

<!DOCTYPE HTML>
<html>
<head>
<meta charset=“UTF-8″>
<title>Storages</title>
</head>
<body>
<section>
<h1>Local Storage</h1>
<p>
<button onclick=“clickLocalCounter()“ type=“button“>
Click Local!
</button>
</p>
<p id=“result-local“></p>
<h1>Session Storage</h1>
<p>
<button onclick=“clickSessionCounter()“ type=“button“>
Click Session!
</button>
</p>
<p id=“result-session“></p>
<script>
var resultLocalId = „result-local“;
var resultSessionId = „result-session“;
if (!localStorage.clickcount) {
localStorage.clickcount = 0;
}

if (!sessionStorage.clickcount) {
sessionStorage.clickcount = 0;
}

function clickLocalCounter() {
var text;
if ( typeof (Storage) !== „undefined“) {
increment(localStorage);
text = „Klickzahl: “ + localStorage.clickcount;
} else {
text = „Keine Webstorage Unterstützung“;
}
output(resultLocalId, text);
}

function clickSessionCounter() {
var text;
if ( typeof (Storage) !== „undefined“) {
increment(sessionStorage);
text = „Klickzahl: “ + sessionStorage.clickcount;
} else {
text = „Keine Webstorage Unterstützung“;
}
output(resultSessionId, text);
}

function increment(storageType) {
storageType.clickcount = Number(storageType.clickcount) + 1;
}

function output(elementId, txt) {
document.getElementById(elementId).innerHTML = txt;
}

text = „Klickzahl: “ + localStorage.clickcount;
output(resultLocalId, text);
text = „Klickzahl: “ + sessionStorage.clickcount;
output(resultSessionId, text);
</script>
</section>
</body>
</html>

Drag and Drop

Was uns mittlerweile aus vielerlei Desktop-Software bekannt ist, ist im Web eher unbedeutend: Drag and Drop. Die Maus etabliert sich immer mehr zum Werkzeug innerhalb des Browsers. Wichtig bei dieser Neuerung ist, dass hierfür kein extra Framework nötig ist, um Drag und Drop im Browser zu implementieren. Allein ein paar Handgriffe in Javascript sollen ausreichen um jedes Element im Browser per Drag and Drop bewegen zu können. Dazu wurden neue Javascript-Events eingeführt und zudem das neue Attribut draggable.

Das Beispiel 04_dragndrop.html zeigt eine einfache Möglichkeit Drag and Drop zu realisieren. Dort ist es möglich ein div-Element innerhalb eines anderen zu platzieren.

<!DOCTYPE HTML>
<html>
<head>
<meta charset=“UTF-8″>
<title>Drag and Drop</title>
<style>
#rot {
position: absolute;
background-color: red;
width: 70px;    height: 70px;
margin: 5px 0 0 20px;
border: solid;
cursor: move;
}
#blau {
position: relative;
background-color: blue;
margin: 5px 0 10px 20px;
width: 250px; height: 250px;
border: solid;
}
</style>
</head>
<body>
<section>
<h1>Drag and Drop</h1>

<div id=“blau“ ondragenter=“return dragEnterHandler(event)“
ondrop=“return dragDropHandler(event)“
ondragover=“return dragOverHandler(event)“>
</div>
<div id=“rot“ draggable=“true“
ondragstart=“return dragStartHandler(event)“
ondragend=“return dragEndHandler(event)“>

</div>
</section>

</body>
<script>
// Dragging für die rote Box
function dragStartHandler(event) {
var roteBox = document.getElementById(„rot“);
roteBox.style.opacity = 0.5;
roteBox.style.borderStyle = „dashed“;
event.dataTransfer.effectAllowed = „move“;
event.dataTransfer.setData(„Text“, event.target.id);
return true;
}

function dragEndHandler(event) {
var blaueBox = document.getElementById(„blau“);
blaueBox.style.backgroundColor = „yellow“;
var roteBox = document.getElementById(„rot“);
roteBox.style.opacity = 0.75;
roteBox.style.borderStyle = „solid“;
}
</script>

<script>
// Verhalten der blauen Box
function dragEnterHandler(event) {
event.preventDefault();
return true;
}

function dragOverHandler(event) {
var blaueBox = document.getElementById(„blau“);
blaueBox.style.backgroundColor = „green“;
return false;
}

function dragDropHandler(event) {
var dragSrc = event.dataTransfer.getData(„Text“);
event.target.appendChild(document.getElementById(dragSrc));
event.stopPropagation();
return false;
}
</script>
</html>

Aussichten

Neben den eben genannten Features sollen außerdem sind noch weitere Neuerungen geplant:

  • Die „Web Sockets“ sollen eine einfache Möglichkeit bieten um eine bidirektionale Kommunikation zwischen Client und Server zu ermöglichen. Allerdings sollen auf Grund des Umfangs die Spezifikation für den Client per Javascript erfolgen.
  • Ein weiterer Kommunikationskanal sollen „Server Side Events“ bilden. Indem sich der Client beim Server anmeldet kann Letzterer in bestimmten Zeitabständen Daten per Stream an den Client senden.
  • Nicht nur Apple verzichtet auf Flash, auch die Browser sollen bekannte Audio- und Video-Formate ohne das populäre Browser-Plugin abspielen. Die wichtigsten und bekanntesten Codecs sollen per MIME-Type unterstützt werden. Gewisse Funktionalitäten sollen allerdings derzeit nicht im Standard vorgesehen sein, unter anderem das Streaming von Videos.
  • Web Worker sollen für effizientere Webapplikationen sorgen. Sie sollen dafür Sorgen, dass Skripte in Threads ausgeführt werden können.
  • Bei dem Wort „Geolocation“ dürften viele an ein Smartphone denken, welches GPS Daten an App-Betreiber sendet. Auch per HTML5 soll Geolocation um Aufenthaltsdaten des Benutzers über den Browser zu erfahren. Diese werden allerdings nur unter Zustimmung des Benutzers erhoben.

Bis sich HTML5 endgültig etabliert hat, werden wohl noch ein paar Jahre vergehen. Ein Etappenziel ist wohl Anfang 2014 angepeilt, in denen die meisten Funktionalitäten des Standards bei den Browserherstellern fertiggestellt sein sollen. Spätestens 2016 sollen die Arbeiten endgültig abgeschlossen sein.

Linksammlung:

http://www.w3.org/

http://w3schools.com/html/html5_intro.asp

http://html5demos.com/

http://www.html5rocks.com/en/

http://www.chromeexperiments.com