cookandkaye

scientific and technical website design projects news

Articles on Uncategorized

First Frost

First frost

First frost: We have had a good end to the Summer, but it is now creeping into Autumn, and clear night skies are letting the temperature fall. Still I was a little surprised to see frost when walking our dog Cas this morning!

The WordPress CMS

WordPress cogs We’ve used WordPress for many years now to manage news sections of websites, where its ‘pile ’em up’ approach to managing stories, and simple user interface has allowed many of our clients to take over day-to-day management of this section of their website. Over the last year or so, however, there have been significant improvements under the WordPress hood. Most recently we’ve seen the introduction of the graphical menu management system, which we think is a pretty strong contender for killer ap status amongst CMS systems…

The new menu manager lets the site administrator drag and drop new pages to where they are wanted in the site hierarchy. Further, you can change the way the link appears in the menu – retain or shorten the page title? add some hot text to hint to vistors? – can do!

The new TwentyTen templates also make good use of style sheet (CSS) properties to build fly-out menus that use no Javascript. This is quite a cool trick, and whilst it is getting more difficult to surf the web without Javascript, it is a safer way to travel, so we prefer to leave it out of essential services – like the menu!

Simple things to make for a more pleasant browsing experience!

A problem with fly-out menus is that they often leave you with no idea where you are in the site hierarchy. This can be a real pain if you surf into the middle of a large site using a link from elsewhere. The page looks interesting, but it lacks any context – where am I? Where do I go next? To avoid this on the new Lochaline Dive Centre website, we looked at adapting the TwentyTen menu code so that active sub menu’s are held open. Peace, I can arrive at any page in the site and see clearly where I am… Simple things to make for a more pleasant browsing experience!

Most CMS systems restrict your freedom to build sites, pushing you to do things their way, rather than giving you the freedom to build what you want. This results in a definite feel for the way they work – done well it need not be clunky, but still the underlying CMS imparts a flavour to your browsing experience… What is really impressive with the new WordPress system, however, is that you would need to check the web address window in your browser to realise that you are not in a custom built website. Indeed, there are very few changes to the Lochaline Dive Centre website due to its move to the CMS, what changes we have made were done because it is now so easy move pages within the site structure. This has given us the freedom to re-order content to try and put together a more user friendly site.

That is how it should be…

Why your server software is important (and why it needs to be open source)

If you are in the market for a website, you’re priority concern is to address your intended audience (and maybe identifying who this audience is before even that stage). You probably wont think too much about the nuts and bolts of the software your site will be using – this will be the responsibility of your web-designer, after all. Think again.

Successful websites are organic creations – your audience is going to change, and you are going to want to change with them. The last thing you need is to have your website integrated with a server technology that is no longer supported. Can’t happen? – Think again (again).

On April 15th 2010 Microsoft pulled Live support from its original X-boxes – not a very old piece of kit. If you’ve got one, it is now obsolete (at least for online multi-player stuff).

Your problem with any piece of proprietary software is that you can never own all of it, and when there is not enough money to be made out of selling new copies…

Live support ends, Slashdot documents the last online game of Halo 2

New Nanofactory website

The Nanofactory site presented a number of interesting problems. The new site was to replace an existing website that had a lot of content that was both difficult to navigate, and had very little to engage a visitor. The new program of work for Nanofactory, however, required a site that would engage visitors, and encourage them to contact the team.

We started by preparing a consultation document that covered how the site might be improved: the type of content that might be included that would help engage visitors, and ideas as to how we could re-work the existing material so that it was accessible. Following the consultation, Eleven design took the lead in visualising both the new propotional material, then the new look site, just leaving us to ‘make it so’.

Meanwhile we transferred the existing content from the worst ever CMS (eventually we had to cut and paste the stuff out by hand, as the client had not been given backend access to their own website!) into a MySQL database. This was then compressed into a single page that employs an interactive filter system. This allows visitors to drill down through the available resources and expertise in nanotechnology in the Yorkshire region to find the technique or expert of interest. At each stage a contact form is available to permit the visitor to send a message to Nanofactory identifying the area of interest.

Nanofactory website screen shot.

The visual Eleven came up with for the site was (as ever) very clean and attractive, but offered a number of technical challenges, for instance requiring a rolling gallery of images to advertise the region’s nanotechnology expertise. Developing a content management system to manage the site, the interactive gallery and the interactive filter page was an interesting project in its own right. While WordPress offers increasing challenge on the CMS front, we used Joomla! as the core for this system due to its proven competency with larger, complex websites.

As a bit of a departure for us, the client required ‘pop up’ Javascript based contact forms on all of the core pages in the site. We developed these based on the available Mootools Javascript library packaged with Joomla!, so there was no additional download overhead for visitors using the site.

Currently the gallery is still populated by older work by Nanofactory, but can handle 50+ project images and links to project writeups in blog form within the Joomla! CMS, offering essentially limitless room for expansion.

New site for Eleven Design

Eleven Design are a company that we have worked with on a few projects in recent years – Eleven produce really clean designs, that tend to work well in a web setting. It was therefore a great pleasure to be asked to work with them bringing their design for their own website to life within the Joomla! content management system.

Joomla! is not (in my opinion) the easiest CMS system to use, but it does offer very solid performance and a lot of features that permit you to really build a distinctive site that doesn’t look like a ‘website in a box’. For Eleven we used Joomla’s templating flexibility to develop a home page with background images selected from file at random. We wanted a simple system that Eleven could update easily, the solution was an automatic file picker, so all Eleven needed to do was to upload the new cover photo into a designated folder for front page images to be added to the selection – job done!

A real challenge for us were the project and archive pages. Joomla is driven by menus, but the design here called for using a gallery of images as the menu. This is very visually striking, and easy to navigate – simply picking out pictures that look interesting or fun to find out more about the project that generated them. Getting it to work without great unsightly text menus cluttering the page up, however, required a little lateral thinking. The nice side of the solution we came up with was that it worked within the core Joomla! installation – so keeping the site easy to manage.

Finally, working with Eleven, we developed a manual that covered the functional parts of Joomla! that they needed to add and edit content on the site. The aim here was to codify processes so that even if they were not working with the content management system every day, they could quickly pick up the information they needed to carry out a change or other update.

The site went live in December 2009, and has been extended by Eleven from a core of 6 project and archive pages to cover 36 projects now – reflecting some of the skills of this dynamic and enterprising design company!

ShrinkPic – help for CMS

Cassie in the snow - original 3.6MB

A single image from a modern camera (5+ mega-pixels) has a file-size equivalent to 50-100 text pages. Not unsurprisingly, therefore, the use of large images can slow your web-pages down to a crawl. Thankfully you don’t need large images to decorate a web page, your photos will be so much larger even than the largest modern displays, that putting them up full-size will normally just be a waste of time…

Right: ShrinkPic automatically reduces image sizes – the default setting has reduced the 3.6MB original to 85kB, which is easily handled by WordPress, where I’ve processed to a 150px square thumbnail. Click image for 800×600 full uploaded file-size.

The problem is then, how do you get the file size down? For a long time we have recommended IrfanView as a free (PC based) image processor, for cropping and re-sizing images for use online. While pretty straightforward, this package does need a little practice to use it effectively, so is not ideal for many people managing CMS systems, for whom the occasional image can be a bit of a nightmare…

Shrink Pic is ideal for anyone who finds image management on the web a nightmare!

Over Christmas we became aware of Shrink Pic, a new system that shrinks photos automatically when you upload them (via LifeHacker). So, is this solution going to work for you?

  • First up, the software only runs on PC’s. We are not aware at present of an equivalent program for Macs or Linux.
  • The basic premise of the software is that it runs in the background, and automatically re-sizes and compresses any image you want to upload to a website (Flickr, your blog, CMS etc.) – or email – before it is sent.
  • You can set your default image sizes or set the amount of compression to fit a file size range (as I did here).
  • Your original image is not changed.

What the software does not do is edit your images. The most recent versions of WordPress will allow you to do a bit more fine tuning after the upload – cropping and creating thumbnails. If you need to process your pictures, then you should look at doing this BEFORE uploading, in which case you might as well resize ready for upload, so you may not need Shrink Pic.

If you are want large images on your website (larger than 1000px in any dimension), then you should look at more advanced processing packages to optimise them.

Conclusion: this software is really easy to use, and I was pleasantly surprised at how well it works with WordPress here!

Resource links:

OnTheGoSoft’s Shrink Pic

For free hands-on image processing:

IrfanView

Sidewiki – potential impact on website owners

Sidewiki is the latest offering from Google. It enables your visitors to make comments about your website – and these are visible to all other visitors with Sidewiki enabled. If you are not aware of the development, however, this graffiti on your site is potentially a very nasty surprise!

Clearly this is something that every website owner now needs to take into account. Whether it is simply as another cost – like washing a high-street shop’s windows, or potentially a useful design supplement for seeding additional information about your site into the side bar!

CookandKaye are on to it so watch this space!

For more information, or to enable Sidewiki yourself:

Install Sidewiki with Google toolbar

Google has taken some time to evaluate possible down-sides of this innovation, see below for their terms of use policy:

Sidewiki Program policy

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

An anatomy of spam

Spam is one of the really irritating things about modern life, but like its namesake, there is not usually a definable anatomy, never mind an easily identified origin! In this study, however, we get a sneak peak at what drives a spam…

For a number of years we have employed email forms on our websites to combat the worst excesses of spam. This simple system hides our email addresses from being harvested, and allows us both to follow up new enquiries, and to re-direct email easily dependent on who is available to answer it. What it prevents is our addresses being parcelled up and flogged mercilessly by spam robots!

Recently, however, we started getting very similar emails arriving in our in-box, all with random subject lines, and containing 20-30 links to pages within a domain, with a small added random component to each address*. A quick look round the web showed us that the web addresses often appeared in web-blog comments posts. Comments on blogs are intended to permit interested readers to feedback into a story, but have long been used as a means for the unscrupulous to advertise a load of web addresses. These addresses will usually be providing services that cannot be advertised more conventionally because they are illegal, immoral, or offer downloads that might damage or enslave your computer. This is spam; it exists is because there are some things that you simply cannot mount an ad campaign for, after all, it really isn’t that difficult or expensive to get a site noticed, so anyone using this technique for a legitimate product would be just too dumb to breath!

A quick bit of modification to our email form allowed us to pick up the IP address of the robot(s) sending the junk, and this was identified as 83.233.30.159, which appears to be a Swedish IP, advertising a site in the Netherlands (I don’t see any reason to advertise them here! Thanks to ip-lookup for tracing the IP information). Clearly one of the more stupid spam machines had picked up on our contact form, and every two hours was posting us a new set of 20-30 links, without realising that there was no blog behind the form for their advertising to have any effect on…

Hey-ho, at present this is only a minor annoyance, and has even provided some interest in that the activity is regular, and possesses a degree of anatomy that is subject to some analysis. As ever, however, we have to be alert to how efficiently we might block this kind of activity if it were to get more significant.

An obvious contender would be to block the IP address, which has remained constant for the last few days, this can be coupled to an apology and opportunity to contact through snail mail or phone if the IP address later passes on to a genuine person. Alternatively, the industry standard approach has been to deploy Captcha, which asks anyone submitting the form to type in a set of letters and numbers from an image that is doctored to make it difficult for a machine to read it.

Both systems have their advantages and disadvantages: Unfortunately a lot of early Captcha systems have now been broken; on the other hand, IP addresses are pretty easy to spoof or change…

As a final comment, on the mutability of IP addresses, it is quite interesting to probe an access log and watch a more sophisticated hacker ‘at work’. This is characterised by a number of related probes coming in, but with the IP address jumping over a broad range of values. This kind of thing can force you to get quite brutal with IP blocking – but more on that some other time!

*The random components to subject lines and addresses make it more difficult for spam assassin programs to pick out these bad emails.

CAS number validation with PHP

Chemical names tend to be a mixture of IUPAC and lab-speak, and an empirical formula can represent a dozen very different substances. So, when it is important that you report chemicals accurately – how do you do it? This is a problem we have recently encountered in developing an interactive database for the ‘Control of Substances Hazardous to Health’ (COSHH) for a University department. Here the system must be able to unambiguously associate chemical substances with risk and safety data.

Pretty much the only way to do this is through the CAS registry number, this is issued to all reported chemicals by the Americal Chemical Society. The chemicals themeselves will be called up by users by their IUPAC name or any synonym that is available in the database, or by fragments of these, making it easier and quicker to use, though the option of using the CAS registry number will also be available to them.

The CAS number has the format 1234567-12-1, i.e. a number up to seven digits long – a two digit number – a single digit number. The last number acts as a check for the whole number, to help prevent typo’s, so this system is quite robust, and allows us to add new chemicals to the existing database without great fear of duplication (in fact some chemicals have been associated with more than one CAS number, so even this is not infallible).

All we need now is a check program for the CAS number, to help ensure the user or administrator does not make typos. This we adapted from the code posted by Rich Apodaca on Depth First (in Ruby):


function valid_cas($cas_no) {
$pattern=false;
$sum=false;
$checksum=0;
//pattern check
if(ereg('[0-9]{2,7}-[0-9]{2}-[0-9]', $cas_no)){
$pattern=true;
}
//perform check sum
$cas_no=strrev($cas_no);//reverse the string
$cas_no=str_replace('-','',$cas_no);//take out hyphens
$chk_digit=substr($cas_no, 0, 1);//get the check digit, now the first number!
for($i=0; $i<strlen($cas_no); $i++){
$digit[$i]=substr($cas_no, $i, 1);
$checksum=$checksum+($digit[$i]*$i);
}
if($chk_digit==$checksum%10){
$sum=true;
}
if(($pattern)AND($sum)){
return true;
} else {
return false;
}
}

Calling valid_cas(number-to-test) within a PHP code block will return true or false, depending upon whether or not the CAS number has a valid format, so providing a valuable chack against typos on adding new chemicals to the database, and permitting the database to check against duplication.

For more on the CAS registry number – see the wikipedia entry