building ios apps with elearning tools

@dtauer :: @easelsolutions :: #AdobeLS12

Creating Mobile Apps for iOSDustin Tauer :: Easel Solution

@dtauer :: @easelsolutions :: #AdobeLS12

Dustin Tauer

Developer (11 years)Instructor (7 years)

Web :: Mobile :: eLearning

@dtauer :: @easelsolutions :: #AdobeLS12

Easel SolutionsRemote/On-Site Training

• Adobe Training Partner• Design, Web, Mobile, eLearning,

Strategy, 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

mobile device

@dtauer :: @easelsolutions :: #AdobeLS12

The Real ProblemUsers want eLearning on a mobile device that

does 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?Abandon our existing courses?

No!*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 specific device 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 HTML that give websites additional/consistent functionality.

HTML5 = HTML + CSS + JavaScript

@dtauer :: @easelsolutions :: #AdobeLS12

HTML5 does not equal MobileMobile browser evolve faster than desktop browser and support more

HTML5 features. 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

WebDeployed on a website or in an LMS

• Just like you are doing todayPublished 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• www.yoursite.com/

course1 Same workflow LMS tracking is easy Easy to update

• Just replace the content Pause/Resume across

devices

One course for all• One size doesn’t always

fit all Requires and internet

connection• Can you hear me now?

Many LMS interface are not mobile friendly

Inconsistent playback

@dtauer :: @easelsolutions :: #AdobeLS12

DemoWeb-based Course

@dtauer :: @easelsolutions :: #AdobeLS12

Shell ApplicationDownload “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• URL or Link

Online & Offline (most of the time)• Sync with LMS

Consistent Playback Bonus Features

• Libraries of content• Intuitive UI controls• Optimized mobile

experience

Tool-centric• You are locked into a

specific development tool

• Limited feature support Device Dependent

• i.e. iPad only Application and icon are

not customizable

@dtauer :: @easelsolutions :: #AdobeLS12

DemoShell Application

@dtauer :: @easelsolutions :: #AdobeLS12

Native ApplicationLike Angry Birds or Instagram

@dtauer :: @easelsolutions :: #AdobeLS12

Native ApplicationPROS CONS

Branded Offline

• No Internet needed Sell course in an app

store Tailor content to fit the

device Performance

Need to publish for each device• iPad, Android, etc.

LMS integration can be tricky

More steps in the process

Higher development costs

iOS distribution is tricky• Approval/Updates• Certificate required*

@dtauer :: @easelsolutions :: #AdobeLS12

The ProcessPublish 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 Native AppiOS :: Android :: Windows :: Blackberry :: etc.

@dtauer :: @easelsolutions :: #AdobeLS12

Couple NotesUse any text editor to remove

browser compatibility code from index.html file

@dtauer :: @easelsolutions :: #AdobeLS12

Couple NotesPhoneGap Build has a 9.5MB limitDownload PhoneGap for larger

project sizes

@dtauer :: @easelsolutions :: #AdobeLS12

Let’s talk iOSStatus: It’s Complicated

@dtauer :: @easelsolutions :: #AdobeLS12

Understanding iOS Certificates

DEVELOPER CERTIFICATE ENTERPRISE CERTIFICATE

$99/year Allows developer or

company to publish apps to App Store• ONLY to App Store

Application listed under certificate-holder’s name

If application is being sold, Apple gets 30%

$299/year Dun & Bradstreet (D-U-N-

S) number is required Intended for companies

who create proprietary, in-house iOS apps for internal deployment within the company only.

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

applicationsContains 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_XpBm66dQI• 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 accessFingers, 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 you

recognize the design considerations of touch-input

@dtauer :: @easelsolutions :: #AdobeLS12

Best way to approach mLearning?test, try, seek, attempt, prove, evaluate, judge, decide, sample, probe, examine

@dtauer :: @easelsolutions :: #AdobeLS12

Thanks!http://blog.easelsolutions.comSlides, Session Files, Resources