html 5
DESCRIPTION
TRANSCRIPT
<HTML>5
Introduction to HTML 5
By Rohit Ghatol
<HTML>5
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
<HTML>5
We will discuss
• History! Why HTML 5?• What is HTML 5?• How to use HTML 5?• Examples• Programming in Java instead of Javascript
<HTML>5
Rough History of WebU
ser E
xper
ienc
e
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
<HTML>5
Why HTML 5?
• Flash, Silver light, JavaFx, and more….• Standards Vs Corporate Babies• Say in the Standards
• In short, Browsers + Standards = Better Results
<HTML>5
What is HTML 5?
Offline CacheX
DatabaseMain Thread
More Threads
N
S
EW
Geo Location
Category 1 Category 2 Category 3 Category 4
0
0.5
1
1.5
2
2.5
3
3.5
4
4.5
5
Series 1
Series 2
Series 3
Canvas & SVG
Video
<HTML>5
SVG Programming<!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>
<HTML>5
SVG Event handling
var svgRect = document.getElementById(“myRect”);
svgRect.onClick=function(){alert(“Clicked Rect”);
};
It’s the same!
<HTML>5
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" %>
<HTML>5
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
<HTML>5
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
<HTML>5
Canvas Programming
<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>
<HTML>5
Canvas<!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>
<HTML>5
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
<HTML>5
SVG/Canvas Demos
• First Person Gifter• Population Demo
<HTML>5
Support
FireFox Safari FireFox Opera IE
Canvas/SVG Yes Yes Yes Yes SvgWeb and Explorer Canvas
<HTML>5
Video Support
Current Video Support
Install Plug-ins
<HTML>5
Video Support
Current Video Support
<video src="http://www.w3schools.com/html5/movie.ogg" controls > Your browser does not support the video element.
</video>
<HTML>5
Programming Video Player<button id="play“ onClick="playMovie()"> Play </button>
<script>
function playMovie(){
var player = document.getElementsByTagName("video")[0];player.play();
}
</script>
<HTML>5
Support
FireFox Safari FireFox Opera IE
Canvas/SVG Yes Yes Yes Yes SvgWeb and Explorer Canvas
Video Yes Yes Yes Yes Not Yet
<HTML>5
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
<HTML>5
Geo Programming
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}
);
<HTML>5
Geo Programming Demo
<HTML>5
Geo Programming Demo<!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>
<HTML>5
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;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>
<HTML>5
Support
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
<HTML>5
App Cache and Database
• Lets see these one by one
<HTML>5
App Cache
• Loading of web apps when browser is offline
• Storage of cache of the web app resources
• Tracking and Aware of cache changes
<HTML>5
App Cache
• Enable offline cache
<html manifest="todo.manifest"></html>
<HTML>5
cache.manifest
CACHE MANIFEST# version 1
CACHE:todo-list-3.htmlcss/todo-list.cssimages/todo.jpgscript/todo-list.js
<HTML>5
Offline/Online Event
<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>
<HTML>5
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();
<HTML>5
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 failscache.addEventListener('error', cacheErrorListener, false);
<HTML>5
Offline Application Detailed
• For more details visit – • http://www.whatwg.org/specs/web-apps/curr
ent-work/multipage/offline.html#offline
<HTML>5
Browser DatabasesOpening a database Connection
if (window.openDatabase) {
db = openDatabase("NoteTest", "1.0", "HTML5 Database API example", 200000);
}
<HTML>5
Creating Tablesfunction 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”);
}); }); });}
<HTML>5
Creating Tables
Running everything as a transactionsdb.transaction(<<func(tx)>>,<<func(tx,error>>);
1. First function is used to execute an sql2. Second function is a call back when
transaction error occures
<HTML>5
Creating Tables
Running everything as a transactionstx.executeSql(<<sql>>,<<args>>,<<func(tx,result)
>>);1. First argument is an sql2. Second argument is paramters to sql3. Callback when sql query returns
1. tx – SQL transaction2. result – SQL Result Set
<HTML>5
Retrieving recordsfunction 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);
}); });}
<HTML>5
Inserting new recordsfunction 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();}
<HTML>5
Deleting Recordsfunction clearAllTask(){
db.transaction(function (tx) { tx.executeSql("Delete From Tasks"); });
loadTasks();}
<HTML>5
Support
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
<HTML>5
Web Workers
• History!• Browsers are single threaded, except ajax
callbacks
<HTML>5
Web Workers
• JavaScript has become 100 times more fast
> 100x
<HTML>5
Web Workers
• ThenOne Tortoise
Single Threaded Browser
<HTML>5
Web Workers
• NowMany Rabbits
Multi Threaded Browser
<HTML>5
Web Workers
• 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>
<HTML>5
worker.js
function findPrimes() {// ... prime algorithm herepostMessage(nextPrime);
}findPrimes();
<HTML>5
What does it mean?
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!
<HTML>5
What does it mean?
Worker sends messages
Worker sends messages
Browser can now use the actual CPU Power of the machine, to do wonders!
<HTML>5
JavaScript Developers in India
Myth!
<HTML>5
JavaScript Developers
• Needs to understand – JavaScript language in depth– Closures– Memory leaks– Browser Quirks– Cross Browser compatibility– CSS knowledge– DOM handling– List continues……………………….
<HTML>5
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!
<HTML>5
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
javascript apis for HTML 5 and abstract you developers from it
<HTML>5
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)
<HTML>5
Thank you!