Advanced iPhone Web Development
Josh Schumacher
Treemo Labs


                  email: Josh.Schumacher@gmail.com
         ...
iPhone      Symbian       Windows Mobile           Blackberry    Palm   Linux




                           Blackberry
  ...
iPhone         Android     Java ME   Symbian     Win Mo     Blackberry   Palm



                          Palm
          ...
Topics of Discussion
 Meta Tags
 Webkit CSS Extensions
 Webkit DOM Additions
 Design Patterns
 Offline Web Applications
 Bl...
Meta Tags
Useful <meta> tags

 <meta name=quot;viewportquot; content=quot;width=device-width, user-
 scalable=no initial-scale = 1.0...
<meta name=quot;apple-mobile-web-app-
           capablequot; content=quot;yesquot; />
window.navigator.standalone read-on...
Webkit CSS Extensions
Some Must Have CSS Rules
text-shadow
text-fill-color
text-stroke
-webkit-tap-highlight-color
-webkit-box-shadow
-webkit-bor...
Getting Really Fancy
 Gradients
 Masks
 Reflections
 Transitions
 Animations
 Transforms
Gradients          (Coming Soon to iPhone)


 background:

   -webkit-gradient(
        linear,
        left top,
        ...
CSS Transitions

  .fade-away {
      opacity: 0;
      -webkit-transition: opacity 1s ease-out 20ms;
  }

  <p onclick=qu...
Transforms
  #banner {
      -webkit-transform: rotate(-45deg);
      width: 150px;
      position: absolute;
      top: 2...
Webkit DOM Extensions
Multi-Touch
Interactions
Touches Events
Gesture Events
Touches are important for keeping track of how many
fingers are on t...
Touches Events

touchstart
Happens every time a finger is placed on the screen
touchend
Happens every time a finger is remov...
Gesture Events

 gesturestart
 Sent when two or more fingers touch the surface
 gesturechange
 Sent when fingers are moved d...
Sample Flow of Events

 1. touchstart for finger 1. Sent when the first finger touches the surface.

 2. gesturestart. Sent w...
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/clownf...
Blurring Boundaries
Web Apps as Native Apps
Utilize UIWebView inside of your
        native Applications

Rapid Development
Ship updates w/o Apple Approval
Expand pot...
Using Objective-C in Javascript	
WebScriptObject.h defines methods you can implement in your Objective-C classes to expose ...
Helpful Resources
 http://webkit.org/blog/       http://devloper.apple.com/


                http://blog.joshschumacher.c...
Upcoming SlideShare
Loading in …5
×

Advanced iPhone Web Development

7,341 views
7,203 views

Published 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.

Published in: Technology, News & Politics
1 Comment
15 Likes
Statistics
Notes
  • Apple’s New iPod Touch
    A Worthy Innovation or a High Priced Techno Overload?
    http://www.slideshare.net/Zanura/new-i-pod-touch-review
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
7,341
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
224
Comments
1
Likes
15
Embeds 0
No embeds

No notes for slide



























  • Advanced iPhone Web Development

    1. 1. Advanced iPhone Web Development Josh Schumacher Treemo Labs email: Josh.Schumacher@gmail.com web: http://blog.joshschumacher.com
    2. 2. 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%
    3. 3. 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%
    4. 4. 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
    5. 5. Meta Tags
    6. 6. 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; />
    7. 7. <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
    8. 8. Webkit CSS Extensions
    9. 9. 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
    10. 10. Getting Really Fancy Gradients Masks Reflections Transitions Animations Transforms
    11. 11. Gradients (Coming Soon to iPhone) background: -webkit-gradient( linear, left top, left bottom, from(#333), color-stop(0.8, #bbb), to(#333) );
    12. 12. 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>
    13. 13. 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; }
    14. 14. Webkit DOM Extensions
    15. 15. 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.
    16. 16. 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
    17. 17. 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)
    18. 18. 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.
    19. 19. Design Patterns
    20. 20. Use Common Design Patterns Common designs. Mimicking behaviors in native iPhone applications
    21. 21. Offline Web Applications
    22. 22. Offline Applications Offline Cache Manifests Using the local storage DB
    23. 23. 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;>
    24. 24. Blurring Boundaries Web Apps as Native Apps
    25. 25. Utilize UIWebView inside of your native Applications Rapid Development Ship updates w/o Apple Approval Expand potential developer base Easier porting to other devices
    26. 26. 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.
    27. 27. Helpful Resources http://webkit.org/blog/ http://devloper.apple.com/ http://blog.joshschumacher.com

    ×