Anne van Kesteren (Opera Software)
pfcongrez — April 2009
<input type=date>
W3C hosted a workshop on Web applications in 2004.
W3C: "XML is the future."
Browser vendors revolted. (Opera, Mozilla & Apple.)
Instead of reinventing HTML, evolve it.
>900 people on the mailing list.
wiki.whatwg.org
blog.whatwg.org
forums.whatwg.org
End of 2006 Tim Berners-Lee had a change of heart: The attempt to get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didn't work.
w3.org/html + whatwg.org = HTML 5
For instance, by defining the contenteditable
attribute.
Defining how to parse HTML as it would be nice if in one hundred years we can still read what we write today.
Enabling competition by defining the Web platform in greater detail.
<a>
<abbr>
<address>
<area>
<article>
<aside>
<audio>
<b>
<base>
<bb>
<bdo>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<cite>
<code>
<col>
<colgroup>
<command>
<datagrid>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figure>
<footer>
<form>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<keygen>
<label>
<legend>
<li>
<link>
<mark>
<map>
<menu>
<meta>
<meter>
<nav>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strong>
<style>
<sub>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<ul>
<var>
<video>
Addressing needs of Web applications.
Better structure for documents based on author conventions. E.g. <header>
, <footer>
, <section>
, and <aside>
.
DOCTYPE
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype html>
<meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8">
<meta charset="utf-8">
type=""
is now optional<style type="text/css">
/* ... */
</style>
<script src="…" type="text/javascript"></script>
type=""
is now optional<style>
/* ... */
</style>
<script src="…"></script>
<canvas>
<canvas width="150" height="200" id="demo">
<!-- Still using Internet Explorer? -->
</canvas>
<script>
var canvas = document.getElementById("demo"),
context = canvas.getContext("2d")
context.fillStyle = "lime"
context.fillRect(0, 0, 150, 200)
</script>
canvas
applicationVideo issues: syntax & format.
<video src=clip.ogg controls>
Download the <a href=clip.ogg>clip</a>.
<!-- browser does not support <video> -->
</video>
Ogg Theora?
Distributing several equivalent video streams
<video>
<source type=video/mp4 src=clip.mp4>
<source type=video/ogg src=clip.ogg>
</video>
(Yes, there's an equivalent audio
element.)
<input list="languages" name="language">
<datalist id="languages">
<option value="Dutch"></option>
<option value="English"></option>
<option value="Norwegian"></option>
<option value="Portuguese"></option>
</datalist>
<input type="number">
:
<input type="range">
:
<input pattern="[a-z]">
<input type=range min=10 max=50 step=5>
<input required="">
<input type=file multiple>
<html manifest=appcache>
Cross-document messaging: postMessage()
More convenient DOM access: getElementsByClassName()
This part roughly covered HTML5…
querySelector("body > p")
querySelectorAll(".bad, .good")
SQL storage
localStorage["status"] = "Idling..."
sessionStorage["price"] += 19.95m
stream = new EventSource("/news-ticker")
stream.onmessage = function(e) { process(e.data) }
socket = new WebSocket("ws://example.org/stream")
socket.postMessage("Hello World!")
socket.onmessage = function(e) { process(e.data) }
Bedankt! Vragen?