Your SlideShare is downloading. ×
0
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
iPhone Appleless Apps
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

iPhone Appleless Apps

4,731

Published on

A talk that demonstrates how to exploit the technology inside Safari on the iPhone to create rich apps without having to go through the app store.

A talk that demonstrates how to exploit the technology inside Safari on the iPhone to create rich apps without having to go through the app store.

Published in: Technology, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,731
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
44
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Appleless iPhone Apps
  • 2. ...without the App Store
  • 3. ...without Objective-C
  • 4. ...using web technology
  • 5. HTML5 & CSS3
  • 6. And it works without a connection!
  • 7. Demo
  • 8. Technology
  • 9. •HTML & CSS •HTML5 offline applications •Meta tags to hide status bar •Touch icon •Touch events
  • 10. Offline Applications <html manifest="rubiks.manifest">
  • 11. CACHE MANIFEST /demo/rubiks/style.css /demo/rubiks/jquery.min.js /demo/rubiks/rubiks.js # version (busting)
  • 12. First Load 1. Requests all resources 2. Parses manifest 3. Reloads and stores/caches all resources (not sure why) 4. Now ready
  • 13. Subsequent load 1. Request manifest 2. Checks for changes in manifest 3. If changed: • Reload all resources and cache locally 4. else • Load client with local resources
  • 14. Home Screen App •Touch icon 73x73: <link rel="apple-touch-icon" href="apple-touch-icon.png" /> •Web app capable meta tags
  • 15. <meta name="apple-mobile-web-app- capable" content="yes" /> <meta names="apple-mobile-web-app- status-bar-style" content="black- translucent" />
  • 16. Touch Events •mousedown => touchstart •mouseup => touchend •mousemove => touchmove •within event.touches[0]
  • 17. Simple jQuery $(document).bind('touchstart', function (evt) { // jQuery creates a bespoke event evt = evt.originalEvent.touches[0]; } );
  • 18. Simple jQuery $(document).bind('touchstart', function (evt) { // jQuery creates a bespoke event evt = evt.originalEvent.touches[0]; } );
  • 19. Detecting iPhones var iPhone = RegExp(" AppleWebKit/") .test(navigator.userAgent) && RegExp(" Mobile/") .test(navigator.userAgent);
  • 20. Detecting iPhones var iPhone = RegExp(" AppleWebKit/") .test(navigator.userAgent) && RegExp(" Mobile/") .test(navigator.userAgent);
  • 21. Native Look
  • 22. •iUi - older, doesn't do native CSS transforms •jqTouch - jQuery does do native CSS transforms
  • 23. jqtouch.com
  • 24. But also:
  • 25. •Geolocation •Offline storage: web database or storage •Off/Online detection •CSS 3D transforms & CSS transitions •Canvas
  • 26. Thanks! Remy Sharp / @rem http://icanhaz.com/rubiks

×