Your SlideShare is downloading. ×
0
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML 5

1,658

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,658
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
47
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×