Diese Präsentation wurde erfolgreich gemeldet.

HTML5-Features

0

Teilen

Nächste SlideShare
R11251356966751
R11251356966751
Wird geladen in …3
×
1 von 52
1 von 52

Weitere Verwandte Inhalte

Ähnliche Bücher

Kostenlos mit einer 14-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 14-tägigen Testversion von Scribd

Alle anzeigen

HTML5-Features

  1. 1. HTML5-Features Ein kleiner Überblick über Syntax, Formulare und JavaScript APIs in HTML5 Francesco Schwarz, 4. Juli 2011
  2. 2. © W3C, http://www.w3.org/html/logo/
  3. 3. © Marina Lawson, http://www.brucelawson.co.uk/2011/with-the-power-of-html5/
  4. 4. Gliederung 1. Vereinfachte Syntax cool 2. Mächtige Formulare sehr cool 3. Neue Elemente 4. JavaScript APIs mega cool
  5. 5. Moment. Was hat HTML mit JavaScript zu tun?! http://i479.photobucket.com/albums/rr160/shebowski/picard-facepalm.jpg
  6. 6. TM »HTML5 hat mehr Bling!« JavaScript APIs Auszeichnungssprache 25 % 75 %
  7. 7. 1.Vereinfachte Syntax
  8. 8. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01// EN" "http://www.w3.org/ TR/html4/strict.dtd">
  9. 9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">
  10. 10. <!doctype html>
  11. 11. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  12. 12. <meta charset="utf-8">
  13. 13. <link type="text/css" rel="stylesheet" href="styles.css">
  14. 14. <link rel="stylesheet" href="styles.css">
  15. 15. <script type="text/javascript" src="scripts.js"> </script>
  16. 16. <script src="scripts.js"> </script>
  17. 17. Wer nutzt bereits den HTML5-Doctype? • Google • Apple • YouTube • About.com • Yahoo • CNET • Baidu • Netflix • Twitter • Digg • LinkedIn • XING
  18. 18. BOB ROSS The Chuck Norris of painting. http://biggerthanme.com/blog/5-things-we-should-all-learn-from-bob-ross/
  19. 19. 1.Vereinfachte Syntax • weniger Code • 100 % rückwärtskompatibel • von Browsern voll unterstützt • schon jetzt einsetzbar
  20. 20. 2. Mächtige Formulare
  21. 21. http://i.zdnet.com/blogs/nelson-muntz.gif
  22. 22. http://www.jayarjackson.com/uploads/9/8/2/4/982464/2103601.jpg
  23. 23. Demo
  24. 24. Nette Zugabe für (Touch-)Smartphones
  25. 25. 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
  26. 26. 3. Neue Elemente
  27. 27. • 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, …
  28. 28. div#header div#content div.post div#nav div.post div.post div#footer
  29. 29. <header> div#content <article> <nav> <article> <article> <footer>
  30. 30. http://dev.opera.com/articles/view/new-structural-elements-in-html5/#how-decided © Molly Holzschlag, http://www.flickr.com/photos/mollyeh11/107631809/
  31. 31. • 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, …
  32. 32. • 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, …
  33. 33. <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>
  34. 34. 3. Neue Elemente • mehr Semantik • strukturierter und wartbarer Code • eingebaute Accessibility-Features • Multimedia ohne Plugins
  35. 35. 4. JavaScript APIs
  36. 36. WebGL: bodybrowser.googlelabs.com
  37. 37. Canvas: rawkets.com
  38. 38. history.pushState(): github.com
  39. 39. Audio: wheelsofsteel.net
  40. 40. Video: w3.org/2010/05/video/mediaevents.html
  41. 41. Demo:Video-Manipulation mit Canvas
  42. 42. Demo
  43. 43. 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/
  44. 44. 4. JavaScript APIs • Standardisierung grundlegender Objekte wie window, document oder history • mächtige Webapplikationen • Spieleentwicklung • Multimedia ohne Plugins
  45. 45. Danke! Francesco Schwarz francescoschwarz.de (Blog) francescoschwarz.de/+ (Google+) © the_moment, http://www.flickr.com/photos/fotomaker/569186904/

×