html5 and the open web platform

2 December 2005

HTML5 and the Open Web Platform

Prof. Beat Signer

Department of Computer Science

Vrije Universiteit Brussel

http://www.beatsigner.com

http://www.beatsigner.com/

http://www.beatsigner.com/

Beat Signer - Department of Computer Science - [email protected]

2 October 8, 2012

A Brief History of HTML

HTML 4.0 (1997) and HTML 4.01 (1999)

In 1998 the W3C decided to not further evolve HTML!

XHTML 1 (2000) and XHTML 1.1 (2001) XML version of HTML

XHTML 2.0 (never finished, discontinued in 2009) revolutionary changes breaking backwards compatibility

WHATWG (Web Hypertext Application Technology

Working Group) founded in 2004 (led by Ian Hickson) Web Forms 2.0 and Web Applications 1.0 HTML5

In 2006 the W3C decided to work on HTML again based on WHATWG's Web Applications specification


3 October 8, 2012

A Brief History of HTML ...

HTML5 specification is currently developed

simultaneously by the WHATWG and the W3C

HTML Working Group HTML – Living Standard, WHATWG

HTML5 – A Vocabulary and Associated APIs for HTML and XHTML, W3C Working Draft

Roadmap HTML5 Candidate Recommendation planned for 2012

HTML5 W3C Recommendation predicted for 2022


4 October 8, 2012

HTML5

... HTML5 does not belong to a company or a specific

browser. It has been forged by a community of people

interested in evolving the web and a consortium of

technological leaders that includes Google, Microsoft, Apple,

Mozilla, Facebook, IBM, HP, Adobe, and many others. The

community and consortium continue to collaborate on

universal browser standards to push web capabilities even

further. The next generation of web apps can run high-

performance graphics, work offline, store a large amount of

data on the client, perform calculations fast, and take

interactivity and collaboration to the next level. ...

Why HTML5 Rocks, http://www.html5rocks.com/why


5 October 8, 2012

HTML5 Design Principles

Compatibility evolve the language for easier authoring of web applications

Utility solve real problems (pragmatic approach)

separation of content and presentation (CSS)

Interoperability interoperable browser behaviour

identical error handling across browsers resulting in the same DOM tree for broken HTML

Universal Access features should preferably work across different platforms

(cross-platform), devices and media

design features should be accessible to users with disabilities


6 October 8, 2012

HTML5 Design Principles ...

Simple is better new doctype: <!DOCTYPE html>

HTML5 APIs

...

Avoid external plug-ins plug-ins are often not nicely integrated with HTML documents

plug-ins can be disabled or blocked (e.g. Adobe Flash on iPad)

plug-ins may crash

...


7 October 8, 2012

HTML5 APIs and Related Technologies

Sergey Mavrody, December 2011


8 October 8, 2012

Current HTML5 Browser Support

When can I use..., http://caniuse.com/#cats=HTML5


9 October 8, 2012

JavaScript/ECMAScript

Growing use of JavaScript frameworks and AJAX

JavaScript engine race in 2006 Adobe donated their just-in-time (JIT) compilation engine

and ECMAScript virtual machine to the Mozilla project

healthy competition among browser vendors

- bring JavaScript performance closer to that of native desktop application code

Black Duck, 2011 http://www.whatbrowser.org


10 October 8, 2012

Browser Performance


11 October 8, 2012

HTML Markup

Some elements have been added structural elements such as <article>, <section>, <header>, <footer> or <nav>

media elements including <video>, <audio> or <embed>

a <canvas> drawing element

Other elements have been removed <big>, <font>, <strike>, <u>, <center>, ...

New form functionality (originally Web Forms 2.0) form elements such as <datalist> or <output>

input types such as date, color, range, ...

native functionality for client-side validation (no scripting)

W3C W

ork

ing D

raft


12 October 8, 2012

Forms Example


13 October 8, 2012

Video

<video> element can be used to play videos

in HTML pages element has methods, properties and events

no external plug-in (e.g. Adobe Flash) is required e.g. an HTML5 YouTube version (working without Flash) is

available at http://www.youtube.com/html5

No single video format is supported by all browsers MP4, WebM and Ogg

<video width="640" height="480" controls="controls"> <source src="bullhead.mp4" type="video/mp4" /> <source src="bullhead.webm" type="video/webm" /> The video tag is not supported by your browser! </video>

W3C W

ork

ing D

raft


14 October 8, 2012

Video ...

Current limitations no adaptive streaming

no copy protection

limited access to web cams and microphones but this is going to change in the near future (via the getusermedia API)

HTML5 Video vs. Adobe Flash

... Our future work with Flash on mobile devices will be focused on

enabling Flash developers to package native apps with Adobe AIR for all

the major app stores. We will no longer continue to develop Flash Player

in the browser to work with new mobile device configurations (chipset,

browser, OS version, etc.) following the upcoming release of Flash

Player 11.1 for Android and BlackBerry PlayBook. ...

Adobe Systems Incorporated, November 9, 2011

W3C W

ork

ing D

raft


15 October 8, 2012

Video Support

When can I use..., http://caniuse.com/#feat=video


16 October 8, 2012

WebM Support

When can I use..., http://caniuse.com/#feat=webm


17 October 8, 2012

MP4 Support

When can I use..., http://caniuse.com/#feat=mpeg4


18 October 8, 2012

Ogg Support

When can I use..., http://caniuse.com/#feat=ogv


19 October 8, 2012

Canvas 2D

<canvas> tag can be used in combination with

JavaScript to draw on a webpage (raster graphics) define a canvas with an id and use it from within the

JavaScript code

draw lines, shapes (with optional gradient filling) etc. or add text

W3C W

ork

ing D

raft

<canvas id="drawingArea" width="200" height="200"> The canvas tag is not supported by your browser! </canvas>

<script type="text/javascript"> var canvas = document.getElementById("drawingArea"); var context = canvas.getContext("2d"); context.fillStyle = "#0000FF"; context.fillRect(50,50,100,50); context.moveTo(0,0); context.lineTo(200,200); </script>


20 October 8, 2012

HTML5 Canvas and JavaScript Demo

http://www.youtube.com/watch?v=cnexWE5Rbx4


21 October 8, 2012

Canvas 2D Support

When can I use..., http://caniuse.com/#feat=canvas


22 October 8, 2012

Scalable Vector Graphics (SVG)

Vector graphics alternative to Canvas 2D resolution independent

define graphics in XML format (embeddable in HTML)

good support for animations (declarative description)

full control over each element via the SVG DOM API

On the other hand, Canvas 2D offers better performance

W3C C

andid

ate

Recom

mendation

<!DOCTYPE html> <html lang="en"> <head>...</head> <body> <svg xmlns="http://www.w3.org/2000/svg"> <circle id="myCircle" cx="50" cy="50" r="100" fill="blue" /> </svg> </body> </html>


23 October 8, 2012

SVG Support

When can I use..., http://caniuse.com/#cats=SVG


24 October 8, 2012

Web Graphics Library (WebGL)

3D graphics API for JavaScript

getContext("3d") in the future currently there exist a number of vendor-specific prefixes such as getContext("moz-webgl") for Firefox


25 October 8, 2012

Video: Google Body Browser (WebGL)


26 October 8, 2012

WebGL Support

When can I use..., http://caniuse.com/#feat=webgl


27 October 8, 2012

Asynchronous Partial Updates

Client Server

Rather than updating an entire resource (e.g. webpage),

we can asynchronously update parts of a resource e.g. implementation of Rich Internet Applications via AJAX

Problem: Updates cannot be initiated (pushed) by the

server if the HTTP protocol is used!

Service Service


28 October 8, 2012

Web Sockets

Bidirectional, full-duplex socket connection between the

server and browser for real-time web applications (low

latency) with asynchronous partial updates currently only strings and no binary data (can use JSON)

similarly an EventSource object can be used if only the server has to push information (server-sent events) W

3C W

ork

ing D

raft

<script type="text/javascript"> var socket = new WebSocket("ws://chat-server.com:8080/"); socket.onmessage = function(event) { var message = JSON.parse(event.data)); alert("Message received."); ... }; </script>


29 October 8, 2012

Web Sockets Support

When can I use..., http://caniuse.com/#search=socket


30 October 8, 2012

Web Storage

localStorage and sessionStorage JavaScript

objects to store data (key/value) on the client localStorage has no time limit whereas sessionStorage is

deleted when the browser window is closed

replace cookies for large amounts of data

- cookies are limited in size (maximal 4 KB) and are sent with each request

W3C C

andid

ate

Recom

mendation

<script type="text/javascript"> if (localStorage.counter) { localStorage.counter = Number(localStorage.counter) + 1; } else { localStorage.counter = 1; } document.write("Total of " + localStorage.counter + " visits"); </script>


31 October 8, 2012

Web Storage Support

When can I use..., http://caniuse.com/#search=web%20storage


32 October 8, 2012

Indexed Database

Low-level indexed storage capabilities libraries to be developed based on top of the indexed core

In contrast to the Web Storage API, an object store may

have an arbitrary number of indexes

Likely going to become the future structured storage replacing the Web SQL API

Introduces the concept of transactions and cursors

W3C W

ork

ing D

raft


33 October 8, 2012

Indexed Database Support

When can I use..., http://caniuse.com/#search=indexed%20data


34 October 8, 2012

Google's Multiplayer Port of Quake II

The browser version of Quake II uses

canvas and WebGL

<audio> for sound

<video> for in-game videos

Web Sockets for communication with the server (other players)

Local Storage for managing preferences and saved games


35 October 8, 2012

Geolocation

Standard interface for accessing geographical

location information on the client device transparent access to different location information sources

- GPS, GSM cells, IP address, RFID, Wi-Fi connection etc.

Firefox uses the Google Location Service as default

lookup service send IP address and information about nearby wireless access

points to the Google Location Service and an approximate location will be computed

W3C C

andid

ate

Recom

mendation


36 October 8, 2012

Geolocation ...

JavaScript access to the Geolocation API access via the geolocation child object of the navigator object

we can also continuously monitor the client's position

function showPosition(position) { alert(position.coords.latitude + " " + position.coords.longitude); } function showError() { alert("Your current position cannot be computed!"); } navigator.geolocation.getCurrentPosition(showPosition, showError, {timeout:10000});

navigator.geolocation.watchPosition(showPosition);

W3C C

andid

ate

Recom

mendation


37 October 8, 2012

Geolocation Example: Google Maps


38 October 8, 2012

Geolocation Support

When can I use..., http://caniuse.com/#search=geolocation


39 October 8, 2012

Drag and Drop

Drag items and drop them anywhere in the browser define draggable elements via the draggable attribute

define elements that can accept drops

exchange information via the dataTransfer object

Items can also be drag and dropped from the browser to

external applications W3C W

ork

ing D

raft


40 October 8, 2012

Drag and Drop Support

When can I use..., http://caniuse.com/#feat=dragndrop


41 October 8, 2012

Web Workers

When executing JavaScript in an HTML page, the page

becomes unresponsive until the script is finished

Web Workers can be used to execute JavaScript code in

a background process (thread) to avoid the complexity of multi-threaded programming, Web

Workers have independent JavaScript contexts and can only interact with each other via event-driven message passing

W3C W

ork

ing D

raft

<script type="text/javascript"> var worker = new Worker("myScript.js"); worker.onmessage = function(event) { alert("The worker sent me this: " + event.data); ... }; worker.postMessage("Hello worker!"); </script>


42 October 8, 2012

Web Workers Support

When can I use..., http://caniuse.com/#feat=webworkers


43 October 8, 2012

Microdata

Add machine readable metadata (semantics) to HTML5

documents in the form of key/value pairs can be used by crawlers, search engines (SEO) and browsers to

provide a richer browsing experience

alternative to Microformats and RDFa

W3C W

ork

ing D

raft

<section itemscope itemtype="http://data-vocabulary.org/Person"> Hello, my name is <span itemprop="name">Beat Signer</span> and I am a <span itemprop="title">Professor</span> at the <span itemprop="affiliation">Vrije Universiteit Brussel. </span> <section itemprop="address" itemscope itemtype="http://data -vocabulary.org/Address">My address is: <span itemprop="street-address">Pleinlaan 2</span>, <span itemprop="postal-code">1050 </span> <span itemprop="locality">Brussels</span>, <span itemprop="country-name">Belgium</span>. </section> </section>


44 October 8, 2012

Search Engine Result Pages (SERP)


45 October 8, 2012

Offline Web Applications

Application cache is used for offline browsing where users can use the web application while

they are offline

increased performance due to cache hits and reduced server load

Managed via a cache manifest

W3C W

ork

ing G

roup N

ote

<!DOCTYPE html> <html lang="en" manifest="/myApp.appcache>...</html>

CACHE MANIFEST CACHE: index.html default.js FALLBACK: time.js fallback-time.js #version 3


46 October 8, 2012

Offline Web Applications Support

When can I use..., http://caniuse.com/#feat=offline-apps


47 October 8, 2012

When Can We Start to Use HTML5?

HTML5 is not yet an official standard – but many HTML5 features are already implemented by browser vendors line between web apps and native apps gets blurry!

Seamless transition from HTML 4.01 to HTML5 backwards compatibility and fallback solutions

It is time to start using different parts of HTML5!

... In a recent online survey con-

ducted by Contemporary Analysis,

on behalf of appendTo, a JavaScript

and HTML5 consulting company,

84% of developers planned on using

HTML5 in projects within the next

6 months. ...

When can I use..., http://caniuse.com/#cats=HTML5 Contemporary Analysis, September 2011


48 October 8, 2012

References

Peter Lubbers, Brian Albers and Frank Salim,

Pro HTML5 Programming (2nd Edition), Apress,

November 2011, ISBN-13: 978-1430238645

Bruce Lawson and Remy Sharp, Introducing

HTML5 (2nd Edition), New Riders Press, October 2011,

ISBN-13: 978-0321784421

Mark Pilgrim, HTML5: Up and Running – Dive into the

Future of Web Development, O'Reilly Media, August

2010, ISBN-13: 978-0596806026

HTML5 Tutorial http://www.w3schools.com/html5/


49 October 8, 2012

References

When can I use …, Compatibility Tables for

Support of HTML5, CSS3, SVG and More in Desktop

and Mobile Browsers http://caniuse.com

James Sugrue, HTML5: The Evolution of Web Standards http://refcardz.dzone.com/refcardz/html5-new-standards-web-interactivity


50 October 8, 2012

References

HTML – Living Standard, WHATWG http://www.whatwg.org/html

HTML5 – A Technical Specification for Web Developers http://developers.whatwg.org

HTML5 – A Vocabulary and Associated APIs for HTML

and XHTML, W3C Working Draft http://www.w3.org/TR/html5/

HTML Design Principles, W3C Working Draft http://www.w3.org/TR/html-design-principles/

HTML Canvas 2D Context, W3C Working Draft http://www.w3.org/TR/2dcontext/


51 October 8, 2012

References ...

Web Storage, W3C Candidate Recommendation http://www.w3.org/TR/webstorage/

Indexed Database API, W3C Working Draft http://www.w3.org/TR/IndexedDB/

The WebSocket API, W3C Candidate Recommendation http://www.w3.org/TR/websockets/

File API, W3C Working Draft http://www.w3.org/TR/FileAPI/

Offline Web Applications, W3C Working Group Note http://www.w3.org/TR/offline-webapps/


52 October 8, 2012

References ...

HTML5 Canvas and JavaScript Demo http://www.youtube.com/watch?v=cnexWE5Rbx4

Scalable Vector Graphics (SVG) 1.1 http://www.w3.org/TR/SVG11/

Web Workers, W3C Working Draft http://www.w3.org/TR/workers/

Web Audio API, W3C Working Draft http://www.w3.org/TR/webaudio/

Cascading Style Sheets (CSS) Snapshot 2010,

W3C Working Group Note http://www.w3.org/TR/CSS/


53 October 8, 2012

References ...

HTML5 Web Messaging, W3C Working Draft http://www.w3.org/TR/webmessaging/

HTML Microdata, W3C Working Draft http://www.w3.org/TR/microdata/

html5 and the open web platform

Education