Bert Bos (W3C) <[email protected]>*
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'> [email protected]<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 <[email protected]>*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
1/1
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●