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.

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 Team
Vision
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. Corporation
B. Non-profit
C. Higher education or K-12
D. Government
E. Self
4

5. What are your responsibilities?
A. Manager
B. Instructional Designer
C. Developer
D. Subject Matter Expert
E. All of the above
F. Other (please add to Chat)
5

6. How often do you use your mobile device(s)
to access content online?
A. Daily
B. A few times per week
C. A few times per month
D. A few times per year
E. Never
6

7. Growth
7

8. Mobile Data Usage
8

9. Mobile Has 8 Unique Benefits
1. Mobile is first personal mass
medium
2. Permanently Connected
3. Always Carried
4. Built-in Payment Channel
5. Available at Creative Impulse
6. Has Most Accurate Audience
Info
7. Captures Social Context of
Consumption Source: Tomi Ahonen book
8. 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
support
B. Used a search engine
C. Geographical travel information
D. Never learned anything
E. Don’t have a connected device
12

13. Define Mobile Learning
The exploitation of Mobile learning, or m-
ubiquitous handheld learning, can be any
technologies, together educational interaction
with wireless and delivered through mobile
mobile phone networks, technology and accessed
to facilitate, support, at a student’s
enhance and extend convenience from any
the reach of teaching location.
and learning.
MoleNET Educause ELI
13

14. ADL Mobile Learning Definition
ADL defines mobile
learning as the use of
handheld or wearable
computing devices to
provide access to
learning content and
information
resources.
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 time
B. When wanting to learn more
C. When trying to remember
D. When things change
E. 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 can't teach people
everything they need to
know. The best you can do
is position them where they
can find what they need to
know when they need to
know 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 technology
B. We are researching the concepts, but haven’t
started using mobile technology
C. We plan to support mobile technology in the
next 1-6 months
D. We plan to support mobile technologies in the
next 6-12 months
E. No plans at this time
23

24. ADL mLearning Guide
• Problem
• Platforms
• Lessons Learned
• Next Steps
http://mlearn.adlnet.gov
24

25. Content
• Introduction
• Basics
• Planning
• Learning Content
• Development Options
• Design Considerations
• Glossary
• Resources
25

26. http://filamentgroup.com/lab/building_with_jquery_mobile/
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 Mobile
Rule #1: Forget what you think you know
Rule #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 and
Techniques for Creating Mobile Sites and Web Apps” by Brian Fling
29

30. 30

31. Native App, Web App, or
Both?
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 to
Develop
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)
– http://www.w3.org/2011/02/mobile-web-app-state.html
– Current Status: http://www.w3.org/standards/techs/
mobileapp#w3c_all
39

40. Native App Store vs. Mobile Web
App Store
40

41. Web App Stores: On the Rise
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
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
http://filamentgroup.com/lab/building_with_jquery_mobile/
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 –
http://jquerymobile.com
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:
– http://mlearn.adlnet.gov
– http://mlearn.adlnet.mobi (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 Announcements
Dreamweaver 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 Steps
Maintenance & Updates
– Contextual updates
– Framework updates
– Search
– Other App Store submissions
59

60. Key Ideas
What are the key ideas you’ll
apply from today’s session?
(Please enter in Chat)
60

61. Resources
http://adlmobile.wikispaces.com
61

62. mLearning Guide
http://adlmobile.wikispaces.com/Guide
62

63. Weekly Newsletter
http://research.adlnet.gov/newsletter/mobile
63

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