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!

Visit their site at:

Eleven Design

Recently I got the following email from alertsATmy_domain.

Dear user of the cookandkaye.co.uk mailing service!

We are informing you that because of the security upgrade of the mailing service your mailbox (my_email_address) settings were changed. In order to apply the new set of settings click on the following link:

http://cookandkaye.co.uk/owa/service_directory/settings.php?email=info@cookandkaye.co.uk&from=cookandkaye.co.uk&fromname=info

Best regards, cookandkaye.co.uk Technical Support.

I knew that this email could not be genuine, but it was very believable.

This phishing attack works on a number of assumptions that people make about email messages and URL’s, assumptions that you must challenge to stop other people assuming your online identity. These are:

• That the From email address is genuine. In fact it is very easy to set the ‘from’ email address in a message, so email messages are in practice annonymous (you cannot be sure where any message comes from).
• That a link goes where it says it does the only way you can check this is by looking at the raw code of the message (or web page). On doing this it was apparent that the link was not quite what it appeared – the correct domain was there, but configured as a sub-domain of a site somewhere in the co.kr TLD. Where ‘technical support’ would presumably have taken my email access details.

Configuring the link in this way makes it quite difficult to check by eye in the raw form, and I guess most people don’t do that! – We’re not a big (or particularly prestigious) company, so I don’t think we are high on anyone’s hit list, if we are getting these phishing attacks, the implication is that it is rife…

We hope you don’t get caught out – if you do you should speak to your technical support as soon as you can, perhaps in person…

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 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

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).

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).

We’ve been working with Mobility Nationwide for a couple of years now, taking on the day to day maintenance following the untimely death of their web developer. Over the last year we’ve been brought the site up to the latest HTML standards – important in ensuring accessibility (not to be neglected for older web users, which is the case with many of Mobility Nationwide’s clients), but most recently we looked at updating the banner to improve its visibility to search engines.

Well, looks like the work has paid off, with the site now hitting the #1 place on Google, so:

See Mobility Nationwide, for your wheelchair accessible vehicle!

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.

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).

The Polymer Centre website uses a WordPress news management system, but conventional HTML pages for the bulk of the site. This combines layout flexibility where it is needed, in the home page, for example, with easy updates. However, these updates are only seen when you visit the news section (run by WordPress) – what was needed was a means to get headlines from the news section onto the home page for the site, where every visitor could see them.

To do this we built a small program that grabs data from the WordPress database, and re-formats it for a text display on the home page. As the Polymer Centre website has a very well defined design, however, we were able to take this a step further. In this we take the headline and a snippet from the text, but also derive a thumbnail of any image accompanying the story. These elements are then fed into a Flash program that displays the last five stories one after another, with short transitions between each.

For those without the (nearly ubiquitous) Flash plugin an alternative text and link description is made available (using Flash satay, described previously), ensuring a high degree of accessibility.

Please visit the Polymer Centre to see how their polymer news system works.

We’re just in the process of launching a new website for Mobility Vehicles Ireland; this cross Irish Sea venture brings together one of the leaders in supplying wheelchair accessible vehicles in the UK with an established Irish partner with many years experience customising commercial vehicles. The partnership will make a lot more wheelchair accessible vehicles available to people in Ireland – at competitive prices. To give an idea of the size of the venture, Mobility Vehicles Ireland currently offers a selection of nearly 30 wheelchair accessible vehicles.

It has been quite an interesting experience developing a site for the Irish market. We have found a couple of technical hurdles to overcome, one of which has been a very slow update of the Irish domain name servers. This makes for problems with domain management, as any maintenance or movement of the domain may cause many weeks of disruption to web services. In fairness, it is not clear whether or not the problem here is Ireland wide, or just restricted to Eircom. If the latter, the issues of near monopoly suppliers not being terribly agile is common accross the globe!

Anyway, we hope we are now past our teething problems, and wish JJ and Dave all the very best in this new venture, please visit their new site at:
Mobility Vehicles Ireland – quality used wheelchair accessible vehicles!