iPhone Web Applications Development - Prabhu
- 1. iPhone Web Development Prabhu prabhu@prabhu-s.com
- 2. Newbie questions • Can iPhone display normal html pages? – Yes • Then why do I need this session?
- 3. Non-iPhone Friendly Website • Example
- 6. 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.
- 7. iPhone Friendly Websites • Examples
- 10. 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.
- 11. Not supported • Flash • Java • Embedded Audio/Video • Drag and Drop • File upload • JS execution > 5 sec • Html > 10 Mb
- 12. 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.
- 13. 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” />
- 14. 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;>
- 15. 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.
- 16. 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
- 17. 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
- 20. 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.
- 21. Any framework? • Use iUi (http://code.google.com/p/iui/) • Simply include iUi.css and iUi.js in your html!
- 22. 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.
- 23. Examples • Canvas and “iPhone-like” UI elements.
- 24. 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!
- 25. 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>
- 26. 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.
- 27. Known Issues • Mouse, Keyboard events – Fire inconsistently • Form events – onsubmit, oninput fires inconsistently • Zooming, dragging – onfocus, onblur getting called unnecessarily! • window.onresize – very buggy
- 28. 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!
- 29. Few native apps
- 30. 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?