1

Exploring Training Development and Cross Compatibility with HTML5

Ray Pastore, Ph.D.University of North Carolina

Wilmington

Nick PastoreBooz | Allen | Hamilton

HTML 5

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 AndroidJava

Programming*Eclipse

Apple's iOS: iPod/iPhone/iPad

C, C++*Xcode

AndroidGoogle App Inventor (well MIT)Flash?HTML5 (PhoneGap)

AppleFlash?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

Screen sizes and screen layout impact how you design your learning content

HTML 1-4

HTML5

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

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

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. This is the text and image I have entered in my HTML5 and CSS3 container.

x

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

VS

Pulse Check

Low-Average Hardware

SCORM Compliance

LMS

Expectations

IE 7

508

24

What About My Old Courses?

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

X

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 HTML5 the 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 from http://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 from http://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).