Advanced iPhone Web Development

7,580 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,580
On SlideShare
0
From Embeds
0
Number of Embeds
2,282
Actions
Shares
0
Downloads
225
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

    ×