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