MLJ11 Tips, Techniques, and Tools for Mobile Learning

Jason Haag, ADL Kris Rockwell, Hybrid Learning Systems Tips, Techniques and Tools

HOSTED BY: Jason Haag, Advanced Distributed Learning Kris Rockwell, Hybrid Learning Systems 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) Integrated Development Cross-Platform Programming Language Emulator available Development Tool Cost Environment Deployment All native: BREW, Android, iPhone, Visual Studio, Mac OS Commercial licenses AirplaySDK C, C++ but no threads Emulator available Windows Mobile, SDK available Symbian, Samsung Bada, Maemo, Palm/Web OS Emulator is available in Visual Studio, Eclipse, BREW, Android, iPhone, Commercial licenses alcheMo Java corresponding IDE XCode Windows Mobile available Eclipse, Java but portions of code Android only, because of Android SDK Free Emulator Undroid (Plugin for Free can be in C, C++ Dalvik VM (march 09) Netbeans) Java ME, BREW, BlackBerry, iPhone, PSP, Commercial licenses Bedrock Java Yes Eclipse DS, Android, Windows available Mobile, Palm JDE - BlackBerry Java BlackBerry only because BlackBerry Java Free Emulator Development Free of the RIM API Environment Tools are free for an Intel- based Mac. Simulator Bundled with iPhone iPhone, iPod Touch, and testing is free, but iOS (Apple) Objective-C SDK, integrated with Xcode iPad. installing on a device Xcode IDE requires a fee for a developer signing key. Integrated Development Cross-Platform Programming Language Emulator available Development Tool Cost Environment Deployment Windows Mobile, Eclipse, MoBuild (w/ text Symbian, Java ME, Free (GPL 2.0). MoSync C, C++ Yes editors), Visual Studio Moblin, Android, Commercial licenses also 2005 and later Smartphone 2003, Pocket available PC Ruby with HTML N/A, applications can run Yes(Supports iOS (inc. Free for GPL, interface features xCode or Eclipse, on- in Win32 runner, or in 3.0), Windows Mobile, Commercial Licenses Rhomobile compiled through an demand RhoHub version device emulators for Blackberry, Symbian and Available. Subscription interpreter into native includes full IDE supported platforms. Android) for RhoHub applications. Commercial and free tools Symbian C++ Free Emulator Many choices Compile per target available Javascript, CSS, HTML, webOS C and C++ through the Free emulator Eclipse webOS, Palm only Free PDK Free command-line tools Free emulator (source Visual Studio 2008, 2005, Windows Mobile, or eMbedded VC++, or Windows Mobile SDK C, C++ code available), also eMbedded VC++ (free) WindowsCE Visual Studio (Standard bundled with IDE edition or better) A combination of standard Downloadable free web dev skills such as WorkLight Mobile Yes (Supports iOS, evaluation version. HTML, CSS and Bundled with the IDE Eclipse-based plug-in Platform BlackBerry and Android) Commercial licenses JavaScript and native available languages.  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- Supports low-end browsers; if end browsers last high end available then add enhancements Looks at Accessibility Last Looks at Accessibility First

May Require Browser and/or Possible to support ALL browsers Device Detection with Server-side with only set of X/HTML; May Scripting 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  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