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

HTML5 & THE OPEN WEBPLATFORM

Presented at:Iran Web FestivalTehran, IranJanuary 2012

Bert Bos | HTML5 and the Open Web Platform1/1

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

HISTORY OF HTML

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 todocument various HTMLvariants, 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 forXML-based environments.

1/1

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

WHY HTML5?

No consensus on anything else for creating the UI ofWeb applications

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

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

1/1

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

GOALS OF HTML5 AND OPENWEB PLATFORM

Same quality as native applications, but moreportable

◦ beautiful, interactive, intelligent

Can run without installation: always latest version

Same technology for many different platforms/devices: desktop, mobile, television…

… the most interoperable platform in the industry

1/1

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

BENEFITS

Better Web application adaptation to multipledevices

Reduce the size of Web applications

Reduce the need to install third-party plug-ins

Facilitate deployment of applications acrossplatforms: one dev platform for all

Allow more complex applications to be pushedand deployed through the Web Cloud

Royalty-Free1/1

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

ADOPTION

“2.1 Billion HTML5 Browsers on Mobile Devicesby 2016 says ABI Research” - July 22, 2011

Major browsers: IE9+, FF4+, Safari5+, Chrome10+, Opera 11+, Blackberry Browser

Platforms: iOS, Android, ChromeOS, BlackberryOS, Symbian, Windows Mobile 8

Libraries: Webkit (Google, Apple, Nokia, etc.),Gecko (Mozilla), Trident (Microsoft), Presto(Opera)

1/1

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

HTML5 AND THE OPEN WEBPLATFORM

More than a 100 royalty-free technologies withinthe same environment: HTML5, CSS3, SVG1,Web Sockets, Web Workers, Indexed Database,File, Geolocation, etc.

Incremental evolution of the platform: Real-TimeWeb Communications, Audio, User Timing

1/1

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

DOCUMENT FEATURES (1/2)

<time> encode date and/or time (e.g., formicroformats)

<aside> footnote/sidenote

<details>,<summary>

collapsing/expanding text

<figure>,<figcaption>

a figure with a caption

<header>,<footer>

introductory, resp., concluding sectionof a chapter

<hgroup> to create subtitles

1/1

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

→ demo*

DOCUMENT FEATURES (2/2)

<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 inbidirectional (right to left) text

MathML MathML 3.0 is included inHTML5

SVG SVG Tiny 1.2 is included in HTML51/1

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

WEB CLIENT 2001

Web

DocumentsHTML CSS Javascript

BrowserMemory Model (DOM, script engine)

Script

Network APIXHR

Med

iaim

ages

DOMHTML

textforms

CSSstyle

Presentation

screen, audio, haptic, etc.

parsers

DevicesMouse Keyboard

User

1/1

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

WEB CLIENT 2011

Web

DocumentsHTML CSS Javascript MathML SVG ARIA metadata

BrowserMemory Model (DOM, script engine)

Script

Can

vas API

Audio A

PI

Offline StorageWeb StorageIndexed DB

Device APIsGeolocationOrientation

Network APIsWeb SocketsXHR, PeerConnection CORS

DOMMathML

formulaHTML

textforms

SVG2D graphics

visual effects

CSSstyle

ARIAaccessibility

Med

iavid

eo, audio, im

ages, etc.

Presentation

screen, audio, haptic, etc.

parsers

DiskCalendarContacts

DevicesMouse Keyboard Touch Screen Accelerometer TV Remote?

Microphone CameraGPS

User

1/1

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

OVER 100 SPECIFICATIONS ANDCOUNTING…

• 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) • …

1/1

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

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 asGeolocation, Navigation Timing

1/1

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

HTML5

syntax

XHTML5

syntaxPolyglot

HTML5

parserXHTML5

parser

In memory model

(DOM)

HTML5 OR XHTML5?

HTML5 enables HTMLserialization (text/html) andXML serialization(application/xhtml+xml)

“Polyglot” documents aredocuments that can be servedas HTML or XHTML

HTML5 incorporates SVG and MathML

1/1

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

→ demo*

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 supportthe HTML5 Video element.

</video>

1/1

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

CODECS AND FORMATS

Format container: .avi, .mp4, .webm, .ogg, .flv,.mkv…

Videocodec:H.264, VP8,Theora,Dirac 2.1,H.263…

Audo codec:AAC,Vorbis, MP3,PCM…

Captioning,videodescription:SAMI, 3GPP,SMPTE-TT,Hi-Caption,CMML,TTML TS26.245,

Metadata:MPEG-7,CableLabs,TV-Anytime,EBU,XMP…

1/1

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

CODECS AND FORMATS

Chrome FirefoxInternetExplorer

Opera Safari

video/mp4

* ✔ ✔

video/ogg ✔ ✔ ✔

video/webm ✔ ✔ * ✔

* if users install a plugin

1/1

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

→ demo*

CANVAS

Resolution-dependent bitmap canvas

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

Associated APIs:

2D Context API

WebGL API (3D)

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

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

→ demo*

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

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

SVG AND CANVAS

SVG ↔ Canvas

document-based(Google indexes SVG*)

↔ script-based

vectors ↔ pixel operations

object model with hit-testingand events

↔ low-level graphics API, noscene graph

performance hit with largenumber of shapes

↔ fast rendering

accessible ↔ must create accessibleequivalent

1/1

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

SVG VS CANVAS

SVG ↔ Canvas

user interfaces ↔ fast-paced games

scalable images ↔ very complex images

interactive animations ↔ highly dynamic visualizations

for designers ↔ for developers

1/1

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

FORMS & FALLBACKS

<input placeholder="Typehere" type='text'><input type='range'min='3' max='18'>

<input type='search'required>

<input type='tel'><input type='url'>

<input type='email'> plh@w3.org<input type='date'><input type='time'><input type='color'><input type='number'> 1/1

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

WEB OPEN FONT FORMAT(WOFF)

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

(Jabberwocky, by Lewis Carroll) 1/1

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

demo ←*

MEMORY GAME

A little game written in JavaScript.

The images are actually letters in a font.

1/1

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

→ demo*

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>... 1/1

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

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 • …

1/1

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

→ demo*

GEOLOCATION API

Different devices and user agentshave different ways to determineposition.

(Often multiple ways: GPS, Google LocationServices…)

Single API for Web applications.

Privacy considerations: device (or user agent) mustprovide user with ways to easily grant/revokepermission to use location data. 1/1

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

WEB STORAGE

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

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

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

1/1

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

WEBSOCKETS

Bi-directional, full-duplex communicationschannels

API is done at W3C, protocol is done at IETF

Some implementations but the protocol is stillunstable

Using the HTTP 1.1 Upgrade directive

1/1

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

AUDIO API

Goal: Advanced audio capabilities forHTML5 audio

Read and write raw audio data

Modify audio streams

Synthetize sound

Operate on local and remote sources (synthesis,files, and sound-capture sources)

1/1

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

DEVICE APIS

1/1

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

WEB PERFORMANCE APIS

Goal: provide methods to enhance aspects ofapplication performance of user agent features andAPIs.

Navigation and Resource Timing: access timinginformation related to navigation and elements

User Timing: high precision timestamps

Page Visibility: determine the current visibilitystate of the page

1/1

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

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

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

WEB REAL-TIMECOMMUNICATIONS API

First draft published in October 2011

Device access: discovery, capabilities

Media: encoding/decoding streams, echocancelling, synchronization

Protocol: p2p, firewall/NAT traversal

See also IETF RTCWeb*.

1/1

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

SECURITY CONSIDERATIONS

Be aware of security and privacyconsiderations before using thosefeatures!

As a Web developer:

Offline storage: Web Storage & IndexedDB:◦ Privacy: Sensitivity of Data◦ Security: Cross-directory attacks

HTML5 forms: Servers should not rely onclient-side validation.

1/1

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

ONLINE PRIVACY

November 14, 2011: First Draft ofStandard for Online Privacy

Tracking Preference Expression (DNT)*, whichdefines mechanisms for users to express cross-site tracking preferences and for sites to indicatewhether 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 tocomply with this preference.

1/1

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

ACCESSIBLE RICH INTERNETAPPLICATIONS (WAI-

ARIA 1.0)*

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

1/1

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

STATUS (SUBSET) (1/2)

StatusChrome

13Firefox

6IE 9

Opera11.50

Safari5

Video WD ☼ ☼ ☼ ☼ ☼

Video formats -MPEG4 /WebM

WebMMPEG4 /WebM WebM

MPEG4 /WebM

2D Canvas WD ☼ ☼ ☼ ☼ ☼SVG ✔ ☼ ☼ ☼ ☼ ☼

Forms WD ☁ ☁ ☼ ☁Multithreading

(Workers)WD ☼ ☼ ☼ ☼

Bidirectionalprotocol

WD ☂ ☂ ☂

Web storage WD ☼ ☼ ☼ ☼ ☼Indexed DB WD ☁

2DTransforms

FPWD ☼ ☼ ☼ ☼ ☼1/1

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

STATUS (SUBSET) (2/2)

StatusChrome

13Firefox

6IE9

Opera11.50

Safari5

3DTransforms

FPWD ☁ ☁ ☁

Transitions FPWD ☼ ☼ ☼ ☂Animations FPWD ☁ ☁

Fonts WD ☼ ☼ ☼ ☼ ☼Geolocation ✔ ☼ ☼ ☼ ☼ ☼Navigation

Timing ✔ ☼ ☼

Media Queries ✔ ☼ ☼ ☼ ☼ ☼Drag/drop WD ☼ ☼ ☼ ☼ ☼

HTML5 parser WD ☼ ☼ ☼ ☼

Try caniuse.com*1/1

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

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 numberif (ieversion>=9)return true;

elsereturn false;

You should write instead:

if (!!navigator.geolocation)

Try Modernizr*1/1

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

CAN YOU USE THIS PLATFORM?

Yes!◦ Careful: most of the technologies are still in draft!

Learn about the many capabilities and how wellthey are deployed

Test by feature and not by browser name/version

Get involved and provide feedback

1/1

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

→

WHAT'S MISSING? (1/2)

Video Streaming(adaptive and live), P2P

TV remote, DLNA

TV channels, Speech

More Webperformancebenchmarks

3D at the markup level(SVG equivalent)

Identity, Access control

Security, Privacy

Digital contentdistribution andmicropayment

Data and query serverdiscovery, servicedescription

Federated query server1/1

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

WHAT'S MISSING? (2/2)

Trust, Provenance

Read-write Web

Interoperability

Education materials

Certification (softwareand developers)

Authoring toolssupport

Multilingual support

Publishing pipeline:more on XML?

…

1/1

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

THE END

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

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

To Lead the Web to its full potential

To Anticipate the Trends

To Increase your company value

Join W3Chttp://www.w3.org/Consortium/join*

or contact: Bernard Gidon

<bgidon@w3.org>*

1/1

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