This document discusses using HTML5 for mobile application development. It covers technologies like PhoneGap that allow wrapping HTML5 apps in native containers. It also discusses specific frameworks like jQuery Mobile that help build mobile UIs. Native development for Android using Eclipse and iOS using Xcode is described. The document provides code samples for building basic HTML5 mobile pages and apps using technologies like Canvas, media queries, and device events. It outlines the process for deploying HTML5 mobile apps to simulators and devices on both Android and iOS platforms.
2. Goals
- Explore technologies available for mobile app
development
HTML5, CSS3, jQuery Mobile, PhoneGap,
Android SDK, iOS SDK
- Create a PoC prototype
3. Native vs. HTML5
- Android
Fragmentation:
http://techcrunch.com/2011/10/27/charted-android-fragmentation/
- iOS
- Restrictive approval process
- Objective C
- HTML5
Mobile browser support: http://mobilehtml5.org/
4. HTML5
- A work in progress
Modules:
Canvas, Geolocation, Video, Audio,
Application Cache, Web Storage, CSS3,
Web Sockets, Web Workers, etc.
- Won't be fully released until 2022
http://www.webmonkey.
com/2008/09/html_5_won_t_be_ready_until_2022dot_yes__2022dot/
5. HTML5 (cont'd)
- Easy to start
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>...</title>
</head>
<body>...</body>
</html>
- Based on HTML4
Your existing HTML knowledge is not obsolete
6. JavaScript Libraries for Mobile
- jQuery Mobile
Easy mockup, fast to prototype, jQuery is awesome
- Sencha Touch
Full bloom mobile library
Typical problem for big library: "code against
framework"
- YUI3
Provided bolts and nuts but not a platform ... yet
10. Canvas
- Replace Flash
JavaScript API to draw 2D/3D
- jQuery code to create pie
<%-- Get style pie configuration --%>
var pieConfig = jQuery.parseJSON(
'<s:property
value="stylePieConfig"
escape="false" />'
);
<%-- Create style pie --%>
$("#style-pie") .pie(pieConfig, 150, 150);
11. CSS3 Media Query
- Responsive Design
/*
For device with screen width being
greater than 480px
*/
@media screen and (min-width: 480px) {
#styles #style-pie {
float: left;
}
#styles .ui-content ul[data-role=listview] {
float: left;
}
}
- The Boston Globe: http://bostonglobe.com/
12. Mobile Device Events
- Swipe Gestures
$(function() {
$('div.ui-page').live('swipeleft', function() {
history.go(1);
});
$('div.ui-page').live('swiperight', function() {
history.go(-1);
});
});
- Page Initialization vs. DOM Ready
$('#styles').live('pageinit', function(event) {
console.log('Page styles is initialized');
});
13. Android Deployment
- Android SDK: http://developer.android.com/sdk/index.html
- ADT Eclipse Plugin: http://developer.android.com/sdk/eclipse-adt.html#installing
- PhoneGap: http://phonegap.com/
- Wrap web apps in native container
- Support iOS, Android, Blackberry, WebOS, and Symbian
- Support native features:
Camera, Geolocation, Native File System, Contacts, Compass, Notification, etc.
14. Android Project in Eclipse
- AndroidManifest.xml
- App.java
public class App extends DroidGap
{
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
super.init();
// Clear browser cache
super.clearCache();
super.loadUrl("<your IP address>/mobile/login.act");
}
}
15. Deploy to Simulator
- Create AVD (Android Virtual Device)
- Screen resolution
- SD card size
- Target Android SDK level
- Hardware properties
- Run as Android Application
16. Deploy to Android Device
- Sign application
- Generate key store
keytool -genkey -v -keystore android-release-key.keystore
-alias alias_name -keyalg RSA -validity 10000
- Export signed application
- .apk file
- Install from apk file