mobile app development
DESCRIPTION
TRANSCRIPT
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>
!
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/