Auch wenn die Spezifikation von HTML5 noch nicht abgeschlossen ist, werden die Features dieses neuen Standards der Auszeichnungssprache HTML das Internet der unmittelbaren Zukunft bestimmen. Erfahren sie, wie nun semantisches HTML, Geolocation, Offline-Webanwendungen, Video- und Audio-Elemente, Drag and Drop und Vektorgrafiken in Webseiten integriert werden können.
1. HTML5 im Überblick semantisches HTML Geolocation Offline-Webanwendungen Multimedia Drag & Drop Canvas-Element
Vortrag von Niklas Kanthak am 25.11.2014 an der VHS Düsseldorf Semester 14/2 – Veranstaltung I356340
2. Historie
1999 HTML 4.01 Webstandard vom W3C
2000 XHTML als Zäsur, Aufschluss zur Realität
HTML 4.01 → XHTML 1
XHTML 2 = reines XML
Browserhersteller wehren sich gegen XHTML
2004 Gründung WHATWG
2009 Auflösung der XHTML-Arbeitsgruppe
W3C bildet HTML5-Team
3. Standard?
Nachfolger von HTML 4 und XHTML 1
HTML5: „Recommendation“ seit 28.10.2014
HTML 5.1: „Working Draft“
W3C: „Snapshot“
WHATWG: „HTML Living Standard“
4. Browserunterstützung
Übersicht der Browserunterstützung im WHATWG Wiki
– detailliert z. B. für das <meter>-Element
Keeping up with HTML5 and browser support: HTML5Rocks
When Can I use… Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers
Check your browser’s HTML5 and CSS3 capabilities: haz.io
HTML5 and CSS3 feature detection: Modernizr
5. Das erste HTML5-Dokument
<!DOCTYPE html>
<HEAD>
<META CHARSET="UTF-8">
<TITLE>HTML</TITLE>
</HEAD>
<H1>Ich bin ein HTML5-Dokument</H1>
<p class=beispiel>
Hallo!
<P>
Ich bin ein HTML5-Dokument
7. Kompakte Schreibweise
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
wird zu
<meta charset="utf-8">
oder
<input type="checkbox" checked="checked" />
zu
<input type="checkbox" checked>
8. Semantik: neue Elemente
<main> Hauptinhalt (nicht semantisch – nur gruppierend)
<header> Sammlung einführender Inhalte (nicht nur im Kopfbereich)
<footer> Pendant für den Fußbereich
9. Semantik: neue Elemente
<nav> Navigationselemente, vorrangig Hauptnavigation (!)
<aside> Ergänzung zum das Element umgebenden Inhalt, z. B. Seitenspalte
<section>
Sinnabschnitte, z. B. Kapitel (mit Kopfbereich)
<article> geschlossene Inhalte, z. B. Newsmeldungen, Blog- und Forenposts
10. <header>
<h1>Ein HTML5-Blog</h1>
<h2>Ein weiteres tolles Blog über HTML5</h2>
</header>
<nav>
Navigation, Navigation, Navigation
</nav>
<section>
<article>
<h1>Ein toller Beitrag über HTML5!</h1>
<p>Text…</p>
<aside class="metainformationen">
<p>Geschrieben von Admin</p>
</aside>
</article>
<article>
<h1>Ein älterer Beitrag über HTML5!</h1>
<p>Text…</p>
<aside class="metainformationen">
<p>Geschrieben von Admin</p>
</aside>
</article>
</section>
<aside>
<h1>Sidebar</h1>
<section>
<h1>Tagcloud</h1>
<p>Tags Tags Tags</p>
</section>
<section>
<h1>Blogroll</h1>
<p>Link Link Link</p>
</section>
</aside>
<footer>
<p>Footer Footer Footer</p>
</footer>
11. Formulare: neue Input-Elemente
<input type="…">
search,
telephone, url, email,
number,
datetime-local, datetime, date, month, week, time,
range,
color
12. automatische Anpassung des Tastaturlayouts des iPhones bei <input type=„telephone">
<input type=„email">
15. Geolocation
Positionsbestimmung auch offline möglich (z. B. GPS-Gerät des Smartphones)
verschiedene Quellen zur Positionsbestimmung: nahegelegene WLAN- Zugangspunkte, IP-Adresse, Google Location Services
dauerhafte Überwachung nur mit Mobilgeräten möglich
16. Geolocation
Erweiterung des window.navigator-Objekts um das geolocation-Objekt
Funktionen:
getCurrentPosition()
watchPosition()
clearWatch()
Rückgabe-Objekt: Zeitstempel und Koordinaten
Beispiel
17. Offline-Webanwendungen
Gewährleistung vollständiger Offline-Tauglichkeit von Anwendungen
Cachen von Bildern, Skripten, …
Zwischenspeicherung von Aktionen, z. B. neuer Datenbankeintrag
Überbrückung von Netzabbrüchen oder -engpässen
unabhängig vom Browser-Cache
18. Offline: Application Cache
Cache Manifest beschreibt die Ressourcen (Bilder, Skripte, HTML,…), die der Browser vorrätig halten muss
CACHE MANIFEST
about.html
offline.html
NETWORK
blog.html
FALLBACK
/ offline.html
19. Offline: Application Cache
Einbindung des Manifests in die Webseite mit <html manifest="cache-manifest.manifest">
applicationCache-Objekt als Speicher
Logging möglich durch applicationCache-Events:
checking
noupdate
downloading
progress
cached
obsolete
error
20.
21. Offline: DOM Storage
„Supercookie“
Speicherung beliebiger Name-Wert-Paare im Browser
Zwischenspeicherung der Änderungen im Offline-Zustand
mehr Kapazität und Lebensdauer als Cookies
22. Offline: DOM Storage
zwei Objekt-Typen:
sessionStorage (an Browser-Sitzung gebunden, max. 5 MB)
localStorage (5 – 10 MB)
deren Funktionen:
length
key()
getItem()
setItem()
removeItem()
clear()
23. Multimedia
<audio> <video>
Medieninhalte ohne Erweiterungen abspielbar machen
Player werden vom Browser gestellt
Gestaltung per CSS
Verbindung mit <canvas> möglich
Steuerung per JavaScript
25. Multimedia: Video – Media Queries, Typ
<video>
<source src="trailer_iphone.m4v" media="handheld">
<source src="trailer_400p.ogg" media="all">
</video>
<video>
<source src="trailer_400p.mp4" type="video/mp4">
<source src="trailer_400p.ogg" type="video/ogg">
</video>
26. Multimedia: Video – Codecs
H.264 Ogg Theora VP8 (WebM) VP9 (WebM)
Firefox FF21+ Win 7+9928+
IE 6 – 8 – – – –
IE 9+9–– –
Chrome – 9 9 29+
Safari9–– –
Opera nur Mobil nur Desktop9nur Mobil
wikipedia.org: Browser support
27. Multimedia: ältere Browser
Tags nachrüsten für ältere Browser: html5media
HTML5 Videoplayer basierend auf JavaScript: Projekktor
jPlayer: HTML5 Audio & Video for jQuery
28. Multimedia: Video – Steuerung
play()
pause()
muted
volume
error
networkState z. B. NETWORK_LOADING
readyState z. B. HAVE_ENOUGH-DATA
29. Multimedia: Video – Steuerung
Events:
loadstart
loadedmetadata
canplay
canplaythrough
play
ended
30.
31.
32. Die Software „HandBrake“ zur Formatwandlung von Videos mit diversen Voreinstellungen für verschiedene Geräte
33. Drag & Drop
statt Grafiken und Texte können auch komplexe Datensätze übertragen werden
bestehende Bibliotheken jQuery, MooTools sind komfortabler
Vorteil: standardisierte Schnittstelle
Browser und Applikationen werden interoperabel
aber: geringe Erwartung des Benutzers
aber: schlechte Browserunterstützung
34. Drag & Drop: HTML
draggable als HTML-Attribut macht Element „greifbar“
dataTransfer-Objekt speichert Operationen und Daten
dataTransfer.setData()
35. Drag & Drop: Events
Events für Elemente:
dragstart Beginn der D & D-Operation
dragend Ende der D & D-Operation
drag
Events für Ziele:
dragenter
dragleave
dragover
drop
36. Canvas-Element
Erzeugung von dynamischen Bitmap-Grafiken
quasi programmierbares <img>-Element
nur
gute Unterstützung gängiger Browser
aber: Barrierefreiheit nicht gewährleistet
37. Canvas-Element
<canvas width="480" height="280">
Ihr Browser kann die Grafik leider nicht darstellen.
</canvas>
Rendering Context als Schnittstelle
context = canvas.getContext('2d')
context.fillStyle = 'rgb(255, 0, 0)'
context.fillRect(20, 40, 240, 160)
38. Canvas: Formen
Rechtecke:
clearRect() Bereiche löschen
strokeRect() Rahmen zeichnen mit Linienstilen
Linien und Pfade:
beginPath()
closePath() Pfad abschließen
moveTo() Startpunkt für Linie setzen
lineTo() Linie zum Punkt zeichnen
stroke() Zeichnen des Pfads
39. Canvas: Text
font = "italic 800 32px/2 Georgia"
fillText()
strokeText()
textAlign()
wie CSS auch relative Größen em oder % einsetzbar
45. Literatur
Magazin c’t: Linkliste 2009
Magazin c’t: empfehlenswerte Artikel in Ausgabe 11/2011, S. 140 ff.:
Warum HTML5 ein großer Wurf ist
HTML5-Video in der Praxis
Frameworks und Bibliotheken erleichtern den Umgang…
46. Literatur
HTML5. Webseiten innovativ und zukunftssicher. 2. Aufl. München: Open Source Press, 2011
Münz, Stefan/Gull, Clemens: HTML 5 Handbuch. München: Franzis, 2011
Sharp, Remy/Lawson, Bruce: HTML5. München: Addison-Wesley, 2011
Pilgrim, Mark: Durchstarten mit HTML5