March 2013
Philippe Le Hégaret <plh@w3.org>
Interaction Domain Lead, W3C
Only W3C Working Groups are producing W3C Recommendations
Standard track: W3C Recommendation Track
…as defined by the W3C Process.
| 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 |
The Chair MAY invite an individual with a particular expertise to participate in a Working Group.
6.2.1.3 Invited Expert in a Working Group, W3C Process
Each has:
A Working Group MUST follow the W3C Process.
See W3C Groups
|
| 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 |
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
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
</ul>
<script>
// for each element
total += parseFloat(element.dataset.calories);
</script>
see dataset example
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>
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
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'>
// 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">
calc() function allows mathematical expressions +, -, *, and / to be used as component values
section {
width: calc(50% + 20px);
}
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%)
allows the author to specify whether or not an element is resizable by the user
overflow:auto;resize: both;
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;
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
Feature queries: the ‘@supports’ rule
@supports ((transition-property: color) or
(animation-name: foo)) and
(transform: rotate(10deg)) {
// ...
}
myElement.requestFullscreen();
document.exitFullscreen();
document.fullscreenEnabled;
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.stop();
};
stream.onended = function () {
startBtn.disabled = false;
};
}
Device-agnostic pointer multi-input
pointerevent.pointerId pointerevent.width pointerevent.pressure pointerevent.tiltX
"pointerdown", "pointercancel", "pointerout", ...
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.
Determine the current visibility of a page
document.hidden
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);
}
Groups usually test:
Groups usually don't:
See also testsuite effort documentation
Such as: