iPhone Web Applications Development - Prabhu

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=quot;stylesheetquot; media=quot;only screen and (max-device- width:480px)“ href=“url” />

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

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?

http://www.widgity.com	138
http://prabhu.wordpress.com	101
http://www.slideshare.net	51
http://static.slidesharecdn.com	3
http://ns3.apthost.com	1
http://translate.googleusercontent.com	1

iPhone Web Applications Development - Prabhu

by desistartups

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 295

Statistics

iPhone Web Applications Development - Prabhu Presentation Transcript