MLJ11 Tips, Techniques, and

Tools for Mobile Learning

Jason Haag, ADL Kris Rockwell, Hybrid Learning Systems

Tips, Techniques and Tools

Jason Haag, Advanced Distributed Learning Kris Rockwell, Hybrid Learning Systems

HOSTED BY:

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

Beyond Control:   Hardware failure   Connectivity   Security   Performance

Fragmentation Can Be Addressed:   No standardized screen size or resolution   Native Apps can require many platforms to

support   Mobile Web Apps can require many browsers to

support

App Description Cost

1Password Encrypted password storage $9.99

Facebook Facebook client Free

InstaPaper Offline reading Free

TweetDeck Twitter client Free

Yelp Augmented search Free

  Symbian OS from the Symbian Foundation   BlackBerry OS from RIM   iOS from Apple   Windows Mobile 6 from Microsoft   Windows Phone 7 from Microsoft   Android from Google   WebOS from HP   Bada from Samsung   MeeGo from Nokia and Intel   Maemo from Nokia   Limo (Linux)

Programming Language Emulator available Integrated Development Environment

Cross-Platform Deployment Development Tool Cost

AirplaySDK C, C++ but no threads Emulator available Visual Studio, Mac OS SDK

All native: BREW, Android, iPhone, Windows Mobile, Symbian, Samsung Bada, Maemo, Palm/Web OS

Commercial licenses available

alcheMo Java Emulator is available in corresponding IDE

Visual Studio, Eclipse, XCode

BREW, Android, iPhone, Windows Mobile

Commercial licenses available

Android SDK Java but portions of code can be in C, C++ Free Emulator

Eclipse, Undroid (Plugin for Netbeans)

Android only, because of Dalvik VM (march 09) Free

Bedrock Java Yes Eclipse Java ME, BREW, BlackBerry, iPhone, PSP, DS, Android, Windows Mobile, Palm

Commercial licenses available

BlackBerry Java Free Emulator JDE - BlackBerry Java Development Environment

BlackBerry only because of the RIM API Free

iOS (Apple) Objective-C Bundled with iPhone SDK, integrated with Xcode IDE

Xcode iPhone, iPod Touch, and iPad.

Tools are free for an Intel-based Mac. Simulator testing is free, but installing on a device requires a fee for a developer signing key.

Programming Language Emulator available Integrated Development Environment

Cross-Platform Deployment Development Tool Cost

MoSync C, C++ Yes Eclipse, MoBuild (w/ text editors), Visual Studio 2005 and later

Windows Mobile, Symbian, Java ME, Moblin, Android, Smartphone 2003, Pocket PC

Free (GPL 2.0). Commercial licenses also available

Rhomobile

Ruby with HTML interface features compiled through an interpreter into native applications.

N/A, applications can run in Win32 runner, or in device emulators for supported platforms.

xCode or Eclipse, on-demand RhoHub version includes full IDE

Yes(Supports iOS (inc. 3.0), Windows Mobile, Blackberry, Symbian and Android)

Free for GPL, Commercial Licenses Available. Subscription for RhoHub

Symbian C++ Free Emulator Many choices Compile per target Commercial and free tools available

webOS Javascript, CSS, HTML, C and C++ through the PDK

Free emulator Eclipse webOS, Palm only Free

Windows Mobile SDK C, C++ Free emulator (source code available), also bundled with IDE

Visual Studio 2008, 2005, eMbedded VC++ (free)

Windows Mobile, WindowsCE

Free command-line tools or eMbedded VC++, or Visual Studio (Standard edition or better)

WorkLight Mobile Platform

A combination of standard web dev skills such as HTML, CSS and JavaScript and native languages.

Bundled with the IDE Eclipse-based plug-in Yes (Supports iOS, BlackBerry and Android)

Downloadable free evaluation version. Commercial licenses available

  Create content on-the-fly   No programming or design experience

required   Drag & Drop, Browser-based Interface   Build Native Apps in Days (instead of Months)   Most of these are cloud-based (SaaS)   Includes distribution to market or App store   Usually requires startup cost or other

recurring fee for updates

  SwebApps   AppIncubator   Kanchoo   AppBreeder   MyAppBuilder   BuildAnApp   eBookApp   GameSalad   MobileRoadie   MobBase   TapLynx   Appanda   AppMakr   App.co   Appswell   UNITYMobile   And many others…

  Charging for It (For Profit)   Creating a Game   Using Specific Locations   Using Cameras   Using Accelerometers   Accessing the File systems   Offline Users

Pros ◦  They offer a best-in-class user experience, offering a rich

design and tapping into device features and offline use. ◦  They are relatively simple to develop for a single

platform. ◦  You can charge for applications.

Cons ◦  Require unique programming language. ◦  They cannot be easily ported to other mobile platforms. ◦  Developing, testing, and supporting multiple device

platforms is incredibly costly. ◦  They may require certification and distribution from a

third party that you have no control over.

  W3C Initiative ◦  Goal: “One Web” ◦  Creates Web Standards ◦  Founded by Inventor of the WWW, Tim Berners-Lee ◦  http://www.w3.org/Mobile ◦  DIAL: http://www.w3.org/TR/dial/

  BONDI Open Mobile Terminal Platform (OMTP) ◦  Widget API Specification, digital signatures, security ◦  Merged into the WAC ◦  http://bondi.omtp.org

  Joint Innovation Lab (JIL) ◦  Established by Verizon, China Mobile, SOFTBANK and Vodafone ◦  Developed Mobile Widget Platform ◦  Merged into the WAC ◦  http://www.jil.org

  Wholesale Applications Community (WAC) ◦  Goal: Portability of applications across devices, operating systems and network operators ◦  http://www.wholesaleappcommunity.com

What is a Widget? ◦  Pioneered by Opera and Vodaphone

◦  “Write once, run anywhere”

◦  Local HTML, CSS, JavaScript Web Application

◦  Stored locally on the mobile device

◦  Typically used to create clocks, RSS readers, or Twitter or Flickr clients, games, but could be developed as Apps too

◦  Require network connection to display “fresh data”

◦  Based on a W3C specification:http://www.w3.org/TR/widgets/

◦  Highly endorsed by the Wholesale App Community (WAC) and the Joint Innovation Lab (JIL), and BONDI

◦  Examples: http://widgets.opera.com, http://widgets.yahoo.com, http://bondidev.omtp.org/widget-gallery, http://plusmo.com

 Problems with graceful degradation: ◦ Many designers don't test anything but one rev back ◦ Does not address different needs of different users ◦  It's expensive to retrofit to new alternative devices ◦ Whatever is “good enough” usually rules ◦ Browser-focused

The Chocolaty Layers of Progressive Enhancement

Progressive enhancement has the following core principles: ◦ Basic content is accessible to all browsers. ◦ Basic functionality is accessible to all browsers. ◦ Semantic markup contains all content. ◦ Enhanced layout is provided by externally linked CSS. ◦ Enhanced behavior is provided by unobtrusive, externally linked JavaScript. ◦ End user browser preferences are respected.

Graceful Degradation Progressive Enhancement

Browser-focused Content-focused

Test high-end browsers first; low-end browsers last

Supports low-end browsers; if high end available then add enhancements

Looks at Accessibility Last Looks at Accessibility First

May Require Browser and/or Device Detection with Server-side Scripting

Possible to support ALL browsers with only set of X/HTML; May Also Require 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

http://webguide.ua.edu/mobile.html

  Used for HTML/CSS for basic version

  Used iWebkit for advanced version

  Used device detection

http://webguide.ua.edu/mobile.html

  Unified user interface system across all popular mobile device platforms (Late 2010)

  Progressive Enhancement Approach   Light-weight mobile-friendly version of JQuery

(JavaScript Library)   http://jquerymobile.com

 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. camera, accelerometer, gyroscope)

Pros ◦  They are easy to create, using basic HTML, CSS, and JavaScript

knowledge. ◦  They are simple to deploy across multiple handsets. ◦  They offer a better user experience and a rich design, tapping into

device features and offline use. ◦  Content is accessible on any mobile web browser. ◦  Can be packaged & ported as a Native App! What?!

Cons ◦  The optimal experience might not be available on all handsets. ◦  They can be challenging (but not impossible) to support across

multiple devices. ◦  They don’t always support native application features, like offline

mode, location lookup, file system access, camera, and so on.

  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   Warning: If you start here, this is not progressive

enhancement! ◦  If support for non-webkit & HTML5 browsers is needed, then a

duplicate version will have to be created (difficult to maintain) ◦  In other words, if you only care about new smartphone touch

devices, then this is a nice alternative to Native App development but not if you want to support the widest possible audience

HTML, CSS, JavaScript Only   iWebkit   JQTouch (JQuery Touch)   iUI (iPhone User Interface)   Sencha Touch

HTML, CSS, JavaScript + Native App Publishing

  Rhodes & RhoHub   Titanium Appcelerator   PhoneGap

Mobile Learning Is Bigger Than Just Apps!

Design with Usability and Accessibility in Mind ◦  Determine smallest screen area to support (4x6 cards)

◦  When repurposing content, provide a comparable learning experience:   Replicate assessment interactions whenever possible

(true/false; drag/drop)   Use bullets to make contextual information more concise   Increase use of color, bold, and font types to boost

effectiveness/prevent loss of emphasis   Reduce or replace audio and video with static graphics

and transcripts

Plan for the Disconnected Mobile User ◦  Provide an offline or disconnected version of your content? ◦  Poor connectivity issues can result in bad user experience

  Avoid placing important text inside graphics   Most branding can be done through font and background colors

  Use small or unobtrusive graphics and logos   Avoid navigation bars that may take up a large percentage of the screen. If you

want to include complex navigation, place these at the end of the page content so that learners have access first to the primary content.

  Avoid background graphics. ◦  The end learners ambient light will vary depending on whether they are indoors or outdoors.

◦  A background that causes low contrast difference between text and decoration may make content impossible to read.

  Pull-down menus don't necessarily work on mobile devices (because of uneven JavaScript support), so consider using arrows to take learners through a tour of your course.

  Graphic navigation icons should be simple arrows or a descriptive word such as “next” or “back”.

  Navigation frames work well on some devices, but not others. It's best to place them below or after the main content. Al Moser

 SumTotal’s ToolBook   Trivantis Lectora  OutStart HotLava  Guinti eXact  Mobi21  Chalk Mobile Chalkboard  QuestionMark  Xyleme  Harbinger Raptivity

  OnPoint Digital   Intuition   LearningGuide Solutions   Blackboard   Moodle   LearnCast   Upside Learning   Litmos   Certpoint   Course Mill by Travantis

Mobile Development: ◦ Developing for the Mobile Web is Difficult. ◦ There are No Simple Solutions, but Think About Mobile First:  Your desktop version will benefit  Progressively Enhance Using CSS and JavaScript  Adapt Content Appropriately for Each Device  Device Detection Might Be Necessary for Supporting Low-Mid End

 Use the right tool for the job. Think performance.

Mobile Learning Development: ◦ Define goals and requirements for your project ◦ Prototype, prototype, prototype (start small, think big) ◦ Make distinction between “learning” and “performance support” ◦  Identify target device(s) and potential OS version(s) ◦ Native App or Web App? Or Both? ◦  Is Tracking Required? SCORM? ◦ Authoring Tools and MicroLMS Apps