In one of a final sessions last term, we had a CAST London lab session based around the dynamic use of HTML5 as a visualisation tool. One of the key things learned in this session was how to use a combination of sound and images to visualise an investigation into our research question – in my case: “Who Abuses Who on Twitter, and How do they Respond?” Following the sadly growing trend of racist tweets towards high profile sporting figures on Twitter, my attention was once again captured by a the widely reported jailing of student Liam Stacey over his abusive tweets towards collapsed footballer Farbice Muamba. A brief summary of the case from the Sky News website reads:
Liam Stacey, 21, posted insulting remarks after the player fell on the pitch during Bolton Wanderers’ FA Cup tie against Tottenham Hotspur on March 17, Swansea Magistrates’ Court heard. Muamba, who suffered a cardiac arrest, is carried off the pitch The comments – which were made as the 23-year-old midfielder lay motionless on the ground – sparked outrage among other users of the social networking site. The first of Stacey’s messages began with “LOL (laugh out loud). **** Muamba. He’s dead!!!” Stacey then made further abusive remarks, including racist posts directed to black users. Police were inundated with complaints.
A quick Twitter crawl showed that discussion around Liam Stacey’s jail term was quite strong, with many outraged by Liam Stacey’s behaviour, and others questioning the severity of the sentence he was given, the way it was reported or if English law itself is equipped enough to deal with subject of offensive/racist behaviour on social networks. I decided that I would use my burgeoning HTML5 skills to capture the case and the discussion around the whole incident in an audio visual slideshow that reflected the slightly disrupted mood in the web sphere and in the British press surrounding this issue.
Method and tools:
To start, I wanted to find a news report that summarised the whole Liam Stacey vs. Fabrice Muamba case, and use the sound footage from it to create my HTML5 News Slide Show. I found a decent 2 minute report on the Sky New website, and used Quicktime to do an audio recording of it, and the free converter Online Convert to convert the resulting .mp3 file to an .ogg file so the HTML5 app can play audio files across most browser platforms. Then I tracked down a comprehensive tutorial that worked through how to create a fullscreen photo slideshow with HTML5 and jQuery. The original slideshow featured a series of New York street scenes, with a mixture of traffic noise and the sound of the shutter lens of a traditional camera taking the shots as each slide comes into view. I wanted to change these images to screenshots of the new reporting around Fabrice Muamba’s collapse, the racist tweets of Liam Stacey, and then add the collected soundcast to the resulting HTML5 slideshow.
Results and Conclusion: