A colophon of a World Cup entry.
If you have not yet seen my competition entry please do visit it now at worldcup.aaronbassett.com (if you like it please, click the Share button on the site to tell your followers on Twitter.)
First of all if you’re having trouble viewing my World Cup site, sorry. I wanted to show what was possible using the best of emerging technologies with Kwwika so it probably looks very broken on anything but the latest generation of desktop and mobile browsers. It’ll work just fine in IE8, Firefox 3.6 & maybe Opera 10, though I still have to test that one. But if you want to see it at its best use Safari 5 or Chrome.
The site itself is HTML5 with CSS3, a lot Javascript and it also uses some of the new APIs such as Geolocation. Try it on your iPhone with GPS, it rocks :)
When you first arrive the site attempts to use Geolocation to find out where in the World you are (with a fallback to Geoip). It tries to match your location to a World Cup team and begins streaming Live Tweets about that team using the Kwwika API. Sorry Scottish people but as it reports you as being in the UK you get England tweets.
We also populate the ‘Now Playing’ section with the Country name & flag and show the team’s percentage chance of winning. This is updated every day from the figures released by Norwegian computing center and 2 Sporten.
As the Tweets come in they are added to a first-in-first out queue so you’re not drowned in them and they are displayed at a brisk, but readable pace. We then take the Twitter ID of the user who made the tweet and add it to the roster of players. Their avatar will then be shown in the ‘Team’ section, and it links through to their Twitter profile page.
If you’ve enabled the Map Display we also get the user’s Geolocation (when available) from the Kwwika API and use it to plot their location when we show their tweet. However I noticed during testing that not an awful lot of people geocode their tweets, which is a shame :( When you first enable the map it’ll attempt to start where we think you the visitor are, thanks to the Geolocation or Geoip lookup we did right at the start.
While all this is happening we have a second and a third subscription firing up and polling getting fed push data by Kwikka. This time for match information from opta, which you can see at the top of the screen. This should show you the upcoming matches in the competition.
We then take the visitors country and try and find some more data from different sources. We start regularly polling the Twitter search API looking for World Cup tweets from the selected country which also contain Twitpic links. We then use the Twitpic’s API to display thumbnails of any found images under the ‘Highlights’ section. Clicking any of these thumbnails will take you to the large image on the Twitpic site.
(I would like to have Kwwika supply image links found in Twitter as well, but I didn’t want to give the game away by requesting it!)
The instant replay is obviously a Youtube video. This is found using Google’s Youtube search API and should hopefully be relevant to the selected country as well! (There is a second Youtube video hidden on the site for those who want to find it)
Up to this point everything has been done client-side. Everything. Tweets, image and video searches. Fixtures, maps - the lot. You could merge the whole bleeding thing into a single HTML file and run it from a thumbdrive!!
Our first piece of of server-side code is the ‘Commentary’. A small PHP script fetches (and caches) RSS feeds from blogs and newspapers such as FIFA, the BBC, the Guardian etc. These RSS feeds are then turned into JSON and fed to the client-side code which displays a different random item every dozen seconds or so. It is also the only section which isn’t filtered when you pick a new country.
You have some controls on the page. The main ones being the flags at the top which let you change which country’s tweets are being shown, and the language dropdown.
Anyone who has worked with Twitter data will tell you that you ca’t trust the language people say their stream is in. They either set it wrong or don’t bother to change it from the default. So to get around this I detect the language of each Tweet in the client using Google’s language API. Turn it on and only Tweets recognised as being in the language you pick will be shown. It has no effect on Tweets already shown or the image/video searches.
The ‘Map Display’ I mentioned briefly. This one comes with a warning as should there be a sudden upsurge in the number of people geocoding their tweets it would have to draw a heck of a lot of markers, which can be CPU intensive. Chances are very very slim. But better safe than sorry.
The custom fonts use Typekit and the animations and added using Scripty2 (the Alpha version of Thomas Fuchs’s excellent script.aculo.us library). The entire thing sits on a foundation of about 300 lines of HTML, with most of that being made up of language options, flags and big ass comments (the Javascript comes in at a more respectable ~700 not including library code!)
I have to say a HUGE thank you to Kwwika (and the sponsors Tellylinks) for the API and also for agreeing to me releasing my code under the LGPL. Which I will do after the competition has closed! And don’t forget to click the share button to let your followers know about it as well!
Data sources used in this mashup
- Kwwika - live Tweets, user’s geodata and fixtures (via opta)
- Yahoo - YQL Geo library
- Google - Maps, Language and Youtube APIs
- Twitter Search
- Twitpic
- Norsk Regnesentral & 2|Sporten - team percentage chances of winning
- BBC, FIFA, Guardian, World Cup News & World Cup Buzz - RSS news feeds
Libraries/Other used in this mashup
- Prototype.js
- Scripty2
- Simplepie
- HTML5Shiv
- Typekit
- Flags by www.icondrawer.com
Don’t forget you will be able to grab the source from Github (I’ve created this empty repo for it) so you might want to go apply for that Kwwika Beta access now (you can develop on localhost even if you don’t get an invite though!).
And please, please, please remember…the share button! Oh, and geocode your bleedin World Cup Tweets people, the map works so much better with them! ;)
