building ios apps with elearning tools
DESCRIPTION
This presentation discTRANSCRIPT
![Page 1: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/1.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
Creating Mobile Apps for iOSDustin Tauer :: Easel Solution
![Page 2: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/2.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
Dustin Tauer
Developer (11 years)Instructor (7 years)
Web :: Mobile :: eLearning
![Page 3: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/3.jpg)
@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](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/4.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
Slides :: Files :: Resourceshttp://blog.easelsolutions.com
![Page 5: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/5.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
mLearningeLearning gone mobile
![Page 6: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/6.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
The ProblemUsers want eLearning on a
mobile device
![Page 7: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/7.jpg)
@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](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/8.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
![Page 9: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/9.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
Flash and eLearningeLearning is heavily reliant on
Flash.
![Page 10: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/10.jpg)
@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](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/11.jpg)
@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](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/12.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
Solution OnePublish content targeting a specific device or platform
![Page 13: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/13.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
Solution TwoPublish content that works everywhere
![Page 14: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/14.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
HTML5The elephant in the room
![Page 15: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/15.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
“Just build it in HTML5”
( Sigh )
![Page 16: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/16.jpg)
@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](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/17.jpg)
@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](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/18.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
Mobile is hardPicking the right tool is the key to success
![Page 19: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/19.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
Developing for iOSChoose your own adventure
Web :: Shell App :: Native App
![Page 20: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/20.jpg)
@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](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/21.jpg)
@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](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/22.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
DemoWeb-based Course
![Page 23: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/23.jpg)
@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](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/24.jpg)
@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](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/25.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
DemoShell Application
![Page 26: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/26.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
Native ApplicationLike Angry Birds or Instagram
![Page 27: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/27.jpg)
@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](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/28.jpg)
@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](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/29.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
You now have a Native AppiOS :: Android :: Windows :: Blackberry :: etc.
![Page 30: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/30.jpg)
@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](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/31.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
Couple NotesPhoneGap Build has a 9.5MB limitDownload PhoneGap for larger
project sizes
![Page 32: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/32.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
Let’s talk iOSStatus: It’s Complicated
![Page 33: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/33.jpg)
@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](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/34.jpg)
@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](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/35.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
The iOS setup process sucksYou only have to do it once
![Page 36: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/36.jpg)
@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](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/37.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
DemoNative Application
![Page 38: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/38.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
Designing mLearningGraphical, not instructional
![Page 39: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/39.jpg)
@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](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/40.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
Screens Resolution
![Page 41: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/41.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
Fingers
44px
![Page 42: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/42.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
There’s a hand behind every good finger
![Page 43: Building iOS apps with eLearning Tools](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/43.jpg)
@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](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/44.jpg)
@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](https://reader038.vdocuments.net/reader038/viewer/2022102717/557c19bbd8b42a22218b48c9/html5/thumbnails/45.jpg)
@dtauer :: @easelsolutions :: #AdobeLS12
Thanks!http://blog.easelsolutions.comSlides, Session Files, Resources