"Developing for Mobile: Tools, Tips, and Deployment Options" for Training Magazine Learning 3.0 Conference in Chicago October 3-5, 2011

1. Developing for Mobile:
Tools, Tips, and Deployment Options
Jason Haag
Mobile Learning Research Analyst
The Tolliver Group, Inc.

2. Stages of Human Evolution…
Are We Evolving ?
2

3. Scientists Suggest…
Our fingertips are changing!
3

4. Or Is It A Sign?
Prepare for the Zombie Apocalypse!
4

5. 5

6. ADL Mobile Learning Team
Judy Brown and Jason Haag
6

7. Mobile Me…
Since 2003
7

8. 8

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

10. Five Moments of Learning Needs
• When learning for the first time
• When wanting to learn more
• When trying to remember
• When things change
• When something goes wrong
Dr. Conrad Gottfredson
Which One Is Most Appropriate for Mobile?
10

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

12. Much More Than Courses…
EvaluaFon
rning
Contextualized
lea
on
Field
guide
Quiz
Poll
Just-­‐in-­‐Fme
LocaF
c
specifi
Review/remember
Micro
learning Feedback
Modules,
Video
recordings
Alerts
Survey
Geo-­‐blogging
Courses,
Note
taking
Fon
What
Else?
Tr anscrip Test
ings
Assdio
record
d
acce u
n
On-­‐deman Geo-­‐exploraFo Reminders
Capture/share/document
ReporFng
Reference
Procedure
s
Updates
Conferencing
Game-­‐based
learning
on
SimulaF toring OrganizaFon
Coaching/men
list
Job
aid/check
Assignmen
ts
TranslaFon Augmented
reality
Decision
support
PresentaFons
E-­‐books
Mobile Learning Opportunities!
12

13. “Think Outside the Course”
Judy Brown
13

14. 14

15. 15

16. 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:
adlmobile@adlnet.gov
16

17. ADL Mobile Learning Guide: Mobile Web Deployment
http://mlearn.adlnet.gov or http://mlearn.adlnet.mobi (mirror)
17

18. Native App Distribution
iTunes
App
Store
Android Market iPhone App Store
18

19. USA.gov App Store Deployment
iTunes
App
Store
http://apps.usa.gov/adl-mlearning-guide/
19

20. ADL Mobile Learning 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
How Did We Do It?
20

21. 21

22. 22

23. 23

24. Mobile Apps Must Die!
“Native Apps Are Becoming Too Much To Organize Maintain”
Is Value Pain ? - Scott Jenson, @scottjenson
24

25. I’m a PC…I’m a Mac
Yeah…whatever 
25
25

26. I’m a Native App…I’m a Web App
What’s the Difference?
26
Source:
Global
Intelligence
Alliance
26

27. The Wrong Question
The question is no longer, “Which do we
develop for, native or mobile web?” but...
27

28. The Right 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

29. You Need A…
Dave Olsen, @dmolsen
29

30. Native App SDKs = Develop for Many Platforms
• 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
Must Support Several Platforms No Browsers
30

31. Emulators Anyone?
http://www.mobilexweb.com/emulators
31

32. Quick Alternatives…
• SwebApps
• TapLynx
• AppIncubator
• Appanda
• Kanchoo
• AppMakr
• AppBreeder
• App.co
• MyAppBuilder
• Appswell
• BuildAnApp
• UNITYMobile
• eBookApp
• And many others…
• GameSalad
• MobileRoadie
• MobBase
Do-It-Yourself Toolkits
32

33. Do-It-Yourself Toolkits
No Coding Required, BUT…
33

34. Why the Mobile Web?
1
out
of
every
5
people
by
2013
34

35. Mobile App Development
Balancing Views
35

36. Deployment Options
Support Native Only… or Web Native?
36

37. Standards
• 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
The Web is an App Platform!
37

38. “Not
every
mobile
device
will
have
your
app
on
it,
but
every
mobile
device
will
have
a
browser.”
-­‐
Jason
Grigsby,
@grigs
38

39. Web App Stores…
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
On the Rise
39

40. Mobile Web App Frameworks
• 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

41. History Repeats Itself!
Don’t Just Target Webkit Browsers!
41

42. Mobile Web App Frameworks
• 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
42

43. Mobile Web App Frameworks
http://adlmobile.wikispaces.com
43

44. Mobile Web Frameworks in Higher Ed
• http://kurogo.org
• http://mollyproject.org
• http://mwf.ucla.edu
• http://www.jasig.org/umobile
Support Both Native and Mobile Web
44

45. Report from MOLE (March 2011)
http://www.mole-project.net
45

46. Device Detection
• 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
If You Can’t Create and Must Convert…
46

47. Content Adaptation aka “Device Detection”
 Used for XHTML/
CSS for basic
version
 Used iWebkit
HTML5 CSS for
advanced version
 Used device
detection
h^p://webguide.ua.edu/mobile.html
Maintenance Nightmare!
47

48. Feature Detection Is A Better Approach
JavaScript Library: http://modernizr.com
48

49. The Peanut MM Analogy
The Chocolaty Layers of Progressive Enhancement
Progressive Enhancement = Mobile First
49

50. Mobile First Strategy
Naturally Improves Information Achitecture
50

51. HTML5 Responsive Design
The Boston Globe (Desktop Browser)
51

52. HTML5 Responsive Design
The Boston Globe (Tablet Browser)
52

53. HTML5 Responsive Design: CSS Media Queries
The Boston Globe (Mobile Browser)
53

54. jQuery Mobile
http://jquerymobile.com
54

55. Dreamweaver CS5.5 “Mobile Starters”
Samples Included!
55

56. EASY HTML!
body
!-- Start of first page --
div data-role=page id=foo”
div data-role=header
h1Foo/h1
/div
!-- /header --
div data-role=content
pI'm first in the source order so I'm shown as the page./p
pView internal page called a href=#barbar/a/p
/div
!-- /content --
div data-role=footer
h4Page Footer/h4 /div
!-- /footer --
/div
!-- /page --
Header, Content Body, Footer
56

57. 57

58. Next Steps
Maintenance Updates
– Contextual updates
– Framework updates
– Search functionality
– More App Store Distribution
• Windows Phone
• BlackBerry
• Open Web App Stores
Mobile Learning Guide (App)
58

59. jQuery Mobile + PhoneGap =
Write Once, Deploy to Multiple Platforms
59

60. Where’s the Gap?
To the Cloud!
60

61. Mobile Lessons Learned
• 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
61

62. Mobile Video Formats
RIM Apple Microsoft Google Nokia Palm
BBOS iPhone OS Win Mobile Android Symbian Palm OS
MP4 / 3GP M4V / MP4 WMV / 3GP MP4 / SWF MP4 / WMV MP4 / H263
files (wide) files files files files
Credit: OnPoint Digital
62

63. Mobile Lessons Learned
• 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)
63

64. 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!
Credit: OnPoint Digital
64

65. Developing for Mobile Is Tough!
a balancing act…
65

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

67. Resources
http://research.adlnet.gov/newsletter/mobile
67

68. Other Resources – What I’m Reading
• 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
New and Upcoming Books on Mobile!
68

69. Homo Textus…Don’t Text and Drive!
You Know Who You Are!
69

70. Don’t Text and Fly!
2011!
Happy Halloween 
70

71. More Photo Credits
• 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/
71

72. Questions / Discussion
Jason Haag
Mobile Learning Research Analyst
jason.haag.ctr@adlnet.gov
Twi^er:
@J_Haag,
@ADLmobile
h^p://www.linkedin.com/in/jasonhaag
Let’s Connect!
72