Building iOS apps with eLearning Tools
-
Upload
easelsolutions -
Category
Technology
-
view
1.104 -
download
0
description
Transcript of 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