35-mal heruntergeladen
Hochgeladen vonStefan Walter
HTML5
Das Dokument beschreibt die Entwicklung von HTML5, die als evolutionäre Verbesserung von XHTML und früheren HTML-Versionen betrachtet wird. Es werden die Designprinzipien von HTML5 sowie neue Features wie Audio- und Video-Tags, neue Input-Elemente und die Integration von SVG und Canvas erläutert. Darüber hinaus werden auch Herausforderungen und Probleme mit HTML5, insbesondere in Hinblick auf Kompatibilität mit älteren Browsern und Standards, angesprochen.
HTML5
- 1.
- 2.
- 3. HTML-Spezifikationen • HTML 1,2, 3(.2), 4(.01) • XHTML 1 und 1.1 • XHTML2 Working Draft …Unruhe
- 4.
- 5. WHATWG Web Hypertext ApplicationTechnology Working Group
- 6. WHATWG • gegründet 2004von 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.
- 8.
- 9. MAMA • "Metadata Analysisand Mining Application" von Opera http://dev.opera.com/articles/view/mama-w3c-validator-research-2/#validated
- 10. „Only 4.13% ofWebpages validate“
- 11.
- 12.
- 13.
- 14. XHTML2 = Revolution http://www.flickr.com/photos/publicdomainphotos/3484107668/
- 15. HTML5 = Evolution http://www.flickr.com/photos/cpurrin1/2262636867/
- 16. (c) istockphoto.com/skodonnell HTML5 –Design-Prinzipien
- 17. Design-Prinzipien • Kompatibilität • Fehlertoleranz •Lösen von „echten“ Problemen • „Universal Access“ • „Evolution – not Revolution“
- 18. HTML5 in derPraxis
- 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. 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. Doctype - alt <!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- 22.
- 23. Syntax <DIV>Tags groß</DIV> <div>Tags klein</div> <inputtype=text> <input type="text"> <input type="text" /> Freiheit…oder Chaos?
- 24. Zeichensatzangabe – alt <metahttp-equiv="Content-Type" content="text/html; charset=utf-8">
- 25. Zeichensatzangabe – neu <metacharset="utf-8">
- 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. Keine Probleme • …beiden neuen Attributen • …bei den neuen Input-Elementen • …mit dem neuen Doctype
- 28. …noch was nettes: <ahref="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.
- 30. Neue Strukturelemente http://html5doctor.com/designing-a-blog-with-html5/
- 31. Neue Strukturelemente http://html5doctor.com/designing-a-blog-with-html5/
- 32. <audio> <audio src="music.oga" controls> <a href="music.oga">Download song</a> </audio>
- 33. <audio> <audio> <sourcesrc="music.oga" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> </audio>
- 34. <video> <video src="video.ogv" controlsposter="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a> </video>
- 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. Neue Input-Elemente http://shwetankdixit.com/testpages/webforms2demo.htm
- 37.
- 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.
- 40.
- 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><canvas></code> :( </p> </canvas>
- 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. Canvas kann was http://www.benjoffe.com/code/demos/canvascape/textures
- 44.
- 45.
- 46. Offline- Applikationen 1. SQL-basierte Datenbank („Web Databases“) 2. Offline HTTP-Cache („Cache-Manifest“)
- 47.
- 48.
- 49. Danke für dieAufmerksamkeit Stefan Walter Diese Präsentation steht unter der stefan@hessendscher.de Attribution-Share Alike 3.0 twitter.com/hessendscher