HTML5 Resources for the Learning Community

This page is intended to help professionals in the learning design and development community make sense out of the HTML5 craziness. It is maintained on a regular basis (see end for date of last update).

Also, see all onehundredfortywords posts about HTML5.

Have comments, suggestions, questions? Leave a comment at the bottom or send a tweet.

HTML5 in Action

This section could go on for days. Here are some of my favorites.

Apple’s HTML5 Showcase – This showcase is built to — well, showcase — slick new stuff that’s possible in HTML5.
HTML5 Demos and Examples – Simple demonstrations of HTML5′s new features
GWT Quake – Yeah, this was coded by Google engineers, and not using rapid development tools, but it’s a pretty powerful demonstration of the capabilities of modern web technology.
BrowserQuest - A massively multiplayer, browser-based adventure game from Mozilla
Madmanimation – A spinoff of the Mad Men opening sequence, using CSS3
MTA.me – A seemingly simple site that plots NYC train routes and departures – and turns them into music
Wind Map – A map of US wind patterns that updates every hour based on the National Digital Forecast Database (HT Kelly Meeker and Tim P. Martin)
Nike Better World – A very cool site for its parallax scrolling effects, its use of media, and its message

General HTML5 Information

HTML5 Rocks – One of the most complete sites for demos, articles, and general information
Dive into HTML5 - An explanation of some of the most important features of HTML5, plainspoken and artfully illustrated
Flash-Centric Misconceptions of HTML5 - Excellent and recent explanation of some of the strengths and weaknesses of HTML5
The State of HTML5 Video – Report from Long Tail Video on the current browser stats and market share related to video
HTML5 Frameworks – List of freely available HTML5 frameworks

HTML5 Resources by and for the Learning Design, Development, and Delivery Community

HTML5 and eLearning: What Managers and Practitioners Must Know - The eLearning Guild’s 2012 Hot Topics Report on HTML5 and eLearning, by yours truly
Beyond the Hype: Understanding HTML5 and its Potential for e-Learning and mLearning - I wrote this article for Learning Solutions in 2010 and there aren’t a lot of updates to be made… except that now mobile devices iPads are even more common and Adobe is dropping support for mobile Flash altogether. So, HTML5 is even more important now than it was then.
What Do We Mean When We Say HTML5? – This post for Learning Circuits covers similar ground, but with a more basic lens.
HTML5–What’s the Urgency? – This post for Learning Circuits is a followup and covers whether you really need to be concerned about HTML5 right now.
Getting Started with HTML5 – Tips, Techniques & Insights from the Media Stage #LSCON - This presentation from Nick Floro is chock full of great information, data, resources, and tools. Be sure to subscribe to his blog, too!
HTML5 vs. Flash: Selecting the Right Tool for the Job – Paper from Allen Learning Technologies
HTML(5) Development Tips on Learning Solutions Magazine – Excellent ongoing column from Mark Lassoff

Development Tools

While there are many tools in development or beta, at this time, this list only includes tools that have been released.

“E-Learning” Authoring
Adobe Captivate – Version 6 advertises HTML5 publishing; I haven’t tested it at this time. More
Articulate Storyline – Has separate options for publishing to HTML5 and publishing for iOS – more capable, but with a player requirement. More
dominKnow Claro – A web-based authoring tool with excellent publishing to HTML5, an easy-to-use interface, and some surprisingly powerful features under the hood (though not yet all that I’d like). More
Luminosity Studio - A desktop-based tool that also supports multiple authors, with excellent publishing to HTML5 and Flash. More
Rapid Intake mLearning Studio - A web-based, highly templated authoring tool with excellent publishing to HTML5 and Flash. More
Raptivity HTML5 Bundle – I’ve never found much use for Raptivity’s stuff, but it’s there. More
Trivantis Lectora – Though Lectora doesn’t do a great job of taking advantage of the new parts of the HTML5 spec, it’s worth consideration as a powerful tool for publishing to HTML. More
SumTotal ToolBook - ToolBook has implemented some new HTML5 features, such as Geolocation, and provides great support for delivery on multiple browsers. More

Animation
Tumult Hype - My pick for keyframe animation, Hype uses JavaScript to create animations that can stand alone or easily be integrated into HTML-publishing tools.
Sencha Animator – In my casual use of Animator, I’ve never found that it has no significant edge over Hype (at least for what I do), but it’s definitely one you will want to compare.

Video Conversion
Miro Video Convertor – free, open-source, lightweight desktop app
Telestream – full-featured, paid desktop app
Zencoder – full-featured, pay-for-what-you-convert web app
Brightcove – convertor and full-featured video platform

Audio
Audacity – free, open-source, and exports to all HTML5 standard file formats

Browser Capabilities

When can I use… – A granular chart of HTML5 support in all main browsers
HTML5 Readiness - Cool graphical view of some of the key information from caniuse.com
The HTML5 Test – Test your browser for HTML5 support and compare to other browsers.

Learn HTML5

W3C Schools – My go-to site for learning new tech stuff, with the ability to immediately see the results of your code
Treehouse – Screencasts… but really well-done ones
Syncing Page Content with HTML5 Video – Kinda what it sounds like
HTML5 Rocks – Articles, demos, tutorials… probably the most complete collection of HTML5 resources, period.

Last updated: 11/15/2012