Advanced iPhone Web Development

56 %
44 %
Information about Advanced iPhone Web Development

Published on May 6, 2009

Author: joshs633



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.

Advanced iPhone Web Development Josh Schumacher Treemo Labs email: web:

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%

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%

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

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; />

<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

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=quot;className='fade-away';quot;>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 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

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)

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 Patterns Common designs. Mimicking behaviors in native iPhone applications

Offline Web Applications

Offline Applications Offline Cache Manifests Using the local storage DB

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;>

Blurring Boundaries Web 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:@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.

Helpful Resources

#banner presentations

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Advanced iPhone Development -

Let's delve into advanced iPhone development tips and techniques that go beyond the ... Test an existing web site on the iPhone and make any minor tweaks ...
Read more

Advanced iPhone Web Development - Josh Schumacher

Yesterday (May 5th, 2009), I gave a presentation at the Seattle iPhone App Developers and Designers Meetup titled, “Advanced iPhone Web Development.”
Read more

Web Advanced - App Developer Profile - AppFutura

Web Advanced (app development Irvine). We are passionate about creating great user experiences across connected devices.
Read more

Advanced Web Development Training - Ascend Training

Create engaging professional websites with HTML5, CSS, and Javascript. Hands-on advanced web development training.
Read more

Tools - Safari for Developers - Apple Developer

Web Development Tools. Apple has brought its expertise in OS X and iOS development tools to the web. Safari includes Web Inspector, a powerful tool that ...
Read more

Bootstrap 3: Advanced Web Development |

Find answers to the most frequently asked questions about Bootstrap 3: Advanced Web Development . ... iPhone & iPad Android Windows 8 Desktop App. Connect
Read more

Certificate in Web and Mobile Applications Development ...

Advanced Web Application Development ... iPad/iPhone Application Development CS 646: You will learn to design and implement applications for iPhones and iPads.
Read more

iPhone Development: 12 Tips To Get You Started Article

Itching to get started with iPhone development? In this tutorial, Stoyan Stefanov introduces us to some tips and tricks you can use to kickstart your ...
Read more

Apple Developer

Apple Developer Program. One membership. All Platforms. Developer. Discover. macOS; iOS; watchOS; tvOS; Developer Program; Enterprise; Education; Design ...
Read more