HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, Multimedia, Drag & Drop, Canvas-Element
4 gefällt mir2,108 aufrufe
Der Vortrag von Niklas Kanthak am 25.11.2014 an der VHS Düsseldorf bietet einen umfassenden Überblick über HTML5, dessen neuen semantischen Elemente, die Unterstützung in verschiedenen Browsern sowie die Integration von Multimedia, Geolocation und Offline-Webanwendungen. Es wird die Entwicklung von HTML im Laufe der Jahre behandelt, beginnend mit HTML 4.01, über XHTML bis hin zu den aktuellen HTML5-Spezifikationen. Zudem werden praktische Beispiele zu neuen Elementen wie <canvas> und den Möglichkeiten von Drag & Drop sowie Formularen thematisiert.
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, Multimedia, Drag & Drop, Canvas-Element
- 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
- 6. Minimiertes HTML Start-Tags teilweise optional, z. B.: <html> <head> <body> End-Tags optional
- 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">
- 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. Formulare: Validierung Pflichtfeld <input type="text" name="test" required> Feldtyp-Prüfung eigene Validierungsnachrichten
- 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
- 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
- 24. 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
- 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
- 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
- 40. Canvas: Transformationen Zeichenfläche rotieren, verschieben, verzerren translate() Ursprung verschieben rotate() Drehung scale() Skalierung
- 41. Canvas: Formen arc() Kreise: X-, Y-Koordinate, Radius, Startwinkel, Endwinkel arcTo() Pfade sind füllbar (!) fill() fillStyle() Farbwert wie CSS: RGB(A), HSLA
- 42. Canvas: Beispiele Green Screen Sketchpad 9elements.com Metronom aus c’t 11/2011, S. 180 ff. NES-Emulator Diagramm-Bibliothek
- 43. HTML5: Best Practice Spezifikationen beachten Tags semantisch prüfen Testen, Testen, Testen graceful degradation, progressive enhancement
- 44. Quellen HTML5Rocks Dive Into HTML5 Think Vitamin HTML5 <html>5 Gallery Chrome Experiments
- 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
- 47. Ausblick HTML11
- 48. Vielen Dank. Niklas Kanthak Diplom-Designer niklas.kanthak@online.de http://www.xing.com/profile/Niklas_Kanthak