Attached is a presentation on HTML5 I gave at QUT today. It requires
support for the projection presentation medium as supported by Opera 9.
For the best experience it requires some internal version of Opera that
also supports SVG as background image.
--
Anne van Kesteren
<http://annevankesteren.nl/>
<http://www.opera.com/>
<html xmlns="http://www.w3.org/1999/xhtml"; lang="en">
<head>
<title>Evolving the Web: HTML5</title>
<style>
svg { display:none }
section, header, figure { display:block }
canvas { background:#fff }
</style>
<style media="projection">
html { font:1em/1 "Lucida Grande", sans-serif; color:#fff; background:#000 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2220%22%3E%0D%0A%20%3ClinearGradient%20id%3D%22gradient%22%3E%0D%0A%20%20%3Cstop%20offset%3D%2260%25%22%2F%3E%0D%0A%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%233c790a%22%2F%3E%0D%0A%20%3C%2FlinearGradient%3E%0D%0A%20%3Crect%20x%3D%220%22%20y%3D%220%22%20height%3D%22100%25%22%20width%3D%22100%25%22%20fill%3D%22url(%23gradient)%22%2F%3E%0D%0A%3C%2Fsvg%3E") repeat-y }
body { margin:0 }
m { background:#3c790a }
section, header, .one-liner { page-break-after:always }
.one-liner { margin:0; padding:3em 1em 0 .4em; font-size:5em }
pre.one-liner.example { padding:4em 0 0 1em; font-size:2em }
header h1 { margin:1em 0 1em .4em; font-size:5em }
header p { margin:.3em 0 0 .66667em; font-size:3em }
section h2 { margin:0; padding:1em 1em 0 .4em; font-size:5em }
section > p { padding:.5em 2em 0 2em }
section > pre { padding:.5em 2em 0 2em; font-size:3em }
section > pre:first-child { padding-top:2em }
section ul { margin:0; padding:.5em 2em 0 2em; font-size:3em }
section ul:first-child { padding-top:2em }
section li { margin:.8em 0 }
abbr { border:0; text-decoration:none }
pre, code { font-family:"Lucida Console", monospace }
</style>
</head>
<body>
<header>
<h1>Evolving the Web: <abbr title="HyperText Markup Language">HTML</abbr>5</h1>
<p>Anne van Kesteren</p>
<p>17 April 2007 â QUT</p>
</header>
<p class="one-liner">95% of the web is <abbr>HTML</abbr>â¦</p>
<p class="one-liner">We accumulate <em>lots</em> of information in <abbr>HTML</abbr>â¦</p>
<!-- Wikipedia has roughly 1.7 million English pages alone -->
<p class="one-liner">95% of the <abbr>HTML</abbr> is syntactically incorrectâ¦</p>
<p class="one-liner">Close to nothing is conformingâ¦</p>
<p class="one-liner">A century from now all information could become inaccessibleâ¦</p>
<p class="one-liner">Enough drama!</p>
<section>
<pre><code><p><u>A<m><i></m>B<m></u></m>C</i></p></code></pre>
<pre>p
+-- u
| +-- "A"
| |
| +-- <m>i</m>
| +-- "B"
+-- <m>i</m>
+-- "C"</pre>
</section>
<section>
<h2>How do we solve this mess?</h2>
<ul>
<li>Define interoperable handling of broken content.</li>
<li>Define better conformance requirements.</li>
<li>Get it implemented.</li>
</ul>
</section>
<p class="one-liner">And now some implicit design principlesâ¦</p>
<section>
<ul>
<li><em>Don't</em> Break the Web</li> <!-- &btw; -->
<li>Degrade Gracefully</li>
<li><em>Don't</em> Reinvent the Wheel</li>
<li>Pave the Cowpaths</li>
<li>Evolution <em>not</em> Revolution</li>
<li>â¦</li>
</ul>
</section>
<section>
<ul>
<li>Solve Real Problems</li>
<li>Priority of Constituencies</li>
<li>Media Independence</li>
<li>Universal Access</li>
<li>Support World Languages</li>
<li>â¦</li>
</ul>
</section>
<section>
<ul>
<li>Secure By Design</li>
<li>Well-defined Behavior</li>
<li>Handle Errors</li>
<li>Avoid Needless Complexity</li>
<li>No Versioning</li> <!-- disputed -->
</ul>
</section>
<p class="one-liner">Those are the basis for <abbr>HTML</abbr>5.</p>
<section>
<h2>Who's doing <abbr>HTML</abbr>5?</h2>
<ul>
<li><abbr>WHATWG</abbr></li>
<li><abbr>W3C</abbr></li>
<li>You!</li>
</ul>
</section>
<section>
<h2>What the hell is <abbr>HTML</abbr>5 anyway?</h2>
<ul>
<li><abbr>HTML</abbr> 4.01</li>
<li><abbr>XHTML</abbr> 1.0</li>
<li><abbr>DOM</abbr> Level 2 <abbr>HTML</abbr></li>
<li>And more!</li>
</ul>
</section>
<section>
<h2>How does <abbr>HTML5</abbr> work?</h2>
<ul>
<li>Language defined in terms of the <abbr>DOM</abbr></li>
<li><abbr>HTML</abbr> as serialization: <code>text/html</code> <abbr>MIME</abbr> type</li>
<li><abbr>XML</abbr> as serialization: any <abbr>XML</abbr> <abbr>MIME</abbr> type</li>
</ul>
</section>
<p class="one-liner">Tell me more about those features!</p>
<p class="one-liner">First the basicsâ¦</p>
<section>
<h2>The <code>DOCTYPE</code></h2>
<pre><code><!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";></code></pre>
<pre><code><m><!doctype html></m></code></pre>
</section>
<section>
<h2>Character encoding</h2>
<pre><code><meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"></code></pre>
<pre><code><m><meta charset="utf-8"></m></code></pre>
</section>
<p class="one-liner">Better document structureâ¦</p>
<pre class="one-liner"><code><section></code></pre>
<pre class="one-liner"><code><nav></code></pre>
<pre class="one-liner"><code><article></code></pre>
<pre class="one-liner"><code><aside></code></pre>
<pre class="one-liner"><code><header></code></pre>
<pre class="one-liner"><code><footer></code></pre>
<p class="one-liner">Better typed form controlsâ¦</p>
<pre class="one-liner"><code><input type=<m>email</m>></code></pre>
<pre class="one-liner"><code><input type=<m>datetime</m>></code></pre>
<pre class="one-liner"><code><input type=<m>url</m>></code></pre>
<pre class="one-liner"><code><input type=<m>number</m>></code></pre>
<pre class="one-liner example"><code><!doctype html>
<html lang=en>
<body>
<form>
<p><label>
Please enter your favorite markup language:
<input <m>list</m>=markup-languages name=ml>
<<m>datalist</m> id=markup-languages>
<option>HTML</option>
<option disabled>XHTML</option>
</datalist>
</label></p>
</form>
</body>
</html></code></pre>
<p class="one-liner">Declarative form validationâ¦</p>
<pre class="one-liner"><code><input <m>required</m>></code></pre>
<pre class="one-liner"><code><input <m>pattern=[a-z]</m>></code></pre>
<pre class="one-liner"><code><input type="range"
min="2"
max="40"
step="2"></code></pre>
<p class="one-liner">Apologies to those who are put of by the syntax. The following variants are allowedâ¦</p>
<section>
<ul>
<li><code><input type=url></code></li>
<li><code><input type='url'></code></li>
<li><code><input type="url"/></code></li>
</ul>
</section>
<section>
<h2>Repetition model</h2>
<ul>
<li>Repeat <abbr>HTML</abbr> elements, such as <code>tr</code></li>
<li>Declarative: <code><button type="add"></code>, <code><tr repeat="template"></code></li>
<li>API to manipulate through scripting</li>
</ul>
</section>
<p class="one-liner"><abbr>HTML</abbr>5 does more thoughâ¦</p>
<p class="one-liner"><code>canvas</code> element: <code>img</code>, but scriptedâ¦</p>
<p class="one-liner">Used on Y! Pipesâ¦</p>
<pre class="one-liner example"><code><!doctype html>
<title>&lt;canvas> demo</title>
<style> canvas { border:solid } </style>
<p><<m>canvas</m> width="150" height="200" id="demo">
<!-- fallback content here -->
</canvas></p>
<script type="text/javascript">
var canvas = document.getElementById("demo"),
context = canvas.<m>getContext("2d")</m>
context.<m>fillStyle</m> = "lime"
context.<m>fillRect</m>(0, 0, 150, 200)
</script></code></pre>
<section>
<h2>Simple drawing application</h2>
<p><canvas id="paintr" width="800" height="400"></canvas></p>
<script>
HTMLCanvasElement.prototype.clearPaintr = function() {
this.getContext('2d').fillStyle = "#fff";
this.getContext('2d').fillRect(0, 0, this.width, this.height);
}
var canvas = document.getElementById('paintr'),
ctx = canvas.getContext('2d'),
continueState = false,
drawState = false;
canvas.clearPaintr()
ctx.lineWidth = 10
function start(event) {
if(!continueState) canvas.clearPaintr();
ctx.beginPath();
ctx.moveTo(event.offsetX || event.layerX, event.offsetY || event.layerY);
continueState = true;
drawState = true;
}
function stop(event) {
if(drawState) {
ctx.closePath();
drawState = false;
}
}
function update(event) {
if(drawState) {
ctx.lineTo(event.offsetX || event.layerX, event.offsetY || event.layerY);
ctx.stroke();
}
}
canvas.addEventListener("mousedown", start, false);
canvas.addEventListener("mouseup", stop, false);
canvas.addEventListener("mousemove", update, false);
addEventListener("mouseup", stop, false);
</script>
</section>
<section>
<h2><code>datagrid</code> element</h2>
<ul>
<li>Enables sortable tables</li>
<li>Tree-like widgets</li>
<li>Useful for e-mail clients</li>
</ul>
</section>
<section>
<h2><code>meter</code> and <code>progress</code></h2>
<ul>
<li><code><meter>max: 100; current: 75</meter></code></li>
<li><code><progress><span>0</span>%</progress></code> with the <code>span</code> element being updated by a script</li>
</ul>
</section>
<section>
<h2><code>video</code> and <code>audio</code> elements</h2>
<ul>
<li>Recently added based on feedback from Apple and Opera</li>
<li>Extensive scripted <abbr>API</abbr> for loading and playing media resources</li>
</ul>
</section>
<section>
<h2>Any questions?</h2>
<ul>
<li><code>http://www.w3.org/html/</code></li>
<li><code>http://www.whatwg.org/</code></li>
<li>Search for "<code>html5</code>"</li>
<li>For your information: the above does not implicate <abbr>RTFM</abbr>. Just ask.</li>
</ul>
</section>
</body>
</html>
