Attached is a presentation I gave on HTML5 earlier today (well, yesterday
by now) on HTML5 at XTech during the lightning talk session. The idea was
doing 20 slides where each slide takes 20 seconds. However, I was
encouraged to do this presentation just before the session was over so I
took http://annevankesteren.nl/2007/04/html5-talk and ripped out some
slides went for it. It didn't entirely fit the recommended format, but it
was quite well received I believe. And it was great fun to do as well.
Highly recommended!
Viewing as slideshow requires a browser with support for projection media,
such as Opera 9. Viewing it "optimally" requires both that and SVG in
'background' support which is post Opera 9 and not yet publicly released.
Sorry!
Since people asked for a reference I'm putting it here. Feel free to do
whatever you want with it. By the way, I'd love to know what you're doing
with it :-)
--
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>XTech 2007</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>
<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>
<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>
<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>
<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>
<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"><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><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>
