HTML5

Anne van Kesteren <annevk@opera.com>

2008-02-08

HTML5: Waarom?

  1. Onderhoud
  2. Web Applicaties

HTML5: Wie?

WHATWG

W3C HTML WG

HTML5: Wat?

De Facto Standaarden in HTML5

Nieuw in HTML5 en Bruikbaar

Hoe Dan?

<canvas>
http://excanvas.sourceforge.net/
getElementsByClassName()
http://dean.edwards.name/weblog/2007/03/yet-another/
Web Forms 2.0
https://sourceforge.net/projects/wf2/

<canvas>

<canvas id="c"></canvas>
<script>
 var canvas = document.getElementById("c");
 var context = canvas.getContext("2d");
 context.fillStyle = "lime";
 context.fillRect(0, 0, 300, 150);
</script>

<canvas> demos

getElementsByClassName()

var elms = document
.getElementsByClassName("foo");
<input class="foo"> <!-- bingo -->
<input class="bar"> <!-- neh -->
<input class="bar foo"> <!-- bingo -->

getElementsByClassName()

var elms = document
.getElementsByClassName("foo bar");
<input class="foo"> <!-- neh -->
<input class="bar"> <!-- neh -->
<input class="bar foo"> <!-- bingo -->

Web Forms 2.0

<input>

<output>

<input name="range" type="range">

<output onformchange="value =
range.value">0</output>

pattern=""

<label> Credit Card Number:
 <input pattern="[0-9]{13,16}" name="cc">
</label>

Google Suggest met <datalist>

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

<datalist id="suggest"></datalist>

text/html Syntax

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta name="Content-Type"
  content="text/html; charset=utf-8" />

text/html Syntax

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta name="Content-Type"
  content="text/html; charset="utf-8" />

text/html Syntax

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />

Valideren?

In de (nabije) toekomst?

En meer…