How to develop HTML5 eLearnining

Question: I am concerned that I won’t be able to develop courses without understanding HTML5. What resources would you recommend to help me upgrade my skills and remain current?

That is a great question. Below I list a few resources with which you should experiment as doing so will help you extend your current HTML, web programming, and eLearning development knowledge. At the time this question and response were posted HTML5 remains an unfinished standard that is not supported consistently across all browsers, so it may be premature to start developing all eLearning natively in HTML5. Rather, you may want to continue developing to existing HTML, CSS, and JavaScript standards that are fully supported if you wish to target mobile devices with eLearning now. Additionally, be prepared for the reality that there are no easy “do-it-yourself” tools that output HTML5 eLearning that synchronize your audio to animated graphics. As a result, you will likely have to approach development and your multimedia experience with lowered expectations. Flash makes it very easy to join audio and visuals in interesting ways and with an ease of use that programming in HTML simply does not match at present.

Recommended HTML5 eLearning Development Resources:

  • HTML5 Browser Compatibility Tool: Use this tool to see which browsers support which HTML5 features and functions.
  • PopcornJS.org: This is an opensource tool from Mozilla (same folks who brought us FireFox) that allows you to add text-based commentary timed to your videos. This is a promising technology that makes it easy to link to Twitter, Wikipedia, Googlemaps, websites, images, and other assets to specific points of a video. It’s free and they offer a ton of creative examples. This tool kicks out the code for you, which you can then bring into Dreamweaver (or your favorite web editor) and modify as desired.
  • Adobe Wallaby: This tool converts Flash FLA files to HTML5. It’s in the early development stages, so it should only improve with time.
  • Captivate-to-HTML Conversion Tool: A new version of this tool was released recently that exports more interactive quiz elements to HTML5. More conversion capabilities are on the way.

 

One thought on “How to develop HTML5 eLearnining

  1. NOTE: This article was originally written in 2011. Since then many new tools have hit the market including Adobe Edge and Articulate Storyline. Additionally, existing tools like Adobe Captivate have been upgraded to allow for easy export to HTML5 and new and improved technologies are certain to hit the market constantly.

Leave a Reply