Keynote presentation from the IE Tech Summit on 5/15/09

1. GETTING READY FOR THE
SMARTPHONE

2. A BIT OF MOBILE DEVICE
HISTORY

3. STATE OF THE SMARTPHONE
MARKET

4. SmartPhone Handset Market
Global Market 2008
In Millions
140,000.00
120,000.00
100,000.00
80,000.00
60,000.00
40,000.00
20,000.00
0.00 Global Market 2008
http://apple20.blogs.fortune.cnn.com/2009/03/12/iphone-sales-grew-245-in-2008-gartne

5. SmartPhone Market Penetration
Global Market 2008
(Percentage)
Nokia
Research In Motion
20.5
40.8 Apple
4.2
4.3 HTC
10.7 Samsung
19.5 Others
http://apple20.blogs.fortune.cnn.com/2009/03/12/iphone-sales-grew-245-in-2008-gartne

6. WEB DEVELOPMENT FOR THE
SMARTPHONE

7. What You’ll Need
 Apple OR Windows  Webkit
Platform  Chrome
 Linux  FireFox
 Flash CS4 or CS3  Firebug and countless
 Adobe Device Central other free add-
on/extensions
 Eclipse/IntelliSense/
Dreamweaver/etc.
 Willing mobile device
 Adobe Flex SDK donor!
 Android API
 iPhone SDK
 J2ME SDK (Blackberry)

8. DEVELOPING FOR THE MOBILE
FLASH PLAYER

9. Adobe Device Central
 Nokia has added both FlashLite and the full Flash
player to many of it’s US and International handsets.
 Designers and Developers have been using Flash to
create mobile apps for many years now.
 The advantage is that the Flash environment can be
easily re-skinned to work with many proprietary
mobile browsers.
 It’s among the easiest and most versatile of
development platforms
 So far Apple’s still has no love for Adobe!

10. Adobe Device Central
 Many of the device browsers only support Flash
Lite or Flash 5/6 playback.
 AS1-esque coding is back on the menu
 Easy for non-coders, but limiting and counter-
intuitive for AS3 coders.
 Bandwidth restrictions have to monitored

11. Adobe Device Central
 Swappable playback
controls
 New devices available
on a regular basis
 Content can also be
generated from
 AfterEffects
 Captivate
 Illustrator
 Photoshop

12. Adobe Device Central
 Biggest advantage for Adobe Device Central
development:
 Familiarity with design/development tools
 Hundreds of Mobile Phones and PDAs!
 Nintendo Wii
 Sony PSP
 Sony PS3
 Eventually the Android devices

13. Adobe AIR
 Adobe AIR applications are NOT
mobile devices apps!
 BUT, they are small apps that can be
rapidly developed and easily
adapted to a mobile device
 AIR applications are essentially the
same idea as the
Apple, Windows, and Yahoo
Widgets
 Desktop applications that offer a
blend of traditional installed app
features with rich internet content
 They can be developed using
Flex, ActionScript and Flash media.
 They can also be entirely coded with
HTML and AJAX!
 They are also a great way to develop
a “starter” application

14. WRITE ONCE – RUN ANYWHERE
Or why I learned to fall in love with HTML and JavaScript all over again.

15. iPhone Development
 The biggest drawback to the iPhone/iPod Touch as a
platform is that their SDK is a closed-source platform
 You have to use OSX and they expect you to use Cocoa
and Objective-C to take advantage of the bells and
whistles
 The gestures, accelerometer, and multi-touch features.
 However, Safari for the iPhone and iTouch is based on
the WebKit browser source.
 It supports JavaScript, HTML, and CSS
 Any code editor can be your gateway to iPhone Apps!

16. iPhone Development
 Documentation is still  480-by-320-pixel
sparse…but that hasn’t resolution at 163 ppi
stopped 30K  All video content must
applications from be .m4v or .mov
flooding the Apps encoded for H.264
Store! video – no FLVs
 Note that the mobile  3G network on ATT is
Safari browser has a still erratic
different standardized
hardware specification

17. iPhone Development
 By default, Safari on the iPhone will render your page as if it was a desktop browser on
a big screen, with 980 pixels width available for the web content.
 Metadata
 <meta name=quot;viewportquot; content=quot;width=device-widthquot; />
 CSS Settings
 <!--[if !IE]>-->
 <link
 rel=quot;stylesheetquot;
 href=quot;small-screen.cssquot;
 type=quot;text/cssquot;
 media=quot;only screen and (max-device-width: 480px)quot;
 />
 <!--<![endif]-->
http://www.sitepoint.com/article/iphone-development-12-tips/

18. iPhone Development
 Orientation Changes
 Using JavaScript you can access the
property window.orientation, which
can have these values:
 0—normal portrait orientation
(home button is at the bottom)
 -90—landscape after clockwise
rotation from portrait (home button
to the left)
 90—landscape after
counterclockwise rotation from
portrait (home button to the right)
 180—unsupported for now, but
would be portrait-flipped so that the
home button is at the top
http://www.sitepoint.com/article/iphone-development-12-tips/

19. iPhone SDK
 Gestures
 On the iPhone, gestures are two-finger actions: scaling (zoom in and zoom out)
and rotation.
 It’s possible to use those events to also handle gestures such as zoom and pan.
But for this purpose, there are more convenient gesture events. You can listen to
the following events:
 gesturestart
 gestureend
 gesturechange
window.addEventListener('load', function() {
var b = document.getElementById('box'),
bstyle = b.style;
b.addEventListener('gesturechange', function(event) {
event.preventDefault();
bstyle.webkitTransform = 'scale(' + event.scale + ') ' +
'rotate('+ event.rotation + 'deg)';
}, false);
}, false);
http://www.sitepoint.com/article/iphone-development-12-tips/

20. iPhone Development
The Home Icon
 When a user adds your page to the Home
screen, the iPhone will use a screenshot of your
page as an icon. But you can do better by
providing your own icon.
 To do this, create a PNG file with dimensions 57 x
57px, name it apple-touch-icon.png, and put it in
the root of your web server, just like you would
with a favicon—and you’re done. The iPhone will
automatically add the glossy effect and rounded
corners—no need to try to recreate this on your
own!
 HTML Head info
<link rel=quot;apple-touch-iconquot;
href=quot;http://www.example.com/my-
filename.pngquot; />
http://www.sitepoint.com/article/iphone-development-12-tips/

21. Blackberry Platform
 The Blackberry platform is a different
breed of smartphone.
 Applications are built with J2ME
 Touch and gesture-driven UI is now
available with the Blackberry Storm
 Older Blackberry devices may not read
HTML, and pages must be encoded in
WML.

22. Blackberry Platform
BB OS 4.0 and the Blackberry
Storm Emulator
 Full support for
HTML, JavaScript, and CSS
 Most of the development
tweaks boil down to
changing display
dimensions
 Bandwidth tethered to the
3g network

23. Blackberry Platform
BB OS 4.0 and the Blackberry
Storm Emulator
 Full support for
HTML, JavaScript, and CSS
 Most of the development
tweaks boil down to
changing display
dimensions
 Bandwidth tethered to the
3g network

24. Android (the Google Platform)
 Designers Beware!!!
 Android is Java and XML-based and
is easy to pick up if you already
understand AS3 OOP principles.
 It’s a bit trickier for the non-coders.
 Development tools are open-source.
 Primarily, Eclipse with Android Dev
Tools (AD) is used for development
 http://www.eclipse.org/
 You can also use the Adobe Flex
Builder application which is based
on Eclipse.
 https://freeriatools.adobe.com/flex

25. Android ( the Google Platform)
 Like the  Many of the newer
iPhone, Android can Intel Adamo-based
also use standard netbooks are expected
HTML, JavaScript and to run Android instead
CSS. of Windows.
 There are more than a  Not tethered to one
dozen Android-based carrier and already
devices expected to be devices announced for
on the US market by T-
the years end. Mobile, Sprint, Verizon
, and ATT.

26. Android ( the Google Platform)
 Adobe and Google have  Many industry analysts
pledged support for the see the Android
full Flash Player – platform as the greatest
eventually! threat to the
 JavaFX is also an Blackberry’s market
upcoming possibility share.
and Sun is actively
porting their IDE to the
Android

27. WHERE DO WE GO FROM
HERE?!?

28. THANKS!
Q/A Time