Creating Mobile Apps for iOSDustin Tauer :: Easel Solution             @dtauer :: @easelsolutions ::                     #...
Dustin TauerDeveloper (11 years) Instructor (7 years) Web :: Mobile ::   eLearning              @dtauer :: @easelsolutions...
Easel Solutions   Remote/On-Site Training    • Adobe Training Partner    • Design, Web, Mobile, eLearning, Str      ategy...
Slides :: Files ::Resourceshttp://blog.easelsolutions.com              @dtauer :: @easelsolutions ::                      ...
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 :...
@dtauer :: @easelsolutions ::        #AdobeLS12
Flash and eLearningeLearning is heavily reliant on Flash.             @dtauer :: @easelsolutions ::                     #A...
Flash and mLearningDo we have to learn new tools?                           No!*Abandon our existing courses?             ...
mLearningCreate content that fits     the user.Don’t ask the users to fit the content.              @dtauer :: @easelsolut...
Solution OnePublish content targeting a specificdevice or platform             @dtauer :: @easelsolutions ::              ...
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.H...
HTML5 does not equal MobileMobile browser evolve faster thandesktop browser and support more HTML5features. It’s still a w...
Mobile is hardPicking the right tool is the key to success               @dtauer :: @easelsolutions ::                    ...
Developing for iOSChoose your own adventure    Web :: Shell App :: Native App            @dtauer :: @easelsolutions ::    ...
Web   Deployed on a website or in an LMS    • Just like you are doing today   Published HTML/CSS/JavaScript    • “HTML5”...
WebPROS                                   CONS   One course for all                   One course for all    • www.yoursi...
DemoWeb-based Course           @dtauer :: @easelsolutions ::                   #AdobeLS12
Shell Application   Download “player” or “viewer” application    to play the output from an eLearning    development tool...
Shell ApplicationPROS                                  CONS   SUPER easy delivery                 Tool-centric    • URL ...
DemoShell Application              @dtauer :: @easelsolutions ::                      #AdobeLS12
Native ApplicationLike Angry Birds or Instagram              @dtauer :: @easelsolutions ::                      #AdobeLS12
Native ApplicationPROS                                CONS   Branded                           Need to publish for each...
The Process   Publish course as HTML/CSS/JavaScript    • HTML5 Publishing in Captivate 6    • Any other Web development t...
You now have a NativeAppiOS :: Android :: Windows :: Blackberry:: etc.             @dtauer :: @easelsolutions ::          ...
Couple Notes   Use any text editor to remove browser    compatibility code from index.html file                @dtauer ::...
Couple Notes   PhoneGap Build has a 9.5MB limit   Download PhoneGap for larger project    sizes               @dtauer ::...
Let’s talk iOSStatus: It’s Complicated              @dtauer :: @easelsolutions ::                      #AdobeLS12
Understanding iOS               CertificatesDEVELOPER CERTIFICATE               ENTERPRISE CERTIFICATE   $99/year        ...
Understanding iOS             Provisioning   A Provisioning Profile allows which devices    to install your application. ...
The iOS setup process sucksYou only have to do it once              @dtauer :: @easelsolutions ::                      #Ad...
iOS Development Resources   http://developer.apple.com    • Certificates and Provisioning   http://www.testflightapp.com...
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    ...
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 :: @easelsoluti...
Best way to approachmLearning?test, try, seek, attempt, prove, evaluate, judge, decide, sample, probe, examine            ...
Thanks!http://blog.easelsolutions.comSlides, Session Files, Resources                  @dtauer :: @easelsolutions ::      ...
Upcoming SlideShare
Loading in …5
×

Building iOS apps with eLearning Tools

1,582 views

Published on

This presentation disc

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,582
On SlideShare
0
From Embeds
0
Number of Embeds
159
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Building iOS apps with eLearning Tools

  1. 1. Creating Mobile Apps for iOSDustin Tauer :: Easel Solution @dtauer :: @easelsolutions :: #AdobeLS12
  2. 2. Dustin TauerDeveloper (11 years) Instructor (7 years) Web :: Mobile :: eLearning @dtauer :: @easelsolutions :: #AdobeLS12
  3. 3. 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
  4. 4. Slides :: Files ::Resourceshttp://blog.easelsolutions.com @dtauer :: @easelsolutions :: #AdobeLS12
  5. 5. mLearningeLearning gone mobile @dtauer :: @easelsolutions :: #AdobeLS12
  6. 6. The ProblemUsers want eLearning on a mobiledevice @dtauer :: @easelsolutions :: #AdobeLS12
  7. 7. The Real ProblemUsers want eLearning on a mobile devicethatdoes not support Flash @dtauer :: @easelsolutions :: #AdobeLS12
  8. 8. @dtauer :: @easelsolutions :: #AdobeLS12
  9. 9. Flash and eLearningeLearning is heavily reliant on Flash. @dtauer :: @easelsolutions :: #AdobeLS12
  10. 10. Flash and mLearningDo we have to learn new tools? No!*Abandon our existing courses? No! @dtauer :: @easelsolutions :: #AdobeLS12
  11. 11. mLearningCreate content that fits the user.Don’t ask the users to fit the content. @dtauer :: @easelsolutions :: #AdobeLS12
  12. 12. Solution OnePublish content targeting a specificdevice or platform @dtauer :: @easelsolutions :: #AdobeLS12
  13. 13. Solution TwoPublish content that works everywhere @dtauer :: @easelsolutions :: #AdobeLS12
  14. 14. HTML5The elephant in the room @dtauer :: @easelsolutions :: #AdobeLS12
  15. 15. “Just build it in HTML5” ( Sigh ) @dtauer :: @easelsolutions :: #AdobeLS12
  16. 16. HTML5 does not equal MobileHTML5 is a set of features added to HTMLthat give websites additional/consistentfunctionality.HTML5 = HTML + CSS + JavaScript @dtauer :: @easelsolutions :: #AdobeLS12
  17. 17. HTML5 does not equal MobileMobile browser evolve faster thandesktop browser and support more HTML5features. It’s still a work in progress. @dtauer :: @easelsolutions :: #AdobeLS12
  18. 18. Mobile is hardPicking the right tool is the key to success @dtauer :: @easelsolutions :: #AdobeLS12
  19. 19. Developing for iOSChoose your own adventure Web :: Shell App :: Native App @dtauer :: @easelsolutions :: #AdobeLS12
  20. 20. 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
  21. 21. 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
  22. 22. DemoWeb-based Course @dtauer :: @easelsolutions :: #AdobeLS12
  23. 23. 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
  24. 24. 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
  25. 25. DemoShell Application @dtauer :: @easelsolutions :: #AdobeLS12
  26. 26. Native ApplicationLike Angry Birds or Instagram @dtauer :: @easelsolutions :: #AdobeLS12
  27. 27. 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
  28. 28. 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
  29. 29. You now have a NativeAppiOS :: Android :: Windows :: Blackberry:: etc. @dtauer :: @easelsolutions :: #AdobeLS12
  30. 30. Couple Notes Use any text editor to remove browser compatibility code from index.html file @dtauer :: @easelsolutions :: #AdobeLS12
  31. 31. Couple Notes PhoneGap Build has a 9.5MB limit Download PhoneGap for larger project sizes @dtauer :: @easelsolutions :: #AdobeLS12
  32. 32. Let’s talk iOSStatus: It’s Complicated @dtauer :: @easelsolutions :: #AdobeLS12
  33. 33. 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
  34. 34. 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
  35. 35. The iOS setup process sucksYou only have to do it once @dtauer :: @easelsolutions :: #AdobeLS12
  36. 36. 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
  37. 37. DemoNative Application @dtauer :: @easelsolutions :: #AdobeLS12
  38. 38. Designing mLearningGraphical, not instructional @dtauer :: @easelsolutions :: #AdobeLS12
  39. 39. 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
  40. 40. Screens Resolution @dtauer :: @easelsolutions :: #AdobeLS12
  41. 41. Fingers 44px@dtauer :: @easelsolutions :: #AdobeLS12
  42. 42. There’s a hand behind every good finger @dtauer :: @easelsolutions :: #AdobeLS12
  43. 43. TabletsSame as laptops as long as yourecognize the design considerationsof touch-input @dtauer :: @easelsolutions :: #AdobeLS12
  44. 44. Best way to approachmLearning?test, try, seek, attempt, prove, evaluate, judge, decide, sample, probe, examine @dtauer :: @easelsolutions :: #AdobeLS12
  45. 45. Thanks!http://blog.easelsolutions.comSlides, Session Files, Resources @dtauer :: @easelsolutions :: #AdobeLS12

×