slanted W3C logo
Cover page images (keys)


May 2014, Alipay

Philippe Le Hégaret <>

Interaction Domain Lead, W3C


Introduction to W3C

Who am I?

The World Wide Web Consortium (W3C)

How does W3C work?

Why joining?

Current Chinese Members

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

46 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

Mobile Web


TV and Broadcasting

Digital Publishing


Social Web

Web Payments

Focus on client

Workshop Output: Next steps


Payment Transaction Messaging

  • Background: In traditional POS terminals, standards substantially reduce cost and simplify operations
  • Payments on the Web evolved w/o strong standardization. Requirements
    • Identify merchant, amount of purchases, currency
    • Format of payment transaction messages
  • The Web experience “should “ be better. Opportunities:
    • Consumer ID
    • Proof of purchase
    • Value added svcs
      • Virtual wallet
    • Leverage phone

Authentication & Security


HTML5: Cornerstone of the Platform

  • Reach multiple devices
    Desktop, mobile, tablet, TV, Automotive
  • Powerful and modular
    Documents, multimedia, interactivity
  • Multi-application
    eBooks, user interfaces, games
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, RTCWeb
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


HTML 5.0

Beyond HTML5

Extensible Web Summit


Current effort focused on:






<datalist> element

Allow free input while giving your user some options

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

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

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

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

Navigation 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);


Make best effort to send data at earliest convenience

window.onunload = function onUnloadHandler() {
	// fire and forget HTTP POST
	navigator.sendBeacon("/log.php", analyticsData);


HTML5 Chinese Interest Group

Thank you