Web or SDK Development

2,203 views

Published on

Chris Allen - Web or SDK Development. Non Game App Dev Track 360|iDev San Jose '09

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

No Downloads
Views
Total views
2,203
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
59
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Web or SDK Development

  1. 1. March 2009 iPhone in Action: Web Development or SDK? Christopher Allen Tuesday, March 3, 2009
  2. 2. Christopher Allen Tuesday, March 3, 2009
  3. 3. manning.com/callen Tuesday, March 3, 2009
  4. 4. iPhone in Action: Web Development or SDK? Tuesday, March 3, 2009
  5. 5. iPhone in Action: Web Development or SDK? Tuesday, March 3, 2009
  6. 6. iPhone in Action: Web Development or SDK? There are two ways that you can program for the iPhone, using web development tools and using the SDK Tuesday, March 3, 2009
  7. 7. iPhone in Action: Web Development or SDK? There are two ways that you can program for the iPhone, using web development tools and using the SDK Web development leverages internet technologies Tuesday, March 3, 2009
  8. 8. iPhone in Action: Web Development or SDK? There are two ways that you can program for the iPhone, using web development tools and using the SDK Web development leverages internet technologies The iPhone SDK leverage the full power of the iPhone and years of Apple’s development experience Tuesday, March 3, 2009
  9. 9. iPhone in Action: Web Development or SDK? Tuesday, March 3, 2009
  10. 10. iPhone in Action: Web Development or SDK? The iPhone’s 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” Many custom WebKit functions Tuesday, March 3, 2009
  11. 11. iPhone in Action: Web Development or SDK? Additional Mobile Safari features: Tuesday, March 3, 2009
  12. 12. turning it into a wackybox class: -webkit-transform: rotate(30deg) translate(5%,5%); iPhone in Action: The result is that your news article appears at an angle, moved somewhat off the Figure 4.2 shows this change, which you can compare to the nontransformed new Web Development or SDK? that appears a few pages back as figure 4.1. This particular transform isn’t that you want people to read it, but it could be a nice background for a news site or something similar. There are many other Additional Mobile Safarido with transforms, things that you can features: Webkit CSS Transforms such as setting up banners, printing text at a variety of sizes, and making similar changes on static web pages. Some will be gimmicks, but others can have func- tional benefits. Before we leave transforms behind, we’ll note that they support one other property, –webkit-transform-origin, which can be used to move the origin for scales and skews away from the center of the object. Although you can do quite a bit with transforms all on their own, their real power appears when you start working with the implicit animation of transi- Tuesday, March 3, 2009
  13. 13. Discussions on this topic are scattered across the internet, alongside individuals’ solutions for them. At the time of writing, none of the library solutions were compre- hensive enough for us to recommend them here, but take a look around if you need text in your Canvas object and you don’t want to write the routines yourself. iPhone in Action: With that disappointment behind us, we’re going to finish our look at Canvas by seeing how to put it all together. 6.8 Putting it together Web Development or SDK? Having shown lots of stand-alone Canvas methods, we’ll now show how a variety of shapes can be painted onto a single Canvas object. Figure 6.9 includes a pair of screenshots that show off most of the Canvas functionality that we’ve discussed. Additional Mobile Safari features: Webkit CSS Transforms Canvas - Scalable Vector Graphics Figure 6.9 Canvas allows for a wide variety of shapes to be created from a small set of primitives, as this combination of images, patterns, curves, and shapes shows. Tuesday, March 3, 2009
  14. 14. iPhone in Action: Web Development or SDK? 69 Recognizing touches and gestures The results are shown in figure 4.4, which as you can Additional Mobile Safari the WebKit CSS ele- see make good use of some of features: ments that we highlighted earlier, showing off the great Webkit CSS Transforms functionality that the WebKit provides you with. The JavaScript Scalable Vector Graphics Canvas - database is the last WebKit element that you can make use of on SQLite Storagecan also Database - Local the iPhone, but it be used more broadly. The last couple of items that we’ll discuss are instead iPhone specific. Adjusting the chrome In the previous chapter we showed you some simple methods for dealing with the iPhone chrome. We explained how to scroll the URL bar and noted that the status bar and the bottom bar could not be changed. Using the WebKit, you have slightly more control over things, provided that your user is using iPhone OS 2.1 or higher. All you need to do is enter a new metatag on Figure 4.4 Data retrieved from a Tuesday, your web app’s home page: March 3, 2009
  15. 15. iPhone in Action: Web Development or SDK? touchStart Additional Mobile Safari features: touchMove Webkit CSS Transforms touchEnd Canvas - Scalable Vector Graphics touchCancel Database - Local SQLite Storage gestureStart Touch Events gestureChange gestureEnd changedTouches targetTouches touches orientation rotation scale Tuesday, March 3, 2009
  16. 16. iPhone in Action: Web Development or SDK? 69 Recognizing touches and gestures The results are shown in figure 4.4, which as you can Additional Mobile Safari the WebKit CSS ele- see make good use of some of features: ments that we highlighted earlier, showing off the great Webkit CSS Transforms functionality that the WebKit provides you with. The JavaScript Scalable Vector Graphics Canvas - database is the last WebKit element that you can make use of on SQLite Storagecan also Database - Local the iPhone, but it be used more broadly. The last couple of items that Touch Events we’ll discuss are instead iPhone specific. Hide Mobile Safari’s Chrome Adjusting the chrome In the previous chapter we showed you some simple methods for dealing with the iPhone chrome. We explained how to scroll the URL bar and noted that the status bar and the bottom bar could not be changed. Using the WebKit, you have slightly more control over things, provided that your user is using iPhone OS 2.1 or higher. All you need to do is enter a new metatag on Figure 4.4 Data retrieved from a Tuesday, your web app’s home page: March 3, 2009
  17. 17. iPhone in Action: Web Development or SDK? The iPhone SDK features: Same Mach kernel and Core OS as Macintosh Tuesday, March 3, 2009
  18. 18. iPhone in Action: Web Development or SDK? The iPhone SDK features: Same Mach kernel and Core OS as Macintosh Most of the same Core Services as Macintosh Tuesday, March 3, 2009
  19. 19. iPhone in Action: Web Development or SDK? The iPhone SDK features: Same Mach kernel and Core OS as Macintosh Most of the same Core Services as Macintosh Most of functionality available to Apple’s iPhone apps Tuesday, March 3, 2009
  20. 20. iPhone in Action: Web Development or SDK? The iPhone SDK features: Same Mach kernel and Core OS as Macintosh Most of the same Core Services as Macintosh Most of functionality available to Apple’s iPhone apps Cocoa Touch with UIKit Tuesday, March 3, 2009
  21. 21. iPhone in Action: Web Development or SDK? The iPhone SDK features: Same Mach kernel and Core OS as Macintosh Most of the same Core Services as Macintosh Most of functionality available to Apple’s iPhone apps Cocoa Touch with UIKit Objective C and C++ compiler Tuesday, March 3, 2009
  22. 22. iPhone in Action: Web Development or SDK? The iPhone SDK features: Same Mach kernel and Core OS as Macintosh Most of the same Core Services as Macintosh Most of functionality available to Apple’s iPhone apps Cocoa Touch with UIKit Objective C and C++ compiler Interface Builder with UIKit templates Tuesday, March 3, 2009
  23. 23. iPhone in Action: Web Development or SDK? The iPhone SDK features: Same Mach kernel and Core OS as Macintosh Most of the same Core Services as Macintosh Most of functionality available to Apple’s iPhone apps Cocoa Touch with UIKit Objective C and C++ compiler Interface Builder with UIKit templates Great debugging and profiling Tuesday, March 3, 2009
  24. 24. iPhone in Action: Web Development or SDK? Tuesday, March 3, 2009
  25. 25. iPhone in Action: Web Development or SDK? Web Development Advantages Tuesday, March 3, 2009
  26. 26. iPhone in Action: Web Development or SDK? Same Advantages as in 2007 Tuesday, March 3, 2009
  27. 27. iPhone in Action: Web Development or SDK? Web Development Advantages Simplicity Tuesday, March 3, 2009
  28. 28. iPhone in Action: Web Development or SDK? Web Development Advantages Simplicity Easier then using low-level C Tuesday, March 3, 2009
  29. 29. iPhone in Action: Web Development or SDK? Web Development Advantages Simplicity Easier then using low-level C Languages are dynamic Tuesday, March 3, 2009
  30. 30. iPhone in Action: Web Development or SDK? Web Development Advantages Simplicity Easier then using low-level C Languages are dynamic No memory management Tuesday, March 3, 2009
  31. 31. iPhone in Action: Web Development or SDK? Web Development Advantages Simplicity Easier then using low-level C Languages are dynamic No memory management Display of data is easy Tuesday, March 3, 2009
  32. 32. iPhone in Action: Web Development or SDK? Web Development Advantages Simplicity Easier then using low-level C Languages are dynamic No memory management Display of data is easy Deployment is an upload Tuesday, March 3, 2009
  33. 33. iPhone in Action: Web Development or SDK? Web Development Advantages Simplicity Easier then using low-level C Languages are dynamic No memory management Display of data is easy Deployment is an upload Easy to use Tuesday, March 3, 2009
  34. 34. iPhone in Action: Web Development or SDK? Web Development Advantages Simplicity Dynamism Tuesday, March 3, 2009
  35. 35. iPhone in Action: Web Development or SDK? Web Development Advantages Simplicity Dynamism Update functionality anytime Tuesday, March 3, 2009
  36. 36. iPhone in Action: Web Development or SDK? Web Development Advantages Simplicity Dynamism Update functionality anytime Easy to fix bugs Tuesday, March 3, 2009
  37. 37. iPhone in Action: Web Development or SDK? Web Development Advantages Simplicity Dynamism Update functionality anytime Easy to fix bugs Give users the latest data Tuesday, March 3, 2009
  38. 38. iPhone in Action: Web Development or SDK? Web Development Advantages Simplicity Dynamism Globalized Tuesday, March 3, 2009
  39. 39. iPhone in Action: Web Development or SDK? Web Development Advantages Simplicity Dynamism Globalized Part of global network Tuesday, March 3, 2009
  40. 40. iPhone in Action: Web Development or SDK? Web Development Advantages Simplicity Dynamism Globalized Part of global network One program for iPhone and desktop Tuesday, March 3, 2009
  41. 41. iPhone in Action: Web Development or SDK? Web Development Advantages Simplicity Dynamism Globalized Part of global network One program for iPhone and desktop Access to rest of web Tuesday, March 3, 2009
  42. 42. iPhone in Action: Web Development or SDK? Web Development Advantages Simplicity Dynamism Globalized Part of global network One program for iPhone and desktop Access to rest of web Connected to everyone Tuesday, March 3, 2009
  43. 43. iPhone in Action: Web Development or SDK? Multiple Platforms Tuesday, March 3, 2009
  44. 44. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Tuesday, March 3, 2009
  45. 45. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Great depth of functionality Tuesday, March 3, 2009
  46. 46. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Great depth of functionality Superior development environment Tuesday, March 3, 2009
  47. 47. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Great depth of functionality Superior development environment Deeper access to internals Tuesday, March 3, 2009
  48. 48. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Great depth of functionality Superior development environment Deeper access to internals Camera, accelerometers, GPS, gestures, contacts, photos Tuesday, March 3, 2009
  49. 49. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Great depth of functionality Superior development environment Deeper access to internals Camera, accelerometers, GPS, gestures, contacts, photos Better graphics and 3D Tuesday, March 3, 2009
  50. 50. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Accessibility Tuesday, March 3, 2009
  51. 51. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Accessibility Always available Tuesday, March 3, 2009
  52. 52. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Accessibility Always available Functions without net Tuesday, March 3, 2009
  53. 53. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Accessibility Always available Functions without net Cache data Tuesday, March 3, 2009
  54. 54. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Accessibility Always available Functions without net Cache data Native speed Tuesday, March 3, 2009
  55. 55. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Accessibility Always available Functions without net Cache data Native speed Private Tuesday, March 3, 2009
  56. 56. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Accessibility Monetization Tuesday, March 3, 2009
  57. 57. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Accessibility Monetization Easy to sell through App Store Tuesday, March 3, 2009
  58. 58. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Accessibility Monetization Easy to sell through App Store Does not depend on advertisements or subscriptions Tuesday, March 3, 2009
  59. 59. iPhone in Action: Web Development or SDK? Tuesday, March 3, 2009
  60. 60. iPhone in Action: Web Development or SDK? Both development approaches have their advantages. Tuesday, March 3, 2009
  61. 61. iPhone in Action: Web Development or SDK? Both development approaches have their advantages. You want to take advantage of each programming methods strengths and use it when appropriate. Tuesday, March 3, 2009
  62. 62. iPhone in Action: Web Development or SDK? Both development approaches have their advantages. You want to take advantage of each programming methods strengths and use it when appropriate. Don’t blindly just use the SDK or the Web because you're more comfortable with it. Tuesday, March 3, 2009
  63. 63. iPhone in Action: Web Development or SDK? Tuesday, March 3, 2009
  64. 64. iPhone in Action: Web Development or SDK? There are options to combine both approaches and thus play to their strengths Tuesday, March 3, 2009
  65. 65. iPhone in Action: Web Development or SDK? There are options to combine both approaches and thus play to their strengths Mirrored Development Tuesday, March 3, 2009
  66. 66. iPhone in Action: Web Development or SDK? There are options to combine both approaches and thus play to their strengths Mirrored Development Mixed Development Tuesday, March 3, 2009
  67. 67. iPhone in Action: Web Development or SDK? There are options to combine both approaches and thus play to their strengths Mirrored Development Mixed Development Client-Server Development Tuesday, March 3, 2009
  68. 68. iPhone in Action: Web Development or SDK? Tuesday, March 3, 2009
  69. 69. iPhone in Action: Web Development or SDK? Mirrored Development Write a free web version as well a more fully featured SDK version Tuesday, March 3, 2009
  70. 70. iPhone in Action: Web Development or SDK? Mirrored Development apnews.com & Mobile News App Tuesday, March 3, 2009
  71. 71. iPhone in Action: Web Development or SDK? Tuesday, March 3, 2009
  72. 72. iPhone in Action: Web Development or SDK? Mixed Development Write different parts of a program suite via different means Tuesday, March 3, 2009
  73. 73. iPhone in Action: Web Development or SDK? Mixed Development google.com/reader & Maps App Tuesday, March 3, 2009
  74. 74. iPhone in Action: Web Development or SDK? Tuesday, March 3, 2009
  75. 75. iPhone in Action: Web Development or SDK? Client-Server Development Link in to web software through the SDK Tuesday, March 3, 2009
  76. 76. iPhone in Action: Web Development or SDK? Mirrored Development Showtimes App & Gifts App Tuesday, March 3, 2009
  77. 77. iPhone in Action: Web Development or SDK? Tuesday, March 3, 2009
  78. 78. iPhone in Action: Web Development or SDK? Seven kinds of iPhone development Tuesday, March 3, 2009
  79. 79. iPhone in Action: Web Development or SDK? Seven kinds of iPhone development iPhone Compatible Web Tuesday, March 3, 2009
  80. 80. iPhone in Action: Web Development or SDK? Seven kinds of iPhone development iPhone Compatible Web iPhone Friendly Web Tuesday, March 3, 2009
  81. 81. iPhone in Action: Web Development or SDK? Seven kinds of iPhone development iPhone Compatible Web iPhone Friendly Web iPhone Optimized Web Tuesday, March 3, 2009
  82. 82. iPhone in Action: Web Development or SDK? Seven kinds of iPhone development iPhone Compatible Web iPhone Friendly Web iPhone Optimized Web iPhone Web Apps Tuesday, March 3, 2009
  83. 83. iPhone in Action: Web Development or SDK? Seven kinds of iPhone development iPhone Compatible Web iPhone Friendly Web iPhone Optimized Web iPhone Web Apps Dashcode Web Tuesday, March 3, 2009
  84. 84. iPhone in Action: Web Development or SDK? Seven kinds of iPhone development iPhone Compatible Web iPhone Friendly Web iPhone Optimized Web iPhone Web Apps Dashcode Web Native Apps SDK Tuesday, March 3, 2009
  85. 85. iPhone in Action: Web Development or SDK? Seven kinds of iPhone development iPhone Compatible Web iPhone Friendly Web iPhone Optimized Web iPhone Web Apps Dashcode Web Native Apps SDK SDK Client App w/Web Server Tuesday, March 3, 2009
  86. 86. iPhone in Action: Web Development or SDK? Web App Exemplars google.com/reader Tuesday, March 3, 2009
  87. 87. iPhone in Action: Web Development or SDK? Web App Exemplars iphone.facebook.com Tuesday, March 3, 2009
  88. 88. iPhone in Action: Web Development or SDK? Web App Exemplars hahlo.com Tuesday, March 3, 2009
  89. 89. iPhone in Action: Web Development or SDK? Web App Exemplars apnews.com Tuesday, March 3, 2009
  90. 90. iPhone in Action: Web Development or SDK? Web App Exemplars 101cookbooks.com/iphonerecipes Tuesday, March 3, 2009
  91. 91. Resources Tuesday, March 3, 2009
  92. 92. iPhone in Action: Web Development or SDK? iPhone Dev Center developer.apple.com/iphone/ Tuesday, March 3, 2009
  93. 93. iPhone in Action: Web Development or SDK? Web Apps Dev Center developer.apple.com/webapps Tuesday, March 3, 2009
  94. 94. iPhone in Action: Web Development or SDK? iPhoneWebDev iPhoneWebDev.com Tuesday, March 3, 2009
  95. 95. iPhone in Action: Web Development or SDK? Tuesday, March 3, 2009
  96. 96. iPhone in Action: Web Development or SDK? iUI Framework iui.googlecode.com Tuesday, March 3, 2009
  97. 97. iPhone in Action: Web Development or SDK? iUI Framework iui.googlecode.com Navigation windows from JSON objects Tuesday, March 3, 2009
  98. 98. iPhone in Action: Web Development or SDK? iUI Framework iui.googlecode.com Navigation windows from JSON objects Navigational objects using canvas UI tags for speed Tuesday, March 3, 2009
  99. 99. iPhone in Action: Web Development or SDK? iUI Framework iui.googlecode.com Navigation windows from JSON objects Navigational objects using canvas UI tags for speed Handles phone rotation events Tuesday, March 3, 2009
  100. 100. iPhone in Action: Web Development or SDK? iUI Framework iui.googlecode.com Navigation windows from JSON objects Navigational objects using canvas UI tags for speed Handles phone rotation events Supports XmlHttpRequest Tuesday, March 3, 2009
  101. 101. iPhone in Action: Web Development or SDK? iUI Framework iui.googlecode.com Navigation windows from JSON objects Navigational objects using canvas UI tags for speed Handles phone rotation events Supports XmlHttpRequest A great iPhone user experience Tuesday, March 3, 2009
  102. 102. iPhone in Action: Web Development or SDK? iUI Framework iui.googlecode.com Navigation windows from JSON objects Navigational objects using canvas UI tags for speed Handles phone rotation events Supports XmlHttpRequest A great iPhone user experience 1.8KB with gzip and Dojo shrinksafe Tuesday, March 3, 2009
  103. 103. iPhone in Action: Web Development or SDK? iUI Framework iui.googlecode.com Navigation windows from JSON objects Navigational objects using canvas UI tags for speed Handles phone rotation events Supports XmlHttpRequest A great iPhone user experience 1.8KB with gzip and Dojo shrinksafe Moviesapp.com written in 5 hours... Tuesday, March 3, 2009
  104. 104. iPhone in Action: Web Development or SDK? moviesapp.com using iUI Tuesday, March 3, 2009
  105. 105. iPhone in Action: Web Development or SDK? SQLite Safari tinyurl.com/sqlitesafari Tuesday, March 3, 2009
  106. 106. iPhone in Action: Web Development or SDK? DashCode Tuesday, March 3, 2009
  107. 107. iPhone in Action: Web Development or SDK? Dashcode Development Tuesday, March 3, 2009
  108. 108. iPhone in Action: Web Development or SDK? TouchCode (json,xml,rss,...) touchcode.googlecode.com Tuesday, March 3, 2009
  109. 109. iPhone in Action: Web Development or SDK? Tuesday, March 3, 2009
  110. 110. iPhone in Action: Web Development or SDK? iPhone In Action: Introduction to Web & SDK Development manning.com/iphoneinaction Tuesday, March 3, 2009
  111. 111. iPhone in Action: Web Development or SDK? iPhone In Action: Introduction to Web & SDK Development manning.com/iphoneinaction Oriented for web developers Tuesday, March 3, 2009
  112. 112. iPhone in Action: Web Development or SDK? iPhone In Action: Introduction to Web & SDK Development manning.com/iphoneinaction Oriented for web developers Topics: Creating web apps optimized for the iPhone with Canvas, WebKit, and iUI Tuesday, March 3, 2009
  113. 113. iPhone in Action: Web Development or SDK? iPhone In Action: Introduction to Web & SDK Development manning.com/iphoneinaction Oriented for web developers Topics: Creating web apps optimized for the iPhone with Canvas, WebKit, and iUI Learning about the iPhone native SDK Tuesday, March 3, 2009
  114. 114. iPhone in Action: Web Development or SDK? iPhone In Action: Introduction to Web & SDK Development manning.com/iphoneinaction Oriented for web developers Topics: Creating web apps optimized for the iPhone with Canvas, WebKit, and iUI Learning about the iPhone native SDK Programming with Cocoa Touch's UIKit Tuesday, March 3, 2009
  115. 115. iPhone in Action: Web Development or SDK? iPhone In Action: Introduction to Web & SDK Development manning.com/iphoneinaction Oriented for web developers Topics: Creating web apps optimized for the iPhone with Canvas, WebKit, and iUI Learning about the iPhone native SDK Programming with Cocoa Touch's UIKit Building apps that delve into the iPhone's toolbox Tuesday, March 3, 2009
  116. 116. iPhone in Action: Web Development or SDK? iPhone In Action: Introduction to Web & SDK Development manning.com/iphoneinaction Oriented for web developers Topics: Creating web apps optimized for the iPhone with Canvas, WebKit, and iUI Learning about the iPhone native SDK Programming with Cocoa Touch's UIKit Building apps that delve into the iPhone's toolbox Blending web & iPhone SDK development Tuesday, March 3, 2009
  117. 117. iPhone in Action: Web Development or SDK? iPhone In Action: Introduction to Web & SDK Development manning.com/iphoneinaction Oriented for web developers Topics: Creating web apps optimized for the iPhone with Canvas, WebKit, and iUI Learning about the iPhone native SDK Programming with Cocoa Touch's UIKit Building apps that delve into the iPhone's toolbox Blending web & iPhone SDK development Available Now in Print & PDF Tuesday, March 3, 2009
  118. 118. iPhone in Action: Web Development or SDK? iPhone In Action: Introduction to Web & SDK Development manning.com/iphoneinaction Oriented for web developers Topics: Creating web apps optimized for the iPhone with Canvas, WebKit, and iUI Learning about the iPhone native SDK Programming with Cocoa Touch's UIKit Building apps that delve into the iPhone's toolbox Blending web & iPhone SDK development Available Now in Print & PDF Updates and Blog at iphoneinaction.manning.com Tuesday, March 3, 2009
  119. 119. <mailto:ChristopherA@manning.com> Tuesday, March 3, 2009

×