HTML5 and the Open Web Platform

HTML5 and the Open Web Platform

Prof. Beat Signer

Department of Computer Science
Vrije Universiteit Brussel

http://www.beatsigner.com

2 December 2005

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

October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2

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


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


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

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
 ...


HTML5 APIs and Related Technologies

Sergey Mavrody, December 2011


Current HTML5 Browser Support

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


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


Browser Performance


HTML Markup
 Some elements have been added
W3C Working Draft

 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)


Forms Example


Video
 <video> element can be used to play videos
W3C Working Draft

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>


Video ...
 Current limitations
W3C Working Draft

 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


Video Support

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


WebM Support

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


MP4 Support

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


Ogg Support

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


Canvas 2D
 <canvas> tag can be used in combination with
W3C Working Draft

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


HTML5 Canvas and JavaScript Demo

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


Canvas 2D Support

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


Scalable Vector Graphics (SVG)
 Vector graphics alternative to Canvas 2D
W3C Candidate Recommendation

 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
<!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>


SVG Support

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


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


Video: Google Body Browser (WebGL)


WebGL Support

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


Asynchronous Partial Updates

Client Service Service 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!


Web Sockets
 Bidirectional, full-duplex socket connection between the
W3C Working Draft

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)

var socket = new WebSocket("ws://chat-server.com:8080/");

socket.onmessage = function(event) {
var message = JSON.parse(event.data));
alert("Message received.");
...
};
</script>


Web Sockets Support

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


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

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


Web Storage Support

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


Indexed Database
 Low-level indexed storage capabilities
W3C Working Draft

 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


Indexed Database Support

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


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


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


Geolocation ...
 JavaScript access to the Geolocation API

 access via the geolocation child object of the navigator object
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});

 we can also continuously monitor the client's position
navigator.geolocation.watchPosition(showPosition);


Geolocation Example: Google Maps


Geolocation Support

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


Drag and Drop
 Drag items and drop them anywhere in the browser
W3C Working Draft

 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


Drag and Drop Support

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


Web Workers
 When executing JavaScript in an HTML page, the page
W3C Working Draft

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
var worker = new Worker("myScript.js");
worker.onmessage = function(event) {
alert("The worker sent me this: " + event.data);
...
};
worker.postMessage("Hello worker!");
</script>


Web Workers Support

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


Microdata
 Add machine readable metadata (semantics) to HTML5
W3C Working Draft

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


Search Engine Result Pages (SERP)


Offline Web Applications
 Application cache is used for
W3C Working Group Note

 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
<!DOCTYPE html>
<html lang="en" manifest="/myApp.appcache>...</html>

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

#version 3


Offline Web Applications Support

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


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


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/


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


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/


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/


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/


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

Recommended

More Related Content

What's hot (18)

Viewers also liked (9)

Similar to HTML5 and the Open Web Platform (20)

More from Beat Signer (20)

Recently uploaded (20)

HTML5 and the Open Web Platform