HTML 5
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML 5

on

  • 1,904 views

 

Statistics

Views

Total Views
1,904
Views on SlideShare
1,684
Embed Views
220

Actions

Likes
0
Downloads
45
Comments
0

2 Embeds 220

http://rohitghatol.com 219
https://www.linkedin.com 1

Accessibility

Categories

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.

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

HTML 5 Presentation Transcript

  • 1. By Rohit Ghatol
  • 2.
      • Name – Rohit Ghatol
      • Associations – Founder Pune GTUG and Co Founder Pune Agile Group. Technical Speaker on various platforms like CSI, Indic Threads, etc. Certified Scrum Master
      • Experience – 8 years total, 3 years as a speaker & trainer
      • Companies – Synerzip, Google, Persistent, Sigma
      • Technologies – GWT, Ajax, Android, OpenSocial, GAE, Cloud computing, J2EE, Google Ajax Apis etc..
      • Role – Architect and Senior Manager. Agile Practitioner and Trainer in Synerzip.
      • Qualification – BE from PICT Pune
  • 3.
      • History! Why HTML 5?
      • What is HTML 5?
      • How to use HTML 5?
      • Examples
      • Programming in Java instead of Javascript
  • 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.
      • Flash, Silver light, JavaFx, and more….
      • Standards Vs Corporate Babies
      • Say in the Standards
      • In short, Browsers + Standards = Better Results
  • 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.
      • Browsers only sees a HTML as SVG if its content type is “ image/svg+xml &quot;
      • E.g in JSP one would need to add this to it
    • <%@ page contentType=&quot;image/svg+xml&quot; %>
  • 10.
      • Yes, the same classic question again?
      • No, IE 8 does not have support for SVG!
      • Options
        • Use SVGWeb , a javascript library that uses flash to enable SVG support on IE browser
  • 11.
      • http://www.w3schools.com/svg/tryit.asp?filename=animatemotion_2&type=svg
      • http://upload.wikimedia.org/wikipedia/commons/6/63/A_large_blank_world_map_with_oceans_marked_in_blue.svg
  • 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
      • Based on Tree of UI Objects
      • Interactively via mouse
      • Easy as Tag based
      • Medium Animation
      • Overall an High level API
    Canvas
      • Based on Pixels
      • Difficult object selection
      • Based on JS APIs
      • Better Animation
      • Overall a Low Level API
  • 15.
      • First Person Gifter
      • Population Demo
  • 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.
      • Geo helps Local Business
      • Geo helps Social Networking
      • Geo helps Ads
      • Geo helps Photo/Video tagging
      • And more…..
      • All Future Netbooks and Phone probably will have Geo Awareness
  • 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.
      • Lets see these one by one
  • 28.
      • Loading of web apps when browser is offline
      • Storage of cache of the web app resources
      • Tracking and Aware of cache changes
  • 29.
      • Enable offline cache
    • <html manifest=&quot;todo.manifest&quot;>
    • </html>
  • 30. CACHE MANIFEST # version 1 CACHE: todo-list-3.html css/todo-list.css images/todo.jpg script/todo-list.js
  • 31.
    • <script type=&quot;text/javascript&quot;>
      • function online(event) {
        • var status = document.getElementById('statusDiv');
        • status.className = navigator.onLine ? 'online' : 'offline';
        • status.innerHTML = navigator.onLine ? 'online' : 'offline';
      • }
      • addEvent(window, 'online', online);
      • addEvent(window, 'offline', online);
    • </script>
  • 32.
      • For example, you get the DOMApplicationCache object as follows:
    • cache = window.applicationCache;
      • You can check the status of the application cache as follows:
    • if (window.applicationCache.status == window.applicationCache.UPDATEREADY)...
      • If the application cache is in the UPDATEREADY state, then you can update it by sending it the update() message as follows:
    • window.applicationCache.update();
      • If the update is successful, swap the old and new caches as follows:
    • window.applicationCache.swapCache();
  • 33.
      • For example, you get the DOMApplicationCache object as follows:
    • cache = window.applicationCache;
      • You can listen to cache updates  register for the updateready event to be notified when the application cache is ready to be updated:
    • cache.addEventListener('updateready', cacheUpdatereadyListener, false);
      • Also, register for the error event to take some action if the update process fails
    • cache.addEventListener('error', cacheErrorListener, false);
  • 34.
      • For more details visit –
      • http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline
  • 35.
    • Opening a database Connection
    • if (window.openDatabase)
    • {
      • db = openDatabase(&quot;NoteTest&quot;, &quot;1.0&quot;, &quot;HTML5 Database API example&quot;, 200000);
    • }
  • 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.
    • Running everything as a transactions
    • db.transaction(<<func(tx)>>,<<func(tx,error>>);
      • First function is used to execute an sql
      • Second function is a call back when transaction error occures
  • 38.
    • Running everything as a transactions
    • tx.executeSql(<<sql>>,<<args>>,<<func(tx,result)>>);
      • First argument is an sql
      • Second argument is paramters to sql
      • Callback when sql query returns
        • tx – SQL transaction
        • result – SQL Result Set
  • 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.
      • History!
      • Browsers are single threaded, except ajax callbacks
  • 44.
      • JavaScript has become 100 times more fast
    > 100x
  • 45.
      • Then
    One Tortoise Single Threaded Browser
  • 46.
      • Now
    Many Rabbits Multi Threaded Browser
  • 47.
      • Too many to be true, Pinch me I am dreaming
    • <script>
    • var worker = new Worker('worker.js');
    • worker.onmessage = function (event) {
    • console.log('Results: ' + event.data);
    • };
    • </script>
  • 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.
      • Needs to understand
        • JavaScript language in depth
        • Closures
        • Memory leaks
        • Browser Quirks
        • Cross Browser compatibility
        • CSS knowledge
        • DOM handling
        • List continues……………………….
  • 53. JavaScript
      • Go ahead with hiring or training JS developers
      • Try it for 6 months
      • Let your projects fail
      • Burn your fingers
      • Now try option two
    Java based
      • Use something like GWT, no use GWT
      • Use HTML 5 Libraries, or create some your self
      • Let your developers code in Java, be productive
      • Let GWT give you the most optimized js ever possible
      • After 6 months Thank me!
  • 54.
      • Day 3 your java developers are productive
      • No. of 3 rd party support for html 5 and widgets available (even of IE, can you believe it!)
      • You can quickly create wrapper on underlying javascript apis for HTML 5 and abstract you developers from it
  • 55.
      • What topics you want?
      • We vote now and fix this!
      • Some Options
        • GWT
        • GAE (java)
        • Google Ajax API (including Maps)
        • Android
        • Wave (done twice actually)
  • 56. Thank you!