Rebuilding the online local story – MA by practice (Final project)

(Above, previous work editing a Birmingham Mail’s story)

My proposal for MA by practice consists of creating a prototype of how online local story must be. This prototype is based on a deep report in which I will analyse how the current local news site are managing their resources to produce stories and what content they are offering to their audiences. So, I will deliver these two main things:

  • Local story made of interactive content and using a language and content based in my report
  • Report on current situation of local news sites, analysing strengths and weaknesses, and also checking out what new trends work in news, trying to answer the question: “How is the real native online story?”

Working with a professional framework

I am trying to give a professional framework to my prototype, to do so, I will involve a news site that which already exists. This would add real information on what resources are available, improving the quality of my report and also the prototype itself.

In the prototype, I will include “low-cost” interactive content and multimedia, with the aim to demonstrate that building the news of tomorrow is not expensive and exclusive. Nowadays, practices as data journalism, interaction, visualisations and mobile journalism become democratic in order to improve the content produced by journalists. I will also explore the coding world to demonstrate that journalists can use it.

CLICK to see how much time left I have.

CLICK to see how much time left I have (made with JavaScript)

Further information – What is my approach like?

My approach to this final project consists in two backbones: theory and practice. So during the first phase, I will gather as much information as I can in order to elaborate a report. I count now with many sources related to new ways of communication and journalism in local journalism, but also I will compile information from the main local news site which work in the UK to detect mistakes but also good practices.

Later in this part, I will have a look to concepts such as CRAP (Contrast, Repetition, Alignment, Proximity), how the story is showed, how the user’s view works (EyeTrack), inverted pyramid in online news, multimedia offer in local stories, interactivity and social media usage on news.

I am also improving my knowledge in JavaScript and jQuery. The technical part of this project depends on my own learning process dealing with language coding.

But, what will I do after getting better on coding? I will elaborate a local story using my knowledge and working from the field but also gathering data through data sets, FOI requests and other additional resources I have learned to use during all this process.

Facing interactivity, a personal reflection: what is next?

During the last few weeks I focused on the interactive practices on the Media. I wanted to know what is happening at this moment, and which tools are popular among journalists.

With the aim of grabbing some ideas and increasing my knowledge on this field, I followed those people and companies who are working on interactivity throughout Twitter and websites.



I also tested some tools by myself: CartoDB, StoryMap JS etc. Some time ago, getting interactivity was something extremely hard for those who were not ‘hackers’ (programmers).

Thanks god, a lot of good samaritans have created powerful and efficient apps which make it much easier than it was.

Despite all these miraculous things, we cannot forget the fundamentals: HTML, CSS and Javascript. Journalists cannot avoid to learn some coding as professor Jeremy Rue said before.

I have checked out some handbooks and websites which let you learn a little bit of this huge universe.

Learning to use space and time in an interactive way

One of the biggest problems as researcher is to know what you are looking for. A lot of things nowadays are considered as “interactive”: social media, feedback, animations, maps, timelines or quizzes are all different aspects of engaging people.

From my perspective, I was not sure about what things I should focus on. So I started with those contents that people normally see on digital newspapers today: maps and timelines.

I started having a look to journalist Alex Gamela’s blog in which I have found some interesting things related to interactivity, but also extra information about timelines. Alex, who is a former student of online journalism at Birmingham City University, had runned a project on timelines in 2010.

He commented some of the main editing tools who were in use at that time. This reading inspired me to figure out which apps are the most popular in 2015.

After publishing the post, I initiated a debate in Twitter to know if journalists normally use the same tools I had mentioned.I did the same with those tools to create maps. At this point, I realised that I would need some extra knowledge on Javascripts and geolocation. With the video below, I tried to explain a bit of this process.

Therefore, I used Open refine, which helps to clean data, in order to use Google Fusion Tables or Carto DB.

Code is unavoidable, but I found JQuery better than Javascript

Prior to this project, I had already had some knowledge on HTML and CSS languages, but I really did not know anything about Javascript. It was the next level.

First at all, I started to check out books like “Javascript in 24 hours” or “Javascript: the definitive guide”, and also doing some free courses on Code School and Code Academy, following journalist Jeremy Rue’s tips:

“Many people often fail to advanced past this point because they find difficulty in applying the lessons to real-world projects. It’s important to have something tangible to build and working toward that goal — and Googling questions often.”

This language is always a challenge. That is the reason I also tried JQuery, whereby I could aproach to coding in a easier way. According to Wikipedia, JQuery works as a “library of pre-written JavaScript which allows for easier development of JavaScript-based applications.”

 Upcoming project: Birmingham24, 24 issues in 24 hours

The good practises I have checked out encourage me to build an interactive story with multimedia contents in which I could put the theory unto practice. Honestly, there are many things related to code I still have to learn. After the first steps on the field, it is time to go further and try to do more complex things.

As my MA award leader Paul Bradshaw suggested, the upcoming elections are a very good opportunity to explore and do something great. In this case, young voters (18-24 years old) could be the perfect public, trying to create a story through 24 issues related to futures policies which will affect youngsters.




3 Interactive Stories In Which You Scroll Down

Through scrolling the user can start a lot of animations and processes which turn a simple story into a deeper journey. Surprises are always a good resource to keep people’s attention on you are showing. You also must remember that you only have 15 seconds to engage them.

Journalist and lecturer Jeremy Rue usually shares interesting links on interactivity using Delicious -you can follow his queue here-. I have picked up three samples which show the importance of scrolling inside the story.


CLICK HERE TO WATCH: Waiting for the sea

Waiting for the sea (BBC, 2015)

Users discover new multimedia contents each time they scroll down. The author, Rustam Qobil, finds harmony using pictures, text, video and maps. Everything here is linked toguether.

I really like how the maps reveal the grass drying up, and the sea’s edge disappearing.

CLICK HERE TO WATCH: America: Elect!


America: Elect! (The Guardian, 2012)

I admit I love cartoons and comic books. But going further, I see a lot of opportunities using such narrative in journalism.

In this case, the story combines animations, infografics and a bit of humour as well, telling a story from the beginning (Republican Party presidential primaries, won by Mitt Romney) till the end (Obama’s 2012 US election victory).

The Guardian United States interactive team have produced a lot of great news packages –you can follow them here-.

CLICK HERE TO WATCH: A Walk Through the Gallery


A Walk Through the Gallery (The New York Times, 2015)

You can take a walk at the Museum of Modern Art in New York to visit an exhibition of Henri Matisse. You see the paintings like a real visitor, moving across the gallery horizontally.

Although this idea looks very simple, I believe that it could be used not only to show exhibitions or places, but also to describe processes and evolutions.


“All Journalists Should All Know the Difference between HTML and CSS” says expert Jeremy Rue

Jeremy Rue, lecturer of New Media at the University of California (UC) Berkeley Graduate School of Journalism, told this blog:

Not all journalists will need to learn to code. But all journalists should all know how the web functions; the difference between HTML and CSS and the philosophies behind those forms.”

“The web is not just a technology, but an entire ecosystem of ideals and ethos that have imbued many of the thinkers who made the web possible.”

The experienced journalist and web developer, who has been involved for years in workshops on multimedia storytelling techniques, believes in the importance of a basic literacy of the web in terms of “understanding its nomenclature, its function, and the philosophy on which it’s built.”

From Googling tutorials to real-world projects

For those who want to learn how to code, he recommends online tutorials like Code School, and He added:

“Many people often fail to advanced past this point because they find difficulty in applying the lessons to real-world projects. It’s important to have something tangible to build and working toward that goal — and Googling questions often.”

Numbers VS Journalists

Regardless of many journalists hate coding, Rue still believes that knowing a little HTML and CSS as background is necessary:

“There are some journalists who hate coding, and that’s fair. I still feel they should know a little HTML and CSS as background. Those who find it stimulating and challenging might enjoy it more.”

He shares these articles some journalists have written about their learning processes:

Interactivity: begginning of a new era

Although big organisations like The New York Times and ProPublica have launched interactive stories, it seems that this trend is going on slower among the little ones. According to Rue, the same thing happened when TV was invented:

“It required an enormous investment in equipment and people with the skills to produce video. It took a few decades for TV to really find its form through the 50s and 60s. I suspect this will be less and less of an issue in the coming decade.”

Tutorial: Grabbing Data Using Google refine to Create Interactive Maps

When you think of creating a map which shows different locations, your first step must be getting langitude and longitude. Throughout Google refineavailable here– you can clean data and then, using a service as CartoDB, create an interactive map.

Google and Open Street Map offer free APIs

The video above -made by myself- talks about the importance of the Application Program Interface (API). This service is run by companies such as Google and Open Street Map, who provide free software. In brief, APIs are a type of database that we call to grab geocoding data.

In Google refine, a spreadsheet cleaner, we request latitude and longitude. The function we need is not always the same. It depends on the software:

For Google’s API:

"" + escape(value, "URL")

For Open Street Map’s API:

"" + "format=json&" + "q=" + escape(value, "url")

CartoDB and Google Fusion Tables

CartoDB is just one of many services in which you can change your spreadsheets into interactive maps. You may have problems trying to embed these maps using WordPress.

Some of the dirtiest restaurants in Birmingham. Source: Food Standards Agency

CLICK ON IT: Some of the dirtiest restaurants in Birmingham. Source: Food Standards Agency

Google Fusion Tables is probably the simplest one but also the more used app as well. In fact, you do not need any geocoding data, because the location is enough for this app.

CLICK ON IT. Source: Food Standards Agency

CLICK ON IT. Source: Food Standards Agency

StoryMap JS brings interactivity for anyone

Few days ago, we talked about Timeline JS as simple but powerfull tool to create interactive timelines. Its brother, StoryMap JS, also offers a strong experience, in which users immerse themselves whitin the story.

Journalist Thierry Labro from the Luxemburger Wort told me that his diary has recently used this tool for the first time ever (click on it to watch):



Unless you do not have any knowledge on Javascript, you can get interactivity for your content indeed. By the way, here three big reasons to use StoryMap JS:

1. The interface is so simple

Interface is like the simplest version of any editor. It displays ‘edit’ and ‘preview’ modes. You can go across the different slides of your piece.

2. Adding multimedia content is easy

Each slide is based in one picture. Next to this, you can show multimedia content, throughout an html box.


3. You can embed your work

After finishing, you can post your work on any site you wise, but remember that you must use user to embed its iframe code -it’s my case-.

This tutorial can make your first steps whith this tool easier:

Top Simple Tools for Journalists to Create Interactive Timelines

Stories talk about an specific time. Luckily, today you can create your own timelines which support your content. Showing a story across the time enlights audience about previous facts, which are very necessary to understand what is going on now.

Thus, timelines are one of the ways to get interactivity. Your public can go back and go forward and enjoy multimedia content in each event. By the way, these are the easiest but useful tools to make it possible: Timeline JS, Timetoast and Timeglider.

 1. Timeline JS

The most complete of them: it is free, powerful, clear. Using a simple spreadsheet you can put into the cells olaoladifferent multimedia stuff, as well as you can curate content from the social networks. It has been used by companies as Al Jazeera, Le Monde or TIME magazine.

 2. Timetoast

Its minimum cost is $5,99/month, but the truth is that you are paying easiness. Forget the spreadsheets, you can add timetoastevents directly. It is also perfect to work in group: can be used by five accounts and more. People can also comment in the own timeline.

 3. Dipity

You can customise four types of presentations (Timeline, flipbook, map and list), sizes and colours, and get the RSS dipityfeed as well. It is not as elegant as Timeline JS, but it is enough for assingments and other uses.