Development and Cross

needlessoybeanΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 4 μήνες)

44 εμφανίσεις

Exploring Training
Development and Cross
Compatibility with HTML5

Ray Pastore, Ph.D.

University of North Carolina
Wilmington

1

Nick Pastore

Booz | Allen | Hamilton

HTML 5

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



2

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?

3

Cross Compatibility


S
oftware/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


4

But do they work?

5

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


6

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…

7

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


8

So how do we develop for the
mobile device?

9

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
)


10

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!!!

11

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


12

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.

13

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.

14

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…

15

Design Considerations

16


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

HTML 1
-
4

HTML5

Consider Navigation

17


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


Consider Branding

18


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



Consider Compliance

19


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



Consider Browsers

20


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

Consider Audio

21


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



Consider Content Design

22


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


Consider What Your Clients Want

23

VS

Pulse
Check

Low
-
Average
Hardware

SCORM
Compliance

LMS

Expectations

IE 7

508

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



24

X

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


25

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

26

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


27

Now Ask Yourself

28

Is
HTML5

the

Right Fit for YOU?

Questions?

Contact:

Ray Pastore


http://raypastore.com


Nick Pastore


nick@nickpastore.com


29

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

30

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).


31