Wednesday 17 November 2010

Hidden depths

I discovered a feature of Uniservity yesterday which I never knew existed. That is to say, I had noticed it but never paid it much attention. The feature I'm referring to is Hidden Folders.
Previously, when I have wanted to place a resource in the Resources area of a particular group but not have it appear on the left hand Navbar menu, I have set the Publish To date in the past. This causes it to disappear from the menu but it can still be hyperlinked to. The disadvantage of doing it this way, particularly if it is a Custom Page, is that Uniservity places a comment at the top of the page saying that the resource is out of date - not a serious drawback but annoying none the less. Using a Hidden Folder is much more elegant, as it removes whatever resources are in the folder from the left hand menu but does not place this message at the top of the page when you are viewing the resource, and if you later want the resources to appear in the left hand menu, you can simply move them out of the Hidden Folder (which does not affect any hyperlinks to the resource incidentally).
The way to create a hidden folder is to tick the box labelled 'Hidden' when you are creating the folder in your group's Resources area.
This will provide you with a grey folder in the Resources area, and whatever is put into this folder will no longer appear in the left hand menu.

Wednesday 27 October 2010

To Navbar or Not to Navbar

Recently, were asked to help a special school redesign their Uniservity platform to make it more accessible to their students. The main beef with the existing platform was that there was too much extraneous gumpf around the sides of the screen, and navigating to the relevant class page was too complex for many students. The ideal would be to do away with the Navbar entirely and as soon as a student logs in, they are taken directly to their class page. Now that is no mean feat in a platform where you cannot use PHP, and in the end we only partially achieved this.
The system we ended up with was as follows:

  • Student clicks a logo to log in and enters their login details.
  • Student is presented with a picture of their teacher which they click.
  • Student is taken to their class page.

When staff log in, they are presented with the pictures of all the teachers whose class areas they have access to plus any communal areas such as the Staffroom area.

By default, Uniservity will customise the standard Navbar depending on who is logged in and will only show them links to areas and resources they have the permissions to access. If you want to have more control over how the Navbar looks, and aren't happy with simply using Custom Images for the groups and having gaps between them (yuk!), you are stuck with a static Navbar which is not customised to the user's access permissions. This is fine for resources as, if these are linked to manually from class pages, a user will only see them when and if they get to the class page. So what is needed is a way either to customise the Navbar independently of Uniservity's standard functionality, or to do away with the Navbar completely and use graphics on the page which are customised to the user's permissions.

It turns out that both of these are possible using a little JavaScript and a thing called an iframe. The system that was devised works on the principle that if an image is stored in the Resources area of a group that a user does not have the permissions to access, that image will not load if it is on a page that the user is looking at. So, for instance, if Jonny is in class 3 and he looks at the homepage for his platform, which contains an image stored in the class 4 resources area, all he will see is a red cross because he does not have the rights to access the image.

So what we could do is store an image which represents each class (say a pencil with the class's name on it, or in the case above, a photo of the class teacher) in the relevant class's Resources area and set the Access Permissions so that it is only visible to that class, either using All Group Members or Profile Sets, depending on which way round you have it set up. The problem with this is that if we then place these images using their URLs into the homepage or a Custom Navbar, we will see the class images that are accessible to us but we will also see an unsightly red cross for those that aren't. So how do we get rid of the red cross? Enter JavaScript.

Now Uniservity copes well with some JavaScript when entering it into the Source Editor for group pages, but the editor can sometimes do odd things and strip out code that it doesn't recognise. For this reason, I decided to approach it from a slightly different angle. I created the homepage using a text editor and saved it as an HTML file, then uploaded this as a Public resource to the Resources area of the platform's top level group. I then put this code into the homepage Source Editor:

You will notice the iframe tag here, which creates a window (in this case an invisible one) into another webpage. The style properties set the frame which appears around the edge by default to zero pixels so that it is invisible (as well as the frameborder="0" attribute). Also being set is the width of the iframe, which is made to be 100% of the width of the window (in this case the central area of the Uniservity page), and the scrollbars which are turned off so that the iframe is completely invisible and it appears as though the content coming from the source page is simply on the page with no frame. The source page is referred to by the src attribute, and this URL is the URL of the manually created and uploaded webpage I made reference to above.

This method circumvents the filters which decide what one can and cannot put into the Source Editor for a group homepage, so we are free to use whatever JavaScript we like without worry. The JavaScript in question which prevents an image displaying if it is not accessible to the user is shown below:

The magic part of this is the part which starts onerror=. This is what is called an event handler and it is basically saying that if an error is thrown up when trying to load the image concerned (such as it isn't accessible), do something. The something it does is to change the style properties of the image to make it invisible and have zero width and height. That means that if the image does not load, it will not display at all. You can see how this could be used in a Custom Navbar to acheive what the inbuilt Uniservity system does but with much more flexibility in what the Navbar actually looks like.

Please note that I have never tried this code directly in a Custom Navbar, so I don't know whether it will work without being stripped out. In my experience, the Custom Navbar box is a lot more forgiving in terms of what it will allow, so the chances are it would work. If not, you could always use an iframe as in the example above and create the code for the Custom Navbar outside Uniservity then upload it as a resource.

Thursday 21 October 2010

Facebook, Twitter and other widgetry

One of the saving graces of any Uniservity administrator who wishes to make their platform more modern is widgets. These little code snippets can enable you to do any number of things in the area of bringing in external data in attractive ways and also create links to external services such as social networking sites. The code for the widgets is generally provided by the providers themselves, but you can also pick up a wealth of user-generated widgets from places such as Widgetbox. If you have ever embedded a YouTube video in Uniservity, then you already know how to embed widgets - you simoly copy the supplied code snippet, then paste it into the source editor of the Uniservity page where you want it to appear.
The integration of Twitter into the LiveRevise! microsite was fairly straightforward. The Twitter feed on the left of the front page (see interface tour in last post) was done using Twitter's Profile widget. The code provided by Twitter is copied to the clipboard when you click on the 'Finish & Grab Code' button, then in our case it was pasted into the custom navbar of the front page of the microsite. For the 'tweet' button which sits under the description on the front page, we grabbed the code from Twitter's Tweet Button page. This time, you set the options then manually copy the code from the little frame onto the clipboard and paste into the source editor of the Uniservity page where you want it to appear. Our Twitter feed is being used as an alternative to the News function of Uniservity for many reasons, not least because it allows us to update it from a range of devices and also pushes updates to the users, neither of which you can do with the Uniservity News function.
Facebook integration was a little more painful, but mainly because we had a very specific idea of what we wanted. The wiki for each subject area of the microsite is where students will be collaboratively constructing the understanding they are gaining whilst using the site and resources. This is the perfect place for them to shout about what they are doing to their friends on Facebook, so we decided we would like to add a Recommend button to the wikis so that students could give a shout out to their friends when they add something. The way to do this is to add a Like Button to the page in question. When the code was inserted on the wiki page, however, the page which was 'liked' or in our case 'recommended' (you can select either of these verbs in the button generator) was the LA platform, not the wiki in question or even the LiveRevise! microsite. In addition, the code grabs an image to represent the page you have 'recommended', which was also wrong. The only way to change these aspects of the resulting 'recommendation' is to use something called FBML or meta tags in the head section of the page the button is on. The problem being, Uniservity does not allow you to add in a head section to a wiki page, or any page for that matter. If you attempt to add something inside head tags, the source editor will strip it out as soon as you click on Apply. So a workaround was needed.
Our solution invloved using a webpage on a webserver that we have control over containing a redirect to the Uniservity wiki page and the necessary meta tags inside the head tags of the page. The code which constitutes one of these pages is below for you to use in a similar way if you so desire.

Again, aplologies for the poor formatting. All the meta tags which start with property="og: ... are the tags which tell Facebook where to link back to, what image to use to represent the link and what title to give the link in Facebook. The meta tag which begins equiv="refresh" creates an instant redirect when someone clicks on the link in Facebook. The image referred to is also stored in a directory on the webserver where this page resides, though there is no reason why you couldn't host it somewhere else, even in Uniservity if it is made truly public.
So in the end, we achieved what we set out to in a very convoluted way, but the result is transparent to the user. In the next post, I'll talk about the advantages and disadvantages of using custom navbars instead of the Uniservity standard ones and how to get around some of the disadvantages.

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.

Wednesday 20 October 2010

Cans and Can'ts

Uniservity, despite appearances, is one of the most flexible commercial platforms around in terms of look and feel. Other platforms may look prettier out of the box, but they stay looking the same no matter what you do as an individual user. The fact that Uniservity is built on basic HTML is a blessing - it provides the opportunity to hack it mercilessly and make it do things it never thought it could. Your allies when it comes to Uniservity are:
If you are unfamiliar with what these things are and aren't afraid of a little crowd-sourcing to learn what you need to know, then I suggest you get on Google and look them up. HTML is an absolute must, CSS a close second and JavaScript only necessary if you're wanting to do something a bit fancy.
There are some other languages which I use in general dynamic web page construction such as PHP, but you can forget using these in Uniservity as it doesn't parse PHP (or any other dynamic language other than JavaScript) and actively deletes PHP markup when you try to insert it on a page. So properly dynamic HTML is out of the window, but there's still a lot that can be done.
The Source Editor button () in the WYSIWYG editor is your friend, as well as any other place where you can edit HTML source, such as the Custom Navbar box in Navbar settings (Group Admin panel). In these places you can use the above languages to achieve what you want to.
If you don't know any HTML or CSS, don't worry. I will be giving examples in these posts which in many cases you will be able to copy and paste partially or entirely as your needs require.
I must add that I am a 'Just In Time' learner - I crowd source the code I need and hash it together as needs demand. If you asked me how much JavaScript or CSS I know I would have to say little to none, but that's OK because other people know lots, and Google can take me to them.

Uniservity - The Ugly One

I decided to create this blog in response to my work with schools who have purchased Uniservity. I do not work for Uniservity, but am part of a local authority where many schools have bought it.
Those of you who have Uniservity will know that it has the potential to be the ugliest learning platform this side of 1991. There are those who have managed to beat the ugly beast that is Uniservity into something that looks more like a modern learning environment. I like to think of myself as someone who has gone some way towards doing this, and would like to share the wisdom I have gained so that others can get the benefit.

You may be aware that Uniservity have a new and upcoming product called Life. It looks lovely - worlds apart from the current version. The functionality is what you would expect from a modern learning environment and more, and I have no doubt that it will be a very successful product. I also have no doubt, however, that the additional cost associated with Life over the current Uniservity per-pupil charge will prohibit many schools from upgrading to the new system for some years to come. So the majority will be stuck with the ugly older brother for a good while yet. As such, they will need to make the most of what they've got. That is what this blog is all about. I will be telling you about the bits Uniservity have left out of the manual (if there is one of those...) and never wanted you to know. Let the revolution begin!