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