Mobile Learning Basics + (Free)   Mobile Learning Guide      Thursday, 28 July 2011     Judy Brown and Jason Haag
Let s Discuss...•  Basics of Mobile Learning  –  Why?  –  What?•  ADL mLearning Guide  –  What?  –  How?•  Resources•  Que...
ADL Mobile TeamVision	                          Knowledge	                     Deliverables	                Research	  • T...
Where are you employed?A.  CorporationB.  Non-profitC.  Higher education or K-12D.  GovernmentE.  Self                    ...
What are your responsibilities?A.  ManagerB.  Instructional DesignerC.  DeveloperD.  Subject Matter ExpertE.  All of the a...
How often do you use your mobile device(s)         to access content online?A.  DailyB.  A few times per weekC.  A few tim...
Growth         7
Mobile Data Usage                    8
Mobile Has 8 Unique Benefits1.  Mobile is first personal mass    medium2.  Permanently Connected3.  Always Carried4.  Buil...
Mobile Life•    Available•    Personal•    Connected•    Ubiquitous                   10
Define Mobile                 Netbook /                       Tablet / Laptop          Micro PC       Cell Phone      iPad...
Have you ever learned anything    from your mobile device?A.  Completed a course or used for performance    supportB.  Use...
Define Mobile Learning The exploitation of       Mobile learning, or m-ubiquitous handheld       learning, can be anytechn...
ADL Mobile Learning DefinitionADL defines mobilelearning as the use ofhandheld or wearablecomputing devices toprovide acce...
From Twitter               15
Ambient Insight       16
Five Moments of Learning Needs•  When   learning for the first   time•  When   wanting to learn   more•  When   trying to ...
Where do you feel that mobile capabilities are the MOST appropriate?A.  When learning for the first timeB.  When wanting t...
Five Moments of Learning Needs•  When learning for the first time•  When wanting to learn more                            ...
Seymour Papert, MIT"You cant teach peopleeverything they need toknow. The best you can dois position them where theycan fi...
Think Outside the Course                           21
“Shiny Rectangle Syndrome”•  It’s not about   devices, but   capabilities•  It’s about the   experience—not   the technolo...
What are your plans to incorporate mobile   technology for performance support and/or training within your organization?A....
ADL mLearning Guide•    Problem•    Platforms•    Lessons Learned•    Next Steps                       http://mlearn.adlne...
Content•    Introduction•    Basics•    Planning•    Learning Content•    Development Options•    Design Considerations•  ...
http://filamentgroup.com/lab/building_with_jquery_mobile/                                                 26
Mobile Device Categories•  “There is no single solution to push richly   interactive mobile content onto every possible   ...
Tools Used•  HTML editor (Dreamweaver CS 5.5)•  Graphics editor (Fireworks)•  jQuery Mobile Framework•  Books  –    Progra...
Seven Simple Rules for MobileRule #1: Forget what you think you knowRule #2: Believe what you see, not what you read.Rule ...
30
Native App, Web App, orBoth?               Source: Global Intelligence Alliance                                           ...
32
Native Apps: When to Develop                               33
Native Apps: When to Develop                               34
Mobile Web Apps: When to   Develop•  When you seek cross-platform compatibility•  When you can’t support the development o...
Mobile Web Apps: When toDevelop                           36
Mobile Web: Balancing Act                            37
Mobile Web: App Stores                         38
The Web Is An App Platform!W3C Standards for Web Apps on Mobile (Feb 2011)  –  http://www.w3.org/2011/02/mobile-web-app-st...
Native App Store vs. Mobile WebApp Store                                  40
Web App Stores: On the RiseMozilla’s Open Web App Store (2010)      •  http://apps.mozillalabs.comOpen App Market (2010)  ...
Mobile Web: Frameworks•  Allows Mobile Web Apps to look and feel like   native Apps•  Developed using Web Standards (HTML,...
Mobile Web App Frameworks•  HTML, CSS, JavaScript Only  –  iWebkit  –  JQTouch (JQuery Touch)  –  iUI (iPhone User Interfa...
History Repeats Itself                  http://filamentgroup.com/lab/building_with_jquery_mobile/                         ...
Future Looks Bright - JQuery    Mobile•  Web App Framework based on Progressive Enhancement   Approach and Responsive Desi...
JQuery Mobile –http://jquerymobile.com                          46
Progressive Enhancement =  Mobile First!The Chocolaty Layers of Progressive Enhancement                                   ...
Mobile First!                48
Mobile Web: Approach             Comparison                     Graceful	  Degrada3on	                                    ...
mLearning Guide (Version 1)      (Also created an ePub version)                                       50
mLearning Guide (Version 2)                              51
Design Decisions•  Learning Curve (Knowledge of Dreamweaver,   HTML, CSS, JavaScript)•  Simplified Navigation (usability)•...
Distribution•  Mobile Web:  –  http://mlearn.adlnet.gov  –  http://mlearn.adlnet.mobi (mirror)•  Apple iTunes App Store•  ...
Distribution               54
Where’s the Gap? To the Cloud!                                 55
Recent AnnouncementsDreamweaver CS 5.5 –  Added support for JQuery Mobile framework! –  Added support for PhoneGap! –  Bui...
Lessons Learned•  Progressive enhancement is a best practice   necessary to support low-end mobile devices•  Some device &...
Lessons Learned (Continued)•  Adapt content appropriately for each device   (using CSS media queries allow you to scale to...
Next StepsMaintenance & Updates  –  Contextual updates  –  Framework updates  –  Search  –  Other App Store submissions   ...
Key IdeasWhat are the key ideas you’llapply from today’s session?(Please enter in Chat)                                60
Resources            http://adlmobile.wikispaces.com                                         61
mLearning Guide             http://adlmobile.wikispaces.com/Guide                                             62
Weekly Newsletter      http://research.adlnet.gov/newsletter/mobile                                                63
Questions / Discussion        Judy Brown (@judyb)        Contractor with Katmai Support Services        judy.brown.ctr@adl...
Upcoming SlideShare
Loading in...5
×

Mobile Learning Guide App: Webinar for Training MagazineLearned

1,158

Published 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.

Published in: Education, Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,158
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile Learning Guide App: Webinar for Training MagazineLearned

  1. 1. Mobile Learning Basics + (Free) Mobile Learning Guide Thursday, 28 July 2011 Judy Brown and Jason Haag
  2. 2. Let s Discuss...•  Basics of Mobile Learning –  Why? –  What?•  ADL mLearning Guide –  What? –  How?•  Resources•  Questions/Discussion 2
  3. 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. 4. Where are you employed?A.  CorporationB.  Non-profitC.  Higher education or K-12D.  GovernmentE.  Self 4
  5. 5. What are your responsibilities?A.  ManagerB.  Instructional DesignerC.  DeveloperD.  Subject Matter ExpertE.  All of the aboveF.  Other (please add to Chat) 5
  6. 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. 7. Growth 7
  8. 8. Mobile Data Usage 8
  9. 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. 10. Mobile Life•  Available•  Personal•  Connected•  Ubiquitous 10
  11. 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. 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. 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. 14. ADL Mobile Learning DefinitionADL defines mobilelearning as the use ofhandheld or wearablecomputing devices toprovide access tolearning content andinformationresources. 14
  15. 15. From Twitter 15
  16. 16. Ambient Insight 16
  17. 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. 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. 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. 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. 21. Think Outside the Course 21
  22. 22. “Shiny Rectangle Syndrome”•  It’s not about devices, but capabilities•  It’s about the experience—not the technology 22
  23. 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. 24. ADL mLearning Guide•  Problem•  Platforms•  Lessons Learned•  Next Steps http://mlearn.adlnet.gov 24
  25. 25. Content•  Introduction•  Basics•  Planning•  Learning Content•  Development Options•  Design Considerations•  Glossary•  Resources 25
  26. 26. http://filamentgroup.com/lab/building_with_jquery_mobile/ 26
  27. 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. 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. 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. 30
  31. 31. Native App, Web App, orBoth? Source: Global Intelligence Alliance 31
  32. 32. 32
  33. 33. Native Apps: When to Develop 33
  34. 34. Native Apps: When to Develop 34
  35. 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. 36. Mobile Web Apps: When toDevelop 36
  37. 37. Mobile Web: Balancing Act 37
  38. 38. Mobile Web: App Stores 38
  39. 39. The Web Is An App Platform!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 39
  40. 40. Native App Store vs. Mobile WebApp Store 40
  41. 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) •  http://chrome.google.com/webstoreGetJar HTML5 Mobile Web App Store •  http://www.getjar.comOpera Mobile Web App Store (2011) •  http://apps.mozillalabs.comOpen Space (Under Development) •  https://www.developerscoop.org 41
  42. 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. 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. 44. History Repeats Itself http://filamentgroup.com/lab/building_with_jquery_mobile/ 44
  45. 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. 46. JQuery Mobile –http://jquerymobile.com 46
  47. 47. Progressive Enhancement = Mobile First!The Chocolaty Layers of Progressive Enhancement 47
  48. 48. Mobile First! 48
  49. 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. 50. mLearning Guide (Version 1) (Also created an ePub version) 50
  51. 51. mLearning Guide (Version 2) 51
  52. 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. 53. Distribution•  Mobile Web: –  http://mlearn.adlnet.gov –  http://mlearn.adlnet.mobi (mirror)•  Apple iTunes App Store•  Android Market•  Open App Market 53
  54. 54. Distribution 54
  55. 55. Where’s the Gap? To the Cloud! 55
  56. 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. 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. 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. 59. Next StepsMaintenance & Updates –  Contextual updates –  Framework updates –  Search –  Other App Store submissions 59
  60. 60. Key IdeasWhat are the key ideas you’llapply from today’s session?(Please enter in Chat) 60
  61. 61. Resources http://adlmobile.wikispaces.com 61
  62. 62. mLearning Guide http://adlmobile.wikispaces.com/Guide 62
  63. 63. Weekly Newsletter http://research.adlnet.gov/newsletter/mobile 63
  64. 64. Questions / Discussion Judy Brown (@judyb) Contractor with Katmai Support Services judy.brown.ctr@adlnet.gov Jason Haag (@J_Haag) Contractor with The Tolliver Group jason.haag.ctr@adlnet.gov 64

×