The Tour of the North website.

Prep

The planned route was a 5-day zig-zag from Lancaster to Scarborough, taking in the finest riding available.

Before heading north I encouraged all but the least tech member of our 4-man team to get on Twitter and get their heads around hashtags and geo-located tweets. Three of us, thankfully, had iPhones, which made this pretty easy.

Navigation

Tom was in charge of navigation: in addition to route maps, he brought with him the GPS Motion-X app for iPhone, which records detailed route data including distance, time, speed, and 3-dimensional coordinates (with elevation).

After each day’s leg was completed, Tom emailed the KML route data to all of us to ensure everything was backed up.

Website

The Tour of the North microsite has two components:

• a page built out from my existing blog at http://www.legsfeelingnopressure.com/the-tour-of-the-north/
• a dedicated map page with geolocated photos and tweets at http://www.legsfeelingnopressure.com/totn-map

The blog page features some neat CSS3 transitions, scrolling elevation charts and a lightbox to display the Flickr images. The trickiest element by far was processing the KML data to display accurately on the maps, and then using the Flickr and Twitter APIs to add photos and tweets to the dedicated map page.

Mapping the ride: a Google Map with plotted KML routes, Flickr photos and tweets.

Mapping

Creating the maps involved various stages:

• Cleaning up the Motion-X KML data – Motion-X adds quite a lot of extraneous cruft to its exported KML route files, including Motion-X logos and route data that is loaded into Google Maps info windows by default.
• Repairing KML files where necessary – we suffered a technical malfunction on day 2, which resulted in a gap in the coordinates (it loos like we teleported). I had to populate the KML with dummy coordinates.
• Hosting KML files on Amazon S3 – so they load super-fast.
• Programming the Google Maps API to plot the KML overlays onto the maps.

Twitter & Flickr APIs

I downloaded each tweeter’s JSON for the 5 days of riding and combined them into a single .json file to reduce file size and speed up the rendering of the markers onto the map.

// get a combined stream of tweets, downloaded from Twitter immediately after the trip
	$.getJSON('js/combined.json', function(data) {
		for (index in data) addTweetMarker(data[index]);
	});

Because the main map needs to access more than 20 tagged photos from Flickr, I had to use the Flickr API with a key (check the source code). Also, of course, any photos uploaded to Flickr from a standard camera without geodata had to be manually added to Flickr’s (not very detailed) maps – harder than it sounds when you’re talking about a hillside in the Dales.

Elevation charts

I stumbled across a really awesome online tool called GPS Visualiser which converts .gps and .kml files into all kinds of things, including profile graphics.

Future developments

• Swap out the Daytum iframes for some javascript graphs using Flot or Sparklines.
• Fix the map so that the Flickr info windows display the photo author and link to the original on Flickr.
• Go on another, similar trip and set all this up in advance with live tweets and route-plotting.

Posting content on WordPress is almost too easy. You paste text into a box and click publish, and your post is instantly pushed to your thousands of Twitter followers. Then you check the published post and find a grammatical war-zone…

Being an unashamed stickler for textual accuracy, I’ve put in place a system to catch occasional lapses by my team of WordPress content editors at LCF. Here’s how it works.

Step 1: Status notifications

Download and install the WP Status Notifier plugin. This plugin is in charge of sending emails to and from contributors and a specified approver when the status of a piece of content changes. The settings screen (Settings > Status Notifications) should look like this (fill in your admin email address of course):

WP Status Notifier settings panel.

Step 2: Roles and Capabilities

First of all, read up on the Roles and Capabilities documentation in the WordPress Codex. Next, install the Capability Manager plugin. You now have to configure the plugin to ensure that all those users whose posts you want to moderate are prevented from doing so automatically. Go to Users > Capabilities.

Most of my contributors are in fact WordPress ‘editors’ – and by default they can publish posts and pages. Therefore we need to uncheck these capabilities from the editor capabilities table.

Managing roles and capabilities in WordPress.

I would recommend installing the Roles and Capabilities plugin in any case – it’s often useful to strip out options and menus where they’re not needed, or to give certain capabilities to a user you don’t necessarily want to make an admin.

Step 3: Moderate and go

Provided you’ve configured your users’ capabilities correctly, you should now receive an email whenever a post is ready for approval. This will happen the first time a user clicks ‘Save’ (be wary here about jumping in to approve instantly – the user might still be editing the content). Once you’ve had a chance to check the content and click Publish, the author will receive a confirmation email.

I needed to increase the memory limit for PHP because my WordPress Next Gen gallery plugin was throwing failure errors when attempting to batch-resize thumbnails. Why 33MB of memory is required to resize a 100KB image is anyone’s guess – but there was no way around it.

To change files situated above the /www level in your server tree, or to change folder permissions, you need to access your server via ssh, then switch to the root user. It’s really easy, but it’s incredible how long it’s taken me to learn this. Thanks to Sam Oliver for helping the penny drop.

For info the server I’m using is Apache on Ubuntu.

Gaining root access

Typically, when using Terminal, you will not be able to do:

$ ssh root@your-domain.com

You have to start by going in as another user with non-root privileges, e.g.

$ ssh joe@your-domain.com

I guess it depends what users you have created on the server in the first place – I don’t know, I didn’t set mine up.

Once you’ve logged in as joe with joe’s password, you can then type:

# su

then [ENTER], then your root password. You should then see something like:

root@your-domain:/home/dir#

Modifying php.ini

If you have sftp access to your server, then you can find out where php lives on your server. Or, again, you can use Terminal. First of all, type:

# cd

to return to the topmost root level. Now type:

# cd /etc/php5/apache2

# ls

This list command should bring up a list of files in the apache2 folder: conf.d and php.ini. Now type:

# sudo pico php.ini

The php.ini file will now be displayed inside Terminal. You can key down and edit the line:

memory_limit = 16M      ; Maximum amount of memory a script may consume (16MB)

Increase it to 48M. Finally, you need to restart Apache by typing:

# /etc/init.d/apache2 restart

There are a profusion of (often very full-featured and cool) WordPress plugins out there providing geolocation or geotagging functionality. However, none of them really fit my purposes for any or all of the following reasons:

• they use geolocation data from the blogger who is writing the post, as opposed to manually-entered coordinates.
• they are focussed on providing mapping within WordPress, as opposed to generating a feed for use externally.
• they added unnecessary calls to Google or Yahoo scripts in wp_head().
• they used out-of-date versions of the Google Maps API.

gPress is currently the most promising-looking complete package for mapping in WordPress, and it apparently offers geoRSS functionality, although I haven’t checked it out yet. However, I simply wanted to provide a geoRSS feed without any additional baggage, besides wanting to build the nuts and bolts myself.

Generating a new feed

In functions.php, add the following:

add_action('init', 'my_maps_init');

function my_maps_init() {
    add_feed('georss','my_georss_feed');
}

function my_georss_feed() {
    load_template( TEMPLATEPATH . '/feed-georss.php' );
}

Now you can create your new feed-georss.php template. I based my code on the output from Flickr’s geoRSS feed, as used in this example. It contains latitude and longitude coordinates from two new custom fields set up in the post itself. Note the special RSS template tags e.g. the_title_rss() that strip out tags and convert characters to present the raw data via RSS.

Assuming you have some posts ready with geo-coordinates in custom fields, you can test the feed output at:

http://www.yourblog.com/?feed=georss

If you are only adding coordinates to posts in certain categories you can also use e.g.:

http://www.yourblog.com/category/maps/?feed=georss

Google Maps

Assuming your feed is working correctly, you can now get your geotagged posts to show up on a Google map using a KML Layer. You’ll need to read up on the documentation first, but for reference here’s the relevant snippet of my code:

var kmlLayerOptions = {
	map: map,
	preserveViewport: true,
	suppressInfoWindows: true
}

var georssLayer = new google.maps.KmlLayer('http://blogs.fashion.arts.ac.uk/snapshot/category/international/?feed=georss', kmlLayerOptions);

google.maps.event.addListener(georssLayer, 'click', function(kmlEvent) {
	showKmlWindow(kmlEvent, georssLayer);
});

function showKmlWindow(e, layer) {
	infoWindow.close();
	infoWindow.setPosition(e.latLng);
	infoWindow.open(map);
	infoWindow.setContent('<h3>' + e.featureData.name + '</h3>' + e.featureData.description);
}

Note that, in order to manipulate the infoWindow content when each marker is clicked, you have to suppress the infoWindows that open automatically. You then catch the kmlEvent generated on click, and then do what you will with the KmlFeatureData object.

• View London College of Fashion activity map

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: true,
    onReady: function() {
		Showtime.MasterPanel = new Showtime.MasterPanel();
    }
});

To show a tablet startup screen for the first few seconds after clicking the button on your home screen, you need to do 2 things:

1. Create a portrait-orientation .png with dimensions 768px x 1004px. It only works in portrait – so far.
2. Put it in your web root folder (putting it in any other folder doesn’t seem to work).

You can use absolute URLs, but for some reason I had problems trying to use relative URLs like ‘../img/touch/tablet_startup.png’. You can also name the file whatever you like, and it still works.

Pink

LCF’s online colour was pink since before I arrived in 2006. It had its place in the 6-way University of the Arts London colour spectrum – alongside blue, red, gold, green, orange, and the base colour, a slate blue-grey.

Pink version

Truth be told, I never personally disliked the pink – it worked better than some other College colours in providing contrast against the base colour. However, it seemed that many people here didn’t like the pink. They felt it was dated (since we had long ago abandoned pink in our offline publications), and no longer represented the LCF brand. Occasional grumbles found focus at an afternoon meeting in early November – so I did a quick on-the-spot mock-up in Firebug, and hey presto, people loved it.

More detailed samples followed. We experimented – in fact we’re still experimenting – with which tints to use as highlight and rollover colours. But the ‘key stakeholders’ were on board with party streamers and paper hats, so we went for it.

Black

Black version

So far the response on Twitter is 3:2 against the switch. Clearly we need more data – please @LCFLondon your thoughts.

Update @ 22 Dec 2010

So… as you can see the LCF website is no longer black. Despite a lot of support within the College, the black scheme was thought by certain members of the central University communications team to be too out of keeping with the existing brand identity. Our response was that, if we couldn’t develop our design any further, we were better off reverting to the original.

Hopefully at some point in the future we will be able to assert our own College brand identity independently of the University’s federal structure. However, this will require a culture shift throughout the organisation and probably a reappraisal of the entire website architecture.

By extending the Contact Form 7 plugin with the Campaign Monitor Addon, and with a little help from my colleague Mouhannad Al-Sayegh, I was able to unlock a pretty powerful combination that enables all kinds of list management functions using the Campaign Monitor API.

Campaign Monitor

To start you’ll need an account with Campaign Monitor, and a demo list for testing purposes.

Contact Form 7

This plugin is super-flexible and easy to use if you know a little HTML and the rudiments of building forms. If you haven’t already you’ll need to install the plugin and create a demo form.

Campaign Monitor Addon

When installed and activated, this plugin appends a module to your form. No need for me to go into detail here – read Joshua Bettigole’s instructions and download his excellent manual on the steps required.

Connecting to Campaign Monitor

By default the Campaign Monitor Addon provides two fields for subscriber data:

• Subscriber Email
• Subscriber Name

It takes these fields and feeds them to the subscriberAdd method:

$result = $cm->subscriberAdd($email, $name);

Custom fields

So far so good – but I wanted to process additional fields from the form. Campaign Monitor allows you to add custom fields to lists (e.g. business name, country, gender, website URL, etc.) so I wanted to harvest this data directly from my contact form.

First of all I needed to modify cf7-campaignmonitor.php. I added new form fields to the existing list:

<div class="mail-field">
        <label for="wpcf7-campaignmonitor-email"></label>
<input id="wpcf7-campaignmonitor-email" class="wide" name="wpcf7-campaignmonitor[email]" size="70" type="text" value="&lt;?php echo esc_attr( $cf7_cm['email'] ); ?&gt;" /></div>
<div class="mail-field">
        <label for="wpcf7-campaignmonitor-name"></label>
<input id="wpcf7-campaignmonitor-name" class="wide" name="wpcf7-campaignmonitor[name]" size="70" type="text" value="&lt;?php echo esc_attr( $cf7_cm['name'] ); ?&gt;" /></div>
<div class="mail-field">
        <label for="wpcf7-campaignmonitor-accept"></label>
<input id="wpcf7-campaignmonitor-accept" class="wide" name="wpcf7-campaignmonitor[accept]" size="70" type="text" value="&lt;?php echo esc_attr( $cf7_cm['accept'] ); ?&gt;" /></div>
<!-- Additional form fields -->
<div class="mail-field">
        <label for="wpcf7-campaignmonitor-business"></label>
<input id="wpcf7-campaignmonitor-business" class="wide" name="wpcf7-campaignmonitor[business]" size="70" type="text" value="&lt;?php echo esc_attr( $cf7_cm['business'] ); ?&gt;" /></div>
<div class="mail-field">
        <label for="wpcf7-campaignmonitor-website"></label>
<input id="wpcf7-campaignmonitor-website" class="wide" name="wpcf7-campaignmonitor[website]" size="70" type="text" value="&lt;?php echo esc_attr( $cf7_cm['website'] ); ?&gt;" /></div>

These can obviously be re-ordered to suit. Next you need to modify the main wpcf7_cm_subscribe() function below:

$email = preg_replace_callback( $regex, $callback, $cf7_cm['email'] );
$name = preg_replace_callback( $regex, $callback, $cf7_cm['name'] );
// initialise new field variables
$business = preg_replace_callback( $regex, $callback, $cf7_cm['business'] );
$website = preg_replace_callback( $regex, $callback, $cf7_cm['website'] );
// create array for additional fields
$extraFields = array('Business Name' => $business, 'Business Website' => $website);

Note that ‘Business Name’ and ‘Business Website’ should match the custom field names you have created in Campaign Monitor.

Finally, we need to modify the method call. In campaignmonitor.php are listed a number of PHP wrapper functions for Campaign Monitor API methods. It’s possible to use different method calls in place of subscriberAdd – for example we needed to use subscriberAddWithCustomFields. Our previously defined $extraFields variable follows the standard $email and $name:

$result = $cm->subscriberAddWithCustomFields($email, $name, $extraFields);

Campaign Monitor will check the email address against a given list. If it already exists, any new data will replace what is already in the record. Note that you need to re-supply any existing data, or it will be wiped. You may need to run a few tests to make sure your form submissions are putting the additional data in the right places.

Checkboxes etc.

The above example demonstrates form submission using custom fields with single values. But what happens when you want to process a set of checkboxes into a ‘Multi-option’ custom field in Campaign Monitor?

$checkboxes = preg_replace_callback( $regex, $callback, $cf7_cm['checkboxes'] );

The above line extracts the cleaned-up data from the form submission, but stores it as a string e.g. ‘category 1, category 2, category 3′ etc. What I wanted was to put each comma-separated value into its own option inside of a multi-option custom field – so an additional step was required:

$checkboxes = preg_replace_callback( $regex, $callback, $cf7_cm['checkboxes'] );
// explode the string into an array
$checkboxArray = explode(", ", $checkboxes);
// create array for additional fields
$extraFields = array('Business Name' => $business, 'Business Website' => $website, 'Categories' => $checkboxArray);

This is really just scratching the surface of what could be developed using these tools – but hopefully it helps people trying to move beyond the standard tutorials and installation instructions already out there.

When using Terminal to navigate your folder system, you will occasionally run into a folder with a space in its name, like /Application Support. Trying to access a folder, e.g.:

[Alastair-Mucklows-Computer:~/Library] alastair% cd Application Support

will trigger the error:

cd: Too many arguments.

The solution is to wrap the folder name in quotes, like so:

[Alastair-Mucklows-Computer:~/Library] alastair% cd "Application Support"

• great black, white and gold colour scheme (with yellow highlights)
• a well-ordered grid
• elegant, uncluttered navigation
• chunky footer
• plenty of whitespace and breathing room around the text

GQ.com gets a makeover.

Girls gallery page.

One thing – and leaving aside the xbox ad currently turning the home page background into a sea of green bubbles:

I’d be interested to know the rationale behind not using a similar jQuery carousel on the individual feature pages as implemented on the section pages. A fresh page-load for every image just feels so clunky these days, and there are surely AJAX solutions to allow a more fluid browsing experience whilst maintaining reasonable loading times.

So what’s the reason? Extra pages for serving extra ads? Image bookmarking? Concern about presenting high-quality images without a performance hit, especially on slower connections?

Finally – the typographical double act of Georgia and Arial is undoubtedly a classic combo (used by the Guardian and many, many others). But my guess is that with the gradual evolution of web typography, embracing the potential of the @font-face CSS rule and of Cufón, sites that use this staple set of traditional web-safe fonts will begin to look dated over the next few years.

Gumtree

Gumtree, ‘the UK’s biggest website for local community classifieds’, has changed a fair bit since I first started using it. I really admired the major redesign that happened (I guess) at some point in 2008: the familiar colour scheme and branding were incorporated into a much smoother experience, preserving the community feel whilst making everything a whole lot easier for the individual – whether posting, buying or selling. As I write it looks like the ‘classic’ Gumtree is again being superseded by a sexier incarnation.

The clean and effective Gumtree UI.

Is Gumtree the last word in classifieds? Sure: you post, the customers/tenants come running. But this time my response rate has been quite low – 2 physical viewings from 300+ hits on the website. Aside from the fact that this is January and the coldest winter for 30 years, and my room doesn’t have a radiator, what could it be?

Map view

I blame the gradual demise of the map view for property searches. Formerly on Gumtree, you could view a Google map displaying as many properties as your search terms allowed, with a little red tree marking each house, flat or garage. You could type in ‘London’ and get literally everything on offer. Admittedly, it used to make Safari go wonky, but it was more useable than not.

[Gumtree should correct me if I'm wrong here, but this is my hunch.] In the redesign, with the advent of monetised customer interactions (like paying £4 to have your ad ‘bumped’ up the listings), the universal map view was replaced by a map that only showed 30 properties per page (by default the top ones in whichever list), leaving the user to click to the next set. Clearly, this privileged the newer posts and incentivised posters to pay that £4 in order to get more hits.

The new Gumtree map view - now with green blobs.

I would like to see Gumtree reinstate the global, un-paged map – because I think it allows greater flexibility of search. Let’s say I wanted to view all properties, however recently posted, in a small area near Hampstead Heath. Instead of being able to zoom the map in and see every property, I would now need to page through 10 or more pages of results before a green blob popped up where I wanted it to. Not only that, but every time I load a new result set, the map zooms right out to accommodate all blobs – from Walthamstow to White City.

Sure, I could make my search terms more precise, but the beauty of the global catch-all map is that you don’t have to refine anything and thus risk missing somewhere that falls just outside of your terms – you just browse.

Globrix

If Globrix did flatshare, they would be my first choice. Theirs is the best property search interface bar none:

• awesomely granular search filters
• global map search (properties pop up as you drag the map)
• draggable price slider

Not to mention an abundance of stats and graphs on individual property pages, which display everything from median house prices in the area to typical crime rates.

Globrix's property map interface - with sliders!

The only problem with Globrix is the trade’s apparent lack of confidence in it. Being a search aggregator, it inevitably takes longer to update than estate agents’ own websites.