building ios apps with elearning tools

45
@dtauer :: @easelsolutions :: #AdobeLS12 Creating Mobile Apps for iOS Dustin Tauer :: Easel Solution

Upload: easelsolutions

Post on 13-Jun-2015

1.104 views

Category:

Technology


0 download

DESCRIPTION

This presentation disc

TRANSCRIPT

Page 1: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

Creating Mobile Apps for iOSDustin Tauer :: Easel Solution

Page 2: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

Dustin Tauer

Developer (11 years)Instructor (7 years)

Web :: Mobile :: eLearning

Page 3: Building iOS apps with eLearning Tools

@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

Page 4: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

Slides :: Files :: Resourceshttp://blog.easelsolutions.com

Page 5: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

mLearningeLearning gone mobile

Page 6: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

The ProblemUsers want eLearning on a

mobile device

Page 7: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

The Real ProblemUsers want eLearning on a mobile device that

does not support Flash

Page 8: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

Page 9: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

Flash and eLearningeLearning is heavily reliant on

Flash.

Page 10: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

Flash and

mLearningDo we have to learn new tools?Abandon our existing courses?

No!*No!

Page 11: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

mLearningCreate content that fits the user.Don’t ask the users to fit the content.

Page 12: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

Solution OnePublish content targeting a specific device or platform

Page 13: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

Solution TwoPublish content that works everywhere

Page 14: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

HTML5The elephant in the room

Page 15: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

“Just build it in HTML5”

( Sigh )

Page 16: Building iOS apps with eLearning Tools

@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

Page 17: Building iOS apps with eLearning Tools

@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.

Page 18: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

Mobile is hardPicking the right tool is the key to success

Page 19: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

Developing for iOSChoose your own adventure

Web :: Shell App :: Native App

Page 20: Building iOS apps with eLearning Tools

@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

Page 21: Building iOS apps with eLearning Tools

@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

Page 22: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

DemoWeb-based Course

Page 23: Building iOS apps with eLearning Tools

@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

Page 24: Building iOS apps with eLearning Tools

@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

Page 25: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

DemoShell Application

Page 26: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

Native ApplicationLike Angry Birds or Instagram

Page 27: Building iOS apps with eLearning Tools

@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*

Page 28: Building iOS apps with eLearning Tools

@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

Page 29: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

You now have a Native AppiOS :: Android :: Windows :: Blackberry :: etc.

Page 30: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

Couple NotesUse any text editor to remove

browser compatibility code from index.html file

Page 31: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

Couple NotesPhoneGap Build has a 9.5MB limitDownload PhoneGap for larger

project sizes

Page 32: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

Let’s talk iOSStatus: It’s Complicated

Page 33: Building iOS apps with eLearning Tools

@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!

Page 34: Building iOS apps with eLearning Tools

@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

Page 35: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

The iOS setup process sucksYou only have to do it once

Page 36: Building iOS apps with eLearning Tools

@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

Page 37: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

DemoNative Application

Page 38: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

Designing mLearningGraphical, not instructional

Page 39: Building iOS apps with eLearning Tools

@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

Page 40: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

Screens Resolution

Page 41: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

Fingers

44px

Page 42: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

There’s a hand behind every good finger

Page 43: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

TabletsSame as laptops as long as you

recognize the design considerations of touch-input

Page 44: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

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

Page 45: Building iOS apps with eLearning Tools

@dtauer :: @easelsolutions :: #AdobeLS12

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