10. Web App vs. Native App
• Easy to develop
• Don’t require approval
• Maintained centrally
• Not on App Store
• Limitedto HTML/CSS/
JavaScript capabilities
11. Web App vs. Native App
• Better UI
• Easy to develop
• More powerful
• Don’t require approval
• More control
• Maintained centrally
• Access to GPU
• Not on App Store
• Costly to develop
• Limited to HTML/CSS/
JavaScript capabilities
• Requires approval
12. Web App vs. Native App
• Better UI
• Easy to develop
• More powerful
• Don’t require approval
• More control
• Maintained centrally
• Access to GPU
• Not on App Store
• Costly to develop
• Limited to HTML/CSS/
JavaScript capabilities
• Requires approval
13. Web App
...vs. Mobile Website
• Mobile & Smartphone Stylesheets
• Viewport Definition
• Optimized Graphics
14. Technologies
• 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
Cross-platform w/ single API
15. Technologies
• 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
Cross-platform w/ single API
17. HTML5, JavaScript & CSS
The basics
• CSS2 “Handheld” Media Stylesheets
• CSS3 Media Queries
• Apple* Viewport
* Supported by several browsers, including mobile Firefox
22. PhoneGap Device Support
iPhone Android Blackberry Windows Symbian Palm Maemo
Geo Location
Vibration
Accelerometer
Sound
Contacs
Data from Jan 22, 2010
Unknown or experimental
28. PhoneGap
Use When:
• Using just web technologies
• Targeting many devices
Titanium
Use When:
• Need native UI/functionality
• Targeting iPhone & Android
30. 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
34. !
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).
35. !
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).
36. !
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).
37. !
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).
38. !
Viewport Scaling
<meta name="viewport"
content= "width=320, initial-scale=2.3, user-scalable=no" />
• width
• height
Tip:
• initial-scale When setting the width/height
you can use “device-width” and
• minimum-scale “device-height” to match the
size of the user’s device.
• maximum-scale
• user-scalable
39. !
HTML5 SQLite Storage
1 var db = openDatabase("Demo", "1.0");
2 if (db) {
3 db.transaction(function(tx) {
4 tx.executeSql("SELECT * FROM demo", [], function(result) {
5 // “result” contains all rows in “demo” table
6 }, function(tx, error) {
7 var sql = "CREATE TABLE demo (id INTEGER, demo TEXT)";
8 tx.executeSql(sql, [], function(result) {
9 // database created, now do something
10 });
11 });
12 });
13 } else {
14 alert("Unable to open database!");
15 }
Ack!
41. !
Geolocation API
var 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);
42. !
Geolocation API
var 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);
43. !
Geolocation API
var 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);
44. !
Geolocation API
var 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);
45. !
Geolocation API
var 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);
