Mobile Learning Guide App: Webinar for Training MagazineLearned

Uploaded on

The ADL Mobile Learning Team recently released a mobile version of their mLearning Guide on the web and in various mobile platforms and app stores using the jQuery Mobile framework and PhoneGap.

The ADL Mobile Learning Team recently released a mobile version of their mLearning Guide on the web and in various mobile platforms and app stores using the jQuery Mobile framework and PhoneGap.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Mobile Learning Basics + (Free) Mobile Learning Guide Thursday, 28 July 2011 Judy Brown and Jason Haag
  • 2. Let s Discuss...•  Basics of Mobile Learning –  Why? –  What?•  ADL mLearning Guide –  What? –  How?•  Resources•  Questions/Discussion 2
  • 3. ADL Mobile TeamVision   Knowledge   Deliverables   Research  • To  be  the  source   • Track  ini3a3ves   • Develop  samples   • Collect  literature   of  informa3on   and  share   • Iden3fy  tools   and  review   and  support  for   • Remain  current   • Conduct   • Share  best   DoD  mobile   and  provide   workshops  and   prac3ces   learning   weekly  newsle@er   webinars   • Support  BAAs   ini3a3ves.   • Deliver   • Write  papers   presenta3ons   • Facilitate  working   • Collect  use  cases   group   3
  • 4. Where are you employed?A.  CorporationB.  Non-profitC.  Higher education or K-12D.  GovernmentE.  Self 4
  • 5. What are your responsibilities?A.  ManagerB.  Instructional DesignerC.  DeveloperD.  Subject Matter ExpertE.  All of the aboveF.  Other (please add to Chat) 5
  • 6. How often do you use your mobile device(s) to access content online?A.  DailyB.  A few times per weekC.  A few times per monthD.  A few times per yearE.  Never 6
  • 7. Growth 7
  • 8. Mobile Data Usage 8
  • 9. Mobile Has 8 Unique Benefits1.  Mobile is first personal mass medium2.  Permanently Connected3.  Always Carried4.  Built-in Payment Channel5.  Available at Creative Impulse6.  Has Most Accurate Audience Info7.  Captures Social Context of Consumption Source: Tomi Ahonen book8.  Enables Augmented Reality Mobile as 7th of the Mass Media, 2008 9
  • 10. Mobile Life•  Available•  Personal•  Connected•  Ubiquitous 10
  • 11. Define Mobile Netbook / Tablet / Laptop Micro PC Cell Phone iPad, etc. UMPC / MID Wearable or Game Device Combination Player Handheld / (e-book reader/(Audio/Video) PDA USB Drive) 11
  • 12. Have you ever learned anything from your mobile device?A.  Completed a course or used for performance supportB.  Used a search engineC.  Geographical travel informationD.  Never learned anythingE.  Don’t have a connected device 12
  • 13. Define Mobile Learning The exploitation of Mobile learning, or m-ubiquitous handheld learning, can be anytechnologies, together educational interactionwith wireless and delivered through mobilemobile phone networks, technology and accessedto facilitate, support, at a student’senhance and extend convenience from anythe reach of teaching location.and learning. MoleNET Educause ELI 13
  • 14. ADL Mobile Learning DefinitionADL defines mobilelearning as the use ofhandheld or wearablecomputing devices toprovide access tolearning content andinformationresources. 14
  • 15. From Twitter 15
  • 16. Ambient Insight 16
  • 17. Five Moments of Learning Needs•  When learning for the first time•  When wanting to learn more•  When trying to remember•  When things change Dr. Conrad Gottfredson•  When something goes wrong 17
  • 18. Where do you feel that mobile capabilities are the MOST appropriate?A.  When learning for the first timeB.  When wanting to learn moreC.  When trying to rememberD.  When things changeE.  When something goes wrong 18
  • 19. 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 19
  • 20. Seymour Papert, MIT"You cant teach peopleeverything they need toknow. The best you can dois position them where theycan find what they need toknow when they need toknow it." 20
  • 21. Think Outside the Course 21
  • 22. “Shiny Rectangle Syndrome”•  It’s not about devices, but capabilities•  It’s about the experience—not the technology 22
  • 23. What are your plans to incorporate mobile technology for performance support and/or training within your organization?A.  We already use mobile technologyB.  We are researching the concepts, but haven’t started using mobile technologyC.  We plan to support mobile technology in the next 1-6 monthsD.  We plan to support mobile technologies in the next 6-12 monthsE.  No plans at this time 23
  • 24. ADL mLearning Guide•  Problem•  Platforms•  Lessons Learned•  Next Steps 24
  • 25. Content•  Introduction•  Basics•  Planning•  Learning Content•  Development Options•  Design Considerations•  Glossary•  Resources 25
  • 26. 26
  • 27. Mobile Device Categories•  “There is no single solution to push richly interactive mobile content onto every possible phone. Rather, there is a spectrum of possible solutions:•  On one side, going for the richest possible interactivity...and on the other side going for the widest possible phone coverage.” - Geoff Stead 27
  • 28. Tools Used•  HTML editor (Dreamweaver CS 5.5)•  Graphics editor (Fireworks)•  jQuery Mobile Framework•  Books –  Programming the Mobile Web , Maximiliano Firtman –  Mobile Design and Development , Brian Fling –  HTML5: Up and Running , Mark Pilgrim 28
  • 29. Seven Simple Rules for MobileRule #1: Forget what you think you knowRule #2: Believe what you see, not what you read.Rule #3: Don’t start with constraints.Rule #4: Focus on context, goals, and needs.Rule #5: You can’t support everything.Rule #6: Don’t convert, create!Rule #7: Keep it simple.from “Mobile Design and Development: Practical Concepts andTechniques for Creating Mobile Sites and Web Apps” by Brian Fling 29
  • 30. 30
  • 31. Native App, Web App, orBoth? Source: Global Intelligence Alliance 31
  • 32. 32
  • 33. Native Apps: When to Develop 33
  • 34. Native Apps: When to Develop 34
  • 35. Mobile Web Apps: When to Develop•  When you seek cross-platform compatibility•  When you can’t support the development of Native Apps using proprietary SDKs•  When accessibility is a requirement•  When using more advanced capabilities of the device isn’t required (e.g. offline, camera, gyroscope) 35
  • 36. Mobile Web Apps: When toDevelop 36
  • 37. Mobile Web: Balancing Act 37
  • 38. Mobile Web: App Stores 38
  • 39. The Web Is An App Platform!W3C Standards for Web Apps on Mobile (Feb 2011) – –  Current Status: mobileapp#w3c_all 39
  • 40. Native App Store vs. Mobile WebApp Store 40
  • 41. Web App Stores: On the RiseMozilla’s Open Web App Store (2010) •  http://apps.mozillalabs.comOpen App Market (2010) •  http://www.openappmkt.comChrome Web Store (2010) • HTML5 Mobile Web App Store •  http://www.getjar.comOpera Mobile Web App Store (2011) •  http://apps.mozillalabs.comOpen Space (Under Development) • 41
  • 42. Mobile Web: Frameworks•  Allows Mobile Web Apps to look and feel like native Apps•  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•  Some include API & compiler - packaged as Native App 42
  • 43. Mobile Web App Frameworks•  HTML, CSS, JavaScript Only –  iWebkit –  JQTouch (JQuery Touch) –  iUI (iPhone User Interface)•  HTML, CSS, JavaScript + Native App Publishing –  Rhodes & RhoHub –  Sencha Touch –  Titanium Appcelerator•  Native App Packaging using Existing Web Apps/Content –  PhoneGap 43
  • 44. History Repeats Itself 44
  • 45. Future Looks Bright - JQuery Mobile•  Web App Framework based on Progressive Enhancement Approach and Responsive Design techniques•  Easy to setup, optimized for mobile browsers, requires knowledge of HTML (advanced techniques require knowledge of CSS & JavaScript)•  Unified user interface system across all popular mobile device platforms•  Light-weight mobile-friendly version of JQuery (JavaScript Library) 45
  • 46. JQuery Mobile – 46
  • 47. Progressive Enhancement = Mobile First!The Chocolaty Layers of Progressive Enhancement 47
  • 48. Mobile First! 48
  • 49. Mobile Web: Approach Comparison Graceful  Degrada3on   Progressive  Enhancement  Browser-­‐focused   Content-­‐focused  Test  high-­‐end  browsers  first;  low-­‐end    browsers   Supports  low-­‐end  browsers;  if  high  end  available  last   then  add  enhancements  Looks  at  Accessibility  Last   Looks  at  Accessibility  First  May  Require  Browser  and/or  Device  Detec3on   Possible  to  support  most  smartphone  browsers  with  Server-­‐side  Scrip3ng   and  some  older  devices  with  only  HTML,   JavaScript,  CSS   49
  • 50. mLearning Guide (Version 1) (Also created an ePub version) 50
  • 51. mLearning Guide (Version 2) 51
  • 52. Design Decisions•  Learning Curve (Knowledge of Dreamweaver, HTML, CSS, JavaScript)•  Simplified Navigation (usability)•  Small download•  Accessible as both Native and Web App•  Cross-platform compatibility•  Ease of deployment 52
  • 53. Distribution•  Mobile Web: – – (mirror)•  Apple iTunes App Store•  Android Market•  Open App Market 53
  • 54. Distribution 54
  • 55. Where’s the Gap? To the Cloud! 55
  • 56. Recent AnnouncementsDreamweaver CS 5.5 –  Added support for JQuery Mobile framework! –  Added support for PhoneGap! –  Build Web Apps or Native Apps using HTML5 and web technologies 56
  • 57. Lessons Learned•  Progressive enhancement is a best practice necessary to support low-end mobile devices•  Some device & browser default settings must be configured•  Device detection is sometimes necessary for delivering video consistently•  .png should be your preferred format (compressed for mobile)•  Progressively Enhance Using CSS and JavaScript 57
  • 58. Lessons Learned (Continued)•  Adapt content appropriately for each device (using CSS media queries allow you to scale to iPad and larger screens)•  Device detection might be necessary for supporting mid to low-end mobile browsers•  An emulator is not always consistent with the actual device•  Limited support for Flash player•  Poor / inconsistent support for pop up windows and framesets•  Limited video support –  Varying formats supported 58
  • 59. Next StepsMaintenance & Updates –  Contextual updates –  Framework updates –  Search –  Other App Store submissions 59
  • 60. Key IdeasWhat are the key ideas you’llapply from today’s session?(Please enter in Chat) 60
  • 61. Resources 61
  • 62. mLearning Guide 62
  • 63. Weekly Newsletter 63
  • 64. Questions / Discussion Judy Brown (@judyb) Contractor with Katmai Support Services Jason Haag (@J_Haag) Contractor with The Tolliver Group 64