scientific and technical website design projects news

Articles on Popular science

Switchable adhesion

Polyelectrolyte chains for smart adhesion.

This research feature had rather a troubled gestation period. We started by preparing 3D models of the polyelectrolyte chains – shown right. These were animated to bring them together so that we could show salt formation between the poly(amine) and the poly(acid) at the interface. Unfortunately it was not at all clear what was going on, so we went back to the drawing board…

The final feature uses a single still graphic to show how the different polymers can attract each other at neutral pH, whilst having no affinity in either acid or base. We then illustrated this by re-producing one of the experiments described in the paper – which results in the two surfaces popping apart when they are immersed in acid.

Switchable adhesion is potentially very useful. Most things are made out of more than one material, and this makes recycling very difficult. Traditional glues are OK, but they usually require heat or organic solvents to break them up. This simple demonstration of a glue that stops being sticky in acidified water shows that this can be done easily, and in an environmentally friendly manner.

For the complete story see: Nanofolio research – switchable adhesion.

Salt melt processing of nanofibres

Doublewalled carbon nanotube - interactive version required Flash.

Carbon nanotubes (‘bucky tubes’ or nanofibres) are scarcely out of the scientific news these days, with claims of applications as diverse as plastic computers and indium-free touch screens for your iPhone (other touch screen devices are available!). While they have great potential, this can only be realised if they can be prepared reliably and in quantity. Unfortunately, most techniques yield carbon nano-tubes in miserably low yields. One of the high yield techniques, uses Catalytic Chemical Vapour Deposition (CCVD). In this, tiny molten drops of nickel serve as condensation nuclei for the carbon nanotube. While efficient, the product is contaminated with nickel, which is included within the carbon tubes, and extremely difficult to remove.

So, lots of carbon fibres, but of poor quality…

So what researchers at Nanofolio have done is work out a technique for cleaning up the tubes we can make. The technique is called salt melt processing, and involves soaking the carbon nano-tubes in a bath of molten salt – in an argon atmosphere to stop them catching fire! At 950DEG C, the molten salt breaks pen the ends of the nanotubes, liberating the nickel, which (after cooling) can be dissolved with dilute mineral acid and re-cycled.

This work is of critical importance to a wide range of nanotechnology applications, but it doesn’t lend itself easily to developing a feature, as we have done with earlier Nanofolio research (see all of our nanotechnology research features for Nanofolio). Here we simply don’t have a mechanism we can elucidate with moving interactive models. The work still deserves to stand out, however…

Initially we thought we’d have to prepare general art-work based on idealised carbon nano-tubes of the sort that usually illustrate work in this area (see, for example Wikipedia). These things are ubiquitous, however, and don’t address our story. When we reviewed the publications on the topic, however, we realised that we had some good scanning electron micrographs (SEM’s) following the processing history.

SEM’s are beautiful, but very common in the scientific literature, so we wanted to do something to make them stand out a bit. Fortunately, the final processed product has a uniform electrical conductivity, and this means that it has a nice even illumination under the electron gun – the tube appears at a uniform brightness, dependent only upon the distance from the electron gun in the microscope.

In short, we could extract depth information from the SEM using a standard graphics package. This allowed us to prepare contoured images, and using the simple ‘pop-up 3D’ technique we’ve reported previously we could get workable 3D images. Given that we could extract depth information automatically, we were able to illustrate this feature with three 3D images – a bit of a first (you’ll se very few sites sporting more than one 3D image – and that usually on the home page for impact!)

Processing carbon nanofibres on the Nanofolio website

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.