Advanced iPhone Web Development
Upcoming SlideShare
Loading in...5
×
 

Advanced iPhone Web Development

on

  • 9,538 views

This was presented to the Seattle iPhone App Developers and Designers Meetup on May 5th, 2009. This presentation focused on the unique capabilities available in WebKit on the iPhone and on ...

This was presented to the Seattle iPhone App Developers and Designers Meetup on May 5th, 2009. This presentation focused on the unique capabilities available in WebKit on the iPhone and on possibilities for utilizing UIWebViews inside of your native applications.

Statistics

Views

Total Views
9,538
Views on SlideShare
7,464
Embed Views
2,074

Actions

Likes
16
Downloads
223
Comments
1

10 Embeds 2,074

http://blog.joshschumacher.com 1978
http://www.stile.ch 66
http://www.slideshare.net 13
http://cooljapan.josh.dw2.treemo.com 10
http://complex.josh.dw2.treemo.com 2
http://translate.googleusercontent.com 1
http://webcache.googleusercontent.com 1
http://209.85.129.132 1
http://allabout-iphonemx.blogspot.com 1
http://stile.ch 1
More...

Accessibility

Upload Details

Uploaded via as Apple Keynote

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

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Apple’s New iPod Touch
    A Worthy Innovation or a High Priced Techno Overload?
    http://www.slideshare.net/Zanura/new-i-pod-touch-review
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Advanced iPhone Web Development Advanced iPhone Web Development Presentation Transcript

  • Advanced iPhone Web Development Josh Schumacher Treemo Labs email: Josh.Schumacher@gmail.com web: http://blog.joshschumacher.com
  • iPhone Symbian Windows Mobile Blackberry Palm Linux Blackberry Windows Mobile 20% 13% Mobile Palm 1% Smartphone Linux 8% Market Share Q4 2008 iPhone 11% Symbian 48%
  • iPhone Android Java ME Symbian Win Mo Blackberry Palm Palm Win Mo 2% 6% Blackberry 3% Symbian 7% Mobile Devices Java ME By Internet Usage 8% April 2009 Android 9% iPhone 65%
  • Topics of Discussion Meta Tags Webkit CSS Extensions Webkit DOM Additions Design Patterns Offline Web Applications Blurring Boundaries, Web Apps as Native Apps Helpful Resources
  • Meta Tags
  • Useful <meta> tags <meta name=quot;viewportquot; content=quot;width=device-width, user- scalable=no initial-scale = 1.0quot; /> <link rel=quot;apple-touch-iconquot; href=quot;/my_custom_icon.pngquot;/> <meta name=quot;apple-mobile-web-app-status-bar-stylequot; content=quot;blackquot; /> <meta name=quot;apple-mobile-web-app-capablequot; content=quot;yesquot; /> <body onorientationchange=quot;myOrientationChangeFunction()quot;> <meta name=quot;format-detectionquot; content=quot;telephone=noquot; />
  • <meta name=quot;apple-mobile-web-app- capablequot; content=quot;yesquot; /> window.navigator.standalone read-only JavaScript Boolean if window is currently in fullscreen mode <meta name=quot;apple-mobile-web- app-status-bar-stylequot; content=quot;blackquot; /> Has no effect unless launched from home screen link Can be set to translucent to hide the status bar
  • Webkit CSS Extensions
  • Some Must Have CSS Rules text-shadow text-fill-color text-stroke -webkit-tap-highlight-color -webkit-box-shadow -webkit-border-radius -webkit-border-image
  • Getting Really Fancy Gradients Masks Reflections Transitions Animations Transforms
  • Gradients (Coming Soon to iPhone) background: -webkit-gradient( linear, left top, left bottom, from(#333), color-stop(0.8, #bbb), to(#333) );
  • CSS Transitions .fade-away { opacity: 0; -webkit-transition: opacity 1s ease-out 20ms; } <p onclick=quot;className='fade-away';quot;>Click Me To Fade Away</p>
  • Transforms #banner { -webkit-transform: rotate(-45deg); width: 150px; position: absolute; top: 20px; left: 0px; background: red; padding: 4px; text-align: center; border: solid 1px #333; margin-left: -50px; }
  • Webkit DOM Extensions
  • Multi-Touch Interactions Touches Events Gesture Events Touches are important for keeping track of how many fingers are on the screen, where they are, and what they’re doing. Gestures are important for determining what the user is doing when they have two fingers on the screen and are either pinching, pushing, or rotating them.
  • Touches Events touchstart Happens every time a finger is placed on the screen touchend Happens every time a finger is removed from the screen touchmove Happens as a finger already placed on the screen is moved across the screen touchcancel
  • Gesture Events gesturestart Sent when two or more fingers touch the surface gesturechange Sent when fingers are moved during a gesture gestureend Sent when the gesture ends (when there are 1 or 0 fingers touching the surface)
  • Sample Flow of Events 1. touchstart for finger 1. Sent when the first finger touches the surface. 2. gesturestart. Sent when the second finger touches the surface. 3. touchstart for finger 2. Sent immediately after gesturestart when the second finger touches the surface. 4. gesturechange for current gesture. Sent when both fingers move while still touching the surface. 5. gestureend. Sent when the second finger lifts from the surface. 6. touchend for finger 2. Sent immediately after gestureend when the second finger lifts from the surface. 7. touchend for finger 1. Sent when the first finger lifts from the surface.
  • Design Patterns
  • Use Common Design Patterns Common designs. Mimicking behaviors in native iPhone applications
  • Offline Web Applications
  • Offline Applications Offline Cache Manifests Using the local storage DB
  • Offline Cache-Manifests Must be served as text/cache-manifest. CACHE MANIFEST demoimages/clownfish.jpg demoimages/clownfishsmall.jpg demoimages/flowingrock.jpg demoimages/flowingrocksmall.jpg demoimages/stones.jpg demoimages/stonessmall.jpg <html manifest=quot;demo.manifestquot;>
  • Blurring Boundaries Web Apps as Native Apps
  • Utilize UIWebView inside of your native Applications Rapid Development Ship updates w/o Apple Approval Expand potential developer base Easier porting to other devices
  • Using Objective-C in Javascript WebScriptObject.h defines methods you can implement in your Objective-C classes to expose their interfaces to a scripting environment such as JavaScript @interface BasicAddressBook: NSObject { } + (BasicAddressBook *)addressBook; - (NSString *)nameAtIndex:(int)index; @end BasicAddressBook *littleBlackBook = [BasicAddressBook addressBook]; id win = [webView windowScriptObject]; [win setValue:littleBlackBook forKey:@quot;AddressBookquot;]; function printNameAtIndex(index) { var myaddressbook = window.AddressBook; var name = myaddressbook.nameAtIndex_(index); document.write(name); } See Webkit DOM Programming Topics and WebKit Objective-C Framework Reference for more information, available in the developer portal.
  • Helpful Resources http://webkit.org/blog/ http://devloper.apple.com/ http://blog.joshschumacher.com