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?
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).
Top Related