Web Standards

Anne van Kesteren (Opera Software)

pfcongrez — April 2009

HTML5

<input type=date>

History

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

>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

Increasing Interoperability

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.

Extending HTML

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

Simpler HTML

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

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>

Simple canvas application

Video

Video issues: syntax & format.

Syntax

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

Format

Ogg Theora?

Distributing several equivalent video streams

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


labs.opera.com/downloads

(Yes, there's an equivalent audio element.)

Forms

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

Validation

html5.validator.nu

validator.w3.org

Applications

Offline Cache

<html manifest=appcache>

Cross-document messaging: postMessage()

More convenient DOM access: getElementsByClassName()

This part roughly covered HTML5…

Selectors API

querySelector("body > p")

querySelectorAll(".bad, .good")

Web Storage

SQL storage

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

sessionStorage["price"] += 19.95m

New Network APIs

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) }

CSS3

Bedankt! Vragen?