Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5 and Mobile              Wenjuan (David) Cai, 2011
Goals- Explore technologies available for mobile appdevelopment  HTML5, CSS3, jQuery Mobile, PhoneGap,  Android SDK, iOS S...
Native vs. HTML5- Android  Fragmentation:  http://techcrunch.com/2011/10/27/charted-android-fragmentation/- iOS  - Restric...
HTML5- A work in progress   Modules:     Canvas, Geolocation, Video, Audio,     Application Cache, Web Storage, CSS3,     ...
HTML5 (contd)- Easy to start  <!doctype html>  <html lang="en">      <head>           <meta charset="utf-8">           <ti...
JavaScript Libraries for Mobile- jQuery Mobile   Easy mockup, fast to prototype, jQuery is awesome- Sencha Touch   Full bl...
Dive into HTML5 Source<div data-role="page" id="login" data-theme="b">    <%-- Header --%>    <div data-role="header" data...
jQuery Mobile in Action<script type="text/javascript">   $(function() {       $(form).submit(function() {            $.mob...
jQuery Listview<div data-role="page" id="dashboard">    <div data-role="content">        <ul data-role="listview">        ...
Canvas- Replace Flash  JavaScript API to draw 2D/3D- jQuery code to create pie  <%-- Get style pie configuration --%>  var...
CSS3 Media Query- Responsive Design   /*   For device with screen width being   greater than 480px   */   @media screen an...
Mobile Device Events- Swipe Gestures  $(function() {        $(div.ui-page).live(swipeleft, function() {              histo...
Android Deployment- Android SDK: http://developer.android.com/sdk/index.html- ADT Eclipse Plugin:                     http...
Android Project in Eclipse- AndroidManifest.xml- App.java  public class App extends DroidGap  {       /** Called when the ...
Deploy to Simulator- Create AVD (Android Virtual Device)  - Screen resolution  - SD card size  - Target Android SDK level ...
Deploy to Android Device- Sign application   - Generate key store      keytool -genkey -v -keystore android-release-key.ke...
iOS Development- You need a Mac- Xcode- PhoneGap
iOS Development (contd)- index.html  <body onload="onBodyLoad()">       <script type="text/javascript">            window....
Q&A
Upcoming SlideShare
Loading in …5
×

HTML5 and Mobile

2,883 views

Published on

  • Be the first to comment

HTML5 and Mobile

  1. 1. HTML5 and Mobile Wenjuan (David) Cai, 2011
  2. 2. Goals- Explore technologies available for mobile appdevelopment HTML5, CSS3, jQuery Mobile, PhoneGap, Android SDK, iOS SDK- Create a PoC prototype
  3. 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. 4. HTML5- A work in progress Modules: Canvas, Geolocation, Video, Audio, Application Cache, Web Storage, CSS3, Web Sockets, Web Workers, etc.  - Wont be fully released until 2022 http://www.webmonkey. com/2008/09/html_5_won_t_be_ready_until_2022dot_yes__2022dot/
  5. 5. HTML5 (contd)- 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. 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 againstframework"- YUI3 Provided bolts and nuts but not a platform ... yet
  7. 7. 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>
  8. 8. 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>
  9. 9. 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>
  10. 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. 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. 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. 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. 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. 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. 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
  17. 17. iOS Development- You need a Mac- Xcode- PhoneGap
  18. 18. iOS Development (contd)- 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
  19. 19. Q&A

×