creating rajanikant powered site
Post on 10-May-2015
931 Views
Preview:
DESCRIPTION
TRANSCRIPT
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;
Canvas APIs are simple
ctx.strokeStyle = '#0000FF'; ctx.lineWidth = 1;
Canvas APIs are simple
ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x, y);
ctx.arc(x,y,radius,startAngle,endAngle, clockwise);
ctx.stroke(); ctx.fill();
Canvas APIs are simple
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
top related