HTML5: verbeteren van het web

Anne van Kesteren

1 juni 2007 — info.nl

95% van het web is HTML…

Veel van onze informatie is opgeslagen in HTML…

95% van de HTML is syntactisch incorrect…

Ongeveer niets is valide…

Over een eeuw zou al deze informatie verloren kunnen gaan…

Hoe gaan we dat verhinderen?

Wie zijn er bezig met HTML5?

Wat is HTML5 eigenlijk?

Waar gebruik je HTML5 voor?

Hoe werkt HTML5?

Wat is er nieuw?!

De DOCTYPE

<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype html>

Karakter encoding

<meta
 http-equiv="Content-Type"
 content="text/html;
          charset=utf-8">
<meta charset="utf-8">

Betere documentstructuur…

<section>
<nav>
<article>
<aside>
<header>
<footer>

Betere "form controls"…

<input type=email>

<input type=date>

<input type=url>
<input type=number>
<input type="file" max="2">

<datalist>: Google suggest

<input name="q"
       list="suggest"
       oninput="list.data = '?p=' +
                encodeURIComponent(value)">
<datalist id="suggest"></datalist>

Formulier validatie…

<input required>
<input pattern=[a-z]>
<input type="range"
       min="2"
       max="40"
       step="2">

HTML5 doet nog wat meer…

canvas element: img, maar met script…

Al gebruikt door Y! Pipes…

<canvas width="150" height="200" id="demo">
 <!-- alternatieve inhoud -->
</canvas>

<script type="text/javascript">
 var canvas = document.getElementById("demo"),
     context = canvas.getContext("2d")
 context.fillStyle = "lime"
 context.fillRect(0, 0, 150, 200)
</script>

Simpele canvas teken applicatie

contenteditable attribuut

Rich text editing in HTML!

Joepie! Gebruikte code:

<p contenteditable="true">…</p>

datagrid element

meter en progress

video en audio elements

En aangezien applicaties APIs nodig hebben…

heeft HTML5 er een paar…

APIs

Wat nu?

Bedankt!

Vragen?