Have a Look at These New Sites Around the Web

Just wanted to bring your attention to some news-related projects that launched this week:

ReportingOn logo
Reporters looking for advice from other reporters should take a look at ReportingOn.

Ryan Sholin’s revamped site is like a help forum for news developers and journalists, particularly beat and local journalists. Follow ReportingOn on Twitter. You’ll find me on ReportingOn too.

Everyblock logo
The hyperlocal news and data site Everyblock released its source code, much to the delight of Django developers everywhere.

Everyblock is the brainchild of Adrian Holovaty, one of the co-developers of the Django framework. Read more about the project, poke around and see what you find.

Personally, I’d also like to see the source code for the Everyblock iPhone app, but one thing at a time.

W3C Mobile Web Initiative logo
If you want to learn more about mobile site design, consider signing up for W3C’s first-ever live training session in Cambridge, UK.

The event takes place Oct. 13. Registration — at a hefty €399.00 (about US$558 at today’s exchange rate) — includes lectures and hands-on workshops, as well as access to the nine-part course. Read the full description, register online or read more about the W3C Mobile Web Initiative.

And finally, if you’re here because of the list of “100 Best Blogs for Journalism Students,” welcome!

Feel free to browse around. A few of the most popular posts on Ricochet include:

What ideas and tools would you like to know more about? Drop a comment, or ping me on Twitter @MacDivaONA.

Have Reporting Work You’re Proud Of? Enter the Online Journalism Awards

Want to be recognized for the online news you’ve reported, no matter your outlet’s size or affiliation? Then be sure to submit your work to Online News Association’s Online Journalism Awards competition. Deadline is Tuesday, June 30, so best send this in today. Update: The deadline’s been extended to July 8, so send your entries in, stat.

There are several categories you can enter; four get a share of $30,000 in total prize money:

Read the full contest rules and additional pointers, then get cracking. And good luck! Winners will be announced Oct. 3, during the Online News Association conference in San Francisco.

Learning from Young Journalists – The Livingston Awards

Nominees for the Livingston Awards for Young Journalists were announced today. The annual prizes recognize reporting by reporters under 35.

This year’s list is pretty big. Unfortunately, the website didn’t include links to the entries, so I spent my evening digging around.

After all, one of the best ways to learn any craft is to study what others do.

Winners of the $10,000 prizes for local, national and international reporting will be announced June 3, 2009.

If you find better links to content that should be included on this list, leave a comment and I’ll update the list.

Links for My Revenue 2.0 Talk at BCNIPhilly

Revenue 2.0: Ideas for Making Money on News Sites

“News is the stuff we put around the advertising.”
—Quoted by so many people in news and advertising no one remembers who said it first

Yesterday a group of journalists of varying experience and expertise got together to do something about advertising. That’s right: News people were proposing ideas for making money.

The one-day sprint, Revenue 2.0, took a “less chat, more splat” approach to revenue solutions for mobile, classified ads, ads for small- and medium-sized business, and display ads used (or not) on the homepage.

The classified ads proposal is up on the #rev2oh site.

Notes from the other teams will be posted tomorrow morning. From what SND President Matt Mansfield tells me, the concepts-oriented document I wrote on behalf of the homepage and display ads team will go up on SND Update with mockups from team members Kristen Novak and David Kordalski.

Meanwhile, read the thoughtful day-after post by Patrick Cooper and the #rev2oh tweet archive.

One Last Look at the Rocky Mountain News Newsroom

By now you’ve probably read about the shuttering of the Rocky Mountain News, which foundered under rising costs and falling revenues.

The Denver Post put together a photo tribute to is scrappy rival.

Staff at The Rocky produced their own thoughtful wrap video.


Final Edition from Matthew Roberts on Vimeo.

The Rocky’s closure means Denver now has just one newspaper (with a website) that covers the city. But there are still several TV news stations (with websites) and lots of blogs.

People will miss The Rocky’s particular editorial mix, the stories and the bond that comes from strongly identifying with anything well-loved, and having gone through the particular heartbreak of losing a daily in a two-paper town, I know what that’s like.

But I wonder what this says about the way businesses are run. While I haven’t closely studied what happened to The Rocky, it seems this wasn’t a problem of content or editorial overreaching — it was a top-notch, locally focused news outlet. The problem, it seems, was one of being a line item on a debt-heavy corporate balance sheet.

Understanding Infographics, First Pass

As promised in a previous post on learning information graphics (sometimes shortened to “infographics”), I’m posting my raw notes from Day 1 of an information graphics workshop taught last month by Alberto Cairo and Xaquin G.V., two leading practitioners.

Alberto Cairo teaches an infographics seminar by Medialab Prado on Flickr

Above, Alberto Cairo teaches a data visualization seminar at Medialab-Prado in Madrid in 2007.

Xaquin wrote about the course in his native Spanish on his site, Xocas.com (and here’s Google’s attempt at an English translation).

As for me, I’m posting my raw notes from the class. There are a lot of them (it was a 12-hour day), and because they’re raw, some bits won’t make sense. But like the process of designing information graphics itself, I’ll be culling and organizing what’s here and eventually, the patterns and lessons will become clear.

You can participate in the evolution of this post by asking questions, suggesting links, and finding the graphics discussed. Feel free to leave them in comments or email me.

Beyond Bootcamp “Creating Effective Online Infographics” Notes

RULE: In graphics, the less you know, the more abstract the representation should be.
Use simple diagrams that respect proportions, precision and accuracy.

KEY: How will infographic help inform the reader understand the story?
“Infographics is not art, it is a conveyance of information.”

Pie charts are easily distorted and require people to read additional text to understand the information the pie chart tries to convey.
Instead of pie charts, it’s better to use a bar chart to show relationships between proportions.

Good information graphics do not “simplify” information. They’re not meant to degrade the data to make the information more “accessible.” Information graphics are a tool to make stories deeper and to provide context. A complex topic demands a complex graphic. Precision is key.

RULE: “Form Follows Function” < -- most important rule.
What is the nature of the data?
If the goal of the graphic is to represent change, show change.
If the goal is to faciliate comparison, display a comparison, don’t do a map.

(Example graphic) A defesa dos Vizinhos (Brasil)
Goal is to display the relationship of quantitative data, not geographic data, which was the execution.

In class, Cairo used a scatterplot diagram. Military x Population. On another graph, he showed military manpower-to-budget relationship.

The information could have also been well represented on three linear plots stacked one above the other:
Population, military budget, military forces.

NYT “Paper Trail” by Hannah Fairfield (data from 2005, World Resources INstitute, UN) – Multivariate scatterplot.
(Paper consumption per capita x GDP per capita, with total paper consumption and change in paper consumption.)

Exame (Brazil)
Information Graphics: The use of diagrams to transform data into information
Diagram: Visual representation of quantities, spaces or relationships.

Bayeux Tapestry depicting the Battle of Hastings (1066)
An illustration (early comic) that illustrated the battle and celebrated the Norman victory.
(Cairo suggests we read the Wikipedia entry to learn more.)

T-and-O maps (Goal: represent the world according to religious teaching)
Mappa Mundi at Hereford Cathedral (1278)
Cairo calls them “maps of the imagination.” Their purposes is not to accurately represent the physical world, but to depict the world as dictated by religious precepts.

Which leads us to: A diagram is an abstract representation of reality.

Leonardo da Vinci – Renaissance: The world could be understood by reason, not religious thinking.
Leonardo’s revolution: explanations could be conveyed by illustration in combination with text.

De Humani Corporis Fabrica,” Andrea Vesalius (XVI)
The most accurate and precise book on anatomy. The books were used until the 19th century.

John Snow (1854) Map of cholera outbreak in Soho/London
Epidemiologist was able to show the source of cholera was a contaminated water pump by noting the number of deaths per building on a street map.

William Playfair (19th cent.) “The Commercial and Economic Atlas” / “Statistical Breviary”
Playfair invented line, pie and bar charts. Ideas were based on cartography. Playfair was an engineer who knew about cartography.

NEW TOPIC: Exploring cognitive psychology
How does the brain gather, process and synthesize information?

To help people comprehend abstraction: Only keep the things that are relevant and eliminate what’s extraneous.
Why do diagrams work, even if sometimes their shape is not physically precise?
Cairo’s favorite graphic: Harry Beck’s London Tube map.
– The goal was to help people get from one point to another.
– Gave up a representation of distance for clarity.

Diagrams aid thinking by taking advantage of how the mind processes visual information.
Hierarchy
– Color is quicker to process than shape. (Highlight what’s important.)
– Brain tends to group things based on proximity
– Brain tends to group things based on similarity
– Brain tends to group things by enclosure

Orientation
– Based on assumptions about weight (density) and light (illumination)

Movement
– Don’t pair words with movement
– Do pair words with static images, then take away text when things are in motion to allow reader to focus on the action

Bubble maps (bubble graphics) are good for showing trends.
But if you’re trying to make comparisons, a bar chart will be the simplest, most effective presentation.

LINEAR GRAPHICS (Used to illustrate a process)
There’s still room for linear graphics, e.g., Intro > Step 1 > Step 2 > Step 3 > secondary information.

    Tips for creating linear explanations:

  1. In print you create hierarchy by using sizes and colors (or shades or gray). In an online graphic, you have an additional tool: time.
  2. Put the newsworthy information first. The secondary (background) elements, should be placed at the end of the animation. Place the main information on the main timeline. Use rollover buttons for complementary data.
  3. Don’t show too many elements at each step of the action. As a general rule, each stop in the movie should explain just one fact.
  4. Don’t show large blocks of text and a moving object at he same time. Otherwise, the reader won’t know where to look.
  5. The more complex the thing you have to explain, the more steps you will need to do it, but be careful. Use as few steps as you can without jeopardizing the depth of the graphic.

    BREAKING NEWS ONLINE GRAPHICS
    All graphics produced in the last 10 years of elmundo.es have been stored online. Look. Learn.

    If you want to have one desk doing graphics for all platforms, use technologies and software that facilitate the transition between platforms.
    - Cairo suggests using 3D software for modeling illustrations (rather than 2D drawing). Several versions of the same graphic can be rendered and exported to various media/platforms. He uses Maya or 3D Studio Max.
    - Blender is open source. Cairo says it’s not as powerful as Maya or 3D Studio Max, but it’s still a good tool.

    Don’t think about one platform first. Think about all platforms available simultaneously.

    While Vu Nguyen was a UNC student, he created a 3D model for White City Stories. Cairo says it’s beautiful and informative. The story took 2-3 weeks (total) of full-time work to produce the piece. Nguyen is now at MSNBC.

    NEW NARRATIVE FORMS
    Look through “The Met’s New Greek and Roman Galleries” (NYT)
    Video, photographs, 360 views, audio

    Look at “Chasing Crusoe” (UNC-CH/U-Andes project)
    Wanted to show the fictional story, the real person and culture the story is related to, and the link between the two.

    Identify which media will tell the story best.

    South of Here

    PROVIDING CONTEXT
    Create layers of depth
    – Series
    – Collections
    Spanish Royal Wedding 2004
    Athens Olympic Games

    NEW PARADIGM
    Some graphics can be software tools.
    Whatever data is in binary format can be represented in multiple ways; infographics journalists become developers.
    The tools become a way for readers to interact with the information.
    Ex: NYT: Is it better to buy or rent?
    Some of the most effective infographics tools come from public transport providers. Ex: Madrid Metro trip planner

    THREE KINDS OF INTERACTION
    Instruction – User issues commands to a system with the goal of releasing a response or achieving a goal
    calorie calculator (ElMundo.es)
    The Ancient Way” about Galicia, Spain.

    Manipulation – The user changes the physical (virtual) settings of objects in the virtual scene: sizes, positions, colors, etc.
    How would you live in a 25 square meter apartment? (ElMundo.es)
    NYT campaign finance map

    Exploration – The user can move freely around a virtual scene.
    Online games (RPGs)
    The work of Second Story Interactive Studios
    Monticello Explorer, an interactive site from the Thomas Jefferson Foundation

    Programming allows the separation of design from content and the creation of dynamic presentations.
    In traditional infographics (as what’s produced in Illustrator), design and content (data and its shape) are in the same file.
    With programming, you can create a template, then dynamically load the data into the file, allowing for faster collaborative development of the infographic.
    – XML (Data)
    – Flash graphic

    Photo: Medialab_Prado/Flickr

What’s With ‘The Hed Made Me Read It’?

Headline writing has always been part of the craft of journalism. Online, it’s even more important as it catches reader attention and affects Google page rank.

Those who follow me on Twitter will sometimes see an update that begins, “The hed made me read it.”

In doing so, I’m trying to point out just how important it is to write a headline that makes a reader want to click. And in turn, I want to acknowledge the work of sharp journalists — and copy editors in particular.

In the last few days, it’s been fun to see “the hed made me read it” and its variations show signs of becoming a mini-meme on Twitter. Kevin Koehler picked it up. Dan Berko gave it a twist.

What headlines have made you want to click on content? Want to follow my tweets? You’ll find me @MacDivaONA.

Addendum: If you’re looking some background on hedwriting for the Web, I suggest:

Easing Your Way Into Infographics

For weeks, I’ve been trying to figure out the best way to put my notes from the “Creating Effective Online Infographics” workshop here on Ricochet.

I started looking at examples from some of my favorite information graphics and visualization blogs, including FlowingData, Cool Infographics and Infographics News.

The more I looked, the more I realized there was no way I could match the clarity and humor on these sites. The examples and posts are written by those who’ve spent years doing this stuff almost all the time, every day. Me, I’ve had little more than a life-long fascination and two and half days in a crash course.

Still, this stuff is important. Why? Because we’re spending more time with information in all its various forms and we’re going to need more people who can make sense of it.

“Infographics is not art, it is a conveyance of information,” instructor Alberto Cairo said on the first day of class.

In the spirit of what he tried to teach us, this next series of blog posts will hopefully make order out of chaos.

First, let’s start with a little comedy, as an example of what infographics is not. This is “Tidying Up Art” from cabaret artist Ursus Wehrli.

Hackathon Weekend; Tools for News Moves to SND.org

This weekend several members and supporters of the Society for News Design met to rethink and rebuild its multifaceted website. The site will have a new look, new features and better integration among its many parts.

Society for News Design hackathon weekend

Chris Amico’s Tools for News is now part of the SND.org website. You’ll find it at toolkit.snd.org.

William Couch is comping what will become the new member directory.

A host of people are working on a revised job listings page.

You’ll see changes happen bit by bit over the coming months.

Thanks to Tyson Evans and Matt Mansfield for organizing the hackathon.

Next Page →