Mark’s (we)Blog 2.0

Posted on By Mark Wilson
This content is 17 years old. I don't routinely update old blog posts as they are only intended to represent a view at a particular point in time. Please be warned that the information here may be out of date.

Just under six months ago, I changed hosting providers and moved this blog from Blogger to WordPress. Ever since then it’s been tagged as Mark’s (we)Blog [v2.0β] but the time has come to remove the beta tag… after all I’m just one bloke doing this in his (limited) spare time so things are unlikely to ever be “finished” to the standard I would like!

So, after a few months of running the site on WordPress, were my initial impressions valid? Was it all worth it?

Yes, I think. It’s been hard work getting everything working the way I like it – I’ve had to edit every single post, categorising them and correcting markup issues (my own fault for not writing decent XHTML in the first place, although in the case of embedded video clips I’ve actually had to regress to a non-compliant solution).

Then, as I’ve edited every post there have been hundreds of pingback comments to approve (remembering to update the date and time on the comment to match when the post was originally published).

Editing the template to suit my needs has been great fun (and has really helped bring on my CSS skills) – Andreas Viklund (who wrote the original template) was very helpful in providing me with his original photograph so that I could produce a larger version (with help from my friend Alex) after I increased the width of the content. Alex also helped me out with a cell spacing issue on the few occasions where I used tables (in a semantically correct manner) with a little-known piece of CSS (border-collapse: collapse;).

One of the great things about WordPress is the extensibility of the platform – there are hundreds of plugins available and it’s these plugins that have allowed me to extend the functionality of the site, adding features such as external link highlighting, category tagging and control over meta tags (although I have stopped using others, such as Adsense-Deluxe as I found I could achieve the same result by editing my WordPress template) – at the time of writing, this is the list of plugins that I’m using:

There were also some other sites that provided advice/material for the site’s development (but not plugins):

There’s also really good support documentation for implementing code changes such as conditional tags (e.g. to allow sponsors’ advertisements to only appear on certain pages); however getting meaningful responses on the WordPress support forums can be pretty sporadic.

Of course, there is a downside to running on a self-hosted platform (cf. WordPress.com, Blogger, etc.) – I need to patch the software myself. Luckily, my web hosting provider uses the Fantastico system for installing popular applications (including WordPress) and I can use that to apply updates too (although even Fantastico is not immune from some issues… as I found when I upgraded to WordPress 2.2 – more on that in a moment).

I’ve also learnt some tricks along the way and I think it’s only fair that I post them here:

  • Firstly, after importing a large number of posts, I wanted to change the author. I can’t do that in bulk from within WordPress; however I did find a reference to using PHPMyadmin to run a SQL query and change the author for all posts on the database matching certain criteria – the query I ran in the SQL tab was UPDATE wp_posts SET wp_posts.post_author = "2" WHERE (((wp_posts.post_author)="1"));, where “2” is the ID of the new author and “1” is the ID of the current author.
  • Another day, after making a mistake editing the comment submission code, I found that all of the new comments were being attached to one post. I needed to move the comments to the correct posts by browsing the wp_comments table and editing the corresponding comment_post_id.
  • I also wanted to display the allowed (X)HTML for comments and didn’t know the correct function call (it’s <?php echo allowed_tags(); ?>), then, to change the tags that are allowed, I needed to edit the kses.php file (and will need to keep that updated after WordPress upgrades).
  • I’ve also found that, although I had my permalink structure set to /%year%/%monthnum%/%postname%.htm in order to maintain the links from the old (Blogger) site, the postname is defined by the slug and the slug must be unique for the entire site, so some posts have had -2 added to the end of their name (I used .htaccess redirects to manage this but didn’t spot the changes until after Googlebot had reported the links as not found).

It’s not all been plain sailing though.

  • For example, I found that not all of my comments had been transferred from the old site and had to copy and paste the missing ones manually, then go back and edit the author details, date and time. Then, there was a period of about a month when I couldn’t generate pingbacks (nor could certain friends leave a comment) – it turned out to be caused by a single comment which was accidentally dated in the future and once that was changed everything jumped into life.
  • Then, there is the blog spam, thankfully handled pretty well by Akismet although I no longer have time to check for false positives.
  • The built-in WordPress search function does not seem to work as well as the Google Search facility that I provided on the old site. I hoped that adding the full text search for the related posts plugin (ALTER TABLE `wp_posts` ADD FULLTEXT `post_related` (`post_name` ,`post_content`)) would improve this but it doesn’t seem to have helped.
  • Also, after the WordPress 2.2 upgrade, I noticed that characters like the UK currency symbol (£) were appearing as odd characters – a simple edit to the wp-config.php fixed that issue (commenting out define('DB_CHARSET', 'utf8'); and define('DB_COLLATE', '');) – further explanation of this fix can be found at My Digital Life although I haven’t been brave enough to convert the character set and collation yet.

I got there in the end – all the posts have categories assigned and I’m pretty sure that most of the CSS bugs are fixed now so am glad to say that the site is out of beta. Out of beta – but never finished!

So, that’s v2.0 but what next? Well, there are a few bugs that I’ve not yet fixed:

  • The print stylesheet does not work consistently across browsers
  • Some graphics are wider than the main content column and need to be resized.
  • External link identification is not accurate with .co.uk sites (and Internet Explorer places the external link icon in the wrong place)
  • Some graphics used for tracking page impressions (for advertisements) need to be removed.

I may also provide options for alternative themes (I particularly like Dean Robinson’s redoable theme), I’d like to sort out the poor searching, there are some accessibility and user experience enhancements that I’d like to implement and I’m bound to spot more snazzy plug-ins to add to the site. I’d like to use my own photos in the masthead and I also need to do some code optimisation as the page load times are a bit high and my bandwidth usage is rising faster than planned (more visitors are a good thing and ascomi are always happy to help out when I get close to my bandwidth limit but I’d like to bring it back under control).

I always like to hear from people who use the site – feel free to contact me and suggest enhancements, or to provide feedback/bug reports on the site.

Now, if only I could think of a better name than Mark’s (we)Blog (which was only ever intended as a working title and more than three years later it still hasn’t been replaced)! Any ideas? How about “Confessions of an infrastructure architect: echo $HEAD > dev/web”?

Corrupt Firefox profile preventing access to the WordPress visual editor

Posted on By Mark Wilson
This content is 17 years old. I don't routinely update old blog posts as they are only intended to represent a view at a particular point in time. Please be warned that the information here may be out of date.

For the last few weeks (ever since one of the all-to-frequent Firefox crashes that I experience) I’ve been unable to use the WordPress visual editor to write my posts.  If I switched to another machine then everything was fine – the problem only existed in Firefox on one machine.  After seeking help on the WordPress support forums, someone tactfully suggested that I ask for help on the Mozilla forums… I wasn’t hopeful (as this problem seemed to be specific to WordPress); however the advice I was given was spot-on – it turns out that my issue was a corrupted Firefox profile.

After creating a new profile and copying key settings from my old profile (I copied bookmarks.html, certs8.db, cookies.txt, formhistory.dat, history.dat, hostperm.1, key3.db, mimeTypes.rdf and signons2.txt), I was able to relaunch Firefox and everything was back to the way it should be, complete with browser history, bookmarks, cookies, stored password, etc.  It should also be possible to copy items such as user preferences, search plugins and extensions but that’s not recommended if there were problems with the previous profile, so I reinstalled the couple of Firefox add-ons that I do use (the British English Dictionary and Web Developer extensions).

Adding a meaningful description to web pages

Posted on By Mark Wilson
This content is 17 years old. I don't routinely update old blog posts as they are only intended to represent a view at a particular point in time. Please be warned that the information here may be out of date.

One of the things that I noticed whilst reviewing the Google results for this site, was how the description for every page was shown using the first text available on the page – mostly the alternative text for the masthead photo (“Winter market scene from the small town of Porjus in northern Sweden – photograph by Andreas Viklund, edited by Alex Coles.”):

Screenshot showing duplicate descriptions

Clearly, that’s not very descriptive and so it won’t help much with people finding my site, linking to me, and ultimately improving the search engine placement for my pages, so I need to get a decent description listed for each page.

The WordPress documentation includes a page on meta tags in WordPress, including an explanation as to why they aren’t implemented by default (my template did include a meta description for each page which included the weblog title and tagline though). Even though meta tags are not a magic solution to search engine placement, I wanted to find a way to add a meaningful description for each page using <meta description="descriptionofcontent"> and also <meta keywords="pagecontext"> (although it should be noted that much of the available advice indicates that major search engines ignore this due to abuse). Fortunately there is a WordPress plugin which is designed to make those changes – George Notoras’ Add-Meta-Tags. There’s plenty of speculation as to whether or not Google actually uses the description meta tag but recent advice seems to indicate that it is one of many factors involved in the description shown in search results (although it will not actually affect positioning).

I already had meta tags in place for content-type, robots, and geolocation but I added some more that I was previously using HTML comments for:

<meta http-equiv="content-language" content="en-gb" />
<meta name="author" content="Mark Wilson" />
<meta name="generator" content="WordPress" />
<meta name="publisher" content="markwilson.it" />
<meta name="contact" content="webmaster@markwilson.co.uk" />
<meta name="copyright" content="This work is licenced under the Creative Commons Attribution-Non-Commercial-Share Alike 2.0 UK: England & Wales License. To view a copy of this licence, visit http://creativecommons.org/licenses/by-nc-sa/2.0/uk/ or send a letter to Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA" />

Incidentally, a comprehensive list of meta tags and an associated FAQ is available at Andrew Daviel’s Vancouver webpages.

After checking back a couple of weeks later, the same search returns something far more useful:

Screenshot showing duplicate descriptions

Unfortunately my PageRank has dropped too, and it’s possible that the duplicate entries for http://www.markwilson.co.uk/ and http://www.markwilson.co.uk/blog/ are causing the site to be penalised – Google’s Webmaster guidelines say “don’t create multiple pages, subdomains, or domains with substantially duplicate content. The presence of those duplicate entries is actually a little odd as checking the server headers for http://www.markwilson.co.uk/ reveals an HTTP 301 response (moved permanently), redirecting to http://www.markwilson.co.uk/blog/.  Of course, it could be down to something entirely different, as PageRank is updated infrequently (there’s more information and links to some PageRank anaylsis tools at RSS Pieces but I use Page Rank Checker) and there have been a lot of changes to this site of late… only time (and building the volume of backlinks to http://www.markwilson.co.uk/blog/) will tell.

Modifying wp-mobile to create content that validates as XHTML-MP

Posted on By Mark Wilson
This content is 17 years old. I don't routinely update old blog posts as they are only intended to represent a view at a particular point in time. Please be warned that the information here may be out of date.

Yesterday, I wrote a post about using Alex King’s WordPress Mobile Edition plugin (wp-mobile) to generate WordPress content formatted for the mobile web. wp-mobile makes the code generation seamless; however I did have a few issues when I came to validating the output at the ready.mobi site. After a few hours (remember, I’m an infrastructure bod and my coding abilities are best described as weak) I managed to tweak the wp-mobile theme to produce code that validates perfectly.

Screen grab from the ready.mobi report for this website

The changes that I made to the wp-mobile index.php file can be seen at Paul Dixon’s PHP pastebin but are also detailed below:

  1. Add an XHTML Mobile Profile (XHTML-MP) document type descriptor: <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">. Incidentally, I didn’t include an XML declaration (which looks like: <?xml version="1.0" charset="UTF-8" ?>) as it kept on generating unexpected T_STRING PHP errors and it seems that it is not strictly necessary if the UTF-8 character set is in use:

    “An XML declaration is not required in all XML documents; however XHTML document authors are strongly encouraged to use XML declarations in all their documents. Such a declaration is required when the character encoding of the document is other than the default UTF-8 or UTF-16 and no encoding was determined by a higher-level protocol.”

    W3C recommendation for XHTML 1.0

  2. Add some caching controls: <?php header ("Cache-Control: max-age=10 "); ?>. 10 seconds is a little on the low side but it can be changed later and it means that the caching is unlikely to affect testing of subsequent changes.
  3. Remove <meta name="HandheldFriendly" value="true" />: this code doesn’t appear to do anything and is not valid XHTML-MP – media="handheld" can be used instead when linking the stylesheet (see below).
  4. Change the stylesheet link method: although <style type="text/css">@import url("<?php print(get_stylesheet_uri()); ?>"); </style> should work, I found that the validator was only completely satisfied with the form <link href="<?php print(get_stylesheet_uri()); ?>" rel="stylesheet" type="text/css" media="handheld" />.
  5. Provide access keys using accesskey="key" inside the <a> tag for each of the main menu items.
  6. Surround <?php ak_recent_posts(10); ?> with <ul> and </ul> tags – this bug took the most time to track down and was the final change necessary to make the markup validate as XHTML-MP.

I also made some minor changes in order to fit my own page design (adding a legal notice, etc.) but in order to get the elusive 100% in the report for this site, there was one minor tweak required to style.css: removal of the height: 1px; rule for <hr>. I understand why it was there but the validator didn’t like it, suggesting that relative units should be used instead (I would argue that 1px is far more logical for a horizontal rule than the use of relative units but this change resulted in another pass on the report).

Right, enough of these mobile diversions – I’d better focus my development efforts on getting the rest of this site to be fully XHTML compliant…

Publishing WordPress content on the mobile web

Posted on By Mark Wilson
This content is 17 years old. I don't routinely update old blog posts as they are only intended to represent a view at a particular point in time. Please be warned that the information here may be out of date.

A few nights back, I was reading a .net magazine article about developing websites enabled for mobile content.

As my blog is written primarily for technical people, it seems logical to assume that a reasonable proportion of its readers could make use of access from a mobile device, especially as the magazine article’s author, Brian Fling, believes that:

“[the mobile web] will revolutionize the way we gather and interact with information in the next three years”

Web 2.0 Expo: From Desktop to Device: Designing the Ubiquitous Mobile Experience

Basically, the catalyst for this comes down to a combination of increasing network speeds and mobile services, combined with a falling cost in the provision of data services.

It seems that there are basically two schools of thought when it comes to designing mobile content for the web: some (most notably the W3C) believe that content should be device agnostic; whilst that approach is perfectly laudable (a mobile browser is, after all, just another form of browser) others believe that the whole point of the mobile web is that device-specific functionality can be used to provide services that wouldn’t otherwise be available (e.g. location-based services).

Brian’s .net magazine article explains that there are for major methods of mobile web publishing:

  1. Small screen rendering
  2. Programatically reformatting content
  3. Handheld style-sheets
  4. Mobile-specific site.

As we work down the list, each of these methods is (potentially) more complex, but is also faster. Luckily, for WordPress users like myself, Alex King has written a WordPress Mobile Edition plugin, which applies a different stylesheet for mobile browsers, publishing a mobile friendly site. Using the Opera Mini live demo to simulate a mobile browser, this is what it did for my site:

This website, viewed in a simulated mobile phone browserThe mobile-optimised version of this website, viewed in a simulated mobile phone browser

The first image shows the content as it would be rendered using the default, small screen rendering – not bad but not exactly ideal on a small screen – but the second image is using the WordPress Mobile Edition plugin to display something more suitable for the mobile web. Not only is the display much simpler and easy to navigate on a handset, but the page size has dropped from 28KB to 1KB. Consequently, I was a bit alarmed when I used the ready.mobi site to generate a report for this site, as the site only scored 3 out of 5 and was labelled as “will possibly display poorly on a mobile phone”. Even so, the user experience on my relatively basic (by modern standards) Nokia 6021 was actually quite good (especially when considering that the device is not a smartphone and it failed the handheld media type test) whereas viewing the normal (non-mobile) version generated a “memory full” error.

So, it seems that preparing a WordPress site for the mobile web is actually pretty simple. I have a couple of tweaks to make in order to improve the ready.mobi test results (quick fixes ought to include support for access keys and working out why the page heading is being tagged as <h3> when the standard site uses an <h1> tag) but there is certainly no need for me to develop a separate site for mobile devices, which is just as well as it’s taking me ages to finish the redevelopment of the site (and I can save myself a few quid by not registering the markwilson.mobi domain)!

Links
The following links may be useful to anyone who is looking at developing content for the mobile web:

It may also be worth stopping by at Keni Barwick’s blog on all things mobile.

Bye bye Blogger – Hello WordPress!

Posted on By Mark Wilson
This content is 17 years old. I don't routinely update old blog posts as they are only intended to represent a view at a particular point in time. Please be warned that the information here may be out of date.

Regular visitors to this site may have noticed that over the last 24 hours, the site has developed a totally different look and feel.

I will start posting content that isn’t about the redevelopment of this site again soon but the last couple of weeks have been pretty tough on the self-hosted IT front. First I started to have problems with e-mail delivery to certain hosts, then I accidentally dropped my domain off the Internet and at the same time, I’ve been busy moving this website to a new content management system and hosting provider.

For some time now, I’ve been working on rewriting the site using (semantically correct) XHTML and CSS but my lack of design skills (combined with a lack of spare time) were holding the project back. Ironically, it was my decision to dump Blogger as a content management system (a not insubstantial project in its own right) that has pulled everything together.

WordPress logoI’ve heard a lot of good things about WordPress, which is available as a hosted service or as software to run on a server under your own control, and I’ve chosen the latter option. In fact, over the last couple of weeks, the whole site has been migrated to a WordPress installation on ascomi‘s webspace.

It’s quite strange – most of the technology on which I’ve built my career is from Microsoft – yet I’m writing this post on a Mac and publishing it on a site which uses the Linux-Apache-MySQL-PHP (LAMP) software stack (actually, the server is running FreeBSD, so it’s really FAMP but that’s just being pedantic).

I had originally planned to run the old and new sites in parallel until all the issues were ironed out, but in practice it’s not been that straightforward as I tried to maintain the URL structure. Late last night I cut everything across to the new site but like so much on the ‘net today, Mark’s (we)Blog 2.0 is in beta!

So, why’s it been so complex? Well, so far, this is what I’ve done:

  1. Order new hosting space and upload the content from old website.
  2. Transfer/register all domain names and direct them to the new hosting provider’s name servers.
  3. Edit .htaccess to rewrite requests from secondary domain names (or without the www. prefix) to http://www.markwilson.co.uk/.
  4. Install and configure WordPress – pretty straightforward with a Fantastico scripted installation.
  5. Customise WordPress – pick a template (Andreas Viklund’s WP-Andreas01), install and activate plug-ins (WP Suicide, New Blogger Import).
  6. Commit WordPress Suicide, in the process wiping out default posts etc. but leaving behind users, user metadata and options.
  7. Migrate Blogger content to WordPress, maintaining the existing URL structure – this was the bit that scared me most and actually it was really simple (hosted WordPress users can also directly import from Blogger). First of all I needed to switch Blogger over to host my blog at Google (BlogSpot) – as all the previously-published content was still available on my server then users would not have seen any change. Next, I used the New Blogger Import plugin to suck over 700 posts and 600 comments out of BlogSpot and into WordPress. I had an issue with the formatting of the URLs but Ady Romantika very kindly updated his script for me and the updated version ran very smoothly (a couple of posts were missed but I found them from an XML sitemap generator broken links report and migrated them manually). It’s worth noting that Ady’s script also leaves the Blogger post ID as a comment in each migrated post. Once migrated, I switched Blogger back to FTP publishing and ran the old and new sites in parallel for a short time but found that to be too much work and have since removed the Blogger site from the server (an archived version of the old site will remain in place for a few weeks at least).
  8. Install and activate the Category Tagging plugin. Start to assign categories to posts and create a new post, which removed the PHP error messages that originally appeared (Warning: array_keys(): The first argument should be an array in /usr/home/username/public_html/blog/wp-content/plugins/category-tagging.php on line 95 and Warning: Invalid argument supplied for foreach() in /usr/home/username/public_html/blog/wp-content/plugins/category-tagging.php on line 96).
  9. Make more template formatting changes; deactivate WP Suicide and New Blogger Import; install and activate Fancy Archives and AdSense Deluxe; register for a WordPress API key and activate Akismet.
  10. Create new pages to replace the non-blog content from the old site (and redirect requests using .htaccess).
  11. Remove the old content and generate a new XML sitemap.

Looking back, it’s odd that one of the things holding back the redevelopment of the original site was the lack of a good design – as it happens the WordPress template that I chose is also available as a standard website template and there are loads of good-looking templates at freecsstemplates.org and at Open Source Web Design.

At the moment I’m still adding categories and tweaking the formatting (there are some CSS glitches to iron out – hence the beta tag) but I’m hoping that within a few weeks the site will be pretty much there. I also plan to go back through the template code and implement some of the CSS tips that I’ve been picking up from the old .net magazines that Alex gave me as well as two excellent books:

If all goes to plan, subscribers shouldn’t have to change any settings, the URLs for the content should be preserved, the quality of the content should improve and my search engine placement should be maintained.

Bye bye Blogger?

Posted on By Mark Wilson
This content is 17 years old. I don't routinely update old blog posts as they are only intended to represent a view at a particular point in time. Please be warned that the information here may be out of date.

Recently, I’ve written a couple of posts which hinted at the problems I’ve been having since I was involuntarily upgraded to Blogger‘s new platform and tonight was the final straw. For a while now, I’ve wanted to implement a category system for posts and a couple of months back I did actually start to tag my posts at del.icio.us in preparation for following Peter Chen’s advice for creating Blogger categories.

Unfortunately, the delicious2Blogger (D2B) method does not work with the new Blogger and to implement Blogger’s label system (in order to put a tag cloud on the site using phydeaux3’s label cloud code) I’ll need to upgrade my “classic template” to a “layout”. The problem is, that layouts are not supported for externally hosted sites that are published using FTP (like mine), so I’ll be stuck with my existing template, which has been broken since the upgrade.

Seeing as Blogger seems to be so full of limitations and I’m in the middle of a site redesign anyway, I’m seriously considering a move to a WordPress-based site – as long as I can preserve all the links and comments. I’ve also been having some issues with my hosting provider (and the fact that they have recently been bought by BT doesn’t fill me with joy either) so I’m probably going to move away from them too.

I’ll be trying to minimise the impact on blog readers and hope to maintain the domain name and all the links, but please bear with me if there are a couple of hiccups along the way.