iPhone Web Development
Prabhu
prabhu@prabhu-s.com

Newbie questions
• Can iPhone display normal html pages?
– Yes
• Then why do I need this session?

Non-iPhone Friendly Website
• Example

Problems with non-iPhone
friendliness?
• Links are very close to each other.
– Can’t tap correctly with a finger.
• Non-usable unless the page is zoomed.

iPhone Friendly Websites
• Examples

Know your iPhone
• Has desktop-class Web Browser – Safari/419.3
(Almost Safari 3)
• (X) HTML and Canvas
• CSS 2.1 and limited CSS 3
• AJAX
• PDF, Doc & Quicktime
• Upto 8 virtual tabs
• New firmware 1.1.3 supports Bookmarklets – tiny
icons of your website (exact view) on the Home
Screen.

Not supported
• Flash
• Java
• Embedded Audio/Video
• Drag and Drop
• File upload
• JS execution > 5 sec
• Html > 10 Mb

Levels of iPhone support
• iPhone Compatible – No flash, use
quicktime
• iPhone Friendly – Simple CSS fixes
• iPhone Optimized - Use only features
supported by safari.
• iPhone Webapps – Simulate native
applications.

Get started
• Detect iPhone in your html code
if (navigator.userAgent.indexOf('iPhone') != -1) {
//iPhone
}
else {
// Normal browser
}
• Use Different style sheet
<LINK rel=\"stylesheet\" media=\"only screen and (max-device-
width:480px)“ href=“url” />

Get started (Contd)
• Set Viewport meta tag
<meta name=\"viewport\" content=\"width=320; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;\">

Development Process
• Write normal html code.
• Follow guidelines in
http://developer.apple.com/iphone
• Use Safari for testing out your site.
Then test it in iPhone.
• iPhoney for mac (www.iphoney.com)
provides an iPhone emulator.

Integrate with Phone
• tel:9841405319 – Tap to call
• mailto:prabhu@prabhu-s.com – Email
• http://maps.google.com – Opens
Google Map
• http://www.youtube.com – Opens
Youtube

Emulate native apps
• Fix your stylesheet to match colors and
size of UI elements
• Every new page should appear with a
horizontal slide.
• Should not display blank page when the
page is getting loaded. (AJAX!)
• Example

How to code?
• Write a Javascript to do the sliding.
• Don’t display blank page. Always load a
page using AJAX.
• Before loading the page call the
Javascript for horizontal slide.

Any framework?
• Use iUi (http://code.google.com/p/iui/)
• Simply include iUi.css and iUi.js in your
html!

iUi Features
Nav Headers
Navigational Menus
• Build Nav headers using canvas tag
• Create Navigational menus from JSON
• Provides a more “iPhone-like”
experience to Web apps.

Examples
• Canvas and “iPhone-like” UI elements.

Canvas tag
• Canvas tag can be used to render
graphics or other visual images on the
fly.
• Example
• No documentation as to how much of
this functionality is supported by iPhone!

iPhone-like UI Element
Code for Toggle type Button
<div class=“toggle” toggled=“false”>
<span class=“toggleOn”>ON</span>
<span class=“toggleOff”>OFF</span>
</div>
Grouping of Elements
<fieldset>
<input type=“text” name=“userName”/>
// Other text fields
</fieldset>

Audio/Video support
• Audio – Mp3, aac
• Video – mov, mp4, m4v, 3gp
• Use reference movies
• Make sure your HTTP server supports
byte-range requests.
• Provide direct links to the contents.

Known Issues
• Mouse, Keyboard events
– Fire inconsistently
• Form events
– onsubmit, oninput fires inconsistently
• Zooming, dragging
– onfocus, onblur getting called
unnecessarily!
• window.onresize – very buggy

What about native apps?
• Apple supposed to release an official
SDK this month.
• Or Hack your phone and install the 3rd
party apps available.
– Process called as Jail Breaking!
• Languages like Python, Ruby already
ported!

Few native apps

What’s next?
• Join the iphoneindia google group
(http://groups.google.com/group/iphonei
ndia)
• Check out www.iphonewebdev.com
• How about iPhoneDevCamp in India?

Thanks!
Q&A Anyone?