Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Ähnlich wie Creating Rajanikant Powered Site
Ähnlich wie Creating Rajanikant Powered Site (20)
Mehr von markandey
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
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