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?

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”).

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: goomusic.net

Goo Music are a vibrant, young band management company in London. They manage The Subways, a high-energy band who are currently putting together the final touches to their second album and are about to launch a world tour.

We’ve created a distinctive website for the business, in the style of a one-page fanzine that keeps itself up-to-date with feeds from the Twitter and MySpace profiles of both Goo Music and The Subways.

Photographic

The site design uses a layering of photographic images:

• a pavement from Lancaster
• an old plectrum
• a penny
• a guitar cable, and
• a stapled stack of papers (actually it’s part of a manual for LSL, the scripting language used in Second Life)

We now have browsers that can handle part-transparency in images (since Internet Explorer 6 finally left the scene). So, it has become possible to sculpt this kind of photographic layering into a website, bringing the viewer into a richer visual environment. It can be more laborious to create such a design than with standard techniques, but the results can be impressive.

Semantic

Although we have gone for a highly visual design, we have also given full consideration to accessibility and the usage patterns of different users. For example, the design adapts well to different text sizes in the browser and it is built on a backbone of semantic HTML, for the benefit of screen readers, search engines and the best of the Semantic Web.

The site is constructed from HTML microformats (specifically, hAtom, hCard and xFolk). These are small building blocks of information that can be read by both humans and computers.

We’ve used microformats to build the site’s blog posts, contact information and links, where they allow people to interact with the information in useful ways. For some ideas about how to interact with microformats, see the Bangladesh River Journey post.

Full RSS Feeds from MySpace

To bring in content from MySpace, we had to be a bit sneaky. MySpace, for all its wisdom, doesn’t provide full RSS feeds. For example, the feed for The Subways’ blog shows just the first couple of sentences of each post.

We first tried using the Dapper service, which lets you convert HTML on any website into RSS feeds and more. However, as you’ll see from the Dapper feed we created, and its resultant RSS feed, Dapper doesn’t quite have the sophistication yet to deal with MySpace. So, we took advantage of Scott Reynen’s MySpace Feed Creator web service to create a full RSS feed, which we then convert back into HTML on the Goo Music website.

Road Crew

Full kudos to Aidann for his rough and ready design, Pete for forging the CSS styling and Kaanchan for the back-end piping of feeds. Rock on…

We were happy to have attended Tuesday’s launch of UnLtdWorld, a social networking site for social entrepreneurs.

UnLtdWorld brings together people and businesses who make a difference in the world and connects them with potential co-workers and supporters. It aims to be a hot-bed for collaboration, the sharing of services and the pooling of resources.

At the core of the UnLtdWorld site is the social networking software Elgg – an open source platform that attempts to remain flexible and unassuming within the differing needs of social networking projects.

There is also an initiative to build a comprehensive API into the UnLtdWorld data, which will allow third-party developers to access information about social entrepreneurs and their services. This data could be combined with other kinds of data, for example, to marry the needs of a local community with UnLtdWorld members that may be able to assist.

You can find me, Madhava and Dharmafly on the UnLtdWorld site. Come and say hi…

This weekend was SemanticCampLondon (alt) – a grassroots conference of semantic web developers.

Semantics is all about meaning – and the idea of the “semantic web” is to use techniques that add greater and greater meaning to web content. The intention is for computers – as well as humans – to “understand” something of the content, allowing them to make associations with related content and to present options to the web user based on those associations.

When web developers agree about standard ways to add semantic meaning to content, then some pretty amazing things become possible.

Tom Morris and Daniel Lewis did an excellent job of pulling the event together. It seemed to me that they acted as a bridge between developers who approach the Semantic Web from quite different angles. There was a spectrum of perspectives and some tangible synergy taking place…

Niche TV

On a whim, I started using Yahoo Live to stream live video of the conference from my webcam. The service launched last week and is so easy to use – just plug in the webcam and “Go Live”.

It was pretty effective. There were viewers from different parts of the world tuning in, asking questions and educating each other on the fine points of the technologies being presented. In this way, something of the event spread beyond the confines of London. I will try to encourage a handful of people to stream video from next month’s BarCampBrighton…

Compound Microformats

For my session, I put together an interactive demo of Compound Microformats – a way of combining simple building blocks of HTML, so that their combined semantic meaning becomes greater than the sum of their parts:

(Image from Microformats wiki)

We talked about people innovating on new patterns for combining microformats. We also discussed whether software that understand microformats should consider the configuration of compounds, to glean something more of the semantic meaning intended by the coder.