Introduction

Introduction to W3C

Who am I?

• Responsible for the Interaction Domain
• Interaction Domain contains items like HTML, CSS, SVG, WOFF, Video, various Web APIs, etc.
• Based at MIT, Cambridge, MA, USA, one of the 4 hosts of W3C

The World Wide Web Consortium (W3C)

• Lead Web to its Full Potential
• 384 Members
• Web ecosystem: users, developers, browsers, etc.
• 80 staff in US (MIT), China (Beihang), France (ERCIM) and Japan (Keio)

How does W3C work?

• Focus is to create standards that lead to public and commercial benefits
• W3C accepts inputs from all and provides outputs to all
• Each participation brings their expertise, perspective (and their own agenda)
• Work organized into 5 “Domains” Interaction, UbiWeb, Accessibility, Technology and Society, and Information and Knowledge
• 46 Working Groups and 14 Interest Groups
• Liaisons with many organizations: IDPF, IETF, OMA, DLNA, ISO JTC1, ITU-T, Open IPTV Forum, SMPTE, EBU, more.

Why joining?

• Ability to lead and influence
• Gain earlier strategic insight
• Recognition
• Ability to collaborate
• Access to industry experts
• Networking opportunities

Current Chinese Members

• Baidu
• China Electronics Standardization Institute
• China Unicom
• Huawei
• Tencent
• RITT
• UCWEB
• …

How do we make Web Standards?

• Only W3C Working Groups are producing W3C Recommendations

• Standard track: W3C Recommendation Track
  …as defined by the W3C Process.

Different Group types

46 Working Groups

Each has:

• One or more Chairs
• One or more Team Contacts
• A Charter, proposed by the W3C Director, developed with the W3C Members:
  scope, one or more deliverables, liaisons
• Tools:
  Mailing list(s), teleconference(s), wiki(s), Version Control System(s), etc.

A Working Group MUST follow the W3C Process.

See W3C Groups

Working Group lifetime

W3C Recommendation Track

Agenda

• Open Web Platform
• Stabilization of the Core
• Let's dive

Web is Central

• Usage
  • Accessed by billions
  • In many languages
  • Vital for information sharing, entertainment, education, commerce
• Technology
  • Common, pervasive, and interoperable
  • Internationalized
  • Widely used by developers
  • Linked sites and linked data

Web Trends Affecting Society

• Web everywhere
• Devices
  • Convergence of digital home, mobile computing, mobile media, and mobile internet
  • Diversity of device types (eBooks, printers, tablets, televisions, automobiles)
• Apps with rich interactions. People want:
  • Apps in addition to documents
  • Rich media (video, animations, digital photography, music)
  • Location-based services
  • Social

Mobile Web

• Web is the third mobile
• 37% of mobile developers use HTML5
• #2 of Gartner top 10 mobile technologies for 2015 and 2016
• Mobile Web Interest Group
• Our priorities: offline support, installable apps, push, responsive design, performance
• Looking at payments, identity, social Web

Automotive

• Driving a car is a mobile experience
• Automotive and Web Platform Business Group
• Vehicule API: in-vehicle infotainment system and vehicle data access protocols
• Next step: Challenges of reducing driver distraction and improving safety

TV and Broadcasting

• Convergence of user experience: connected/smart TVs and online video
• Increase of production internet-delivered TV shows
• Web and TV Interest Group
• W3C Focusing on video streaming/adaptation and content protection
• Recently rechartered our Timed Text Working Group around TTML and WebVTT
• Next: TV Control API, Second Screen API, new use cases and requirements

Digital Publishing

• Embracing mobility
• All existing formats are based on Web technologies
• Digital Publishing Interest Group
• Prioritarization of use cases and requirements
• Work happening on WOFF2, Paged Media, Writing Modes, etc.

Annotations

• Renewed interest in annotations on the Web
• Crucial feature for the digital educational market
• Workshop was in April
• Next: setting the appropriate group

Social Web

• Social data is another form of currency with tremendous value
• No easy transfer of social data between existing systems
• W3C is creating a Social Web Working Group:
  • Transfer syntax for activities
  • Third-party social content embedding API
  • Federation protocol

Web Payments

• The Web has enabled a huge volume of payments (“In 2012, B2C ecommerce sales grew 21.1% to top $1 trillion for the first time” by eMarketer)
• HTML5 is the reference standard for cross-device implementation, can it play the same role for payments?
• This would mean:
  • Standard mechanisms for app developers to receive payments
  • Simplifications for users, merchants, credit card companies
  • Improved loyalty schemes
  • Increased security; decreased fraud

Focus on client

Workshop Output: Next steps

• A Web Payments Interest Group to act as steering committee
  • Identifying & prioritizing technical work items
  • Developing use-cases and liaising with rest of W3C
  • Launch of Charter drafting group: http://www.w3.org/community/webpaymentsigcharter/#
• Leveraging Web payment use-cases into existing WGs
• New technical work items organized around:
  • Wallets & wallets API
  • Payments transaction messaging
  • Authentication & security

Wallets

• Objectives:
  • Simplify management of payment mechanisms from a client point of view
  • Decrease challenges in supporting a growing number of payment method
  • Integrate new schemes such as coupons, loyalty cards, etc.
    • Decoupling web applications from wallets and payment solutions
    • Standardizing interface between wallets and applications not the wallet itself
• Process:
  • Secure key players commitments: browser vendors, payment industry,…
  • Identify focus, place(s) and role(s) of standards
  • Launch a WG to address the technical work

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

• Objectives:
  • Evolve the browsers to allow high value authentication
  • Minimize risk in identifying users:
    • Build on top of WebCrypto API implemented by *all* major browsers
    • Include hardware tokens, smartcards, biometrics, 2nd factor, etc.
  • Explore possible mechanisms for Trusted UI
• Process:
  • Google has already sent a proposal to the WebCrypto mailing list to create enhancements to support Fido Alliance standards
  • Organize a workshop 10-11 September hosted by MS and Sponsored by Google and Tyfone
  • Create a roadmap to extend WebCrypto API
  • Explore tighter relationships with Fido, SmartCard Alliance, and W3C

Benefits

• Users
  • Greater choices for payments
  • Greater security
  • Greater consistency
  • Lower level of trust required to merchants
• Merchants
  • Easier to integrate new payment solutions
  • Fewer constraints and less risk in payment management
  • Lower level of trust required from users
• Payment Service Providers
  • Easier innovation
  • Easier adoption by users and merchants
  • Higher security
• Developers
  • Easier seamless integration
  • No need to investigate each and every payment service provider

HTML5: Cornerstone of the Platform

Standard Technologies

Agenda

• Open Web Platform
• Stabilization of the Core
• Let's dive

HTML 5.0

• Standard is scheduled for Q42014
• Removing unstable features
• Demonstrating interoperability using over 142,000 tests
• Extensions: Image description, Media Source, EME, JSON form, Form HTTP, …

Beyond HTML5

• Continue to push innovation through extensions, with possible reintegration later on (e.g. Resource Priorities, Responsive Images)
• Continue the integration of Web Components (HTML Imports)
• Rich Editing
• Better frames and forms
• Continue improving HTML accessibility
• Better integration of HTML and ES6 (including Promises)

Extensible Web Summit

• Looking at September 11, in Berlin (next to JSConf EU)
• Unconference style
• Focus on the discussion on future of HTML, in particular Rich Editing, in coordination with Web Applications Group

CSS

Current effort focused on:

• Exposing primitives to allow complex functionality and extensibility
• Bringing functionality that is common in paper printing to the Web
• Improving performance, e.g. will change

Performance

• Increasing the set of analytic data: resource timing, naigation error logging
• Improving resource loading, ES6 support: resource priorities, WOFF2
• Improving power consumption: requestAnimationFrame, page visibility
• Improving transfer of analytic data: Beacon
• Improving rendering hints: will change
• Guidelines and use cases for Web developers

Security

• Digital signature for resources: subresource integrity
• Advanced UI Security
• Cryptography API with key management
• Upcoming workshop on Authentication, Hardware Tokens and Beyond.

Internationalization

• Predefined Counter Styles
• Encoding on the Web
• Better support for east-asian Text and Layout
• Chinese layout requirements

Testing

• The Open Web Platform is growing
• We're shipping code and devices "HTML5 ready"
• ... and we still have interoperability issues
• We need:
  • More tests, and cleanup of existing tests. As the test ecosystem grows in reliability and usability, tests become increasingly used to support technical discussion and shape how a standard evolves.
  • Automatic checking of tests
  • Nightly test results from browser makers, which Working Groups could use in implementation reports
  • Improved bindings between specification features and corresponding tests

Agenda

• Open Web Platform
• Stabilization of the Core
• Let's dive

<datalist> element

Allow free input while giving your user some options

<input list="countries" />
<datalist id="countries">
<option>Czech Republic
<option>Denmark
<option>Djibouti
<option>Ecuador
<option>Egypt
...
</datalist>
      

see datalist example

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

see progress and meter example

<iframe sandbox src='script.html'>
</iframe>

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

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

CSS

• Mathematical expressions
• resize
• Multiple backgrounds
• More units

Mathematical expressions

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

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

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

Proposal: CSS Conditional Rule

Feature queries: the ‘@supports’ rule

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

APIs

• Fullscreen
• getUserMedia
• IndexedDB
• matchMedia
• Navigation Timing
• Page Visibility
• requestAnimationFrame

Fullscreen

myElement.requestFullscreen();

document.exitFullscreen();
document.fullscreenEnabled;

section:fullscreen {
  border: none;
}

getUserMedia

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.stop();
    };
   stream.onended = function () {
     startBtn.disabled = false;
   };
 }

See getUserMedia example

Pointer Events

Device-agnostic pointer multi-input

pointerevent.pointerId
pointerevent.width
pointerevent.pressure
pointerevent.tiltX

"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.hidden
document.addEventListener('visibilitychange', ...);

requestAnimationFrame

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

Beacon

Make best effort to send data at earliest convenience

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

Participating

• 46 Working Groups: HTML, CSS, Web Applications, SVG, Sys
• 10 Interest Groups: Mobile, Web and TV, Digital Publishing

HTML5 Chinese Interest Group

• Facilitate discussion in Chinese of HTML5 and related specifications
• Chairs: Chao Feng (Opera), Zhiqiang Zhang (Intel), Jinjiang Zhao (Invited Expert)
• ~800 subscribers
• public-html-ig-zh@w3.org (public archive)

Thank you

Questions?