HTML5-Features

2,013 views

Published on

Ein kleiner Überblick über Syntax, Formulare und JavaScript APIs in HTML5.

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

  • Be the first to like this

No Downloads
Views
Total views
2,013
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5-Features

  1. 1. HTML5-FeaturesEin 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. Gliederung1. Vereinfachte Syntax cool2. Mächtige Formulare sehr cool3. Neue Elemente4. 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.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  10. 10. <!doctype html>
  11. 11. <metahttp-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. <scripttype="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.postdiv#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 Schwarzfrancescoschwarz.de (Blog)francescoschwarz.de/+ (Google+) © the_moment, http://www.flickr.com/photos/fotomaker/569186904/

×