Grit and Oyster Limited

A guide to online learning and training software tools

I’ve been doing some investigating into the best software and tools to use to produce online learning materials.

I’ve been slightly surprised by what I have found.

Learning Management Systems

There seems to be a whole host of different solutions for the administrative side of providing training and education online. These are the various Learning Management Systems (LMS) that are available. They provide features to help you register students, schedule lessons and activities, collect together learning materials, and other sorts of tasks involved in running a training course.

There seem to be a number of commercial LMS products and web services available that are targeted either at the training needs of large commercial organisations or for use by educational institutions themselves. There are some open source alternatives, the dominant one appears to be Moodle.

I’ve had a little bit of a play with Moodle and I am impressed by the range of features and flexibility that underlie it. But it isn’t the most straightforward thing to use and would require a fair amount of development and customisation to offer a high quality tailored solution. If you were setting up a website to offer a range of training courses online it seems to me the most cost efficient approach to your LMS would be to use Moodle but invest in some technical expertise to help you develop it, possibly by integrating it with WordPress to produce a more attractive website.

Courseware presentations

The thing that has surprised me is the limited range of options for creating the online training courses themselves.

Obviously, there are lots of options for producing and hosting audio and video. Also for putting documents and presentations online. And you can of course create web pages of training materials in numerous ways. But the tools and products available to help you create interactive courseware seem to be limited in their use of technologies.

I once was a big fan of Authorware having used earlier versions of the software. This was mainly because of it’s underlying concept of dragging and dropping objects onto a ‘flow line’. Sadly Adobe, while still selling the product, has chosen to discontinue its development. The reason given is that;

 “The eLearning market has transitioned to Adobe Flash…”

It seems that if you what to create really engaging and interactive courseware that makes the most of the medium you really have only one choice and that is to use Flash.

If you wanted to do this is in a big way then you can make use of Adobe’s flash authoring tools. Such as Flash Professional, Adobe Captivate and Director. But this can be expensive. The Adobe eLearning suite for example currently costs £1,714.80.

PowerPoint to Flash

So the most common alternative to building a Flash presentation from scratch seems to be to use PowerPoint and then to use one of the available tools that converts a PowerPoint presentation in to the Flash file format.

There are a number of similar products on the market that do this. The common approach they take is to insert an extra menu tab into your copy of PowerPoint giving you the option to insert extra features like narration and to export as a Flash file. They will also package your presentation together with a Flash player so your file can be placed online and played.

The following products all take this approach:

While creating courses in this way is actually very straightforward and provides a very usable solution for a lot of people, I am pretty dubious about the merits of PowerPoint as a tool as it is. The logic and design behind the creation of a PowerPoint presentation, while familiar and easy for a lot of people to use, is restrictive. Is the conversion of lots of badly designed PowerPoint presentations, overflowing with bullet points, really what we want? What happened to the multimedia future we were promised?

Screencasting

For those creating courseware for training people in computer related activities, tutorials for the use of software products for example, there is also the related issue of screencasting.

Screencasting is;

“A screencast is a digital recording of computer screen output, also known as a video screen capture, often containing audio narration. The term screencast compares with the related term screenshot; whereas screenshot is a picture of a computer screen, a screencast is essentially a movie of the changes over time that a user sees on a computer screen, enhanced with audio narration.”

There are a range of software tools that can help you to create a screen cast as well as some web services specifically designed to host them;

Problems with Flash

When used right Flash can do great things, but there are some problems with it. The obvious restriction is that Apple devices won’t accept it. If people want to look at your training courses on their iPhone or iPad they won’t be able to.

If you want to have your training available to the full range of mobile devices you will need to look at alternatives. You can return to making use of video, although this will sacrifice any interactive elements you have included.

More promising is the use of HTML5. I think this looks to be the best long term choice of alternative technology to replace Flash. But it still has a way to go before it matures and I haven’t found any authoring tools specifically designed to create HTML5 courseware.

So, for anything other than a big budget production, the solution seems to be writing your training course in PowerPoint, possibly adding extra video, and outputting in Flash.

WordPress is dominant in CMS market share

WordPress is by far the most popular content management system for building websites.

Looking at the statistics provided by W3Techs shows that WordPress is used by 14.7% of the world’s top one million websites and over 54.5% of all those websites that use a CMS.

It is interesting to note that the next two most popular CMSs are both also opens source; Joomla with a 10% market share and Drupal with 6.2%.

The same sources provides figures for the use of CMSs by websites in the top one million that have a .uk top level domain. The dominance of WordPress is repeated here with a market share of 48.9%.

A similar pattern can be found in the CMS usage statistics provided by BuiltWith who currently reckon that WordPress is the most popular CMS used by Websites in the top million websites with a share of 63.19%.

More statistical information about the use of WordPress can be found here:

Bookmarklets in Safari on your iPad

I’ve been slowly getting to grips with my new iPad and configuring it to make it a useful business tool. However, one of the frustrations I’ve found is the limited features in the mobile version of the Safari browser. The lack of features I assume makes it robust and speedy but it does make the use of it for some tasks awkward. In particular I want to be able to easily save and share web pages.

However I have just found a handy work around for many of these frustrations through the use of bookmarklets. Setting them up can be a little fiddly but once you have done so you can add some powerful extra functionality to the browser. This screenshot shows the bookmarklets I have added to ‘Save to’ folder on the Bookmarks Bar:

The following pages give instructions for how to do this and provides some of the necessary JavaScript code to create the bookmarklets.

Useful Bookmarklets for your iPad and iPhone

Bookmarklets for your iPad

I’ve also added a bookmarklet for the LibDig service. The JavaScript for this is as follows:

javascript:window.open('http://libdig.co.uk/add.php?u='+encodeURIComponent(location.href)+'&t='+encodeURIComponent(document.title))()

Favicons in WordPress

If you want to include favicons as part of your WordPress theme then you should add the following code into the header of your pages. The code includes a tag for standard favicons as used by most web browsers. It also includes a tag used by Apple devices such as iPad and iPhone.

Code for adding favicons to your WordPress theme:

<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
<link rel="apple-touch-icon" href="<?php bloginfo('template_directory'); ?>/icon.png" />

You then need to create a favicon.ico file and a icon.png image file and add these to the template folder.

The icon file should be an image 16×16 pixels.

The .png file for Apple devices should be 57×57 pixels (although I have seen some suggestions that 114×114 is best for later Apple products). Don’t worry about adding the curves and shiny effects that you see on the Apple devices, these will be added automatically.

Development of bridgetfox.org.uk

Today I have finished working on a new website at www.bridgetfox.org.uk.

This is the personal website of Liberal Democrat politician Bridget Fox and the website is to be used in her campaign to be selected by party members as a candidate for the Greater London Authority list election in 2012.

This project involved setting up a new WordPress driven website, developing a new theme, adding a choice of plug-ins, before implementing the initial page structure and content.

I am pleased with how the theme development went. It enabled me to refine some techniques and design concepts. It also reminded me of the frustration that Internet Explorer does not yet properly implement drop shadows and rounded corners in CSS. Which spoils the impact for anyone looking at the site using IE. Although it doesn’t really have an impact on the look of the website this was also my first attempt to use HTML5 techniques in anger.

The starting point for the development was the Toolbox theme which helped give me a head start with the necessary PHP code. It works very well as a base template and I would recommend it  for anyone thinking of doing their own theme development.

The theme’s colour scheme is based on my Lib Dem colour palette with the addition of more variations of grey. Which is something I will look again at using when revising my other Lib Dem related websites.

The new theme, which has the very unsurprising working title of ‘Bridget’, needs some further refinement, after which I may consider making it more freely available.

Basic HTML page elements

The basic elements of a HTML page::

<!DOCTYPE HTML>

<html>

<head>

<title>Title of the document</title>

</head>

<body>

The content of the document......

</body>

</html>

Choice of doctype

The “document type declaration” or “doctype” should be the very first thing that appears in an web page. The doctype is not an HTML tag. It is an instruction to the web browser that identifies the version of the markup language the page is written in.

Specifying the doctype is important to ensure that the browser knows what type of document to expect. The doctype therefore specifies which of the standards, set by W3C, for coding webpages you are trying to conform to.

There are a number of choices. There is the choice between HTML and XHTML. Then there is the choice of the different flavours of each, strict or transitional. Researching the differences between these to determine which is the best to use becomes bewildering. There is a whole load of contrary advice and opinion. Some of which gets very technical, particularly relating to MIME types.

I have a lot of sympathy with those who wish to conform to strict standards and have neatly written code. Also with those who want to use more recent standards and look to the future. My instinct then is to use XHTML strict. This requires you to write better code and have the presentational elements dealt with by CSS. Which is the way it should be.

However, the key thing I have learnt is this;

“Standards are written for validators not web browsers.”

When serving a text/html document all you need a doctype for is to trigger standards mode in the browser. As long as your HTML markup then produces the right result you don’t need to worry. Everything else is just the personal preference of the developer.

So which doctype to use?

Well, while HTML5 is not yet an official standard, it is the direction in which the world is heading. Also, the HTML5 doctype is really simple:

<!DOCTYPE HTML>

So for the future I am going to try using the HTML5 doctype but write my code using XHTML syntax.

specify the doctype in all HTML documents, so that the browser knows what type of document to expect.

Liberal Democrat web colour palette

Grit & Oyster often does work on websites associated with the Liberal Democrats. I try to ensure that these websites conform to the corporate style of the national party.

An official colour palette was included in the style guide published by the national party. Unfortunately this colour palette, while specified in RGB and Pantone values, was not specified in the hexidecimal format commonly used within web code. Also I have learnt that the palette used on the national Liberal Democrat website does not conform precisely to the palette included in the style guide. Although, this is probably sensible as some of the colours don’t work so well when displayed on the screen.

To deal with these issues I have created my own Lib Dem colour palette for use on websites. I have made this publicly available on this website on a page which has details of both the direct translation from the style guide and the palette that I came up with. It can be found at the following link: