twitter-bootstrap-buttonsI’ve been writing about the creation of my WordPress starter theme, ‘Oystershell’, that I used as the base for the development of the theme for this website and how I used a range of other starter themes and code bases as inspiration. One of the decisions I made was to include the code for making CSS buttons from Twitter Bootstrap.

Twitter Bootstrap is a “sleek, intuitive, and powerful front-end framework for faster and easier web development” provided by Twitter. It has a range of components providing different user interface elements that used together can help you build a website in the style of the Twitter website.

I really like Bootstrap. The elements are well designed and stylish. But I didn’t want to include the whole of it in my starter theme. I wanted to pick and choose from the elements and happily the Bootstrap website includes a feature that allows you to customise your download so you only get the bits of code you want.

The component I thought would be most useful to include in my starter theme was the Bootstrap style buttons. You can see some examples of these here:

Buttons

A Bootstrap ButtonAnother Bootstrap Button

Bootstrap Button with icon Bootstrap Button with white icon

Mini Small Default Large

Disabled

Primary Info Success Warning Danger InverseButton Block

With CSS from Bootstrap added to my starter theme’s CSS I only need to add a simple class declaration to a <button> or <a> tag to turn it into a snazzy button.

I wrote yesterday about the creation of my WordPress starter theme, ‘Oystershell’, that I’ve used as the base for the development of the theme for this website. I mentioned that I had looked at a range of other starter themes to get ideas and inspiration, and in some cases actual code, to help with the development.

The most influential was ‘Underscores’ — or ‘_s’ — which ended up being, if you like, the starter theme for my starter theme.

_s has a good pedigree built as it is by the Theme Team at Automattic. I liked it because, despite its sophistication, it seemed simpler to understand than some of the others I looked at.

Well I have been making progress on refocusing my business activities and preparing for my relaunch over the last couple of months. This has included more work on the Grit & Oyster website. I’ve just completed a major phase of developing the theme and most of the component parts are now there. This has taken a little longer than I had planned because I decided to step back before going forward.

I decided that I wanted to create a ‘template’ or ‘starter’ theme to act as a reliable code base for future development. Essentially this is a WordPress template which works and has all the necessary code and files, but has a limited amount of design and styling applied to it. This is so you can use it as a platform to build other themes on.

I did look at a range of the existing ‘starter’ themes and templates that are available. I had a good look at the code of some of the more popular ones. But while they provided inspiration, and in some cases some useful bits of code, I decided I wanted to create one for myself. Partly this was simply for the challenge, but it was also because I felt that if I was going to use it to build websites for clients I really needed to know and understand the code thoroughly — and the best way to do that is to write it yourself.

What I’ve ended up with I’ve called “Oystershell” and while not yet perfect it is finished enough to be used in anger. I am rather pleased with some of the features:

  • It has the option of a responsive or fixed width layout
  • The status, aside and quote post formats are included
  • It has a number of customisable functions that will make theme development a lot easier
  • I’ve included a range of action hooks that I can make use of in custom plugins
  • I also think the CSS style sheet provides a pretty comprehensive base covering all the common and a lot of the not so common page elements

The theme for the Grit & Oyster website is now a child theme of the Oystershell starter theme. Creating that child theme was a good test of using it as base for theme development. The main additions were the colour scheme, the use of web fonts, and getting the particular responsive layout I wanted. There was also some tweaks to the post formats and the addition of special features for the website home page.

I’m aware that what I have ended up with is not the most stunning piece of graphic design – but then it wasn’t really intended to be. My objective was to come up with a technically solid implementation of a WordPress theme that uses standard compliant code. I wanted to avoid the use of JavaScript where possible, preferring intelligent use of CSS, and to try out techniques of responsive design. All of that I believe I have achieved.

Now to concentrate on some actual content!

This website and blog has been badly neglected. The “temporary” theme I was using for it, “Fluid Blue“, was installed back in September 2010 and there has been no new content for almost exactly a year. This is not remotely good enough!

However, over the last couple of months things have begun to change. I’m refocussing the business and beginning to gear up for a bit of a relaunch in the near future. More of this shortly. As a part of that I am paying some proper attention to my professional online presence and sorting out the Grit & Oyster website.

So far I’ve made quite a few changes on the back-end with a move to a new server for web hosting and setting things up so that the site can become more a cluster of WordPress installations, each serving a different purpose. I’ve also installed this snazzy new theme. This time it is one I have developed myself. The aim of theme was to be more reflective of the Grit & Oyster branding, such as it is, and to make full use of responsive design.

Obviously there is still a lot of tweaking of the theme and the layout and content of the site to do. I’m conscious it lacks images and the front page has more gaps than content at the moment. However, I am happy with the overall shape of the site. While I do want it to promote my work and the services I offer, my objective for the future is for this to become my “media and technology” blog, with a particular emphasis on WordPress. So hopefully you won’t have to wait another year for the next post!

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 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:

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))()