Advanced iPhone Web Development - Josh Schumacher: A PHP Developer
Transcript of Advanced iPhone Web Development - Josh Schumacher: A PHP Developer
![Page 1: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/1.jpg)
Advanced iPhone Web DevelopmentJosh Schumacher
Treemo Labs
email: [email protected]
web: http://blog.joshschumacher.com
![Page 2: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/2.jpg)
Mobile Smartphone Market Share
Q4 2008
Linux8%
Palm1%
Blackberry20%
Windows Mobile13%
Symbian48%
iPhone11%
iPhone Symbian Windows Mobile Blackberry Palm Linux
![Page 3: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/3.jpg)
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
![Page 4: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/4.jpg)
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
![Page 5: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/5.jpg)
Meta Tags
![Page 6: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/6.jpg)
<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
![Page 7: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/7.jpg)
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" />
![Page 8: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/8.jpg)
Webkit CSS Extensions
![Page 9: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/9.jpg)
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
![Page 10: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/10.jpg)
Getting Really Fancy
Gradients
Masks
Reflections
Transitions
Animations
Transforms
![Page 11: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/11.jpg)
Gradients (Coming Soon to iPhone)
background:
-webkit-gradient( linear, left top, left bottom, from(#333), color-stop(0.8, #bbb), to(#333));
![Page 12: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/12.jpg)
CSS Transitions
.fade-away { opacity: 0; -webkit-transition: opacity 1s ease-out 20ms;}
<p onclick="className='fade-away';">Click Me To Fade Away</p>
![Page 13: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/13.jpg)
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;}
![Page 14: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/14.jpg)
Webkit DOM Extensions
![Page 15: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/15.jpg)
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.
![Page 16: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/16.jpg)
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
![Page 17: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/17.jpg)
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)
![Page 18: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/18.jpg)
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.
![Page 19: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/19.jpg)
Design Patterns
![Page 20: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/20.jpg)
Use Common Design PatternsCommon designs. Mimicking behaviors in native iPhone applications
![Page 21: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/21.jpg)
Offline Web Applications
![Page 22: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/22.jpg)
Offline Applications
Offline Cache Manifests
Using the local storage DB
![Page 23: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/23.jpg)
<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
![Page 24: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/24.jpg)
Blurring BoundariesWeb Apps as Native Apps
![Page 25: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/25.jpg)
Utilize UIWebView inside of your native Applications
Rapid Development
Ship updates w/o Apple Approval
Expand potential developer base
Easier porting to other devices
![Page 26: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/26.jpg)
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.
![Page 27: Advanced iPhone Web Development - Josh Schumacher: A PHP Developer](https://reader035.fdocuments.in/reader035/viewer/2022071523/613d02c20c37c14a830d10dc/html5/thumbnails/27.jpg)
Helpful Resourceshttp://webkit.org/blog/ http://devloper.apple.com/
http://blog.joshschumacher.com