HTML5 im Überblick semantisches HTML Geolocation Offline-Webanwendungen Multimedia Drag & Drop Canvas-Element 
Vortrag von...
Historie 
1999 HTML 4.01 Webstandard vom W3C 
2000 XHTML als Zäsur, Aufschluss zur Realität 
HTML 4.01 → XHTML 1 
XHTML 2 ...
Standard? 
Nachfolger von HTML 4 und XHTML 1 
HTML5: „Recommendation“ seit 28.10.2014 
HTML 5.1: „Working Draft“ 
W3C: „Sn...
Browserunterstützung 
Übersicht der Browserunterstützung im WHATWG Wiki 
– detailliert z. B. für das <meter>-Element 
Keep...
Das erste HTML5-Dokument 
<!DOCTYPE html> 
<HEAD> 
<META CHARSET="UTF-8"> 
<TITLE>HTML</TITLE> 
</HEAD> 
<H1>Ich bin ein H...
Minimiertes HTML 
Start-Tags teilweise optional, z. B.: 
<html> 
<head> 
<body> 
End-Tags optional
Kompakte Schreibweise 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
wird zu 
<meta charset="utf-...
Semantik: neue Elemente 
<main> Hauptinhalt (nicht semantisch – nur gruppierend) 
<header> Sammlung einführender Inhalte (...
Semantik: neue Elemente 
<nav> Navigationselemente, vorrangig Hauptnavigation (!) 
<aside> Ergänzung zum das Element umgeb...
<header> 
<h1>Ein HTML5-Blog</h1> 
<h2>Ein weiteres tolles Blog über HTML5</h2> 
</header> 
<nav> 
Navigation, Navigation,...
Formulare: neue Input-Elemente 
<input type="…"> 
search, 
telephone, url, email, 
number, 
datetime-local, datetime, date...
automatische Anpassung des Tastaturlayouts des iPhones bei <input type=„telephone"> 
<input type=„email">
Formulare: Auto-Vervollständigung 
<input type="text" autocomplete="on" list="farben" id="farbe"> 
<datalist id="farben"> ...
Formulare: Validierung 
Pflichtfeld 
<input type="text" name="test" required> 
Feldtyp-Prüfung 
eigene Validierungsnachric...
Geolocation 
Positionsbestimmung auch offline möglich (z. B. GPS-Gerät des Smartphones) 
verschiedene Quellen zur Position...
Geolocation 
Erweiterung des window.navigator-Objekts um das geolocation-Objekt 
Funktionen: 
getCurrentPosition() 
watchP...
Offline-Webanwendungen 
Gewährleistung vollständiger Offline-Tauglichkeit von Anwendungen 
Cachen von Bildern, Skripten, …...
Offline: Application Cache 
Cache Manifest beschreibt die Ressourcen (Bilder, Skripte, HTML,…), die der Browser vorrätig h...
Offline: Application Cache 
Einbindung des Manifests in die Webseite mit <html manifest="cache-manifest.manifest"> 
applic...
Offline: DOM Storage 
„Supercookie“ 
Speicherung beliebiger Name-Wert-Paare im Browser 
Zwischenspeicherung der Änderungen...
Offline: DOM Storage 
zwei Objekt-Typen: 
sessionStorage (an Browser-Sitzung gebunden, max. 5 MB) 
localStorage (5 – 10 MB...
Multimedia 
<audio> <video> 
Medieninhalte ohne Erweiterungen abspielbar machen 
Player werden vom Browser gestellt 
Gesta...
Multimedia: Video 
<video src="trailer_400p.ogg" width="720" height="400" controls autoplay loop poster="trailer_400p.gif"...
Multimedia: Video – Media Queries, Typ 
<video> 
<source src="trailer_iphone.m4v" media="handheld"> 
<source src="trailer_...
Multimedia: Video – Codecs 
H.264 Ogg Theora VP8 (WebM) VP9 (WebM) 
Firefox FF21+ Win 7+9928+ 
IE 6 – 8 – – – – 
IE 9+9–– ...
Multimedia: ältere Browser 
Tags nachrüsten für ältere Browser: html5media 
HTML5 Videoplayer basierend auf JavaScript: Pr...
Multimedia: Video – Steuerung 
play() 
pause() 
muted 
volume 
error 
networkState z. B. NETWORK_LOADING 
readyState z. B....
Multimedia: Video – Steuerung 
Events: 
loadstart 
loadedmetadata 
canplay 
canplaythrough 
play 
ended
Die Software „HandBrake“ zur Formatwandlung von Videos mit diversen Voreinstellungen für verschiedene Geräte
Drag & Drop 
statt Grafiken und Texte können auch komplexe Datensätze übertragen werden 
bestehende Bibliotheken jQuery, M...
Drag & Drop: HTML 
draggable als HTML-Attribut macht Element „greifbar“ 
dataTransfer-Objekt speichert Operationen und Dat...
Drag & Drop: Events 
Events für Elemente: 
dragstart Beginn der D & D-Operation 
dragend Ende der D & D-Operation 
drag 
E...
Canvas-Element 
Erzeugung von dynamischen Bitmap-Grafiken 
quasi programmierbares <img>-Element 
nur 
gute Unterstützung g...
Canvas-Element 
<canvas width="480" height="280"> 
Ihr Browser kann die Grafik leider nicht darstellen. 
</canvas> 
Render...
Canvas: Formen 
Rechtecke: 
clearRect() Bereiche löschen 
strokeRect() Rahmen zeichnen mit Linienstilen 
Linien und Pfade:...
Canvas: Text 
font = "italic 800 32px/2 Georgia" 
fillText() 
strokeText() 
textAlign() 
wie CSS auch relative Größen em o...
Canvas: Transformationen 
Zeichenfläche rotieren, verschieben, verzerren 
translate() Ursprung verschieben 
rotate() Drehu...
Canvas: Formen 
arc() Kreise: X-, Y-Koordinate, Radius, Startwinkel, Endwinkel 
arcTo() 
Pfade sind füllbar (!) 
fill() 
f...
Canvas: Beispiele 
Green Screen 
Sketchpad 
9elements.com 
Metronom aus c’t 11/2011, S. 180 ff. 
NES-Emulator 
Diagramm-Bi...
HTML5: Best Practice 
Spezifikationen beachten 
Tags semantisch prüfen 
Testen, Testen, Testen 
graceful degradation, prog...
Quellen 
HTML5Rocks 
Dive Into HTML5 
Think Vitamin HTML5 
<html>5 Gallery 
Chrome Experiments
Literatur 
Magazin c’t: Linkliste 2009 
Magazin c’t: empfehlenswerte Artikel in Ausgabe 11/2011, S. 140 ff.: 
Warum HTML5 ...
Literatur 
HTML5. Webseiten innovativ und zukunftssicher. 2. Aufl. München: Open Source Press, 2011 
Münz, Stefan/Gull, Cl...
Ausblick 
HTML11
Vielen Dank. 
Niklas Kanthak Diplom-Designer niklas.kanthak@online.de http://www.xing.com/profile/Niklas_Kanthak
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, Multimedia, Drag & Drop, Canvas-Element
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, Multimedia, Drag & Drop, Canvas-Element
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, Multimedia, Drag & Drop, Canvas-Element
Upcoming SlideShare
Loading in …5
×

HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, Multimedia, Drag & Drop, Canvas-Element

3,212 views
3,044 views

Published on

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.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,212
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
27
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, Multimedia, Drag & Drop, Canvas-Element

  1. 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. 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. 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. 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. 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
  6. 6. Minimiertes HTML Start-Tags teilweise optional, z. B.: <html> <head> <body> End-Tags optional
  7. 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. 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. 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. 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. 11. Formulare: neue Input-Elemente <input type="…"> search, telephone, url, email, number, datetime-local, datetime, date, month, week, time, range, color
  12. 12. automatische Anpassung des Tastaturlayouts des iPhones bei <input type=„telephone"> <input type=„email">
  13. 13. Formulare: Auto-Vervollständigung <input type="text" autocomplete="on" list="farben" id="farbe"> <datalist id="farben"> <option value="Rot"> <option value="Grün"> <option value="Blau"> </datalist> Beispiel
  14. 14. Formulare: Validierung Pflichtfeld <input type="text" name="test" required> Feldtyp-Prüfung eigene Validierungsnachrichten
  15. 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. 16. Geolocation Erweiterung des window.navigator-Objekts um das geolocation-Objekt Funktionen: getCurrentPosition() watchPosition() clearWatch() Rückgabe-Objekt: Zeitstempel und Koordinaten Beispiel
  17. 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. 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. 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. 20. Offline: DOM Storage „Supercookie“ Speicherung beliebiger Name-Wert-Paare im Browser Zwischenspeicherung der Änderungen im Offline-Zustand mehr Kapazität und Lebensdauer als Cookies
  21. 21. 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()
  22. 22. Multimedia <audio> <video> Medieninhalte ohne Erweiterungen abspielbar machen Player werden vom Browser gestellt Gestaltung per CSS Verbindung mit <canvas> möglich Steuerung per JavaScript
  23. 23. Multimedia: Video <video src="trailer_400p.ogg" width="720" height="400" controls autoplay loop poster="trailer_400p.gif"> <a href="trailer_400p.ogg">Trailer herunterladen</a> </video> Attribute: controls (boolean) autoplay (boolean) preload loop (boolean) poster
  24. 24. 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>
  25. 25. 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
  26. 26. Multimedia: ältere Browser Tags nachrüsten für ältere Browser: html5media HTML5 Videoplayer basierend auf JavaScript: Projekktor jPlayer: HTML5 Audio & Video for jQuery
  27. 27. Multimedia: Video – Steuerung play() pause() muted volume error networkState z. B. NETWORK_LOADING readyState z. B. HAVE_ENOUGH-DATA
  28. 28. Multimedia: Video – Steuerung Events: loadstart loadedmetadata canplay canplaythrough play ended
  29. 29. Die Software „HandBrake“ zur Formatwandlung von Videos mit diversen Voreinstellungen für verschiedene Geräte
  30. 30. 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
  31. 31. Drag & Drop: HTML draggable als HTML-Attribut macht Element „greifbar“ dataTransfer-Objekt speichert Operationen und Daten dataTransfer.setData()
  32. 32. 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
  33. 33. Canvas-Element Erzeugung von dynamischen Bitmap-Grafiken quasi programmierbares <img>-Element nur gute Unterstützung gängiger Browser aber: Barrierefreiheit nicht gewährleistet
  34. 34. 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)
  35. 35. 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
  36. 36. Canvas: Text font = "italic 800 32px/2 Georgia" fillText() strokeText() textAlign() wie CSS auch relative Größen em oder % einsetzbar
  37. 37. Canvas: Transformationen Zeichenfläche rotieren, verschieben, verzerren translate() Ursprung verschieben rotate() Drehung scale() Skalierung
  38. 38. Canvas: Formen arc() Kreise: X-, Y-Koordinate, Radius, Startwinkel, Endwinkel arcTo() Pfade sind füllbar (!) fill() fillStyle() Farbwert wie CSS: RGB(A), HSLA
  39. 39. Canvas: Beispiele Green Screen Sketchpad 9elements.com Metronom aus c’t 11/2011, S. 180 ff. NES-Emulator Diagramm-Bibliothek
  40. 40. HTML5: Best Practice Spezifikationen beachten Tags semantisch prüfen Testen, Testen, Testen graceful degradation, progressive enhancement
  41. 41. Quellen HTML5Rocks Dive Into HTML5 Think Vitamin HTML5 <html>5 Gallery Chrome Experiments
  42. 42. 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…
  43. 43. 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
  44. 44. Ausblick HTML11
  45. 45. Vielen Dank. Niklas Kanthak Diplom-Designer niklas.kanthak@online.de http://www.xing.com/profile/Niklas_Kanthak

×