Html 5

2,663 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,663
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
72
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html 5

  1. 1. Introduction to HTML 5<br />By Rohit Ghatol<br />
  2. 2. About Me<br />Name – Rohit Ghatol<br />Associations – Founder Pune GTUG and Co Founder Pune Agile Group. Technical Speaker on various platforms like CSI, Indic Threads, etc…<br />Experience – 8 years total, 3 years as a speaker & trainer<br />Companies – Synerzip, Google, Persistent, Sigma<br />Technologies – GWT, Ajax, Android, OpenSocial, GAE, Cloud computing, J2EE, Google Ajax Apis etc..<br />Role – Architect and Senior Manager. Agile Practitioner and Trainer in Synerzip.<br />Qualification – BE from PICT Pune<br />
  3. 3. We will discuss<br />History! Why HTML 5?<br />What is HTML 5?<br />How to use HTML 5?<br />Examples<br />Programming in Java instead of Javascript<br />
  4. 4. Rough History of Web<br />HTML 5<br />Workers<br />Video<br />Geo<br /> 6<br />Offline<br />Canvas/SVG<br />Flex/Silver light<br />User Experience<br />RIA/Next Gen Apps<br />Ajax<br />Static HTML<br />Ajax Apps<br />CSS<br />Funeral<br />DOM<br />HTML <br />1990<br />……..<br />2010<br />2008<br />2004<br />2000<br />Time line<br />
  5. 5. Why HTML 5?<br />Flash, Silver light, JavaFx, and more….<br />Standards Vs Corporate Babies<br />Say in the Standards<br />In short, Browsers + Standards = Better Results<br />
  6. 6. What is HTML 5?<br />Main Thread<br />Database<br />Offline Cache<br />X<br />N<br />E<br />W<br />Geo Location<br />Canvas & SVG<br />More Threads<br />S<br />Video<br />
  7. 7. SVG Programming<br /><!DOCTYPE html><br /><html><br /> <body><br /> <svg width="200" height="200"><br /> <rect<br /> x="0" y="0"<br /> width="100" height="100"<br /> fill="blue" stroke="red"<br /> stroke-width="5px"<br />rx="8" ry="8"<br /> id="myRect" class="chart" /><br /> </svg><br /> </body><br /></html><br />
  8. 8. SVG Event handling<br />varsvgRect = document.getElementById(“myRect”);<br />svgRect.onClick=function(){<br /> alert(“Clicked Rect”);<br /> };<br />It’s the same! <br />
  9. 9. But this did not work<br />Browsers only sees a HTML as SVG if its content type is “image/svg+xml" <br />E.g in JSP one would need to add this to it<br /><%@ page contentType="image/svg+xml" %><br />
  10. 10. Does it work on IE?<br />Yes, the same classic question again?<br />No, IE 8 does not have support for SVG!<br />Options<br />Use SVGWeb, a javascript library that uses flash to enable SVG support on IE browser<br />
  11. 11. Lastly better SVG Example<br />http://www.w3schools.com/svg/tryit.asp?filename=animatemotion_2&type=svg<br />http://upload.wikimedia.org/wikipedia/commons/6/63/A_large_blank_world_map_with_oceans_marked_in_blue.svg<br />
  12. 12. Canvas Programming <br /><canvas id="myCanvas" width="150" height="150"><br /></canvas> <br /><script type="text/javascript"> <br />var canvas = <br />document.getElementById('myCanvas');<br />varctx = canvas.getContext('2d');<br />ctx.fillStyle = "rgb(200,0,0)";<br />ctx.fillRect (10, 10, 55, 50);<br />ctx.fillStyle = "rgba(0, 0, 200, 0.5)";<br />ctx.fillRect (30, 30, 55, 50); <br /></script> <br />
  13. 13. Canvas<br /><!DOCTYPE html> <br /><html> <br /> <body> <br /> <canvas id="myCanvas" width="150" height="150"><br /> </canvas> <br /> <script type="text/javascript"> <br />var canvas = document.getElementById('myCanvas');<br />varctx = canvas.getContext('2d');<br />ctx.fillStyle = "rgb(200,0,0)";<br />ctx.fillRect (10, 10, 55, 50);<br />ctx.fillStyle = "rgba(0, 0, 200, 0.5)";<br />ctx.fillRect (30, 30, 55, 50); <br /> </script> <br /> </body> <br /></html> <br />
  14. 14. SVG Vs Canvas<br />SVG<br />Based on Tree of UI Objects<br />Interactively via mouse<br />Easy as Tag based<br />Medium Animation<br />Overall an High level API<br />Canvas<br />Based on Pixels<br />Difficult object selection<br />Based on JS APIs<br />Better Animation<br />Overall a Low Level API<br />
  15. 15. SVG/Canvas Demos<br />First Person Gifter<br />Population Demo<br />
  16. 16. Support <br />
  17. 17. Video Support<br />Current Video Support<br />Install Plug-ins<br />
  18. 18. Video Support<br /><video src="http://www.w3schools.com/html5/movie.ogg" controls ><br />Your browser does not support the video element.<br /></video><br />Current Video Support<br />
  19. 19. Programming Video Player<br /><button id="play“ onClick="playMovie()"> Play </button> <br /><script> <br />function playMovie()<br />{<br />var player = document.getElementsByTagName("video")[0];<br />player.play();<br />}<br /></script><br />
  20. 20. Support <br />
  21. 21. Geo Location Aware<br />Geo helps Local Business<br />Geo helps Social Networking<br />Geo helps Ads<br />Geo helps Photo/Video tagging<br />And more…..<br />All Future Netbooks and Phone probably will have Geo Awareness<br />
  22. 22. Geo Programming<br />navigator.geolocation.getCurrentPosition(<br /> function(position) {<br />varlat = position.coords.latitude;<br />varlon = position.coords.longitude;<br />var acc = position.coords.accurary;<br /> // Show position on Google Maps<br /> }<br />);<br />
  23. 23. Geo Programming Demo<br />
  24. 24. Geo Programming Demo<br /><!DOCTYPE html><br /><html><br /><head><br /> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg" type="text/javascript"></script><br />// See next page for script which goes here<br /></head><br /><body onLoad="initialize()"><br /> <h1>Geo Demo</h1><br /> <b>Your location is <div id="loc">Loading...</div></b><hr><br /> <div id="map_canvas" style="border:1px solid black;width: 500px; height: 300px"></div><br /></body><br /></html><br />
  25. 25. Geo Programming Demo<br /> <script type="text/javascript"><br /> function initialize() {<br /> if (GBrowserIsCompatible()) <br /> {<br />var map = new GMap2(document.getElementById("map_canvas"));<br />navigator.geolocation.getCurrentPosition(<br /> function(position) {<br />var lat = position.coords.latitude;<br />varlon = position.coords.longitude;<br />document.getElementById("loc").innerHTML=lat+","+lon;<br />map.setCenter(new GLatLng(lat, lon), 13);<br />var point = new GLatLng(lat,lon);<br />map.addOverlay(new GMarker(point));<br /> }<br /> );<br /> }<br /> }<br /></script><br />
  26. 26. Support <br />
  27. 27. App Cache and Database<br />Lets see these one by one<br />
  28. 28. App Cache<br />Loading of web apps when browser is offline<br />Storage of cache of the web app resources<br />Tracking and Aware of cache changes<br />
  29. 29. App Cache <br />Enable offline cache<br /><html manifest="todo.manifest"><br /></html><br />
  30. 30. cache.manifest<br />CACHE MANIFEST<br /># version 1<br />CACHE:<br />todo-list-3.html<br />css/todo-list.css<br />images/todo.jpg<br />script/todo-list.js<br />
  31. 31. Offline/Online Event<br /><script type="text/javascript"> <br />function online(event) { <br />varstatus = document.getElementById('statusDiv'); <br />status.className= navigator.onLine ? 'online' : 'offline'; <br />status.innerHTML= navigator.onLine ? 'online' : 'offline'; <br />} <br />addEvent(window, 'online', online); <br />addEvent(window, 'offline', online); <br /></script> <br />
  32. 32. Cache Events<br />For example, you get the DOMApplicationCache object as follows:<br /> cache = window.applicationCache;<br />You can check the status of the application cache as follows:<br />if (window.applicationCache.status == window.applicationCache.UPDATEREADY)...<br />If the application cache is in the UPDATEREADY state, then you can update it by sending it the update() message as follows:<br />window.applicationCache.update();<br />If the update is successful, swap the old and new caches as follows:<br />window.applicationCache.swapCache();<br />
  33. 33. Cache Operations<br />For example, you get the DOMApplicationCache object as follows:<br /> cache = window.applicationCache;<br />You can listen to cache updates  register for the updateready event to be notified when the application cache is ready to be updated:<br />cache.addEventListener('updateready', cacheUpdatereadyListener, false);<br />Also, register for the error event to take some action if the update process fails<br />cache.addEventListener('error', cacheErrorListener, false);<br />
  34. 34. Offline Application Detailed<br />For more details visit – <br />http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline<br />
  35. 35. Browser Databases<br />Opening a database Connection<br />if (window.openDatabase) <br />{ <br />db = openDatabase("NoteTest", "1.0", "HTML5 Database API example", 200000);<br />}<br />
  36. 36. Creating Tables<br />function loaded()<br />{<br />db.transaction(function(tx) {<br />tx.executeSql("SELECT COUNT(*) FROM Tasks", [], function(tx,result) {<br /> count=result.rows.item(0)["COUNT(*)"];<br /> alert(“Total rows is “+count);<br /> }, function(tx, error) {<br />tx.executeSql("CREATE TABLE Tasks (id REAL UNIQUE, task TEXT)", [], function(result) { <br /> alert(“created tables”);<br /> });<br /> });<br /> });<br />}<br />
  37. 37. Creating Tables<br />Running everything as a transactions<br />db.transaction(<<func(tx)>>,<<func(tx,error>>);<br />First function is used to execute an sql<br />Second function is a call back when transaction error occures<br />
  38. 38. Creating Tables<br />Running everything as a transactions<br />tx.executeSql(<<sql>>,<<args>>,<<func(tx,result)>>);<br />First argument is an sql<br />Second argument is paramters to sql<br />Callback when sql query returns<br />tx – SQL transaction<br />result – SQL Result Set<br />
  39. 39. Retrieving records<br />function loadTasks(){<br />db.transaction(function(tx) {<br />tx.executeSql("SELECT id, task FROM Tasks", [], function(tx, result) {<br /> for (vari = 0; i < result.rows.length; ++i) {<br />varrow = result.rows.item(i);<br />innerHTML=innerHTML+row.task+"<br>";<br /> }<br />todoListElem.innerHTML=innerHTML;<br /> }, function(tx, error) {<br /> alert('Failed to retrieve tasks from database - ' + error.message);<br /> });<br /> });<br />}<br />
  40. 40. Inserting new records<br />function saveTask()<br />{<br />vartextBox=document.getElementById("task")<br />vartaskText=textBox.value;<br />textBox.value="";<br />db.transaction(function (tx) <br /> {<br />tx.executeSql("INSERT INTO Tasks (id, task) VALUES (?, ?)", [count++,taskText]);<br />});<br />loadTasks();<br />}<br />
  41. 41. Deleting Records<br />function clearAllTask()<br />{<br />db.transaction(function (tx) <br /> {<br />tx.executeSql("Delete From Tasks");<br /> });<br />loadTasks();<br />}<br />
  42. 42. Support <br />
  43. 43. Web Workers<br />History!<br />Browsers are single threaded, except ajax callbacks<br />
  44. 44. Web Workers<br />JavaScript has become 100 times more fast<br />> 100x<br />
  45. 45. Web Workers<br />Then<br />One Tortoise<br />Single Threaded Browser<br />
  46. 46. Web Workers<br />Now<br />Many Rabbits<br />Multi Threaded Browser<br />
  47. 47. Web Workers<br />Too many to be true, Pinch me I am dreaming<br /><script><br />varworker = new Worker('worker.js');<br />worker.onmessage= function (event) {<br /> console.log('Results: ' + event.data);<br /> };<br /></script><br />
  48. 48. worker.js<br />function findPrimes() {<br /> // ... prime algorithm here<br />postMessage(nextPrime);<br />}<br />findPrimes();<br />
  49. 49. What does it mean?<br />Year 2010, Dual/Quad Core Processors,<br />Browsers can’t do multithreading<br />Priceless!<br />Heavy Progressing<br />Slow Throughput, I may want to do this processing in a different thread<br />
  50. 50. What does it mean?<br />Browser can now use the actual CPU Power of the machine, to do wonders!<br />Worker sends messages<br />Worker sends messages<br />
  51. 51. JavaScript Developers in India<br />Myth!<br />
  52. 52. JavaScript Developers<br />Needs to understand <br />JavaScript language in depth<br />Closures<br />Memory leaks<br />Browser Quirks<br />Cross Browser compatibility<br />CSS knowledge<br />DOM handling<br />List continues……………………….<br />
  53. 53. Two Options<br />JavaScript<br />Go ahead with hiring or training JS developers<br />Try it for 6 months<br />Let your projects fail<br />Burn your fingers<br />Now try option two<br />Java based<br />Use something like GWT, no use GWT<br />Use HTML 5 Libraries, or create some your self<br />Let your developers code in Java, be productive<br />Let GWT give you the most optimized js ever possible<br />After 6 months Thank me!<br />
  54. 54. Why GWT?<br />Day 3 your java developers are productive<br />No. of 3rd party support for html 5 and widgets available (even of IE, can you believe it!)<br />You can quickly create wrapper on underlying javascriptapis for HTML 5 and abstract you developers from it<br />
  55. 55. Next month<br />What topics you want?<br />We vote now and fix this!<br />Some Options<br />GWT<br />GAE (java)<br />Google Ajax API (including Maps)<br />Android<br />Wave (done twice actually)<br />
  56. 56. Thank you!<br />

×