When you have a CMS that exposes a rich content model, and has a nice API to get at that content, you can go beyond thinking about items in the CMS as simply pages. The editorial tools of the CMS can be put to use managing content (i.e., data), not just publishing pages.
Here’s an example of using the API of such a CMS (Alterian CM) to deliver an interactive timeline. Timelines are common enough on the web, but this one doesn’t require anything special to view it – just a modern browser with JavaScript turned on – and it doesn’t require anything other than the out-of-the-box client tools of the CMS (in this case the Alterian Smart Client or Web Client) to create it and manage the events that appear on it:
http://www.english-heritage.org.uk/daysout/properties/dover-castle/wartime-tunnels/operation-dynamo/timeline/
The solution we developed for English Heritage means that the editorial team can produce more timeline pages like this one simply by providing the images and the text (and of course the dates) – the code and page templates will then just render the timeline. We wanted to avoid having to rely on any external tools or data stores, or introduce anything that the editorial team weren’t already well-versed in.
Alterian CM provides us with an object-hierarchical content repository. We have a tree of content, and each node in the tree is a content item of a particular type. Each node in the tree has a path, and sometimes that path corresponds directly with a URL on the site. So a path like /news/man-bites-dog is the path to an item of type “News Story”; a news story template renders the content from that item at that URL.
While every item in the CMS repository always has a path, every item doesn’t have to result in a page at a URL on a website. We can use the type system of the CMS to store data. Our page templates can pull data from multiple items in the CMS to generate the final page.
In a complex site like English Heritage, this kind of content aggregation goes on all over the place. The timeline is a particularly clean example.
Once we start thinking like this, the content model we’re going to need for the Timeline becomes fairly obvious. Regardless of how we’re going to present the timeline, we’re going to need a content type called Timeline and a content type called Timeline Event. A Timeline consists of one or more Timeline Events. Timeline Event items are attached to Timeline items as child items. Here’s a Timeline (selected in the tree on the left) and its child Timeline Event items:
We implemented a few other ways of including Timeline Events in Timelines, to make it easy to reuse events across different timelines and to reference libraries of “global” events that appear as common points on multiple timelines. But the basic model revolves around these two content types.
The Timeline item has fields like “title” and “description”, properties of the timeline as a whole as well as the background image to use. Individual Timeline Event items have fields that cover start and end dates, and multimedia for the individual event (thumbnails images for the mouseover state and images, videos, MP3s etc that pop up when you click on an individual event).
We then wrote some code that presents the aggregated Timeline data in JSON format. This code uses the Alterian CM API to pull the data from the repository. (If you are so minded you can work out how to view the JSON data for a timeline by viewing the source of a timeline page – look for where the Javascript variable timelineAddress is set…)
So far, we have the means of managing timeline data using the standard Alterian tools, and we’ve provided the aggregated data for a timeline and all its events as a single JSON feed. We haven’t put any constraints on how we consume this JSON data – it could be the input to a Flash or Silverlight app, for example.
After an initial prototyping and wireframing phase, we decided that the UI for the interactive timeline should be implemented using HTML and JavaScript (we don’t want to limit its reach). The solution uses the Canvas element with fixes to support this technique in older versions of Internet Explorer. After some investigation we chose to make use of the jqPlot library to handle the rendering of the timeline data on the canvas surface. We needed to develop quite a few jqPlot custom plugins to get the results we needed, as the timeline UI is quite a way away from a normal graph of data points.
Thinking about Content, not pages
Products like Alterian CM are about Content Management, not page management. The same tools that help you manage the publishing of pages on your web site can manage content for applications on mobile devices, data for feeds to other systems and any other uses you can dream up!
[Update - see this post for how we dealt with historical dates in the timeline.]
