Making my moodle themes a little bit smarter

20 06 2011

When I was little, I was an avid commodore 64 player.. eventually we got a 286, then 386, 486, pentium, etc and so on.. Now we’re walking around with awesome tablets like the iPad2 and so on, its staggering to think of the progress.  ..and after using computers for almost all of my life, I’ve really been noticing in the last 5 years that something new is actually starting to happen.

Simplicity. Intuitive design. Computers and all the user interfaces are finally starting to take away the dirty layers between our minds and what’s happening in the screen.  For instance, I’m finding more and more that before I even get to think “how do I do this?” (when using a tablet/website) I’ve actually already done it by accident (well, by intuition actually) – is it the computers, UI, and software changes, or is it actually ME that has changed, or both?  Probably both, but nonetheless its bloody amazing.

With my UI & web design I’m trying to make the effort in the design/development phase to reflect all this. Mostly this has just involved basics like not having save buttons in web apps (auto saves with ajax etc); loading content in to pages without needing to refresh the whole site; and pseudo intelligent UIs that change the layout of the site for different devices. The stuff that removes some of the thinking or burdens from the user.  Anyway, I thought how I could apply this to Moodle.

Making my themes play nice with mobile devices:

Naturally I thought of updating my moodle theme designs to better cater for mobile viewing.  Now I say “better cater for”, because this is somewhat of a half way improvement, not the ultimate solution (which would probably be a native app).  I know people out there are doing big stuff for mobile moodle and mobile friendly moodle themes etc; but rather then going all out and desiging a completely new theme OR trying to change the way moodle works; I’ve simply written some YUI (the default Moodle scripting library) to change the interface on the fly if the user is on a mobile device/tablet (things like iPhones, iPads, Androids etc).  Yep, so the user experience is the same on a desktop, laptop and mobile, but the display format just changes to suite the smaller device better.

Basically I wanted to get RID of how tiny everything is when viewed on such small screens but still have be able to use the nice looking theme, and I’d hate to think that some Universities might even run two themes (one for desktop/laptop computers and another which looks different for mobiles).

What I hope to achieve here, is to have the nice looking theme like Université, but also give it some pseudo intelligence so that it completely changes the layout for small screen devices – to make the content more readable straight away, and eliminate the annoying need to constantly zoom in and out to do stuff when using Moodle on a mobile. It basically just re-collates the page structure and collects all the blocks and puts them in one column.

I haven’t finished testing this yet, or tweaking it either, but it looks like a fairly good idea; it only took an hour or so to add this to my moodle 1.9x theme, here’s some screenshots..  Once I get it working really nicely I’ll roll it out for Université and maybe Créatif too.  Its a small amount of effort which hopefully translates in to making the UI a little better for mobiles etc.

What do you think?

(had to take screenshots with a squashed up browser because the Android 2.1 samsung galaxy S is so crap it won’t take screenshots. hah.)

The stats of success

23 02 2010

Some time ago I posted about the eStudyGuide website I set up to match our InDesign study guide process. To explain it again, briefly, the XML from our InDesign TOCs get’s uploaded to a webserver along with the PDFs – the webpage reads the XML files and renders a download page for the course you’re looking for.

Well!  Anyway!  Term has started finally and this is the first semester that I’ve had the pages also hooked in to Google Analytics. I had this weird moment of doubt at some point, that the eStudyGuides weren’t really being used, and that we’d not really contributed anything of use to the University.  Not sure why on earth I thought that.  The stats for the first couple of weeks of Term prove how useful it is.

  • Over 4000 page views already
  • Over 1300 hits already
  • Over 5.5 minutes average on each page

eStudyGuide stats

I love Google Analytics, it’s damn awesome.  I’m looking forward to seeing the trends from now on, how each term differs from the next.

Overall, the InDesign XML features have really proved essential in all of this.  There are some glitches though that I believe I’ve never mentioned.  Some times carriage returns get tagged in the TOC when you map styles to tags – which means you get an empty XML tag in your XML document.

You’ll need error checking to make sure you’re not rendering that empty tag as anything on your website, especially if the count of XML tags matches a document count like the eStudyGuide set up.

I wonder though, would it be worth doing an XML Schema and having InDesign validate it’s output with the schema when we export our TOC XML?

The whole process, exporting the XML and PDFs, and then uploading the files is a bit labourious too, and mistakes happen.  With a bit of perl/php mastery, one of the more technical sauvy guys in our team has done some brilliant reporting around the setup, as well as a script that handles that uploading – a must have.  It checks document counts with the XML tags to make sure they match, checks for typos even, missing files, and more.  Many thanks to Damo for his help.

Onwards and upwards, I wonder what the next lot of improvements to the eSGs could be 🙂