mlj11 tips, techniques, and tools for mobile learning
TRANSCRIPT
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
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
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