HTML5

2,918 views
2,828 views

Published on

Übersicht über HTML5, Entstehung, Codebeispiele, …

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

No Downloads
Views
Total views
2,918
On SlideShare
0
From Embeds
0
Number of Embeds
431
Actions
Shares
0
Downloads
35
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

HTML5

  1. 1. HTML5
  2. 2. http://www.flickr.com/photos/oslointhesummertime/99833154/ Geschichte
  3. 3. HTML-Spezifikationen • HTML 1, 2, 3(.2), 4(.01) • XHTML 1 und 1.1 • XHTML2 Working Draft …Unruhe
  4. 4. http://www.flickr.com/photos/57185407@N00/2248435167/ XHTML2 = Elfenbeinturm?
  5. 5. WHATWG Web Hypertext Application Technology Working Group
  6. 6. WHATWG • gegründet 2004 von Mitarbeitern von Apple, Mozilla, Opera • Bedenken wegen einseitiger Ausrichtung des W3C auf XHTML • Vernachlässigung von HTML • …und sonstigen Problemen die „normale“ Webentwickler so haben
  7. 7. http://yatil.posterous.com/1092829
  8. 8. Probleme mit XHTML2
  9. 9. MAMA • "Metadata Analysis and Mining Application" von Opera http://dev.opera.com/articles/view/mama-w3c-validator-research-2/#validated
  10. 10. „Only 4.13% of Webpages validate“
  11. 11. Tagsoup <p><b>a<i>b</b>c</i><p>
  12. 12. XHTML als XML
  13. 13. XHTML als HTML
  14. 14. XHTML2 = Revolution http://www.flickr.com/photos/publicdomainphotos/3484107668/
  15. 15. HTML5 = Evolution http://www.flickr.com/photos/cpurrin1/2262636867/
  16. 16. (c) istockphoto.com/skodonnell HTML5 – Design-Prinzipien
  17. 17. Design-Prinzipien • Kompatibilität • Fehlertoleranz • Lösen von „echten“ Problemen • „Universal Access“ • „Evolution – not Revolution“
  18. 18. HTML5 in der Praxis
  19. 19. HTML oder XHTML? • HTML5 kann sowohl als HTML als auch als XHTML gesendet werden • HTML/XHTML ist nur die Serialisierung • DOM ist die Basis
  20. 20. Senden als XHTML • Kein Doctype – nur XML-Prolog • Namespace notwendig <html xmlns="http://www.w3.org/1999/xhtml"> • Muss als application/xhtml+xml oder application/xml gesendet werden • kein <noscript>-Element
  21. 21. Doctype - alt <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  22. 22. Doctype - neu <!DOCTYPE html>
  23. 23. Syntax <DIV>Tags groß</DIV> <div>Tags klein</div> <input type=text> <input type="text"> <input type="text" /> Freiheit…oder Chaos?
  24. 24. Zeichensatzangabe – alt <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  25. 25. Zeichensatzangabe – neu <meta charset="utf-8">
  26. 26. Probleme mit HTML5 • IE (bis V8) produzieren DOM-Müll bei unbekannten Elementen • führt u.a. dazu, dass CSS-Regeln mit unbekannten Elementen nicht greifen • es gibt aber Hacks, um den IEs auf die „Sprünge zu helfen“
  27. 27. Keine Probleme • …bei den neuen Attributen • …bei den neuen Input-Elementen • …mit dem neuen Doctype
  28. 28. …noch was nettes: <a href="meinlink.html"> <h1>Überschrift</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ... </p> </a> Links um Blockelemente
  29. 29. http://www.flickr.com/photos/brian-fitzgerald/418686654/ Neue Features
  30. 30. Neue Strukturelemente http://html5doctor.com/designing-a-blog-with-html5/
  31. 31. Neue Strukturelemente http://html5doctor.com/designing-a-blog-with-html5/
  32. 32. <audio> <audio src="music.oga" controls> <a href="music.oga">Download song</a> </audio>
  33. 33. <audio> <audio> <source src="music.oga" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> </audio>
  34. 34. <video> <video src="video.ogv" controls poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a> </video>
  35. 35. <video> <video poster="poster.jpg"> <source src="video.3gp" type="video/3gpp" media="handheld"> <source src="video.ogv" type="video/ogg; codecs=theora, vorbis"> <source src="video.mp4" type="video/mp4"> </video>
  36. 36. Neue Input-Elemente http://shwetankdixit.com/testpages/webforms2demo.htm
  37. 37. SVG (integriert)
  38. 38. SVG <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px"> <circle cx="50" cy="50" r="30" style="stroke:none; fill:#ff0000;"/> <g transform="translate(100, 20) scale(1.65)"> <polygon points="36 25, 25 36, 11 36, 0 25, 0 11, 11 0, 25 0, 36 11" style="stroke:none; fill:#0000ff;" /> </g> <rect x="60" y="20" height="60" width="60" style="stroke:none; fill:#00ff00; fill-opacity: 0.5;" /> </svg>
  39. 39. http://www.flickr.com/photos/snugglepup/4091786974/ Canvas
  40. 40. einfache 2D-Elemente
  41. 41. einfache 2D-Elemente <canvas width="200" height="100" id="simpleCanvas" style="border: 1px solid black"> <p> Sorry, but your browser does not support <code>&lt;canvas&gt;</code> :( </p> </canvas>
  42. 42. einfache 2D-Elemente function drawSimpleCanvas() { var canvas = document.getElementById("simpleCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.beginPath(); // the circle ctx.fillStyle = "#ff0000"; ctx.arc(50, 50, 30, 0, 2*Math.PI, true); ctx.closePath(); ctx.fill(); ctx.save(); // move and resize the octagon ctx.translate(100, 20); ctx.scale(1.65, 1.65);
  43. 43. Canvas kann was http://www.benjoffe.com/code/demos/canvascape/textures
  44. 44. Webstorage/Webdatabase
  45. 45. http://webkit.org/demos/sticky-notes/index.html
  46. 46. Offline- Applikationen 1. SQL-basierte Datenbank („Web Databases“) 2. Offline HTTP-Cache („Cache-Manifest“)
  47. 47. GeoLocation http://merged.ca/iphone/html5-geolocation
  48. 48. Fragen? Fragen!
  49. 49. Danke für die Aufmerksamkeit Stefan Walter Diese Präsentation steht unter der stefan@hessendscher.de Attribution-Share Alike 3.0 twitter.com/hessendscher

×