Introduction to html5
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Introduction to html5






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Introduction to html5 Presentation Transcript

  • 1. HTML5: INTRODUCTIONBy Muktadiur RahmanMarch 14, 2012
  • 2. HTML5
  • 3. HTML5
  • 4. HTML5
  • 5. HTML5
  • 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. HTML5 Structural & Semantic
  • 8. HTML5 Structural & Semantic
  • 9. HTML5 Structural & Semantic
  • 10. Web From
  • 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. Web Storage Session Storage Local Storage Database Storage File API
  • 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. 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. Audio & Video Audio Video
  • 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. 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. Web Messaging Communicate across domains Across window objects With web worker String Transfer only
  • 19. CSS3 & Best Practices
  • 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. 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. Resources browser-Polyfills work/multipage/