BBC: Academy
BBC Academy - Homepage BBC Academy - Homepage Menu
Role
Developer
Technology
HTML, CSS, JavaScript

The BBC Academy is the BBC’s centre for training. It houses the Colleges of Journalism, Production, Technology and Leadership. It is the central source for articles, videos and podcasts aimed at giving people, external and internal, an insight into how the different parts of the BBC goes about producing its output.

I was part of the team who developed the new responsive Academy site for the BBC in 2013. The Academy site had a complete redesign and front-end build that focussed heavily on small screen device accessibility and used some progressive design patterns inspired by native mobile applications. It also uses a raft of modern front-end JavaScript and CSS techniques (such as Media Queries, Local Storage API and History API) to enhance the browsing experience. Because of its progressive nature the new Academy site is being used as a benchmark/inspiration for other BBC departments when it comes to redesigning and building new responsive sites.

View Project »
Blast Theory: My Neck Of The Woods
My Neck Of The Woods Dean engaging his audience Callum walking around his neck of the woods
Role
Developer
Technology
JavaScript

“Immerse yourself in the live transmissions of three young people as they walk through their neighbourhoods in Manchester, telling you about their lives and asking you about yours.”

“In My Neck Of The Woods you participate online. Three young people walk through their neighbourhoods in Manchester, filming themselves as they go. You choose which of the three you would like to have a conversation with, whose questions you would like to answer, who you feel comfortable just being with. Select them and you are dropped into their live video stream. You travel with them as they tell you about their lives and as they ask you about yours.”

The development of the platform for My Neck Of The Woods involved an initial challenge to create an intimate experience between a single broadcasting performer and multiple online viewers/participants. The difficulty in creating an engaged and participatory experience using live broadcast transmissions is something that Blast Theory have tackled in previous work. Working with artists and developers at their studio we devised and built the platform/architecture that gave viewers the opportunity to have a one to one exchange with a young person about their neighbourhood and other topics of importance to them. Outside of the technical platform the projects success was facilitated by a great team of artists and associates from Blast Theory and not least the talented young people in Manchester who were brave enough to engage strangers about personal and intimate topics.

Pictures courtesy of Blast Theory.

View Project »
BBC: EAVIS – Glastonbury 2013
glastonbury2013_02 glastonbury2013_01
Role
JavaScript Developer
Technology
HTML, CSS, JavaScript

In 2013 the BBC delivered the first ‘truly digital’ Glastonbury. Picture Ltd have been responsible for the previous iterations of the BBC’s event platfrom (EAVIS), which manages live events across the BBC. This year as part of a small team of developers at Picture we built the first responsive front end to EAVIS for use across small screen devices during Glastonbury 2013.

On top of this involvement I was responsible for building the Live Multi Stream (LMS) interface, which is a responsive JavaScript application that handles and displays the various live streams from across the festival. Throughout the weekend stages, acts and scheduled TV and radio programmes become available to watch through the LMS on the Glastonbury homapage, which received 1.5 million unique browser visits over the weekend; over 42% of which were from mobile devices.

View Project »
Mercedes: You Drive
merc_003 merc_001 merc_004 merc_002
FWA Site Of The Month
Client / Agency
Mercedes / Stinkdigital
Role
JavaScript / Front-end Developer
Technology
JavaScript, HTML5 Video, HTML5 Canvas

A YouTube channel to accompany a series of adverts broadcast during the X-Factor final ad breaks. At the end of each advert a Twitter hashtag was assigned to each of two potential forks in the narrative. The YouTube channel would visualise the live count of each hashtag and also show the story so far.

After the series of ads were complete the YouTube channel became a site to explore each permutation of the narrative.

Technical

Using the YouTube API and the HTML5 Video API we supported video playback on various devices. The custom video navigation and timeline were built using the HTML5 Canvas API.

Awards

This project won the Mobile Site of the Day award from The FWA.

View Project »
Wrangler: SS12 – Get Your Edge Back
wrangler_001 wrangler_002 wrangler_003 wrangler_004 wrangler_005 wrangler_006 wrangler_007
FWA Site Of The Month
Client / Agency
Wrangler / Stinkdigital
Role
Flash Developer
Technology
ActionScript 3, Robotlegs

A product catalogue and interactive narrative during which the user drags and releases frozen characters who crash through walls into a next scene. Extremely high frame rate video was shot for the purposes of enabling this unusually ‘drag and release’ navigation. A Facebook widget was also built for each of the scenes so it could be embedded into the Facebook Timeline.

Read a detailed case study by Stinkdigital.

Technical

Flash was used to handle and manipulate high resolution video and create the navigation device. I was part of the development team who created this experience using ActionScript 3 and Robotlegs.

Awards

This project won the Site of the Day/Month award from The FWA.

View Project »
Ray-Ban: All Tomorrow’s Legends
rayban_01 rayban_02 rayban_03 rayban_04 rayban_05
FWA Site Of The Month
Client / Agency
Rayban / Stinkdigital
Role
Flash & PHP Developer
Technology
Zend Framework, Robotlegs, Facebook API

A Facebook application that analyses your personal information to deliver one of 9,000 possible bespoke animations.

The application scrapes data from numerous different areas of the Facebook Graph API and scores the user against certain criteria to determine a sequence of animations to play (usually including some relevant images or statistics about the user).

Read a detailed case study by Stinkdigital.

Technical

The PHP Zend Framework and Facebook’s Graph API were used to perform the user data analysis. Flash and Robotlegs micro-architecture framework were used on the front-end to sequence the animations and add dynamic user specific content.

Awards

This project won the Site of the Day award from The FWA.

Yeo Valley: Karaoke
yeovalley_001 yeovalley_004 yeovalley_002 yeovalley_003
Client / Agency
Yeo Valley / Pirata
Role
Flash Developer
Technology
ActionScript 3, Robotlegs

A sing-a-long / karaoke Facebook application commissioned by Yeo Valley to accompany their TV advert of a spoof boy band ‘The Churned‘, which was aired during the X-Factor final ad break. The user could sing into their microphone and the application would detect pitch and match this against the original score for the song.

Technical

The Flash application accesses the users microphone data and uses a C++ library for pitch detection that was cross-compiled to ActionScript 3 using the experimental Adobe Alchemy project. The application was built using the Robotlegs micro-architecture.

Beeline: Mobile Top Up
beeline_001 beeline_002 beeline_03 beeline_004 beeline_005
Client / Agency
Beeline / Stinkdigital
Role
JavaScript Developer
Technology
JavaScript, HTML5 Video

A web application commissioned by the Russian telecom operator to show how easy it is to top-up with Beeline. A selection of humorous video clips, choosen based around the users phone number, were sequenced and played through.

Technical

Built in HTML and JavaScript using the lightweight MVVM Framework Backbone, RequireJS for asynchronous module loading and the native browser Video element to sequence and play videos based around a user’s (Russian only) phone number.

View Project »
Havells Sylvania: Product Finder
havels_01 havels_02 havels_03
Client / Agency
Havells Sylvania / UVd
Role
JavaScript Developer
Technology
JavaScript, TDD, Agile

Havells Sylvania are a provider of professional and architectural lighting solutions. During the redesign and build of their website I worked with the UVd development team to produce a product finder for the extensive and detailed product catalogue. The product finder provided the user with a method for filtering the product lines by brand, category and product line and also specify to a granular level the values for technical aspects of the products such as lifetime, colour temperature and voltage.

Technical

The product finder was built in HTML and JavaScript using the lightweight MVVM Framework Backbone, RequireJS for asynchronous module loading and the JavaScript testing framework Mocha.

View Project »
Wabbitware: Self-replicating software
wabbitware_001 wabbitware_002 wabbitware_003 wabbitware_004 wabbitware_005
Role
Creator / Developer
Technology
C, GNU C Compiler

Wabbitware is a critical software experiment. Rather than using a copyleft licenses such as the GPL General Public License to ensure the genealogy (access to source code) of software Wabbitware and any further Wabbits derived from the first compiled iteration carry with and distribute their source code whenever they are executed.

Wabbitware explores the notions of code and its associated practices in domains of the social, legal and technical. Within each software piece is an encoded and embedded subjectivity that raises questions about software’s construction and authorship. Whilst software continues to play a more pervasive role in day to day life it is one aim of this project to enable and encourage a curiosity about these implicitly objective technical assemblages.

It embodies in it’s code the principles of Free Software. “Think free as in free speech, not free beer.” Richard Stallman [link]

View Project »
Beat Barni
beatbarni1 beatbarni2 beatbarni3 beatbarni4
Client / Agency
SPAR International / Ultraviolet Design
Role
Sole Developer
Technology
ActionScript 3, Flixel

Barni is the official mascot of the European Championships held in Barcelona during 2010. Beat Barni was a button bashing athletics game concept commissioned by SPAR International and developed by Ultraviolet Design. The gameplay involved assuming the role of an athlete taking part in 5 levels/events of increasing difficulty. In each event the aim was to qualify by ‘beating Barni’ who had previously set his own score for each event. The events were 100M, 400M Hurdles, Javelin, Pole Vault and Long Jump.

Players could challenge others through various social media channels including Facebook and Twitter.

Technical

The game was developed in ActionScript 3 using the open source game-making library, Flixel.

View Project »
Red Pen Tool Video
RPT Video RPT Video RPT Video RPT Video
Client / Agency
TAG Developments / Ultraviolet Design
Role
Lead Developer
Technology
ActionScript 3, Red5 Media Server

After the successful development of the Red Pen Tool (RPT) marking and assessment software, built in 2009, Ultraviolet Design were asked to replicate the digital annotation features for video material from the classroom opposed to digitalised documents.

The RPT Video displays a video stream from a remote media server against a custom timeline that can be populated with text and audio annotations at specific in and out points (down to a 1 second accuracy).

Technical

The Red Pen Tool was developed in ActionScript 3. The application interacts with Red5 open source media server to enable audio recordings and retrieves and persists data through a custom third party web service/API.

View Project »