Ajax 2.0

The Ajax Experience, #tae2008

Accessibility is a major problem with Ajax today:

<div class=checkbox></div>

<span id=counter></span>

WAI-ARIA

ARIA (Accessible Rich Internet Applications) is a W3C effort backed by the four browser vendors.

ARIA provides a low-level accessibility API to expose widgets and widget states to assistive technology.

<div class="slider">
 <span role="slider"
       tabindex="0"></span>
</div>

<div class="slider">
 <span role="slider"
       tabindex="0"
       aria-valuenow="2"
       aria-valuemin="-2"
       aria-valuemax="4"></span>
</div>

Characters left:
<span aria-live="polite">
 140
</span>

Huge benefit for accessibility and should definitely be used, but complexity is on the author.

Supported in Opera, Firefox, and soon Safari and Internet Explorer (sort of).

HTML5

<input type=range>:

<input type=date>:

Compared to ARIA these are simple to author and accessible, but not widely supported and potentially less flexible.

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

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

1. Increasing interoperability by defining the Web platform.

For instance, the contenteditable attribute.

2. Extending the Web platform.

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <bb> <base> <bdo> <blockquote> <body> <br> <canvas> <caption> <cite> <code> <col> <colgroup> <command> <datagrid> <datatemplate> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <eventsource> <figure> <footer> <h1> <h2> <h3> <h4> <h5> <h6> <head> <header> <hr> <html> <i> <iframe> <img> <ins> <kbd> <legend> <li> <link> <mark> <map> <menu> <meta> <meter> <nav> <nest> <noscript> <object> <ol> <p> <param> <pre> <progress> <q> <rule> <samp> <script> <section> <small> <source> <span> <strong> <style> <sub> <sup> <table> <tbody> <td> <tfoot> <th> <thead> <time> <title> <tr> <ul> <var> <video>

Simple `canvas` drawing application

<canvas width="150" height="200" id="demo">
 <!-- fallback content here -->
</canvas>

<script type="text/javascript">
 var canvas = document.getElementById("demo"),
     context = canvas.getContext("2d")
 context.fillStyle = "lime"
 context.fillRect(0, 0, 150, 200)
</script>

Demo nihilogic.dk.

Backwards compatible with HTML 4 & XHTML 1.x.

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

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

Validation

html5.validator.nu

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

Offline

<html manifest=…>

navigator.onLine, window.onoffline, …

Offline (continued)

localStorage["status"] = "Idling..."
sessionStorage["price"] += 19.95m

SQL storage

Forms

Combobox

<input list=browsers>
<datalist id=browsers>
 <option>Opera</option>
 <option>Firefox</option>
 <option>Chrome</option>
</datalist>

"Google suggest"

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

<input type=number step=3>:

Lets quickly go through some of the other HTML5 features…

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

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

Cross-document messaging: postMessage()

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

getElementsByClassName("important note")

<script src=… async></script>

<script src=… defer></script>

`XMLHttpRequest`

Being standardized by the W3C.

Working on XMLHttpRequest Level 2.

Main cool new features: cross-site requests & progress events.

Under consideration: timeout event.

Cross-Site Requests

Still use client.open()

Cross-site resource uses Access-Control-Allow-Origin HTTP header

Access-Control-Allow-Origin: http://example.org

Access-Control-Allow-Origin: *

Cross-site requests with special headers and HTTP methods other than GET and POST require a preflight.

Microsoft: XDomainRequest :/

Element Traversal

firstElementChild, lastElementChild, previousElementSibling & nextElementSibling.

Selectors API

querySelectorAll("tr:nth-child(even)")

querySelectorAll("figure > img")

Web Workers

var worker = new Worker("worker.js"),
    r = document.getElementById("result")
worker.onmessage = function (e) {
 r.textContent = e.data;
}

Opera Dragonfly

Alright, questions?