Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,905 views

Published on

Intro to iPhone Development from right after iPhoneDevCamp

Published in: Technology, News & Politics
  • 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

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/

×