Advanced iPhone Web Development
•Download as KEY, PDF•
15 likes•2,321 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 possibilities for utilizing UIWebViews inside of your native applications.
Recommended
Recommended
More Related Content
Similar to Advanced iPhone Web Development
Similar to Advanced iPhone Web Development (20)
Recently uploaded
Recently uploaded (20)
Advanced iPhone Web Development
- 1. Advanced iPhone Web Development Josh Schumacher Treemo Labs email: Josh.Schumacher@gmail.com web: http://blog.joshschumacher.com
- 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. 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. 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. Meta Tags
- 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. <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
- 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. Getting Really Fancy Gradients Masks Reflections Transitions Animations Transforms
- 11. Gradients (Coming Soon to iPhone) background: -webkit-gradient( linear, left top, left bottom, from(#333), color-stop(0.8, #bbb), to(#333) );
- 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. 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; }
- 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. 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. 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. 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. Design Patterns
- 20. Use Common Design Patterns Common designs. Mimicking behaviors in native iPhone applications
- 22. Offline Applications Offline Cache Manifests Using the local storage DB
- 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. Blurring Boundaries Web Apps as Native Apps
- 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. 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. Helpful Resources http://webkit.org/blog/ http://devloper.apple.com/ http://blog.joshschumacher.com