{"id":3396,"date":"2016-04-21T14:52:40","date_gmt":"2016-04-21T14:52:40","guid":{"rendered":"http:\/\/www.efrontlearning.net\/blog\/?p=3396"},"modified":"2017-06-22T12:37:45","modified_gmt":"2017-06-22T12:37:45","slug":"h5p-integration-efrontpro-4-4","status":"publish","type":"post","link":"https:\/\/www.efrontlearning.com\/blog\/2016\/04\/h5p-integration-efrontpro-4-4.html","title":{"rendered":"Create richer learning and talent development experiences with H5P in eFront 4.4"},"content":{"rendered":"
Most of you probably already know that eFront\u2019s 4.4 update release has very recently been, err, released.\u00a0(And for those that are just finding out this, you can read more about the release here <\/a>\u00a0— and install it immediately thanks to eFront\u2019s one-click update option).<\/p>\n

What you might have easily missed though, among all the great new functionality this nominally minor but feature-wise major eFront 4.4 update brought, is a little something called H5P integration<\/strong>.<\/p>\n

In this post we will explain what H5P is, why it\u2019s important, how can you use H5P\u00a0in eFront content, and why we consider it the flagship feature of the new release.<\/p>\n

Let\u2019s dive in.<\/p>\n

H5P what?<\/h2>\n

H5P is a content creation toolset<\/strong> — a set of libraries and tools that help content creators to create rich web-based interactions.<\/p>\n

In its most basic and ready to use form, H5P is a collection of JavaScript scripts, CSS styles, and HTML templates that implement interactive web widgets. You can select among several already provided components, pick the one you like, and add it to your eFront content<\/a><\/strong>.<\/p>\n

If you\u2019re willing to dive deeper though, H5P is much more than that, and more specifically, it\u2019s two additional things:<\/p>\n

A rich content creation framework<\/h2>\n

More than a mere collection of ready-made rich content widgets, H5P is an open source framework, file format and specification for the design, creation, packaging and sharing of your own widgets.<\/p>\n

H5P provides not only the basic libraries that you need to create a custom HTML5 widget, but also a web-based content editor to assist you in its development, and, more importantly a set of conventions and guidelines for packaging that widget in a common, sharable, format.<\/p>\n

Why is that important? Because, H5P is also…<\/em><\/p>\n

An open community collaborating on rich HTML content<\/h2>\n

Remember those ready made H5P widgets you can just take and use in your own content? They were not handed down from some parent company or close knit project team — rather, they are created, and shared freely, by the H5P community.<\/p>\n

This means that, as long as the community exists, you will always find new free and open source content, and you can even share your own custom widgets there. You can have the collective skills of the H5P community not just use them, but also improve them for you.<\/p>\n

And because it\u2019s a standard format, H5P applications and file formats work the same way in all H5P compatible websites — in other words not just in eFront, but also in your corporate website, WordPress installation, etc.<\/p>\n

What\u2019s not to like?<\/em><\/p>\n

So, what kind of stuff can you do with H5P in eFront?<\/h2>\n

As a content development framework H5P is quite open-ended.<\/strong> Your imagination (and programming skills) are the main limits. Chances are that if you saw something on the web, you can probably replicate it as an H5P widget.<\/p>\n

In any case, to give you a taste of the kind of rich widgets possible in H5P (and, from 4.4 onward, eFront), here\u2019s a list of examples available on the project\u2019s website:<\/p>\n

\u2022 Course Presentation<\/a><\/strong><\/p>\n

An HTML5 based presentation widget allowing users to display a number of slides with added annotations, HTML text, multiple choice questions<\/a><\/strong>, fill-in-the-blanks quizzes, and many other types of interactions.<\/p>\n

\u2022 Interactive Video<\/a><\/strong><\/p>\n

An HTML5 based interactive video widget allowing users to show a video<\/a>\u00a0<\/strong>with added annotations, multiple choice questions, fill-in-the-blanks quizzes, and many other types of interactions in their web browser.<\/p>\n

\u2022 Timeline<\/a><\/strong><\/p>\n

An HTML5 based widget allowing content creators to create interactive timelines, consisting of a scrollable “time ruler” with annotated dates that can be clicked to reveal more information (including title, description, pictures and body text) about them.<\/p>\n

\u2022 Memory Game<\/a><\/strong><\/p>\n

An HTML5 widget based on the classic memory game, where the user has to click the appropriate tile pairs. The images shown are fully customized, as is the message to be displayed on a successful match.<\/p>\n

The project site contains many other content types, from time based arithmetic quizzes to find the hotspot games, which you can check out here<\/strong><\/a>. Keep in mind that these are just some provided examples — there are loads more H5P content available.<\/p>\n

Adding an H5P widget to your eFront content<\/h2>\n

…is dead easy.<\/p>\n

First of all, there\u2019s no configuration involved. eFront content writers (i.e. Instructors) can create H5P content from the “Lesson -\\> Add Unit” menu, and selecting either “h5p editor” or “file” from the dropdown.<\/p>\n

\"H5P<\/p>\n

The first option gives them a specialized editor where they can create new H5P content, while the latter lets them import an already existing H5P package into eFront.<\/p>\n

Making your own H5P widgets for eFront<\/h2>\n

If the available H5P content widgets don\u2019t scratch your itch, then you can create your own widget (or start small, by adjusting an existing one).<\/p>\n

All you need is a working knowledge of HTML5, CSS and JS, the H5P API, and the H5P content packaging conventions (basically, providing a JSON file with the relevant metadata for your widget type).<\/p>\n

The community itself provides a handy guide for prospective developers<\/strong>, which you can find here<\/a><\/strong>: — and it even has separate sections for people (a) wanting to create new H5P content types, (b) wanting to adjust existing ones, (c) looking to integrate H5P to some new platform, or (d) trying to extend the core capabilities of the H5P framework itself.<\/p>\n

If you\u2019re just starting out with H5P, you\u2019ll more likely want to check the sections for (a) and (b).<\/em><\/p>\n

Conclusion<\/h2>\n

In this post we had a look at H5P, the content creation toolset that\u2019s supported by eFront 4.4 and later<\/strong>, and the content type library and community that comes with it.<\/p>\n

Stay tuned for more insight into eFront <\/a>and its eLearning and Talent Development capabilities!<\/p>\n