HTML5 Grundlagen

GRUNDLAGENvon Christoph Jansen

Inhalt• Was ist HTML5 und wie entsteht es?

• HTML5 Bestandteile• Semantik• Formulare• Audio & Video• Canvas• Geolocation• Application Cache & Web Storage

• Zusammenfassung

Überblick• HTML5 ist eine Ansammlung von neuen Webtechnologien

• Steht nicht nur für die eigentliche Auszeichnungssprache HTML• Auch für diverse JavaScript-APIs, mit denen Web-Applikationen

geschrieben werden• Diese sollen nativ in allen modernen Browsern laufen• D.h. ohne Erweiterungen, wie z.B. Flash oder Java

• Geolocation wird separat entwickelt und steht nicht im HTML5-Standard• Als neue Technologie gehört es aber zum Thema

Überblick• Wurde ursprünglich von der WHATWG spezifiziert• Die WHATWG ist ein Zusammenschluss der großen

Browserhersteller

• W3C arbeitete lange Zeit an XHTML2• Wurde nicht in Browsern implementiert• Das W3C die HTML5-Spezifikation

• W3C erstellte einen Fork der Spezifikation, was dazu führte, dass an HTML5 getrennt weiter gearbeitet wird.

Semantik• <!DOCTYPE html> deklariert das Dokument als HTML5

• Im Gegensatz zu XHTML müssen nicht alle Tags wieder geschlossen werden, können sie aber.

• Einzelelemente wie <meta /> können auf den schließenden Slash verzichten

• Attributwerte benötigen keine Anführungszeichen mehr:• <meta charset=utf-8>

Semantik• <html>, <head> und <body> Elemente können entfernt

werden• Es ist klar, dass am Anfang des Dokuments der Kopfinhalt steht

und darauf der Rumpf folgt

• Abwärtskompatibilität• Eine HTML5 Website könnte auch komplett in HTML4 oder

XHTML-Syntax geschrieben sein

• Syntax-Fehler sind im HTML5-Standard beschrieben• Werden von allen Browsern gleich behandelt

Semantik – neue Tags• <div> Elemente werden durch aussagekräftige Tags ersetzt• <header> ersetzt <div id=“header”>

<section> zur inhaltlichen Unterteilung<article> Abgrenzung von Artikeln oder Kommentaren<header> Kopfbereich der Seite oder einer Sektion<footer> Kopfbereich der Seite oder einer Sektion<aside> Zusatzinformationen<nav> Hauptnavigation<time> Zeitangaben<hgroup> Gruppierung von Überschriften

• Suchmaschinen und Screenreader können profitieren

Semantik - Überschriften• Es gibt nach wie vor nur <h1> bis <h6>

• Mit Hilfe von <section> können weitere Unterteilungen stattfinden

<section><h1></h1> <section>

<h1></h1></section>

</section>

Beispiel 1Semantik - Chrome

Formulare

<form action=“zielseite.html”><input name=“x” type=“color” required><input type=“submit”>

</form>

coloremailnumberrangesearchtelurl

Beispiel 2Formulare - Opera

Audio und Video• Multimediadateien werden mit den Tags <video> und <audio>

eingebunden

• Die Webbrowser besitzen eigene Player, um die Inhalte ohne zusätzliches Plugin abzuspielen

• Nicht alle Browser unterstützen jedes Format• Es müssen mehrere Formate angeboten werden, sodass sich der

Browser für eines entscheiden kann

• Fallback auf Flash für alte Browser

Audio und Video

<audio src="audio.mp3" controls><a href=“audio.mp3”>Download</a> 

</audio>

<video controls height="360"><source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm"><source src="video.ogv" type="video/ogv">

</video>

• Die erste Quelle wird bevorzugt verwendet, falls die Datei abgespielt werden kann

Beispiel 3Audio und Video - Chrome

Canvas• Canvas ist eine Zeichenfläche• JavaScript API• Es werden nur die nötigsten Funktionen zur Verfügung gestellt• Einsatz von Frameworks

• Canvas 3D mit WebGL

• Formen, Pfade, Bild- und Video manipulation, Animationen, Text, Farbverläufe

• Ursprung des Koordinatensystems in der linken, oberen Ecke

<canvas id="canvas" width="480" height="360"></canvas>

Canvas• Funktionen zum Zeichnen werden auf context angewendet

var canvas = document.getElementById('canvas');if(canvas.getContext){

var context = canvas.getContext('2d');

}

• Formen:

context.fillStyle = 'green';context.fillRect(5, 10, 40, 50);

Canvas

• Pfade:

context.strokeStyle = 'red';context.lineWidth = 5;context.beginPath();context.moveTo(10, 10);context.lineTo(20, 20);context.stroke();context.closePath();

Canvas• Weitere wichtige Funktionen:

• Einstellungen von context auf einem Stack speichern

context.save()context.restore()

• Farbwerte eines Bildbereichs in einem Array erhalten

context.getImageData(0, 0, 50, 50)context.putImageData(data, 10, 10)

Beispiel 4Canvas - Chrome

Geolocation• Geolocation ermittelt Positionsdaten des Nutzers mittels:• IP Adresse• WiFi• GPS• GSM-Netz

• Die Datenermittlung erfolgt asynchron:• Verhindert Verzögerungen bei der Ausführung des Scripts• Sobald Daten ermittelt wurden wird ein Callback aufgerufen

Geolocation

var callback = function(position){var time = position.timestamp;

}if(navigator.geolocation){

navigator.geolocation.getCurrentPosition(callback);}

• getCurrentPosition(erfolgCB, fehlerCB, options) • Erfolg: der Callback erfolgCB() wird aufgerufen• Fehler: der Callback fehlerCB() wird aufgerufen• Mit options kann die Positionbestimmung verfeinert werden

Geolocation• Ermittelte Daten:

timestamp Zeitstempelcoords.latitude Längengradcoords.longitude Breitengradcoords.altitude Höhecoords.accuracy Präzisioncoords.altitudeAccuracyPräzision Höhecoords.heading Richtungcoords.speed Geschwindigkeit

Geolocation• OptionenenableHighAccuracy: true,timeout: 5000,maximumAge: 0

• Ortung über einen Zeitraum:navigator.geolocation.watchPosition();

• Ortung stoppen:navigator.geolocation.clearWatch();

Beispiel 5Geolocation - Opera

Application Cache• Im Application Cache können Ressourcen zur weiteren

Verwendung Offline gespeichert werden

• Eine Manifest-Datei gibt an, welche Ressourcen geladen werden• Es können auch Alternativinhalte geladen werden, wenn keine

Verbindung besteht• Der Mime-Type für Manifest-Dateien muss in einer .htaccess

Datei beschrieben sein• Das Manifest wird in der index.html Datei eingebunden

• Der Nutzer muss zustimmen

Application Cache - Manifest

CACHE MANIFEST

cached.html

NETWORK:

onlineonly.html

FALLBACK:

/ offline.html

Application Cache

addEvent(applicationCache, 'checking', function(){});

• Events:checking Suche Manifestnoupdate Nichts neues im Manifestdownloading Lade Manifest und Ressourcenprogress Lade Ressourcencached Cache bereitupdateready Cache aktualisiertobsolete Cache veraltetError Cache fehlerhaft

Application Cache• Weitere Events des Browsers:

addEvent(window, 'load', function(){})• Beim Laden der Seite

addEvent(window, 'offline', function(){})• Browser offline

addEvent(window, 'online', function(){})• Browser wieder online

• Bei einigen Browsern document.body statt window

Beispiel 6Application Cache - Firefox

Web Storage• Key/Value Speicher im Browser• Wertepaare

• Verwendung ähnlich wie Cookies• Größerer Speicher• Mehr Performanz

• Zwei unterschiedliche Speicher• Session Storage (verfällt nach der Sitzung)• Local Storage (hält solange er nicht explizit gelöscht wird)

Web Storage• Trennung der Daten verschiedener Domains• Kein Fremdzugriff

• Daten können für Offline-Anwendungen gespeichert und erst später synchronisiert werden

Web Storage

localStorage.setItem(‘foo’, ‘bar’);• Dem Schlüssel ‘foo’ wird der Wert ‘bar’ zugeornet

localStorage.getItem(‘foo’);• Der Schlüssel ‘foo’ wird abgefragt und der Wert ‘bar’ wird

geliefert

localStorage.removeItem(‘foo’);• Wertepaar löschen

localStorage.length;• Anzahl aller Wertepaare

Zusammenfassung• HTML5 steckt noch in den Kinderschuhen

• Weder Spezifikationen noch Browserimplementierungen sind einheitlich

• Neue Funktionen können teilweise schon genutzt werden• Aber man sollte auch Alternativen anbieten

Quellen• http://dev.w3.org/html5/spec/single-page.html• http://www.whatwg.org/specs/web-apps/current-work/multi

page/

• http://dev.w3.org/geo/api/spec-source.html• https://developers.google.com/maps/documentation/javascri

pt/?hl=de

• http://www.w3schools.com/html5/• http://www.html5rocks.com• http://diveintohtml5.info/

http://dev.w3.org/html5/spec/single-page.html



http://www.whatwg.org/specs/web-apps/current-work/multipage/



http://dev.w3.org/geo/api/spec-source.html



https://developers.google.com/maps/documentation/javascript/?hl=de

https://developers.google.com/maps/documentation/javascript/?hl=de

http://www.w3schools.com/html5/

http://www.w3schools.com/html5/

http://www.html5rocks.com/



http://diveintohtml5.info/

Entertainment & Humor

HTML5 Grundlagen