• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
iPhone Appleless Apps
 

iPhone Appleless Apps

on

  • 7,198 views

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.

Statistics

Views

Total Views
7,198
Views on SlideShare
7,151
Embed Views
47

Actions

Likes
1
Downloads
43
Comments
0

4 Embeds 47

http://www.slideshare.net 40
http://lanyrd.com 5
http://webcache.googleusercontent.com 1
http://www.verious.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    iPhone Appleless Apps iPhone Appleless Apps Presentation Transcript

    • 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. Now ready
    • 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
    • Home Screen App •Touch icon 73x73: <link rel="apple-touch-icon" href="apple-touch-icon.png" /> •Web app capable meta tags
    • <meta name="apple-mobile-web-app- capable" content="yes" /> <meta names="apple-mobile-web-app- status-bar-style" content="black- translucent" />
    • 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.originalEvent.touches[0]; } );
    • Simple jQuery $(document).bind('touchstart', function (evt) { // jQuery creates a bespoke event evt = evt.originalEvent.touches[0]; } );
    • Detecting iPhones var iPhone = RegExp(" AppleWebKit/") .test(navigator.userAgent) && RegExp(" Mobile/") .test(navigator.userAgent);
    • Detecting iPhones var iPhone = RegExp(" AppleWebKit/") .test(navigator.userAgent) && RegExp(" Mobile/") .test(navigator.userAgent);
    • 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 •Canvas
    • Thanks! Remy Sharp / @rem http://icanhaz.com/rubiks