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

What is it?

"This bus trip is our attempt to paint a detailed picture of America ahead of the election in November. We also want to create conversations between Americans and everyone else..."

What you can do with social media

A bit for the technically brained

Yahoo Live

YLiveGroups

Techie Details

Changelog

• 0.16 - Public release.
• 0.17 - Problem with Flickr photos fixed.
• 0.181 - Wikipedia and Twitter options added.
• 0.2 - Updated to accommodate changes to BBC site & to Greasemonkey.
• 0.21 - Better handling of multi-word tags.

Microformats

GeoRSS

API

Dharmafly & the BBC

• 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

Update: This Project Won Awards