slanted W3C logo
Cover page images (keys)

W3C at Boston PHP

March 2013

Philippe Le Hégaret <>

Interaction Domain Lead, W3C

Who am I?


The World Wide Web Consortium (W3C)

How does W3C work?

How do we make Web Standards?

Different Group types

Working Interest Business Community
Scope Charter Charter Statement Statement
Deliverable Standard-track Report Report Specification
Participation Membership or
Invited Expert
Membership or
Invited Expert
Membership or
Annual fees
Open to public
Patent Policy W3C Patent Policy W3C Disclosure rules Contributor Lic. Agreement,
Final Spec Agreement
Contributor Lic. Agreement,
Final Spec Agreement
Coordination Yes Yes Partial Ad-hoc
Technology Stable Use cases,
Requirements, etc.
Use cases,
Innovation, Ideas
Creation W3C Director W3C Director 5 organizations 5 individuals

Invited Experts?

The Chair MAY invite an individual with a particular expertise to participate in a Working Group. Invited Expert in a Working Group, W3C Process

54 Working Groups

Working Group meeting

Each has:

A Working Group MUST follow the W3C Process.

See W3C Groups

Working Group lifetime

Public W3C Members Invited Experts Technical Review, Tests, Pilot Implementations Document Translations Member Submissions, Charter Review, Delegation of Experts, Patent Policy Commitments Technical Review, Tests, Pilot Implementations Press Activities, Testimonials Working Group Formation Recommendation Track Publication of Web Standard Document Maintenance Community Groups Workshop Document Translations Participants Delegation of Experts Delegations of Experts, Organization, Sponsor Experts

W3C Recommendation Track

height='75%'> Public W3C Members Technical Review Technical Review Technical Review, Tests, Pilot Implementations Technical Submissions, Technical Review Technical Review Technical Review, Tests, Pilot Implementations Endorsement Working Draft Last Call Working Draft Candidate Recommendation Proposed Recommendation Proposed Edited Recommendation Recommendation Endorsement, Pilot Implementations Technical Review, Pilot Implementations


Web is Central

Web Trends Affecting Society

HTML5: Cornerstone of the Platform

  • Reach multiple devices
    Desktop, mobile, tablet, TV, Automobile?
  • Powerful and modular
    Documents, multimedia, interactivity
  • Multi-application
    eBooks, user interfaces, games
  • Standard scheduled for 2014
HTML5 Logo

Standard Technologies

Core Hypertext Markup Language (HTML)
Video/Audio HTML, WebRTC, Web Audio
Style Cascading Style Sheets (CSS)
Fonts Web Open Font Format (WOFF)
Protocols HTTP, Web Sockets
Graphics Scalable Vector Graphics (SVG), HTML Canvas
Offline access Web APIs: Web Storage, IndexedDB, File API
Device access Web APIs: Geolocation, Multi-touch, Media Capture, etc.
Performance Web APIs: Navigation timing, Page Visibility, Animation timing

Web Client 2012

Web Client


Let's dive


<datalist> element

Allow free input while giving your user some options

<input list="countries" />
<datalist id="countries">
<option>Czech Republic

see datalist example

dataset & data-* attributes

Custom data not intended for use by software that is independent of the site that uses the attributes.

<ul id='veggies'>
<li data-calories='11' data-weight='2'>Asparagus
<li data-calories='23' data-weight='3.5'>Cauliflower
<li data-calories='20' data-weight='2.5'>Mushrooms
<li data-calories='25' data-weight='1.5'>Peas
// for each element
  total += parseFloat(element.dataset.calories);

see dataset example

Progress & Meter

completion progress of a task and scalar measurement within a known range

<progress max='100' value='50'>
<meter min="10" max="100" value="30"></meter>

see progress and meter example


Enables a set of extra restrictions on any content hosted

<iframe sandbox src='script.html'>

Values: allow-forms, allow-pointer-lock, allow-popups, allow-same-origin, allow-scripts, allow-top-navigation

see sandbox example

async and defer scripting

Indicate how the script should be executed

// synchronous blocking behavior
<script async src='script.html'>

// when the page has finished parsing
<script defer src='script.html'>

// as soon as available
<script async src='script.html'>

Proposal: Responsive images

// picture element
<picture width="500" height="500">
   <source media="(min-width: 45em)" src="large.jpg">
   <source media="(min-width: 18em)" src="med.jpg">
   <source src="small.jpg">
   <p>Accessible <strong>and rich</strong> text</p>

// srcset attribute
<img alt="The Breakfast Combo" src="banner.jpeg"
         srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w,
                 banner-phone-HD.jpeg 100w 2x">


Mathematical expressions

calc() function allows mathematical expressions +, -, *, and / to be used as component values

section {
  width: calc(50% + 20px);
width: 50%;
width: calc(50% + 100px);

Repeating gradients

smoothly fades from one color to another, and repeat

repeating-linear-gradient(circle at top left,
	                             #222 10%,  #444 25%, #222 50%, #444 100%, #222 105%)

resize property

allows the author to specify whether or not an element is resizable by the user

overflow:auto;resize: both;

Multiple backgrounds

The background of a box can have multiple layers in CSS3.

background-image: url(image1.png), url(image2.png);
background-position: center bottom, left top;
background-repeat: no-repeat;

More units

Default inherited font-size

font-size: 4vw

font-size: 4vh

font-size: 4vmin

font-size: 4vmax

font-size: 150%

font-size: 3em

font-size: 3rem

font-size: 3ex

font-size: 3ch

Proposal: CSS Conditional Rule

Feature queries: the ‘@supports’ rule

@supports ((transition-property: color) or
           (animation-name: foo)) and
          (transform: rotate(10deg)) {
  // ...





section:fullscreen {
  border: none;


Local audio and video access

 function start() {
   navigator.getUserMedia({audio:true, video:true}, gotStream);
   startBtn.disabled = true;
 function gotStream(stream) {
    video.src = URL.createObjectURL(stream);
    video.onerror = function () {
   stream.onended = function () {
     startBtn.disabled = false;

See getUserMedia example

Pointer Events

Device-agnostic pointer multi-input


"pointerdown", "pointercancel", "pointerout", ...

Navigating Timing

client-side latency measurements within applications

function onLoad() {
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  alert("User-perceived page loading time: " + page_load_time);

fetchStart, requestStart, responseEnd, etc.

Page Visibility

Determine the current visibility of a page

document.addEventListener('visibilitychange', ...);


Script-based animations where the user agent is in control of limiting the update rate of the animation

function animate(time) {
  // do something
  requestId = window.requestAnimationFrame(animate);
function start() {
  requestId = window.requestAnimationFrame(animate);



Community Groups

Your Web, documented


What Groups do?

Groups usually test:

Groups usually don't:

How can you write test?

See also testsuite effort documentation

Additional Questions?

Such as: