URL: rewiredstate.org/projects/sms-centre-finder

There are 61 million people in the UK and 10 million of them have never used the Web.
How would you help someone to get online for the first time?

The job of the Government’s UK Online Centres is to help bridge the digital divide, by providing places with free public Internet and hands-on assistance. We recently helped them to explore a new web strategy, as part of a prototyping session at Google London, which was organised by Rewired State.

First steps on the Web, thanks to an SMS text message

People seek out a UK online centre for a number of reasons: to get help emailing their children who are overseas, to fill in a job application that’s available only on the Web, or to join Facebook because their grandchildren are all on there.

But there’s an interesting fact: around 70% of these first-timers have a mobile phone. What if we could take advantage of that fact to make it easier for them to get the help they need?

I worked with Sym Roe, Tom Hume and Daniel Morris on a prototype to explore this question. In just a few hours, we had created an SMS text message service, which allows people to text their postcode to a short phone number, and be texted back details of their nearest UK Online centre.

How it could work

Imagine that you’re out and about. You see a poster on the wall at a community centre, a library or some other noticeboard, and it says:

Want to get online? To find your nearest UK online centre, send a text message to 82958 saying ‘ukonline’ plus your postcode – e.g. ‘ukonline SW1A 2AA’.

We’ll text you back with your nearest centre. This service costs 25p.

You can try it out with your own postcode. Did you realise that there’s a centre so close to you?

Ingredients of an SMS web service

We took advantage of the really easy-to-use SMS service, Taykt (it’s pronounced “take it”), a new startup based in Brighton. It takes the pain out of dealing with mobile networks and registering shortcode phone numbers.

First, we chose a keyword for users to start their SMS message with – in our case, we chose “ukonline“. Taykt then passes through to our web service any message that starts with that keyword. If no postcode is supplied, then we just give a generic response. If there is a postcode, then we convert it to a latitude and longitude, then query the UK Online database to find the nearest centre.

To make best use of the 160 characters available in our text message response, the information we send back is prioritised: first the centre’s name and phone number is given, and then if there’s still room in the message, we give the address, and then information about creche facilities, disabled access, etc. We try keep it concise, but human-friendly. Tom wrote about his work on maximising the text message response on his blog.

Because Takyt lets us pass on the cost of the service to the end user (25p per request), it means it would be a viable proposition for UK Online to get up and running quickly, with little risk or upfront fees.

If you’d like to check out the code, see Sym’s Django-based web service, and Chris Thorpe’s UK Online API.

There’s a write-up of our SMS Centre Finder project on the Rewired State website.

URL: guardian.co.uk/datablog/…infovis (fullscreen version)

There’s been a lot of discussion recently about public spending, amidst a global recession, countries in crisis and the emergency budget.

The Guardian has been following this closely and, when the UK Treasury released “Coins“, its huge database of Government spending, the Guardian invited a small group of programmers and experts to work with them and help unravel the hidden stories buried beneath the data.

Brought in by Rewired State, I worked with others from the Open Knowledge Foundation and MySociety on data visualisations and articles for the Guardian Data Blog.

Expenditure per Government department

This interactive visualisation, which I created with Rufus Pollock, shows the relative amounts of spending, per Government department. You can left-click a department to see the distribution of spending per geographical region (and right-click to get back again).

It’s worth seeing this fullscreen, to catch the numerous small departments.

This type of visualisation is called a “tree map” and is written in pure JavaScript, with the help of an excellent piece of open-source software, the JIT.

The Coins Explorer

I also produced an article for web developers, about getting more from the Coins Explorer. The Explorer lets you search for particular types of spending, and export subsets of the data to use elsewhere. It was pulled together by the Guardian’s razor-sharp team of developers in just a matter of hours.

Appreciation

Big thanks go out to Emma from Rewired State, Mike, Simon, Giles, Michael, Daniel and Matt from the Guardian, and all the developers there with us.

URL: dharmafly.com/revolutionaries/

Last week saw an exciting event that brought together scientists, programmers and designers: “Science Hack Day“.

Held at The Guardian in London, this was an up-all-night two days of web development, hardware building and invention, with the goal of prototyping new services and tools for science and scientists.

With my background in ecology and biology (ah, it seems like a long time ago now), my initial thought was to develop some kind of web-based game for exploring relationships between animals and plants in their ecosystems, for which I was going to use data from Wildlife Near You, the BBC’s Wildlife Finder and Kew Gardens. Ultimately though, I decided to help with an idea by Mia Ridge of the Science Museum, for investigating the influences between scientists and their inventions.

The evolution of ideas

Mia wanted to expose some of the rich data about the Museum’s collections and to demonstrate how scientific ideas and inventions have evolved over time, as each successive generation absorbs the lessons of those who have come before.

An invention (such as the space shuttle or the mobile phone) doesn’t simply arrive on the scene all by itself. It will have been the result of countless generations of convergent technologies, research and new paradigms of thinking. So what’s the thread that connects them together? And how have inventors and thinkers inspired one another and built on each other’s works?

There’s an app for that

A group of us built an explorer, called “The Revolutionaries“. It lets you start with a scientist, say, Isaac Newton, and then click through to view those who influenced him and those he went on to influence. In fact, because of the way the app is built, it isn’t just scientists who are matched – writers, musicians and thinkers are in there too.

Some interesting technologies

Hack days are ripe opportunities to experiment with new techniques and technologies. Here are some of those that make up the app:

Pulling data out of Wikipedia, with DBpedia

When the app first loads, it doesn’t contain any data at all. To piece together information about a person, it gathers content from the crowd-sourced encyclopaedia, Wikipedia. We use a service called DBpedia, which weaves together Wikipedia articles in a multitude of ways. This allows us to pull data out of Wikipedia as if it were a giant database, using a language called SPARQL.

We gather information about individuals, and about the connections between them, in order to find out who has influenced who. We then wrap up these requests to DBpedia with the ever-useful web service, YQL, which lets us pull the data straight into the application.

Using ‘localStorage’, a mini database inside the browser

Since we are pulling in content from remote web services, we wanted to reduce the number of remote calls that it has to make, and to speed up browsing. So, we use a feature found in all modern browsers, called ‘localStorage‘ (it’s part of the HTML5 suite of tools). This is a small, simple type of database contained with the browser, where we store all the gathered information. It makes navigating through previously viewed content lightning fast, even when browsing on a mobile phone.

Micro-templating

The content that the user sees is built up from a small number of tiny pieces of HTML. When new data is loaded, the relevant pieces are assembled and the data is displayed. You can see these simple ‘micro-templates’ here, in the source code.

We use a modified version of John Resig’s basic templating script. For more details, see my slides on client-side templating, from a talk I recently gave at Async.

Educational

We ran out of time before we could finish integrating the Science Museum’s collections data with the Wikipedia data. After 24 hours of hacking, it was time to demo to the crowd.

And we wound up with a prize for the hack most useful in education. Thanks guys!

Take a look at the result: “The Revolutionaries“.
(The source code is available on GitHub to download or modify).

The people

The full list of people who contributed to the app were Mia Ridge, myself, Ian Wooten, Tom Morris, Inayaili de León, Andy McMillan and Richard Boulton. With thanks to Christian, as ever, for hands-on help with YQL.

The Hack Day

Science Hack Day was an exciting blend of scientific geekery and hackery, cross-pollination and fresh ideas. (Thanks a lot to Jeremy, for setting it up). The other hacks from the weekend can be found on the wiki.

Here’s a little taste of the scene – a timelapse video created by Carolina Ödman:

If you had a map and you could show it to anyone, what would you put on it?

These days, maps are playing a big part in the development of social media. Imagine you were to run an event, or make a journey around the world, how could you represent it online? How could you help people to find out where you are, to know what you’re doing, or even to see what you’re seeing?

As you can imagine, interactive web maps and location-based activities are not just useful for looking up addresses. We can now assign practically any piece of online content to a map, including videos, photos or location-based conversations. At last, the web doesn’t have to be so geographically anonymous anymore.

Everyone has different needs and interests, so their information might be organised in different ways: people such as film buffs, chess enthusiasts, or parents looking for baby groups might all want to find out about related activities in their local area, and web mapping can help.

Interactive maps in action

Dharmafly recently created interactive maps for EastHampshire.org, partnering on the project with Brighton-based Callender Creates.

As a website for residents and visitors to East Hampshire, it offers information about community groups, news and local events. On the interactive map, you can look at up-to-date information and find out where it’s going on at exactly the same time.

Harnessing the social web

Rather than reinventing the wheel and creating a brand new, separate events engine, EastHampshire.org is hooked into Upcoming, a social network website for sharing events.

When an Upcoming user creates a new East Hampshire event, it is automatically pulled into EastHampshire.org, and the same happens in reverse. This stream of events is fed directly into the interactive map, allowing the content to stay fresh, relevant and up-to-date.

Other mapping projects we’ve worked on

We like mapping projects. Here are a few others:

• Talking America, where we charted a BBC bus tour across America, as it gathered on-the-streets opinions in the run-up to this year’s momentous US Elections.
• Bangladesh River Journey for BBC World Service, where we created a map to track the journalists as they investigated how climate change has a direct effect on people’s lives throughout Bangladesh.
• Location-Based Services, an article for Opera about the use of mapping and geographical tools on the web.

So, if you had a map, what would you put on it?

URL: www.bbc.co.uk/worldservice/bangladeshboat

Phew! We’ve been busy these last three weeks! From commission to launch in just 12 working days (and nights), Dharmafly has built a site for the BBC that explores social media and cutting edge Web technologies…

The Bangladesh River Journey is a mashup of posts from a BBC World Service trip to track the effects of climate change in Bangladesh. The trip lasts a month, with photos being posted to Flickr, messages sent to Twitter and journal entries made on the World Service site. The mashup puts all these posts on to a map, letting you navigate around and follow the trip.

The journalists are equipped with a GPS navigation device. Each time they visit a new location, they post their co-ordinates to the Twitter stream (e.g. this post). Our system then logs the coordinates and applies them to every photo, tweet and diary entry until the next location.

In addition to what you see in the browser, there are a number of gems hidden under the hood: microformats, geoRSS and an API. (Non-techie folk may happily skip this and proceed straight to comments :)

Microformats

Microformats are new, developing standards for adding extra meaning to the HTML of a web page. They create all sorts of possibilities for software (from search engines to browsers) to interact with the content in innovative and useful ways.

The HTML for each Twitter, Flickr and diary post in the Bangladesh River Journey is written using the hAtom microformat. This means, for example, that an RSS feed can be generated directly from the HTML on the page.

If you use the Firefox browser, you can explore other microformats on the Bangladesh Boat site, with the excellent Operator extension. You’ll find xFolk bookmarks, geo locations, hCalendar events, hCard contacts, xoxo lists and tagged links:

GeoRSS

The site’s RSS feed allows users to stay up-to-date with new posts, without needing to re-visit the site (we talked about using RSS in a previous post).

The feed is encoded with the geo coordinates of each post (this is called GeoRSS). Some interesting things can then be done with the feed, such as plotting it straight on to Google Maps:

API

Part of the task was to build an API – a way for web developers to access the data in the system, to create their own mashup applications. This will be promoted through BBC Backstage – the BBC’s hub for exploring new media technology. More about this soon…

Update: The Bangladesh River Journey API is now live on BBC Backstage. Inspired by Google’s addition of a Greasemonkey API to Gmail (via), we added an experimental Greasemonkey API to the Bangladesh River Journey site.

Update: We added KML as a data format to the API. This allows you, for example, to view the entire journey of posts in mapping applications like Google Earth.

Dharmafly & the BBC

It has been fantastic working with the BBC crew. Everyone has shown their good-nature and team-spirit… and nothing but excitement for exploring new forms of media in reporting events that matter to the world.

Our own team was:

• Me, as technical director and coder of HTML, JavaScript and additional CSS
• Annesley, who authored the rock-solid PHP / XSL back-end
• Pete, who scripted the water-tight CSS theme
• Mikel, who contributed mapping strategy and the out-of-the-box balloons

With thanks to Toby Travis, for JavaScript inspiration.

Update: This Project Won Awards

14th May, 2008

The Bangladesh River Journey was declared a Webby Awards Honoree and won the Sony Radio Multiplatform Award. See our later blog post for more information.