This presentation shows a great overview about what is html 5 and all new features of this new generation of html with examples and outstanding bibliography and references. A great starting point

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 versions “Recommendations” 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 Elements in HTML 5 Improvements in forms New properties 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(Manipulate existing 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 : <Video><audio> 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) connection for 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)

13. It allows you to run JavaScript in the background

14. Web Workers run in an isolated thread and will not start before 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 Limited 4 KB of data Session: We need : More space, to be stored in the client, persisted beyond 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 O’reilly, 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