iPhone Web Applications Development - Prabhu

10,874 views

Published on

Prabhu's presentation made at MoMo Chennai, on Developing Web Applications for iPhone.

Published in: Technology, News & Politics
1 Comment
27 Likes
Statistics
Notes
  • Check out Apple's New iPod nano with Multi-Touch Product Review
    http://www.slideshare.net/Zanura/i-pod-nano-multi-touch-review
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
10,874
On SlideShare
0
From Embeds
0
Number of Embeds
235
Actions
Shares
0
Downloads
0
Comments
1
Likes
27
Embeds 0
No embeds

No notes for slide

iPhone Web Applications Development - Prabhu

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

×