Wednesday 17 November 2010
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
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.
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.
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
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.
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
- inline CSS
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.
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!