#smpLAB blogger på NONA sine nettsider

NONA (Norwegian Online News Association) har denne uka publisert et blogginnlegg vi har skrevet for sida (netthoder.no). Bestillingen var følgende; beskriv hvordan Sunnmørsposten startet med datajournalistikk, og si litt om hvordan dere jobber.

Her kan du lese blogginlegget:

NONAblogg

Advertisements

A five step guide on how to get over it

This talk was given at the Pecca Kucha session at FUSION14 – Society of News Designers / Scandinavia’s annual news design conference in Copenhagen on the 9th of October 2014. (Touch the image to see the slides -or find them here: Pecha kucha Fusion14 )

PowerPoint-presentasjon

Hello, my name is Liv and I am a designer at Sunnmørsposten i Ålesund, Norway. My background is graphic design at commercial agencies and newspapers. I want to give you a five step guide on how to get over it. Get over what? I’ll get to that, but first let me tell you a story.

I love cute things, and I like to be in control. So print design suits me well. But when I had the opportunity to work with a data journalist team visualizing data driven stories on our website, I said yes.

I had basic web design experience and pictured our good stories and designs, now with the possibility to add audio, video, animation, make interactives! I mean, the sky is the limit online, right?

Well so I thought until I met Mr. CMS – our Content Management System. Boy, was he square! I tried publishing cute designs, but every time I felt like he said: “Hey there, missy! I’ll decide how things look around here, and everything will look the same when it hits the screen!

And THIS is how I felt my designs looked when I published them. That was so frustrating! I thought, maybe I can change the way our CMS is set up, so I gain control over my designs? I don’t know how to do that. I know, I’ll call the CMS Help Desk!

“Hello, you have now reached the CMS Help Desk, you are number seven zillion in line, please hold, we’ll get back to you in two years”… I sat down, looked around for someone – anyone to come help me. A Computer Jesus to come save me. Guess what – nobody came.

And I was in the dark. But where do I turn when I’m in the dark? To Google, of course. I started searching for help with our CMS problem and for an animation tool. I tweeted people I barely knew, read blogs to see what people had done before us.

And I chose Adobe Edge Animate, a great tool for animation. I spent time learning how to use it and even more time figuring out how to implement animations through our CMS. But with a lot of help from kind people out there, I made it – and published our first self-made interactive. Our readers went “Yei! Hey – what about mobile – it doesn’t work on mobile!”

What? I have to think about that too? Of course I do. I had made the animation too heavy for mobiles to handle. Back to square one. I started looking for tools that were easier to get started with and worked better on all platforms.

And I found a lot of great ones. All these require is that you put data in, and they provide the interactives for you. Great, right? Only not all of them worked well inside our CMS. So we decided to set up a domain outside our website  – a blank canvas to publish these kind of stories on. At this point we were so lucky to have a developer assigned to our team, and we got even more advanced in ideas to projects. But then happened what always happens to single developers in a news room.

He drowned in work. So my situation now was: I have a blank canvas, I have tools and some knowledge and I have a developer by my side who I can ask stupid questions. It’s time to get over it and learn how to code.

I need to learn how to build the ideas I have. I used a site call Codecadamy to learn the basics, I went to conferences and jumped into hands on sessions far beyond my knowledge. I’ve used html5, CSS, JavaScript, JQuery and even Python for one project.

We’ve made a lot of news apps and services for our readers, and even won awards for some of them! And the best part is: coding isn’t that hard, it’s actually fun – and I am back in control over my online design. So my five steps to you are:

1 – Get over it! The world is digital. I know you as designers want to still influence the world an how it’s designed in the future. But you won’t be able to if you don’t know how to build it.  You need to learn how to code – or at least understand code.

2 – Imagine how you want your designs to work. There are (almost) no limits to what you can to online. We are at the starting point of how to tell the news digitally – who knows how we consume news in five years? Your ideas may contribute to push the limits further.

3 – Care about how your stuff looks on all platforms, and get pissed when it breaks. The online audiences are the most impatience in the world of consumers. Do not let it be up to your CMS to decide what works and what doesn’t. Fix it.

4 – It takes time to learn to code, but it’s worth it! No Computer Jesus is going to come save you, and if he does, he’ll have your job before long. And to all editors out there: invest this time in your designers. Computer Jesus is going to cost you a lot more, and he does not necessarily know good design!

5 – Search! Even great developers spend about 70% of their time searching for code snippets, asking each other for help. Use social media, google, get on Git Hub and Stack Overflow. People are out there and actually willing to help.

Last, but not least, check out our blog to see what’s going on at Sunnmørsposten’s Data Team. Thanks!

Alle disse gratisverktøyene vi bruker…

Hva er egentlig Infogram? Eller Datawrapper? Jeg har fått spørsmålene mange ganger, og her er en oversikt over de verktøyene vi bruker mest, og eksempler på prosjekter vi har laget med disse verktøyene:

TimelineJS-logo

Timeline JS er laget av Knigtlab på Northwestern University i Chicago. Verktøyet gir deg en enkel måte å illustrere – nettopp –  en tidlinje på. Du legger til datoer, steder, hendelser og bilder/video, og får ut i andre enden en embed-kode du kan legge til på nettsiden din. Enkelt! Det eneste du må huske på er at alt av bilder og video må allerede finnes et sted på nettet. Du kan altså ikke laste opp bilder eller videoer direkte i Timeline – bare nettadresser. Vi brukte TimelineJS på disse prosjektene:

Aksladrapet       Flaggsaken


thinglink_logo1-2ci0gdf

Thinlink er en tjenester som lar deg laste opp et bilde og legge inn interaktive punkter i det. De interaktive punktene kan være tekst, bilder, video, lenker til andre nettsider osv. Du kan til en viss grad bestemme layout på punktene, og du kan bruke Thinglink til veldig mye rart. Du får en embedd-kode til slutt, som du legger inn på nettsiden din. Vi brukte thinglink i disse prosjektene:

RUSH     Aksla-pp-bilde


Infogram-logo

Infogram er et infografikk-verktøy. Du legger inn tekst, tall og data, og infogram gir deg diagrammer i en interaktiv infografikk tilbake. Det er ikke like lett å integrere infogram rett i artikler på våre netsider, pga begrensninger i bredde på infografikken. Derfor har vi lagt disse på egene, blanke sider, der de får den beste presentasjonen. Du får også her en embeddkode ut som du limer inn på din nettside. Vi bruke infogram på disse sakene:

ValgNabolag     Skatt2013


2JHwwi3B_400x400

Datawrapper er et enkelt og nyttig verktøy som lar deg lage grafikk som søyle-, sirkel- og linjediagram til publisering på nett. Verktøyet er gratis, du må kun registrere deg med ei epostadresse. Det du trenger er et datasett behandlet i for eksempel Microsoft Excel, som limes inn i Datarwrapper. Her kan du velge diagramtype, endre farger og utforming og navngi variabler. Du kan også lage søkbare tabeller. Når diagrammet er ferdig kopieres embedd-kode som du legger til på din nettside. Diagrammet kan endres etter publisering. Vi brukte Datawrapper på bl.a. dette prosjektet:

Julekaker


FusionTables
Google Fusion Tables er et verktøy for å lage interaktive grafikker. Verktøyet kan brukes både til å lage søylediagram etc basert på et datasett, eller du kan sammenligne geografiske områder (f.eks. kommuner) på et kart. Krever at man har en gmail-konto. Datasett behandlet i f.eks. Microsoft Excel lastes gjerne opp i et Google-spreadsheet før det kan brukes i Fusion Tables, evt lastes rett opp fra datamasinen.
Framstilling av kart kan være vanskelig, det avhenger av hvilket område man jobber med og om det finnes lett tilgjengelige kart med grenser. I Sunnmørsposten har vi et kart som kan brukes til sammenlikning mellom de 25 kommunene i dekningsområdet vårt.
Du har stor frihet til modifisering av grafisk uttrykk, det finnes enkle forhåndsinnstillinger man kan bruke. I tillegg er det stor frihet til modifisering av uttrykket, men det fordrer litt mer enn grunnleggende datakunnskap. Når grafikken er ferdig kopieres embedd-kode inn på din nettside. Skal du lage diagrammer uten kart er Datawrapper et enklere alternativ. Vi har brukt Google Fusion Tables på disse prosjektene:
Forurensing Boligbygging UlykkerSulavegen

Slik gjorde vi det: Valggrafikk

Høsten 2013 var det stortingsvalg i Norge, og vi ville vise frem kandidatene fra Nordvestlandet i en interaktiv grafikk med animasjon. Vi samlet informasjon om kandidatene gjennom en intervjuserie samme sommer, hentet inn data for hver enkelt kandidat og visualiserte det hele ved å bruke programmet Adobe Edge Animate. Resultatet ble en ryddig oversikt med lett tilgjengelig interaktivitet. Stilen er tegneserie-preget med sterke, klare farger. Dette var vårt første prosjekt hvor vi brukte Adobe Edge Animate.

Verktøyer brukt: Excel, Adobe Illustrator, Adobe Edge Animate

Valggrafikk_stor

Fra eksperiment til prisvinnende LAB – FOREDRAG

Sunnmørsposten startet å jobbe med datastøttet journalistikk sommeren 2012. Ett år senere vant de Nordic Datajournalism Awards med RUSH-prosjektet. Hvordan skjedde det og hvorfor vant akkurat dette prosjektet lesernes hjerter?

Digital redaktør Tormod Utne og mediegrafiker Liv-Jorunn Håker Ottesen fra Sunnmørsposten har vært på Hellkonferansen 2014 for å fortelle om dette. Last ned foredragets plansjer ved å klikke på bildet her:

Bilde

What have we learned?

Lørdag skal vi fortelle på #djinorden13 hvorfor det vi driver med i #smplab er «Best practice» i Norge. Det vi driver med er selvfølgelig ikke best i landet, men det vi gjøre er nok ok ut fra størrelsen på avisa. (Vi er ca 35 journalister og smp.no har 200.000 unike brukere per uke på nett.)

I korte trekk er historien som følger: «How Sunnmørsposten, a medium-sized newspaper in Ålesund, Norway, got started doing datajournalism. Started off with one journalist using Microsoft Excel and Google Fusion Tables. Little more than a year later the team also includes a web designer and a web developer, and are nominated for The Nordic Data Journalism Awards.»

Vi skal også si litt om design og hvordan vi gjorde Rush i Ålesund, som vi ble nominert for i kategorien storytelling: http://bit.ly/RUSHiAalesund

Avslutningsvis prøver vi å fortelle hva vi har lært etter et år med datajournalistikk:

What have we learned? Tips for others in a start-up phase:
– Learn excel.
– Work in teams, preferably of people with different abilities.
– Chase the good story. Beautiful infographics does not matter if there is no story.
– Take one step at the time. Be inspired of that others do, but do not be stressed when your first stories are not at the same level.
– Network, meet other datajournalists. Exchange ideas and learn from others.
– Be open and share.
– Choose your tools. No online visualization tool will serve your every need, but pick a few and learn them.
– Datajournalism must be a priority in the organization. Editors must allow for both learning and the time it takes to finish a story.

Finsk blogg om datajournalistikk

Da er LABen på plass i Stockholm, og i går startet det med samling for alle som skal holde foredrag på konferansen. Der møtte vi bl.a. Esa Mäkine (@esamakinen), datajournalist i Helsingin Sanomat. Han han en blogg om datajournalistikk, der han bl.a. snakker om hvordan veien videre burde se ut innenfor datajournalistikk. Les den her.