Exploring Training Development and Cross Compatibility with HTML5

1. Exploring Training Development and Cross Compatibility with HTML5 Ray Pastore, Ph.D. University of North Carolina Wilmington HTML 5 Nick Pastore Booz | Allen | Hamilton

2. Overview • “I want training to work on the phone, iPad, and PC” • “I don’t want to spend a lot of money” • “I do not have a lot of time” • “I can’t sacrifice quality” • We all hear these kinds of statements from clients. Is it possible to develop like this? • The following presentation will discuss • Cross compatibility through HTML5 • Software and hardware issues • Client needs • Technical considerations

3. Cross Compatibility • You want to develop training that runs on everything… • How can I avoid developing multiple versions? • Can it run on all devices and screen sizes? • Can we use our current software? • Do we need to hire a programmer? • How long will this take?

4. Cross Compatibility • Software/programming choices • HTML • HTML5 (CSS, HTML5, Javascript) • Flash • Commercial-off-the-shelf (COTS) authoring software such as Captivate or Articulate • Government-off-the-shelf (GOTS) authoring software

5. But do they work?

6. Off the shelf software issues Flash Player does not play on all devices Authoring software export options (HTML5) do not always export all features The bottom line: there are not “one size fits all” solutions available and you may need programmer intervention

7. Why is there a problem? One word: Mobile This is where problems occur. Mac and PC OSs work pretty well together (software and video files play on both for the most part). Software (such as Flash) can even be published for outdated technology. However, software doesn’t play nice with the mobile device…

8. Why? Mobile devices run multiple browsers Pixelation issues Various players Processing power Too many company’s each with their own set of standards and OS

9. So how do we develop for the mobile device?

10. For the user, Apps are easy. For the programmer, they are difficult. • Google's Android Java Programming *Eclipse • Apple's iOS: iPod/iPhone/iPad C, C++ *Xcode Android Google App Inventor (well MIT) Flash? HTML5 (PhoneGap) Apple Flash? HTML5 (PhoneGap) All phones (apple, android, blackberry, windows) HTML – HTML5 (PhoneGap)

11. Alternative ways to develop apps • Apps using Adobe PhoneGap • Develop the app in HTML/HTML5 and publish it as an app to iphone, android, blackberry, and windows. • Apple can reject your app!!! • Apps using Flash • Yes you can develop software for the PC, in Flash, then publish it to apple/android stores as an app using Adobe Air. • Apple can reject your app!!!

12. Mobile Web • Responsive (mobile) websites (HTML/HTML5) • Publish one version to the web and it works on everything - Works on PC and Mac - Works on all mobile devices • Publish multiple version to the web • Detect devices and modify based on the device used • There are a number of ways to do this

13. Mobile Web • We are ‘safe’ with HTML. It works on everything. But HTML itself is limited. • Thus - HTML5. • HTML5 = HTML5, Javascript, and CSS3. • Terminology issue • Adobe has said that HTML5 can perform 80% of Flash. • I believe its greater. Significantly more time consuming, but greater.

14. Mobile Web • HTML5 is not easy. Most instructional designers cannot use it. • Javascript is not an easy language for a person who only knows HTML and CSS. • It requires a programmer. You have to program to use it.

15. Mobile Web for the instructional designer • Instructional designers like to be a one stop shop. • So what are our options? • HTML5 is really the only one. It’s the best option. However, it is NOT perfect…

16. Design Considerations HTML 1-4 HTML5 Screen sizes and screen layout impact how you design your learning content

17. Consider Navigation • Navigation can no longer just include Next and Back buttons • Create new menu schemes and navigate to any point in the training within a few clicks or touch screen presses • Finger swipes, finger presses, mouse clicks, keyboard navigation, and touch pads are not interchangeable • Work with a developer up front and write your navigation tutorial accordingly

18. Consider Branding • Logos take up a lot of screen real estate on a small screen • Use alternative branding techniques in the place of large logos such as tile and screen colors. Include the logo on only one screen • Approved client branding guides might not account for phone size items • Show screen designs to your client in advance, and contact their public affairs representative if necessary

19. Consider Compliance • Section 508 experiences are vastly different from device to device • Determine upfront what devices support assistive technology and whether you can develop to it. There are a lot of variables • Your client’s Learning Management System (LMS) might not be compatible • Develop and test and HTML 5 prototype on your client’s LMS before committing to the technology. Use the client’s computer/device

20. Consider Browsers This is the text and image I have entered in my HTML5 and CSS3 container. This is the text and image I have entered in my HTML5 and CSS3 container. x This is the text and image I have entered in my HTML5 and CSS3 container. • Modern browsers offer different levels of HTML5 and CSS3 support • Test your content on every browser you expect your audience to use, and on the target devices. Offer a help feature

21. Consider Audio • Audio does not play automatically on every browser, on every device • Limit audio to where it is required to enhance instructional content and reinforce a learning objective • Not every device will play audio as part of a web page and it will open a native media application • Design instructional content where audio can be turned off

22. Consider Content Design • It is unlikely a learner will complete a 12 hour course on their smart phone • Design learning products with HTML5 that provide access to information at the point of need. Design smaller chunks of content with performance support in mind • Pages of instructional text will cause a user to scroll, and scroll, and scroll • Use brevity (when appropriate) to target mobile platforms with instructional content

23. Consider What Your Clients Want Expectations Pulse Check SCORM Compliance LMS VS 508 IE 7 Low-Average Hardware

24. What About My Old Courses? X • There is no magic button which converts all legacy courses into HTML5 although similar systems may upgrade content (e.g. Captivate 4 upgrades to Captivate 6) • Like a new course, you need to consider: • Screen sizes • Navigation • Branding • Compliance • Content redesign

25. Can I Convert Legacy Courses? • Yes, but there are a lot of considerations. Here are a few: • Custom Flash interactions and animations may not transfer • Graphics may be too big for small screens and may not shrink proportionally • Large volumes of content might be too much to maintain learner attention on a smart phone • Audio might not auto-play on all browsers – may require user initiation to begin

26. Finally… • Before believing HTML5 is going to change everything… remember DHTML in the late 1990s/early 2000s? • HTML4, Javascript, and CSS2 • It was going to change the world 10-15 years ago • Can HTML5 overcome these issues DHTML had? • Thus far we are running into some of the same problems

27. Future… • HTML5 authoring software • Adobe Edge looks most promising. • Other tools? • Better exporting capabilities • Articulate, Flash, Captivate, Lectora, PPT?, and the list goes on… • Better browser compatibility on all devices • Waiting on the HTML5 standards to be completed by W3C

28. Now Ask Yourself Is HTML5the Right Fit for YOU?

29. Questions? Contact: Ray Pastore – http://raypastore.com Nick Pastore – nick@nickpastore.com

30. References Ally, M. (2009). Mobile Learning: Transforming the delivery of education and training, AU Press Baird, P. & Whitear, C. (2006). Mobile charting with Flash Lite 2: Designing for the mobile device interface. Adobe mobile and device developer center. http://www.adobe.com/devnet/devices/articles/fl2_charting_components.html Bradley, C., Haynes, R., Cook, J., Boyle, T. & Smith, C. (2009). Design and development of multimedia learning objects for mobile phones. In A. Mohamed (Ed.), Mobile learning: Transforming the delivery of education and training (pp. 157-181). dmonton, Canada: Athabasca University Press. Gahran, A. (2011). What’s a mobile app? Retrieved online fromhttp://www.contentious.com/2011/03/02/whats-a-mobile-app/ Griffin, G. (2011). Ten tips for designing mobile learning content. Learning solutions magazine. Retrieved online fromhttp://www.learningsolutionsmag.com/articles/700/ten-tips-for-designing-mobile-learning-content

31. References Pierre, M., & Diamantini, D. (2009). From E-learning to Mobile Learning: New Opportunities. In M. Ally (Ed.), Mobile learning: Transforming the delivery of education and training (pp. 247–264). Quin, C. (2000). mLearning: Mobile, Wireless, In-Your-Pocket Learning. Quinn, C. (2011). Designing mLearning: tapping into the mobile revolution for organizational performance, Pfeiffer Publishing, USA Stevens, D. and Kitchenham, A. (2011). An analysis of mobile learning in education, business and medicine. In Kitchenham (Ed.) Models for Interdisciplinary Mobile Learning: Delivering Information to Students, IGI publication. Pp. 1 – 25 Traxler (2009) Current state of mobile learning . In M. Ally (Ed.), Mobile learning: Transforming the delivery of education and training (pp. 247–264).