HTML5-Features
•
0 gefällt mir•808 views
Ein kleiner Überblick über Syntax, Formulare und JavaScript APIs in HTML5.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (14)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie HTML5-Features
Ähnlich wie HTML5-Features (20)
HTML5-Features
- 1. HTML5-Features Ein kleiner Überblick über Syntax, Formulare und JavaScript APIs in HTML5 Francesco Schwarz, 4. Juli 2011
- 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 hat HTML mit JavaScript zu tun?! http://i479.photobucket.com/albums/rr160/shebowski/picard-facepalm.jpg
- 6. TM »HTML5 hat mehr Bling!« JavaScript APIs Auszeichnungssprache 25 % 75 %
- 8. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01// EN" "http://www.w3.org/ TR/html4/strict.dtd">
- 9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">
- 10. <!doctype html>
- 20. Wer nutzt bereits den 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 • weniger Code • 100 % rückwärtskompatibel • von Browsern voll unterstützt • schon jetzt einsetzbar
- 26. Demo
- 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. 3. Neue Elemente
- 34. • Neue Elemente fü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 Elemente fü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 Elemente fü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
- 49. Demo
- 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/