Building iOS apps with eLearning Tools

  • Published on
    13-Jun-2015

  • View
    1.091

  • Download
    0

DESCRIPTION

This presentation disc

Transcript

1. Creating Mobile Apps for iOSDustin Tauer :: Easel Solution @dtauer :: @easelsolutions :: #AdobeLS12 2. Dustin TauerDeveloper (11 years) Instructor (7 years) Web :: Mobile :: eLearning@dtauer :: @easelsolutions ::#AdobeLS12 3. Easel Solutions Remote/On-Site Training Adobe Training Partner Design, Web, Mobile, eLearning, Strategy, Social, etc. Consulting Dont have time to learn? Well do itfor you Adobe Connect Reseller @dtauer :: @easelsolutions :: #AdobeLS12 4. Slides :: Files ::Resourceshttp://blog.easelsolutions.com@dtauer :: @easelsolutions ::#AdobeLS12 5. mLearningeLearning gone mobile @dtauer :: @easelsolutions :: #AdobeLS12 6. The ProblemUsers want eLearning on a mobiledevice @dtauer :: @easelsolutions :: #AdobeLS12 7. The Real ProblemUsers want eLearning on a mobile devicethatdoes not support Flash @dtauer :: @easelsolutions :: #AdobeLS12 8. @dtauer :: @easelsolutions ::#AdobeLS12 9. Flash and eLearningeLearning is heavily reliant on Flash. @dtauer :: @easelsolutions :: #AdobeLS12 10. Flash and mLearningDo we have to learn new tools? No!*Abandon our existing courses? No! @dtauer :: @easelsolutions :: #AdobeLS12 11. mLearningCreate content that fits the user.Dont ask the users to fit the content.@dtauer :: @easelsolutions ::#AdobeLS12 12. Solution OnePublish content targeting a specificdevice or platform @dtauer :: @easelsolutions :: #AdobeLS12 13. Solution TwoPublish content that works everywhere@dtauer :: @easelsolutions ::#AdobeLS12 14. HTML5The elephant in the room @dtauer :: @easelsolutions :: #AdobeLS12 15. Just build it in HTML5 ( Sigh ) @dtauer :: @easelsolutions :: #AdobeLS12 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. HTML5 does not equal MobileMobile browser evolve faster thandesktop browser and support more HTML5features. Its still a work in progress. @dtauer :: @easelsolutions :: #AdobeLS12 18. Mobile is hardPicking the right tool is the key to success @dtauer :: @easelsolutions :: #AdobeLS12 19. Developing for iOSChoose your own adventureWeb :: Shell App :: Native App@dtauer :: @easelsolutions ::#AdobeLS12 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. WebPROS CONS One course for all One course for all www.yoursite.com/course1 One size doesnt always fit Same workflow all LMS tracking is easy Requires and internet Easy to updateconnection Just replace the content Can you hear me now? Pause/Resume across Many LMS interface are notdevices mobile friendly Inconsistent playback @dtauer :: @easelsolutions :: #AdobeLS12 22. DemoWeb-based Course @dtauer :: @easelsolutions :: #AdobeLS12 23. Shell Application Download player or viewer applicationto play the output from an eLearningdevelopment tool Typically free, but not brandable Adobe Presenter 8 (plugin for PowerPoint) Download Adobe Presenter Mobile Enter URL of course @dtauer :: @easelsolutions :: #AdobeLS12 24. Shell ApplicationPROSCONS SUPER easy delivery Tool-centric URL or Link You are locked into a Online & Offline (most of thespecific development tooltime) 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 mobileexperience@dtauer :: @easelsolutions ::#AdobeLS12 25. DemoShell Application@dtauer :: @easelsolutions ::#AdobeLS12 26. Native ApplicationLike Angry Birds or Instagram@dtauer :: @easelsolutions ::#AdobeLS12 27. Native ApplicationPROSCONS Branded Need to publish for each Offlinedevice No Internet needed iPad, Android, etc. Sell course in an app store LMS integration can be Tailor content to fit thetrickydevice More steps in the process Performance Higher development costs iOS distribution is tricky Approval/Updates Certificate required*@dtauer :: @easelsolutions ::#AdobeLS12 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 youll want to do this Zip everything up Dont forget about index.html Upload to PhoneGap http://build.phonegap.com @dtauer :: @easelsolutions :: #AdobeLS12 29. You now have a NativeAppiOS :: Android :: Windows :: Blackberry:: etc. @dtauer :: @easelsolutions :: #AdobeLS12 30. Couple Notes Use any text editor to remove browsercompatibility code from index.html file@dtauer :: @easelsolutions ::#AdobeLS12 31. Couple Notes PhoneGap Build has a 9.5MB limit Download PhoneGap for larger projectsizes @dtauer :: @easelsolutions :: #AdobeLS12 32. Lets talk iOSStatus: Its Complicated@dtauer :: @easelsolutions ::#AdobeLS12 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 requiredApp Store Intended for companies who ONLY to App Storecreate proprietary, in-house Application listed under iOS apps for internalcertificate-holders namedeployment within the If application is beingcompany only.sold, Apple gets 30% Need certificate before youstart!@dtauer :: @easelsolutions ::#AdobeLS12 34. Understanding iOS Provisioning A Provisioning Profile allows which devicesto install your application. Prevents you from illegally distributing applications Contains device IDs of all approveddevices @dtauer :: @easelsolutions :: #AdobeLS12 35. The iOS setup process sucksYou only have to do it once@dtauer :: @easelsolutions ::#AdobeLS12 36. iOS Development Resources http://developer.apple.com Certificates and Provisioning http://www.testflightapp.com Acquire device IDs and manage testers Video http://blog.easelsolutions.com/videos/?p=f_XpBm66dQI Updated version coming soon @dtauer :: @easelsolutions :: #AdobeLS12 37. DemoNative Application@dtauer :: @easelsolutions ::#AdobeLS12 38. Designing mLearningGraphical, not instructional @dtauer :: @easelsolutions :: #AdobeLS12 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. Screens Resolution @dtauer :: @easelsolutions :: #AdobeLS12 41. Fingers 44px@dtauer :: @easelsolutions ::#AdobeLS12 42. Theres a hand behind every good finger @dtauer :: @easelsolutions :: #AdobeLS12 43. TabletsSame as laptops as long as yourecognize the design considerationsof touch-input @dtauer :: @easelsolutions :: #AdobeLS12 44. Best way to approachmLearning?test, try, seek, attempt, prove, evaluate, judge, decide, sample, probe, examine @dtauer :: @easelsolutions :: #AdobeLS12 45. Thanks!http://blog.easelsolutions.comSlides, Session Files, Resources@dtauer :: @easelsolutions ::#AdobeLS12