Developing for Mobile:                         Tools, Tips, and Deployment Options                                      Ja...
Stages of Human Evolution…                             Are We Evolving ?                                          2	  
Scientists Suggest…                      Our fingertips are changing!                                             3	  
Or Is It A Sign?                   Prepare for the Zombie Apocalypse!                                                     ...
5	  
ADL Mobile Learning Team                           Judy Brown and Jason Haag                                              ...
Mobile Me…             Since 2003                      7	  
8	  
ADL Mobile Learning DefinitionADL defines mobile learning as theuse of handheld or wearablecomputing devices to provide acc...
Five Moments of Learning Needs •  When learning for the first time	 •  When wanting to learn more	 •  When trying to rememb...
Five Moments of Learning Needs •  When learning for the first time	 •  When wanting to learn more        Learn	   •  When t...
Much More Than Courses…                      EvaluaFon	                                                                   ...
“Think Outside the Course”                             Judy Brown                                          13	  
14	  
15	  
ADL’s Mobile Learning Handbook               http://mlhandbook.adlnet.gov We are also working with TSWG Combating Terroris...
ADL Mobile Learning Guide: Mobile Web Deployment      http://mlearn.adlnet.gov or http://mlearn.adlnet.mobi (mirror)      ...
Native App Distribution                                      iTunes	  App	  Store	                            Android Mark...
USA.gov App Store Deployment                                     iTunes	  App	  Store	                  http://apps.usa.go...
ADL Mobile Learning Guide •  Graphics editor (Fireworks)	 •  HTML editor (Dreamweaver CS 5.5)	    –  jQuery Mobile Framewo...
21	  
22	  
23	  
Mobile Apps Must Die!   “Native Apps Are Becoming Too Much To Organize  Maintain”                     Is Value  Pain ? - S...
I’m a PC…I’m a Mac                     Yeah…whatever                                        25	                          ...
I’m a Native App…I’m a Web App                                 What’s the Difference?                                     ...
The Wrong QuestionThe question is no longer, “Which do we develop for, native or mobile web?” but...                      ...
The Right Question“How do we develop solutions to handle both mobile web  native now as well as       the devices of the f...
You Need A…              Dave Olsen, @dmolsen                                     29	  
Native App SDKs = Develop for Many Platforms •  Symbian OS from the Symbian Foundation 	 •  BlackBerry OS from RIM	 •  iOS...
Emulators Anyone?              http://www.mobilexweb.com/emulators                                               31	  
Quick Alternatives…•        SwebApps	           •    TapLynx	•        AppIncubator	       •    Appanda	•        Kanchoo	  ...
Do-It-Yourself Toolkits                                   No Coding Required, BUT…33	  
Why the Mobile Web?                      1	  out	  of	  every	  5	  people	  by	  2013	                                   ...
Mobile App Development                                  Balancing Views35	  
Deployment Options                     Support Native Only… or Web  Native?                                               ...
Standards•  W3C Standards for Web Apps on Mobile (Feb 2011)	          –  http://www.w3.org/2011/02/mobile-web-app-state.ht...
“Not	  every	  mobile	  device	  will	  have	  your	  app	  on	  it,	  but	  every	  mobile	  device	  will	  have	  a	  b...
Web App Stores…Mozilla’s Open Web App Store (2010)	       •  http://apps.mozillalabs.com	Open App Market (2010)	       •  ...
Mobile Web App Frameworks •  Developed using Web Standards (HTML, CSS,    JavaScript)     –  Each framework usually consis...
History Repeats Itself!                                   Don’t Just Target Webkit Browsers!41	  
Mobile Web App Frameworks •  HTML, CSS, JavaScript Only	          –    iWebkit 	          –    JQTouch (JQuery Touch)	    ...
Mobile Web App Frameworks                            http://adlmobile.wikispaces.com 43	  
Mobile Web Frameworks in Higher Ed •    http://kurogo.org	 •    http://mollyproject.org	 •    http://mwf.ucla.edu	 •    ht...
Report from MOLE (March 2011)                                http://www.mole-project.net                                  ...
Device Detection•        WURFL	          -  Protects from transcoders	          -  Java  PHP APIs  XML focused on accurate...
Content Adaptation aka “Device Detection”                                                    Used for XHTML/             ...
Feature Detection Is A Better Approach                     JavaScript Library: http://modernizr.com                       ...
The Peanut MM AnalogyThe Chocolaty Layers of Progressive Enhancement                   Progressive Enhancement = Mobile Fi...
Mobile First Strategy                    Naturally Improves Information Achitecture                                       ...
HTML5 Responsive Design                          The Boston Globe (Desktop Browser)                                       ...
HTML5 Responsive Design                          The Boston Globe (Tablet Browser)                                        ...
HTML5 Responsive Design: CSS Media Queries                         The Boston Globe (Mobile Browser)                      ...
jQuery Mobile                http://jquerymobile.com                                          54	  
Dreamweaver CS5.5 “Mobile Starters”                                  Samples Included!                                    ...
EASY HTML!body!-- Start of first page --div data-role=page id=foo”div data-role=headerh1Foo/h1/div!-- /header --div data-r...
57	  
Next StepsMaintenance  Updates  –  Contextual updates  –  Framework updates  –  Search functionality  –  More App Store Di...
jQuery Mobile + PhoneGap =                     Write Once, Deploy to Multiple Platforms                                   ...
Where’s the Gap?                   To the Cloud!                                   60	  
Mobile Lessons Learned•  An emulator is not always consistent with the actual device	•  Limited support for Flash today (A...
Mobile Video Formats     RIM         Apple       Microsoft    Google         Nokia              Palm     BBOS        iPhon...
Mobile Lessons Learned•  Create. Don’t convert! 	•  Scope: You can support all device types. Narrow the scope and   focus ...
Don’t Get Hung Up on Platforms!Think About: Requirements, Content, and User Experience          I’m at Native App… I’m a W...
Developing for Mobile Is Tough!                                  a balancing act…                                         ...
Resources            http://adlmobile.wikispaces.com                                       66	  
Resources            http://research.adlnet.gov/newsletter/mobile                                                  67	  
Other Resources – What I’m Reading  •  Beginning Building Mobile Application Development in the  Cloud (November 2011) By ...
Homo Textus…Don’t Text and Drive!                                    You Know Who You Are!                                ...
Don’t Text and Fly!                      2011!                              Happy Halloween                              ...
More Photo Credits•    http://www.flickr.com/photos/adactio/6153558098/in/set-72157627691092806	•    http://www.flickr.com/p...
Questions / Discussion                    Jason Haag                    Mobile Learning Research Analyst	                 ...
Upcoming SlideShare
Loading in...5
×

Developing for Mobile: Tools, Tips, and Deployment Options

3,805

Published on

"Developing for Mobile: Tools, Tips, and Deployment Options" for Training Magazine Learning 3.0 Conference in Chicago October 3-5, 2011

Published in: Technology, Education
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,805
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
135
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Developing for Mobile: Tools, Tips, and Deployment Options

  1. 1. Developing for Mobile: Tools, Tips, and Deployment Options Jason Haag Mobile Learning Research Analyst The Tolliver Group, Inc.
  2. 2. Stages of Human Evolution… Are We Evolving ? 2  
  3. 3. Scientists Suggest… Our fingertips are changing! 3  
  4. 4. Or Is It A Sign? Prepare for the Zombie Apocalypse! 4  
  5. 5. 5  
  6. 6. ADL Mobile Learning Team Judy Brown and Jason Haag 6  
  7. 7. Mobile Me… Since 2003 7  
  8. 8. 8  
  9. 9. ADL Mobile Learning DefinitionADL defines mobile learning as theuse of handheld or wearablecomputing devices to provide accessto learning content and informationresources. 9  
  10. 10. Five Moments of Learning Needs •  When learning for the first time •  When wanting to learn more •  When trying to remember •  When things change •  When something goes wrong Dr. Conrad Gottfredson Which One Is Most Appropriate for Mobile? 10  
  11. 11. Five Moments of Learning Needs •  When learning for the first time •  When wanting to learn more Learn   •  When trying to remember •  When things change Perform   •  When something goes wrong 11  
  12. 12. Much More Than Courses… EvaluaFon   rning   Contextualized  lea on   Field  guide   Quiz   Poll   Just-­‐in-­‐Fme  LocaF   c specifi   Review/remember   Micro  learning Feedback   Modules,     Video  recordings   Alerts   Survey   Geo-­‐blogging   Courses,     Note  taking   Fon   What  Else?   Tr anscrip Test   ings   Assdio  record d  acce u   n  On-­‐deman Geo-­‐exploraFo Reminders   Capture/share/document   ReporFng   Reference   Procedure s   Updates   Conferencing   Game-­‐based  learning   on   SimulaF toring OrganizaFon   Coaching/men list   Job  aid/check   Assignmen ts   TranslaFon Augmented  reality     Decision  support   PresentaFons   E-­‐books   Mobile Learning Opportunities! 12  
  13. 13. “Think Outside the Course” Judy Brown 13  
  14. 14. 14  
  15. 15. 15  
  16. 16. ADL’s Mobile Learning Handbook http://mlhandbook.adlnet.gov We are also working with TSWG Combating Terrorism on conductingMarket research on companies that offer mobile learning products. Want to participate? Want to be added? Contact Us: adlmobile@adlnet.gov 16  
  17. 17. ADL Mobile Learning Guide: Mobile Web Deployment http://mlearn.adlnet.gov or http://mlearn.adlnet.mobi (mirror) 17  
  18. 18. Native App Distribution iTunes  App  Store   Android Market iPhone App Store 18  
  19. 19. USA.gov App Store Deployment iTunes  App  Store   http://apps.usa.gov/adl-mlearning-guide/ 19  
  20. 20. ADL Mobile Learning Guide •  Graphics editor (Fireworks) •  HTML editor (Dreamweaver CS 5.5) –  jQuery Mobile Framework (for mobile content creation) •  PhoneGap Framework (open source - for native app packaging deployment) •  Books –  Programming the Mobile Web , Maximiliano Firtman –  Mobile Design and Development , Brian Fling –  HTML5: Up and Running , Mark Pilgrim How Did We Do It? 20  
  21. 21. 21  
  22. 22. 22  
  23. 23. 23  
  24. 24. Mobile Apps Must Die! “Native Apps Are Becoming Too Much To Organize Maintain” Is Value Pain ? - Scott Jenson, @scottjenson 24  
  25. 25. I’m a PC…I’m a Mac Yeah…whatever  25   25
  26. 26. I’m a Native App…I’m a Web App What’s the Difference? 26   Source:    Global  Intelligence  Alliance   26
  27. 27. The Wrong QuestionThe question is no longer, “Which do we develop for, native or mobile web?” but... 27  
  28. 28. The Right Question“How do we develop solutions to handle both mobile web native now as well as the devices of the future?” - Dave Olsen, @dmolsen 28  
  29. 29. You Need A… Dave Olsen, @dmolsen 29  
  30. 30. Native App SDKs = Develop for Many Platforms •  Symbian OS from the Symbian Foundation •  BlackBerry OS from RIM •  iOS from Apple •  Windows Phone 7 from Microsoft •  Android from Google •  WebOS from HP •  Bada from Samsung •  MeeGo from Nokia and Intel Must Support Several Platforms No Browsers 30  
  31. 31. Emulators Anyone? http://www.mobilexweb.com/emulators 31  
  32. 32. Quick Alternatives…•  SwebApps •  TapLynx •  AppIncubator •  Appanda •  Kanchoo •  AppMakr •  AppBreeder •  App.co •  MyAppBuilder •  Appswell •  BuildAnApp •  UNITYMobile •  eBookApp •  And many others… •  GameSalad •  MobileRoadie •  MobBase Do-It-Yourself Toolkits32  
  33. 33. Do-It-Yourself Toolkits No Coding Required, BUT…33  
  34. 34. Why the Mobile Web? 1  out  of  every  5  people  by  2013   34  
  35. 35. Mobile App Development Balancing Views35  
  36. 36. Deployment Options Support Native Only… or Web Native? 36  
  37. 37. Standards•  W3C Standards for Web Apps on Mobile (Feb 2011) –  http://www.w3.org/2011/02/mobile-web-app-state.html –  Current Status: http://www.w3.org/standards/techs/mobileapp#w3c_all The Web is an App Platform! 37  
  38. 38. “Not  every  mobile  device  will  have  your  app  on  it,  but  every  mobile  device  will  have  a  browser.”   -­‐  Jason  Grigsby,  @grigs   38  
  39. 39. Web App Stores…Mozilla’s Open Web App Store (2010) •  http://apps.mozillalabs.com Open App Market (2010) •  http://www.openappmkt.com Chrome Web Store (2010) •  http://chrome.google.com/webstore GetJar HTML5 Mobile Web App Store •  http://www.getjar.com Opera Mobile Web App Store (2011) •  http://apps.mozillalabs.com Open Space (Under Development) •  https://www.developerscoop.org On the Rise 39  
  40. 40. Mobile Web App Frameworks •  Developed using Web Standards (HTML, CSS, JavaScript) –  Each framework usually consists of these file types and some additional images, templates •  Can be hosted on a web server – OR – packaged as Native App (using PhoneGap or other Solution) 40  
  41. 41. History Repeats Itself! Don’t Just Target Webkit Browsers!41  
  42. 42. Mobile Web App Frameworks •  HTML, CSS, JavaScript Only –  iWebkit –  JQTouch (JQuery Touch) –  iUI (iPhone User Interface) –  jQuery Mobile (Uses Progressive Enhancement) •  HTML, CSS, JavaScript + Native App Publishing –  Rhodes RhoHub –  Sencha Touch JavaScript Framework –  Titanium Appcelerator •  Native App Packaging for HTML Content –  PhoneGap 42  
  43. 43. Mobile Web App Frameworks http://adlmobile.wikispaces.com 43  
  44. 44. Mobile Web Frameworks in Higher Ed •  http://kurogo.org •  http://mollyproject.org •  http://mwf.ucla.edu •  http://www.jasig.org/umobile Support Both Native and Mobile Web 44  
  45. 45. Report from MOLE (March 2011) http://www.mole-project.net 45  
  46. 46. Device Detection•  WURFL -  Protects from transcoders -  Java PHP APIs XML focused on accurate detection of mobile device capabilities -  http://wurfl.sourceforge.net •  Terra-WURFL -  PHP API MySQL focused on high-performance detection of mobile devices -  Can detect over 45,000 UAs -  http://www.tera-wurfl.com •  Device Atlas – Mobile Device Database API -  Developed by dotMobi in February 2008 -  Comprehensive data on over 6,000 devices -  http://deviceatlas.com •  DetectMobileBrowsers.mobi – Detects Mobile Browser User Agents -  PHP-based (server-side) -  Supports: iPhone, iPad, Android, Opera Mini, Blackberry, Palm, Windows Mobiles, Low End Mobiles, Desktop Redirect URL If You Can’t Create and Must Convert…46  
  47. 47. Content Adaptation aka “Device Detection”   Used for XHTML/ CSS for basic version   Used iWebkit HTML5 CSS for advanced version   Used device detection h^p://webguide.ua.edu/mobile.html   Maintenance Nightmare! 47  
  48. 48. Feature Detection Is A Better Approach JavaScript Library: http://modernizr.com 48  
  49. 49. The Peanut MM AnalogyThe Chocolaty Layers of Progressive Enhancement Progressive Enhancement = Mobile First 49  
  50. 50. Mobile First Strategy Naturally Improves Information Achitecture 50  
  51. 51. HTML5 Responsive Design The Boston Globe (Desktop Browser) 51  
  52. 52. HTML5 Responsive Design The Boston Globe (Tablet Browser) 52  
  53. 53. HTML5 Responsive Design: CSS Media Queries The Boston Globe (Mobile Browser) 53  
  54. 54. jQuery Mobile http://jquerymobile.com 54  
  55. 55. Dreamweaver CS5.5 “Mobile Starters” Samples Included! 55  
  56. 56. EASY HTML!body!-- Start of first page --div data-role=page id=foo”div data-role=headerh1Foo/h1/div!-- /header --div data-role=contentpIm first in the source order so Im shown as the page./ppView internal page called a href=#barbar/a/p/div!-- /content --div data-role=footerh4Page Footer/h4 /div!-- /footer --/div!-- /page -- Header, Content Body, Footer 56  
  57. 57. 57  
  58. 58. Next StepsMaintenance Updates –  Contextual updates –  Framework updates –  Search functionality –  More App Store Distribution •  Windows Phone •  BlackBerry •  Open Web App Stores Mobile Learning Guide (App) 58  
  59. 59. jQuery Mobile + PhoneGap = Write Once, Deploy to Multiple Platforms 59  
  60. 60. Where’s the Gap? To the Cloud! 60  
  61. 61. Mobile Lessons Learned•  An emulator is not always consistent with the actual device •  Limited support for Flash today (Adobe working HTML5) •  Poor / inconsistent support for pop-up windows and framesets •  Video Compatibility -  Varying formats supported -  Video fragmentation issues with Android 61  
  62. 62. Mobile Video Formats RIM Apple Microsoft Google Nokia Palm BBOS iPhone OS Win Mobile Android Symbian Palm OSMP4 / 3GP M4V / MP4 WMV / 3GP MP4 / SWF MP4 / WMV MP4 / H263files (wide) files files files files Credit: OnPoint Digital 62  
  63. 63. Mobile Lessons Learned•  Create. Don’t convert! •  Scope: You can support all device types. Narrow the scope and focus on consistent user experience •  Mobile first approach: potential for both a desktop and mobile deliverable from single code base •  SCORM on mobile browsers works, but provides a poor user experience –  What level of tracking is actually needed? Bookmarking, completion, assessment, etc. •  Mobile Apps can be developed using HTML5 and support multiple platforms (both native and web) 63  
  64. 64. Don’t Get Hung Up on Platforms!Think About: Requirements, Content, and User Experience I’m at Native App… I’m a Web App… I’m a Hybrid App…So What! Credit: OnPoint Digital 64  
  65. 65. Developing for Mobile Is Tough! a balancing act… 65  
  66. 66. Resources http://adlmobile.wikispaces.com 66  
  67. 67. Resources http://research.adlnet.gov/newsletter/mobile 67  
  68. 68. Other Resources – What I’m Reading •  Beginning Building Mobile Application Development in the Cloud (November 2011) By Richard Rodger •  Head First Mobile Web (December 2011) By Lyza Danger Gardner and Jason Grigsby •  jQuery Mobile: Up and Running, 1st Edition (July 2011) By Maximiliano Firtman •  Programming HTML5 Applications (May 2011)By Zachary Kessin •  Designing mLearning (February 2011) By Clark Quinn New and Upcoming Books on Mobile! 68  
  69. 69. Homo Textus…Don’t Text and Drive! You Know Who You Are! 69  
  70. 70. Don’t Text and Fly! 2011! Happy Halloween  70  
  71. 71. More Photo Credits•  http://www.flickr.com/photos/adactio/6153558098/in/set-72157627691092806 •  http://www.flickr.com/photos/danzen/4137160631/ •  http://filamentgroup.com/lab/building_with_jquery_mobile/ •  http://www.chrisumiastowski.com/heres-another-reason-why-apps-die •  http://theinvisiblegorilla.com/blog/2010/10/25/dont-text-and-fly/ 71  
  72. 72. Questions / Discussion Jason Haag Mobile Learning Research Analyst   jason.haag.ctr@adlnet.gov   Twi^er:  @J_Haag,  @ADLmobile   h^p://www.linkedin.com/in/jasonhaag   Let’s Connect! 72  
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×