advanced iphone web development - josh schumacher: a php developer

Advanced iPhone Web DevelopmentJosh Schumacher

Treemo Labs

email: [email protected]

web: http://blog.joshschumacher.com

mailto:[email protected]

mailto:[email protected]

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

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://webkit.org/blog/






advanced iphone web development - josh schumacher: a php developer

Documents