How HTML5 helps us offer learning anywhere and on any device
England played Brazil at Wembley last night. Millions of people knew that England won 2-1 because they watched the match on TV. Many more will have found out the score by checking their mobile, or watching the match online. People read the news, check the weather, watch films, edit photos and keep in touch with one another on tablets and smartphones every day. We all seem to want information while moving.
So why is most online learning built for people sitting in front of a desktop screen?
The alternative – creating content that works on mobile and desktop – suits the way people live and work nowadays. And that’s what we focus on here at Coracle.
HTML5 has a few features that help us do that right now, and when the new specification is fully supported by the big browsers, there are some interesting storage methods that will make it even more suitable for our style of e-learning.
Markup the HTML5 way
Let’s start by looking at one or two nice bits of HTML5 that are already widely supported and make online learning easier regardless of the device you’re using.
Firstly, HTML5 offers the scope for cleaner code than earlier versions of HTML. New tags like < footer > and < nav > are semantic (in other words, more understandable by humans) and easier for those using screen readers to make sense of the layout. This represents an immediate win for accessibility.
Secondly, it’s now easier to drop multimedia into a page using the < video > and < audio > tags and the native players included with recent browsers. Gone are the days of forty lines of code needed to display a Flash player that won’t even display on an iPhone.
Those are just some of the features that make interaction easier. But HTML5 introduces a lot more, and imaginative uses will appear as people like us test the scope of what’s possible. Here are some examples, which are not yet fully supported across all browsers:
‘contenteditable’ allows a user to type directly into the web page and alter existing text, which has obvious potential for testing and quizzes.
The number attribute of a form input can be set to accept a specific number or a range, with possible uses in basic arithmetic. ‘oninput’ will then let you calculate quite complex sums.
Native drag-and-drop can be used for simple learning games that require matching or sorting of objects or words.
The new Canvas API simplifies SVG drawing, potentially eliminating the need to download images such as diagrams, maps and flowcharts, and letting learners draw in the browser.
Imagining future uses
What you get out of HTML5 depends to an extent on what you can imagine, and here at Coracle we’re imagining, and working on, some revolutionary ideas. Of particular interest to us is the issue of offline access to e-learning content and the ability to interact with a database. The database in question is the Coracle Learning Line.
But what about apps?
All this talk of HTML5 suggests we ignore apps developed for specific devices. Nothing could be further from the truth! We like iPhone and Android apps (we built one that had over 7 million downloads), and believe that they have a place in online learning. But the proliferation of devices and screen sizes is making a stronger and stronger case for HTML, especially when building large scale courses with formats ranging from text to video to quizzes. In short, apps can be useful for discrete learning tasks, but it still makes sense to deliver the bundle in HTML.