1. Introduction to HTML 5
By Pablo Alejandre del Rio

2. Overview
Introduction
HTML 5
New Elements introduced in HTML 5
Web Sockets
Web workers
Web Storage
Samples
3. Introduction
Previous version (4.01) released in 1999
W3C names these versionsRecommendations
The scenario has changed since then
Increment number of users
100x Improvement in JavaScript performance
4. Evolution
(Neuberg, 2009)
5. Issues
(Neuberg, 2009)
6. HTML 5
A new model is required
Structure + full JavaScript integration (Apis) + CSS 3 integration.
More semantic and capabilities
WAI-ARIA Accessibility features
New Well known functionality
New APIs available
2D and 3D interface(Canvas, SVG, WebGl)
New Media Elements (Audio & Video)
Web Storage
New usages:
Mobile: The future of mobile web will be based in Html 5
Offline Applications
7. HTML 5 IS MORE
New Structure
Canvas
Video & Audio
Geolocation
New Web controls
Dragging and Dropping
Web Storage
Web workers
Browser history
Web sockets
8. Structure
(Anexom2009)
9. New Elementsin HTML 5
Improvements in forms
Newproperties and functionality
New Web Form Controls :
Date and Time controls,data list, colour controls
Input element gets relevance: number, url, email...
Sample
10. More new elements
Canvas / SVG
Rich interfaces & Dynamic graphics
Canvas: Draw pictures and images using 2D API (Graphs, games)
Sample 1
Sample 2
SVG: Scalable Vector Graphic(Manipulateexisting graphics)
I.e: Google maps
The future to design dynamic applications
Video & Audio
As simple as it gets.
Most browsers only support .ogg format
Tags :
Catch video and audio errors.
(Lee ,2010)
11. Web Sockets
Bidirectional communication between server and client.
defines a single-socket full-duplex (or bi-directional) connectionfor pushing and pulling information
Reduction in unnecessary network traffic
Ability to traverse firewalls and proxies
Faster and more efficient and powerful than AJAX (avoids the connection and portability )
It can be fully integrated with .NET
Used for real data communication
Example
(Infoq, 2008)
12. Web Workers

Current web applications are more likely to crash due to amount of JavaScript.

13. It allows you to run JavaScript in the background 14. Web Workers run in an isolated thread and will not startbefore the file has been downloaded and executed. 15. How it works(Html 5 Rocks, 2010)
16. Web Storage
Disadvantage with native applications
It is been a problem
Cookies :
Are included with every http request
Limited4 KB of data
Session:
We need :
More space, to be stored in the client, persistedbeyond a page refresh, no transmitted to the server
Pilgrim (2010)
17. Web Storage II
Session Storage:
It allows to pass information between pages through key/value pairs (hash storage)
Local Storage:
The information is stored beyond session
Very flexible (data,documents)
Up to 10 MB.
Web SQL client based:
It is in the browser
Up to 5 MB
Based in SQLite
Offline support:
Offline application caching
How it works
(Zdravko,2010)
18. Compatibility
Different browsers, versions, devices
Run a test
What Can I use, When ?
19. What we can do ? -> Samples
http://www.visualise.ca/
http://www.phpguru.org/html5-examples
http://www.youtube.com/watch?v=64TcBiqmVko&feature=player_embedded
20. More information in
http://slides.html5rocks.com/#landing-slide
http://diveintohtml5.org
More Books:
http://blog.hotellinux.com/12-excellent-html5-ebooks-for-web-professiona
More information about the integration in .NET:
http://nugget.codeplex.com/
21. References
Pilgrim (2010) Html 5 up and running Oreilly, Google press
Holzner (2010) Teach yourself HTML 5, Sams
Html5 Rocks (2010)
http://www.html5rocks.com/tutorials/workers/basics/
Anexom(13-06-2009)
http://www.anexom.es/tecnologia/diseno-web/las-novedades-de-html5-i/
Lee (31-08-2010) Html 5 and The Future of the Mobile Web
http://www.slideshare.net/wonsuk73/html5-and-the-future-of-the-mobile-web
Zdravko (2010) Html & .Net in action
http://codecamp.mkdot.net/data/cc10-ppt/R04/ZdravkoNikolovski-HTML5.NETinAction.ppt
Neuberg (2009)
http://codinginparadise.org/presentations/intro_html5.pdf
Infoq (2008)
http://www.infoq.com/news/2008/12/websockets-vs-comet-ajax