Html 5

1,519 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Html 5

  1. 1. Introduction to HTML 5<br />By Pablo Alejandre del Rio<br />
  2. 2. Overview<br />Introduction<br />HTML 5<br />New Elements introduced in HTML 5<br />Web Sockets<br />Web workers<br />Web Storage<br />Samples<br />
  3. 3. Introduction<br />Previous version (4.01) released in 1999<br />W3C names these versions “Recommendations”<br />The scenario has changed since then<br />Increment number of users<br />100x Improvement in JavaScript performance <br />
  4. 4. Evolution<br />(Neuberg, 2009)<br />
  5. 5. Issues<br />(Neuberg, 2009)<br />
  6. 6. HTML 5<br />A new model is required<br />Structure + full JavaScript integration (Apis) + CSS 3 integration.<br />More semantic and capabilities<br />WAI-ARIA Accessibility features<br />New Well known functionality<br />New APIs available <br />2D and 3D interface(Canvas, SVG, WebGl)<br />New Media Elements (Audio & Video)<br />Web Storage<br />New usages: <br />Mobile: The future of mobile web will be based in Html 5 <br />Offline Applications<br />
  7. 7. HTML 5 IS MORE …<br />New Structure<br />Canvas<br />Video & Audio<br />Geolocation<br />New Web controls<br />Dragging and Dropping<br />Web Storage<br />Web workers<br />Browser history<br />Web sockets<br />
  8. 8. Structure<br />(Anexom2009)<br />
  9. 9. New Elements in HTML 5<br />Improvements in forms<br />New properties and functionality<br />New Web Form Controls :<br />Date and Time controls, data list, colour controls<br />Input element gets relevance: number, url, email...<br />Sample<br />
  10. 10. More new elements<br />Canvas / SVG<br />Rich interfaces & Dynamic graphics<br />Canvas: Draw pictures and images using 2D API (Graphs, games) <br />Sample 1 <br />Sample 2<br />SVG: Scalable Vector Graphic(Manipulate existing graphics)<br />I.e: Google maps<br />The future to design dynamic applications<br />Video & Audio<br />As simple as it gets.<br />Most browsers only support .ogg format <br />Tags : <Video><audio><br />Catch video and audio errors. <br />(Lee ,2010)<br />
  11. 11. Web Sockets<br />Bidirectional communication between server and client. <br />defines a single-socket full-duplex (or bi-directional) connection for pushing and pulling information<br />Reduction in unnecessary network traffic<br />Ability to traverse firewalls and proxies<br />Faster and more efficient and powerful than AJAX (avoids the connection and portability )<br />It can be fully integrated with .NET<br />Used for real data communication <br />Example<br />(Infoq, 2008)<br />
  12. 12. Web Workers<br /><ul><li>Current web applications are more likely to crash due to amount of JavaScript.
  13. 13. It allows you to run JavaScript in the background
  14. 14. Web Workers run in an isolated thread and will not start before the file has been downloaded and executed.
  15. 15. How it works</li></ul>(Html 5 Rocks, 2010)<br />
  16. 16. Web Storage<br />Disadvantage with native applications<br />It is been a problem <br />Cookies :<br />Are included with every http request<br />Limited 4 KB of data <br />Session: <br />We need :<br /> More space, to be stored in the client, persisted beyond a page refresh, no transmitted to the server<br />Pilgrim (2010) <br />
  17. 17. Web Storage II<br />Session Storage:<br />It allows to pass information between pages through key/value pairs (hash storage)<br />Local Storage:<br />The information is stored beyond session<br />Very flexible (data,documents…)<br />Up to 10 MB.<br />Web SQL client based:<br />It is in the browser<br />Up to 5 MB<br />Based in SQLite<br />Offline support: <br />Offline application caching<br />How it works<br />(Zdravko,2010)<br />
  18. 18. Compatibility<br />Different browsers, versions, devices …<br />Run a test<br />What Can I use, When ? <br />
  19. 19. What we can do ? -> Samples<br />http://www.visualise.ca/<br />http://www.phpguru.org/html5-examples<br />http://www.youtube.com/watch?v=64TcBiqmVko&feature=player_embedded<br />
  20. 20. More information in …<br />http://slides.html5rocks.com/#landing-slide<br />http://diveintohtml5.org <br />More Books: <br />http://blog.hotellinux.com/12-excellent-html5-ebooks-for-web-professiona<br />More information about the integration in .NET: <br />http://nugget.codeplex.com/”<br />
  21. 21. References<br />Pilgrim (2010) Html 5 up and running O’reilly, Google press<br />Holzner (2010) Teach yourself HTML 5, Sams<br />Html5 Rocks (2010)<br />http://www.html5rocks.com/tutorials/workers/basics/<br />Anexom(13-06-2009)<br />http://www.anexom.es/tecnologia/diseno-web/las-novedades-de-html5-i/<br />Lee (31-08-2010) Html 5 and The Future of the Mobile Web<br />http://www.slideshare.net/wonsuk73/html5-and-the-future-of-the-mobile-web<br />Zdravko (2010) Html & .Net in action<br />http://codecamp.mkdot.net/data/cc10-ppt/R04/ZdravkoNikolovski-HTML5.NETinAction.ppt<br />Neuberg (2009)<br />http://codinginparadise.org/presentations/intro_html5.pdf<br />Infoq (2008)<br />http://www.infoq.com/news/2008/12/websockets-vs-comet-ajax<br />

×