HTML 5

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


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



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



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!

HTML 5

Technology