Introduction to html5


Published on

Published in: Technology
  • Be the first to comment

Introduction to html5

  1. 1. HTML5: INTRODUCTIONBy Muktadiur RahmanMarch 14, 2012
  2. 2. HTML5
  3. 3. HTML5
  4. 4. HTML5
  5. 5. HTML5
  6. 6. Agenda HTML5 Structure & Semantic Web Form Web Worker HTML5 Storage Audio &Video, Geo location Web Sockets Web Messaging Microdata, History API CSS3 & Best Practices Drag & Drop Canvas
  7. 7. HTML5 Structural & Semantic
  8. 8. HTML5 Structural & Semantic
  9. 9. HTML5 Structural & Semantic
  10. 10. Web From
  11. 11. Web Worker HTML5 Web Workers are essentially threads that are created via JavaScript. Yes, thats right, the ability to create new threads in the browser rs.asp
  12. 12. Web Storage Session Storage Local Storage Database Storage File API
  13. 13. Microdata Microdata is a standardized way to provide additional semantics in your web pages. Microdata lets you define your own customized elements and start embedding custom properties in your web pages. At a high level, microdata consists of a group of name-value pairs. The groups are called items, and each name-value pair is a property. Items and properties are represented by regular elements.
  14. 14. History API HTML5 introducing the new history API. The history API has been around for quite a long time now. It has been used in the past to force the browser to go back to its previous state Following event is fired off when someone has pressed forward or backward : window.history.pushState(stateObj,title,url) window.history.replaceState(stateObj,title,url) window.onpopstate = function(event) { /** **/ }
  15. 15. Audio & Video Audio Video
  16. 16. Geo location The HTML5 Geolocation API is used to get the geographical position of a user. Since this can compromise user privacy, the position is not available unless the user approves it
  17. 17. Web Sockets Web Sockets is a next-generation bidirectional communication technology for web applications which operates over a single socket and is exposed via a JavaScript interface in HTML 5 compliant browsers. Once you get a Web Socket connection with the web server, you can send data from browser to server by calling a send() method, and receive data from server to browser by an onmessageevent handler.
  18. 18. Web Messaging Communicate across domains Across window objects With web worker String Transfer only
  19. 19. CSS3 & Best Practices
  20. 20. Drag & Drop Now HTML 5 came up with a Drag and Drop (DnD) API that brings native DnD support to the browser making it much easier to code up. HTML 5 DnD is supported by all the major browsers like Chrome, Firefox 3.5 and Safari 4 etc
  21. 21. Canvas The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> element is only a container for graphics, you must use a script to actually draw the graphics. A canvas is a drawable region defined in HTML code with height and width attributes.
  22. 22. Resources browser-Polyfills work/multipage/