Mobile App DevelopmentFrom a Web Developer’s Perspective

Who the heck am I?And what gives me the right to act asthough I know what I’m talking about?

Chris Morrellhttp://cmorrell.com/

@inxilpro

PhillyNewMediaHub.com

Today’s Mobile Technology

Today’s Mobile Technology

•High-speed Internet

•Edge/3G: 100 Kbps–1.5 Mbps

•Wifi: 10+ Mbps

•Significant processor speeds

•Significant graphical capabilities

•Touch interfaces

Today’s Mobile Technology

WebKit

Today’s Mobile Technology

WebKit

These guys use WebKit too!

Web App vs. Native App

Web App vs. Native App

• Easy to develop

• Don’t require approval

• Maintained centrally

• Not on App Store

• Limited to HTML/CSS/JavaScript capabilities

Web App

• Better UI

• More powerful

• More control

• Access to GPU

• Costly to develop

• Requires approval

• Easy to develop

• Don’t require approval

• Maintained centrally

• Not on App Store

• Limited to HTML/CSS/JavaScript capabilities

Web App vs. Native AppWeb App Native App

• Better UI

• More powerful

• More control

• Access to GPU

• Costly to develop

• Requires approval

• Easy to develop

• Don’t require approval

• Maintained centrally

• Not on App Store

• Limited to HTML/CSS/JavaScript capabilities

Web App vs. Native AppWeb App Native App

...vs. Mobile WebsiteWeb App

• Mobile & Smartphone Stylesheets

• Viewport Definition

• Optimized Graphics

• Objective-C & Cocoa Touch (iPhone-only)

• Java (Blackberry, Android, Symbian)

• Palm Mojo [HTML5, JS, CSS + Dojo-based framework] (Palm-only)

• Visual C#/Visual Basic/.NET (Windows Mobile-only)

• C++ (Symbian, Windows Mobile)

• HTML5, JavaScript and CSS

• PhoneGap

• Titanium Mobile

• Rhomobile

Technologies

Cross-platform w/ single API

• Objective-C & Cocoa Touch (iPhone-only)

• Java (Blackberry, Android, Symbian)

• Palm Mojo [HTML5, JS, CSS + Dojo-based framework] (Palm-only)

• Visual C#/Visual Basic/.NET (Windows Mobile-only)

• C++ (Symbian, Windows Mobile)

• HTML5, JavaScript and CSS

• PhoneGap

• Titanium Mobile

• Rhomobile

Technologies

Cross-platform w/ single API

HTML5, JavaScript & CSS

HTML5, JavaScript & CSS

• CSS2• CSS3• Apple*

“Handheld” Media Stylesheets

Media Queries

Viewport

The basics

* Supported by several browsers, including mobile Firefox

HTML5, JavaScript & CSS

• HTML5• HTML5• CSS3• W3C API• HTML5

Offline Caching

SQLite-compatible Offline Storage

CSS Animations

Geolocation

Canvas

Advanced

Mobile JS/CSS Frameworks*

*Not an exhaustive list

IUI(Older) iPhone UI clonehttp://code.google.com/p/iui/

XUIMobile-focused frameworkhttp://xuijs.com/

CiUICNET’s iPhone UI clonehttp://bit.ly/5p4tMY

UiUIKitCSS-only iPhone UI clonehttp://bit.ly/7Qtnhx

Magic FrameworkiPhone UI clonehttp://bit.ly/6zJ4eK

jQTouchjQuery plugin for iPhone UIhttp://www.jqtouch.com/

SafireiPhone UI clonehttp://code.google.com/p/safire/

iWebKitExtensive iPhone UI clonehttp://iwebkit.net/

WebApp.NetiPhone UI clone + frameworkhttp://webapp-net.com/

DashcodeApple’s Dashboard Toolkithttp://bit.ly/7sntmM

PhoneGap

PhoneGap•WebKit-wrapper application

•Consistent APIs for device functions

•Geolocation

•Vibration

•Accelerometer

•Etc

•Supports many devices

iPhone Android Blackberry Windows Symbian Palm Maemo

Geo Location

Vibration

Accelerometer

Sound

Contacs

PhoneGap Device Support

Unknown or experimentalData from Jan 22, 2010

Titanium Mobile

Titanium Mobile•Accelerometer

•Database

•Filesystem

•Geolocation

•Mapping

•Media

•Networking

+Native UI

Components

Titanium 0.9/1.0•iPad & Blackberry support

•Less reliance on web views (slow)

•Dynamic APIs

•More extensible

•5x+ performance increases

•New APIs

•Animation

•Streaming Audio

•Proximity Sensor

•Low-level Graphics

•Network Streaming

•Easier to start

•Supports more platforms

•Mobile & desktop

•Native UI

•Poor documentation

Both fully open source!

vs. TitaniumPhoneGap

Both HTML

Faux-Native

True Native

vs. TitaniumPhoneGap

Use When:

Use When:

•Using just web technologies•Targeting many devices

•Need native UI/functionality•Targeting iPhone & Android

Titanium

PhoneGap

Objective-C/Cocoa Touch

Objective C/Cocoa Touch•100% Native Application

•Full native performance

•Access to entire iPhone SDK & UI Components

•Interface Builder

•iPhone/iPad-only

•Mac development-only*

* No matter what you need a Mac to compile for iPhone

DEMO

HTML5 Offline CachingCACHE MANIFEST# version 1.0index.htmlapplication.jstheme.csssprites.png

NETWORK:/api

FALLBACK:/images/avatars/ /images/default-avatar.png

Code AheadAck!!

!

HTML5 Offline CachingCACHE MANIFEST# version 1.0index.htmlapplication.jstheme.csssprites.png

NETWORK:/api

FALLBACK:/images/avatars/ /images/default-avatar.png

Code AheadAck!!!

Mobile Stylesheets<!-- Main Stylesheet --><link type="text/css" rel="stylesheet" href="screen.css" media="screen">

<!-- Smartphone Stylesheet--><link type="text/css" rel="stylesheet" href="smartphone.css" media="only screen and (max-device-width: 480px)">

<!-- Handheld Stylesheet --><link type="text/css" rel="stylesheet" href="handheld.css" media="handheld">

!

•To account for Windows Mobile, conditional comments are required (not shown).

Mobile Stylesheets<!-- Main Stylesheet --><link type="text/css" rel="stylesheet" href="screen.css" media="screen">

<!-- Smartphone Stylesheet--><link type="text/css" rel="stylesheet" href="smartphone.css" media="only screen and (max-device-width: 480px)">

<!-- Handheld Stylesheet --><link type="text/css" rel="stylesheet" href="handheld.css" media="handheld">

!

•To account for Windows Mobile, conditional comments are required (not shown).

Mobile Stylesheets<!-- Main Stylesheet --><link type="text/css" rel="stylesheet" href="screen.css" media="screen">

<!-- Smartphone Stylesheet--><link type="text/css" rel="stylesheet" href="smartphone.css" media="only screen and (max-device-width: 480px)">

<!-- Handheld Stylesheet --><link type="text/css" rel="stylesheet" href="handheld.css" media="handheld">

!

•To account for Windows Mobile, conditional comments are required (not shown).

Mobile Stylesheets<!-- Main Stylesheet --><link type="text/css" rel="stylesheet" href="screen.css" media="screen">

<!-- Smartphone Stylesheet--><link type="text/css" rel="stylesheet" href="smartphone.css" media="only screen and (max-device-width: 480px)">

<!-- Handheld Stylesheet --><link type="text/css" rel="stylesheet" href="handheld.css" media="handheld">

!

•To account for Windows Mobile, conditional comments are required (not shown).

Viewport Scaling<meta name="viewport" content= "width=320, initial-scale=2.3, user-scalable=no" />

!

•width

•height

•initial-scale

•minimum-scale

•maximum-scale

•user-scalable

Tip:When setting the width/heightyou can use “device-width” and“device-height” to match thesize of the user’s device.

HTML5 SQLite Storagevar db = openDatabase("Demo", "1.0");if (db) { db.transaction(function(tx) { tx.executeSql("SELECT * FROM demo", [], function(result) { // “result” contains all rows in “demo” table }, function(tx, error) { var sql = "CREATE TABLE demo (id INTEGER, demo TEXT)"; tx.executeSql(sql, [], function(result) { // database created, now do something }); }); });} else { alert("Unable to open database!");}

!

123456789

101112131415

Ack!

CSS3 Transitionsdiv { opacity: 1; -webkit-transition-property: opacity; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out;}div:hover { opacity: 0;}

!

•Properties: none, all, <property>

•Timing: ease, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)

Geolocation APIvar options = { maximumAge: 60000};

!

function gotPosition(p) { var lat = p.coords.latitude; var lon = p.coords.longitude;}

function positionError(e) { var code = e.code;}

navigator.geolocation.getCurrentPosition(gotPosition, positionError, options);

Geolocation APIvar options = { maximumAge: 60000};

!

function gotPosition(p) { var lat = p.coords.latitude; var lon = p.coords.longitude;}

function positionError(e) { var code = e.code;}

navigator.geolocation.getCurrentPosition(gotPosition, positionError, options);

Geolocation APIvar options = { maximumAge: 60000};

!

function gotPosition(p) { var lat = p.coords.latitude; var lon = p.coords.longitude;}

function positionError(e) { var code = e.code;}

navigator.geolocation.getCurrentPosition(gotPosition, positionError, options);

Geolocation APIvar options = { maximumAge: 60000};

!

function gotPosition(p) { var lat = p.coords.latitude; var lon = p.coords.longitude;}

function positionError(e) { var code = e.code;}

navigator.geolocation.getCurrentPosition(gotPosition, positionError, options);

Geolocation APIvar options = { maximumAge: 60000};

!

function gotPosition(p) { var lat = p.coords.latitude; var lon = p.coords.longitude;}

function positionError(e) { var code = e.code;}

navigator.geolocation.getCurrentPosition(gotPosition, positionError, options);

Phone-Specific Tags!

•apple-mobile-web-app-capable (yes/no)

•apple-mobile-web-app-status-bar-style (default, black, black-translucent)

•format-detection (telephone=no)

PhillyNewMediaHub Mobile

IUI Code Example<!-- Toolbar --><div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a></div>

<!-- Main Menu --><ul id="home" title="Home" selected="true"> <li><a href="#calendars">Calendars</a></li> <li><a href="#blogs">Blogs</a></li> <li><a href="#mailinglists">Mailing Lists</a></li> <li><a href="/iphone/about">About</a></li></ul>

<!-- Calendars --><ul id="calendars" title="Calendars"></ul>

!

IUI Code Example<!-- Toolbar --><div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a></div>

<!-- Main Menu --><ul id="home" title="Home" selected="true"> <li><a href="#calendars">Calendars</a></li> <li><a href="#blogs">Blogs</a></li> <li><a href="#mailinglists">Mailing Lists</a></li> <li><a href="/iphone/about">About</a></li></ul>

<!-- Calendars --><ul id="calendars" title="Calendars"></ul>

!

IUI Code Example<!-- Toolbar --><div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a></div>

<!-- Main Menu --><ul id="home" title="Home" selected="true"> <li><a href="#calendars">Calendars</a></li> <li><a href="#blogs">Blogs</a></li> <li><a href="#mailinglists">Mailing Lists</a></li> <li><a href="/iphone/about">About</a></li></ul>

<!-- Calendars --><ul id="calendars" title="Calendars"></ul>

!

IUI Code Example<!-- Toolbar --><div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a></div>

<!-- Main Menu --><ul id="home" title="Home" selected="true"> <li><a href="#calendars">Calendars</a></li> <li><a href="#blogs">Blogs</a></li> <li><a href="#mailinglists">Mailing Lists</a></li> <li><a href="/iphone/about">About</a></li></ul>

<!-- Calendars --><ul id="calendars" title="Calendars"></ul>

!

Questions?

Chris Morrellhttp://cmorrell.com/

@inxilpro

Resources• Safari Mobile Web Programming: http://bit.ly/4Fkdnp

• Viewport Meta Element: http://www.w3.org/TR/2010/CR-mwabp-20100211/#bp-viewport

• CSS3 Media Queries: http://www.w3.org/TR/css3-mediaqueries/

• PhoneGap: http://phonegap.com/

• Titanium Mobile: http://www.appcelerator.com/

• Apple iPhone Dev Center: http://developer.apple.com/iphone/

• W3C Geolocation API: http://dev.w3.org/geo/api/spec-source.html

• Offline Storage & Caching: http://bit.ly/bvlVJ8

• CSS3 Transitions: http://webkit.org/blog/138/css-animation/