HTML5

Anne van Kesteren (Opera Software)

9/11 — Fronteers 2008

<input type=date>

How did we get here?

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.

WHATWG

>800 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

HTML5: What is it about?

1. Increasing interoperability by defining the Web platform.

2. Extending the Web platform.

Backwards compatible with HTML 4 & XHTML 1.

For Web applications & documents.

The `DOCTYPE`

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

<!doctype html>

Character encoding

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

<meta charset="utf-8">

`<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>

Demo.

Thanks to Jacob Seidelin, nihilogic.dk.

Video

Video issues: syntax & format.

Syntax

<video src=clip.ogg></video>

Format

Ogg Theora?

controls=""

<video src=clip.ogg controls>
  Download the <a href=clip.ogg>clip</a>.
  <!-- browser does not support <video> -->
</video>

Demo time! (No rickrolling, promised.)

labs.opera.com/downloads

poster=""

autoplay=""

Distributing several equivalent video streams

`<source>`

<source> is what we call a "void element"

Write either <source> or <source/>

<video>
 <source type=video/mp4 src=clip.mp4>
 <source type=video/ogg src=clip.ogg>
</video>

`HTMLVideoElement`

HTMLVideoElement inherits from HTMLMediaElement as <audio> shares much of the API.

play(), pause(), currentTime, seeking, paused, …

error:
MEDIA_ERR_ABORTED, MEDIA_ERR_NETWORK & MEDIA_ERR_DECODE

networkState:
EMPTY, LOADING, LOADED_METADATA, LOADED_FIRST_FRAME & LOADED

readyState:
DATA_UNAVAILABLE, CAN_SHOW_CURRENT_FRAME, CAN_PLAY & CAN_PLAY_THROUGH

buffered, addCueRange(), volume, muted, …

Events

seeking, waiting, seeked, pause, play, timeupdate, canplay, canplaythrough, volumechange, …

That was video… Quick intermediate question?

Validation

html5.validator.nu

Soon validator.w3.org, now qa-dev.w3.org/wmvs/HEAD

Other HTML5 features

<iframe src=...
  sandbox="allow-scripts"
  seamless""
></iframe>

getElementsByClassName()

<html manifest=appcache>

SQL storage

localStorage["status"] = "Idling..."

sessionStorage["price"] += 19.95m

<figure>
 <img src="bubbles-work.jpeg"
      alt="Bubbles, sitting in his office chair,
           works on his latest project intently.">
 <legend>Bubbles at work</legend>
</figure>

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

socket = new WebSocket("ws://example.org/stream")
socket.postMessage("Hello World!")
socket.onmessage = function(e) { process(e.data) }

Cross-document messaging: postMessage()

Thanks for your time!
Questions?

The DOCTYPE