The document discusses several HTML5 APIs including Geolocation, Web Storage, Web SQL, Web Workers, Web Sockets, and Canvas. It provides code examples and explanations for how each API works and can be used, including getting a user's location, storing data locally, running scripts in parallel threads, enabling real-time communications, and drawing graphics. It also mentions some use cases for these technologies like building games, performing intensive calculations, and syntax highlighting.

1. Mobile : Webapp development Ganesh Gembali Consultant Xebia IT Architects Pvt Ltd

5. Geolocation API

6. Geolocation API function getGEO() { // First check if your browser supports the geolocation API if (navigator.geolocation) { alert("HTML 5 is getting your location"); // Get the current position navigator.geolocation.getCurrentPosition( function(position) { alert(position.coords.latitude); alert(position.coords.longitude); }); } else { alert("Sorry... your browser does not support the HTML5 GeoLocation API"); } }

8. Success callback arguments interface Position { readonly attribute Coordinates coords ; readonly attribute DOMTimeStamp timestamp ; }; interface Coordinates { readonly attribute double latitude ; readonly attribute double longitude ; readonly attribute double? altitude ; readonly attribute double accuracy ; readonly attribute double? altitudeAccuracy ; readonly attribute double? heading ; readonly attribute double? speed ; };

9. Error callback arguments interface PositionError { const unsigned short PERMISSION_DENIED = 1; const unsigned short POSITION_UNAVAILABLE = 2; const unsigned short TIMEOUT = 3; readonly attribute unsigned short code ; readonly attribute DOMString message ; };

10. Repeated position updates function scrollMap(position) { // Scrolls the map so that it is centered at (position.coords.latitude,position.coords.longitude). } // Request repeated updates. navigator.geolocation.watchPosition(scrollMap);

12. Storage Interface interface Storage { readonly attribute unsigned long length ; DOMString key(in unsigned long index) ; getter any getItem(in DOMString key) ; setter creator void setItem(in DOMString key, in any value) ; deleter void removeItem(in DOMString key) ; void clear() ; };

13. Web SQL interface WindowDatabase { Database openDatabase(in DOMString name, in DOMString version, in DOMString displayName, in unsigned long estimatedSize, in optional DatabaseCallback creationCallback); }; function prepareDatabase(ready, error) { return openDatabase('documents', '1.0', 'Offline document storage', 5*1024*1024, function (db) { db.changeVersion('', '1.0', function (t) { t.executeSql('CREATE TABLE docids (id, name)'); }, error); }); }

15. var worker = new Worker(“jworker.js”); main.js Manages DOM onMessage Manages DOM, Renders UI jworker.js Main.js jWorker.js postMessage Process task Message WebWorker Object Lifecycle

16. Worker-Syntax <script> var worker = new Worker('worker.js'); worker.postMessage('Hello Guest'); worker.onmessage = function (event) { alert(event.data); }; </script>

20. Web Sockets

23. Simple Implementation var socket = new WebSocket(“ws://localhost:8787/socket/server”); socket.onopen = function(event){ log(“WebSocket connection established”); } socket.onmessage = function(event){ log(“Received message with date =”+event.data); } socket.onerror = function(event){ log(“Error occurred”); } Socket.onclose = function(event){ log(“connection closed”); }

24. HTML-5 Canvas

25. History

26. What it is not

27. Canvas element <canvas id=&quot;stockGraph&quot; width=&quot;150&quot; height=&quot;150&quot;> You browser doesn't support canvas. </canvas> var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); }