Developing for Mobile: Tools, Tips, and Deployment Options

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:

adlmobile@adlnet.gov

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  jason.haag.ctr@adlnet.gov  Twi^er:  @J_Haag,  @ADLmobile  h^p://www.linkedin.com/in/jasonhaag  

Questions / Discussion

Let’s Connect!