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.
Mobile Learning Guide App: Webinar for Training MagazineLearned
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
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
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
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
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
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
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
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
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
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
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
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
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