iPhone Web Apps

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 source: http://developer.apple.com/iphone/designingcontent.html 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/designingcontent.html 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 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) 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 technologies, inc XMLHTTPRequest Think Windowless • viewport <> windows • automatic scaling there are no stinkin’ windows! apple knows better than you silly rabbit! Avoid • Avoid W i d e Blocks of Text • Avoid using html to resize images • Avoid framesets • Legacy CSS and JavaScript (slow!) 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?) Use • Stick with the standards • Separate HTML, CSS & JavaScript • Columns and Blocks • Has full PDF file support • Did I mention Columns and Blocks? iPhone Specific Design 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 iPhone App Links • Tel: • Mail: • Maps: (uses google app) iPhone StyleSheet • • Other browsers ignore “only screen” part 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 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 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 to hard reset and not the “real” youtube. Learn from this. • youTube is NOT a specific app for iPhone Accessorize! • Damien’s $1200 GPS iPhoneAddOn Source: http://www.flickr.com/photos/eschipul/748489927/ Developer Tools • Aptana - like visual interdev but with AJAX framework support and an iPhone plugin Source: http://www.aptana.com/ 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.iphonewebdev.com • http://groups.google.com/group/ iphonewebdev • http://barcamp.org/iPhoneDevCamp 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 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! Thanks! • Ed Schipul • Co: www.schipul.com • Blog: brandtobedetermined.com • Flickr: www.flickr.com/photos/eschipul/ • Twitter: twitter.com/eschipul/