GETTING READY FOR THE SMARTPHONE

A BIT OF MOBILE DEVICE HISTORY

STATE OF THE SMARTPHONE MARKET

SmartPhone Handset Market

Nok

ia

Resea

rch

In M

otio

n

Apple

HTC

Sam

sung

Oth

ers

Tota

l0.00

40,000.0080,000.00

120,000.00

Global Market 2008In Millions

Global Market 2008

http://apple20.blogs.fortune.cnn.com/2009/03/12/iphone-sales-grew-245-in-2008-gartner/

SmartPhone Market Penetration

40.8

19.510.7

4.3

4.2

20.5

Global Market 2008(Percentage)

Nokia

Research In Motion

Apple

HTC

Samsung

Others

http://apple20.blogs.fortune.cnn.com/2009/03/12/iphone-sales-grew-245-in-2008-gartner/

WEB DEVELOPMENT FOR THE SMARTPHONE

What You’ll NeedApple OR Windows

PlatformLinuxFlash CS4 or CS3Adobe Device CentralEclipse/IntelliSense/

Dreamweaver/etc.Adobe Flex SDKAndroid APIiPhone SDKJ2ME SDK (Blackberry)

WebkitChromeFireFox

Firebug and countless other free add-on/extensions

Willing mobile device donor!

DEVELOPING FOR THE MOBILE FLASH PLAYER

Adobe Device CentralNokia 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!

Adobe Device CentralMany 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

Adobe Device CentralSwappable playback

controlsNew devices

available on a regular basis

Content can also be generated from AfterEffectsCaptivateIllustratorPhotoshop

Adobe Device CentralBiggest advantage for Adobe Device

Central development:Familiarity with design/development toolsHundreds of Mobile Phones and PDAs!Nintendo WiiSony PSPSony PS3Eventually the Android devices

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

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

iPhone DevelopmentThe 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 CSSAny code editor can be your gateway to iPhone Apps!

iPhone DevelopmentDocumentation is still

sparse…but that hasn’t stopped 30K applications from flooding the Apps Store!

Note that the mobile Safari browser has a different standardized hardware specification

480-by-320-pixel resolution at 163 ppi

All video content must be .m4v or .mov encoded for H.264 video – no FLVs

3G network on ATT is still erratic

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="viewport" content="width=device-width" />

CSS Settings <!--[if !IE]>-->

<link rel="stylesheet" href="small-screen.css" type="text/css" media="only screen and (max-device-width: 480px)" /> <!--<![endif]-->

http://www.sitepoint.com/article/iphone-development-12-tips/

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/

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/

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="apple-touch-icon" href="http://www.example.com/my-filename.png" />

http://www.sitepoint.com/article/iphone-development-12-tips/

Blackberry PlatformThe Blackberry platform is a

different breed of smartphone.Applications are built with J2METouch 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.

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

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

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

Android ( the Google Platform)Like the iPhone,

Android can also use standard HTML, JavaScript and CSS.

There are more than a dozen Android-based devices expected to be on the US market by the years end.

Many of the newer Intel Adamo-based netbooks are expected to run Android instead of Windows.

Not tethered to one carrier and already devices announced for T-Mobile, Sprint, Verizon, and ATT.

Android ( the Google Platform)Adobe and Google

have pledged support for the full Flash Player – eventually!

JavaFX is also an upcoming possibility and Sun is actively porting their IDE to the Android

Many industry analysts see the Android platform as the greatest threat to the Blackberry’s market share.

WHERE DO WE GO FROM HERE?!?

THANKS!Q/A Time