HTML5 and Mobile

2,733 views
2,667 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,733
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

×