HTML5 & the Open Web Platform

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

Bert Bos (W3C) <bert@w3.org>

Presented at:
Iran Web Festival
Tehran, Iran
26 January 2012

History of HTML

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

Version	Year	Syntax	Purpose
before 2.0	±1991	SGML	For hypertext documents
HTML 2.0	1995	SGML	Bug fixes, better use of SGML
HTML 3.2	1997	SGML	Temporary specification to document various HTML variants, preparation for HTML 4
HTML 4.0 & 4.01	1997, 1999	SGML	Support for internationalization, style sheets, accessibility, multimedia and scripting
XHTML 1.0 & 1.1	2000, 2001	XML	Alternative syntax of HTML 4 for XML-based environments.

Why HTML5?

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

No consensus on anything else for creating the UI of Web applications

Small improvements to document mark-up (<time>, <section>, etc.)

Make SVG (Tiny 1.2) and MathML (3.0) a required part of HTML

Document features (1/2)

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

Feature	Description
<time>	encode date and/or time (e.g., for microformats)
<aside>	footnote/sidenote
<details>, <summary>	collapsing/expanding text
<figure>, <figcaption>	a figure with a caption
<header>, <footer>	introductory, resp., concluding section of a chapter
<hgroup>	to create subtitles

Document features (2/2)

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

Feature	Description
<section>, <article>	variants of div
<nav>	encloses elements that are for navigation, rather than information
<ruby>, <rp>, <rb>	ruby annotations
<bdi>	bidi isolation, keep words together in bidirectional (right to left) text
MathML	→ demo MathML 3.0 is included in HTML5
SVG	SVG Tiny 1.2 is included in HTML5

Web Client 2001

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

Web Client 2011

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

Over 100 specifications and counting…

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

• HTML5
• CSS 2.1
• CSS 3 Selectors
• CSS 4 Selectors
• CSS 3 Media Queries
• CSS 3 Text
• CSS 3 Backgrounds and Borders
• CSS 3 Colors
• CSS 3 2D Transformations
• CSSOM View Module
• CSS 3 Transitions
• CSS 3 Animations
• CSS 3 Multi-Columns
• SVG 1.1
• WAI-ARIA 1.0
• MathML 2.0
• ECMAScript 5
• 2D Context
• WebGL
• Web Storage
• Indexed Database
• Web Workers
• Web Sockets Protocol/API
• Geolocation
• Navigation Timing
• Element Traversal
• DOM Level 3 Events
• Media Fragments
• XMLHttpRequest
• Selectors API
• CSSOM View Module
• File API
• RDFa
• Microdata
• WOFF
• HTTP 1.1 part 1 to part 7
• TLS 1.2 (updated)
• IRI (updated)
• …

Timeline

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

Each component follows its own timeline:

• HTML5 expected to be final by 2014
• Gathering use cases for HTML.next
• First release of HTML5 Test Suite in early 2012
• Several modules for CSS3 are final, as well as Geolocation, Navigation Timing

HTML5 or XHTML5?

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

• HTML5 enables HTML serialization (text/html) and XML serialization (application/xhtml+xml)
• “Polyglot” documents are documents that can be served as HTML or XHTML
• HTML5 incorporates SVG and MathML

HTML5 <video>

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

<video controls preload=auto poster="poster.png">
 <source src="trailer.mp4" type="video/mp4">
 <source src="trailer.webm" type="video/webm">
 <track kind=subtitles src="brave.en"
   srclang=en label="English">
 <track kind=captions src="brave_bis.en"
   srclang=en label="English for the Hard of Hearing">
 <track kind=subtitles src="brave.fr"
   srclang=fr label="Français">
 <p>Your user agent does not support
  the HTML5 Video element.
</video>

Codecs and formats

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

• Format container: .avi, .mp4, .webm, .ogg, .flv, .mkv…
  • Video codec: H.264, VP8, Theora, Dirac 2.1, H.263…
  • Audo codec: AAC, Vorbis, MP3, PCM…
  • Captioning, video description: SAMI, 3GPP, SMPTE-TT, Hi-Caption, CMML, TTML TS 26.245, SMIL, WebVTT…
  • Metadata: MPEG-7, CableLabs, TV-Anytime, EBU, XMP…

Codecs and formats

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

	Chrome	Firefox	Internet Explorer	Opera	Safari
video/mp4	*		✔		✔
video/ogg	✔	✔		✔
video/webm	✔	✔	*	✔

* if users install a plugin

Canvas

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

Resolution-dependent bitmap canvas

  <canvas width="720" height="400">
  </canvas>

Associated APIs:

• 2D Context API
• WebGL API (3D)

ctx = canvas.getContext('2d');

SVG and Video

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

You can use SVG to draw the UI

<video>...</video>
<div id="controls">
 <svg xmlns="http://www.w3.org/2000/svg"...>
  ...
  <g id="s-PlayButton">
   <path id="s-PlayLogo"
    style="fill:#ffffff;fill-opacity:1"
    d="M 43,10 L 43,22 L 53,16 L 43,10 z"/>
   ...
  </g>...</svg>
 ...
</div>
...
document.getElementById("s-PlayBack").
 addEventListener("click", svp_playButton, false);

SVG and Canvas

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

SVG	↔	Canvas
document-based (Google indexes SVG)	↔	script-based
vectors	↔	pixel operations
object model with hit-testing and events	↔	low-level graphics API, no scene graph
performance hit with large number of shapes	↔	fast rendering
accessible	↔	must create accessible equivalent

SVG vs Canvas

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

SVG	↔	Canvas
user interfaces	↔	fast-paced games
scalable images	↔	very complex images
interactive animations	↔	highly dynamic visualizations
for designers	↔	for developers

Forms & Fallbacks

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

<input placeholder="Type here" type='text'>
<input type='range' min='3' max='18'>
<input type='search' required>
<input type='tel'>
<input type='url'>
<input type='email'>
<input type='date'>
<input type='time'>
<input type='color'>
<input type='number'>
<input type='submit'>

Web Open Font Format (WOFF)

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

Jabberwocky
'Twas brillig, and the slithy toves
Did gyre and gimble in the wabe;
All mimsy were the borogoves,
And the mome raths outgrabe.

(Jabberwocky, by Lewis Carroll)

Memory Game

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

A little game written in JavaScript.

The images are actually letters in a font.

MathML

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

MathML3 is included in HTML5:

...
<ul>
 <li>
  <math mode="display">
   <mrow>
    <munderover>
     <mo>∑</mo>
     <mrow>
      <mi>i</mi>
      <mo>=</mo>
      <mn>1</mn>
     </mrow>
     <mi>p</mi>
    </munderover>
    ...

Web Application APIs

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

• Web DOM Core API
• Drag Drop API
• Text Selection API
• Undo History API
• 2D Context API
• Web Storage API
• Web Sockets API
• Web Workers API
• Web Messaging API
• Geolocation API
• Indexed Database API
• Microdata API
• RDFa API
• Element Traversal API
• XMLHttpRequest API
• Web Notification API
• DOM Level 3 Events API
• Navigation Timing API
• Multi-touch Events API
• CSSOM View Module API
• Selectors API
• File API
• Web Events API
• Resource Timing API
• Audio API
• Messaging API
• Device API
• …

Geolocation API

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

Different devices and user agents have different ways to determine position.

(Often multiple ways: GPS, Google Location Services…)

Single API for Web applications.

Privacy considerations: device (or user agent) must provide user with ways to easily grant/revoke permission to use location data.

Web Storage

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

window.localStorage['MyValue']
   = "pretty value";

p.textContent
   = window.localStorage['MyValue'];

p.textContent
   = window.sessionStorage['MyValue'];

WebSockets

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

• Bi-directional, full-duplex communications channels
• API is done at W3C, protocol is done at IETF
• Some implementations but the protocol is still unstable
• Using the HTTP 1.1 Upgrade directive

Audio API

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

Goal: Advanced audio capabilities for HTML5 audio

• Read and write raw audio data
• Modify audio streams
• Synthetize sound
• Operate on local and remote sources (synthesis, files, and sound-capture sources)

Device APIs

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

Web Performance APIs

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

requestAnimationFrame

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

Lets computer decide when to draw the next frame

function draw_cb(time) {
  // ... update display here...
  // Re-queue ourselves:
  window.requestAnimationFrame(draw_cb);
}

To start an animation:

id = window.requestAnimationFrame(draw_cb);

To cancel a queued request:

window.cancelRequestAnimationFrame(id);

Web Real-Time Communications API

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

• First draft published in October 2011
• Device access: discovery, capabilities
• Media: encoding/decoding streams, echo cancelling, synchronization
• Protocol: p2p, firewall/NAT traversal

See also IETF RTCWeb.

Security Considerations

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

Be aware of security and privacy considerations before using those features!

As a Web developer:

• Offline storage: Web Storage & IndexedDB:
  • Privacy: Sensitivity of Data
  • Security: Cross-directory attacks
• HTML5 forms: Servers should not rely on client-side validation.

See also OWASP top 10.

Online Privacy

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

November 14, 2011: First Draft of Standard for Online Privacy

• Tracking Preference Expression (DNT), which defines mechanisms for users to express cross-site tracking preferences and for sites to indicate whether they honor these preferences.
• Tracking Compliance and Scope Specification, which defines the meaning of a “Do Not Track” preference and sets out practices for websites to comply with this preference.

Accessible Rich Internet Applications (WAI-ARIA 1.0)

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

<li role=menuitemcheckbox onclick='...'
  aria-checked=true>Sort by Name</li>

Status (subset) (1/2)

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

	Status	Chrome 13	Firefox 6	IE 9	Opera 11.50	Safari 5
Video	WD	☼	☼	☼	☼	☼
Video formats	-	MPEG4 / WebM	WebM	MPEG4 / WebM	WebM	MPEG4 / WebM
2D Canvas	WD	☼	☼	☼	☼	☼
SVG	✔	☼	☼	☼	☼	☼
Forms	WD	☁	☁		☼	☁
Multithreading (Workers)	WD	☼	☼		☼	☼
Bidirectional protocol	WD	☂	☂			☂
Web storage	WD	☼	☼	☼	☼	☼
Indexed DB	WD		☁
2D Transforms	FPWD	☼	☼	☼	☼	☼

→

Status (subset) (2/2)

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

	Status	Chrome 13	Firefox 6	IE 9	Opera 11.50	Safari 5
3D Transforms	FPWD	☁	☁			☁
Transitions	FPWD	☼	☼	☼		☂
Animations	FPWD	☁				☁
Fonts	WD	☼	☼	☼	☼	☼
Geolocation	✔	☼	☼	☼	☼	☼
Navigation Timing	✔	☼		☼
Media Queries	✔	☼	☼	☼	☼	☼
Drag/drop	WD	☼	☼	☼	☼	☼
HTML5 parser	WD	☼	☼	☼	☼

Try caniuse.com

Feature Detection!

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

Do not copy the following code:

if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){
 var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
 if (ieversion>=9)
  return true;
 else
  return false;

You should write instead:

if (!!navigator.geolocation)

Try Modernizr

Can you use this platform?

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

• Yes!
  • Careful: most of the technologies are still in draft!
• Learn about the many capabilities and how well they are deployed
• Test by feature and not by browser name/version
• Get involved and provide feedback

What's missing? (1/2)

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

• Video Streaming (adaptive and live), P2P
• TV remote, DLNA
• TV channels, Speech
• More Web performance benchmarks
• 3D at the markup level (SVG equivalent)
• Identity, Access control
• Security, Privacy
• Digital content distribution and micropayment
• Data and query server discovery, service description
• Federated query server

→

What's missing? (2/2)

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

• Trust, Provenance
• Read-write Web
• Interoperability
• Education materials
• Certification (software and developers)
• Authoring tools support
• Multilingual support
• Publishing pipeline: more on XML?
• …

The end

● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

http://www.w3.org/Talks/2012/0125-HTML-Tehran/

Bert Bos <bert@w3.org>
GPG fingerprint:
7744 0204 52A5 14D9 147D
2A13 2D7A E420 184B 5BA4