Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,649 views

Published on

This presentation disc

Published in: Technology
  • Be the first to comment

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

×