Reinstalling Windows XP Professional SP3: Operation PC Forgiveness 2008

Screenshot of Windows XP

This week I’ve been enjoying a holiday at home with Jane: a chance to enjoy peace and quiet together for the last time before the children arrive, and to reinstall Windows XP on my main desktop PC. That’s been the main reason for my lack of recent blogging, and not laziness — oh no! Not that. No way!

Slowdown to upgrade

It’s a common problem with Windows: it gradually slows down over time. I install and uninstall all sorts of software on it, I use it every day for everything from checking emails to coding, photo editing to video creation. I’m not surprised it slows down over time.

But this time it was getting really bad. At times it wouldn’t boot properly (hardware driver conflicts I think). There was a serious issue with my sound card: if I played a Flash movie (e.g. YouTube) while listening to an MP3, for example, it would send my audio player crazy when I closed the browser window, playing any non-Flash audio two or three times too fast. It made everything sound like the Chipmunks had formed a metal band!

I also wanted to upgrade a couple of major pieces of software:

as well as various hardware drivers:

It was clearly time for Operation PC Forgiveness 2008.

Backup

On Monday and Tuesday I backed up everything. I used Second Copy 7.1 to copy the contents of each partition one-by-one to my external harddrive (Freecom 500GB).

I’ve tried various other applications over the years that take either images of the partition, or backup to a proprietary format, or first compress the files before storing them in a zip file, but in the end I’ve returned to a simple 1:1 copy on an external drive. That way I can access these files at any time from any PC without having to first install any 3rd party applications.

Second Copy

Second Copy allows you to create backup profiles that can be run either individually or within groups. So I have groups for:

  • Applications (e.g. Microsoft Money files, Microsoft OneNote data, WeBuilder settings, Windows Boot.ini file, Second Copy profiles, etc.
  • Outlook PST files, backups and stuff
  • WeBuilder reinstallation
  • Ultimate Backup to external hard drive

There are a few backups that I do manually, for example Firefox bookmarks and anything else that needs to be exported.

Screenshot of Second Copy

This way I can make sure that all my personalized settings have been backed-up before I run the “Ultimate” backup group profiles and copy it all to my external drive.

A couple of things that I always do when doing a reinstallation are:

  • Install and take a print out of all my installed applications using Installed Program Printer.
  • Take a screenshot of desktop (for location of icons).
  • Take a screenshot of Start Menu (for labels and icons).
  • Take a screenshot of the Firefox add-ons that I have installed.
  • Backup Programs folders within Start menu (both All Users and my username profiles). This way I can see how I organized my Start menu.

Reinstall Windows XP

With the backup complete it was time to bite the bullet and reformat my C drive. I have 12 partitions on my hard drives so wiping C simply takes out Windows and programs, all my data, images, videos, music, etc. are safely stored on the other partitions (and now also backed-up).

One thing that I forgot to do before I set the Windows XP installation CD loose on C: was to deauthorize iTunes. D’oh!

Essentials for a Windows XP reinstall:

  • Windows XP with SP3 and IE7 slipstreamed into it.
  • Latest hardware drivers, already downloaded and saved to another partition, external drive or CD-ROM.
  • TweakGuides Tweaking Companion for XP to follow advice on best order to install drivers, and various system tweaks to improve performance.
  • Notebook and pen (to write down everything you do, error messages, settings, passwords, etc.).
  • Laptop (or other PC) for looking up advice, error messages, etc. on the Web.

Reinstalling XP and hardware drivers took a couple of hours. Reinstalling the rest of my software took the best part of a day and a half. I have almost all my applications stored on another partition (I:\) and categorized which makes it very efficient to reinstall:

Screenshot of Install partition

Reorganize All Programs within the Start menu

Once I’ve installed the bulk of my applications, run Windows (or Microsoft) Update a couple of times to make sure that Windows and Office are up-to-date, and done a cursory defrag I always reorganize the Start menu.

This is how the All Programs part of my Start menu looked after I’d installed most of the applications that I use regularly:

Start menu with three columns of programs

That’s three columns with around 85 entries. Even though I’ve done a “sort by name” on the list it’s still a mess! What it needs is some categorization to group similar applications together.

All users

I generally start with the “All Users” folder (right-click START and select “Explore All Users”). I then create a number of new top-level folders to act as my main categories. These are generally the folders that I begin with:

  • Accessories
  • Bible
  • CDRW
  • Fonts
  • Games
  • Graphics
  • Internet
  • Labels
  • Mindmaps
  • Money
  • Multimedia
  • Office
  • PDF
  • Printers
  • Programming
  • Scanner
  • Startup
  • System
  • Windows Mobile
  • WinZip

All Users Start Menu Programs

As it happens, these are also the main category labels that I use on my Install partition (I:\). Keeping a one-to-one relationship between the start menu and the install partition makes it really easy to find installers should I need to perform an upgrade or reinstall.

Having a limited taxonomy makes it really easy to find any application that I have installed: all my graphics applications can be found under Graphics, office applications under Office, etc. It sounds obvious but I’ve seen too many users wasting precious time hunting through an unordered list of 60+ applications.

Sort the rest

Having created these new folders, I then move the remaining installation folders and icons into them before performing the rest of the clean-up on the Start menu itself, creating any sub-folders as necessary. For example, within Internet I always create:

  • Browsers
  • Email
  • Firewall
  • FTP
  • Instant Messenger
  • RSS
  • Server
  • Twitter
  • VoIP
  • Web Building

I prefer to use generic terms such as “Instant Messenger” and “Firewall” than “Windows Live Messenger” and “ZoneLabs ZoneAlarm Pro” as I find it easier to find them this way, it also doesn’t lock me into a particular application as I can use the same folder structure regardless of the applications that I have installed.

I also use this arrangement on my PC at work and on my laptop so it allows me to have different applications installed but use the same organizational structure.

Start menu lite

While it usually takes me about 30-45 minutes to sort out my Start menu at the start it must save me hours each month when looking for applications.

My new, slimmed down start menu then looks a bit like this:

Start menu

Now I have a clean installation of XP, with (almost) all my software installed and I can find things on my Start menu. Now I can get on and do something productive!

Why is Low higher than High?

Low, Normal, High

Not sure why I’ve never noticed this before. When assigning a priority to a Task within Microsoft Outlook 2003 you can click on the priority box and select from a fly-out context-menu one of three options: Low, Normal or High.

But why didn’t the developers adopt a kind of natural mapping approach to the location of these three options?

In other words why not place High at the top (because it’s higher), and Low at the bottom (because it’s lower)?

Like this:

High, Normal, Low

The only reason I can think of is that they presumed that users would select Low more often than High and therefore made the Low option closer to the drop-down button, so users would have a shorter distance for their mouse to travel when selecting that option.

I never use Low, I use Normal most of the time and then occasionally highlight particularly important tasks with High. The current layout confuses me every time I use it.

Transcending CSS

Transcending CSS

Transcending CSS: the fine art of web design by Andy Clarke is one of the best books about cascading style sheets (CSS) that I’ve read in a long time.

As a designer Andy Clarke has produced a book that’s far from the hundreds of other dull books on CSS which are packed full of dry code examples and pages and pages of text. This is a beautiful and colourful book, filled with hundreds of images, that takes a real-life approach to designing sites and writing accessible HTML and CSS code.

While this book isn’t aimed at beginners, it assumes that you have at least a good, working knowledge of XHTML and CSS, it is very easily read and if you’re looking to get into modern CSS layout methods then this book could be an inspirational introduction to the subject. Because of the design of the book it’s also more accessible than Jeffrey Zeldman‘s excellent Designing with Web Standards, now in its second edition.

The book is organized into four main sections:

  1. Discovery
  2. Process
  3. Inspiration
  4. Transcendence

Discovery

In the first part of his book Andy Clarke introduces us to what he calls Transcendent CSS, that is code that looks to the future, building on current web standards to create accessible, cross-browser-compatible websites, rather than relying on outdated layout methods such as non-semantic tables.

He argues for web standards, acknowledges that not all browsers display the same design, advocates that web designers use all available CSS selectors and semantic code, use CSS3 where possible to look to the future, avoid using hacks and filters, and to use JavaScript and the DOM to plug any gaps in CSS.

One particularly useful exercise is where he takes real-life examples and shows how he would present these in XHTML, in a section entitled “translating meaning into markup”. His examples include a horse race, marathon runners, a taxi rank, books on a shelf, and a museum display of mediaeval helmets.

Process

Having set the scene over the first 100 pages (lots of pretty pictures on the way, so don’t worry!) Clarke explores a usable process for designing with web standards. It’s quite a good introduction to certain elements of information architecture, such as wireframing/grey-boxing and usability.

Taking the example of a design for Cookr! (his made-up recipe website) he adds mark-up to the design to show you how to best mark-up and organize the XHTML and CSS code. It’s a very visual and practical approach which is strengthened by excellent explanations of what he’s doing and why.

Inspiration

In the third part of the book Clarke moves away from code and gives us an insight into where he finds inspiration for website designs. And it’s not just from other websites but newspapers, magazines, buildings, streets … anywhere really.

This section offers a good introduction to grid and layout theory, and his advice about keeping a scrapbook of inspiration examples is really helpful, either a real scrapbook or something online like Flickr. He finishes off the section exploring why design is more than just creating attractive visuals.

Transcendence

In the final section Clarke brings it all together in some practical examples of how to take particular designs and mark them up using semantic XHTML and CSS. Of particular note is his extensive and creative use of lists for marking up particular content.

This section has the best explanation of relative and absolute positioning that I’ve read in any book on CSS. It’s really worth buying it just for that.

He finishes off the section with a look ahead to what CSS3 has to offer. I’m looking forward especially to the :nth-child pseudo-class which will make creating zebra-stripes on tables easy (currently available via hand-coding and jQuery), multiple background images for elements, and multicolumn layouts (currently available in Firefox via the -moz identifier).

Conclusion

I found this a really inspiring book which got the balance between code theory and practical design application right. I’d certainly recommend it to anyone who’s looking to improve their CSS coding or simply wanting inspiration about how to take their CSS to the next level.

Available on Amazon UK.

Web development process

Grey cubes arranged in rows -- one yellow cube

A few months back I sent a friend of mine, Peter, was looking for a book about building websites. So I sent him my copy of HTML, XHTML, and CSS Bible by Bryan Pfaffenberger et al.

I didn’t really use it very often, relying now on the O’Reilly definitive guides for XHTML and CSS. But there was one chapter, towards the end of the book, that I did find useful, particularly in the early days. That chapter outlined the Web development process.

  1. Defining your goals
  2. Defining your audience
  3. Developing competitive and market analysis
  4. Creating a requirements analysis
  5. Designing your site’s structure
  6. Specifying content
  7. Choosing a design theme
  8. Constructing the site (coding)
  9. Marketing the site

Notice how much planning is involved, and how far down the list actual coding is.

Finding the right CMS for my project

Content Management
Photo by ravennce

Sorry about the lack of proper blogging over the last few days. I’ll tell you what I’ve been doing: I’m looking for the right content management software for a website project I’m working on.

So I’m spending the evenings either trawling through web pages of documentation, trawling through pages of books about specific content management systems, or trying them out for myself either at www.opensourcecms.com or on the vendor’s own website.

What I’m looking for

Ease of use
The clients that I’m working with are not technically-minded — they are ordinary human, sentient, non-geek beings like you and … well, like you (probably) — so the CMS that I pick has to be easy to use.

So that rules out about half the opensource CMS applications out there just now.

Customizable
I need to be able to completely customize the site, as though it was a traditional, static site. I don’t want it to look like a portal with limited blocks of content. Also, it would be great if it could be fairly easily customizable using a combination of mostly XHTML and CSS. I don’t want anything that I have to use an unnecessary amount of PHP just to generate an XHTML document, or translate swathes of code into XLST or YYZ or whatever before it works.

So that rules out about another 25% of systems!

Site structure
I need to easily build the information architecture in it, and (preferably) have the CMS manage and automatically build the sub-navigation lists. It would also be great to be able to see the site structure in some visual form.

There go the rest!

Ideally, I’d like to build it in TERMINALFOUR SiteManager — I could have it built and finished in a couple of days with SiteManager. But unfortunately my clients don’t have a spare £50k lying around to spend on web software!

My current short-list

At the moment my short-list comprises of (in alphabetical order):

Drupal

http://drupal.org/

To be honest, Drupal is currently on my list simply because I haven’t yet ruled it out! But I’m attracted to Drupal and have heard good things about it.

I also own a book about Drupal: Building Online Communities with Drupal, phpBB, and WordPress and Drupal is the only one of the three that I’ve not properly delved into yet.

ExpressionEngine

http://expressionengine.com/

This came as quite a surprise to me, because ExpressionEngine (or EE) is a commercial product, with a very reasonable pricing plan: free for the blog edition or US$99 for the full version if you’re building a non-commercial, or non-profit, site.

I also really like the documentation (there’s lots of it, and some of it is video). But most importantly the back-end looks simple enough to use, and it appears to have the customization features that I’m looking for.
I look forward to checking this out some more …

WordPress

http://wordpress.org/

And of course: my beloved WordPress. WordPress fits almost all of my criteria … and with the creation of some cunning templates I think I could get my customized navigation to work. It may need some cunning PHP tweakery but I know that it would almost immediately fit the bill.

Conclusion

But that’s the thing … I know that I could most easily build the site that I want, with the features that I want with WordPress — it just gets better and better — but I didn’t want to simply take the easy road: I wanted to take a step back and evaluate the opensource CMS scene once again to see what else is out there, and have their back-end interfaces got any better.

Sadly, I think on the whole the answer is a resounding no. WordPress absolutely rocks … I’ve yet to fully understand the CMS model that Drupal uses, and if I end up not going with WordPress then it looks (at the moment) that ExpressionEngine is the way to go … and that’s a commercial product.

Latest version of Firefox broke our 404 page

Broken web page

The latest version of Mozilla Firefox 2.0.0.8, I’m sorry to report, broke a couple of our web pages yesterday.

UPDATE: This problem has now been fixed in Firefox 2.0.0.9: see Firefox 2.0.0.8 update to be updated

I noticed it just as I was about to go out for lunch. I was checking out a page on the University website and followed a broken link … to a broken 404 page.

Investigations

At first I simply suspected that it was due to some CSS tinkering that either my colleague or I had done. But neither of us had done any.

And then I discovered that it was working fine in Firefox 1.5, IE6, IE7, Opera 9 and Safari 3. It was working fine in my colleague’s installation of Firefox 2.0.0.7 … and then when he restarted the browser to allow its automatic update to version 2.0.0.8 it promptly broke.

So the culprit was indeed the latest incarnation of my favourite browser. How disappointing.

The problem

The way that the page is constructed is that there is a div that wraps the page’s main content. If I was recoding it today, I’d call it #contentWrapper; when I coded it 10 months ago, I called it #main.

Within #main there are three other divs, in order:

  1. #content
  2. #sidebar
  3. #related_content

#main then has a background image of part of the University crest. How much of the crest is displayed depends entirely on the height of its three internal divs.

Only, this appears to be the problem that Firefox 2.0.0.8 has highlighted/discovered/introduced* (*delete as applicable): it now does not recognize the height of the internal divs: #content, #sidebar and #related_content and so collapses, as you can see from the screenshot above.

The (temporary) fix

Introducing a min-height CSS attribute to the code has temporarily fixed the problem, but fixed the height of #main at 550px — enough for the 404, 401 and the front page, which all use that code.

Recoding

I’m now working on a more robust fix … in fact, I’m now working on recoding the entire site to make it more usable by the few ancient browsers that Google Analytics informs us are still being used to visit the site, such as Firefox 1.0, Firefox 1.5, and various older versions of Netscape and IE.

I had used a variation of Matthew Levine’s In Search of the Holy Grail method on A List Apart, mixed with a Dan Cederholm’s Faux Columns approach, for a number of reasons:

  1. I wanted the site to be as accessible as possible, and decided that placing the main page content as high in the source code as possible would be helpful.
  2. Do you know how difficult it is to achieve something as seemingly simple as creating a page layout with three equal-height columns?
  3. The ‘holy grail’ approach worked for almost everything we needed until it came to wanting to jump down to page anchors. We had a couple of A-Z lists and wanted to be able to click on ‘D’ to take us down to the ‘D’ entries. Instead, it pulled ‘D’ up to the top of the page and made A-C disappear completely!!
  4. We decided to fully support only modern browsers: IE6 and IE7, Firefox, Safari/Konqueror and Opera 8 and above. (While I don’t class IE6 as a modern browser it’s the one used on about 75% of all the university PCs so we had no choice but to support it.)

I guess I now need to be finishing writing these fixes sooner rather than later. I’m just a little disappointed that the latest version of my favourite browser has broken the code, while Safari, Opera 9 and even IE7 saw fit to render it as expected.

However, what I’m not entirely certain about is whether Firefox is now simply rendering the code as it should be (in other words, I’d missed a trick with my code) or whether this genuinely is a fault with Firefox’s rendering. Time will tell.

Literally the middle of nowhere

Jane and I were looking online to see where we might spend a couple of nights this week. So we checked out the Visit Scotland website for accommodation in the Highlands.

Location/Map

We found a nice place called Braelangwell House on The Black Isle, clicked on the “Location/Map” button and were faced with this sorry excuse for a map:

A map, showing a box in the middle of nowhere

What possible use is that?!

(What is perhaps even worse is that on my main PC I can’t even see the map, in Firefox, IE or Opera! The site is telling me that I don’t have JavaScript enabled. I clearly do! Some terrible scripting there methinks.)

Getting there

So instead we turned to the “Getting there” page. It offered two options:

  • Getting there from the Information Centre
  • Getting there by Aeroplane

We’d want to get there by car … and not from the Information Centre (wherever that is!!).

We’ve booked elsewhere.