HTML5

Simon Pieters <zcorpan@gmail.com>

2007-05-23

Vem utvecklar HTML5?

Du kan delta i utvecklingen

Vilka är WHATWG?

Vilka är HTML WG?

Vad är HTML5?

HTML4

XHTML1

DOM2 HTML

HTML5

De facto-standarder i HTML5

Implementerade nya saker

Vad kan man använda idag?

Hur?

  1. Ändra inte dina vanor!
  2. Inkludera skript för ”gamla” webbläsare
  3. Använd de nya sakerna

Validering då?

Skript?

<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"> <!-- nope -->
<input class="bar foo"> <!-- bingo -->

getElementsByClassName()

var elms = document
.getElementsByClassName("foo bar");
<input class="foo"> <!-- nope -->
<input class="bar"> <!-- nope -->
<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 med <datalist>

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

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

Serialiseringar

text/html: boilerplate

<!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: boilerplate

<!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: boilerplate

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

text/html: attributsyntax

XHTML5

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>

HTML vs. XHTML i text/html

(X)HTML5 på serversidan?

HTML5 parsers

html5lib: parser-utdataformat

html5lib: ElementTree

import html5lib
from html5lib import treebuilders
import xml.etree.ElementTree as ElementTree

f = open("test.html")
p = html5lib.HTMLParser(tree=treebuilders
      .getTreeBuilder("etree", ElementTree))
elementtree = p.parse(f)

Framtiden