My Noda 2016 presentation

Beginning
These are the questions we need to answer every time we start making special layout for the web.
- Text or non-text?
- Ration or emotion?
- Linear or non-linear?
- Video or no-video?
- Scroll events or click events?
- One part vs multipart?
- Free flow or snap to view?

 

Snow Fall (2012)
Text, emotion, linear, video, scroll events, multipart, freeflow

 

Prehistoric examples
Example 1998: Beaty operations (Linear, non-text, no-video, emotion)

 

Example 1999: Nuclear power plant (Linear, text, video)

 

Example 2001: Drag queens (Non-linear, non-text, multipart)

 

Modern examples
2013/2 30 days as muslim (Linear, audio, one part)

 

2013/3 Poverty in Finland (Linear, one part)

 

2013/4 Covers of HS magazine 30 years (Non-linearish, non-text)

 

2013/7 Former president mannerheim love letters (Linear, audio)

 

 

2013/7 Famous band’s last summer (Linear, non-text, emotion, audio)

 

2013/10 The magician(Linear, scroll events, video)

 

2013/10 A boy milks a cow in nigaragua (Linear + scroll)

 

2014/1 Determine to what class you belong to (Nonlinear, emotion)

 

2014/5 Deep – divers in cave (Linear, text, video, emotion)

 

2014/6 Story of Edvard Munch as web comic (Non-text, linear, freeflow)

 

2014/9 Estonia 20 years (Emotion, text, video)

 

2015/1 Auschwitz 70 years (Emotion, text, video) – LEARNINGS TRANSFERRED TO MAIN CMS

 

2015/5 The heart attack as it happened (Emotion, text, video)

 

2015/5 Close-up on mosquitoes (Linear, video, snap to view)

 

2015/5 Story of Jesus (Linear, non-text, video)

 

2015/9 World comparsion (Non-linear, non-text)

 

2015/10 Evolution game (Non-linear)

 

2015/11 Climate change (Non-linear, text)

 

2015/12 Star wars Helsinki (Non-text, emotion, video)

 

2015/12 Recipe visualization (Non-text, non-linear)

 

2016/3 Vertical pictures (non-text, snap, emotion)

 

2016/2 Isis game (non-text, snap, emotion)

 

What have I learned so far
- The purpose of elements in special layout elements is to support text.
- The flatter the better.
- Emotion rocks. Video rocks.
- Its not user experience, it’s reader experience. (Georgia Panagiotidou)
- Apps suck.

 

Links for my presentation at Noda

These links contain all the examples I’m showing at my presentation in Noda15 conference.

Part 1: In-app analytics

Part 2: Nice things that were not so popular

Part 3: Unexpected popularity with these

Part 4: Helping readers to understand the format

Ohje: Näin kierrät Googlen hakutulosten poiston

Näin google ilmoittaa hakutulosten poistosta.

Näin google ilmoittaa hakutulosten poistosta.

Tästä päivästä alkaen Google on ryhtynyt poistamaan joitain hakutuloksia EU-oikeuden päätöksen perusteella. Jos tuloksia on poistettu, Google ilmoittaa siitä sivun alareunassa tekstillä: “Osa tuloksista on ehkä poistettu eurooppalaisen tietosuojalain nojalla.”

Vaikka osa poistoista voi olla perusteltuja, myös talousrikolliset, pedofiilit ja poliitikot ovat pyytäneet itselleen kiusallisten tietojen poistamista. Tämä tarkoittaa sitä, että Google.fi ei enää välttämättä löydä kaikkia olennaisia tietoja netistä. Etenkin väärinkäytöksiä paljastaville tai poliitikoiden menneisyyttä kaiveleville toimittajille tämä voi olla vahingollista.

Hakutulosten poisto on mahdollista kiertää. Se tapahtuu käyttämällä Googlen kansainvälistä, Yhdysvalloista toimivaa sivua Google.com. Google ohjaa suomalaiset käyttäjät lähtökohtaisesti Google.fi –sivulle, joten Google.comiin pitää osata mennä. Se tapahtuu näin:

JOS ET OLE KIRJAUTUNUT GOOGLEEN TAI GMAILIIN
Mene osoitteeseen http://www.google.com/ncr

JOS OLET KIRJAUTUNUT GMAILIIN TAI VASTAAVIIN PALVELUIHIN
Mene osoitteeseen http://www.google.com/preferences#languages ja vaihda käyttämäksesi ykköskieleksi englanti. Kakkoskieli voi olla yhä suomi. Tämän jälkeen kaikki haut tulevat automaattisesti Google.com –saitilta.

Four news apps tutorials for Digital journalism days

This post contains the tutorials for my presentation at Digital journalism days in Warsaw, Poland.
MAP WITH GOOGLE FUSION TABLES

This excercise is to make interactive map with Google Fusion Tables. The idea is to get data on life expectancy from World Bank, merge the data with country borders and style it.

1) Go to world bank website: data.worldbank.org. Get data Life expectancy at birth, total (years) Direct link. You have to download the excel file.

2) Remove all empty years from the data with Excel.

3) Open Google Fusion tables here. Upload the data you have saved to your computer.

4) Next you have to merge the World bank data with country borders. Do the following:
– Choose File / Find a table to merge with
– Select World AEM borders
– Select Country code and ISO3 (Country code as well) Check the match and click next
– Click merge, and click view table

5) Add a map (Click on the red + sign) and open the Map tab

6) To change map colors, do the following:
– Choose Tools / Change map styles
– Choose Polygon and Fill Color
– Go to Buckets-tab. Select Divide into buckets and choose 2010 as the variable.
– Click use this range to select range based on data

7) To style popup, do the following:
– Choose Tools / Change info window layout
– Select country name and 2010 to be only active fields
– You can style the popup more, if you know HTML

8) To publish the map, you must make it public. Use Share-button on the upper right corner.

DATAWRAPPER

This excercise shows how to use Datawrapper.

1) First log on to Datawrapper.de and make an account

2) With Excel, make data that contains 10 countries and their life expectancies (Use the data from previous excercise). First row must contain headlines Country and Life Expectancy

3) Go to datawrapper. Click Create chart

4) Paste your data to the field. Click Upload and continue

5) Describe your data in tab 2. Put the link to the world bank data here.

6) Click visualize and style your graph.

7) Click publish and get the iframe code.

 

MAKE A TIMELINE WITH TIMELINEJS

This is tutorial for making interactive timeline with TimelineJS. You’ll need a Google account for this.

1) Go to TimelineJS page here

2) Go to “Make a timeline”. Click on the button that says Google Spreadsheet Template

3) When the window has opened, click “Use this template”. You will see a Google Spreadsheet document. This document contains the content of the timeline. One row is one slide.

4) Remove rows 5 to 9 from the file.

5) Go to row 2. In the cell “Headline”, write the headline for the timeline. To cell “Text”, write content for the cell. If you wish, you can include a picture as well. Add this link to cell “Media”: “http://www.esamakinen.fi/e/wp-content/uploads/2013/02/robo-by-freevectorsdaily.jpg”

7) Repeat part 5 for rows 3 and 4. Just make up some content

8) Click “Publish to the web” from pull down menu “File”. When a dialog opens, click “Start publishing”

9) An url will appear to the bottom of dialog window. Copy it to clipboard. The URL looks like this: https://docs.google.com/spreadsheet…

10) Go back to TimelineJS page. Paste the link you copied to field “Google Spreadsheet URL”

11) Click “Link to preview”. You’ll be seeing a working timeline.

12) You can add rows to Google Spreadsheet. When you reload the timeline, it should reflect the changes.

 

GOOGLE FORMS

This is an excercise to make small crowdsourcing project with Google Forms.

Remember, that Google won’t accept too large datas: size limit is 400 000 cells.

1) Go to Google Drive and select Create Form

2) Enter name and select the default theme

3) To Form Description enter the headline and some explanation, what you are asking

4) Enter the first question and add more questions.

5) Edit the confirmation page to reflect what the user will see when he or she sends the form.