I Phone Developer Introduction By Eschipul

iPhone Web Apps Introduction for Developers Source http://www.ﬂickr.com/photos/eschipul/743621029/

iPhoneDevCamp San Francisco July 3-5 2007 Source http://www.ﬂickr.com/photos/eschipul/743092489/

Source: http://www.ﬂickr.com/photos/eschipul/764938378/

Outline 1. Capabilities of the iPhone 2. Design Practices for Web (standards) 3. iPhone speciﬁc design principles source: http://developer.apple.com/iphone/designingcontent.html

1) Capabilities

Connectivity • EDGE = AT&T’s network for the iPhone • WiFi - iPhone supports wiﬁ • 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.ﬂickr.com/photos/factoryjoe/763838307/

Note Changed Size Source Chris Messina http://www.ﬂickr.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 there are no stinkin’ windows! • automatic scaling 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 ﬁles • 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 ﬁle support • Did I mention Columns and Blocks?

iPhone Speciﬁc Design

Be Speciﬁc With Design • You CAN render pages speciﬁc 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: <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)

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

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 • youTube is NOT a speciﬁc app for iPhone and not the “real” youtube. Learn from this.

Accessorize! • Damien’s $1200 GPS iPhoneAddOn Source: http://www.ﬂickr.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.ﬂickr.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.ﬂickr.com/photos/eschipul/ • Twitter: twitter.com/eschipul/

http://canerican.wordpress.com	79
http://www.brandtobedetermined.com	22
http://blogs.chron.com	20
http://shoob.tumblr.com	11
http://www.slideshare.net	4
url_unknown	3
http://www.netvibes.com	2
http://www.schipul.com	2
http://kaosproject.seework.com	1
http://jurassicboy.wordpress.com	1

I Phone Developer Introduction By Eschipul

by Ed Schipul on Jul 10, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 145

Statistics

I Phone Developer Introduction By Eschipul — Presentation Transcript