Tetrahedra

OpenAid WordHack

By John | Published July 19, 2010

The WordHack at WordCamp UK in Manchester this year was really exciting. By 4.30 pm on day 2 the team had created a stunning WordPress site that:

Reads and transforms XML data on DFID aid projects into a format ready for import into WordPress
Imports the XML into a WordPress Custom Post Type for each DFID aid project, creating new post versions if the source data has changed
Links comments to the post version, so that someone can view comments in the context of the data at the time
Displays the data in a clean user interface, focussing on the conversation that people can have around aid projects

User Story
The concept (User Story) of the site is that people (either UK citizens or citizens of developing countries) can view summary details of DFID aid projects, and can start conversations around individual projects. Ultimately, this may be best used for sub-sets of the full 3000-odd projects based around communities of interest, for example by a community within a developing country.

Why WordPress?
The new Custom Post Types in WordPress provide the framework needed to handle more structured data around aid project information. Other core features are the commenting capability, use of categories and tags for classification, and the built-in post versioning system. These would require a significant effort to write from scratch.

Credit to the Team
I was really pleased with what the team achieved, and it builds on work done at the recent Aid Information Challenge. It clearly shows what can be done with government information when the data is provided in a reusable format.

The keys to the success were:

Shaun Hare‘s organisation was critical. He set up the WordHack wiki page, canvassed for ideas early, and allowed for discussion within the group.
Getting ideas early really helped, as people could develop the ideas over a couple of weeks, and come to WordHack with a better-formed solution in mind. It also helped to break up the problem into a number of logical components that enabled everyone to do something useful.
The skill and dedication of the team was phenomenal. Each person chose a different component and delivered something useful, and Chris and Shaun tied it all together on Sunday afternoon.

More details
The technical details of the site are available on the OpenAid project page on the WordCampUK Wiki, and we hope to have a Google Code project set up soon.

Next steps
The next steps are likely to be:

Add Ajaxy goodness to the front page to allow the most recent conversations to magically appear, Twitter style.
Make the import plugin generic to allow any XML data to be transformed into the Custom Post Type – possibly by providing a URL for the XML and an XSL transform.
Create a map based on country data to show where the conversation is happening.
and many more…

If you are interested in continuing involvement then please follow @openaiduk on Twitter.

Posted in Community Activism, International Development, Portfolio, Wordpress | Tagged aid transparency, DFID, openaid, transparency, UKaid, wordcampuk | Leave a comment

WordCamp UK 2010

By John | Published July 19, 2010

I attended my second WordCamp UK at the weekend, held this year in Manchester. The (un)conference was attended by around 200 people, and was held in the Manchester Metropolitan University Business School.

Like last year, the main benefit to me was to meet the key people in the UK’s WordPress community (in the flesh rather than just on Twitter). It was great to meet with the key people again (and I was very surprised that lots of people remembered me from last year!).

Here’s what I took away from this year’s WordCamp UK:

WordHack
Efficiently organised by Shaun Hare, this was a fantastic and stimulating experience. I was involved with a team of seven people who developed a completely new WordPress site at openaid.org.uk. This site reads XML data on DFID aid projects, transforms and imports the XML into Custom Post Types in WordPress, with a new theme that presents comments on the aid projects as a live conversation, and ties the comments to the post versions. Read more on the OpenAid project page. Brilliant going for half a dozen people in around 6 hours, and shows the real value of exposing government data for others to reuse.

BuddyPress
Paul Gibbs gave a great introduction to BuddyPress. This is a plugin for WordPress that adds social media and community features (extended profiles, friend relationships, groups, forums and activity streams). It looks relatively straightforward to set up, although there needs to be some tinkering around with existing themes. The most impressive example Paul gave was CycleOregon, which doesn’t look at all like a membership-driven site. I have two immediate uses for BuddyPress, both with an international dimension, and Paul’s talk was a great and timely introduction.

Theme frameworks and theme clubs
Theme development was a recurring (ahem) theme this year, but this time it was focussed on the growth of theme frameworks and theme clubs. Kimb Jones gave a good run-down of the theme club and commercial theme market, and this was followed by a launch of the private beta test for WonderFlux theme framework. This is an area where I need to learn more.

WordPress for the voluntary sector
There is a strong community of WordPress developers working with charities and other organisations in the voluntary sector, providing some innovative solutions. Jason King spoke about some of the opportunities and challenges. One observation was that small organisations use a lot of (commonly cloud-based) apps, and this can be challenging to integrate with, for example, a WordPress membership list. This group has a lot of relevance for my WordPress work.

WordPress in the Enterprise
This was another strong theme, as larger organisations are starting to see the benefit of using WordPress. Dave Coveney discussed outward-facing sites in Big Media and larger Enterprises, but there was no formal discussion about the use of WordPress as a social intranet within organisations (idea for a session next year?). We informally discussed some of the challenges of using WordPress within larger enterprises (of which more in a later blog post).

Will there be a WordCamp UK 2011?
The weekend proved that the WordCamp UK organisation is strong and vibrant.

Unfortunately the conference ended on a downbeat note, when Jane Wells from Automattic casually mentioned that the WordCamp.org organisation would prefer to see city-based WordCamps rather than larger events at a national level, following the practice in the US (although not, interestingly, Ireland, the UK, New Zealand, Sweden and others). I’m sure Jane didn’t intend to cause the resulting uproar!

Moving to a city-based model could be positive if it fosters a strong local community and those local WordCamps were able to attract experienced speakers from across the UK. But personally I value the broad cross-section of people at a UK-wide WordCamp and would like to see it continue.

I’d prefer to see WordCamp UK continue as a travelling circus, working alongside local WordPress communities to put on this exceptional event in different cities each year, while strong local groups also put on more local or regional events as appropriate. I’ve been trying to make contact with WordPress community in Scotland but there doesn’t appear to be a groundswell of opinion for even a Scotland-based WordPress User Group (if I’m wrong, please do get in touch!).

My most embarrassing moment, caught on camera
At 1100 on Saturday, I was comfortably sat in Room 1 settling in to listen to Jonny on theme frameworks, when I saw a tweet wondering why I wasn’t in Room 2. A minute or so later Gurbir walked through and informed me that I was meant to be running a session on Managing Multiple Instances of WordPress! This was an idea I’d had about 6 months ago, had proposed it on the wiki and had completely forgotten about it. Unfortunately, Mike Nolan was there with his iPhone, capturing my just-in-time session planning on Flickr!

Finally, a big Thanks!
Finally, a big thanks to Chi-Chi Ekweozor, Tony Scott and the other organisers. It was a really successful weekend, and shows that WordCamp UK organisation is strong and vibrant. It will be good to mature further into an organisation that mentors people with different skills and outlooks, and encourages local WordPress communities.

Posted in International Development, Wordpress | Tagged manchester, openaid, wordcamp, wordcampuk, wordhack | 2 Comments

Christian Engineers in Development

By John | Published June 5, 2010

New CED site, built using WordPress

Christian Engineers in Development (CED) are a small UK charity that works directly with communities in the developing world, supporting infrastructure (water, architecture, building) projects with technical skills. Recent projects have included providing water to rural communities in Uganda, Rwanda and Tanzania, and the charity are also working on proposals to preserve Zanzibar Cathedral, one of Tanzania’s most important heritage sites.

Previous CED site design - HTML only

I was asked to rebuild their website and bring it more up to date compared with their previous design. Of course I chose WordPress, to provide them with the flexibility they needed for both the current and any future designs.

The key challenges in this project were:

Getting the design right
The design went through several iterations, as expected. But to be honest the most difficult aspect was working with the charity’s insistence on using a strong blue (#0000BD since you ask) for their logo, and trying to balance this relatively harsh colour with a more muted modern palette. However the client had some clear design ideas based on other sites they liked and it was straightforward to develop a custom homepage template to accommodate their ideas. We found the use of personas to be useful in adapting a very inward-looking site to appeal to a wider audience.

Timescale
The process took a bit longer than I had anticipated, for a combination of reasons. In particular as both I and the person I was working with have demanding day jobs there was a lot of time spent waiting for diary slots. Although elapsed time was longer than expected, the actual time working on the project wasn’t as inflated, but there a definitely lessons to be learned for the next time.

WordPress 3.0
I started developing the site on WordPress 2.9.2 but WordPress 3.0 has been in the margins for a while now. I’ve launched the site on 3.0 RC1 as that means I can make use of some of the out-of-the-box features such as the new Menu system (although it’s not quite 100% working in my theme yet – prizes for who can spot what’s wrong).

Other 3.0 features would be really useful, in particular the use of Custom Post Types to allow the charity to update specific metadata used for their development projects (at the moment they’re using Custom Fields which is a bit cumbersome for someone not that familiar with WordPress). But these will have to wait for the next iteration.

Hosting
I also advised the charity on moving away from their existing host (1and1) to a host that provides a greater level of support (including familiarity with WordPress). The choices I presented them were Dreamhost, Xilo and Bluehost (thanks to the wordcampuk mailing list for advice). Bluehost was chosen on the basis of previous good experience and price.

Managing the move was very straightforward – I used Bluehost’s SimpleScripts installer to install the basic WP site (was offered 3.0 RC1 which was a bonus!), imported from the test site, made a few config changes, and the client updated the nameservers for their domain. All done in around an hour.

So, a few lessons learned from this project, but interesting to work with a team who are clearly passionate about what they do. The next challenge for them is to build up more of a social network within the organisation (geographically dispersed, working in small virtual teams). I’m already thinking BuddyPress…

Posted in Portfolio, Wordpress, charity | Tagged Bluehost, CED, charity, Christian, international development, Wordpress, WordPress 3.0 | Leave a comment

An alternative bit.ly redirector

By John | Published April 5, 2010

For some reason I was in the house by myself one late winter evening when this request from Owen popped into my Twitter feed.

The context is that there are a number of countries and organisations that for some reason block redirectors such as bit.ly. Ethiopia, where Owen lives, was one until very recently [until just after I'd written this solution!]. I like a “how do I do that” type challenge and I had nothing much better to do that evening. So I wrote an experimental bit.ly proxy.

The steps:

Step 1: Set up a hosting account with a dedicated IP address. I needed the dedicated IP address to paste into my hosts file, and this is possible through my host, BlueHost.com

Step 2: In the root of the hosting site, I set up .htaccess to send all 404 errors to index.php (but could be any file if you wanted to set it up on your site). The contents of the .htaccess file:

1	ErrorDocument 404 /index.php

Step 3: Download the bitly PHP class written by Tijs Verkoyen. This is a PHP wrapper on the bit.ly API. Put the class into the root of the site.

Step 4: Register for a free bit.ly user account and apiKey by signing up at http://bit.ly/account/register.

Step 5: Edit index.php to include the following simple PHP code:

<?php
/*
 * Test page to lengthen bit.ly urls directly
 * 1.0  11/03/2010  JA  Initial prototype
 *
 */
 
//build the full bit.ly url from calling url
$reqUri = $_SERVER["REQUEST_URI"];
$bitUrl = "http://bit.ly" . $reqUri;
 
// require bitly class
require_once 'bitly.php';
 
// create instance of bit.ly class
$bitly = new Bitly('mybitlyapilogin', 'mybitlyapikey'); //replace the tags with your bit.ly api login and key
 
// get original url from the shortened version
$longUrl = $bitly->expand($bitUrl);
 
//redirect the page
header("Location:$longUrl");
 
?>

This code picks up the REQUEST_URI (the bit after the /) and appends to http://bit.ly, then uses the bitly.php class to return the expanded URL, and simply redirects to the target page. With a bit of editing this could be down to 5 lines of code. The secret is to use the bitly.php class to access the bit.ly api.

Step 6: Modify your hosts file to include the following line:

1 2	#this should be the full IP address of your site - replace x with numbers! 70.40.xxx.xxx bit.ly

(in OS X, you edit the hosts file using Terminal and the command sudo nano /private/etc/hosts)

And now all your bit.ly traffic will be redirected through your own site, thus avoiding any IP blockages of bit.ly itself.

As you’ll have noticed, there’s no validation, error checking or anything fancy at this stage. But that’s for another day, if anyone really needs it!

Posted in How To, Tips | Tagged bit.ly, bit.ly proxy | Leave a comment

Widget discoveries

By John | Published January 30, 2010

I’ve been really impressed recently with a couple of WordPress plugins and widgets, and have used them successfully in a recent project (more about that later).

Widget Logic

Alan Trewartha’s Widget Logic plugin adds a control to all widgets allowing you to use conditional tags to control which page the widget appears on.

This is really useful if you want to add particular widgets to certain pages – the alternative is to have different widget areas in different templates, but that can get incredibly complex.

Usefulness index: 5/5

Sub Page Menu Widget

The sub page widget is useful for displaying sub-pages of the current page, and a link back to parent pages.

Usefulness index: 4/5

Query Posts
Justin Tadlock’s Query Posts widget is a complex widget that allows you to define the structure of the query_posts() function within a widget. Used in combination with the widget logic plugin it allows powerful control over lists of posts within certain page or post contexts, without resorting to editing or creating lots of new templates.

Usefulness index: 4/5

Extended Category Widget

The Extended Category widget gives much greater control over the categories that can be listed in the sidebar. For example, I want to show only a particular subset of categories on the Projects page, leaving out all the News categories. This widget makes it possible, again without resorting to editing template files. And used in conjunction with the widget logic plugin.

Usefulness index: 4/5

Posted in Wordpress | Tagged plugins, widgets, Wordpress | Leave a comment

Kicked off at Busby

By John | Published December 30, 2009

This short project was a bit of fun resulting from a chat between me, Martin and Nicky at work one day.

We’d been at a retreat where William Perrin was the after-dinner speaker, and he was talking about how the web can be a powerful tool for community action. In fact that has been the focus of his work for the past few years.

Martin’s idea was to set up a community action site to try to persuade the train operator Scotrail to improve the service on the train line between Glasgow Central and East Kilbride. The trains often run late, and because the line goes down to a single track beyond Busby, passengers are sometimes kicked off at Busby station to wait for the next train, while the original train heads back to Glasgow to catch up on time. Hence kickedoffatbusby.org.

The basic content was the product of a 15 minute brainstorm during a coffee break at work, and was set up using WordPress (obviously) in around 2 hours. I used the Mystique theme as this provides a lot of smart controls, including a cool slider to set the width of the right hand column and a simple way to override the inbuilt CSS (credit to Martin for his work on the customised CSS).

I’ve also found these plugins useful:

TDO Mini Forms – this allows any visitor to the site to submit a post without having to have a WordPress login, and therefore encourages community participation. To keep the site safe, the plugin uses Akismet to check for spam and permits moderation.
Twitter Hash Tag Widget – to display any tweets with the #ekline hash tag.
Widget Logic – this allows each plugin to be controlled using WordPress conditional tags, so that the widgets don’t need to be displayed on the sidebar for every page.
I also wrote a widget to load live train times sourced from the National Rail Enquiries web service.

There are still some gremlins to iron out, but I think the site isn’t bad for a few hours work, and really shows the power of WordPress.

Do let me know what you think.

Posted in Community Activism, Portfolio | Tagged East Kilbride, Network Rail, Scotrail, trains | Leave a comment

VirtualBox on my MacBook Pro

By John | Published October 24, 2009

I installed Sun’s VirtualBox on my MacBook Pro (Snow Leopard) this week, then created a new virtual machine with WIndows 7 Ultimate – 32 bit (thanks to my MSDN licence).

That means I can test how my WordPress themes look on IE8 running on Windows 7. I can also run Windows only applications and share files between the VM and the MacBook using a shared folder. Neat.

I struggled a bit to get the VM instance of Windows 7 to recognise my Dell Photo AIO 922 printer. For a while the printer name was greyed out in the USB devices list. I’m not quite sure how I resolved it, but I think the following steps helped:

In the Settings for the VM, click on USB and add a new USB Device Filter for the printer.
Unplug the USB device and plug it in again while the VM is on (the old solutions are the best).

Getting the printer connected is a fantastic result, as there are no Mac drivers for Dell printers and it therefore won’t work with the Mac. But now I have a way of scanning and printing. Yay!

Posted in Tools, Virtualization | Tagged Dell AIO 922, MacBook, USB, VirtualBox, Windows 7 | Leave a comment

A few of the tools I use

By John | Published October 18, 2009

I have had a MacBook Pro for a few months now, and I’ve found a few favourite tools for WordPress development. I’m open to other recommendations, if there’s anything you’ve found particularly useful.

Development Environment

XAMPP provides me with the right Apache and MySQL environment for my test sites. It makes it easy to use the WordPress one-click install into this environment.

Coding

NetBeans is a useful IDE for manual coding of WP themes, CSS and plugins. No Intellisense or anything terribly clever (idea: wouldn’t it be good to have a sort of Intellisense for WP template tags built into an IDE?).
Firebug is an excellent utility for debugging CSS and markup issues in Firefox.

Image and photo editing

Gimp for Mac is good for image editing. It appears to be a clone of Photoshop and it takes a while to get used to the way it works – I’m still at the early stages of learning how to use it.
iPhoto comes with the Mac and is good for quickly editing and cropping photos…
…but I think I prefer Picnik.

Copying to Live

Cyberduck is a good FTP tool specifically written for the Mac.

Posted in Tools, Web development, Wordpress | Tagged development, Tools | Leave a comment

By John | Published September 28, 2009

Tetrahedra site image Tetrahedra is my own “micro-agency” building websites mainly for charities and small businesses in Glasgow.

The site design is by Harrisment. I particularly like the colours and the crystalline shapes of the logo text.

Posted in Portfolio | Tagged tetrahedra, theme, Web development, Wordpress | Leave a comment

Recent Posts
- WordCamp UK 2010 > > July 19, 2010
- An alternative bit.ly redirector > > April 5, 2010
- Widget discoveries > > January 30, 2010
- VirtualBox on my MacBook Pro > > October 24, 2009
- A few of the tools I use > > October 18, 2009
Categories
.NET Architecture charity Community Activism CSS Geek humour General How To International Development Mashups Portfolio Quick Tips Security SOA Social networks Tips Tools Video Virtualization Web 2.0 Web development Wireless Wordpress

Digital design and development

Development Environment

Coding

Image and photo editing

Copying to Live

Recent Posts

Categories