Light and labels

A desk lamp underneath my desk, illuminating the back of my PC

Here’s my Top Tip for the day: a desk lamp beneath my desk allowing me clearly to see the (labelled) connections on the back of my PC case.

Light

The lamp is for those moments when I have to crawl down there to (un)plug an audio or USB cable, or when I’ve got the side panel off the box just making sure that everything is okay. I’ve got so many power sockets under there anyway I might as well employ one to help me while I’m guddling about under my desk, like some kind of IT troll.

Labels

A muddle of PC cablesAnother thing that I find useful is to label cables. Take a look at the mess of cables beneath my desk (right). The only way that I’m able to determine which cable is which, especially when it comes to power cables and USB cables, is because I label them all.

Power cables

All power cables have a label on the plug telling me what they are, e.g. PC, Monitor, hp 1000 (laser printer), hp 5150 (colour printer), etc. No more accidentally unplugging my PC when I meant to switch off the printer.

USB cables

All the USB cables have a little label flag (simply a label folded round the cable and back onto itself) on each cable at the PC end, telling me what they are, e.g. HP 5150 (colour printer), USB Hub, etc.

At the other end, on my 4-port USB Hub I have little label flags there too: Belkin Media Reader, hp 1000, SiPix Webcam, and IrDA.

This way I don’t have to waste time untangling cables between peripherals and my PC to find out what’s what. I just have to switch on my under-desklamp and read the labels.

(The lamp is really good for keeping my feet warm, too, on cold mornings!)

Design down the tubes

London underground map
A portion of the award-winning London Underground map. I used to live near Victoria and then between Elephant & Castle and Borough.

During the last couple of years as I’ve thought more about what makes for good website design I’ve been encouraged to read more widely around the subject of design in the real world. Two books that I’ve found particularly interesting and helpful are Design for the Real World: Human Ecology and Social Change by Victor Papanek and The Design of Everyday Things by Donald A. Norman.

The good, the bad and the ugly

Design, both good and bad, affects us all. Good design very often goes unnoticed, it allows us to get on with whatever task we are doing without thinking about it. We don’t waste time stopping to try to figure out how to use something, whether it is a door handle or a pen or a computer’s graphical user interface. Bad design very often stops us in our tracks. At best we’re forced to puzzle for a few seconds about whether to push, pull, twist or turn the door handle, at worst we give up and try something else.

Despite the leaps and bounds made in the last few years in making computer interfaces easier to use and understand (think of the difference between Windows 3.1 and Windows XP, for example) there is still a long way to go before computers can be used without even the shortest introductory course.

You are often not to blame

Something that I often find when helping people with their computer problems is that people frequently feel guilty or blame themselves for not being able to do something on their computer. “I’m really sorry, I’m not very good with technology,” they’ll say once I’ve finally figured out that the way to change the default spelling dictionary from US to UK within their application of choice is hidden within a complex array of menus and options, or that the only way to save a document in Lotus WordPro Millennium on Windows XP is that it has to be within a non-customized, yellow folder because of the way that XP handles “protected folders”.

But the problem isn’t that these people are stupid, it’s that the design of these applications still isn’t intuitive enough and they very often don’t offer users error messages that the average user can understand, using terms used are too “geeky”.

Bizzare error message
Create your own error message with Atom Smasher’s Error Message Generator.

Part of the problem lies in not being able to grasp the conceptual model behind what we are trying to do. Most users can easily grasp the concept of a desktop and a recycle bin, of folders and files because of how we use these in the real world. But their understanding falls down when they are asked to set spelling preferences in a dialog box that they can only access via Options… under the Tools menu. And then try to explain the concept behind WEP encryption for wireless networks, or JPEG compression settings to someone!

Jon Erickson in his article A Manifesto for Collaborative Tools argues that

computers should help us become smarter and work together better, and in many ways, they have. But instead of progressing, tool builders these days are moving in circles, treading water rather than swimming forward.

One reason for this stagnation is that we seem to think we’ve reached the limits of what software can do for us and what we can do with software. Nothing could be further from the truth. Our software tools — particularly in the collaboration space — are nowhere close to fulfilling their potential.

Redesign

It is one of the reasons that I’m delighted that Microsoft have completely and radically redesigned the user-interface for their forthcoming version of Microsoft Office 12.

Screenshot of the new Office 12 user-interface
Screenshot of the new Office 12 “ribbon” user-interface.

In previous releases of Microsoft Office, people interacted with the applications through a system of menus, toolbars, task panes, and dialog boxes. While this system successfully provided access to a wide variety of features, it became increasingly challenging to add capabilities in a way that made it easy for people to take advantage of them.

The overriding design goal for the new UI is to deliver a user interface that enables users to be more successful finding and using the advanced features of Microsoft Office. An additional important design goal was to preserve an uncluttered workspace that reduces distraction for users so that they can spend more time and energy focused on their work.

I’ve never found Microsoft Word’s menus particularly easy to use; I don’t find them as intuitive as I do the menus in Lotus Word Pro or OpenOffice.org. So I look forward to trying out this new design. And how long before other applications follow suit, or at least have the courage to move away from the current muddle of menus, sub-menus and confusing toolbars of incomprehensible icons.

London underground

So, I was delighted today to read on BBC News that the London underground map has been voted one of Britain’s best designs of the last century, along with the Spitfire and Concorde.

When Jane and I were in London a couple of weekends ago I was admiring the simplicity and beauty of the London Tube map, because while it is not geographically accurate it very effectively and efficiently maps the relationships between stations. Which is all you are really concerned about while using the Tube — you want to know where you are, where you want to get to and where you may have to change. It is good design largely because it puts the user’s needs first.

The London Underground map was designed by Harry Beck in 1931 when the Tube grew so large it became impossible to map the lines and stations geographically.

Instead, Beck designed the map based on an electrical circuit, with each line in a different colour and diamonds for interchange stations.
(Source: BBC News)

Now that is good design. It is wonderfully usable, and quite aesthetically beautiful too. If only all design could be like that.

In conclusion

Donald A. Norman ends his book with this plea:

If you are a designer, help fight the battle for usability. If you are a user, then join your voice with those who cry for usable products. Write to manufacturers. Boycott unusable designs. Support good designs by purchasing them, even if it means going out of your way, even if it means spending a bit more. And voice your concerns to the stores that carry the products; manufacturers listen to their customers…

And enjoy yourself. Walk around the world examining the details of design. Take pride in the little things that help; think kindly of the person who so thoughtfully put them in. Realize that even details matter, that the designer may have had to fight to include something helpful. Give mental prizes to those who practice good design: send flowers. Jeer those who don’t: send weeds.

Saints and Festivals of the Scottish Episcopal Church for MS Outlook

Screenshot of Outlook Calendar showing saints\' days
Screenshot of Outlook showing saints’ days and festivals imported into the Calendar.

Better late than never! I’ve finally got around to typing up the Scottish Episcopal Church saints’ days and festivals in a format that can easily be imported into the Microsoft Office Outlook Calendar.

Please feel free to download this file and follow the simple, illustrated instructions on how to import it into Microsoft Office Outlook.

Download

(Right-click and select Save Link As….)

  • Saints’ Days and Festivals of the Scottish Episcopal Church Calendar, from Advent 2005 to The Last Sunday in Pentecost (Christ the King) 2006 (CSV, 23 KB)

Please note:

  1. Back-up: Make sure you back-up your Outlook .PST file before you import. (I recommend that you use the Personal Folders Backup application which works for Outlook 2000, Outlook 2002 XP and 2003.)
  2. Illustrations: All illustrations show Microsoft Office Outlook 2003; details may vary slightly for older copies of Outlook. This does not work for Microsoft Outlook Express, which is an email application and does not offer calendar functions.
  3. Accuracy: Details are as far as possible correct, although a few errors may have crept in in the production of this file (for example in how translated (moved) minor festivals have been scheduled). It was produced for my own personal use, but I’ve also decided to release it into the public domain. Feel free to use and/or adapt it to your own use. The file can be edited in Microsoft Office Excel (or other spreadsheet, eg OpenOffice.org.
  4. Dates only: This file does not contain details of the readings for each day, only the name of the festival.
  5. Enjoy!

1. File > Import and Export …

Screenshot from Outlook 2003 of File, Import and Export

Open Microsoft Outlook, and from the File menu select Import and Export…

2. Import and Export Wizard

Import and Export Wizard

The Import and Export Wizard window will open. Select Import from another program or file, then click Next >.

3. Select Comma Separated Values (Windows)

Comma Separated Values (Windows) is selected=

Select Comma Separated Values (Windows) from the list, and click Next >.

4. Locate the CSV file to import

Import a File window

You will now be prompted to Import a File. Click the Browse … button and locate the file you downloaded called ChurchDates2006.csv, once selected click Next >.

5. Select Calendar under your Personal Folders

Select destination folder

Now select the destination folder from those listed under your Outlook Personal Folders. You want to select Calendar, and then click Next >.

6. Confirm and click Finish

Confirmation screen

You will be presented with a confirmation screen, similar to the one above. Make sure that the details are correct — and if you need to, check that the Map Custom Fields… settings are correct (by default, they should be). Click Finish to begin importing the details into your Outlook Calendar.

7. Import is in progress

Import and Export Progress bar

Outlook will begin to import the information into your Outlook Calendar, showing you its progress (as above).

8. It’s done

Screenshot of Outlook Calendar showing saints\' days

Once complete, you’ll find that details of all the Scottish Episcopal Church saints’ days, festivals and Sundays, from Advent 2005 – The Last Sunday of Pentecost (Chrirst the King) 2006, have been added as all-day events to Outlook.

Testing WordPress 2.0 before I upgrade

Screenshot of WordPress 2.0 Write Post
Screenshot of WordPress 2.0 Write Post page, now with integrated image upload (the blue panel at the bottom of the image).

Today I’ve been checking out WordPress 2.0, the recent major update to the popular blogging and CMS tool, prior to upgrading various WordPress-driven sites that I manage.

The update from WordPress 1.5 to 2.0 has been quite considerable, particularly the back-end code and so inevitably some plugins written for WordPress 1.5 “Strayhorn” may not work with WordPress 2.0 “Duke”.

Plugins — for those of you who don’t know — are additional modules that add extra functionality to the WordPress application. For example, by default the search function in WordPress only searches the data in Posts and not static Pages, so the excellent Search Pages plugin extends the search to include Pages too. Another example, the ShowOnFrontPage plugin controls whether Posts show on the front page or not — very useful if you’re using WordPress as a Content Management System.

So my first task was to check whether the few plugins that I consider essential, and rely on for my site designs, worked with WP 2.0, and if not if they’d been updated. The good news is that thankfully they all do (or have been updated):

My plugins of choice:

  • Bad Behaviour
    Stops comment spam before it starts by trapping and blocking spambots before they have a chance to post comments
  • Spam Karma 2 Reloaded
    Another anti-comment spam tool, that in conjunction with Bad Behaviour means that I now get almost no spam comments whatsoever
  • WP-DBManager
    Manages your WordPress database. Allows you to optimize, backup, restore, delete backup database and run selected queries. In my opinion this is better than the one built into WP2.0. It’s been updated for WP2.0 too.
  • Include Page
    his plugin adds an include_page() function that allows you to include the contents of a static page in a template, on the Sidebar or as a Welcome note on the front page, for example.
  • Search Pages
    This makes search queries look at Pages and Posts instead of only Posts.
  • ShowOnFrontPage
    Allows you to keep select posts from showing on front page of WordPress
  • WP-Scrobbler
    Lets you display recently played songs from your AudioScrobbler profile on your site.
  • IImage Browser
    This plugin adds an “IImage Browser” button to the Quicktags area which opens an image browser to select from all previously uploaded images and add the appropriate code to the post.

What’s up with images?!

Which leads me nicely to the one reason that I’m not downing tools and racing to upgrade my blog to WordPress 2.0: the way that it handles images.

Inevitably some people will love it, others will hate it, and today I read quite a few comments from both supports and haters on the WordPress Support forums.

You may be able to see from the screenshot image above that WordPress 2.0 now has an ‘inline’ upload panel within the Write Post and Write Page panels — it’s the light blue panel at the bottom. I thought that I’d love this feature, but in practice it just doesn’t offer enough options … in fact, it doesn’t offer any!

I’d like to be able to decide where to upload files, and what type of files (I like to be able to upload PDF files using the upload facility). I’d also like to be able to decide on the maximum width of images, because the default for both (?!) thumbnails and full-size images is 128 pixels. Which is mad! I know that this is to prevent less-experienced users from breaking the theme by uploading files that are absolutely massive — as I’ve seen done — but surely there could be an option to set the maximum size shown. I’d also like to be able to decide on whether to use the new ‘inline’ upload panel or the ‘old school’ version. Some members of the Support forum have simply been overwriting the new wp-admin/options-mis.php with the version in WordPress 2.0 Beta.

There may be a plugin that offers this, or a hack workaround. But in the meantime I’m going to install and activate the Filosofo Old-Style Upload Plugin and see how I get on with that.

WYSIWYG vs QuickTags

One of the nice things about WordPress 2.0 for less-experienced users is the inclusion of a nice What You See Is What You Get (WYSIWYG) editing panel, courtesy of — I suspect — a customized version of TinyMCE. But I like my raw XHTML codes when editing posts.

Thankfully in WP2.0 I have the option of turning the WYSIWYG “visual rich editor” on or off within my own user account options. This means that on a site where you have a handful of contributors each can have the Write panels setup for their own preferences (XHTML or WYSIWYG, geek or non-geek).

I’d still like to find out how to extend the options on the “visual rich” toolbar, however. The XHTML toolbar options can still be edited in the quicktags.js file, although in WP2.0 this has now moved to \wp-includes\js\quicktags.js.

On this blog I’ve included the following XHTML tags to my quicktags bar: h1, h2, h3, h4, h5, h6, acronym, abbr, table, tr and td. I’d like the option to be able to add some of these to the TinyMCE visual rich editor.

On the whole I’m really liking WordPress 2.0, apart from the way that it handles images. But I’m sure I can hack my way around that! 😉

Update

I’ve discovered that in the file inline-uploading.php this section of code:

81. if ( $imagedata['width'] * $imagedata['height'] < 3 * 1024 * 1024 ) {
82. if ( $imagedata['width'] > 128 && $imagedata['width'] >= $imagedata['height'] * 4 / 3 )
83. $thumb = wp_create_thumbnail($file, 128);
84. elseif ( $imagedata['height'] > 96 )
85. $thumb = wp_create_thumbnail($file, 96);

the number at the end of line 83 — in this case, 128 — instructs WordPress how wide to create the thumbnail.

But this code does not affect the generated XHTML code when you add an image to your post, either as Original size or Thumbnail. For that … I need to keep looking.

All I want for Christmas is a new blog …

Screenshot of OpenSourceCMS
The OpenSourceCMS website will allow you to test-drive any of the blogging tools and content management system tools on offer.

It’s getting to that time of the year again and I know what you’re thinking. You’re thinking “Gareth, what’s the best blogging software for me?” Well, have I got good news for you.

I know you’re thinking that because over the last couple of weeks I’ve had quite a few emails from people asking what they need to run their own blog, rather than signing up for one of the free blogging services like Blogger.com or WordPress.com.

I mean, obviously I’m going to recommend WordPress, because I think it’s the best thing since someone invented custard doughnuts, but it’s a free world and you might like something else. But which blogging application do you choose? And how do you know what is available?

The good news is that someone over at OpenSourceCMS has thought about that for you. OpenSourceCMS is like a test-drive centre for a whole bunch of open source (which usually means free to use, free to adapt to your own use) blogging and Content Management System (CMS) tools, such as WordPress, Drupal, Mambo, and PostNuke. You can see how they look, feel and work, both as an end-user and as an administrator.

What’s impressive about OpenSourceCMS is that all the tools on offer automatically reinstall themselves every two hours, so you play with them to your heart’s content in the sure knowledge that every 120 minutes all your tampering will be forgiven and the CMS or blogging tool will be restored to a virgin, sinless existence.

Once you have your blog-of-choice you can then go about setting up your own website and install the blogging software. I won’t go into all the details here, but in a nutshell you’ll want to do the following:

  1. Buy a domain name
    I buy all mine at 123-reg. Very good value, and they offer you a lot of control of it afterwards.
  2. Buy hosting web space (with support for MySQL and PHP)
    I’m with WebFusion, who while not the cheapest are pretty reliable.
  3. (Point your domain name to your web space)
    If you are unsure about doing this bit manually a lot of hosts these days will offer you a ‘free’ domain name as part of the package. The instructions on how to do this at 123-reg are excellent. I’ve not had a problem with setting up 3 or 4 sites.
  4. Create a MySQL database
    MySQL is just the name of a kind of database that is popular with website builders. The database is what stores all your amusing blog posts. You will usually need the database name, database username, database password, and its location (usually localhost).
  5. Upload the blogging/CMS software
    Using the magic of an FTP application, such as WS_FTP.
  6. Install the application
    I can now install WordPress in under 5 minutes, from creating a new MySQL database, through uploading, to running the installation script.

Obviously, each system will have its own peculiarities so make sure you read the installation instructions carefully; there is usually a good user knowledge-base associated with each system too where you can find help and advice. WordPress, for example, has the WordPress Codex (wiki) and WordPress Support (forum).

A lot of blogging tools these days also allow you to customize your site with themes; you can download one that you find, or you can create your own.

Get your site the way you like it, and then it’s over to you, your input devices, your digital camera (optional) and a healthy dose of imagination, creativity and humour. The world of blogging is only a mildly-geeky hop, skip and an upload away.