iPhone Web Applications Development - Prabhu

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

1 comments

Comments 1 - 1 of 1 previous next Post a comment

  • + guestd5aec42 guestd5aec42 2 years ago
    v nice way of telling

    keep it up

    venkat

    9840682147
Post a comment
Embed Video
Edit your comment Cancel

19 Favorites

iPhone Web Applications Development - Prabhu - Presentation 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=\"stylesheet\" media=\"only screen and (max-device- width:480px)“ href=“url” />
  10. Get started (Contd) • Set Viewport meta tag <meta name=\"viewport\" content=\"width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;\">
  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?

+ desistartupsdesistartups, 2 years ago

custom

6536 views, 19 favs, 3 embeds more stats

Prabhu's presentation made at MoMo Chennai, on Deve more

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 6536
    • 6315 on SlideShare
    • 221 from embeds
  • Comments 1
  • Favorites 19
  • Downloads 0
Most viewed embeds
  • 138 views on http://www.widgity.com
  • 80 views on http://prabhu.wordpress.com
  • 3 views on http://static.slidesharecdn.com

more

All embeds
  • 138 views on http://www.widgity.com
  • 80 views on http://prabhu.wordpress.com
  • 3 views on http://static.slidesharecdn.com

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories