Building iOS apps with eLearning Tools

Creating Mobile Apps for iOSDustin Tauer :: Easel Solution @dtauer :: @easelsolutions :: #AdobeLS12

Dustin TauerDeveloper (11 years) Instructor (7 years) Web :: Mobile :: eLearning @dtauer :: @easelsolutions :: #AdobeLS12

Easel Solutions Remote/On-Site Training • Adobe Training Partner • Design, Web, Mobile, eLearning, Str ategy, Social, etc. Consulting • Don’t have time to learn? We’ll do it for you Adobe Connect Reseller @dtauer :: @easelsolutions :: #AdobeLS12

Slides :: Files ::Resourceshttp://blog.easelsolutions.com @dtauer :: @easelsolutions :: #AdobeLS12

mLearningeLearning gone mobile @dtauer :: @easelsolutions :: #AdobeLS12

The ProblemUsers want eLearning on a mobiledevice @dtauer :: @easelsolutions :: #AdobeLS12

The Real ProblemUsers want eLearning on a mobile devicethatdoes not support Flash @dtauer :: @easelsolutions :: #AdobeLS12

@dtauer :: @easelsolutions :: #AdobeLS12

Flash and eLearningeLearning is heavily reliant on Flash. @dtauer :: @easelsolutions :: #AdobeLS12

Flash and mLearningDo we have to learn new tools? No!*Abandon our existing courses? No! @dtauer :: @easelsolutions :: #AdobeLS12

mLearningCreate content that fits the user.Don’t ask the users to fit the content. @dtauer :: @easelsolutions :: #AdobeLS12

Solution OnePublish content targeting a specificdevice or platform @dtauer :: @easelsolutions :: #AdobeLS12

Solution TwoPublish content that works everywhere @dtauer :: @easelsolutions :: #AdobeLS12

HTML5The elephant in the room @dtauer :: @easelsolutions :: #AdobeLS12

“Just build it in HTML5” ( Sigh ) @dtauer :: @easelsolutions :: #AdobeLS12

HTML5 does not equal MobileHTML5 is a set of features added to HTMLthat give websites additional/consistentfunctionality.HTML5 = HTML + CSS + JavaScript @dtauer :: @easelsolutions :: #AdobeLS12

HTML5 does not equal MobileMobile browser evolve faster thandesktop browser and support more HTML5features. It’s still a work in progress. @dtauer :: @easelsolutions :: #AdobeLS12

Mobile is hardPicking the right tool is the key to success @dtauer :: @easelsolutions :: #AdobeLS12

Developing for iOSChoose your own adventure Web :: Shell App :: Native App @dtauer :: @easelsolutions :: #AdobeLS12

Web Deployed on a website or in an LMS • Just like you are doing today Published HTML/CSS/JavaScript • “HTML5” Publishing • No Flash allowed (but can be nice) Offline is possible (With Code) • Google: HTML5 Offline Application • No LMS integration* How? • HTML5 Publishing in Adobe Captivate 6 @dtauer :: @easelsolutions :: #AdobeLS12

WebPROS CONS One course for all  One course for all • www.yoursite.com/course1 • One size doesn’t always fit Same workflow all LMS tracking is easy  Requires and internet Easy to update connection • Just replace the content • Can you hear me now? Pause/Resume across  Many LMS interface are not devices mobile friendly  Inconsistent playback @dtauer :: @easelsolutions :: #AdobeLS12

DemoWeb-based Course @dtauer :: @easelsolutions :: #AdobeLS12

Shell Application Download “player” or “viewer” application to play the output from an eLearning development tool • Typically free, but not brandable Adobe Presenter 8 (plugin for PowerPoint)  Download Adobe Presenter Mobile  Enter URL of course @dtauer :: @easelsolutions :: #AdobeLS12

Shell ApplicationPROS CONS SUPER easy delivery  Tool-centric • URL or Link • You are locked into a Online & Offline (most of the specific development tool time) • Limited feature support • Sync with LMS  Device Dependent Consistent Playback • i.e. iPad only Bonus Features  Application and icon are not • Libraries of content customizable • Intuitive UI controls • Optimized mobile experience @dtauer :: @easelsolutions :: #AdobeLS12

DemoShell Application @dtauer :: @easelsolutions :: #AdobeLS12

Native ApplicationLike Angry Birds or Instagram @dtauer :: @easelsolutions :: #AdobeLS12

Native ApplicationPROS CONS Branded  Need to publish for each Offline device • No Internet needed • iPad, Android, etc. Sell course in an app store  LMS integration can be Tailor content to fit the tricky device  More steps in the process Performance  Higher development costs  iOS distribution is tricky • Approval/Updates • Certificate required* @dtauer :: @easelsolutions :: #AdobeLS12

The Process Publish course as HTML/CSS/JavaScript • HTML5 Publishing in Captivate 6 • Any other Web development tool Sprinkle in an icon and some configuration • Optional, but you’ll want to do this Zip everything up • Don’t forget about index.html Upload to PhoneGap • http://build.phonegap.com @dtauer :: @easelsolutions :: #AdobeLS12

You now have a NativeAppiOS :: Android :: Windows :: Blackberry:: etc. @dtauer :: @easelsolutions :: #AdobeLS12

Couple Notes Use any text editor to remove browser compatibility code from index.html file @dtauer :: @easelsolutions :: #AdobeLS12

Couple Notes PhoneGap Build has a 9.5MB limit Download PhoneGap for larger project sizes @dtauer :: @easelsolutions :: #AdobeLS12

Let’s talk iOSStatus: It’s Complicated @dtauer :: @easelsolutions :: #AdobeLS12

Understanding iOS CertificatesDEVELOPER CERTIFICATE ENTERPRISE CERTIFICATE $99/year  $299/year Allows developer or  Dun & Bradstreet (D-U-N-S) company to publish apps to number is required App Store  Intended for companies who • ONLY to App Store create proprietary, in-house Application listed under iOS apps for internal certificate-holder’s name deployment within the If application is being company only. sold, Apple gets 30% Need certificate before you start! @dtauer :: @easelsolutions :: #AdobeLS12

Understanding iOS Provisioning A Provisioning Profile allows which devices to install your application. • Prevents you from illegally distributing applications Contains device ID’s of all approved devices @dtauer :: @easelsolutions :: #AdobeLS12

The iOS setup process sucksYou only have to do it once @dtauer :: @easelsolutions :: #AdobeLS12

iOS Development Resources http://developer.apple.com • Certificates and Provisioning http://www.testflightapp.com • Acquire device ID’s and manage “testers” Video • http://blog.easelsolutions.com/videos/?p=f_XpBm 66dQI • Updated version coming soon @dtauer :: @easelsolutions :: #AdobeLS12

DemoNative Application @dtauer :: @easelsolutions :: #AdobeLS12

Designing mLearningGraphical, not instructional @dtauer :: @easelsolutions :: #AdobeLS12

Design Considerations for Mobile UI Design for immediate access Fingers, not mice • No roll-overs • Careful with “try-me” courses Touch feedback is key • Down-states Keep gestures smart and simple • Or just stick to the tap (click) Design for real hand sizes @dtauer :: @easelsolutions :: #AdobeLS12

Screens Resolution @dtauer :: @easelsolutions :: #AdobeLS12

Fingers 44px@dtauer :: @easelsolutions :: #AdobeLS12

There’s a hand behind every good finger @dtauer :: @easelsolutions :: #AdobeLS12

TabletsSame as laptops as long as yourecognize the design considerationsof touch-input @dtauer :: @easelsolutions :: #AdobeLS12

Best way to approachmLearning?test, try, seek, attempt, prove, evaluate, judge, decide, sample, probe, examine @dtauer :: @easelsolutions :: #AdobeLS12

Thanks!http://blog.easelsolutions.comSlides, Session Files, Resources @dtauer :: @easelsolutions :: #AdobeLS12

Building iOS apps with eLearning Tools

by easelsolutions on Nov 01, 2012

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 86

Statistics

Building iOS apps with eLearning Tools Presentation Transcript