July 7th, 2007




  The iPhone:
 What We Know,
What We Don’t Know
                        Christopher Allen

            ...
Christopher Allen
                    2
The iPhone:
What we Know

               3
The
iPhone:
What We
  Know

                Essential Reading
          <http://developer.apple.com/iphone/>

            ...
The
iPhone:
What We
  Know

               Essential Reading
          <http://www.iPhoneWebDev.com/>

                   ...
The
iPhone:
What We
  Know

          Use Web Standards

                              6
The iPhone:
                What We Know
Use Web Standards
  HTML 4.01
  XHTML 1.0
  CSS 2.1 and partial CSS 3.xx
  JavaSc...
The iPhone:
                  What We Know
Things to Avoid
  Flash
  SVG
  Java applets
  Plug-in installation
  Embedded ...
The iPhone:
                      What We Know
Follow Web Best Practices
  Separate HTML, CSS and Javascript
  Use well-st...
The iPhone:
                   What We Know
The Finger is Not a Mouse
  Fingers are bigger and blunter
    Links and butto...
The iPhone:
                       What We Know
The Finger is Not a Mouse
  Fingers are bigger and blunter
    Links and b...
The
iPhone:
What We
  Know

          Design for Size
                            12
The
iPhone:
What We
  Know

          Be careful during user input
                                         13
The
iPhone:
What We
  Know

          Use Columns

                        14
The
iPhone:
What We
  Know

          Use Small Blocks

                             15
The
iPhone:
What We
  Know

          Orientation a Problem
                                  16
The
iPhone:
What We
  Know

          NY Times Portrait

                              17
The
iPhone:
What We
  Know

          NY Times Landscape

                               18
The
iPhone:
What We
  Know

          Viewports, not Windows
                                   19
The iPhone:
                     What We Know
Viewports not Windows
 Use <meta                       Meta Tag
            ...
The
iPhone:
What We
  Know
          <body style=quot;-webkit-text-size-adjust:nonequot;>
          <body style=quot;-webk...
The
iPhone:
What We
  Know
            Use tel:, mailto: &
          maps.google.com/maps?
                               ...
The
iPhone:
What We
  Know

          PDF works

                      23
The
iPhone:
What We
  Know

          H.264 with AAC
                           24
The
iPhone:
What We
  Know

          Use Reference Movies
                                 25
The iPhone:
                  What We Know
Identifying the iPhone
  Use CSS if possible
    iPhone <link media=quot;only  ...
The iPhone:
                     What We Know
Working events
    window.onload
    formfield.onfocus
    formfield.onclick
 ...
The iPhone:
                   What We Know
Non-functional events
    window.oncontextmenu
    window.onresize * (partial,...
The iPhone:
                 What We Know
Be aware, also no...
  window.showModalDialog()
  hover styles
  tool tips
  mou...
The iPhone:
                    What We Know
Limit sizes
    HTML, CSS, Javascript <10MB
    don’t send unneeded Javascrip...
The iPhone:
What we’ve Learned

                     31
The
iPhone:
What We’ve
 Learned

                         Examples
             <http://www.iPhoneWebDev.com/examples/>


...
The iPhone:
           What We’ve Learned
Examples
 viewport samples
 view source bookmarklet
 selecting di!erent keypads
...
The iPhone:
            What We’ve Learned
Exemplars
  gasapp.com
  Joe Hewitt’s navigation demo
     movie.app (in 5 hour...
The iPhone:
              What We’ve Learned
Bugs & Workarounds
 viewportwindow.pageYO!set always 0
   no workaround
 wind...
The iPhone:
              What We’ve Learned
Discussions
  Four kinds of iPhone web pages
    compatible, friendly, optimi...
The
iPhone:
What We’ve
 Learned

                         Examples
             <http://www.iPhoneWebDev/examples.com/>


...
The iPhone:
What we Don’t Know

                     38
The
iPhone:
What We
Don’t Know

                      Open Questions
             <http://barcamp.org/iPhoneDevCampOpenQue...
The iPhone:
          What We Don’t Know
Open Questions
 What is the list CSS3 and how
 should we use it?
 What Canvas sup...
The iPhone:
                What We Don’t Know
Open Questions (continued)
  Without many events, how do we
  make ui widge...
The
iPhone:
What We
Don’t Know

                      Open Questions
             <http://barcamp.org/iPhoneDevCampOpenQue...
iPhoneDevCamp
   Hack-a-Thon

                 43
iPhone
DevCamp
Hack-a-Thon


              MacHack
              (b:1985 d:2003)

                                44
iPhoneDevCamp
               Hack-a-thon
Values
  Contribution
    assisting the commons
    o!ering value
    usefuless
 ...
iPhoneDevCamp
              Hack-a-thon
We may give out tickets or smaller
prizes for...
  best question on Open Questions...
iPhoneDevCamp
              Hack-a-thon
Diverse Teams
  Client coders (javascript)
  Server coders (PHP, Perl, Ruby,
  etc...
iPhone
DevCamp
Hack-a-Thon


              Signup by 1pm Sunday
                 <http://barcamp.pbwiki.com/
             ...
iPhone
DevCamp
Hack-a-Thon



              5 minutes!
                           49
iPhone
DevCamp
Hack-a-Thon           x2        x3



                Hack-a-Thon Demo &
              Contest, Sunday 2pm-...
<mailto:ChristopherA@iPhoneWebDev.com>


                                         51
Upcoming SlideShare
Loading in...5
×

iPhoneDevCamp Keynote

3,441

Published on

Christopher Allen's presentation at iPhoneDevCamp

Published in: Technology, News & Politics
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,441
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
108
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

iPhoneDevCamp Keynote

  1. 1. July 7th, 2007 The iPhone: What We Know, What We Don’t Know Christopher Allen 1
  2. 2. Christopher Allen 2
  3. 3. The iPhone: What we Know 3
  4. 4. The iPhone: What We Know Essential Reading <http://developer.apple.com/iphone/> 4
  5. 5. The iPhone: What We Know Essential Reading <http://www.iPhoneWebDev.com/> 5
  6. 6. The iPhone: What We Know Use Web Standards 6
  7. 7. The iPhone: What We Know Use Web Standards HTML 4.01 XHTML 1.0 CSS 2.1 and partial CSS 3.xx JavaScript 1.4, including DOM support AJAX technologies, including XMLHTTPRequest PDF Quicktime 7
  8. 8. The iPhone: What We Know Things to Avoid Flash SVG Java applets Plug-in installation Embedded Video Custom x.509 certificates 8
  9. 9. 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 9
  10. 10. 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 10
  11. 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 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 11
  12. 12. The iPhone: What We Know Design for Size 12
  13. 13. The iPhone: What We Know Be careful during user input 13
  14. 14. The iPhone: What We Know Use Columns 14
  15. 15. The iPhone: What We Know Use Small Blocks 15
  16. 16. The iPhone: What We Know Orientation a Problem 16
  17. 17. The iPhone: What We Know NY Times Portrait 17
  18. 18. The iPhone: What We Know NY Times Landscape 18
  19. 19. The iPhone: What We Know Viewports, not Windows 19
  20. 20. The iPhone: What We Know Viewports not Windows Use <meta Meta Tag name=quot;viewportquot;/> defaults to width=quot;480quot; may look good on NY Times, but probably not on your site simple (twice portrait) width=quot;640quot; native portrait width=quot;320quot;; initial-scale=”1.0”; maximum-scale=”1.0”; minimum- scale=”1.0”; user-scalable=”false” useful width=quot;480quot;; maximum-scale=”0.6667”; your mileage may vary—try, try again! 20
  21. 21. The iPhone: What We Know <body style=quot;-webkit-text-size-adjust:nonequot;> <body style=quot;-webkit-text-size-adjust:autoquot;> <div style=quot;-webkit-text-size-adjust:200%quot;> 21
  22. 22. The iPhone: What We Know Use tel:, mailto: & maps.google.com/maps? 22
  23. 23. The iPhone: What We Know PDF works 23
  24. 24. The iPhone: What We Know H.264 with AAC 24
  25. 25. The iPhone: What We Know Use Reference Movies 25
  26. 26. The iPhone: What We Know Identifying the iPhone Use CSS if possible iPhone <link media=quot;only screen and (max-device-width: 480px)quot; href=quot;iPhone.cssquot; type=quot;text/cssquot; rel=quot;stylesheetquot; /> not-iPhone <link media=quot;screenquot; href=quot;fancy.cssquot; type=quot;text/cssquot; rel=quot;stylesheetquot; /> bug: apple suggested doesn’t work on IE - workaround in progress Use user-agent only as need if(navigator.userAgent.indexOf ('iPhone') != -1) 26
  27. 27. 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! 27
  28. 28. 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 28
  29. 29. The iPhone: What We Know Be aware, also no... window.showModalDialog() hover styles tool tips mousedown, instead happens right before mouseup 29
  30. 30. 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 30
  31. 31. The iPhone: What we’ve Learned 31
  32. 32. The iPhone: What We’ve Learned Examples <http://www.iPhoneWebDev.com/examples/> 32
  33. 33. 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 iPhone user-agent detection event testing 33
  34. 34. The iPhone: What We’ve Learned Exemplars gasapp.com Joe Hewitt’s navigation demo movie.app (in 5 hours o! of nav) telemoose tada lists Soon to be Exemplars iPhone dragging 34
  35. 35. 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 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 35
  36. 36. 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 36
  37. 37. The iPhone: What We’ve Learned Examples <http://www.iPhoneWebDev/examples.com/> 37
  38. 38. The iPhone: What we Don’t Know 38
  39. 39. The iPhone: What We Don’t Know Open Questions <http://barcamp.org/iPhoneDevCampOpenQuestions> 39
  40. 40. The iPhone: What We Don’t Know Open Questions What is the list CSS3 and how should we use it? What Canvas support is available and how much can we do? How do we get the URL input panel? Are background pages executing? Do we know when the browser is interrupted by phone call? How do we get/set scaling ratio? A CSS3 media query that doesn’t break IE? Persistent storage - can we rely on cookies? Any Google Gears? 40
  41. 41. The iPhone: What We Don’t Know Open Questions (continued) Without many events, how do we make ui widgets How do we make two-finger scrolling widgets How to do animations faster size, direction, tricks? What does iSafari do when... opening .lnk, .web archives What does mail do when... receiving .vcf (vCard), .m3u, .url .lnk or .web archives How best to use PDF and .doc OpenID for iPhone? 41
  42. 42. The iPhone: What We Don’t Know Open Questions <http://barcamp.org/iPhoneDevCampOpenQuestions> 42
  43. 43. iPhoneDevCamp Hack-a-Thon 43
  44. 44. iPhone DevCamp Hack-a-Thon MacHack (b:1985 d:2003) 44
  45. 45. iPhoneDevCamp Hack-a-thon Values Contribution assisting the commons o!ering value usefuless Sharing helping others source code available Openness good questions open to people and ideas free or open source Fun & Cool! but we value simplicity & elegance 45
  46. 46. iPhoneDevCamp Hack-a-thon We may give out tickets or smaller prizes for... best question on Open Questions best answer on Open Questions travelled furthest most useless hack best looking worst looking best docs most fun 46
  47. 47. iPhoneDevCamp Hack-a-thon Diverse Teams Client coders (javascript) Server coders (PHP, Perl, Ruby, etc.) CSS/DHTML Artists User Interface/Experience Testing Documentation Hardware 47
  48. 48. iPhone DevCamp Hack-a-Thon Signup by 1pm Sunday <http://barcamp.pbwiki.com/ iPhoneDevCampHackAThon> 48
  49. 49. iPhone DevCamp Hack-a-Thon 5 minutes! 49
  50. 50. iPhone DevCamp Hack-a-Thon x2 x3 Hack-a-Thon Demo & Contest, Sunday 2pm-5pm 50
  51. 51. <mailto:ChristopherA@iPhoneWebDev.com> 51
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×