By Rohit Ghatol
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
By Rohit Ghatol
• 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
• History! Why HTML 5?• What is HTML 5?• How to use HTML 5?• Examples• Programming in Java instead of
Javascript
User Experience
Time line
1990 ……..2010
HTML
DOMCSS
Ajax
Canvas/SVG
Offline
VideoGeo
Workers
200820042000
Static HTML
Ajax Apps
RIA/Next Gen Apps
HTML 5
6Funeral
Flex/Silver light
• Flash, Silver light, JavaFx, and more….• Standards Vs Corporate Babies• Say in the Standards
• In short, Browsers + Standards = Better Results
Offline CacheX
DatabaseMain Thread
More Threads
N
S
EW
Geo LocationCanvas & SVG
Video
<!DOCTYPE html><html><body><svg width="200" height="200"><rectx="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>
var svgRect = document.getElementById(“myRect”);
svgRect.onClick=function(){alert(“Clicked Rect”);};
It’s the same!
• 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" %>
• Yes, the same classic question again?• No, IE 8 does not have support for SVG!
• Optionso Use SVGWeb, a javascript library that uses
flash to enable SVG support on IE browser
• 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
<canvas id="myCanvas" width="150" height="150"></canvas> <script type="text/javascript"> var canvas = document.getElementById('myCanvas');var ctx = 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>
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="150" height="150"></canvas> <script type="text/javascript"> var canvas = document.getElementById('myCanvas');var ctx = 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>
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
• First Person Gifter• Population Demo
FireFox Safari FireFox Opera IE
Canvas/SVG Yes Yes Yes Yes SvgWeb and Explorer Canvas
Current Video Support
Install Plug-ins
Current Video Support
<video src="http://www.w3schools.com/html5/movie.ogg" controls >Your browser does not support the video element.
</video>
<button id="play“ onClick="playMovie()"> Play </button>
<script>
function playMovie(){var player = document.getElementsByTagName("video")[0];player.play();}
</script>
FireFox Safari FireFox Opera IE
Canvas/SVG Yes Yes Yes Yes SvgWeb and Explorer Canvas
Video Yes Yes Yes Yes Not Yet
• 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
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});
<!DOCTYPE html><html><head><script src="http://maps.google.com/maps?file=api&v=2&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>
<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;var lon = 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>
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
• Lets see these one by one
• Loading of web apps when browser is offline
• Storage of cache of the web app resources
• Tracking and Aware of cache changes
• Enable offline cache
<html manifest="todo.manifest"></html>
CACHE MANIFEST# version 1
CACHE:todo-list-3.htmlcss/todo-list.cssimages/todo.jpgscript/todo-list.js
<script type="text/javascript"> 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>
• 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();
• 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);
• For more details visit – • http://www.whatwg.org/specs/web-apps/c
urrent-work/multipage/offline.html#offline
Opening a database Connection
if (window.openDatabase) { db = openDatabase("NoteTest", "1.0", "HTML5 Database API
example", 200000);}
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”);});});});}
Running everything as a transactionsdb.transaction(<<func(tx)>>,<<func(tx,error>>);
1.First function is used to execute an sql• Second function is a call back when
transaction error occures
Running everything as a transactionstx.executeSql(<<sql>>,<<args>>,<<func(tx,result)>>);1.First argument is an sql• Second argument is paramters to sql• Callback when sql query returns
• tx – SQL transaction• result – SQL Result Set
function loadTasks(){db.transaction(function(tx) {tx.executeSql("SELECT id, task FROM Tasks", [], function(tx, result) {for (var i = 0; i < result.rows.length; ++i) {var row = result.rows.item(i);innerHTML=innerHTML+row.task+"<br>";}todoListElem.innerHTML=innerHTML;}, function(tx, error) {alert('Failed to retrieve tasks from database - ' + error.message);});});}
function saveTask(){var textBox=document.getElementById("task")var taskText=textBox.value;textBox.value="";db.transaction(function (tx) {tx.executeSql("INSERT INTO Tasks (id, task) VALUES (?, ?)", [count++,taskText ]);});loadTasks();}
function clearAllTask(){db.transaction(function (tx) {tx.executeSql("Delete From Tasks");});loadTasks();}
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
• History!• Browsers are single threaded, except ajax
callbacks
• JavaScript has become 100 times more fast
> 100x
• ThenOne Tortoise
Single Threaded Browser
• NowMany Rabbits
Multi Threaded Browser
• 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>
function findPrimes() {// ... prime algorithm herepostMessage(nextPrime);}findPrimes();
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!
Worker sends messages
Worker sends messages
Browser can now use the actual CPU Power of the machine, to do wonders!
Myth!
• Needs to understand o JavaScript language in deptho Closureso Memory leakso Browser Quirkso Cross Browser compatibilityo CSS knowledgeo DOM handlingo List continues……………………….
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!
• 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 javascript apis for HTML 5 and abstract you developers from it
• What topics you want?• We vote now and fix this!• Some Options
o GWTo GAE (java)o Google Ajax API (including Maps)o Androido Wave (done twice actually)
Thank you!
Related Documents
