Your SlideShare is downloading. ×
0
Appleless iPhone Apps
...without the App
       Store
...without
Objective-C
...using web
 technology
HTML5 & CSS3
And it works
 without a
connection!
Demo
Technology
•HTML & CSS
•HTML5 offline applications
•Meta tags to hide status bar
•Touch icon
•Touch events
Offline
      Applications

<html manifest="rubiks.manifest">
CACHE MANIFEST

/demo/rubiks/style.css
/demo/rubiks/jquery.min.js
/demo/rubiks/rubiks.js

# version (busting)
First Load

1. Requests all resources
2. Parses manifest
3. Reloads and stores/caches all
   resources (not sure why)
4. N...
Subsequent load
1. Request manifest
2. Checks for changes in manifest
3. If changed:
 • Reload all resources and cache
   ...
Home Screen App

•Touch icon 73x73:
 <link rel="apple-touch-icon"
 href="apple-touch-icon.png" />

•Web app capable meta t...
<meta name="apple-mobile-web-app-
capable" content="yes" />

<meta names="apple-mobile-web-app-
status-bar-style" content=...
Touch Events

•mousedown => touchstart
•mouseup => touchend
•mousemove => touchmove
•within event.touches[0]
Simple jQuery
$(document).bind('touchstart',
 function (evt) {
     // jQuery creates a bespoke event
     evt = evt.origi...
Simple jQuery
$(document).bind('touchstart',
 function (evt) {
     // jQuery creates a bespoke event
     evt = evt.origi...
Detecting iPhones
var iPhone =
  RegExp(" AppleWebKit/")
  .test(navigator.userAgent)
  &&
  RegExp(" Mobile/")
 .test(nav...
Detecting iPhones
var iPhone =
  RegExp(" AppleWebKit/")
  .test(navigator.userAgent)
  &&
  RegExp(" Mobile/")
 .test(nav...
Native Look
•iUi - older, doesn't do native CSS
  transforms

•jqTouch - jQuery does do native
  CSS transforms
jqtouch.com
But also:
•Geolocation
•Offline storage: web database or
  storage

•Off/Online detection
•CSS 3D transforms & CSS
  transitions

•C...
Thanks!

Remy Sharp / @rem

http://icanhaz.com/rubiks
iPhone Appleless Apps
Upcoming SlideShare
Loading in...5
×

iPhone Appleless Apps

4,761

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.

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

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

No notes for slide

Transcript of "iPhone Appleless Apps"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×