URL: dharmafly.com/hpwebos-hackday/demo/

I went along with Andrea and Sym to The Guardian to join a hack day for HP’s new TouchPad tablet – an interesting alternative to the iPad that uses web standard technologies for creating native mobile applications.

We won the competition(!) with a prototype app for exploring live web content, such as news, reviews and photos, about any place on earth. (See all the projects from the event).

The app we produced is part magazine, part feed reader and lets you swipe and slide the magazine in any direction to shift the geographical location that the magazine’s content represents.

You can check it out by playing with the browser-based demo. (Note, this is utterly non-optimised at the moment and has only been tested in Chrome and Firefox).

What it does

Starting at the reader’s current location (imagine that you are travelling or visiting somewhere new), a magazine-style page of content is pulled in for that place (e.g. a one mile square centred on Kings Cross, London). The reader can then slide the page in any of eight compass directions (north, east, south, west, nw, ne, sw, se), to re-centre the magazine at that new location (e.g. a one mile square centred on Hillingdon, London). Content is then pulled in for the location represented by the new position.

We’ve divided the world into a grid of cells, and the user can slide between any of the cells to view the content that they each contain. Content is linked through to its original source on the web, e.g. a travel article from The Guardian, or a note on the history of a place from Wikipedia.

We think that the format is ideally suited to a tablet like the TouchPad: location-aware, tactile navigation, relevant material for reading and exploring while on the move. The magazine might be used to explore content around a particular part of the world, or to follow each step along a journey.

Working in the same familiar way as the “slippy map” of Google Maps, we provide an intuitive mechanism for browsing, though we’ve never seen something quite like our app before.

Building for the TouchPad

Although there were some rough edges, all in all, it was a refreshing experience to develop for a mobile device that uses native web technologies (HTML, JavaScript and CSS). The app was put together in a normal desktop browser and, with the TouchPad connected via a USB cable, it was simply pushed down to the device for testing.

So the application is portable – it can work in a desktop or mobile browser, and it could be wrapped up to be used on other, non-web platforms like the iPhone, iPad and Android.

Technicalities

We used Node.js and Django Python outside of the device to pull in the content, process it and compile it down into JSON data, to be consumed by the app. The TouchPad’s operating system, webOS, actually allows apps to include JavaScript-based, Node.js services, to run a tiny server on each device. We might want to use this, for example, to continually process and serve content to the front-end.

We rolled our own JavaScript, opting to remove the considerable benefits that webOS provides in the form of Enyo, an app components framework. Without Enyo, we are left with just a basic WebKit shell, hooked into the operating system. We used iScroll, a touch-based scrolling library, to assist with user interactions.

Ideas for taking the project forward

We would love to extend the app to use a full global grid of content, allowing zooming in and out from hyperlocal to country-wide scales, introduce clumping of content into cities and notable locations, allow layers of content types that can be switched on or off, and include user-curated and user-generated material. The concept, its focus, the look and feel, and the app’s behaviour will all need some love and care, but we think it has potential.

What do you think? Would you use it?

URLs: brightworks.me & tasket.dharmafly.com

People like to help out with a good cause, but it can be difficult to find the time. What if, through the Web, we could gather enough people and bring them together to achieve something great?

At Dharmafly, we’ve been hard at work creating an open source tool called “Tasket“, which we hope will do just that. It’s a visually immersive web app, riffing off some of our data visualisation work, that engages volunteers in performing tiny tasks for a cause.

Essentially, it’s a “micro-volunteering” task management tool that lets people create tasks that need doing. Anyone can claim those tasks and Tasket helps everyone track the progress of the community.

BrightWorks: mobilising the crowd

We’ve designed Tasket with the not-for-profit company Bright One, who enable volunteers to work on projects for charities and third sector organisations. Bright One are an ethical Public Relations agency who provide a specialist, low-cost service for social good organisations, by connecting student volunteers with expert mentors. They help their volunteers to train and gain skills, and to work together as a cohesive team.

Using Tasket, we’ve built a website for Bright One called “BrightWorks“. The first version has just launched. You can explore it, click around (and even complete a task or two) at: brightworks.me

Bright One have only been going for two years, but in that time they have grown to be impressively successful – so much so that they have too many volunteers and too many charities wanting to get involved. It’s what you call “a nice problem to have”.

They needed a way to activate their volunteers more quickly, increase their capacity to work on more campaigns, and help everyone to stay informed and engaged with each other’s projects. BrightWorks now helps them to maximise their output from a dispersed, but eager, crowd of individuals.

The leaders of each project add information to the website, posting the highest priority tasks to be done. Anyone can offer to take on a task. And when a task is complete, it can be verified by its creator. Each volunteer accumulates a record of completed tasks (which in future might be used as part of a CV or resumé, or plugged into the volunteer’s professional profile on LinkedIn).

Gaming

There is a light layer of game dynamics incorporated into the web app. Projects rise and fall, as the weight of their tasks is unburdened by people completing them. Tasks can only take a maximum of four hours each, so a heavy task will need to be broken down into smaller ones. A volunteer can only take a limited number of tasks at one time, and there is a time limit for them to complete each one. (Tasket lets all these variables be configured for the requirements of its target website).

In future, we would love to add analytics, to show the performance of the community. We’d also like to expose the networks that emerge when people become connected via the projects that they contribute to. The tasks are a kind of currency; it’s actually the connections created between people that matter within the community.

Oh, and I’d also add to the wishlist: task notifications, alerts, messaging… and an app-load of other features.

Early feedback

What people have said so far:

The BrightWorks concept is genius because it fits right into a mould that we are all already comfortable with – microblogging. BrightWorks has taken a social networking concept and adapted it to the needs of non-profit organizations and volunteers – giving them the ideal meeting ground to actually get something done.

- The Next Web

I love the idea of a more loose visual representation of a collection of tasks. It’s an area that’s been vexing us for a while… how to say “I’ll do this” for any given component of a larger project. All around, one of the most interesting/ smart/ exciting microvolunteering apps that I’ve seen to date.

- Sparked.com

Really lovely concept, like the dashboard-style interface – makes it feel like a tool rather than a site. The sign up form is very slick and quick. Also big bonus points for the photo upload being one-step: no resizing, no restrictions. Just works.

- Oxfam GB Digital Manager

Sometimes, people are more than willing to volunteer yet have very little time to look for charities. And that is really frustrating. Well, if this new application manages to take off then that should stop being a problem.

- Killer Startups

Tasket for Carers: a prototype

Early on, before we started building Tasket, we presented a prototype for the concept at the Government’s “DotGovLabs Developer Weekend“, organised with Rewired State. Our frame of reference was a bit different – instead of dealing with projects, the main focus was on carers – people who live with and care for others.

There are 6 million carers in the UK (that’s one in ten). Many suffer from being overburdened, isolated and stressed. Poor health and depression can often result. We believe that, if carers could get help with just the little things in their daily lives, the result could be a big improvement in their quality of life.

Our 24-hour prototype shows how Tasket could be used to let carers add tiny tasks, such as collecting groceries or putting out the rubbish, and allow friends, family or neighbours to complete those tasks for them.

The prototype was a success. We won the Government’s “Carers” category prize. You can take a look here: dharmafly.com/tasket-carers-prototype/

We’ve gone on to make it into the DotGovLabs top 3 innovative solutions for the extended project.

Play in the sandpit

You can have a play with the open source Tasket app (in glorious black n’ white), at tasket.dharmafly.com

Go ahead, sign up, create a project, add some tasks. You can claim tasks that others have created, click around, explore. And remember, because it’s all open source, you can re-use the code for your own task management applications (or contact Dharmafly to adapt it for you).

One data server, many apps

We’ve built the server as a kind of pure data engine. How the actual application looks and behaves can be wildly different, but still use the same underlying data.

As an example, the screenshot above shows a notepad style “to do” list manager, built on Tasket. It’s much more focussed on an individual and their own tasks, but could equally be used for sharing lists between a group of people. A very early version of the app can be seen here.

A little note on technology (for the geeks)

Tasket uses a collection of HTML5-related technologies. It is a “thick client”, built with the JavaScript library Backbone.js, and communicates with a JSON-based API (e.g. here are all the unfinished tasks on BrightWorks). The server is created with the Python-based framework, Django (this may be swapped with Node.js in future).

Projects and tasks are laid out with force-directed physics, to prevent them from overlapping each other and the walls of the website. The lines connecting tasks are in SVG (although the circles that represent each project instead use simple CSS3 border-radius).

You can download the code and run it on your own server (it has the permissive MIT license), or fork the project on GitHub. Improvements and pull requests are welcome.

Created by

Tasket and BrightWorks have been brought to you by:

• Matt Weston – social design
• Gavin O’ Carroll – visual design
• Sym Roe – server-side
• Aron Carroll – JavaScript, CSS
• Kyran Dale – force-directed physics
• Christian Thrower, Ollie Bettany and Andrea Fiore – front-end design & dev for the Notepad app
• Prem (that’s me) – concept, JavaScript, coordination
• …and the brilliant minds at Bright One. Big thanks especially to Ben, Katy and Dan.

You can follow the further developments of the BrightWorks project on its blog.

URL: rewiredstate.org/projects/what-makes-a-centre

We previously blogged about helping to create a prototype SMS text message service for the Government’s UK Online Centres. The centres help people get online for the first time, and are a key part of the government’s strategy for Digital Engagement.

We also worked on a handful of data visualisations to highlight the hidden aspects of the centres. These could assist in making decisions about outreach or marketing, or on the balance of facilities on offer to customers of the service. To create them, we prepared different slices of the UK Online dataset, and passed them through the wonderful Wordle web service:

Centres’ target audience:

The visualisation at the top of this article shows the words that individual centres use to describe their own target audience.

Centre locations:

This shows the relative proportions of centres in different parts of the country.

Centre names:

This shows trends in the names of the different centres. Clearly, most of them are in libraries and community centres.

Centre names (minus the six most popular words):

This final visualisation shows all but the most common six words in the names of the centres (i.e. without “library”, “centre”, “community”, “learning” and “training”).

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:

We recently completed an exciting project for BBC World Service: the World Service Widget, which lets people share BBC World Service content on their websites, blogs or computer desktops.

It's being released on a number of web platforms (WordPress, iGoogle, Adobe Air, Facebook, Netvibes, Mac Dashboard, Vista Sidebar and as a simple snippet of HTML code). These are being rolled out over the coming days.

The widget is available in a multitude of different languages and content networks. (This was one of the trickiest aspects of development - although there were other, perhaps even stickier issues). Below, for example, are the English and Farsi flavours. (Farsi is the language spoken in Iran. It is written right-to-left, and it has a special widget: click on a news story to open the "Lightbox" window).

We've already started thinking about what the widget could do better, so do tell us your thoughts.

Our 24-hour hack: OpenFreecycle

OpenFreecycle

Our two-minute presentation to the crowd

The Problem: Closed

Over 10,000 Freecycle mailing lists on Yahoo Groups

The Solution: Open

A mockup for OpenFreecycle integration into eBay, via Greasemonkey

How we did it

We Won the Double!

Moment of glee

• David Filo, co-founder of Yahoo
• Tim O'Donoghue, vice-president of engineering at Yahoo
• Sophie Major, head of international at the Yahoo Developer Network
• Pascal Finette, Mozilla Europe
• Matt Biddulph, co-founder of Dopplr
• Daniel Ek, co-founder of Spotify

Whatever Next?

Interactive maps in action

Harnessing the social web

Other mapping projects we've worked on

• 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.

Planet what?

What's all this green stuff?

Why?

So what's a Planet for?

A Planet site for you?

What's under the bonnet?