HTML5 and Mobile

HTML5 and Mobile

Wenjuan (David) Cai, 2011

Goals

- Explore technologies available for mobile app
development

HTML5, CSS3, jQuery Mobile, PhoneGap,
Android SDK, iOS SDK

- Create a PoC prototype

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/

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/

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

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

Dive into HTML5 Source
<div data-role="page" id="login" data-theme="b">
<%-- Header --%>
<div data-role="header" data-theme="b">
<h1>Financial Engines</h1>
</div>

<%-- Content --%>
<div data-role="content" id="login-bd">
<form action="/mobile/login-save.act" method="post" data-ajax="false">
<s:actionerror />

<input type="text" name="userId" id="userId" placeholder="User ID">
<input type="password" name="password" id="password"
placeholder="Password">
<input type="submit" value="Sign In">
</form>
</div>
</div>

jQuery Mobile in Action
<script type="text/javascript">
$(function() {
$('form').submit(function() {

$.mobile.showPageLoadingMsg();
console.log('Show page loading message');

$('input[type=submit]', this)
.attr('disabled', 'disabled');
console.log('Disabled submit button');
});
});
</script>

jQuery Listview
<div data-role="page" id="dashboard">
<div data-role="content">
<ul data-role="listview">
<li><a href=" #funds"></a></li>

<li><a href="#savings"></a></li>

<li><a href="#ret_income"></a></li>
</ul>
</div>
</div>

...

<div data-role="page" id="funds" data-add-back-btn="true">
...
</div>

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);

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/

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');
});

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.

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");
}
}

Deploy to Simulator

- Create AVD (Android Virtual Device)
- Screen resolution
- SD card size
- Target Android SDK level
- Hardware properties

- Run as Android Application

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

iOS Development

- You need a Mac

- Xcode

- PhoneGap

iOS Development (cont'd)

- index.html
<body onload="onBodyLoad()">
<script type="text/javascript">
window.location = "http://<your IP address>/mobile/login.act";
</script>
</body>

- AppDelegate.m
shouldStartLoadWithRequest method
return YES;

- Branding in <your-app>-info.plist file

HTML5 and Mobile

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à HTML5 and Mobile

Similaire à HTML5 and Mobile (20)

HTML5 and Mobile