View
5.584
Download
0
Embed Size (px)
DESCRIPTION
Introduction HTML5 and the Open Web Platform.
Citation preview
2 December 2005
HTML5 and the Open Web Platform
Prof. Beat Signer
Department of Computer Science
Vrije Universiteit Brussel
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
Beat Signer - Department of Computer Science - [email protected]
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
Beat Signer - Department of Computer Science - [email protected]
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
Beat Signer - Department of Computer Science - [email protected]
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
Beat Signer - Department of Computer Science - [email protected]
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
...
Beat Signer - Department of Computer Science - [email protected]
7 October 8, 2012
HTML5 APIs and Related Technologies
Sergey Mavrody, December 2011
Beat Signer - Department of Computer Science - [email protected]
8 October 8, 2012
Current HTML5 Browser Support
When can I use..., http://caniuse.com/#cats=HTML5
Beat Signer - Department of Computer Science - [email protected]
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
Beat Signer - Department of Computer Science - [email protected]
10 October 8, 2012
Browser Performance
Beat Signer - Department of Computer Science - [email protected]
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
Beat Signer - Department of Computer Science - [email protected]
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
Beat Signer - Department of Computer Science - [email protected]
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
Beat Signer - Department of Computer Science - [email protected]
15 October 8, 2012
Video Support
When can I use..., http://caniuse.com/#feat=video
Beat Signer - Department of Computer Science - [email protected]
16 October 8, 2012
WebM Support
When can I use..., http://caniuse.com/#feat=webm
Beat Signer - Department of Computer Science - [email protected]
17 October 8, 2012
MP4 Support
When can I use..., http://caniuse.com/#feat=mpeg4
Beat Signer - Department of Computer Science - [email protected]
18 October 8, 2012
Ogg Support
When can I use..., http://caniuse.com/#feat=ogv
Beat Signer - Department of Computer Science - [email protected]
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>
Beat Signer - Department of Computer Science - [email protected]
20 October 8, 2012
HTML5 Canvas and JavaScript Demo
http://www.youtube.com/watch?v=cnexWE5Rbx4
Beat Signer - Department of Computer Science - [email protected]
21 October 8, 2012
Canvas 2D Support
When can I use..., http://caniuse.com/#feat=canvas
Beat Signer - Department of Computer Science - [email protected]
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>
Beat Signer - Department of Computer Science - [email protected]
23 October 8, 2012
SVG Support
When can I use..., http://caniuse.com/#cats=SVG
Beat Signer - Department of Computer Science - [email protected]
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
Beat Signer - Department of Computer Science - [email protected]
25 October 8, 2012
Video: Google Body Browser (WebGL)
Beat Signer - Department of Computer Science - [email protected]
26 October 8, 2012
WebGL Support
When can I use..., http://caniuse.com/#feat=webgl
Beat Signer - Department of Computer Science - [email protected]
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
Beat Signer - Department of Computer Science - [email protected]
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>
Beat Signer - Department of Computer Science - [email protected]
29 October 8, 2012
Web Sockets Support
When can I use..., http://caniuse.com/#search=socket
Beat Signer - Department of Computer Science - [email protected]
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>
Beat Signer - Department of Computer Science - [email protected]
31 October 8, 2012
Web Storage Support
When can I use..., http://caniuse.com/#search=web%20storage
Beat Signer - Department of Computer Science - [email protected]
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
Beat Signer - Department of Computer Science - [email protected]
33 October 8, 2012
Indexed Database Support
When can I use..., http://caniuse.com/#search=indexed%20data
Beat Signer - Department of Computer Science - [email protected]
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
Beat Signer - Department of Computer Science - [email protected]
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
Beat Signer - Department of Computer Science - [email protected]
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
Beat Signer - Department of Computer Science - [email protected]
37 October 8, 2012
Geolocation Example: Google Maps
Beat Signer - Department of Computer Science - [email protected]
38 October 8, 2012
Geolocation Support
When can I use..., http://caniuse.com/#search=geolocation
Beat Signer - Department of Computer Science - [email protected]
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
Beat Signer - Department of Computer Science - [email protected]
40 October 8, 2012
Drag and Drop Support
When can I use..., http://caniuse.com/#feat=dragndrop
Beat Signer - Department of Computer Science - [email protected]
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>
Beat Signer - Department of Computer Science - [email protected]
42 October 8, 2012
Web Workers Support
When can I use..., http://caniuse.com/#feat=webworkers
Beat Signer - Department of Computer Science - [email protected]
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>
Beat Signer - Department of Computer Science - [email protected]
44 October 8, 2012
Search Engine Result Pages (SERP)
Beat Signer - Department of Computer Science - [email protected]
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
Beat Signer - Department of Computer Science - [email protected]
46 October 8, 2012
Offline Web Applications Support
When can I use..., http://caniuse.com/#feat=offline-apps
Beat Signer - Department of Computer Science - [email protected]
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
Beat Signer - Department of Computer Science - [email protected]
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/
Beat Signer - Department of Computer Science - [email protected]
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
Beat Signer - Department of Computer Science - [email protected]
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/
Beat Signer - Department of Computer Science - [email protected]
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/
Beat Signer - Department of Computer Science - [email protected]
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/
Beat Signer - Department of Computer Science - [email protected]
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/