Als PDF, PPTX herunterladen
Hochgeladen vonFrancesco Schwarz
HTML5-Features
Das Dokument bietet einen Überblick über die neuen Funktionen von HTML5, einschließlich einer vereinfachten Syntax, verbesserter Formulare und neuer JavaScript APIs. Es hebt die Bedeutung neuer Elemente für eine bessere Strukturierung und Multimedia-Unterstützung hervor. Der Text betont die Vorteile von HTML5, wie Rückwärtskompatibilität, eingebauter Fehlervalidierung und die Möglichkeit, leistungsstarke Webanwendungen zu erstellen.
HTML5-Features
- 1. HTML5-Features Ein kleiner Überblicküber Syntax, Formulare und JavaScript APIs in HTML5 Francesco Schwarz, 4. Juli 2011
- 2.
- 3. © Marina Lawson,http://www.brucelawson.co.uk/2011/with-the-power-of-html5/
- 4. Gliederung 1. Vereinfachte Syntax cool 2. Mächtige Formulare sehr cool 3. Neue Elemente 4. JavaScript APIs mega cool
- 5. Moment. Was hatHTML mit JavaScript zu tun?! http://i479.photobucket.com/albums/rr160/shebowski/picard-facepalm.jpg
- 6. TM »HTML5 hat mehrBling!« JavaScript APIs Auszeichnungssprache 25 % 75 %
- 7.
- 8. <!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01// EN" "http://www.w3.org/ TR/html4/strict.dtd">
- 9. <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 20. Wer nutzt bereitsden HTML5-Doctype? • Google • Apple • YouTube • About.com • Yahoo • CNET • Baidu • Netflix • Twitter • Digg • LinkedIn • XING
- 21. BOB ROSS The Chuck Norris of painting. http://biggerthanme.com/blog/5-things-we-should-all-learn-from-bob-ross/
- 22. 1.Vereinfachte Syntax • wenigerCode • 100 % rückwärtskompatibel • von Browsern voll unterstützt • schon jetzt einsetzbar
- 23.
- 24.
- 25.
- 26.
- 27.
- 32. 2. Mächtige Formulare •neue input-Typen • input-Typ text als Fallback • neue Attribute: min, max, placeholder, required, autofocus, pattern, ... • eingebaute Fehlervalidierung • eingebaute Accessibility-Features
- 33.
- 34. • Neue Elementefür bessere Struktur: , , , , article aside figcaption figure footer header , , , , hgroup nav section ,… • Neue Element für Multimedia-Support: , audio canvas video , ,… • Viele weitere: , , , command details datalist keygen , mark, meter, output, progress, time, track, …
- 35. div#header div#content div.post div#nav div.post div.post div#footer
- 36. <header> div#content <article> <nav> <article> <article> <footer>
- 37. http://dev.opera.com/articles/view/new-structural-elements-in-html5/#how-decided © Molly Holzschlag, http://www.flickr.com/photos/mollyeh11/107631809/
- 38. • Neue Elementefür bessere Struktur: , , , , article aside figcaption figure footer header , , , , hgroup nav section ,… • Neue Element für Multimedia-Support: , audio canvas video , ,… • Viele weitere: , , , command details datalist keygen , mark, meter, output, progress, time, track, …
- 39. • Neue Elementefür bessere Struktur: , , , , article aside figcaption figure footer header , , , , hgroup nav section ,… • Neue Element für Multimedia-Support: , audio canvas video , ,… • Viele weitere: , , , command details datalist keygen , mark, meter, output, progress, time, track, …
- 40. <p> Am Montag treffen wir uns wie immer in der Neustadt in Dresden. </p> <p> Am <time datetime="2011-07-04">Montag</time> treffen wir uns wie immer in der Neustadt in Dresden. </p>
- 41. 3. Neue Elemente •mehr Semantik • strukturierter und wartbarer Code • eingebaute Accessibility-Features • Multimedia ohne Plugins
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50. Links, Links, Links • Video-Screenshots mit Canvas erstellen: http:// • Kreatives Canvas-/Audio-Experiment: www.wait-till-i.com/2011/07/01/creating- http://9elements.com/io/projects/html5/canvas/ screengrabs-from-html5-video-with-canvas/ • Massig Canvas-Experimente: • Video-Manipulation mit Canvas Schritt für http://andrew-hoyer.com/ Schritt erklärt: http://www.peterkroener.de/ video-manipulation-mit-canvas-schritt-fur- schritt-erklart/ • Auflistung der HTML5-APIs: http:// dret.typepad.com/dretblog/html5-api- overview.html • Umfassender Vergleich von HTML5-Video- Playern: http://praegnanz.de/html5video/ • Übersicht über HTML5-Spezifikationen und -Literatur: http://molily.de/weblog/html5- • Ausgereifter HTML5-Video-Player: specs http://mediaelementjs.com/ • Einführung in history.pushState(): https:// • Nette Canvas-/WebGL-Experimente: developer.mozilla.org/en/DOM/ http://hakim.se/ Manipulating_the_browser_history • Canvas-Framework mit vielen Beispielen und • Beispiel für die Device-Orientation-API: Tutorials: http://paperjs.org/ http://slides.html5rocks.com/#slide-orientation • Interaktiver Film: http://www.ro.me/ • Neue HTML5-Projekte hübsch präsentiert: http://html5shelf.tumblr.com/
- 51. 4. JavaScript APIs •Standardisierung grundlegender Objekte wie window, document oder history • mächtige Webapplikationen • Spieleentwicklung • Multimedia ohne Plugins
- 52. Danke! Francesco Schwarz francescoschwarz.de (Blog) francescoschwarz.de/+(Google+) © the_moment, http://www.flickr.com/photos/fotomaker/569186904/