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. 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. 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
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. iPhone in Action:
Web Development or SDK?
Additional Mobile Safari features:
Tuesday, March 3, 2009
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. 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. 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. 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. 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. iPhone in Action:
Web Development or SDK?
The iPhone SDK features:
Same Mach kernel and Core OS as
Macintosh
Tuesday, March 3, 2009
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. 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. 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. 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. 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. 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
25. iPhone in Action:
Web Development or SDK?
Web Development Advantages
Tuesday, March 3, 2009
26. iPhone in
Action:
Web
Development
or SDK?
Same Advantages as in 2007
Tuesday, March 3, 2009
27. iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Tuesday, March 3, 2009
28. iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Easier then using low-level C
Tuesday, March 3, 2009
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. 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. 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. 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. 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. iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Dynamism
Tuesday, March 3, 2009
35. iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Dynamism
Update functionality anytime
Tuesday, March 3, 2009
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. 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. iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Dynamism
Globalized
Tuesday, March 3, 2009
39. iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Dynamism
Globalized
Part of global network
Tuesday, March 3, 2009
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. 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. 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. iPhone in
Action:
Web
Development
or SDK?
Multiple Platforms
Tuesday, March 3, 2009
44. iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Tuesday, March 3, 2009
45. iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Great depth of functionality
Tuesday, March 3, 2009
46. iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Great depth of functionality
Superior development
environment
Tuesday, March 3, 2009
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. 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. 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. iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Accessibility
Tuesday, March 3, 2009
51. iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Accessibility
Always available
Tuesday, March 3, 2009
52. iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Accessibility
Always available
Functions without net
Tuesday, March 3, 2009
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. 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. 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. iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Accessibility
Monetization
Tuesday, March 3, 2009
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. 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
60. iPhone in Action:
Web Development or SDK?
Both development approaches have
their advantages.
Tuesday, March 3, 2009
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. 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
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. 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. 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. 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
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. iPhone in
Action:
Web
Development
or SDK?
Mirrored Development
apnews.com & Mobile News App
Tuesday, March 3, 2009
78. iPhone in Action:
Web Development or SDK?
Seven kinds of iPhone development
Tuesday, March 3, 2009
79. iPhone in Action:
Web Development or SDK?
Seven kinds of iPhone development
iPhone Compatible Web
Tuesday, March 3, 2009
80. iPhone in Action:
Web Development or SDK?
Seven kinds of iPhone development
iPhone Compatible Web
iPhone Friendly Web
Tuesday, March 3, 2009
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. 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. 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. 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. 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. iPhone in
Action:
Web
Development
or SDK?
Web App Exemplars
google.com/reader
Tuesday, March 3, 2009
87. iPhone in
Action:
Web
Development
or SDK?
Web App Exemplars
iphone.facebook.com
Tuesday, March 3, 2009
88. iPhone in
Action:
Web
Development
or SDK?
Web App Exemplars
hahlo.com
Tuesday, March 3, 2009
89. iPhone in
Action:
Web
Development
or SDK?
Web App Exemplars
apnews.com
Tuesday, March 3, 2009
90. iPhone in
Action:
Web
Development
or SDK?
Web App Exemplars
101cookbooks.com/iphonerecipes
Tuesday, March 3, 2009
96. iPhone in Action:
Web Development or SDK?
iUI Framework
iui.googlecode.com
Tuesday, March 3, 2009
97. iPhone in Action:
Web Development or SDK?
iUI Framework
iui.googlecode.com
Navigation windows from JSON
objects
Tuesday, March 3, 2009
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. 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. 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. 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. 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. 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. iPhone in
Action:
Web
Development
or SDK?
moviesapp.com using iUI
Tuesday, March 3, 2009
105. iPhone in
Action:
Web
Development
or SDK?
SQLite Safari
tinyurl.com/sqlitesafari
Tuesday, March 3, 2009
106. iPhone in
Action:
Web
Development
or SDK?
DashCode
Tuesday, March 3, 2009
107. iPhone in
Action:
Web
Development
or SDK?
Dashcode Development
Tuesday, March 3, 2009
108. iPhone in
Action:
Web
Development
or SDK?
TouchCode (json,xml,rss,...)
touchcode.googlecode.com
Tuesday, March 3, 2009
110. iPhone in Action:
Web Development or SDK?
iPhone In Action:
Introduction to Web & SDK Development
manning.com/iphoneinaction
Tuesday, March 3, 2009
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. 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. 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. 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. 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. 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. 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. 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