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.

It’s geek festival season, down here in Brighton. First up is dConstruct, a one-day conference on the cutting edge of interface design and user engagement.

And then it’s good old BarCamp Brighton, now into its fourth incarnation. BarCamp, always a favourite, is a handmade 2-day conference, pulled together by its community of participants. Everyone gives a talk on something they feel (geekily) passionate about, and they bring sleeping bags to spend the night at the donated event space. This time, we’ll be moving into the old Music Library for the weekend.

Dharmafly is again a proud sponsor of BarCamp. I had in mind a fun little game to give away to the attendees, but not quite had the time to pull it off. Next time, next time. (And no more crunchy spirulina, like last time). See our BarCamp archive for more.

If you’re at either of these events, do roll up and say hi.

Update: At BarCamp, I gave a talk called “Indestructible JavaScript Widgets“, about the pitfalls and solutions when developing widgets to embed in third-party websites (like our widget for BBC World Service). No pretty slides, but my notes are at: dharmafly.com/bcb4.

At the weekend, I helped mentor a group of tech-minded teenagers at the community-led event, “Young Rewired State“. Held at Google’s London HQ, this was a two-day, action-packed programme for 15-18 year olds to build something better with government data on the web. And the results were truly impressive.

Young people are sometimes written-off as being apathetic, or handed patronising websites and services to interact with. Here was their chance to show the kinds of services they really want and to demonstrate that, given access to the right kinds of data and a little support along the way, they are more than capable of building it themselves.

In just two days, they created a plethora of new web apps: a mobile service to give real-time info on London buses (“TFHell“), interactive maps with routes to school that avoid local crime hotspots (“SchoolRoutr” and “Step Safe”), sexual health advice (“Blab to Betty”), a service matching new tech talent with employers (“Will Work For Peanuts“) and many others.

The team I assisted were a politically minded trio. Ben, Joe and Richard came down from Manchester and built a website that grabs the latest bills passing through parliament and attempts to show the emotional response to these bills from blogs around the web. The results are shown graphically, using the Google Charts API. The result of this blogs / politics experiment is: “Blog-o-tics“.

Although they weren’t awarded a prize, Blog-o-tics was given a “special mention” by the panel of judges, who had come from government, the tech industry and beyond.

The field of “sentimental analysis” is growing and, although Blog-o-tics was just a quick proof-of-concept, it does hint at the possibilities. Craig Elder noted its similarities with the concept for YourOwnDemocracy.

Other mentors came from Last.fm, the BBC, Yahoo, Moo, My Society and small businesses around the country. I think we were all pretty much blown away by, not only the standard and focus of the work produced, but how entirely natural everyone seemed with the stack of technologies being used. Here is a generation of people who have grown up with computers, the ubiquitous Web and the programming languages used to harness it. Government could really benefit from their input.

The original Rewired State event, dubbed “National Hack the Government Day“, had been held at the Guardian‘s offices earlier this year. It was such a success that many of us who attended were invited to the Cabinet Office to explain just what the government should be doing with its web properties, and we were given suggestions on ways through what can sometimes seem like a maze of bureaucracies.

Since then, no less than Tim Berners-Lee (the inventor of the Web) has been invited by the prime minister to help open up government data, to help bring transparency and to simply help those who want to solve problems get access to the data they need. The young hackers from Rewired State are off to a fine start.

Other reports on Young Rewired State

• BBC
• Yahoo
• Guardian
• Public Strategy
• The H
• Conservative party
• the Twitter conversation
• the Flickr photos

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.