iPhone Web Development

2,274 views

Published on

This presentation was giving to the Omaha Ruby on Rails user group June 3, 2009.

Published in: Technology, News & Politics
3 Comments
8 Likes
Statistics
Notes
  • Checkout
    http://www.slideshare.net/SojoSolutions/generate-revenue-from-my-i-phone-app
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • good job
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Check out Apple's New iPod nano with Multi-Touch Product Review
    http://www.slideshare.net/Zanura/i-pod-nano-multi-touch-review
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,274
On SlideShare
0
From Embeds
0
Number of Embeds
62
Actions
Shares
0
Downloads
0
Comments
3
Likes
8
Embeds 0
No embeds

No notes for slide
  • Who’s new to rails?
    Who’s done a tutorial or two and beggs to use but still uses crappy java?
    Who has done anything with the iPhone SDK?
    Who owns an iPhone?






  • Stuff you should already know.
  • What do you guys know about Safari?
    Webkit? KDE? Used on many other browsers?



  • Webkit is a fork of KHTML, but didn’t start that way. Apple build their own to become webkit.
    Began work somewhere after KDE 2.
    WebCore and JavascriptCore are open sourced under GNU


  • Features that matter to developers and designers
    So lets talk about some of those features.
  • Features that matter to developers and designers
    So lets talk about some of those features.










  • Flash - we will *never* see it
  • Flash - we will *never* see it

  • Happy iPhone is a happy user. - you care about your users right?
    Design is crucial to a happy user.



























  • iPhone Web Development

    1. 1. iPhone and Ruby on Rails Web Development for the iPhone is still relevant.
    2. 2. Agenda Safari Browser iPhone Web-App Development Overview Ruby on Rails Demo Finish-up
    3. 3. Hi, I’m Andy
    4. 4. Hi, I’m Andy I’m an iPhone Developer
    5. 5. Hi, I’m Andy I’m an iPhone Developer
    6. 6. Hi, I’m Andy I’m an iPhone Developer Ninth Division
    7. 7. Hi, I’m Andy I’m an iPhone Developer Ninth Division Build applications one the Apple Platforms.
    8. 8. Safari Web Browser
    9. 9. Desktop and Mobile
    10. 10. Desktop and Mobile
    11. 11. Browsers Evolved
    12. 12. Browser History
    13. 13. Konqueror Timeline
    14. 14. Konqueror Timeline Version 1 Version 2 1996 October 23, 2000 Version 4 2008 Switch to KHTML
    15. 15. Webkit Timeline www.webkit.org
    16. 16. Webkit Timeline www.webkit.org New Javascript Engine June 2, 2008 Begin work Safari first adaption 2002 October 23, 2000 Open Source June 7, 2005 HTML 5 Email to KDE Move from Nov 2007 mailing list from KTHML Apple to Webkit Dec. 2005
    17. 17. Safari Timeline
    18. 18. Safari Timeline Version 1 2003 Version 2 2005 Version 3 2007 Version 4 2009 Steve Announces Mac OSX 10.4 Mac OSX 10.6 Mac OSX Mac OSX 10.5 10.2 & 10.3
    19. 19. Safari Browser Features Mobile Desktop AJAX HTML 5 CSS 3 Offline Storage Developer Tools * Effects / Media * different per browser
    20. 20. Safari Browser Features Mobile Desktop AJAX HTML 5 CSS 3 Offline Storage Developer Tools * Effects / Media * different per browser
    21. 21. Safari Browser Features Mobile Desktop AJAX HTML 5 CSS 3 Offline Storage Developer Tools * Effects / Media * different per browser
    22. 22. Developer Tools
    23. 23. Developer Tools
    24. 24. Developer Tools
    25. 25. Developer Tools (2)
    26. 26. Developer Tools (2)
    27. 27. Developer Tools (2)
    28. 28. Developer Tools (2)
    29. 29. CSS
    30. 30. CSS
    31. 31. CSS
    32. 32. CSS
    33. 33. CSS
    34. 34. CSS
    35. 35. CSS
    36. 36. Want more CSS Recipes? Then Go Here
    37. 37. Excitement Safari Mobile Location Aware Better Offline Storage Flash Player Copy / Paste
    38. 38. Excitement Safari Mobile Location Aware Better Offline Storage Flash Player Copy / Paste
    39. 39. Excitement Safari Mobile Location Aware Better Offline Storage Flash Player Copy / Paste
    40. 40. iPhone Web Development
    41. 41. Design Gotchas Thumbs - no pointer In and out of network coverage Thumbs usually 44x44 pixels iPhone / Standard style sheet [ provide both ]. Mouse pointer 12x12 pixels App or Webpage? Less screen size
    42. 42. Design Pointers Simplify the interface as much as you can. Tell user what is happening. Consistent design Interruptions Use the phone!
    43. 43. What doesn’t work. Javascript mouseover, mouseout, :hover and tooltips onkeydown, onkeypress, onkeyup, No streaming of files Files less than 10MB Javascript must execute in 5 seconds Safari support GZIP! Framesets will make your life hell.
    44. 44. General Notes Optimize Throw out your Javascript/CSS frameworks. Load your site in fragments. I love the iPhone too, but remember there are others. When you are done optimizing, optimize your site more
    45. 45. Human Interface Guidelines One of the most important documents as an iPhone developer - native and web.
    46. 46. Human Interface Guidelines One of the most important documents as an iPhone developer - native and web.
    47. 47. Human Interface Guidelines One of the most important documents as an iPhone developer - native and web. Download it here later
    48. 48. iPhone SDK Timeline “All you need is the Web Browser” - Steve
    49. 49. iPhone SDK Timeline “All you need is the Web Browser” - Steve iPhone Announced Jan. 2007 iPhone SDK March 2008 iPhone Available iPhone 2 Public June 2007 July 2008 SDK is Webkit Open First Fart Closed Beta App Freak out
    50. 50. Safari Mobile Examples Weather Underground TA-DA List Flickr.com Twitter.com
    51. 51. Dashcode.app Honestly, I hate it.
    52. 52. Webkit Embedded Not going to talk much about this, but just so you know... you can embed the core of safari in your native iPhone App.
    53. 53. iUI http://code.google.com/p/iui/ “We will rock your world when you want to build a native looking iPhone web application”
    54. 54. CiUI http://code.google.com/p/ciui-dev/ “We are iUI with a slightly different design”
    55. 55. Tools needed iPhone SDK iPhoney Your iPhone or iPod-Touch
    56. 56. Apple Developer Connection Let’s all create an account
    57. 57. Safari / iPhone Development Center Did Andy show you these links?
    58. 58. Ruby on Rails
    59. 59. Code. No slides for this section. ;-)
    60. 60. Cocoa User Group Focus on Cocoa and Cocoa-touch .... but include: Mac, iPhone, iPhone-web, Mac- web, XCode, Interface Builder, Safari
    61. 61. Open Debate lets start a flame war.

    ×