iPhone Web Apps
                   Introduction for Developers




Source http://www.flickr.com/photos/eschipul/743621029/
iPhoneDevCamp
San Francisco July 3-5 2007




          Source http://www.flickr.com/photos/eschipul/743092489/
Source: http://www.flickr.com/photos/eschipul/764938378/
Outline

1. Capabilities of the iPhone
2. Design Practices for Web (standards)
3. iPhone specific design principles




   ...
1) Capabilities
Connectivity


• EDGE = AT&T’s network for the iPhone
• WiFi - iPhone supports wifi
• Hack can activate phone for WiFi only
Input Device
• Input Device = Two Fingers
• Two Fingers <> Mouse




          http://developer.apple.com/iphone/designing...
Input Methods
• Double tap = Zoom in or Center Blocks
• Touch and hold = Display Info Bubble
• Drag = Move the viewport
• ...
Negatives of Input

• No copy/paste! WT_?
• Density of links is an issue
• Double taps to blocks depends on html
     (DIV...
Source Chris Messina http://www.flickr.com/photos/factoryjoe/763838307/
Note Changed Size




Source Chris Messina http://www.flickr.com/photos/factoryjoe/763838307/
My Opinion


• ZOOMING GETS OLD. FAST. REALLY.
2) Design Practices


• Perfect Size to Watch Charlie by WiFI
Standards Based Dev

• HTML 4.0.1
• XHTML 1.0
• CSS 2.1 and Partial CSS 3.xx
• Javascript 1.4 including DOM support
• AJAX...
Think Windowless

• viewport <> windows
         there are no stinkin’ windows!
• automatic scaling
         apple knows b...
Avoid

• Avoid W i d e Blocks of Text
• Avoid using html to resize images
• Avoid framesets
• Legacy CSS and JavaScript (s...
Does NOT Support

• No: WML (wireless markup language)
• No: Flash files
• No: Downloads
• No: Files over 10 Megs
• No: Ima...
Use

• Stick with the standards
• Separate HTML, CSS & JavaScript
• Columns and Blocks
• Has full PDF file support
• Did I ...
iPhone Specific Design
Be Specific With Design

• You CAN render pages specific to iPhone
• user_agent for iPhone = safari:
 • Mozilla/5.0
    (iPh...
iPhone App Links

• Tel: <a href=”tel:1-408-555-1212”>
• Mail: <a href=”mailto:foo@bar.com”>
• Maps: <a href=”http://maps....
iPhone StyleSheet

• <link media=”only screen and (max-device-
  width: 480px)” href=”iPhone.css”
  type=”text/css” rel=”s...
Rich Media

• Streams movies and audio using HTTP
• EDGE and Wi-Fi networks
• Servers must support byte-range requests
• N...
Best Practices

• Use “Poster JPGs” - link image to movie
• 480 x 320 pixels
• Pay Attention to Bit Rate
• Reference Movie...
Limits

• 10 MB File Size Limit
• Javascript
 • 5 second limit per each top level entry
• Limited Media Types (see guide)
Tips

• Hold “sleep” (top) to power off
• Hold “home” (front) and “sleep” (top)
  buttons at the same time for 8 seconds t...
Accessorize!




• Damien’s $1200 GPS iPhoneAddOn

                          Source: http://www.flickr.com/photos/eschipul/...
Developer Tools
• Aptana - like visual interdev but with AJAX
  framework support and an iPhone plugin




               ...
Developer Notes


• Icons: icon pngs are 59x60 pixels drop
  shadow
source: http://www.flickr.com/photos/eschipul/750755295/
Developer Resources
• Apple iPhone Dev Guide:
 • http://developer.apple.com/iphone/
    designingcontent.html
• www.iphone...
Conclusion
• New Device = New Emergent Best
  Practices
• Fingers are NOT the same as mice
• WiFi is a big factor for the ...
Closing Thoughts


• This presentation was completed on the
  Monday after iPhoneDevCamp. Please keep
  in mind that thing...
Thanks!

• Ed Schipul
 • Co: www.schipul.com
 • Blog: brandtobedetermined.com
 • Flickr: www.flickr.com/photos/eschipul/
 •...
Upcoming SlideShare
Loading in …5
×

I Phone Developer Introduction By Eschipul

6,263 views
5,894 views

Published on

Intro to iPhone Development from right after iPhoneDevCamp

Published in: Technology, News & Politics
1 Comment
3 Likes
Statistics
Notes
  • Interesting slide. You've shared information clearly and concisely. It's one of my favorites. Seek your permission to embed it to my site at www.sprintringtones.org/ .

    Anita Gomez .
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
6,263
On SlideShare
0
From Embeds
0
Number of Embeds
956
Actions
Shares
0
Downloads
386
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

I Phone Developer Introduction By Eschipul

  1. iPhone Web Apps Introduction for Developers Source http://www.flickr.com/photos/eschipul/743621029/
  2. iPhoneDevCamp San Francisco July 3-5 2007 Source http://www.flickr.com/photos/eschipul/743092489/
  3. Source: http://www.flickr.com/photos/eschipul/764938378/
  4. Outline 1. Capabilities of the iPhone 2. Design Practices for Web (standards) 3. iPhone specific design principles source: http://developer.apple.com/iphone/designingcontent.html
  5. 1) Capabilities
  6. Connectivity • EDGE = AT&T’s network for the iPhone • WiFi - iPhone supports wifi • Hack can activate phone for WiFi only
  7. Input Device • Input Device = Two Fingers • Two Fingers <> Mouse http://developer.apple.com/iphone/designingcontent.html
  8. Input Methods • Double tap = Zoom in or Center Blocks • Touch and hold = Display Info Bubble • Drag = Move the viewport • Flick = Scroll up or down • Pinch open = zoom in • Pinch out = zoom out
  9. Negatives of Input • No copy/paste! WT_? • Density of links is an issue • Double taps to blocks depends on html (DIV, OL, UL, TABLE, IMAGE)
  10. Source Chris Messina http://www.flickr.com/photos/factoryjoe/763838307/
  11. Note Changed Size Source Chris Messina http://www.flickr.com/photos/factoryjoe/763838307/
  12. My Opinion • ZOOMING GETS OLD. FAST. REALLY.
  13. 2) Design Practices • Perfect Size to Watch Charlie by WiFI
  14. Standards Based Dev • HTML 4.0.1 • XHTML 1.0 • CSS 2.1 and Partial CSS 3.xx • Javascript 1.4 including DOM support • AJAX technologies, inc XMLHTTPRequest
  15. Think Windowless • viewport <> windows there are no stinkin’ windows! • automatic scaling apple knows better than you silly rabbit!
  16. Avoid • Avoid W i d e Blocks of Text • Avoid using html to resize images • Avoid framesets • Legacy CSS and JavaScript (slow!)
  17. Does NOT Support • No: WML (wireless markup language) • No: Flash files • No: Downloads • No: Files over 10 Megs • No: Images over 2 Megs (some tricks?)
  18. Use • Stick with the standards • Separate HTML, CSS & JavaScript • Columns and Blocks • Has full PDF file support • Did I mention Columns and Blocks?
  19. iPhone Specific Design
  20. Be Specific With Design • You CAN render pages specific to iPhone • user_agent for iPhone = safari: • Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Geck0) Version/3.0 Mobile/1A543a Safari/419.3
  21. iPhone App Links • Tel: <a href=”tel:1-408-555-1212”> • Mail: <a href=”mailto:foo@bar.com”> • Maps: <a href=”http://maps.google.com/ maps?q=houston”> (uses google app)
  22. iPhone StyleSheet • <link media=”only screen and (max-device- width: 480px)” href=”iPhone.css” type=”text/css” rel=”stylesheet” /> • Other browsers ignore “only screen” part
  23. Rich Media • Streams movies and audio using HTTP • EDGE and Wi-Fi networks • Servers must support byte-range requests • No Flash / No Downloads • No streaming
  24. Best Practices • Use “Poster JPGs” - link image to movie • 480 x 320 pixels • Pay Attention to Bit Rate • Reference Movies • More: http://developer.apple.com/quicktime/quicktimeintro/tools/ • or the iPhone Developers Guide
  25. Limits • 10 MB File Size Limit • Javascript • 5 second limit per each top level entry • Limited Media Types (see guide)
  26. Tips • Hold “sleep” (top) to power off • Hold “home” (front) and “sleep” (top) buttons at the same time for 8 seconds to hard reset • youTube is NOT a specific app for iPhone and not the “real” youtube. Learn from this.
  27. Accessorize! • Damien’s $1200 GPS iPhoneAddOn Source: http://www.flickr.com/photos/eschipul/748489927/
  28. Developer Tools • Aptana - like visual interdev but with AJAX framework support and an iPhone plugin Source: http://www.aptana.com/
  29. Developer Notes • Icons: icon pngs are 59x60 pixels drop shadow
  30. source: http://www.flickr.com/photos/eschipul/750755295/
  31. Developer Resources • Apple iPhone Dev Guide: • http://developer.apple.com/iphone/ designingcontent.html • www.iphonewebdev.com • http://groups.google.com/group/ iphonewebdev • http://barcamp.org/iPhoneDevCamp
  32. Conclusion • New Device = New Emergent Best Practices • Fingers are NOT the same as mice • WiFi is a big factor for the iPhone • EDGE still is kinda-lame, but it works • Developers need to train on new standards
  33. Closing Thoughts • This presentation was completed on the Monday after iPhoneDevCamp. Please keep in mind that things will change and update accordingly. M’kay? - Thanks!
  34. Thanks! • Ed Schipul • Co: www.schipul.com • Blog: brandtobedetermined.com • Flickr: www.flickr.com/photos/eschipul/ • Twitter: twitter.com/eschipul/

×