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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
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
• …bei den neuen Attributen
• …bei den neuen Input-Elementen
• …mit dem neuen Doctype
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
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
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
