Creating Rajanikant Powered Site
0 likes738 views
This document discusses creating an offline-capable website about Rajinikanth using HTML5 technologies. It describes how to cache assets using a cache manifest file to allow the site to work offline. It also covers checking connectivity status, offline and online events, using the canvas API to draw graphics, storing data locally using local storage, applying 3D transforms with CSS, and accessing device orientation data. The goal is to create a site that works regardless of internet connectivity or device orientation using HTML5 features.
![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"](https://image.slidesharecdn.com/creatingrajanikantpoweredsite-120217063527-phpapp02/85/Creating-Rajanikant-Powered-Site-24-320.jpg)
Creating Rajanikant Powered Site
- 1. Creating Rajinikant Powered Site Markandey Singh
- 3. I am javascript hacker
- 4. So lets talk about rajinikant
- 5. What is gmail id of rajinikanth?
- 6. gmail @ rajinikanth .com
- 8. Rajanikanth smoking in Dubai
- 9. recently I saw this site http://www.desimartini.com/allaboutrajni.htm
- 10. Claims to be working offline.
- 11. I loved it! and hoped they are promoting HTML5
- 12. But sad they were using FLASH :(
- 13. Today we are going to create a site which does the magic of rajanikant in HTML5
- 14. A site which can work offline, even if your internet unplugged
- 15. A site which works no matter how your laptop is oriented!
- 16. and some more magic
- 17. DESCLAIMER All characters and events in this talk -– even though based on real people –- are entirely fictional.
- 18. offline web apps
- 19. HTML5 defines some Offline Application Caching APIs
- 20. Which allows you to cache entire app offline so that your app will be fully operational even offline
- 21. Its very easy to do
- 22. Declaration of cache manifest <!DOCTYPE html> <html manifest="/cache-manifest-file"> ---- ----------------- --------------------- ---------------------
- 23. Cache manifest file CACHE MANIFEST #comment goes here ./anything.js ./anything.css ./anything.png NETWORK: *
- 24. 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"
- 25. WARNING Once you deploy offline capable app , none of your files will update to user, untill you will update your cache-manifest
- 26. How to check connectivity?? navigator.onLine
- 27. Events?? document.body.addEventListener("offline", function () { -------- -------- }, false); document.body.addEventListener("online", function () { -------- -------- }, false);
- 28. Canvas
- 29. Canvas
- 30. Canvas was here for long time in non-IE browsers, and now avaialable in IE9 as well
- 31. Canvas APIs are simple var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d');
- 32. Canvas APIs are simple canvas.width=500; canvas.height=500;
- 33. Canvas APIs are simple ctx.strokeStyle = '#0000FF'; ctx.lineWidth = 1;
- 34. 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();
- 35. 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);
- 37. its a way to store small size data on client side. (around 15MB per origin in most of the browsers)
- 38. Large data on localStorage should be avoided & too many read/write should be avoided !! To keep your app faster!!
- 39. HTML5 Local Storage API localStorage.setItem('name',value); value=localStorage.getItem('name');
- 40. Other APIs to store data locally are 1. Indexed Database API 2. File API
- 41. CSS 3D transforms (only supported by webkit)
- 42. Eventually major mobile browsers are based on webkit, e.g. iPhone, Android etc...
- 43. : ro tateY form kit- trans -web ); (- 11deg
- 44. Device orientation window.addEventListener('deviceorientation', function(event) { var a = event.alpha, b = event.beta, g = event.gamma; }, false);
- 46. Resources and people!! @paul_irish @rem @Codepo8 http://caniuse.com/
- 47. Thank you & Questions!! twitter: @markandey email: markandey.singh at gmail