Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

HTML5-Features

2.085 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie, Design
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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/

×