Html5 for beginners


Published on

null Bangalore Chapter - April 2013 Meet

Published in: Education, Technology, Design
  • Be the first to comment

Html5 for beginners

  1. 1. n|u
  2. 2. n|uStructureSession 1IntroductionHTML 5 BasicsSession 2What’s inn for me ….Developer ?Session 3What’s inn for me …. Code reviewer/ Webtesting ?Session 4What’s inn for me …. Hacker ?
  3. 3. n|u New Standard for HTML work in progress.. Supported Browsers
  4. 4. n|u
  5. 5. n|u
  6. 6. n|uObjective New Feature - HTML, CSS, DOM, and JavaScript Error handling Markup vs Scripting IndependenceHow it all Started?W3C & WHATWG(WebHypertext Application Technology Working Group )
  7. 7. n|u
  8. 8. n|u
  9. 9. n|uDeveloper Point of view
  10. 10. n|uHTML5 - New Features Drag and Drop <canvas> vs SVG HTML5 Geolocation Webforms 2.0 local storage & session storage HTML5 Cache Web sockets Webworkers Server Sent events
  11. 11. n|uWhat is SVG?Vector based graphics Resolution independence W3C recommendation Dom BasedWhat is Canvas? Speed Text rendering capabilities Graphics quality – Max and Min Animation and accessibility supportGraphics
  12. 12. n|uCore methods openDatabase transaction executeSqlOperations Read InsertWeb SQL
  13. 13. n|uTypes Session localOperations CPU Utilization Threads Terminate Import scriptsWeb StorageWeb Workers
  14. 14. n|uCore methods openDatabase transaction executeSqlOperations Read InsertWeb SQL
  15. 15. n|uHTML5 <keygen> ElementThe purpose of the <keygen> element is toprovide a secure way to authenticateusers.The <keygen> tag specifies a key-pairgenerator field in a form.When the form is submitted, two keys aregenerated, one private and one public.The private key is stored locally, and thepublic key is sent to the server. The publickey could be used to generate a clientcertificate to authenticate the user in thefuture.
  16. 16. n|uWhat is HTML5 Web Storage?With HTML5, web pages can store data locally within theusers browser.Earlier, this was done with cookies. However, Web Storage ismore secure and faster. The data is not included with everyserver request, but used ONLY when asked for. It is alsopossible to store large amounts of data, without affecting thewebsites performance.The data is stored in key/value pairs, and a web page canonly access data stored by itself
  17. 17. n|uWhat is Application Cache?HTML5 introduces application cache, which means that a web applicationis cached, and accessible without an internet connection.Application cache gives an application three advantages:Offline browsing - users can use the application when theyre offlineSpeed - cached resources load fasterReduced server load - the browser will only download updated/changedresources from the server
  18. 18. n|uWhat is a Web Worker?When executing scripts in an HTML page,the page becomes unresponsive until thescript is finished.A web worker is a JavaScript that runs inthe background, independently of otherscripts, without affecting the performanceof the page. You can continue to dowhatever you want: clicking, selectingthings, etc., while the web worker runs inthe background.
  19. 19. n|uServer-Sent Events - One Way MessagingA server-sent event is when a web page automatically getsupdates from a server.This was also possible before, but the web page would have toask if any updates were available. With server-sent events, theupdates come automatically.Examples: Facebook/Twitter updates, stock price updates,news feeds, sport results, etc.
  20. 20. n|u