We’ve uploaded the first of a series of patient experience videos to our YouTube channel. We wanted to create a cohesive and distinctive series that captured intimacy in the conversations and allowed viewers to see personality even on very small screens such as mobile phones. And do it all within a very tight budget.

The contemporary style fits with the theme of leading edge science whilst the simplicity meant we could be very systematic and cost efficient in production. Above all, we needed to distinguish from other patient experience videos and generally raise the bar in this field without spending too much money. The various profile and close up shots allowed us to cut away from visual issues when we needed to without the use of fill shots or interviewer shots.

We used HD DSLR equipment which allowed us to get in close without being too intimidating. This allowed the subjects to open up emotionally, because once they got in their flow they soon ignored the camera.

The videos were created for Nottingham’s NIHR Biomedical Research Units and were commissioned by Nottingham University Hospitals Research & Innovation.

The setup; umbrellas on the floor reflected natural light back into the creases and shadows

Taking a picture of a plastic bag may seem the most inane marketing task but it brings myriad complexities. Faced with an urgent last minute job for an important exhibition and only three wrinkled samples to work with, we were challenged. This is how we did it.

Given time and budget, you’d normally get this sort of thing specially made up in durable plastic. The translucency, the creases, the lack of rigidity in polythene all make for a hellish task.

The product itself here is a bit of genius. A very simple, cheap, but far reaching innovation created in Nottingham that has already improved patient safety. The idea is that before you come into a hospital for treatment, you collect all your prescribed pills and medicines and put them in a bag so that the clinicians can see what you’ve been taking. You might think that would be on your medical record, but if you know anything about medical records you’ll know that a. they can take a long time to collate and b. they are not a sure fire guarantee.

The first test shot. A shop of horrors.

So, back to the bag. A simple piece of partly translucent polythene with lots of writing on it. You have a semi-opaque and highly reflective surface, and a very boring one dimensional shape that doesn’t stay together unless its flat on the floor.

The first thing to do is stick the product on a simple white background and look at it. Take a few test shots. Move the product around, move the camera around. Get a good idea of what’s happening as this will stimulate you into solving the myriad issues.

If you look at the first shot, you can see the problems immediately. This is how we solved them:

1. Shoot the bag with something in it. This gives a rather tedious inanimate object some life.
2. Shoot the bag at an angle. This gives some depth to the plain rectangle.
3. Take from above (or below). This gives some vertical perspective angles which give power to the product. A plain rectangle looks more purposeful when given the wide shoulders “V” look.
4. Shape the bag. We cut some stiff photographic background paper to curve round and insert into the item. This allowed us to mould the bag to a more consistent, solid form.
5. Deal with the translucency. Unless your translucency is essential to the product look (eg a gel), try and get rid of it. Our paper inserts made our bag more or less opaque.
6. Don’t forget the peripheral bits. Our bag has handles. They flopped all over the place. We cut up last night’s pizza box to hold the handles upright.
7. Use anything you like out of shot to make it work. The final shot has lots of masking tape at the back to make the bag sit upright, just so. Ideally you’d have lots of product samples you can play with to destruction; you might need to make cuts and bends to make it all work. We only had three bags so were limited.


The Patient's Medicines Bag. Translucent, lots of writing, floppy. A photographic challenge.

8. Light the product imaginatively. This is easily the most important element. Experiment with light, moving things around until you get the reflections and detail you want. We have natural light here coming in on the left and two umbrella reflectors placed on the floor to the right just out of shot. Shoot a whole series of photos with your reflectors and main light coming in from different angles so you see the effects. The soft fill lighting will work to reduce the visiblity of creasing and wrinkling. Even the slightest movements will have a positive or deleterious effect, trust me.
9. Inevitably, you’re not going to get everything perfect and there will be some touching up to do post-shoot. We had to keep this to an absolute minimum since there was so much detailed text on the product, making retouching a tricky prospect.

Martin Hawksey at JISC RSC Scotland North & East has done a very good job of this with his Make PDF Newspaper plugin. It uses the fivefilters pdf newspaper facility which itself centres on the Simple Pie RSS management toolkit. There aren’t too many options available but if you’re prepared to accept limitations in layout, the tool is a remarkably easy way to generate a good looking pdf version of an RSS feed.

We’ve been working a little with the plugin to get the output we want. The structure of the site we have pdf newspaper running on is fairly straightforward – posts appear as departmental news items and a bunch of static pages serve guidelines and a simple document repository.

We wanted a few of these static pages appearing in the newsletter which presented a conundrum as WordPress RSS feeds only deliver the posts side of the CMS, leaving the pages out completely. However, the RSS Includes Pages plugin alters this behaviour. It’s perfect for our purposes. All we need to do is to temporarily invoke it whilst preparing the newspaper. To get the right pages appearing, all we have to do is alter the publication dates so they fit into just the right place in the RSS feed.

One problem I encountered is a memory limit when making pdfs more than a few pages long. To resolve this, add a line like:

ini_set("memory_limit","120M");

to the beginning of tcpdf_config.php in the pdf newspaper plugin package.

The Firebug REST Client

In the example above you can see the URL, http://epsilon.nuhrise.org/alfresco/service/cmis/i/2c62291d-2e9f-4ac3-83a1-157406ffb2aa/children and the verbose response. In this case the response describes files in the Company Home space.

In the next article we’ll describe the web services our application Documas uses to view, upload and download files from Alfresco and we’ll also cover assigning and accepting/rejecting workflow tasks on documents from our external application.

The semantic web (sometimes called Web 3.0) is a generic term for a whole range of approaches that are looking to deal with the overwhelming mass of unstructured data the web is generating. Soon, techniques like Google’s search algorithms won’t be able to keep up with the trillions of web pages being generated. There needs to be a better way of understanding what web pages mean so that we can organise the valuable information they contain. It’s part of a move towards building clever systems that can reason.

If you’ve got 15 mins, Kate Ray has put together this compelling and instructive video about the semantic web, interviewing world wide web inventor Tim Berners-Lee amongst others along the way. There’s something of the Horizon about it; in the sense that it’s refreshing when difficult scientific concepts are coherently, simply and entertainingly described through video.

It’s part of a move towards building clever systems that can reason.

We’re using but a tiny part of the work on semantics for our own ends. We want to analyse a mass of web content, reasoning that if this can be done objectively and comprehensively by machine then it is probably better than anything we can do as humans. At least once you go beyond a handful of web pages; understanding the entirety of a few hundred pages can be a pretty tough job, unless you’ve got some clever tools to hand.

In the next few posts, I’ll describe how we used AlchemyAPI to do it. The tool enabled us to pull out context in terms of entities like people and keywords, places and subject matter. It helped us organise and rank all these things so we knew at a glance where each organisation’s focus was and how they were portraying this to the world at large.

Documas centres around a database model called Study. Studies are typically clinical trials that have dozens of properties reflecting their type and their progress. People such as administrators, lawyers, pharmacologists, nurses, researchers and clinicians act on these studies to progress them through a highly regulated approval process.

We chose to use Ruby on Rails for the CRUD part of Documas because, to paraphrase Bob the Builder, it’s the right tool for the job.

Much of the process is encapsulated in documents held in Alfresco, but equally a lot of the information is held in a normal database.

We chose to use Ruby on Rails for the CRUD part of Documas because, to paraphrase Bob the Builder, it’s the right tool for the job. Rails has easy ways to handle authentication (who), authorisation (what are they allowed to do), grids full of data, editing, validating and graphing. Above all, Rails is focused on the CRUD operations.

Rails also provides a http client to request ‘resources’, for instance documents, user accounts and workflow tasks from RESTful servers, like Alfresco.

If I’ve been a bit negative about the web front end of Alfresco, I’m pleased to concede that they more than make up for that with the way they open up the internal document engine to external applications using a RESTful interface.

REST is a set of ideas that promise to simplify communication between applications. 

If you have not come across REST before, there is an entertaining description here.

Conventionally applications use something like Remote Procedure Calls to call on each other for services, but every single call tends to have different parameters and return values making it hard to generalise and fiddly to use. In REST, the interesting parts of an application are available as ‘resources’.  Alfresco offers resources such as spaces (folders), files, people, tasks etc. Each resource can only do a strictly limited number of things, it can be created, deleted, changed or just read.  That’s it.  (The technical success of the World Wide Web can be largely attributed to REST, the resources are things with URLs, pages, pictures, tables of data, music etc. The operations in HTTP are PUT, POST and DELETE).

The designers of Alfresco have opened up the monolithic Java jungle inside Alfresco to expose the important resources. They have even documented it, a full list of approximately 370 Web Scripts (REST services) available from our Alfresco server is available at http://epsilon.nuhrise.org/alfresco/service/index, but you need to log in with the admin password!

In my opinion Alfresco also clutters the REST API with methods that return GUI elements, strictly speaking this is not REST because the resources are embelished with javascript for the user interface. The Forms Service in v3.4 is an example.

Inside Alfresco, the units of code that answer RESTful calls are called Web Scripts. They are written in Java and/or Javascript. The use of Javascript on the server side is clever because more people understand Javascript, and changes can be deployed with just a refresh of the web scripts rather than compiling and deploying Java class files. Otherwise one would have to maintain a Java build environment for the Web Scripts and employ at least half of somebody’s time just to develop and maintain the Java Web Scripts.

We’ve built a web application, Documas, on the solid foundation of the Alfresco Document Management system.   In this article we’ll explain why and how we did it.

Using Alfresco from another web application

Alfresco is a solid platform for managing documents and the events that happen to them during their lifecycle, but the ‘Web Client’ user interface is not suitable for most purposes because it was built by people like me, programmers, instead of by normal people. (The Web Client is also called Alfresco Explorer). As an example of the problems, try deleting ten files quickly.  There is no way to do a bulk operation and remove all ten in one go.

Alfresco Explorer

The Web Client is written in Java using a technology called Java Server Faces which in my opinion values gratuitous complexity over getting the job done.   (I think the adoption of JSF was the very reason the Web Client had proved to be hard to use, so much attention went into the JSF that little resource was left for usability testing).

Alfresco have addressed this problem by developing the ‘Share’ front end, a very Web 2.0, responsive and popular alternative to the clunky Web Client. But the Share web application is very closely tied to Alfresco and the kinds of document operations that Alfresco does. Our application needs to do those things, but also something called CRUD. Share, being AJAX, Javascript and REST based, is a sound choice for pure document management uses of Alfresco, but for our application we needed a little bit more. Over the next few articles I’ll explain how we went about it.

First remove the old first page:

pdftk OurDocument.pdf cat 2-end output OurDocumentMinusFirst.pdf

then combine the new first page with the remaining document:

pdftk NewFirst.pdf OurDocumentMinusFirst.pdf cat output NewOurDocument.pdf

Very simple indeed, but pdftk can do a whole lot more:

• Merge PDF Documents
• Split PDF Pages into a New Document
• Rotate PDF Pages or Documents
• Decrypt Input as Necessary (Password Required)
• Encrypt Output as Desired
• Fill PDF Forms with FDF Data or XFDF Data and/or Flatten Forms
• Apply a Background Watermark or a Foreground Stamp
• Report on PDF Metrics such as Metadata, Bookmarks, and Page Labels
• Update PDF Metadata
• Attach Files to PDF Pages or the PDF Document
• Unpack PDF Attachments
• Burst a PDF Document into Single Pages
• Uncompress and Re-Compress Page Streams
• Repair Corrupted PDF

The help manual that comes with the package gives a fairly comprehensive guide to options together with examples. Simply type
pdftk --help

Otherwise, there are plenty of guides available, like this one from segfault.

We’ve just been updating the design of one of our client’s sites and, as ever, fonts are a focus. Earlier this year, Google released a set of beautiful typefaces for use in web environments. It’s a simple matter of calling the font library from Google via a stylesheet header. Unless your choice includes Droid Bold.

Even easier, if you are using WordPress as a CMS, there are plugins available to implement the Google font API without much fuss. This approach gets you going very quickly and it’s very handy for look-and-see building.

But for a production environment, I don’t like the mess it begins to create of your stylesheet set. The plugin simply adds your styles to each page’s header which isn’t very elegant. We’ll soon be looking to incorporate the relevant css within the stylesheets proper rather than layering plugins on top.

The older design focused on Arial

Our implementation in question is for Nottingham University Hospitals Trust R&D. Here, the site is run using WordPress using an old but very solid theme called The Morning After. The theme itself has long since been taken over and incorporated into a commercial supplier’s portfolio. We’ve kept with the original theme and have slowly updated it to suit our needs over time.

The redesign involved some font size changes and text colour modifications along with the big shifts which were to Google’s Droid fonts. These look beautiful and there’s a large family to pick from, including a serif set. Whilst Droid fully modernises the look compared to the previous Arial, we recoloured and resized front page headlines to match those at the BBC website. This helps deliver a familiar user experience. We also softened the body text to a mid to dark grey which makes reading less tiring on the eye and allows us to use darker greys for block quotes and other text emphasis.

There are some tweaks to come, especially amongst the internal pages but for now we’ve achieved a fresh contemporary look with relative ease… except for an evil little bug. If your chosen font is Droid Bold. Of course our chosen font is none other. For some undetermined reason, many browsers except Google’s own Chrome are not calling the font properly. There’s a work around suggested by Alexandre Paquette over at Google Code

I found a way to fix this issue. By saving a local copy of the .css generated by de webfont directory, you can change the web font name defined in your css. for example, you can change “Droid Sans” for “Droid Sans Web”.

Bear in mind this will only happen if you make the local version that Alexandre mentions a priority; ie it has to be called before Droid Sans:

Put this in your stylesheet:

@font-face {
font-family: 'Droid Sans Web';
font-style: normal;
font-weight: normal;
src: local('Droid Sans Web'), url('http://themes.googleusercontent.com/font?kit=rS9BT6-asrfjpkcV3DXf__esZW2xOQ-xsNqO47m55DA') format('truetype');
}
@font-face {
font-family: 'Droid Sans Web';
font-style: normal;
font-weight: bold;
src: local('Droid Sans Web'), url('http://themes.googleusercontent.com/font?kit=EFpQQyG9GqCrobXxL-KRMQJKKGfqHaYFsRG-T3ceEVo') format('truetype');
}

Then decide where it’s going to operate like this:

h1{
font-family: 'Droid Sans Web', 'Droid Sans', sans-serif;
}

Ta-da – all your browsers will now show Droid Sand Bold almost properly. Almost? You’ll find that the strong tag doesn’t work consistently, leaving such things resolutely not bold for some browsers.

I haven’t noticed any overhead in making this external call but to be sure you should have alternative fonts specified, or at least specify a default sans-serif or serif as above; just in case there’s a connection problem.

An alternative is to host the fonts yourself. Defeats the object of using the Google API, but this is what you do:

1. Go to Font Squirrel’s Droid Sans section
2. Download the @font-face Kit. Make sure you check off each format so that all browsers are catered for
3. Upload the font kit to your own website so that they are then served locally rather than directly from Google

So, a spoiler workaround to an otherwise tidy idea. Judging by the bug report at Google Code, this problem with Droid Bold has been hanging around since the early summer and shows no sign of being fixed yet.