Google Site Search

We’ve just launched a new beta version of the corporate website site search engine which will in the coming weeks replace the existing site search.

The new system is powered by Google Site Search – a version of the search engine that restricts results to a given set of pages. Currently it is available for site-wide searches before we extend it to power our main course search engine.

Try it out now and provide us with some feedback with how you find it.

WordPress: Beyond Posts

As I said previously, the decision to move news to WordPress seems a straightforward one – it’s used by millions of websites to serve up News, including our own faculty and department websites – but our key justification for the migration, to provide story functionality, isn’t something that WordPress does out of the box so over the last few months we’ve developed something from scratch.

While I’d love to take credit for everything, my involvement was mostly limited to the initial proof of concept and vague arm-waving spec-changing suggestions for how it should work and look. Such is the power of a manager.

WordPress has come a long way since it’s blogging roots and now has some powerful features that can be used to tailor the system to a wide range information. Custom Post Types were first introduced in version 3.0 and provide a way of storing structured information without having to create additional database tables. WordPress itself uses CPT for posts, pages, attachments (e.g. images) and menus but the possibilities for extensions are endless. Plugins often make use of CPTs to implement things like events listings, movie reviews and product catalogues but anything can be put in them and you get all the functionality that WordPress posts or pages have for free.

We have a really basic Story custom post type containing – as a minimum – just a title, image and a paragraph introduction:

Creative Edge - Take a fly through - News - Edge Hill University(2)

Stories and Posts are linked together with a many-to-many mapping using jQuery Tokeninput to make it easy to select which story a post should be related to.

Viewing a story triggers a custom template in our theme that is used to render the page. The template first displays the story title, image and content then looks for all linked posts and outputs them to the page, newest first.

Creative Edge - Take a fly through - News - Edge Hill University(5)

We’ve tried to keep the Story custom post type simple enough that it can be used flexibly in lots of different ways. By specifying just a title, image and content, stories can work as a lightweight wrapper for related posts. They’re not designed to replace a full website – for example the Short Story Prize story still links to the Prize’s standalone website – but act as a focal point for the latest news on a subject.

WordPress mints permalinks from the title on initial publication and only change if forced to do so after that so links to stories will still work even if the introductory text changes.

Stories can work as a live blog by streamlining the process of getting content online – once  a story is set up, say for something like a Graduation ceremony – it’s a simple matter of clicking Add Post to Story in the WordPress admin bar and bashing out a quick update, or pasting in a link to a video, tweet or photo:Edge Hill Short Story Prize 2013 - News - Edge Hill University(2)

Custom post types are the key to extending WordPress’ capabilities by managing structured content but there are other features that allow us to expose this information in new ways. Next time we’ll be looking at how our design is able to make the most of our rich media content.

Telling the story

Last time I introduced the new Edge Hill News website and this time I’ll introduce one of the major new features.

News published through our site often starts life as a press release posted online. Typically it’s a few hundred words accompanied by a photo and calls to action at the bottom telling the reader where to find more information or how to get in touch. These articles have a reasonable half life – linked to from the news website; syndicated across to department websites; sometimes featured on the homepage – and live on in the news archive for search engines to find.

Sometimes, though, we need articles to continue to run and with our old system this involved a bit of a hack – taking an existing article, updating it with the latest details and republishing it to get it to the top of the pile. This never seemed like the best thing to do, but it’s not uncommon for news websites to operate in this way.

Then ITV News broke the mold with their March 2012 redesign. Design agency Made By Many threw away all the preconceived ideas of traditional news websites and moved to a stream of news design – the homepage constantly updating with the latest updates.

What got me interested wasn’t how the homepage implemented the stream idea – unless you’re a regular user I find it a little hard to follow – but how it works with evolving news stories.

Let’s look at one of this morning’s headlines – the news that Morrisons is to begin online delivery via Ocado. On the BBC News website they published a story early morning and I first read a version of their story published at 07:54:

BBC News - Morrisons to offer online shopping in Ocado tie-up

But refreshing the page an hour later adds some new information:

BBC News - Morrisons to offer online shopping in Ocado deal

Can you spot the differences?

  • Headline swaps “tie-up” for “deal”
  • Chart showing share price half way down the page
  • Two new paragraphs saying about the Ocado share price inserted at the very bottom of the article

As someone who read the article at 8am I have to scan through the whole thing just to find an extra 30 words.

The ITV News site handles things completely differently. Their stream of news updates clearly show evolving stories. Just like a blog where posts are shown in reverse chronological order we can see the latest news at the very top:#

Morrisons to begin online sales - ITV News(1)

Just like the BBC News site, the latest take on the story is how the Ocado share price has jumped 40% but this time it’s clearly marked as being updated 42 minutes ago. In this instance they beat the BBC to it – that update was added 36 minutes ahead of Auntie.

This is a really simple example but the approach scales to much bigger stories too where  there is scope to show off the story in different ways. Below is parts of their story on Google’s appearance before the Commons Public Accounts Committee:

Google 'devious over tax bill' - ITV News(5)

I’ve included only a selection of types of update from the full story:

  • Video: pulled in from a branded Vimeo channel thought they also use YouTube. Often accompanied by some text to put it into context.
  • Short update: gives the feel of a live blog without the lack of context that traditionally occurs.
  • Tweet: includes a link back to the original tweet – nice to see journalists citing their sources!
  • Quotations: formatted so it’s easy to distinguish “expert” opinion and comments from journalist’s reporting.
  • Photos: nice and big (that’s not a comment on Vince Cable!)
  • Links to “full story”: importantly, ITV still publish the more typical 500 words + image + video + quotes” article written by one of their editors which make use of content already published in the news stream. If you’re looking for everything in one place then this is where you can read it, but if you’re following the stream live you can skip the duplicate content.

You can read more about the ITV News design in a blog post by Made by Many and Martin Belam (née Currybet) has written a couple of times about the site.

“Nice story, but what has this got to do with Edge Hill?”

There appeared to me to be many possibilities for this style of news publishing at Edge Hill and it could solve some problems we have with the old site.

  1. The hack of resurrecting old articles whenever typically minor changes were made and it needed a renewed lease of life. In these situations there is usually something new that’s happened so adding that information at the top of a story draws attention it.
  2. Over the last year or so Corporate Comms have commissioned and produced an increasing amount of rich media content such as video, photos and audio interviews. These have been included in articles but their half life is probably less than we might wish for.
  3. Events often have several phases which previously haven’t linked together. For example, the Edge Hill Short Story Prize comprises (off the top of my head):
    • Nominations open
    • Long list announced
    • Short list announced
    • Awards ceremony
    • Winner announcement
    • Interviews with winner
    • Possible follow-up activity such as visits to campus

During the autumn term we discussed the idea with colleagues in Corporate Communications and after mistakenly assuming that the ITV News website was built in WordPress claimed that it would be possible for us to do something similar.

After realising that ITV News isn’t a WordPress site and that no one appears to have done anything similar in WordPress we set about building a proof of concept. This gave us enough to justify migrating the news site to a new platform and has been the key part of the development.

With the site only live for a few weeks, the Press Office are just beginning to make use of WordPress stories, but you can see them in action on pages about the Short Story Prize, Edge Hill’s involvement in Liverpool Sound City and the new £16 million Creative Edge development.

Personally I’m looking forward to seeing, watching, hearing and reading the great stories has to tell over the coming months, whether that’s awards, new buildings or graduation ceremonies.

Next time we’ll go into more detail about how stories were built in WordPress.

News moves to WordPress

It’s a little over five years since our last major redevelopment of the Edge Hill news website when it moved from a classic ASP application into Symfony with lots of new functionality. In that time it’s been well used (and abused) with 1337 new articles plus an archive of 537 articles dating back to July 2001 imported across. News gets piped around the website with RSS feeds and machine tags to populate the homepage, department websites and various other places – it’s a bit string-and-tape, but it’s worked pretty well!

Two years ago we began moving some websites to WordPress in order to devolve control of content and structure to Faculties and Departments. WordPress has proved itself a very capable content management system, but more importantly it is now a solid web development framework. It has moved beyond its blogging origins and has handled everything we’ve thrown its way.

Until now we hadn’t migrated any of our “applications” (online prospectus, news, events, jobs etc) to WordPress as the cost of re-writing systems outweighed the benefit but our latest project sees us make the move with a brand new News website.

Latest News from Edge Hill University

While news might seem like an obvious thing to move to WordPress there were still a number of significant challenges we had to overcome in order to make the move. We also had a list of requirements from colleagues in Corporate Communications that we needed to tick off and some ideas of our own to make our news website more than “just another WordPress site”.

Over the next week or so we’ll be blogging about how we built the site and some of the new features.

If you work in Higher Ed Web Design you may be interested in hearing us talk about our use of WordPress at IWMW 2013 next month. Sign up for workshop session A7 – “WordPress: Beyond Blogging“!

Chrome: the rise and fall and rise again

Edd Sowden’s recently released browser matrix stats shows some fascinating patterns in usage for GOV.UK and the tool has also been made available on GitHub and for anyone to use. So what does it show for the Edge Hill website?

The most striking thing to me is the upgrade cycle for Chrome. With a 7 day bucket size, the matrix shows we have two new Chrome releases showing just how quickly the automatic update system is able to push out versions.

Chrome Upgrades

Compare that to how Internet Explorer updates happen at an almost glacial pace:

Internet Explorer Updates

I’ve not incorrectly included “Chrome 7” in those stats – that’s there because we have Chrome Frame installed on Edge Hill machines.

Browser Matrix seems able to visualise data in some ways that Google Analytics alone doesn’t – give it a try and share what you find!

Computer Availability App is here!

If you want to see where free computers are around campus then you’re in luck. The Edge Hill computer availability web app is up and running in some key locations around campus (@ehu.ac.uk/computers). And here it is!

Each area’s unfoldable map shows which computers are free (green is free!). We chose a salmon colour for used computers, because salmon are busy fish what with all the swimming and laying eggs. Or maybe it has something to do with being distinguishable from green for colourblind people.

Like salmon, people move around really quickly so you might find the computer you were hoping for has gone by the time you get there, and another one has appeared. So you can use the app to get a general idea of which computer area would be good to aim for. That’s why we used the signal strength indicator – so you can see at a glance your likelihood of finding a computer in that area.

That means likely.

There’s also a link to the room booking system, so feel free to come here just to book a room.

As well as showing computer usage, it also just shows where there are computers, which can be useful to new students who haven’t fully explored yet.

There’s a shiny new building overview page, that unsurprisingly gives an overview of the computers used in buildings. You might see this around screens on the campus.

There’s also a series of single map pages, just focusing on one computer area:

These single maps will be part of a slideshow shown around campus. We have one for the library which will rotate through the single maps and overview screens, so people can see at a glance where computers are being used. It should hopefully save some time in students’ days so they can so they can find a place to study more easily.

Responsive

The app is responsive – a liquid version that fills to fit the container device window – so use it on your phones and tablets as well.

 Desktop Version

And that’s it. The plan is to expand to show more computers around the campus. So go ahead and use it, and let us know what you think. Feedback is what sculpts the greatest software. So what would you change to make it better? Does it help you? Let us know.

webteam@edgehill.ac.uk

 

 

 

 

 

 

The Tales of Xcri-Cap

One of the first projects in my new job here at Edge Hill was JISC’s XCRI-CAP. Where would we be without acronyms? I was thoroughly pleased to have some new ones. Here’s the definitions:

  • JISC – a company that pushes innovative digital technology into UK education
  • XCRI-CAP – eXchanging Course Related Information, Course Advertising Profile. It’s a UK standard to describe course information for marketing.

JISC’s goal with XCRI-CAP is to share course information with the organisations who publish it, such as hotcourses.com.

Xcri - eXchanging Course Related Information

 

 

 

We’re making a feed for our Health CPD courses in the XCRI format so prospective students can find the course they’re looking for.

We moved all our health courses onto WordPress – our CMS (Content Management System) for most of our course information now. It was a good clean break, as we got to redesign the information’s structure to fit the XCRI specification. With the health courses in the CMS, we made the XCRI feed. It passes the course information to the feed aggregators so they can share the information.

Here’s a little information about each phase:

Database Mapping

This involved translating the old database content into the new xcri fields, where possible, and retaining the other useful information. We used the opportunity to strip out any useless information.

Database Mapping

This was the ‘get out your spreadsheet and be very thorough’ phase. It was pretty important because the information had to be labelled right so websites could understand it and use it properly.

We continued to the content management system…

Built a new Content Management System (CMS)

We actually extended WordPress, the CMS we use for most of our courses, by making a plugin that saves the health CPD modules. WordPress makes it fairly easy to add new functionality by providing hooks you can latch onto to adapt the software – basically slots to inject your customisations in.

Using WordPress’s custom post types we added courses and presentations to the CMS, and customised the admin area with the right input boxes. A presentation is a living instance of a course – for example, on the Tissue Viability course the Feb 2012 intake and July 2012 intake are different presentations.

WordPress makes it quite easy to add functionality by using existing plugins. We wanted more precise control over the admin page, so we did some of the building ourselves.

Customised WordPress admin menu

Once the CMS was done we transferred the course information into it.

 Built new web pages

We made a page template that displays an individual course’s information.

Front end website page template

We’ve still got some work to do on the template, like adding side navigation that links to similar courses.

Making the feed

We built an example feed that holds dummy information first.  We passed this through the Xcri 1.2 validator to make sure it was right. Eventually it stopped telling us we had made massive human errors, so the feed was right. Here’s the static version:

Static Xcri Feed

We made the real feed by passing the course information into this template from database.

And that’s where we are so far. Its nearly finished, and hopefully will make it much easier for people to find the right course.

Creole on PHP 5.2.4 with MSSQL

Working in a University or any organization generally leaves you supporting a lot of old code, on even older systems. As part of our web services infrastructure virtualisation project I’ve been bringing a lot of old code on to new systems. As can be seen when I got PHP 5.2.4 running on Ubuntu 12.04 LTS Precise.

As it turns out, our code wasn’t running so smoothly on PHP 5.2.4 as Arthur Koziel points out there is a problem with Creole and PHP 5.2.4. While we didn’t have the exact same problem, his post highlighted where it could be fixed.

Our problem was that we have a third party product using a Microsoft SQL database. It either always had, or just started to spit out date time values in the following format: Nov 14 2012 07:30:00:000PM note the non standard specification of microseconds. (Not sure which way around the problem occurred because we upgraded a month or so ago, but only just got a report of the problem.)

PHP’s strtotime really doesn’t like that format, and I can see why, horrible MSSQL!

I saw that I could fix this in creole/drivers/mssql/MSSQLResultSet.php by providing an alternate getTimestamp function and using a bit of strptime and sprintf magic. Below is the code I used to fix it. This might not be the most elegant solution, but it works!


/**
* @see ResultSet::getTimestamp()
*/
public function getTimestamp($column, $format = 'Y-m-d H:i:s')
{
$idx = (is_int($column) ? $column - 1 : $column);
if (!array_key_exists($idx, $this->fields)) { throw new SQLException("Invalid resultset column: " . $column); }
if ($this->fields[$idx] === null) { return null; }

$ts = strtotime($this->fields[$idx]);
if ($ts === -1 || $ts === false) { // in PHP 5.1 return value changes to FALSE
// in PHP 5.2.4 this no longer works, MSSQL provides date time as
// Nov 14 2012 07:30:00:000PM
$tsUgly = strptime($this->fields[$idx], '%b %d %Y %I:%M:%S:000%p');
$tsNicer = sprintf('%04d-%02d-%02d %02d:%02d:%02d',
$tsUgly['tm_year'] + 1900, // This will be years since 1900, so we need to add 1900.
$tsUgly['tm_mon'] + 1, // This will be the month 0-11, so we add one.
$tsUgly['tm_mday'],
$tsUgly['tm_hour'],
$tsUgly['tm_min'],
$tsUgly['tm_sec']);
$ts = strtotime($tsNicer);
if ($ts === -1 || $ts === false) { // in PHP 5.1 return value changes to FALSE
throw new SQLException("Unable to convert value at column " . $column . " to timestamp: " . $this->fields[$idx]);
}
}
if ($format === null) {
return $ts;
}
if (strpos($format, '%') !== false) {
return strftime($format, $ts);
} else {
return date($format, $ts);
}
}

I hope that helps anyone else out there maintaining old code on newer systems. If anything it’ll help me if I come across a similar problem again!

Steve Daniels

Installing OCI8 on Ubuntu 12.04 LTS Precise (with PHP 5.2.x)

Recently I wrote about installing PHP 5.2 on Ubuntu 10.04 LTS, then again about how I also got PHP 5.2 working on Ubuntu 12.04 LTS Precise in the same way. Well now I’m trying to get OCI8 working in this environment and there were a couple of obstacles.

Firstly, an updated package somewhere along the line broke my fix to libtool.m4. So that needed fixing with:


sudo mv /usr/share/aclocal/libtool.m4 /usr/share/aclocal/libtool.m4.bak
cat /usr/share/aclocal/lt~obsolete.m4 /usr/share/aclocal/ltoptions.m4 /usr/share/aclocal/ltsugar.m4 /usr/share/aclocal/ltversion.m4 /usr/share/aclocal/libtool.m4.bak | sudo tee -a /usr/share/aclocal/libtool.m4

Then you need to follow the manual OCI8 installation method the bit your after starts: “For a manual install, download the PECL OCI8 package”.

Once you get to the following command:


phpize

It’s time to fix things up. The libtool in the package just won’t work when you go to run make. So remove it and link to your local version.


sudo rm ./libtool
sudo ln -s `which libtool` ./libtool

Now you can carry on with the instructions. You may get a few warning messages, but everything should be fine.

Hope that helps,

Steve

Results Day Homepages

Last Thursday was A-Level results day for students in England and Wales and a big day for universities who get a boost in visitors to their website in the middle of an otherwise quite summer break.

Each university has its own way of dealing with their audience so I trawled through and took screenshots of many university and college homepages to compare. You can find all the images on Google+. Here’s a few that caught my eye…