Web Platform

annevankesteren.nl (@annevk)

#kingsofcode — June 2009

The Web Platform is the new desktop…...

A lot better, but also somewhat slower (still).

We're getting closer to the point where all you need is a device with a browser.

Can use/import code from anywhere in the world ("mashups").

URLs — access it from anywhere.

Open — access it from anything.

Secure — safe by default.

Participating is trivial: Building Web Applications, evolving The Web Platform, sharing information…

Browser Wintersleep

Until 2005 there was not much movement in the browser landscape.

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

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

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

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>

Graphics

SVG & <canvas>

<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

Editing

The contenteditable attribute.

The execCommand() API (and friends) is also standardized.

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

Audio

Almost the same as video, but the name is audio (doh).

Platform Integration

navigator.
registerProtocolHandler(
 "mailto",
 "https://mail.example.com/?url=%s",
 "Awesome Mail");

<meta name=application-name>

<link rel=icon sizes=512x512>

Offline Cache

<html manifest=appcache>

Storage

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

sessionStorage["price"] += 19.95m

SQL storage

Files

DataTransfer.files and <input type=file multiple>.files

File object that exposes local URL, can be used for uploading, et cetera.

Device Integration

So far "just" geolocation.

Networking

Three APIs: XMLHttpRequest, EventSource, and WebSocket.

XMLHttpRequest

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

Layout

CSS is unfortunately evolving at a somewhat slower pace, but we're getting transitions, custom fonts, transformations, and hopefully layout primitives for applications, soon.

Misc. New APIs.

Web Workers

Cross-document messaging: postMessage()

More convenient DOM access: getElementsByClassName()

Selectors API

querySelector("body > p")

querySelectorAll(".bad, .good")

Drag & Drop API

history.pushState(data, title, url)

Validation

html5.validator.nu

validator.w3.org

Thanks!

Questions?