Archive for the 'Development' Category

He that is without sin among you, let him first cast a stone

Published by Mike Nolan on July 21, 2010 in Conferences, Design, Development and Just for fun. 0 Comments Tags: , , , , , , , .

At IWMW last week I ran a BarCamp session titled “Slate My Website… and Your Website?”.

As I explained on the IWMW blog, the format of the session is based on Nick DeNardis’ EDU Checkup and consists of three parts:

  • 10 second test: show then hide the homepage then try to remember as much as possible.
  • ~5 minute review: surf around the site looking for things of interest – as Roy Walker would say, “say what you see”.
  • Ratings: scores out of 100 for design, content and code.

In the 30 minute slot we had time to slate review three websites:

University of Reading

University of Reading

Scores:

  • design: 68
  • content: 63
  • code: 79

University of Nottingham

University of Nottingham

Scores:

  • design: 71
  • content: 65
  • code: 62

Edge Hill University

Edge Hill University

Part of the “deal” for this session was that someone else would review our website so with me sat in the corner with my eyes closed and fingers in ears, Dan Wiggle from the University of York did the business.  Lynda Bewley summarised the atmosphere well:

@lyndabewley: vengeance being meted out on http://www.edgehill.ac.uk/ :-)  #slatemywebsite #iwmw10

Scores:

  • design: 74
  • content: 74
  • code: 70

Many thanks to Jeremy Speller for acting as scorekeeper and Reading and Nottingham for being such good sports and not lynching me!

If you want me to Slate Your Website in person, I’m looking for someone to act as our “external expert” so get in touch!

Hacks meet Hackers

Published by Mike Nolan on July 19, 2010 in Conferences and Development. 0 Comments Tags: , , , , , , , , .

Francis Irving

It’s been a busy week with the Institutional Web Management Workshop last Monday to Wednesday in Sheffield and WordCamp UK happening in Manchester this weekend but on Friday I took a day off to pop down to a hack day in Liverpool.

The event was hosted by LJMU’s Open Labs at the Art and Design Academy in partnership with ScraperWiki and Trinity Mirror Merseyside (think Liverpool Daily Post and Echo, Ormskirk Advertiser, Southport Visiter etc etc!). The idea was that hacks (journalists) meet hackers (coders, not to be confused with crackers who break into systems!) for a day working on datasets to produce something at the end of the day.

The basic format was splitting into teams comprising a few hacks and a few hackers with an interest in a particular subject, being put into a “booth” for 6 hours and seeing what happened. The group I was in was focused around Liverpool datasets – think Doctors surgeries, educational statistics etc.

I’ve come across ScraperWiki before at Liver and Mash and while there was no requirement to use their system, since it’s recently added support for PHP alongside Python I thought I’d give it a try. We found some data to scrape on the NHS website and set about building a scraper.

The chaps at ScraperWiki would be the first to admit that their support for PHP is still very much beta and so it was a little harder than I expected. Eventually I got it scraping a set of data and used Yahoo Pipes to add location data to allow it to be mapped. Here’s what it looks like on Google Earth alongside school and transport datasets:

Google Earth Three Layers

Okay, so not terribly exciting but it was useful to have a go at ScraperWiki and get an idea of some of the things that can be done with it. You can find my scraper on the ScraperWiki site; the Pipe is also available.

I think it was also very interesting to get journalists to meet coders. A few weeks ago I heard someone (possibly Alison Gow) say recently that you can’t get a job for the Guardian without talking about data and it’s becoming an increasingly important part of journalism. No longer is it enough to simply report the news or spout opinion – being open about where your data comes from can be just as important. So it was really good that Trinity Mirror are taking this so seriously.

Someone in my team asked when I raised the idea of using DBpedia (and hence Wikipedia) data how reliable it was and could it be trusted. My response was to point out that most Wikipedia articles cite their sources and asked how many news stories do the same!

I’m getting off topic now so I’ll leave it there! ScraperWiki are running a series of Hack Days across the UK (and beyond) so if you’re interested, make sure you sign up!

Flickr’s photo page Ajax trick

Published by Mike Nolan on June 24, 2010 in Development. 0 Comments Tags: , , , , , , , .

Flickr recently started previewing their new photo pages. They’re quite nice but it does something that’s been driving me mad and I can’t work out how it’s doing it. It only happens in Google Chrome 5 and I’ve only seen it in a few places.

Take a look at this screen capture of Flickr’s new lightbox view. Note how the URL updates each time I click through to a new view. Nothing surprising there until you realise it’s not doing a full refresh of the page and is actually an Ajax call back to the server. (You may want to hit the full screen button, bottom right.)

Contrast that with what happens in Firefox – it’s still doing Ajax calls to make flicking between photos quick but the URL changes after the fragment

This technique is pretty common – Facebook have been using it for a couple of years and we even use it to give tabbed pages history on our site. It’s necessary because JavaScript isn’t allowed to set the full page URL without a page refresh, or at least that’s what I thought!

Google Maps has been doing the same as Flickr for a couple of months but I’ve still no idea how! Anyone care to read the Chromium source code or dig around Flickr’s JavaScript to see if there’s something different?

Update: also works in Safari, thanks Ross.

Mobile device usage

Published by Mike Nolan on June 14, 2010 in Development and We're looking at. 6 Comments Tags: , , , , .

Last week I mentioned that while I couldn’t give a definitive list, our initial focus for a mobile website would be higher end devices. One thing we do know is what people are using at the moment to access our sites on the move:

Mobile device usage for www.edgehill.ac.uk

Data for the above chart is taken from 14th April – 13th June 2010 and the usual warnings apply to statistics sourced from Google Analytics – it only includes browsers executing JavaScript.

What is clear though is that Apple’s devices are massively more popular than anything else – over 75% of page views are from iPhones and iPod Touch browsers.

Mobile usage is fast moving so we’ll be continuing to monitor trends and statistics will drive much of what we do in our forthcoming developments.

Going mobile

Published by Mike Nolan on June 10, 2010 in Design and Development. 2 Comments Tags: .

a Mobile phone Timeline

Exactly a year ago we launched our first mobile websites at Edge Hill using a plugin for WordPress to provide a mobile friendly theme for our blogs. Yesterday we committed the first code for a mobile version of the main Edge Hill website.

It’s been a long time coming with a lot of talk followed by research and attending conferences but we’re finally on our way.  Universities all over the UK and abroad are waking up to growing mobile usage and an expectation that we will provide services on multiple platforms.  And there are almost as many approaches to take as there are universities from dedicated mobile applications for each platform to open source libraries.

Each HEI must decide who their target audience is, what they want from mobile services and the best way to deliver that information. For us, with limited resources, that means making choices about where to start and prioritise.

At Edge Hill we have for a long time had quite a clear split between internal and external content.  The corporate website – www.edgehill.ac.uk – is the place for public information about the University: courses, history, departments, news, events etc.

GO on the other hand is clearly inward facing.  It targets staff and students with personalised information of interest to them. Access to web based university systems is provided through it most of the time you only have to log in once per session to get to everything.

This provides a nice divide that can apply to what we do for mobile devices. Initially we will be working on a mobile version of the corporate website with internal systems following later.

So what does that mean? For me there a number of things that we need to address.

  1. Make pages look good on small screens
  2. Tailor information for mobile-device situations
  3. A new mobile information architecture

Let’s address each of those in turn.

Make pages look good on small screens

With the new iPhone 4 having a resolution of 960 × 640 pixels it’s no longer fair to say they are low resolution – that’s higher than a printed page! But there’s no escaping that mobile devices have small screens.  This means that normal web pages must be zoomed out to unreadable levels to display fully.  Additionally, older devices have poor quality web browsers unable to properly render the complex HTML we use on our websites and making the site look even worse.

For mobile devices we will be redirecting requests to a separate version of each page rendered with a different template.  Pages will be stripped down and designed for maximum readability.  Exactly how pages look will depend on the phone (and the web browser).  I can’t give an exact list of devices that we’ll be testing against and aiming to support but it we will initially be focusing efforts on higher-end phones for example, iPhones, Android and Palm Pre.

Aside: there are two main factors that promote the use of mobile websites – devices and data.  Modern phones make browsing mobile websites much easier, they often have applications for direct access to services like Facebook or Twitter further promoting use on the move but without data this is impossible.  Unless a user has free or very cheap data they will be disinclined to make use of services. Therefore we can get maximum return on investment by targeting services at those users with both devices capable of accessing our site and the data package that allows them to do so.

Tailor information for mobile-device situations

I was struggling to come up with a good title for this point, can you tell? Essentially it breaks down into two things: place and position.  Place is where you are when accessing a mobile website, for example you’ve got off the train at Ormskirk railway station and need to know how to get to campus.  Position reflects common use of mobile devices while sat on a couch or on the bus in lieu of a normal computer.  Both these affect the type of information you offer and may require changes to be made to existing content.

A new mobile information architecture

Tying together these two things is the site structure. Having pretty looking mobile pages is no use if you need to navigate through several pages to get to the information you want.  What might be a feature on the homepage of the desktop website may be unimportant for most people accessing from a mobile device.  The aim here isn’t to make some content inaccessible, merely to highlight key areas and make it easy for users to find that information.

So this is week one and it’s still early days.  Because the mobile website will sit alongside the existing site it’s likely we will preview alpha and beta versions ahead of a full launch. We obviously cannot afford to buy every possible device so we’re looking to recruit testers that we can get feedback from so if you have a mobile phone with free or cheap data that you don’t mind using to try out our mobile sites, let me know in the comments or by email.

Stay tuned for more about the progress of this project over the summer – there should be lots of juicy technical detail of our design and development process!

A mobile phone timeline by Khedara.

IIS 301s

Published by Andy Davies on March 17, 2010 in Development. 0 Comments Tags: , , , .

We don’t use IIS very much, but a third party application that we are integrating into the corporate website runs on IIS, and today I had a very pressing need to add a redirect to one of the default application pages to one of our corporate site pages.

I discovered 2 very good solutions:

  • Add the following code to the top of the file you wish to redirect: 
    Response.Status="301 Moved Permanently"
Response.AddHeader "Location", "http://edgehill.ac.uk/rosetheatre/whatson/"

    This is quick and nasty way to redirect a page if you don’t have admin rights to your IIS server.

  • By far the best way is, if you have access to IIS admin, is to follow the following steps:
    1. Browse the website you want to do the redirect for.
    2. In the right pane, right click on the file you want to redirect, and click “Properties”
    3. Under the “File” tab, hit the radio selection “A redirection to a URL”
    4. Put the target in the “Redirect to” textarea.
    5. Make sure “The exact URL entered above” and “A permanent redirection for this resource” are both checked

Both of these solutions worked for me.

Learning Something New Every Day

Published by Andy Davies on March 9, 2010 in Development. 0 Comments Tags: , , , , , , , .

Today, I learnt about cononical linking.  Canonical linking is a way of letting search engines know that your content is accessible through multiple URLs, by publicly specifying the preferred URL of page content. This prevents Google penalising your site for having duplicate content.

I first came across the possibility of  search engines penalising sites for duplicate content when following WPDesigner’s excellent tutorial on creating WordPress Themes. Here, he recommends ways to change the content of pages which might be viewed as duplication by Google – Prevention not cure.

It wasn’t until today that Mike recommended that I “canonically link” Rose Theatre event pages because they are almost identical to the same page in the events section of the site. To do so, within the <head> tags of each Rose Theatre event page, add a link like the one below:

<link rel="canonical" href="http://www.edgehill.ac.uk/events/2010/03/09/stand-up-comedy" />

The link tag is an empty tag, and the use of the “rel” attribute defines the canonical nature of the tag. In our case we generate the link URL using symfony routing rules, URL parameters and the page slug so we don’t need to add the link for every page.

So now, when you visit Stand Up Comedy check out the source code and you’ll see the link, just like Google does.

Video, Silverlight and jQuery

Published by Mike Nolan on February 4, 2010 in Design and Development. 5 Comments Tags: , , , , , , , , , , .

During our 25 days of blogging last year, Sam talked about some of the new websites designs that we’ve been working on.  The 125 website was the first to go live last month and today we have released the website accompanying the exhibition for a new sports development.

For both sites we’ve developed some new ways of displaying information as well as improving the designs. Bot the homepage designs use jQuery to create visual effects on the page. 125 has multiple “slides” of information. Each slide transitions to the next after a short period of time or when you click the link on the right.

New Sport also uses some jQuery transitions, this time to change the background image and headline when you hover over links to each section.

There’s a few more new additions to the sport site. We were provided with a DVD containing lots of aerial photos of the campus to feature in a gallery. We’ve done the usual thumbnail gallery but we’ve also got a fancier way of showing off photos.

Microsoft Photosynth is a tool from their Live Labs project. It works by taking a set of photos, working out how they fit together and creating a 3D model in which you can navigate around them. Our set of photos is 71% “synthy” – a measure of how we matched they are – pretty good I’d say! The one negative thing is that viewing the resulting photosynth requires Silverlight on the browser.

Photosynth of Edge Hill

Another new development that’s being released for the first time on this site is a video browser. The observant may have noticed last week video pages on the Edge Hill site changed slightly, doubling the size of the video and moving around some elements on the page. This was to allow us to highlight related videos right along side.

Video player

One final little thing we’ve incorporated into this site is embedding the PDF of exhibition boards – normally a sizable download – into the page using Scribd. Using third party hosted services has risks associated with it but here it clearly benefits the user to be able to quickly scan through pages without the need to download a large file and open in Acrobat.

WordPress MU 2.9.1

Published by Mike Nolan on January 14, 2010 in Blogs and Development. 0 Comments Tags: , , , , , .

We’ve just upgraded to the latest version of WordPress MU – the system that powered blogs.edgehill.ac.uk. You can see that latest features in this video:

That video was embedded using one of the coolest new features in WordPress 2.9.1 – oEmbed. oEmbed is a way of websites sharing information about how content should be included in a page. Instead of having to copy any paste complicated HTML such as this:

<object width="425" height="339">
<param name="movie" value="http://www.edgehill.ac.uk/swf/flvplayer/player_flv_maxi.swf"></param>
<param name="allowFullScreen" value="true"></param>
<param name="flashvars" value="configxml=http%3A%2F%2Fwww.edgehill.ac.uk%2Fvideo%2F psychology%2Fxml%2Fembed"></param>
<embed src="http://www.edgehill.ac.uk/swf/flvplayer/player_flv_maxi.swf" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="339" flashvars="configxml=http%3A%2F%2Fwww.edgehill.ac.uk%2Fvideo%2F psychology%2Fxml%2Fembed"></embed>
</object>

We can instead just paste the URL onto a blank line in the post. oEmbed is supported right now by many popular websites such as Flickr and YouTube. We’ve also added oEmbed support to our own video streaming platform. Since we’re not one of the popular video sharing sites embedding our videos doesn’t work out of the box with WordPress but we’ve enabled it for our site. Here’s what it will look like:

Implementing oEmbed was fairly easy so keep an eye out for it on other content we publish.

2010: The Year of Open Data?

Published by Mike Nolan on December 24, 2009 in Development and We're looking at. 0 Comments Tags: , , , , , , , , , , .

I don’t like to predict the future – usually because I’m wrong – but I’m going to put my neck out on one point for the coming year.  2010 will be the year that data becomes important.

I’ve long been a believer in opening up sources of data.  As far as possible, we try to practice what we preach by supplying feeds of courses, news stories, events and so on.  We also make extensive use of our own data feeds so I’m always interested to see what other people are doing.  Over the last year there has been growing support for opening up data to see what can be done with it and there’s potentially more exciting stuff to come.

A big part of what many consider to be “Web 2.0” is open APIs to allow connections to be made and they have undoubtedly let to the success of services like Twitter.

Following in their footsteps have been journalists, both professional and amateur, who are making increasing use of data sources and in many cases republishing them.  The MPs expenses issue showed an interesting contrast in approaches.  While the Daily Telegraph broke the story and relied on internal man power to trawl through the receipts for juicy information the Guardian took a different route.  As soon as the redacted details were published, the Guardian launched a website allowing the public to help sort through pages and identify pages of interest.  Both the Guardian and the Times have active data teams releasing much of their sources for the public to mashup.

The non commercial sector have produced arguably more useful sources of data.  MySociety have a set of sites which do some really cool things to help the public better engage with their community and government.

In the next few months there looks set to be even more activity.  The government asked Tim B-L to advise on ways to make the government more open and whether due to his influence or other factors there are changes on the horizon.

But it’s set to be the election, which must be held before [June], which could do the most.  Data-based projects look set to pop up everywhere.  One project – The Straight Choice – will track flyers and leaflets distributed by candidates in order to track promises during and after the election.  Tweetminster tracks Twitter accounts belonging to MPs and PPCs and has some nice tools to visualise and engage with them.

I believe there will be an increasing call for Higher Education to open up its data.  Whether that’s information about courses using the XCRI format, or getting information out of the institutional VLE in a format that suits the user not the developer, there is lots that can be done.  I’m not pretending this is an easy task but surely if it can be done it should because it’s the right thing to do.

Since I started writing this entry a few days ago, the Google Blog post on The Meaning of Open. Of course they say things much better than I could, so I’ll leave you with one final quote:

Open will win. It will win on the Internet and will then cascade across many walks of life: The future of government is transparency. The future of commerce is information symmetry. The future of culture is freedom. The future of science and medicine is collaboration. The future of entertainment is participation. Each of these futures depends on an open Internet.

Let’s do our bit to contribute to that future.