Intro to iPhone Development from right after iPhoneDevCamp

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/