advanced iphone web development - josh schumacher: a php developer
Post on 12-Sep-2021
2 Views
Preview:
TRANSCRIPT
Advanced iPhone Web DevelopmentJosh Schumacher
Treemo Labs
email: Josh.Schumacher@gmail.com
web: http://blog.joshschumacher.com
Mobile Smartphone Market Share
Q4 2008
Linux8%
Palm1%
Blackberry20%
Windows Mobile13%
Symbian48%
iPhone11%
iPhone Symbian Windows Mobile Blackberry Palm Linux
Palm2%
Blackberry3%
Win Mo6%
Symbian7%
Java ME8%
Android9% iPhone
65%
Mobile DevicesBy Internet Usage
April 2009
iPhone Android Java ME Symbian Win Mo Blackberry Palm
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
<meta name="viewport" content="width=device-width, user-scalable=no initial-scale = 1.0" />
<link rel="apple-touch-icon" href="/my_custom_icon.png"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<body onorientationchange="myOrientationChangeFunction()">
<meta name="format-detection" content="telephone=no" />
Useful <meta> tags
window.navigator.standalone read-only JavaScript Boolean if window is currently in fullscreen mode
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Has no effect unless launched from home screen link
Can be set to translucent to hide the status bar
<meta name="apple-mobile-web-app-capable" content="yes" />
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="className='fade-away';">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
touchstartHappens every time a finger is placed on the screen
touchendHappens every time a finger is removed from the screen
touchmoveHappens as a finger already placed on the screen is moved across the screen
touchcancel
Gesture Events
gesturestartSent when two or more fingers touch the surface
gesturechangeSent when fingers are moved during a gesture
gestureendSent 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 PatternsCommon designs. Mimicking behaviors in native iPhone applications
Offline Web Applications
Offline Applications
Offline Cache Manifests
Using the local storage DB
<html manifest="demo.manifest">
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
Offline Cache-Manifests
Blurring BoundariesWeb 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:@"AddressBook"];
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 Resourceshttp://webkit.org/blog/ http://devloper.apple.com/
http://blog.joshschumacher.com
top related