Your SlideShare is downloading. ×
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

2,167

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,167
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
31
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. Introduction to HTML 5
    By Rohit Ghatol
  • 2. About Me
    Name – Rohit Ghatol
    Associations – Founder Pune GTUG and Co Founder Pune Agile Group. Technical Speaker on various platforms like CSI, Indic Threads, etc…
    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. We will discuss
    History! Why HTML 5?
    What is HTML 5?
    How to use HTML 5?
    Examples
    Programming in Java instead of Javascript
  • 4. Rough History of Web
    HTML 5
    Workers
    Video
    Geo
    6
    Offline
    Canvas/SVG
    Flex/Silver light
    User Experience
    RIA/Next Gen Apps
    Ajax
    Static HTML
    Ajax Apps
    CSS
    Funeral
    DOM
    HTML
    1990
    ……..
    2010
    2008
    2004
    2000
    Time line
  • 5. Why HTML 5?
    Flash, Silver light, JavaFx, and more….
    Standards Vs Corporate Babies
    Say in the Standards
    In short, Browsers + Standards = Better Results
  • 6. What is HTML 5?
    Main Thread
    Database
    Offline Cache
    X
    N
    E
    W
    Geo Location
    Canvas & SVG
    More Threads
    S
    Video
  • 7. SVG Programming
    <!DOCTYPE html>
    <html>
    <body>
    <svg width="200" height="200">
    <rect
    x="0" y="0"
    width="100" height="100"
    fill="blue" stroke="red"
    stroke-width="5px"
    rx="8" ry="8"
    id="myRect" class="chart" />
    </svg>
    </body>
    </html>
  • 8. SVG Event handling
    varsvgRect = document.getElementById(“myRect”);
    svgRect.onClick=function(){
    alert(“Clicked Rect”);
    };
    It’s the same! 
  • 9. But this did not work
    Browsers only sees a HTML as SVG if its content type is “image/svg+xml"
    E.g in JSP one would need to add this to it
    <%@ page contentType="image/svg+xml" %>
  • 10. Does it work on IE?
    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. Lastly better SVG Example
    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 Programming
    <canvas id="myCanvas" width="150" height="150">
    </canvas>
    <script type="text/javascript">
    var canvas =
    document.getElementById('myCanvas');
    varctx = canvas.getContext('2d');
    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect (10, 10, 55, 50);
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect (30, 30, 55, 50);
    </script>
  • 13. Canvas
    <!DOCTYPE html>
    <html>
    <body>
    <canvas id="myCanvas" width="150" height="150">
    </canvas>
    <script type="text/javascript">
    var canvas = document.getElementById('myCanvas');
    varctx = canvas.getContext('2d');
    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect (10, 10, 55, 50);
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect (30, 30, 55, 50);
    </script>
    </body>
    </html>
  • 14. SVG Vs Canvas
    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. SVG/Canvas Demos
    First Person Gifter
    Population Demo
  • 16. Support
  • 17. Video Support
    Current Video Support
    Install Plug-ins
  • 18. Video Support
    <video src="http://www.w3schools.com/html5/movie.ogg" controls >
    Your browser does not support the video element.
    </video>
    Current Video Support
  • 19. Programming Video Player
    <button id="play“ onClick="playMovie()"> Play </button>
    <script>
    function playMovie()
    {
    var player = document.getElementsByTagName("video")[0];
    player.play();
    }
    </script>
  • 20. Support
  • 21. Geo Location Aware
    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. Geo Programming
    navigator.geolocation.getCurrentPosition(
    function(position) {
    varlat = position.coords.latitude;
    varlon = position.coords.longitude;
    var acc = position.coords.accurary;
    // Show position on Google Maps
    }
    );
  • 23. Geo Programming Demo
  • 24. Geo Programming Demo
    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg" type="text/javascript"></script>
    // See next page for script which goes here
    </head>
    <body onLoad="initialize()">
    <h1>Geo Demo</h1>
    <b>Your location is <div id="loc">Loading...</div></b><hr>
    <div id="map_canvas" style="border:1px solid black;width: 500px; height: 300px"></div>
    </body>
    </html>
  • 25. Geo Programming Demo
    <script type="text/javascript">
    function initialize() {
    if (GBrowserIsCompatible())
    {
    var map = new GMap2(document.getElementById("map_canvas"));
    navigator.geolocation.getCurrentPosition(
    function(position) {
    var lat = position.coords.latitude;
    varlon = position.coords.longitude;
    document.getElementById("loc").innerHTML=lat+","+lon;
    map.setCenter(new GLatLng(lat, lon), 13);
    var point = new GLatLng(lat,lon);
    map.addOverlay(new GMarker(point));
    }
    );
    }
    }
    </script>
  • 26. Support
  • 27. App Cache and Database
    Lets see these one by one
  • 28. App Cache
    Loading of web apps when browser is offline
    Storage of cache of the web app resources
    Tracking and Aware of cache changes
  • 29. App Cache
    Enable offline cache
    <html manifest="todo.manifest">
    </html>
  • 30. cache.manifest
    CACHE MANIFEST
    # version 1
    CACHE:
    todo-list-3.html
    css/todo-list.css
    images/todo.jpg
    script/todo-list.js
  • 31. Offline/Online Event
    <script type="text/javascript">
    function online(event) {
    varstatus = 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. Cache Events
    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. Cache Operations
    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. Offline Application Detailed
    For more details visit –
    http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline
  • 35. Browser Databases
    Opening a database Connection
    if (window.openDatabase)
    {
    db = openDatabase("NoteTest", "1.0", "HTML5 Database API example", 200000);
    }
  • 36. Creating Tables
    function loaded()
    {
    db.transaction(function(tx) {
    tx.executeSql("SELECT COUNT(*) FROM Tasks", [], function(tx,result) {
    count=result.rows.item(0)["COUNT(*)"];
    alert(“Total rows is “+count);
    }, function(tx, error) {
    tx.executeSql("CREATE TABLE Tasks (id REAL UNIQUE, task TEXT)", [], function(result) {
    alert(“created tables”);
    });
    });
    });
    }
  • 37. Creating Tables
    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. Creating Tables
    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. Retrieving records
    function loadTasks(){
    db.transaction(function(tx) {
    tx.executeSql("SELECT id, task FROM Tasks", [], function(tx, result) {
    for (vari = 0; i < result.rows.length; ++i) {
    varrow = result.rows.item(i);
    innerHTML=innerHTML+row.task+"<br>";
    }
    todoListElem.innerHTML=innerHTML;
    }, function(tx, error) {
    alert('Failed to retrieve tasks from database - ' + error.message);
    });
    });
    }
  • 40. Inserting new records
    function saveTask()
    {
    vartextBox=document.getElementById("task")
    vartaskText=textBox.value;
    textBox.value="";
    db.transaction(function (tx)
    {
    tx.executeSql("INSERT INTO Tasks (id, task) VALUES (?, ?)", [count++,taskText]);
    });
    loadTasks();
    }
  • 41. Deleting Records
    function clearAllTask()
    {
    db.transaction(function (tx)
    {
    tx.executeSql("Delete From Tasks");
    });
    loadTasks();
    }
  • 42. Support
  • 43. Web Workers
    History!
    Browsers are single threaded, except ajax callbacks
  • 44. Web Workers
    JavaScript has become 100 times more fast
    > 100x
  • 45. Web Workers
    Then
    One Tortoise
    Single Threaded Browser
  • 46. Web Workers
    Now
    Many Rabbits
    Multi Threaded Browser
  • 47. Web Workers
    Too many to be true, Pinch me I am dreaming
    <script>
    varworker = new Worker('worker.js');
    worker.onmessage= function (event) {
    console.log('Results: ' + event.data);
    };
    </script>
  • 48. worker.js
    function findPrimes() {
    // ... prime algorithm here
    postMessage(nextPrime);
    }
    findPrimes();
  • 49. What does it mean?
    Year 2010, Dual/Quad Core Processors,
    Browsers can’t do multithreading
    Priceless!
    Heavy Progressing
    Slow Throughput, I may want to do this processing in a different thread
  • 50. What does it mean?
    Browser can now use the actual CPU Power of the machine, to do wonders!
    Worker sends messages
    Worker sends messages
  • 51. JavaScript Developers in India
    Myth!
  • 52. JavaScript Developers
    Needs to understand
    JavaScript language in depth
    Closures
    Memory leaks
    Browser Quirks
    Cross Browser compatibility
    CSS knowledge
    DOM handling
    List continues……………………….
  • 53. Two Options
    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. Why GWT?
    Day 3 your java developers are productive
    No. of 3rd party support for html 5 and widgets available (even of IE, can you believe it!)
    You can quickly create wrapper on underlying javascriptapis for HTML 5 and abstract you developers from it
  • 55. Next month
    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!

×