Direct Edit: a quicker way to edit your CMS content

Some of you may have noticed the appearance of a new 'Direct Edit' link in the footer of your web pages in the last few days. If you've not tried it yet, Direct Edit is a really quick way to make edits to your web content, especially when you just need to make small changes.

The link to Direct Edit is available from the bottom right of every page published from the CMS

When you're looking at a published page, selecting the Direct Edit link will take you into the CMS (you'll be asked to login if you haven't already done so) with a view that might be new to you. Instead of the usual listing of your content items, you'll see a view of the page with dotted red lines around each of the content items.

In the Direct Edit view each of your content items will have a dotted red line around it

When hovering over any of the dotted boxes an option will appear to modify that content, which will let you make your changes. You can also delete content items and see the page history from within Direct Edit.

Direct Edit works with most of our templates, but not all of them just yet. If a template can't be used in Direct Edit then you won't see the red dotted lines around that particular content item.

The other link in the footer is 'Modify', which takes you the same view you would see when selecting 'Modify content' from within the CMS (we renamed this from 'Edit' to clarify the difference between this and Direct Edit).

Happy editing!

Hello from a new member!

Hello, I'm Cieran!

I'll be working with the Web Office for the next few months, helping out with general projects and anything that arrives. I've just transferred over from Student Support, where I was redesigning the International Support website. One of my first jobs will be working on an interactive timeline for the University's Fiftieth Anniversary website. I'm looking forward to all the new challenges I'll be facing over the next few months working here!

Mapping with TileMill

When we launched our interactive campus map last year, we were using a third party company called CloudMade to generate our custom map tiles from OpenStreetMap data. CloudMade weren't making updates to their map data quite as often as we needed, which is problematic when you've got a big campus expansion project on the go that means new buildings are appearing all the time. So we went looking for a replacement.

Finding a replacement

Ideally a replacement tile provider would give us the same functionality as Cloudmade, just with more frequent updates.

We looked at a lot of alternatives, but nothing was looking too promising. Some of the options we rejected were:

• Google Maps - half the campus is still missing.
• Stamen - beautiful watercolour maps, but too light on details to be practical.
• MapQuest Open - nice enough looking maps, but not enough detail.

The best option was looking like MapBox, which would give us the control and level of detail we needed, but that looked like it could be a bit pricey.

Enter TileMill

My search continued and led me to TileMill, an open source project by MapBox.

TileMill is different to the other options I had been looking at: rather than being a service that provides tiles itself, it's a piece of software that lets you design and publish your own interactive maps.

Campus taking shape in the TileMill interface

TileMill takes all sorts of different data formats as an input: ESRI Shapefile, KML, GeoJSON, GeoTIFF, PostGIS, CSV, and SQLite.

You then have full control over how your data looks through a language called Carto. Carto is similar to CSS but has extras like variables and functions that make it much more powerful.

The map data

If you really wanted to you could download OpenStreetMap's data for the entire planet and work from that, but that's a 250GB XML file that I'm not sure my PC could cope with.

I came across a company called Geofabrik that provides more manageable shapefiles of smaller parts of the world (often down to individual cities), which are updated every few days and can be downloaded for free from http://download.geofabrik.de/. In the end we paid Geofabrik for some extra data to be included in a custom set of shapefiles, so it wasn't completely free.

Making it look nice

Getting started with Carto is easy enough if you already know CSS, but I found the most time consuming part was deciding exactly what to show at all the differing zoom levels. When you've looking at a bird's eye view of the whole campus you only want to see the major landmarks, with more detail being revealed as you zoom in, down to the names of individual buildings and car parks.

Luckily there are a few examples bundled with TileMill that help you get the hang of what works best at different levels.

An example of some of the Carto styling rules used on our map

It also takes a bit of thought to get all of your layers appearing in the correct order. At various points I ended up with bridges going underneath roads and the entire campus looking like it was underwater!

Outputting the tiles

Once you've got your map looking how you want it, it's time to export it. TileMill gives you several formats to choose from for your export.

In order to use this with our existing maps setup (see the previous behind the scenes post), we needed the individual map tiles. TileMill doesn't quite let you do this directly, but you can export to a single MBTiles file, and then use a utility called mbutil to extract the individual tiles from that.

Our map covers central York (up to the outer ring road) at six different zoom levels, which resulted in about 15,000 tiles. You can easily end up generating hundreds of thousands or even millions of tiles if you go down to very high zoom levels for large areas. Be prepared for a wait (and have plenty of spare storage space) if you decide to do that!

Making it live

The final step was to put the tiles on the web and change a single line within the map application code to point to our own tiles instead of Cloudmade's servers.

The interactive map with new tiles in place

We're now able to make much more regular updates to the map, and TileMill looks like it could come in handy if any other projects involving maps come our way.

Building the York Research Database

Today we launched the brand new York Research Database to the public. This is a web view of all York's research activity, as stored in Atira's Pure, the University's CRIS (Current Research Information System). It's been a long time in gestation while the data has been cleaned and updated, but I think it's been worth the wait.

Encouraging discovery

Initially the Web Office's involvement was just to help skin the public view of the data that shipped with the product. We did that, but something felt lacking - if you knew what you wanted then you would find it, but then what? We wanted people to explore and discover the breadth and depth of the research going on at York, and our first implementation didn't quite nail that.

We worked closely with our local Pure project team and the team at Atira to build features that would encourage a deeper dive into the data. Development work was being handled by Atira so we went through several rounds of generating ideas, building mockups and then liaising with them about implementation. It was a great process, covering everything from adding big features to me being very pedantic about micro-copy in the pages, and the whole team at Atira were brilliant throughout.

Eureka

I confess I was sceptical when I first looked at web views of research data, both York's and at other Universities; they never really held my interest. My 'eureka' moment with our system came when I was testing the latest iteration of our work with Atira one day and realised I'd stopped testing and was just browsing computer science research. If the system could distract me from nitpicking about the design and features, I was confident it would encourage others to dig deeper too.

Features to help exploration

A few of the things we added to the vanilla product which I think make a big difference:

• 'Refine your results' links, with indicators to show how many results you'll get with that refinement applied, on search results pages. These just apply advanced search filters, but make them much more visible and easier to toggle on and off.
• 'By the same authors' and 'From the same journal' sidebars on publications pages. These are great for following a trail of related content.
• 'Recently viewed' links in the footer of every page. Each record in the database that you look at during a visit to the site stacks up in a series of lists in the footer of every page so that you can easily get back to the things you've seen already.

Links from staff profiles and department pages

Now that the York Research Database is live, we've enabled a field in the staff profile template in the CMS to make it easy to link to your profile page. There are more details on the Pure web pages for staff, including images to use to make links from departmental research pages and elsewhere too.

Measuring success

I'll be poring over Google Analytics in weeks to come to see whether we've managed to make the site as engaging as I hoped. You can let us know what you think in the comments, by tweeting us @uoywebteam or by emailing me direct at dan.wiggle@york.ac.uk.

New pages, and a new design, for the 50th Anniversary

The University is celebrating its 50th anniversary throughout 2013 and we're happy to have just launched some new web pages about the celebrations taking place and reflecting on our history: www.york.ac.uk/50/

We'll be adding more features reflecting on our achievements and documenting the events that are coming up as the year progresses, so check back occasionally to discover more.

A new design

The design is quite radically different from our standard template. We've been working with an outside agency on a revised design which ultimately will roll out across much of the website and this is the first pilot project using some of what we've been working on.

Many of you will no doubt have questions about the design change. I can answer a couple of likely ones straight away: For the enthusiasts I'm afraid, no, you can't have the design for your site just yet. For those a bit more cautious, don't worry, this is an early pilot and there is a long way to go before this will affect your pages. We'll share more details about the wider project soon.

We hope you like the design and the content. If you've any feedback then we'd be happy to hear it - leave us a comment or drop us an email at web-office@york.ac.uk.

Streaming graduation

Around 1,600 students graduated over the course of three ceremonies last Friday and two on Saturday, alongside four honorary graduates and several thousand family and friends. For the first time, we also streamed the ceremonies online so that remote audiences could share in the event.

As this was a low-key pilot of running a live stream of the ceremonies, we only announced that they would be viewable online the day before the first ceremony. At that point we put a prominent link on the University homepage, on the graduation web pages and shared the news on our Twitter and Facebook presences.

Viewing stats

We were pretty pleased with how the streaming went. A large number of people accessed the stream, including many who watched for extended periods. A very simple summary in numbers:

• ~2,500 unique pageviews of the video page
• Visits from 68 countries
• 20% of visits from mobile devices (inc. tablets)
• 450Gb data streamed from server

I put together a few slides containing a more detailed breakdown which you can see below.

Behind the scenes

For the techies reading, I'll attempt to describe how the footage made its way to the web, but my involvement (and expertise!) was pretty well limited to putting the embed code in a page to display the player. The fine folk in our AV team dealt with the on-site setup and encoding, and we used a third-party to handle the streaming broadcast.

The video footage itself was being produced and directed live by a third party supplier, Visions Unlimited, who were on site to film the ceremonies for DVD (you can buy a DVD of any ceremony since 2010).

We ran the video footage through a PC running Flash Media Encoder, and uploaded it to a third-party streaming video provider. They took care of trans-coding the footage into two formats - one for Flash-supporting devices and one for everything else (principally iOS devices) - and load-balancing the traffic so that we could scale up the provision if a lot of people tuned in. The footage was embedded into the page using JWPlayer, with a separate link for non-Flash devices.