The iPhone: What We Know, What We Don't Know
Upcoming SlideShare
Loading in...5
×
 

The iPhone: What We Know, What We Don't Know

on

  • 1,735 views

 

Statistics

Views

Total Views
1,735
Views on SlideShare
1,735
Embed Views
0

Actions

Likes
1
Downloads
20
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

The iPhone: What We Know, What We Don't Know The iPhone: What We Know, What We Don't Know Presentation Transcript

  • September 23rd, 2007 The iPhone: What We Know, What We Don’t Know Christopher Allen 1
  • Christopher Allen 2
  • The iPhone: What we Know 3
  • The iPhone: What We Know Essential Reading <http://developer.apple.com/iphone/> 4
  • The iPhone: What We Know Essential Reading <http://www.iPhoneWebDev.com/> 5
  • Three Safari’s 6
  • The iPhone: What We Know Mobile Safari “Desktop-Class” Web Browser Same on iPhone & iPod Touch Version Webkit/420+ Safari/419.3 Not quite Safari 3, but almost Performance similar to G3 Mac Many expect update with OSX 10.4 “Leopard” in November 7
  • The iPhone: What We Know Mobile Safari Features HTML 4.01 and XHTML 1.0 CSS 2.1 and some CSS 3 Full DOM Javascript 1.4 XMLHttpRequest thus support for AJAX Canvas PDF & Quicktime Up to 8 “tabs” 8
  • The iPhone: What We Know Not Supported Flash SVG Java applets Plug-in installation Embedded Video Custom x.509 certificates Drag & Drop Selection File Upload SOAP 9
  • The iPhone: What We Know Use Web Standards! 10
  • The iPhone: What We Know Follow Web Best Practices Separate HTML, CSS and Javascript Use well-structured and valid HTML Use columns and blocks no wide columns or text across page Avoid framesets Use CSS or iframes Size graphic elements appropriately don’t rely on browser scaling! Use small background images tile the pieces Don’t send unneeded data no 50K javascript where 10% is used 11
  • The iPhone: What We Know The Finger is Not a Mouse Fingers are bigger and blunter Links and buttons need to be larger Select 80px by 80px, with 20px of free space between 12
  • The iPhone: What We Know The Finger is Not a Mouse Fingers are bigger and blunter Links and buttons need to be larger Select 80px by 80px, with 20px of free space between Fingers can do more... Double tap Zoom in and center a block Touch and hold Display an information bubble One or Two-finder Drag Move the viewport or pan Flick Scroll up or down Pinch Zoom in or out 13
  • The iPhone: What We Know Design for Size 14
  • The iPhone: What We Know Be careful during user input 15
  • The iPhone: What We Know Use Columns 16
  • The iPhone: What We Know Use Small Blocks 17
  • The iPhone: What We Know Orientation a Problem 18
  • The iPhone: What We Know NY Times Portrait 19
  • The iPhone: What We Know NY Times Landscape 20
  • The iPhone: What We Know Viewports, not Windows 21
  • The iPhone: What We Know Viewports not Windows Use <meta name="viewport"/> Meta Tag defaults to width="980" may look good on NY Times, but probably not on your site simple (twice portrait) width="640" native portrait width="320"; initial-scale=”1.0”; maximum-scale=”1.0”; minimum- scale=”1.0”; native landscape “useful” width="480"; maximum-scale=”0.6667”; your mileage may vary—try, try again! 22
  • The iPhone: What We Know <body style="-webkit-text-size-adjust:none"> <body style="-webkit-text-size-adjust:auto"> <div style="-webkit-text-size-adjust:200%"> 23
  • The iPhone: What We Know Use tel:, mailto: & maps.google.com/maps? 24
  • The iPhone: What We Know PDF works 25
  • The iPhone: What We Know H.264 with AAC 26
  • The iPhone: What We Know Use Reference Movies 27
  • The iPhone: What We Know Identifying the iPhone Use CSS if possible iPhone <link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" /> not-iPhone <link media="screen" href="fancy.css" type="text/css" rel="stylesheet" /> bug: apple technique doesn’t work on IE - check iPhoneWebDev Use user-agent only as need if ((navigator.userAgent.indexOf ('Mobile') != -1 && ! (navigator.userAgent.indexOf ('Safari') != -1 {} 28
  • The iPhone: What We Know Working events window.onload formfield.onfocus formfield.onclick formfield.onblur formfield.onchange formfield.onmouseout formfield.onmouseover formfield.onmousedown * formfield.onmouseup form.onreset * triggered but not as expected Others of these may work oddly! 29
  • The iPhone: What We Know Non-functional events window.oncontextmenu window.onresize * (partial, buggy) window.onscroll window.onerror formfield.ondblclick formfield.onselect formfield.onkeydown formfield.onkeypress formfield.onkeyup form.onsubmit formfield.onmouseenter formfield.onmouseleave formfield.onmousemove document.onkeydown document.onkeypress document.onkeyup 30
  • The iPhone: What We Know Be aware, also no... window.showModalDialog() hover styles tool tips There may be di!ering event ordering and throttling of events mousedown, instead happens right before mouseup 31
  • The iPhone: What We Know Limit sizes HTML, CSS, Javascript <10MB don’t send unneeded Javascript Javascript execution <5 sec GIF, PNG, and TIFF up to 8 MB i.e width * height * 4 < 8 MB Animated GIF <2MB or only first frame shown JPG up to 128MB will be subsampled internally Non-streamed media <10MB 32
  • The iPhone: What we’ve Learned 33
  • The iPhone: What We’ve Learned FAQ <http://www.iPhoneWebDev.com/faq/> 34
  • The iPhone: What We’ve Learned Examples <http://www.iPhoneWebDev.com/examples/> 35
  • The iPhone: What We’ve Learned Examples viewport samples view source bookmarklet selecting di!erent keypads changing CSS on orientation change hiding the URL bar onload mailto: with arguments & html iPhone user-agent detection event testing 36
  • The iPhone: What We’ve Learned iUI Framework < http://www.joehewitt.com/iui/ > Navigation windows from JSON objects Navigational objects using canvas UI tags for speed Handles phone rotation events A great iPhone user experience 1.8KB with gzip and Dojo shrinksafe Moviesapp.com written in 5 hours... 37
  • The iPhone: What We Know moviesapp.com using iUi 38
  • The iPhone: What We’ve Learned Bugs & Workarounds viewportwindow.pageYO!set always 0 no workaround window.resize event irregular but there is hack around based on width second text entry fails to invoke keyboard hack using javascript, may be fixed in 1.0.2 tel: tags do not conform to RFC for p and w characters use non-conforming comma , bare images in safari render on 980px use new page User-scalable set to false prevents the magnifying loop on text input set maximum and minimum scale the same 39
  • The iPhone: What We’ve Learned Discussions Four kinds of iPhone web pages compatible, friendly, optimized, and web app Standard for an iPhone friendly icon for directory apps What qualities does an exemplar iPhone web app have? Two finger scrolling Development libraries Sound in iPhone web games Implementing the back button Type faces, type sizes Debugging javascript, FireBug Alpha/Beta testing new web apps 40
  • The iPhone: What we Don’t Know 41
  • The iPhone: What We Don’t Know Open Questions What Canvas support is available and how much can we do with it? How does the iPhone cache web pages and objects? What limits do we have for cookies? What limits do we have for bookmarks? How do we make two-finger scrolling widgets How to do animations faster size, direction, tricks? How best to use PDF and .doc SetInterval stops in background-what happens with AJAX in background? 42
  • The iPhone: What We Don’t Know Things we’d like to have window.onresize working so we stop using hack Ability to get/set scaling ratio More complete CCS 3 and Safari styles Turn o! spell checker Use the URL keyboard in forms An event for when the browser is interrupted by phone call Access to user data Persistent storage. How about Google Gears? OpenID for iPhone Native support for handling SOAP based web services like Mozilla's SOAPCall 43
  • The iPhone: What We Don’t Know Native Apps Not supported by Apple, but... Apple Exec Greg Joswiak said Apple takes “a neutral stance" on third-party iPhone applications. “Apple won't forcibly prevent developers from writing new apps for the handset, nor will it maliciously design software updates to break those apps.” NullRivers Install App < http://iphone.nullriver.com/beta/ > Installer / Jailbreak Package Manager 44
  • The iPhone: What We Don’t Know Some Native Apps Summerboard (extended manager) Open SSH iStumbler iIRCm LAMP apps (Apache, Perl, Python, etc.) Mobile Chat, Apollo IM Voice Notes NEZ and Z Game Emulators Many more 45
  • The iPhone: Upcoming Sessions Monday 10:10am: Dojo & Ajax 4:05pm: Building the iPhone with Adobe AIR 5:40pm: Build, customize and deploy iPhone Apps with the Etelos Ecosystem 6:35pm: Aptana IDE and the iPhone Tuesday 9:15am: Building an iPhone Application in 24 Hours: Behind-the-Scenes with Laszlo Systems 10:10am: Mobile AJAX, SVG, and the Future of the Web 4:05pm: From WAP to WOW. Developing a Web Service for the 46
  • <mailto:ChristopherA@iPhoneWebDev.com> 47