View
3.710
Download
5
Embed Size (px)
DESCRIPTION
"Developing for Mobile: Tools, Tips, and Deployment Options" for Training Magazine Learning 3.0 Conference in Chicago October 3-5, 2011
Citation preview
Jason Haag Mobile Learning Research Analyst The Tolliver Group, Inc.
Developing for Mobile:
Tools, Tips, and Deployment Options
Stages of Human Evolution…
Are We Evolving ? 2
Scientists Suggest…
Our fingertips are changing! 3
4
Or Is It A Sign?
Prepare for the Zombie Apocalypse!
5
ADL Mobile Learning Team
Judy Brown and Jason Haag 6
Mobile Me…
Since 2003 7
8
ADL defines mobile learning as the use of handheld or wearable computing devices to provide access to learning content and information resources.
9
ADL Mobile Learning Definition
• When learning for the first time • When wanting to learn more • When trying to remember • When things change • When something goes wrong
10
Dr. Conrad Gottfredson
Five Moments of Learning Needs
Which One Is Most Appropriate for Mobile?
• When learning for the first time • When wanting to learn more���
• When trying to remember • When things change • When something goes wrong
11
Learn
Perform
Five Moments of Learning Needs
12
Field guide
Micro learning Review/remember
Just-‐in-‐Fme
Audio recordings
Video recordings
Quiz
Test
Poll
Survey
Feedback
Geo-‐exploraFon
LocaFon
specific
Capture/share/document ReporFng
Note taking
Reference
Coaching/mentoring
Job aid/check list
Updates
Alerts
Game-‐based learning
SimulaFon
Augmented reality Assignments
Reminders
Conferencing
TranslaFon
TranscripFon Geo-‐blogging
OrganizaFon
On-‐demand access
Procedures
PresentaFons Decision support
EvaluaFon Contextualized learn
ing
Modules, Courses,
What Else?
Modules, Courses,
What Else?
E-‐books
Much More Than Courses…
Mobile Learning Opportunities!
13
“Think Outside the Course”
Judy Brown
14
15
ADL’s Mobile Learning Handbook http://mlhandbook.adlnet.gov
We are also working with TSWG Combating Terrorism on conducting Market research on companies that offer mobile learning products.
Want to participate? Want to be added? Contact Us:
16
17
ADL Mobile Learning Guide: Mobile Web Deployment
http://mlearn.adlnet.gov or http://mlearn.adlnet.mobi (mirror)
18
iTunes App Store
Native App Distribution
Android Market & iPhone App Store
19
iTunes App Store
USA.gov App Store Deployment
http://apps.usa.gov/adl-mlearning-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
20
ADL Mobile Learning Guide
How Did We Do It?
21
22
23
24
Mobile Apps Must Die!
“Native Apps Are Becoming Too Much To Organize & Maintain” Is Value > Pain ? - Scott Jenson, @scottjenson
25 25
I’m a PC…I’m a Mac
Yeah…whatever
Source: Global Intelligence Alliance 26 26
I’m a Native App…I’m a Web App
What’s the Difference?
The question is no longer, “Which do we develop for, native or mobile web?” but...
27
The Wrong 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
The Right Question
You Need A…
29
Dave Olsen, @dmolsen
• 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
Native App SDKs = Develop for Many Platforms
Must Support Several Platforms & No Browsers 30
Emulators Anyone?
31
http://www.mobilexweb.com/emulators
32
• SwebApps • AppIncubator • Kanchoo • AppBreeder • MyAppBuilder • BuildAnApp • eBookApp • GameSalad • MobileRoadie • MobBase
• TapLynx • Appanda • AppMakr • App.co • Appswell • UNITYMobile • And many others…
Quick Alternatives…
Do-It-Yourself Toolkits
33
Do-It-Yourself Toolkits
No Coding Required, BUT…
34
Why the Mobile Web?
1 out of every 5 people by 2013
Balancing Views 35
Mobile App Development
36
Deployment Options
Support Native Only… or Web & Native?
37
• 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
Standards
The Web is an App Platform!
“Not every mobile device will have your app on it, but every mobile device will have a browser.”
-‐ Jason Grigsby, @grigs
38
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
39
Web App Stores…
On the Rise
• 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
Mobile Web App Frameworks
41
History Repeats Itself!
Don’t Just Target Webkit Browsers!
42
• 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
Mobile Web App Frameworks
43
Mobile Web App Frameworks
http://adlmobile.wikispaces.com
• http://kurogo.org • http://mollyproject.org • http://mwf.ucla.edu • http://www.jasig.org/umobile
Mobile Web Frameworks in Higher Ed
Support Both Native and Mobile Web 44
45
Report from MOLE (March 2011)
http://www.mole-project.net
46
• 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
Device Detection
If You Can’t Create and Must Convert…
47
Used for XHTML/CSS for basic version
Used iWebkit HTML5 & CSS for advanced version
Used device detection
h^p://webguide.ua.edu/mobile.html
Content Adaptation aka “Device Detection”
Maintenance Nightmare!
Feature Detection Is A Better Approach
48
JavaScript Library: http://modernizr.com
The Chocolaty Layers of Progressive Enhancement
49
The Peanut M&M Analogy
Progressive Enhancement = Mobile First
50
Mobile First Strategy
Naturally Improves Information Achitecture
HTML5 Responsive Design
The Boston Globe (Desktop Browser) 51
HTML5 Responsive Design
52
The Boston Globe (Tablet Browser)
HTML5 Responsive Design: CSS Media Queries
The Boston Globe (Mobile Browser) 53
54
jQuery Mobile
http://jquerymobile.com
55
Dreamweaver CS5.5 “Mobile Starters”
Samples Included!
<body> <!-- Start of first page --> <div data-role="page" id="foo”> <div data-role="header"> <h1>Foo</h1> </div> <!-- /header -->
<div data-role="content"> <p>I'm first in the source order so I'm shown as the page.</p> <p>View internal page called <a href="#bar">bar</a></p> </div> <!-- /content -->
<div data-role="footer"> <h4>Page Footer</h4> </div> <!-- /footer --> </div> <!-- /page -->
56
EASY HTML!
Header, Content Body, Footer
57
Maintenance & Updates
– Contextual updates
– Framework updates
– Search functionality
– More App Store Distribution • Windows Phone
• BlackBerry
• Open Web App Stores
58
Next Steps
Mobile Learning Guide (App)
59
jQuery Mobile + PhoneGap =
Write Once, Deploy to Multiple Platforms
60
Where’s the Gap?
To the Cloud!
61
• 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
Mobile Lessons Learned
62
WMV / 3GP files
MP4 / SWF files
MP4 / WMV files
M4V / MP4 (wide)
MP4 / 3GP files
MP4 / H263 files
Microsoft Win Mobile
Google Android
Nokia Symbian
Apple iPhone OS
RIM BBOS
Palm Palm OS
Credit: OnPoint Digital
Mobile Video Formats
63
• 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)
Mobile Lessons Learned
64
Credit: OnPoint Digital
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!
Developing for Mobile Is Tough!
a balancing act…
65
66
Resources
http://adlmobile.wikispaces.com
67
Resources
http://research.adlnet.gov/newsletter/mobile
Other Resources – What I’m Reading
New and Upcoming Books on Mobile! 68
• 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
Homo Textus…Don’t Text and Drive!
You Know Who You Are! 69
2011!
Don’t Text and Fly!
Happy Halloween 70
• 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/
More Photo Credits
71
72
Jason Haag Mobile Learning Research Analyst [email protected] Twi^er: @J_Haag, @ADLmobile h^p://www.linkedin.com/in/jasonhaag
Questions / Discussion
Let’s Connect!