Creating Rajanikant Powered Site

Creating Rajinikant Powered Site

Markandey Singh

I am markandey

I am javascript hacker

So lets talk about rajinikant

What is gmail id of

rajinikanth?

gmail @ rajinikanth .com

Rajanikanth smoking in Dubai

recently I saw this site

http://www.desimartini.com/allaboutrajni.htm

Claims to be working offline.

I loved it! and hoped they are promoting

HTML5

But sad they were using FLASH

:(

Today we are going to create a site which does the magic of rajanikant in HTML5

A site which can work offline, even if your internet unplugged

A site which works no matter how your laptop is oriented!

and some more magic

DESCLAIMER

All characters and events in this talk -– even though based on real people –- are entirely

fictional.

offline web apps

HTML5 defines some Offline Application Caching APIs

Which allows you to cache entire app offline so that your app will be fully operational

even offline

Its very easy to do

<!DOCTYPE html> <html manifest="/cache-manifest-file"> ---- ----------------- --------------------- ---------------------

Declaration of cache manifest

CACHE MANIFEST

#comment goes here ./anything.js ./anything.css ./anything.png

NETWORK: *

Cache manifest file

Cache manifest MIME type has to be

text/cache-manifest

PHP header('Content-type: text/cache-manifest');

App Engine self.response.headers['Content-Type'] = "text/cache-

manifest"

WARNING Once you deploy offline capable

app , none of your files will update to user, untill you will update your cache-manifest

How to check connectivity??

navigator.onLine

Events??

document.body.addEventListener("offline", function () { -------- -------- }, false);

document.body.addEventListener("online", function () { -------- -------- }, false);

Canvas

Canvas

Canvas was here for long time

in non-IE browsers, and now avaialable in IE9 as well

var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d');

Canvas APIs are simple

canvas.width=500; canvas.height=500;


ctx.strokeStyle = '#0000FF'; ctx.lineWidth = 1;


ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x, y);

ctx.arc(x,y,radius,startAngle,endAngle, clockwise);

ctx.stroke(); ctx.fill();


DataUrl and Images

var dataURL = canvas.toDataURL("image/png");

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA

img = new Image(); img.src=imgurl; //data:image/

png;base64,iVBORw0

ctx.drawImage(img,0,0);

HTML Local Storage

its a way to store small size data on client side.

(around 15MB per origin in most of the browsers)

Large data on localStorage should be avoided & too many read/write should be avoided !! To keep your

app faster!!

HTML5 Local Storage API

localStorage.setItem('name',value);

value=localStorage.getItem('name');

Other APIs to store data locally are

1.  Indexed Database API 2. File API

CSS 3D transforms (only supported by webkit)

Eventually major mobile browsers are based on webkit, e.g. iPhone, Android etc...

-webkit-tr

ansform: r

otateY

(-11deg);

Device orientation

window.addEventListener('deviceorientation', function(event) { var a = event.alpha, b = event.beta,

g = event.gamma;

}, false);

Device orientation

Resources and people!!

@Codepo8

@rem @paul_irish

http://caniuse.com/

Thank you &

Questions!!

twitter: @markandey email: markandey.singh at gmail

Creating Rajanikant Powered Site

Technology

canvas apis

cache manifest mime

declaration of cache

offline capableapp

cacheentire app offline

todataurlimagepng data

imgurl data

large data