Thursday, 21 October 2010

Lessons Learned - LiveRevise!

Recently, we created a microsite within our Uniservity platform for use on a project we are running with GCSE students called LiveRevise! It is a collaborative revision project involving students from (currently) two high schools and provides a place for them to discuss their revision and construct a wiki based on their revision - like a collaborative revision guide. The site is also attended by mentors from the schools and LA and students can connect to their mentors via videoconference from within the microsite.
The idea was to create something that was attractive and funky but as simple as possible to navigate so that the learning curve for students was reduced. In addition, the desire was to link in with social media so that the students could engage via multiple routes which they use on a daily basis.
Below is a video overview of some of the design elements that were included. In the following blog posts, I will be detailing some of the workarounds which were found to achieve our desired outcomes for the microsite.

The first issue encountered was that we desired an entirely bespoke look and feel for the microsite, different from the look and feel of our platform as a whole. The problem with this is that there is no way of customising the header graphic in Uniservity for specific subgroups, so we were stuck with the common LA header for our site. It was at this point that a useful discovery was made. Using inline CSS code, it is possible to place graphics which are plastered over whatever currently exists in any part of the browser window. So I can put CSS into a Custom Navbar which places graphics over the header to mask the default graphic completely. What is more, these graphics can overlap, have transparency (more on this later) and scale themselves depending on the size of the window they are in (more on this later too).
To explain how the banner, LiveRevise! logo and left hand navigation menu have been created, let's start with a code snippet. All of these graphics flow from within a Custom Navbar code block (accessible through Group Admin -> Navbar) and are placed using inline CSS.

Sorry for the poor formatting in the code snippet, but Blogger does not seem to deal well with treating code snippets as plain text! First of all, the div tag. This creates an area which can be placed anywhere in the browser window using the style="position:absolute" attribute. You will see that there are also top and left properties which govern how many pixels the div is from the top and the left of the browser window. This can also be expressed as a percentage of total window width or height. The z-index property became necessary because the header menu will tend to appear ontop of whatever graphics you try to place over it. The z-index property governs the order in which things are layered and it appears that uniservity have given the header menu a high z-index so that it is always ontop. I have set mine rediculously high to ensure that whatever graphics I place over it with CSS will hide it completely.

The next tag, a, is a link to the LiveRevise! homepage so that students can navigate back to this page by clicking on the logo.

Finally, the img tag places the LiveRevise! logo within the div that has been created. The image has been uploaded as a group resource using Group Admin -> Resources -> Add a file and the URL copied to use in this tag. Make sure that the Access Restrictions for the image are set so that whoever comes to the page will have the rights to view it, or you will end up with red crosses and no images when they visit the page.

The same code snippet is duplicated (with different URLs for the links and images) for the menu buttons and header graphic, and 'up' and 'down' button images are used to change the look of the menu in the different groups.

Many of the images used have transparent sections to allow for them to curve in and out in the right places, and this is done using png images with transparency. The icons which students use to access the forums, wikis and resources in each section are also transparent png's, which is how I have made the shadows partially transparent so that the background pattern shows through. Transparent png's can be made in GIMP or Photoshop, or doubtless many other graphics editing programs. There are many tutorials out there which will guide you through how to do this.

You will probably find that using CSS to place things in Uniservity is somewhat of a black art and involves a lot of trial and error depending on what browser you're in and where the CSS is on the page. With LiveRevise! I simply could not make it cross-browser compatible. Although my CSS was standards compliant, it refuses to display correctly in anything other than Internet Explorer. In the next post, I'll talk about Facebook and Twitter integration.

No comments:

Post a Comment