html5
DESCRIPTION
Übersicht über HTML5, Entstehung, Codebeispiele, …TRANSCRIPT
![Page 1: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/1.jpg)
HTML5
![Page 2: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/2.jpg)
Geschichtehttp://www.flickr.com/photos/oslointhesummertime/99833154/
![Page 3: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/3.jpg)
HTML-Spezifikationen
• HTML 1, 2, 3(.2), 4(.01)
• XHTML 1 und 1.1
• XHTML2 Working Draft
…Unruhe
![Page 4: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/4.jpg)
XHTML2 = Elfenbeinturm?
http://www.flickr.com/photos/57185407@N00/2248435167/
![Page 5: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/5.jpg)
WHATWGWeb Hypertext Application Technology Working Group
![Page 6: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/6.jpg)
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
![Page 7: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/7.jpg)
http://yatil.posterous.com/1092829
![Page 8: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/8.jpg)
Probleme mit XHTML2
![Page 9: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/9.jpg)
MAMA
• "Metadata Analysis and Mining Application" von Opera
http://dev.opera.com/articles/view/mama-w3c-validator-research-2/#validated
![Page 10: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/10.jpg)
„Only 4.13% of Webpages validate“
![Page 11: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/11.jpg)
Tagsoup
<p><b>a<i>b</b>c</i><p>
![Page 12: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/12.jpg)
XHTML als XML
![Page 13: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/13.jpg)
XHTML als HTML
![Page 14: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/14.jpg)
XHTML2 = Revolution
http://www.flickr.com/photos/publicdomainphotos/3484107668/
![Page 15: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/15.jpg)
HTML5 = Evolution
http://www.flickr.com/photos/cpurrin1/2262636867/
![Page 16: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/16.jpg)
HTML5 – Design-Prinzipien
(c) istockphoto.com/skodonnell
![Page 17: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/17.jpg)
Design-Prinzipien
• Kompatibilität
• Fehlertoleranz
• Lösen von „echten“ Problemen
• „Universal Access“
• „Evolution – not Revolution“
![Page 18: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/18.jpg)
HTML5 in der Praxis
![Page 19: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/19.jpg)
HTML oder XHTML?
• HTML5 kann sowohl als HTML als auch als XHTML gesendet werden
• HTML/XHTML ist nur die Serialisierung
• DOM ist die Basis
![Page 20: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/20.jpg)
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
![Page 21: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/21.jpg)
Doctype - alt
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
![Page 22: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/22.jpg)
Doctype - neu
<!DOCTYPE html>
![Page 23: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/23.jpg)
Syntax
<DIV>Tags groß</DIV><div>Tags klein</div>
<input type=text><input type="text"><input type="text" />
Freiheit…oder Chaos?
![Page 24: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/24.jpg)
Zeichensatzangabe – alt
<meta http-equiv="Content-Type"content="text/html; charset=utf-8">
![Page 25: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/25.jpg)
Zeichensatzangabe – neu
<meta charset="utf-8">
![Page 26: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/26.jpg)
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“
![Page 27: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/27.jpg)
Keine Probleme
• …bei den neuen Attributen
• …bei den neuen Input-Elementen
• …mit dem neuen Doctype
![Page 28: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/28.jpg)
…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
![Page 29: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/29.jpg)
Neue Features
http://www.flickr.com/photos/brian-fitzgerald/418686654/
![Page 30: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/30.jpg)
Neue Strukturelemente
http://html5doctor.com/designing-a-blog-with-html5/
![Page 31: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/31.jpg)
Neue Strukturelemente
http://html5doctor.com/designing-a-blog-with-html5/
![Page 32: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/32.jpg)
<audio>
<audio src="music.oga" controls> <a href="music.oga">Download song</a></audio>
![Page 33: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/33.jpg)
<audio>
<audio> <source src="music.oga" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"></audio>
![Page 34: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/34.jpg)
<video>
<video src="video.ogv" controls poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a></video>
![Page 35: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/35.jpg)
<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>
![Page 36: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/36.jpg)
Neue Input-Elemente
http://shwetankdixit.com/testpages/webforms2demo.htm
![Page 37: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/37.jpg)
SVG (integriert)
![Page 38: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/38.jpg)
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>
![Page 39: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/39.jpg)
Canvas
http://www.flickr.com/photos/snugglepup/4091786974/
![Page 40: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/40.jpg)
einfache 2D-Elemente
![Page 41: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/41.jpg)
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>
![Page 42: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/42.jpg)
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);
![Page 43: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/43.jpg)
Canvas kann was
http://www.benjoffe.com/code/demos/canvascape/textures
![Page 44: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/44.jpg)
Webstorage/Webdatabase
![Page 45: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/45.jpg)
http://webkit.org/demos/sticky-notes/index.html
![Page 46: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/46.jpg)
Offline-Applikationen
1. SQL-basierte Datenbank („Web Databases“)
2. Offline HTTP-Cache(„Cache-Manifest“)
![Page 47: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/47.jpg)
GeoLocation
http://merged.ca/iphone/html5-geolocation
![Page 48: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/48.jpg)
Fragen? Fragen!
![Page 49: HTML5](https://reader034.vdokument.com/reader034/viewer/2022051411/54656571af79590f738b7914/html5/thumbnails/49.jpg)
Stefan [email protected]/hessendscher
Danke für die Aufmerksamkeit
Diese Präsentation steht unter derAttribution-Share Alike 3.0