scientific and technical website design projects news

Articles on Popular science

Chemistry Map of Scotland

Chemistry Map Of Scotland

The Chemistry Map of Scotland was built for the Royal Society of Chemistry as part of their International Year of Chemistry celebration (2011). It was presented at the Science and the Parliament meeting in Edinburgh on Wednesday 9 November 2011 (our previous blog post).

The purpose of the site is to encourage school children to explore the chemistry by looking at how it impacts their local area. I had thought it would be mostly a historic project, but the children’s submissions show that it is anything but – they see chemistry as very much a part of a living and working landscape; the local galvanising works, offshore wind-farms and whiskey distilleries are at least as important as the work of Joseph Black (1728 – 1799)!

The site design is very simple, you won’t get lost anywhere here! We are particularly proud of the logo – even if it does conflate a couple of stereotypes – the thistle (for Scotland) and the benzene ring (for chemistry). The logo was designed to inject a bit of fun and movement into the site, along with the defiantly off-square page corners! In discussion with the client we selected the ‘Short Stack’ font by James Grieshaber, one of the free Google Web Fonts. The font is quirky, friendly without being MS Comic Sans, which has been rather over-exposed.

At the start of the project it was evident that Google were bringing in new charging policies for the use of mapping, so we chose to look at the Open Source alternative. The mapping program we used is OpenLayers, while the base mapping is provided by OpenStreetMap. OpenLayers can use any base mapping (for example Google, Bing or the Ordnance Survey) or satellite/aerial photography layers (Google and Bing are the most commonly seen examples on the web). This choice provides a great deal of flexibility to the project, as mapping sources can be changed as need or expediency dictate.

The public site provides an interactive map with clickable icons leading to students essays (stored in PDF format, to simplify administration). It also has a smart search facility, automatically checking date ranges for articles if a number is input (again my preconception that most of the content would be historic – but it is nice to see what chemistry was going on in Scotland in the year 1850). When search results are displayed they automatically update the thumbnail map, so it centres on the relevant place as your cursor hovers over each result.

We re-visit the Cookies debate with this site. Cookies enable us to create bookmarks to previously viewed pages for you, making it easy to jump between different essays on the same subject (or whatever you like!). Here we looked at an explicit permission system, as required by European Law – you have to click before we can create a cookie. This is the most satisfactory (and legally correct) way of dealing with this problem, which we have previously addressed. Mixed messages are coming from government though, so despite the fact that there is a lot of good in this law for the e-proles, it seems increasingly unlikely that the UK will ever enforce it.

Finally, the site is driven by a custom administration interface, permitting the RSC to add and edit points on the map. Hopefully this will ensure that the site can be kept going and expanding for a long time to come…

Visit the Chemistry Map of Scotland

Science and the Parliament

Science and the parliament 2012.

It has been a busy week here, with a visit to the Royal Society of Chemistry’s (RSC) ‘Science and the Parliament’ meeting in Edinburgh. Here our latest project, the ‘Chemistry Map of Scotland’ was launched by Prof. David Phillips (OBE), President of the Royal Society of Chemistry.

The project allows local schoolchildren to put chemistry on the map, and was created for the Scottish branch of the RSC as part of the celebration of the International Year of Chemistry (2011). The site is also, in part, a memorial to an old friend of mine, Dr Nigel Botting of St Andrews University.

The launch meeting itself, while sponsored by the RSC, is intended to raise the profile of science more generally in parliament, and there were a number of august speakers, including Scottish Parliamentarians at the event.

The short of the story from the meeting is that the Scottish higher education system performs very strongly in pure research metrics, but this does not benefit the economy – at least out-with the very important higher education sector! My feeling was that the meeting lacked the weight that a leading industrialist or entrepreneur might have provided on the main panel, but was none-the-less quite thought provoking.

Above right: Photo taken at the Chemistry and the Parliament meeting immediately after the main panel discussion, with a screen-shot from the Chemistry Map of Scotland in the background.

Targeted drugs – released!

Still from targeted drug release feature, with apoptin icon inset. We’ve just released the new Nanofolio feature on protein transduction (we spoke about some of the design issues in our last post). We developed four interactive Flash items for this feature. Two look at processes in the cell, and two follow development of the smart polymer agent that gets the protein based drug into the cell.
The interactive components of the Nanofolio features are highlighted by being inset in the screen – we are taking our audience behind the web page to view what is going on, at a microscopic, nanoscopic or molecular scale. In this instance we chose to go behind the web page through a view reminiscent of that through an optical microscope. This puts the action clearly in context.
To get the feel of an optical microscope we used some low contrast sketches of a cell and its internal structures, and overlaid these with a granular texture, created using Flash’s background tiling capabilities, to keep the file size small.
We retained the optical microscope view for following the activity of smart polymers, watching them change configuration with changing pH (clearly this is a conceit, but in context it is an effective means of visually indicating a degree of magnification). The chemical structure of the polymer, however, was a simple map, with appropriate portions lighting up when the visitor’s mouse tracks over them, along with the portion of the chemical name related to those portions.
There is a reduced scale image of the ‘cell under the microscope’ above right, along with the icon we developed for apoptin – the smart drug that is delivered by the smart polymer system.

Targeted drug release on the Nanofolio website

Targeted drug release feature

Sketch design for final stage of drug release feature. From our post on ‘Monopoles in magnetic ice‘ you might have worked out that we are currently developing research features for Nanofolio. The current project is targeted drug release, a technique which uses a smart polymer to unlock the cell’s endosomes, releasing a drug into the cytoplasm which would otherwise be destroyed by the cell’s defense mechanisms.

This is a development sketch from the last animation in the feature – it is the first design to be finalised, however, as we will need to re-use graphics from this animation earlier in the feature (which will probably have 3 animations in total, the others detailing how the endosome and the smart polymer work).

At the top we have a motif for the polymer – drug complex, this has to be recognisable at small scale, and we’re looking at a simple ‘dragon and ball’ sketch for this purpose. The ball in this is the drug – in this case Apoptin, and at large scale we need to make it clear that it is a functional moiety. We’ll do this with a manga-esque decal. We looked at two options – a skull and a daemon head. The skull is kind of appropriate, as Apoptin is a cell killer; but it is quite specific to tumour cells, so we though the simple death’s head didn’t really get over the fact that the drug itself is quite smart! So, we’re looking at a daemon’s head for the final production – this is a Classical Greek helmet affair – and we’ll probably go with electric blue clouration, to emphasise that it is (potentially) ‘one of the good guys’.

The drug-polymer complex is taken into the cell in an endosome, and it is pH changes in this that trigger the smart polymer to shatter the endosome membrane. As pH is not visible, we need to represent this easily to visitors. One option is ‘Universal Indicator Paper’ style colour change, but this might not mean much to a lot of people, as well as being rather too crude – the smart polymer switches on at only just below serum pH levels. To get round this we’re going to display the pH on a little meter attached to the endosome. The meter is likely to get in the way of the apoptin release when that occurs, so we’ve also got a little transition, switching sides for the meter if necessary, so the action is clear…

Now all we have to do is make it all work!

You can see other (completed) research features in nanotechnology on the Nanofolio website:

Nanotechnology research features on Nanofolio

Monopoles in magnetic ice

A magnetic monopole caught by magnetic force microscopy. We have a pretty solid scientific background, and for most of it magnetic monopoles have been on the edges of our understanding of scientific reality. Our physicist friends told us that there was no reason why the should not exist, but all of methods we understood for creating a magnetic field involved spinning a charge, and that entailed making both a North and South pole together. Well, I don’t mind being wrong, and the elegant way in which monopoles are created by scientists at Nanofolio is really quite fun, and very easily understood…

So, it was a great pleasure to be asked to develop an interactive feature on this work for them. To do this we’ve really just taken their Nature Physics paper, and illustrated some of the main points. The authors were, I think, more excited about the elementary excitations they were seeing than the magnetic monopoles, which are a bit old hat to the modern physicist, so we looked at those as well. But, magnetic monopoles, just how cool is that!*

You can view the interactive features on the Nanofolio website at: “Monopoles in magnetic ice” – this page has ongoing links to the original publication and review in Nature Physics.

*They are in a magnetic ice after all – but you’ll have to look at the feature to find out more about that!

Sheffield Solar Farm

The Sheffield Solar Farm aims to provide representative data about photovoltaic power output from test installations in the UK. It will help provide objective data on how efficient domestic Photovoltaic power might be in the UK, and so help to form policy, and provide a sensible body of knowledge for members of the general public interested in ‘doing their bit’ for the environment.

Sheffield solar farm detail from graph page showing data panel.

The website project is in three stages – to make public the results from the solar panels in real time, which we have now achieved. This is to be followed by displaying data from test installations using new photovoltaic materials, to allow comparison in real performance under a range of conditions. This is important because photovoltaic panels are rated at 1000 W/m2 solar power input – wheras the UK more commonly only manages a few hundred W/m2 sunlight. Unfortunately photovoltaic panel response is not linnear, so less sunlight input can mean a lot less electrical power output, as a consequence the array you’ve planned may not provide the power you are expecting! In the third stage people from around the UK will be invited to submit their own photovoltaic data, so providing a real measure of how panels perform ‘in the wild’ e.g. after being outside for a few years… This is the kind of data that many householders will need before making a commitment to the expense of an installation themeselves.

The site had a small graphic display showing what solar power is currently available, and what the electrical power output from the panels is on every page. The display is in Flash, but driven by an XML datafile generated on demand from the database. The alternative for people who do not have Flash is a static bar chart graphic that reflects the situation at the time the page was loaded.

In addition, there are graphs of solar power available and electrical power output, which currently display data for the last 24hrs. We evaluated two graphical packages for the project:

Flot is a nice Javascript based plotting system, that takes data in a list and spits out a pretty graph to order. It is not able to offer x and y axis labels, however…

jpGraph is a fully featured graphical package running in PHP. It takes a while to get it as pretty as Flot, but it is very flexible, and includes x and y axis labels. The ability to label axes neatly and correctly was a deciding factor in this instance, as the site is being developed by the Department of Physics and Astronomy, they wanted their graphs to be as clear as possible!

As general notes for the two packages, jpGraph places considerably more load on the server than Flot, as the graph is prepared as a graphic file for insertion into the page. This also means that the actual data is hidden from the visitor’s web-client.

The website is built in WordPress, where we adapted the latest Twenty_Ten templates to create our first production HTML5 website. We are still evaluating the new standard (which will not be fully released for many years – so we are not a long way behind the times!), and I think it fair to say that its reception is mixed. In many ways it is a regression, permitting the sloppy code that XHTML was intended to eradicate. At present the new graphical capabilities are not reliably realised in user’s browsers, however, so the trumpeted advantages of the new standard (which seem to centre around ‘Flash bashing’) are yet to emerge.

The Sheffield Solar Farm was visited by Nick Clegg, then Deputy Prime Minister, on the 20th August 2010.

Embedding FLASH files into Powerpoint

CAVEAT: The folowing does NOT work with PowerPoint on Macs, more notes at the foot of this post…

We create a lot of FLASH content for people, and while we don’t use PowerPoint, often our clients do, and would like to get the movies we’ve created into their presentation. The subject embedding FLASH (.swf) files in PowerPoint has been covered on numerous blogs, but often not very clearly, and not taking into account different versions of PPT!

After a bit of searching we found working instructions on sameshow. These seem to be written for a modern version of PPT, but if you have an older version, you can get the ‘Developer Tab’ up as a floating toolbar by:

View | Toolbars | Control Toolbox

The hammer icon seems to be a relict from the past indicating more controls – anyway, click this and you will get the Shockwave Flash option (amongst several tens of others). Then:

Draw a box on the PowerPoint slide and right click for properties. You need to add/change two important parameters here:

  1. EmbedMovie needs to be set to TRUE
  2. Movie needs the location of the .swf file you want to play

I find the easiest way to find a file in Windows is to stick it in a root drive (e.g. C:) so you just have to type in c:filename.swf to get it. Two other things to remember:

  1. Remove the file from the root afterwards, to prevent this getting cluttered
  2. Remember to EMBED the movie, or it will NOT work if you take the PPT to a different computer (if you do 1 above and you have not embedded the file, it will stop working immediatly, so you don’t have to wait until you are speaking at your conference to find out that your talk is b*ggered)

A full method with screenshots is available on the sameshow website:

How to insert Flash into PowerPoint

Hope your talk goes well!

Running Flash in PPT for Macs

In short – this is no longer possible. Previously we could export a Flash movie as Quicktime with a Flash track – giving reproduction of both the appearance and functionality of the original Flash movie (as long as only simple code was used in the movie). From QuickTime 7.3, however, Apple has withdrawn support for Flash altogether (Current Quicktime version 7.6.x).

Directed diffusion across a surface energy gradient

Latest – image makes cover of Macromolecular Rapid Communications (Sept. 2011)

Directed diffusion across a surface energy gradient.

Above a still from the movie depicting the directed diffusion of polymer molecules across a surface energy gradient

The movie was prepared by CookandKaye website design, working directly from preprints of the authors’ scientific manuscript. The movie was released to coincide with the paper’s publication and extensive publicity by the Unviersity of Sheffield (see for example Step Forward For Nanotechnology: Controlled Movement Of Molecules in Science Daily)

The interactive movie uses a stylised polymer chain to depict the actual movement inferred by the research workers from a wide range of nanoscale analytical techniques. Visitors to the site can click through the stages showing adsorption of hte polymer to a hydrophobic surface, followed by directed diffusion towards the hydrophilic surface, and finally desorption back into aqueous solution. At each stage the polymer experiences a different degree of constraint upon its movement, which was reflected in the motion of the stylised chain in the movie. To investigate the final movie, please visit the link below to Dr Mark Geoghegan’s website:

Directed diffusion across a surface energy gradient

Reference: P. Burgos, Z. Zhang, R. Golestanian, G. J. Leggett, and M. Geoghegan “Directed single molecule diffusion triggered by surface energy gradients” ACS Nano 3 3235-43 (2009).

COSHH online

Over the summer we have been busy developing a system for managing COSHH information for the Department of Chemistry at the University of Sheffield. This has been a particularly interesting and complex project. The requirement was to permit students and research workers at the department to prepare and submit proposals for working with chemicals, as required under UK/EC COSHH legislation.

To help ensure the system was easy to use, it was coded to allow access for the administrative staff from very early in the developmental process. As a result the client was able to provide feedback into the design and implementation at every important stage:

The COSHH form interface the information going into a COSHH form is exceptionally complex, covering the nature of the procedure, the chemicals involved, hazards and proposed mitigation. To be intelligible, however, the user needs to see the entire form at a glance. To do this a master form was built, that displayed key data, and this linked to total of nearly 20 sub-forms where the user could change parameters whilst being able to view existing selections in the master form.

COSHH form example

Above: Screenshot of the COSHH form, with a sub-form inset showing radio-buttons allowing the user to select the type of containment required for their procedure.

The chemical search interface building a simple and useful chemical search interface is a problem of itself. Users must be able to find the chemicals they are proposing to use, and this must be linked with the relevant health and safety information so that they can prepare an informed safety assessment. We developed a system based on chemical names and CAS numbers (the latter to help prevent duplication of chemicals on the database). Chemical searches can be performed by CAS number, name, name fragments or names starting with. In addition, at the request of the client we extended this to show a ‘most likely’ selection of chemicals at the top of any search results. The latter was important as there are many chemicals starting sodium – and if you are searching for sodium itself you don’t want to browse through all of them to find it!

The user interface was secured by IP address and login, as it is neccesary to identify users uniquely. Several levels of user were included, from clerical staff (with look up privileges to permit them to check that any chemical ordered had been subject to a COSHH assessment) to administrators, who had final say as to whether or not the assessment was acceptable on behalf of the department.

Completed COSHH assessments for each user were listed in their home section of the site. Additionally, each user could see assessments prepared by members of their group, or search for any assessment on the system by chemical or assessment number. This greatly simplifies the process of preparing a COSHH form, as existing forms can be imported to the user’s work-space and used as the basis for their own work. A simple security feature enables users to hide chemical information if required.

Safe working in an emergency it is important to be able to get access to COSHH information, so a brief output providing the salient safety information is available publically (protected by IP address) so rescue staff within the department can access the required information without having to login to the system.

Integration with existing information chemical and user data were imported from the existing system, and cleaned before insertion into the new web-based interface. Cleaning included checks for valid CAS registry numbers and valid user email accounts.

The administration interface is easy to forget given all of the rest going on – for a system of this complexity, however, the admin interface must be competent. The one we developed is capable of managing users, chemicals and COSHH information, as well as keeping tabs on how old the information is, and whether or not it is due for review!

With so much going on in the system, it was a great relief to find that users had few problems getting to grips with it. “The new users have had no complaints and the users who were familiar with the old system have had nothing but good things to say about the new one.” (Elaine Frary, COSHH administrator, University of Sheffield Department of Chemistry).

2014 extensions to the COSHH system

Polymer Centre research map

The new Polymer Centre research map has been built on an existing staff CMS that stores keywords and a précis of information about staff research interests. To create the map the keywords were first grouped into superordinate terms – for example the keywords ‘Rheology’ and ‘Optical properties’ falls under the generic class of ‘Polymer Analysis’ (or just Analysis).

To make the system as flexible as possible, the link between keywords and superordinate terms is done through a ‘plug board’ programming interface. In this, each keyword is assigned to a number of generic categories through selecting check boxes – easy!

The results are stored in a MySQL database, and this is used to power the research map itself. On first sight the map provides a coarse list of the superordinate terms – polymer analysis, characterisation and so on. On selecting one of these terms the list expands to show the relevant keywords. The keywords can in turn be expanded to display the names of research staff engaged in the work of interest.

The system therefore offers a simple visitor interface that can be quickly and intuitively navigated to find the information of interest. It offers a great advantage over an empty search box on one vital respect – it always offers the visitor a positive result! Not all sites have Google-like resources, and using a controlled language of keywords in this way allows us to guide a visitor to what we have, rather than their getting lots of failed searches.

While the research map offers visitors a neat tool for finding the information they want, it is also an engine to help ensure that search engines can tie our keywords to content on the Polymer Centre website. To do this, the meta content on each of the staff pages contains the same keywords they are associated with in the database.

In addition, however, the meta content of the research map itself is served dynamically. The page title, description and keywords are updated to reflect the level of the map that is being examined. Thus if you have opened a keyword, that keyword and the associated staff appear in the appropriate meta content sections of the research map page. As these sections are important to search engines in ascertaining the important content of a page, this design helps to ensure that the information the Polymer Centre carries about polymer research and near market activity is readily available on the world wide web.