WordPress And H5P : The Future Of Rich Content?
WordPress And H5P : The Future Of Rich Content?
H5P is not your average WordPress content plugin: it is a genuinely innovative way to create, embed and share rich HTML5 content via your WordPress site.
Although it’s perhaps aimed more at educational content, there are content types such as image hotspots, presentations and timelines that will be of interest to any WordPress site owner.
So take a peek at what could be the future of rich HTML5 content.
What Is Rich Content?
Rich content is more than static text or images and goes beyond sliders and lightbox galleries. Whereas the vast majority of content is passive, rich content is active, requiring interaction to get its full value.
And unlike embedding, the content is available for modification.
This is not just custom post types on steroids, this is the delivery of self-contained HTML5 applications.
Creating Rich Content With H5P
H5P allows you to create multiple content types:
Most have an educational bent but there are a number with global appeal, particularly the image hotspot, presentation and timeline types. No doubt new content types will be added down the track.
Somewhat confusingly when you first install the plugin, there are no content types preloaded. To enable creation of a particular type you need to load an existing example (H5P Content > Add New), which seems a little curious but is perhaps to keep the plugin file size down – the presentation content type is 40mb.
Many of the downloadable examples contain multiple content types (presentations, for example), so you won’t have to download them all. An option to import the custom types would save a lot of time and effort.
What’s H5P like to work with? To test the plugin, I created 3 content items, all with a World Cup theme :
- A timeline of Germany’s World Cup fixtures
- An image hotspot of the Germany squad
- A simple World Cup “fill-in-the-blanks” quiz
Unfortunately, and I’ve yet to find out why, there seems to be a couple of issues which have prevented me from embedding the actual H5P examples in this article. No doubt these are just the regular teething issues that every new product experiences.
Example 1 – 7 Matches To World Cup Glory
This is a timeline covering those glorious (if you are German) 32 days across June and July 2014 as Germany battled through 5 matches and cruised through 2 to win the 20th edition of the World Cup for the fourth time.
Building the timeline involved:
- create a new date item for each match with the scoreline (title) and the flag of the opposition plus a very short summary (content).
- create an era item for each phase of the competition (Group Stage, Round of 16, Quarter-finals, Semi-finals, Final).
Nothing too complicated here and the end result is pretty eye-catching:
Download the H5P Examples (zip, 2MB) to look at the details of this timeline or to create your own.
If you have the plugin installed you should simply be able to download the H5P file and load it up into your site and use it without modification.
Example 2 – Germany’s World Cup Winning Squad
This example uses the image hotspot content type to overlay a picture of Germany’s World Cup winning squad with clickable hotspots that bring up an overlay with information about the player:
This simply a matter of:
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
- loading the main image
- adding a hotspot for each player
The coordinates of the hotspot are in percentages (this allows the hotspot position to be maintained as the page responds to a changing screen size or different devices) and requires some trial and error to get it right. I used a rule extension for Chrome to get the actual coordinates for the hotspot and then converted them to percentages based on the display width and height of the image.
My only gripe about this feature is that the HTML that the overlay supports is fairly limited – I couldn’t work out a way to get images in there, for example, and there’s no support for tables. Even if you cut and paste into the textarea, the save process strips out the HTML.
Otherwise, a quick and easy way to create an image hotspot.
Download the H5P Examples (zip, 2MB) to delve more into this hotspot or to create your own.
Example 3 – Test Your World Cup Knowledge
As mentioned previously, the majority of the content types do lean towards educational content, so I picked one of the simpler looking quiz content types, the fill-in-the-blanks type, to create a small (but fiendish) World Cup quiz:
The questions are added by annotating text – the answers are bookended with asterisks (*) and alternative answers are separated with a forward slash (/).
For example, here’s the question for the The Best Player:
The Best Player was awarded to *Lionel Messi/Messi*.
This will replace the text contained within the asterisks with a blank input text box when initially displayed and allow either “Lionel Messi” or “Messi” as a correct answer.
Download the H5P Examples (zip, 2MB) to play with this example further or create your own fill-in-the-blanks content type.
Is Packaged Rich Content The Future?
H5P delivers impressive functionality, wrapped in a functional, if not entirely pretty, user interface. The 3 examples above are some of the simplest: it can get pretty complicated with question sets and presentations.
H5P provides a simple pathway to producing attractive and interactive content coupled with the ability to easily share, reuse and extend that content across a number of content management systems. A compelling combination.
But there’s more at play here.
The potential of H5P is to revolutionize the creation, delivery and sharing of rich HTML5 content; the ability to create the content in one app and deliver it in another; the capability of sharing that content across multiple platforms without modification.
This is a single plugin that can potentially deliver a vast array of rich content types (14 is not a bad start) – just load up an example and now your WordPress site can create it. Perhaps down the track authoring is removed altogether from the delivery channel and takes place in a dedicated app.
What it needs is momentum and community. It needs more rich content types; it needs to be supported by many more content management systems (although going with WordPress is a good start); it needs to be able to work standalone; and it needs, perhaps, a dedicated authoring tool.
Plenty of room for improvement, perhaps, but H5P’s current functionality and its ability to help content authors create rich, interactive content means that every WordPress site owner should be giving it careful consideration.
What do you think of H5P’s approach to rich HTML5 content? Does the idea of creating content that is independent of WordPress and easily transferrable appeal to you?