Toolkit: Tools for Delivering eLearning with HTML5 (Part 1)

If you work in eLearning, and even if you don’t, you’lllikely have heard how everything is changing when it comes to deliveringeLearning. For years, we relied on the Flash plugin to deliver our lessonsonline. However, since the advent of mobile devices, and most especiallyApple’s iPhones, iPods, and iPads, Flash has become less acceptable, and manyeLearning producers have been looking for an alternative. That alternative haspresented itself in the evolution of HTML from version 4 to version 5.

HTML5 is not a total replacement for Flash nor is it withoutits own set of issues. Thought of primarily as a means of delivering rich mediaand interactive experiences to mobile devices, desktop browsers are catchingup, some slowly, others more quickly, to be able to support HTML5.

This story has two parts. This month, I’ll discuss the brasstacks of HTML5 and introduce the eLearning development tools that allow fordelivery to HTML5. Next month, I’ll focus more on ancillary tools and sitesthat we use in the business of creating HTML5-based eLearning, besides the mainones we know and love.

Delivering to the desktop

Many organizations do not update their web browsers on aspeedy basis, and therein lies an issue. To see HTML5-based websites, includingthose in which you deliver eLearning, you will want to use recent versions ofbrowsers. One way to tell if your browser is ready is to go to www.html5test.com.

This site will give you a score between 0 and 500, thehigher, the better. No browser currently scores 500 on the site, and, in fact,even if your browser reports a score of less than 400, you may still be OK. Theonly way to know for sure is to test your eLearning thoroughly in your browser.However, here are some browser scores you will find interesting. If you don’tsee yours listed, just go to the site above. The most problematic browsers areolder versions of Microsoft Internet Explorer.

(Editor’s Noteconcerning bonus points: According towww.html5test.com, “The test also awards bonus points for supporting audio andvideo codecs and supporting SVG or MathML embedding in a plain HTML document.These tests do not count towards the total score because HTML5 does not specifyany required audio or video codec. Also SVG and MathML are not required byHTML5; the specification only specifies rules for how such content should beembedded inside a plain HTML file.”)

Deliveringto mobile devices

Delivering to mobile devices (tablets and phones) gives scorescomparable to those of desktops if you stay up to date on browsers. However,mobile devices use mobile operating systems and they are unique in other ways.

Limitations

For one thing, you don’t use a mouse on a mobile device. Youtend to use your finger, which is quite fat when compared to a mouse cursor,and because of that, you don’t have a hover or rollover option as you do with amouse cursor. With a mouse, you can move the cursor to a location on the screenand hover there, allowing for rollover states or pop-ups, and then you canclick to activate a different function. On mobile devices, in essence you justclick; you can’t hover.

Advantages

On the other hand, mobile devices have cool ways ofinteracting that desktop and laptop computers do not. Most new mobile deviceshave an accelerometer, allowing you to control the on-screen environment bysimply shifting the device in your hand. You can also use two fingers to zoomin and out. Some laptops have touch screens that allow this as well.

However, note that current eLearning developmentapplications do not take advantage of accelerometers and pinch-and-zoomfeatures. Instead, they attempt to give as nearly similar experiences acrossdesktop and mobile environments as possible.

Tools you can use to deliver HTML5-based eLearning

Tool vendorshave been busy updating eLearning development tools to allow you to publish toHTML5. Some vendors claim to deliver to HTML5 when in reality they deliver toHTML4, as they have all along. While HTML4 will also work on most mobiledevices, tools that publish to HTML and not to Flash generally do not allow forlearning experiences as rich as those that publish to Flash. No tool at thistime takes advantage of most of the features that are unique to HTML5, asnoted.

Thefollowing are your best bets for creating eLearning that publishes to HTML5.

1. AdobeCaptivate 7

   Gives you a choice to publish to Flash or to HTML5 or to both. If youchoose to publish to both, Captivate also includes another file, calledmultiscreen.html, which will check the learner’s device. If the device supportsFlash, it will deliver the Flash version. If not, it will deliver the HTML5version. Captivate also includes a feature called HTML5 Tracker so that you cansee if any elements in your eLearning are incompatible with HTML5.

2. ArticulateStoryline 1, Update 3
   

   It will always publish to Flash, but also lets you publish to HTML5. Inaddition, Articulate provides a mobile player for iPad that learners can downloadfor free and that will allow the published Flash file to run on the iPad. Onthe iPad, learners can also choose to download the entire lesson for offlineviewing.

3. iSpring Suite

   A PowerPoint add-in tool, iSpring Suite delivers to both HTML5 and toFlash.

4. SmartBuilder

   Always publishes to Flash, but provides an application to convert to HTML5. Seehttps://help.smartbuilder.com/node/589for those features that are supported and those that are not.

5. dominKnow Claro

   A cloud-based tool released about a yearago, Claro supports HTML5 publishing.

6. ComposicaEnterprise 6

   The newest version of Composica takes advantage of HTML5 standards wherepossible.

7. LectoraInspire 11.1

   Lectora Inspire has always produced HTML output, and was the first authoring tool that allowed media to run via HTML5 on mobile devices. It does not differentiate between “HTML5 publishing” and “HTML publishing,” because the published code automatically detects if Flash or HTML5 media support is present and dynamically chooses the appropriate method at run time. There is no need to publish twice as it adjusts itself automatically.

8. ReadyGo

   Has always published to HTML4 and socan run on most mobile device and desktop browsers.

In my research, I’ve discovered a new tool that I have not yet had a chance to test. Ifyou know about this tool, feel free to share in the Comments section below.

Landmark Liquidauthoring. Browser-based, purports to output to HTML5. https://landmarkelearning.com/liquid-authoring/

Next monthI’ll look at eLearning development templates and other useful applications thatassist in delivering to HTML5. I’ll also attempt to give you my thoughts on Liquid Authoring.

Do you knowof a development tool that does a great job of delivering to HMTL5 that Ididn’t include? Please use the comments section below to tell us all about it.

(Editor’sNote: Joe has written a new eLearningGuild Research Report, AuthoringTools 2013: What We’re Using, What We Want,which will be released in early October. He is also preparing an article forpublication in Learning Solutions Magazine later in October that will compare the top tools from this report.Watch for all this great and extremely useful information coming your way!)