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 ?
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, Requirements
Innovation, Ideas
Creation
W3C Director
W3C Director
5 organizations
5 individuals
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
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
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
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
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
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 & 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
Sandboxing
Enables a set of extra restrictions on any content hosted
<iframe sandbox src='script.html'>
</iframe>
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>
</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">
<1--
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);
}
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)) {
// ...
}
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 )