Your SlideShare is downloading. ×
iPhone Web Applications Development - Prabhu
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

iPhone Web Applications Development - Prabhu

10,472
views

Published on

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

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,472
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
27
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 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. iPhone Friendly Websites • Examples
  • 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. Not supported • Flash • Java • Embedded Audio/Video • Drag and Drop • File upload • JS execution > 5 sec • Html > 10 Mb
  • 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. 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. 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. 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. 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. 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. 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. Any framework? • Use iUi (http://code.google.com/p/iui/) • Simply include iUi.css and iUi.js in your html!
  • 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. Examples • Canvas and “iPhone-like” UI elements.
  • 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. 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. 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. 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. 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. Few native apps
  • 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. Thanks! Q&A Anyone?