Tumblelog by Soup.io
Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

May 01 2012

17:21
17:21
17:21

April 22 2011

12:49

How to Design Fast, Interactive Maps Without Flash

Until recently if you wanted to create a fast interactive map to use on your website you had two main options - design it in Flash, or use Google. With the prevalence of mobile devices, for many users Flash isn't an option, leaving Google and a few competitors (like Bing). But we are developing open source technologies in this space that provide viable alternatives for serving fast interactive maps online - ones that often give users more control over map design and the data displayed on it.

TileMill, our open source map design studio, now provides interactivity in the latest head version on github. Once you design a map with TileMill, you can enable certain data in the shapefile to be interactive.

Map interactivity in the latest version of TileMill

When you export a map into MBTiles, a file format that makes it easy to manage and share map tiles and which you can easily export any map made in TileMill to, all the interaction is stored within the MBTiles file. This allows us to host interactive maps that are completely custom designed - including the look and feel and the data points - that are as fast as Google Maps.

An example of an interactive map using TileMill is the map in NPR's I Heart NPR Facebook App, an app that asks users to choose and map their favorite member station.

NPR Using TileMill

Yesterday, Tom MacWright gave a talk about designing fast maps and other emerging open source interactive mapping technologies, and specifically comparing them to Google, at the Where 2.0 Conference, a leading annual geo conference. If you're interested in learning more about this and weren't at the conference, check out his slides, which are posted on our blog.

April 02 2011

03:38

Timelines in journalism: A closer look

You’re not going to create one every week, but a timeline is a useful — and helpful — type of information graphic, and fairly common in journalism. When teaching students about timelines, here are some ideas to consider and discuss:

Chronology or timeline?

Sometimes a timeline is not a timeline, according to Len de Groot, a longtime graphics journalist. A timeline shows actual spans of time, with proportional measurements for decades, years, days or hours, depending on the total time involved. “The space between events should be as important [as] or more important than the events themselves,” he says. A chronology, on the other hand, shows the momentum of a series of events. It might be more effective if presented as a list, or as an illustrated slideshow.

Here’s an excellent chronology about Operation Odyssey Dawn on Libya, from El País:

Cronología: Operación Amanecer de la Odisea sobre Libia

Not what we think of when we imagine a timeline, is it? But it’s quite well suited to telling the story of recent events in Libya, and it is being updated day by day. (Navigate days via the two arrows at upper left.)

The Wall Street Journal has published a multi-line timeline covering recent events in Arab countries (below). Selecting any day loads a region map and summary of events for that day in an area above the timeline. I like the way this compact layout shows us at a glance where activities have occurred, and when. This is a very successful timeline graphic tailored closely to the story.

WSJ: Middle East Turmoil

Here are some questions we can ask before we sketch our timeline ideas:

  1. Is this a story about hours, days, years or decades?
  2. Should equal periods of time be represented with equal space? (Example: 100 pixels equals one year.)
  3. Are parallel time periods required? (Example: While this was happening in India, this was happening in China.)
  4. Does it make sense to combine the timeline with a map or a line graph?
  5. Should photos or other images be added to the timeline to help tell the story?
  6. How much text is necessary to make the story understandable — and satisfying?

A “timeline” that does not represent time proportionally to space — but which works well, I think, because it is straightforward and clear, is this one by graphic designer Sean Carton:

Sean Carton: Social Media Timeline

Design questions

Most timeline graphics present time in horizontal lines, with the oldest events to the left and more recent ones progressing to the right (I suppose we would do it right-to-left if we were Arab or Chinese). A notable and very recent exception is the Guardian’s brilliant (and vertical) Arab spring: An interactive timeline of Middle East protests (blogged about by Tracy Boyer last week).

Guardian.co.uk: Arab Spring timeline graphic

I think it’s useful to think about Len de Groot’s distinction between timelines and chronologies when admiring this graphic: Is this really a “timeline”? I don’t think so — has there ever been a better illustration of the momentum of events? No need to quibble over the words, though, when the execution is so effective.

Here are some questions we can ask as we examine our sketches of our timeline ideas:

  1. Will people like it?
  2. Is it helpful, easy to understand?
  3. Is it confusing?
  4. Hard to use?
  5. Does it add something that text alone would not convey?
  6. Does the graphic need to be a timeline — or would a regular slideshow (or map, or whatever) be equally effective?

One of the more successful interactive timelines is 10 years old — every time I revisit this package about Winston Churchill, I am amazed all over again at how well it works. Note in particular the double timeline at the bottom: The upper bar is Churchill’s life, and the lower bar shows concurrent world events.

Library of Congress: Churchill and the Great Republic

The Template Trap

Sometimes I think we fall into a “one size fits all” trap with templates or tools. You have a template or a tool, and you re-use it for various stories. But is that always the right decision? Does expediency sometimes defeat the goal of clear communication?

WSJ: Deepwater Horizon Rig Disaster

I think the Deepwater Horizon Rig Disaster timeline (above) is much more successful than the Biggest Volcanic Eruptions (below), which skimps on details about the eruptions. Both are from The Wall Street Journal.

WSJ: Biggest Volcanic Eruptions

Likewise, CNN’s Trapped Chilean Miners timeline (below) is better suited to its timeline interface than the recent Egyptian Protests timeline, which uses the same interface.

CNN: Trapped Chilean Miners

Timeline tools

TimelineSetter is a new, free tool from the great folks at Pro Publica, the nonprofit investigative journalism organization. It’s not available for mass consumption just yet (“We have some more code generalization and fixes we need to do before it’s ready to open source, but we plan to do so as soon as we can,” they said on March 22), but it might be useful in lots of different situations. Below is a timeline created with this tool.

Pro Publica: How One Blast Affected Five Soldiers

The functionality and the design are similar to the timeline template The New York Times has been using for some time; for a recent example, see Elizabeth Taylor: 1932-2011 (below). I found the checkbox options to be distracting and unnecessary.

New York Times: Elizabeth Taylor: 1932-2011

Other free timeline tools were described (and linked) in a post by Alex Gamela in May 2010. Dipity and SIMILE are fairly well known; others are less so, but it’s worthwhile to check out the different visual approaches to presenting information in this way.

Which of these tools produces the best result for the story you want to tell?

Do not create an interactive timeline just because it’s cool. Use interactivity to make the information more clear.

Two older timelines that are worth a look:

03:38

Timelines in journalism: A closer look

You’re not going to create one every week, but a timeline is a useful — and helpful — type of information graphic, and fairly common in journalism. When teaching students about timelines, here are some ideas to consider and discuss:

Chronology or timeline?

Sometimes a timeline is not a timeline, according to Len de Groot, a longtime graphics journalist. A timeline shows actual spans of time, with proportional measurements for decades, years, days or hours, depending on the total time involved. “The space between events should be as important [as] or more important than the events themselves,” he says. A chronology, on the other hand, shows the momentum of a series of events. It might be more effective if presented as a list, or as an illustrated slideshow.

Here’s an excellent chronology about Operation Odyssey Dawn on Libya, from El País:

Cronología: Operación Amanecer de la Odisea sobre Libia

Not what we think of when we imagine a timeline, is it? But it’s quite well suited to telling the story of recent events in Libya, and it is being updated day by day. (Navigate days via the two arrows at upper left.)

The Wall Street Journal has published a multi-line timeline covering recent events in Arab countries (below). Selecting any day loads a region map and summary of events for that day in an area above the timeline. I like the way this compact layout shows us at a glance where activities have occurred, and when. This is a very successful timeline graphic tailored closely to the story.

WSJ: Middle East Turmoil

Here are some questions we can ask before we sketch our timeline ideas:

  1. Is this a story about hours, days, years or decades?
  2. Should equal periods of time be represented with equal space? (Example: 100 pixels equals one year.)
  3. Are parallel time periods required? (Example: While this was happening in India, this was happening in China.)
  4. Does it make sense to combine the timeline with a map or a line graph?
  5. Should photos or other images be added to the timeline to help tell the story?
  6. How much text is necessary to make the story understandable — and satisfying?

A “timeline” that does not represent time proportionally to space — but which works well, I think, because it is straightforward and clear, is this one by graphic designer Sean Carton:

Sean Carton: Social Media Timeline

Design questions

Most timeline graphics present time in horizontal lines, with the oldest events to the left and more recent ones progressing to the right (I suppose we would do it right-to-left if we were Arab or Chinese). A notable and very recent exception is the Guardian’s brilliant (and vertical) Arab spring: An interactive timeline of Middle East protests (blogged about by Tracy Boyer last week).

Guardian.co.uk: Arab Spring timeline graphic

I think it’s useful to think about Len de Groot’s distinction between timelines and chronologies when admiring this graphic: Is this really a “timeline”? I don’t think so — has there ever been a better illustration of the momentum of events? No need to quibble over the words, though, when the execution is so effective.

Here are some questions we can ask as we examine our sketches of our timeline ideas:

  1. Will people like it?
  2. Is it helpful, easy to understand?
  3. Is it confusing?
  4. Hard to use?
  5. Does it add something that text alone would not convey?
  6. Does the graphic need to be a timeline — or would a regular slideshow (or map, or whatever) be equally effective?

One of the more successful interactive timelines is 10 years old — every time I revisit this package about Winston Churchill, I am amazed all over again at how well it works. Note in particular the double timeline at the bottom: The upper bar is Churchill’s life, and the lower bar shows concurrent world events.

Library of Congress: Churchill and the Great Republic

The Template Trap

Sometimes I think we fall into a “one size fits all” trap with templates or tools. You have a template or a tool, and you re-use it for various stories. But is that always the right decision? Does expediency sometimes defeat the goal of clear communication?

WSJ: Deepwater Horizon Rig Disaster

I think the Deepwater Horizon Rig Disaster timeline (above) is much more successful than the Biggest Volcanic Eruptions (below), which skimps on details about the eruptions. Both are from The Wall Street Journal.

WSJ: Biggest Volcanic Eruptions

Likewise, CNN’s Trapped Chilean Miners timeline (below) is better suited to its timeline interface than the recent Egyptian Protests timeline, which uses the same interface.

CNN: Trapped Chilean Miners

Timeline tools

TimelineSetter is a new, free tool from the great folks at Pro Publica, the nonprofit investigative journalism organization. It’s not available for mass consumption just yet (“We have some more code generalization and fixes we need to do before it’s ready to open source, but we plan to do so as soon as we can,” they said on March 22), but it might be useful in lots of different situations. Below is a timeline created with this tool.

Pro Publica: How One Blast Affected Five Soldiers

The functionality and the design are similar to the timeline template The New York Times has been using for some time; for a recent example, see Elizabeth Taylor: 1932-2011 (below). I found the checkbox options to be distracting and unnecessary.

New York Times: Elizabeth Taylor: 1932-2011

Other free timeline tools were described (and linked) in a post by Alex Gamela in May 2010. Dipity and SIMILE are fairly well known; others are less so, but it’s worthwhile to check out the different visual approaches to presenting information in this way.

Which of these tools produces the best result for the story you want to tell?

Do not create an interactive timeline just because it’s cool. Use interactivity to make the information more clear.

Two older timelines that are worth a look:

April 01 2011

10:45

Communities of practice: teaching students to learn in networks

One of the problems in teaching online journalism is that what you teach today may be out of date by the time the student graduates.

This is not just a technological problem (current services stop running; new ones emerge that you haven’t taught; new versions of languages and software are released) but also a problem of medium: genres such as audio slideshows, mapping, mashups, infographics and liveblogging have yet to settle down into an established ‘formula’.

In short, I don’t believe it’s wise to simply ‘teach online journalism’. You have to combine basic principles as they are now with an understanding of how to continue to learn the medium as it develops.

This year I set MA Online Journalism students at Birmingham City University an assignment which attempts to do this.

It’s called ‘Communities of Practice’ (the brief is here). The results are in, and they are very encouraging. Here’s what emerged:

‘Communities of Practice’

The ‘Communities of Practice’ assignment asks students to focus not just on developing technical skills around a particular medium of their choice, but on exploring the communities of practice that exist around it. In fact, at this stage the development of technical skills was one of the ways of making contact with those communities.

If, for example, you are developing skills in data journalism, it makes sense that you should be joining relevant mailing lists, following particular blogs, attending meetups, and having conversations (in person, or via email, Facebook or Twitter) around your area.

In addition, as a Masters level student, I’d say you should really be actively contributing to the development of the medium, by publishing your own experiences and reflections on those platforms, and on your own blog.

Two side benefits of this: you build your social capital within those communities (because you are contributing to them, not just taking away), and you build your professional status and reputation.

Hedy Korbee’s blogging on data journalism, for example, led to contacts with Microsoft Canada’s Open Source Strategy Lead, and raised awareness of her soon-to-be-launched hyperlocal website. Other students attended events and made other useful contacts in their fields.

A small aside here: the assignment constitutes a minor part of the Multimedia Journalism module on the course, accounting for 25% of the final marks, and it is assessed on 3 criteria: research, reflection, and creativity. The design of the assessment is geared to ensure that students focus more on learning than execution, and are therefore prepared to take more risks in their work (the second assignment, for which this builds the foundations, focuses more on execution).

The importance of a community’s culture

The culture of the communities of practice was important. Desi Velikova found a warm welcome on this Flash forum, and found that she was able to contribute without being an expert as one of the members needed to put himself in beginners’ shoes to write some tutorials.

Hedy Korbee, meanwhile, identified the divide between journalists and data experts and the problems for people joining those groups who, like her, don’t possess the expertise to actively contribute:

“I’ve learned that the culture of these groups requires asking practical, answerable questions based on specific problems that users face and I don’t think my skills are at a level yet where I can make a useful contribution.

“In light of this, I’ve also joined groups with meetups, such as Toronto OpenStreetMap, where I can interact with and hopefully get inspired by others who share an interest in data and mapping.  I am particularly looking forward to attending my first Hacks and Hackers Toronto meetup.”

Finding workarounds was key. In one instance, Hedy contacted a particularly approachable member of the community directly. Andy Watt, meanwhile, struggled to find communities around audio and video, so he created his own on LinkedIn, and two Twitter lists. Interestingly, he rejected the option of using his own website to host discussions “as it may have been perceived as a ploy to drive traffic to my own site.” Samuel Negredo identified communities around a blog, forums around particular software, and events.

Identifying best practice and reflecting on your own

Identifying best practice was a key process for students. Hedy Korbee’s ‘Five great audio slideshows‘ is a good example, and clearly influenced her own work. Desi Velikova compiled a list of resources for starting Flash 8.

Andy Watt’s blog focused more on documenting his own processes, posting various stages of particular experiments as he continued to edit them. Samuel blogged about the process of filming architecture. And Desi blogged about using one dataset as the basis for exploring 4 visualisation tools.

Being required to talk about process publicly in this way does two things: firstly, it engenders a reflexive approach to production, identifying what works and what doesn’t so that further work is of higher quality. Secondly, it provides material around which other members of the production community can talk: those who are not as proficient will learn from it, and be inclined to help in return in future; those who are more proficient may chip in with their own suggestions now. In short, it’s an investment.

Breadth versus depth

In terms of the structure of the MA, this assignment marks the point at which students move from breadth to depth. To my mind an online journalist needs an awareness of the wide range of storytelling possibilities in the medium, and the variety of newsgathering and distribution tools and techniques. But they also need to stand out in a particular field.

Communities of practice are key to both. One student commented that “Although I will never be a Flash expert, I will feel much more confident if I am in a situation to work on such a project”. Another said “Maybe I won’t be able to keep up with every development, every day, but the work I have done around communities of practice is helping me to identify and organize better the resources which are available”.

This is the nature of working in networks: our connections are key assets we need to work to build, and the ability to access expertise and advice a key skill. You do not achieve either by learning in isolation, producing in seclusion – the traditional mode of education. As these students go forward to specialise in online audio or video, slideshows, infographics and data, they do so within networks.

PrintFriendly

November 10 2010

18:30

Talking Points Memo’s first developer talks startup life, jumping to ProPublica and data journalism

What’s it like being the only in-house techie at a news startup? Talking Points Memo’s first developer Al Shaw says “it’s kind of like being a reporter….you have to be a generalist,” doing everything from ad-side work to election-night interactives.

Shaw was the primary technical force behind most of the bells and whistles that cropped up at TPM over the past two years, including a redesign that lets producers switch up the layout of the homepage, and an array of slick interactives like the real-time election results tracker that made TPM look a lot less like a scrappy startup and more like an establishment outlet on Election Night earlier this month. (Shaw is quick to explain he had some help on the election map from Erik Hinton, TPM’s technical fellow.) He’s also been good about blogging about his technical endeavors in ways that could be useful to his peers at other news organizations.

Shaw announced last month he is leaving TPM to start a new gig at ProPublica, where he’ll keep working on data-driven journalism. On one of his few days off between jobs, I talked with him about what it’s like working for a news startup, what he hopes to accomplish at ProPublica, and where he thinks data journalism is headed. Below is a lightly edited transcript. (Disclosure: I used to work at TPM, before Al started there.)

Laura K. McGann: How did you approach your job at TPM? What did you see as your mission there?

Al Shaw: When I started, I came on as an intern right before the ’08 election. At that point, they didn’t have anyone in house who really knew much about programming or design or software. I came on and I saw an opportunity there because TPM is such a breaking-news site, and their whole goal is to do stuff really fast, that they needed someone to do that, but on the technology side, too.

I had a big role in how we covered the 2008 election. We became able to shift the homepage, rearrange stuff. Being able to really elevate what you can do in blogging software. That was kind of the first foray. Then I started redesigning some of the other sections. But the biggest impact I had was redesigning the homepage. That was about a year ago. I had the same goal of being able to empower the editors and nontechnical types to have a bigger palette of what they can do on the site. I created this kind of meta-CMS on top of the CMS that allowed them to rearrange where columns were and make different sections bigger and smaller without having to get into the code. That really changed the way the homepage works.

There is still Movable Type at the core, but there’s a lot of stuff built up around the sides. When we started to build bigger apps, like the Poll Tracker and election apps, we kind of moved off Movable Type all together and started building in Ruby on Rails and Sinatra. They’re hosted on Amazon EC2, which is a cloud provider.

LKM: What have you built that you’re the most proud of?

AS: Probably the Poll Tracker. It was my first project in Rails. It just had enormous success; it now has 14,000 polls in it. Daily Kos and Andrew Sullivan were using it regularly to embed examples of races they wanted to follow and it really has become a central part of TPM and the biggest poll aggregator on the web now. I worked with an amazing Flash developer, Michiko Swiggs, she did the visual parts of the graph in Flash. I think a lot of it was really new in the way you could manipulate the graph — if you wanted to take out certain pollsters, certain candidates, methods, like telephone or Internet, and then you could see the way the trend lines move. You can embed those custom versions.

I think the election tool was also a huge success [too], both technologically and on the design and journalism side. We got linked to from Daring Fireball. We also got linked to from ReadWriteWeb and a lot of more newsy sites. Andrew Sullivan said it was the best place to watch the elections. Because we took that leap and said we’re not going to use Flash, we got a lot of attention from the technology community. And we got a lot of attention from kind of the more political community because of how useable and engaging the site was. It was kind of a double whammy on that.

LKM: What was your experience working with reporters in the newsroom? TPM is turning ten years old, but it’s still got more of a startup feel than a traditional newspaper.

AS: It’s definitely a startup. I would fade in and out of the newsroom. Sometimes I’d be working on infrastructure projects that dealt with the greater site design or something with the ad side, or something beyond the day-to-day news. But then I’d work with the reporters and editors quite a bit when there was a special project that involved breaking news.

So for example, for the Colbert-Stewart rallies we put up a special Twitter wire where our reporters go out to the rallies and send in tweets and the tweets would get piped into a special wire and they’d go right onto the homepage. I worked with editors on how that wire should feel and how it should work and how reporters should interact with it. I remember one concern was, what if someone accidentally tweets somethng and it ends up on the homepage. How do we delete that? I came up with this system with command hashtags, so a reporter could send in a tweet with a special code on it which would delete a certain tweet and no one else would know about that, except for the reporter.

A lot of the job was figuring out what reporters and editors wanted to do and figuring out how to enable that with the technology we had and with the resources we had.

LKM: I remember an instance in my old newsroom where we had a tweet go up on the front page of another site and the frantic emails trying to get it taken down.

AS: Twitter is such an interesting medium because it’s so immediate, but it’s also permanent. We’re having a lot of fun with it, but we’re still learning how best to do it. We did this thing called multi-wire during the midterms, which was a combination of tweets and blog posts in one stream. There was a lot of experimentation with: When do we tweet as compared to a blog post? Should we restrict it to certain hours? That was a really interesting experiment.

LKM: What emerging trends do you see going on in data-driven or interactive journalism?

AS: It’s really good that a lot of sites are starting to experiment more with data-driven journalism, especially as web frameworks and cheap cloud hosting become more prevalent and you can learn Rails and Django, it’s really easy to get a site up that’s based around data you can collect. I do see two kind of disturbing trends that are also happening. One is the rise of infographics. They may not be as useful as they are pretty. You see that a lot just all over the place now. The other problem you see is the complete opposite of that where you’ll get just a table of data filling up your whole screen. The solution is somewhere in between that. You have a better way of getting into it.

It’s really great that there’s kind of a community forming around people that are both journalists and programmers. There’s this great group called Hacks/Hackers that brings those two cohorts together and lets them learn from each other.

LKM: How about at ProPublica? You mentioned you aren’t sure entirely what you’re going to do, but broadly, what do you hope to accomplish there?

AS: I’m most excited about working more closely with journalists on data sets and finding the best ways of presenting those and turning them into applications. That was one thing I was able to do with Poll Tracker, but it didn’t seem like TPM had as big of a commitment to individual stories that could have side applications. Poll Tracker was more of a long-running project. ProPublica is really into delving deeply onto one subject and finding data that can be turned into an application so the story isn’t just a block of text, there’s another way of getting at it.

One of the other things they’re working on is more tools for crowdsourcing and cultivating sources. I know that they want to start building an app or a series of apps around that. And they’re doing some cool stuff with Amazon Mechanical Turk for kind of normalizing and collecting data. I’m sure there’s going to be a lot more fun stuff to do like that.

October 25 2010

17:26

“DEAD ON ARRIVAL” TABLETS: TOSHIBA FOLIO 100

Steve Jobs announced the launch of many new “Dead On Arrival” (DOA) Tablets.

So, let’s check the best candidates for this funeral ranking.

First one: Toshiba Folio 100

An Android 16GB tablet to be launched in November (UK) with these Pros & Cons.

PROS:

Bigger touchscreen than the iPad (10.1 inches)

I doesn’t quite have the resolution of the iPad (1024 x 768)

A 1.3 Mp web-cam for video calls.

Displays Flash animations.

Cheaper (329 GBP): 100 GBP less than the iPad.

USB 2.0 port (not in the iPad or Galaxy).

CONS:

Less intuitive operating system (FroYo).

Less sophisticated design.

Plasticky-feeling chassis

Access to less apps, many of them designed for Android iPhones, so not optimised to run on big-screen devices.

Only seven-hour battery (40% less than the iPad)

Only wi-fi version (3G option later).

Heavy: 750g.

IN A FEW WORDS:

Big but not sexy.

More movie-centric than media-centric.

Not an iPad killer.

AND REMEMBER:

“It’s the wine, not the bottle”.

So, hurry up, and register in the INMA/INNOVATION Harvard Tablet Summit.

The deadline is coming.

September 02 2010

16:21

The Cartoonist Aims to Bring Newsgames to the Masses

The Cartoonist, our winning entry in the 2010 Knight News Challenge, emerged from two research programs. For the past two years, my research group at the Georgia Institute of Technology has been cataloging and analyzing the burgeoning genre of "newsgames" -- videogames about current and past real-world events. That research produced a book, Newsgames, which will be published next month by MIT Press.

Meanwhile, on the other side of the country, professor Michael Mateas and his Expressive Intelligence Studio at UC Santa Cruz have been working on the problem of game generation by creating artificial intelligence tools to create a virtually infinite number of games.

The goal of our two-year Knight grant is to create a tool for generating newsgames on the fly, making it viable to create a videogame about a breaking event. This is done by identifying the issue and an angle for editorial or reporting, boiling the story down into its constituent agents and their relationships, and selecting from a range of rhetorical archetypes. Anyone who understands how to use the tool will be able to create a newsgame, remixed from the structures and mechanics of popular arcade games, within five minutes or less. The game will output to Flash and HTML 5 for instant uploading to the web, where it can be paired with reportage, columns, video, infographics, and cartoons covering the same current event.

Early Newsgames

Our project strives to enhance the online viability of local newspapers and to lower the technical barrier required to produce videogames with editorial intent. We see it as as an extension of, rather than a replacement for, the tradition of editorial cartooning. The creator of the earliest newsgames, Gonzalo Frasca, was the first to describe his work as "playable political cartoons." The French-language history and geography textbooks Frasca encountered in high school featured many cartoons drawn by an artist from Le Monde, and they were, according to him, all that made civics education bearable.

By now, anyone studying or working in journalism understands the great loss to news revenue caused by the shift of classifieds to online sources such as Craigslist and eBay. It is our contention that the abandonment of staff cartoonists at many papers -- a tragic and highly visible symptom of overall budget cuts during the recent recession -- represents a similarly vital loss, though of a different kind. For over a century, editorial cartoons drew attention to issues of local importance and generated a sense of regional pride. Their contribution to the wellbeing of local papers has never been easily quantifiable, but it's clear that they've always served a pivotal role in maintaining product loyalty and funneling readers toward the rest of the paper.

Appeal of Puzzles

Games accomplish a similar goal: Studies by the New York Times, the London Times, and a number of local papers showed that a significant percentage of their readerships bought the paper primarily for the puzzles. Although the crossword retains its loyalists, and despite the advent of Sudoku having ushered in a new generation of puzzlers, the rise in popularity of online web game portals represents yet another threat to the growth and retention of news readerships.

The new online news media require a new form of game, one that draws from the accessibility of arcade games and the capability of videogames to present an editorial opinion. Indeed, The Cartoonist has uses far beyond interactive cartoons, and as a result we will be changing the final product's name to reflect its broad potential. More on that as things progress.

Once it is fully developed, our studios will work with local reporters, columnists, and cartoonists in Atlanta and Santa Cruz to introduce them to the authoring system. Later, we'll make the tool and its source code available to everyone, from veteran cartoonists, to indie game developers, to citizen journalists. Until then, we'll be publishing findings, problems, and points of interest twice a month on this blog, along with other articles on our own Newsgames and Expressive Intelligence Studio websites. We look forward to your questions, comments, and continued support.

16:21

The Cartoonist Aims to Bring Newsgames to the Masses

The Cartoonist, our winning entry in the 2010 Knight News Challenge, emerged from two research programs. For the past two years, my research group at the Georgia Institute of Technology has been cataloging and analyzing the burgeoning genre of "newsgames" -- videogames about current and past real-world events. That research produced a book, Newsgames, which will be published next month by MIT Press.

Meanwhile, on the other side of the country, professor Michael Mateas and his Expressive Intelligence Studio at UC Santa Cruz have been working on the problem of game generation by creating artificial intelligence tools to create a virtually infinite number of games.

The goal of our two-year Knight grant is to create a tool for generating newsgames on the fly, making it viable to create a videogame about a breaking event. This is done by identifying the issue and an angle for editorial or reporting, boiling the story down into its constituent agents and their relationships, and selecting from a range of rhetorical archetypes. Anyone who understands how to use the tool will be able to create a newsgame, remixed from the structures and mechanics of popular arcade games, within five minutes or less. The game will output to Flash and HTML 5 for instant uploading to the web, where it can be paired with reportage, columns, video, infographics, and cartoons covering the same current event.

Early Newsgames

Our project strives to enhance the online viability of local newspapers and to lower the technical barrier required to produce videogames with editorial intent. We see it as as an extension of, rather than a replacement for, the tradition of editorial cartooning. The creator of the earliest newsgames, Gonzalo Frasca, was the first to describe his work as "playable political cartoons." The French-language history and geography textbooks Frasca encountered in high school featured many cartoons drawn by an artist from Le Monde, and they were, according to him, all that made civics education bearable.

By now, anyone studying or working in journalism understands the great loss to news revenue caused by the shift of classifieds to online sources such as Craigslist and eBay. It is our contention that the abandonment of staff cartoonists at many papers -- a tragic and highly visible symptom of overall budget cuts during the recent recession -- represents a similarly vital loss, though of a different kind. For over a century, editorial cartoons drew attention to issues of local importance and generated a sense of regional pride. Their contribution to the wellbeing of local papers has never been easily quantifiable, but it's clear that they've always served a pivotal role in maintaining product loyalty and funneling readers toward the rest of the paper.

Appeal of Puzzles

Games accomplish a similar goal: Studies by the New York Times, the London Times, and a number of local papers showed that a significant percentage of their readerships bought the paper primarily for the puzzles. Although the crossword retains its loyalists, and despite the advent of Sudoku having ushered in a new generation of puzzlers, the rise in popularity of online web game portals represents yet another threat to the growth and retention of news readerships.

The new online news media require a new form of game, one that draws from the accessibility of arcade games and the capability of videogames to present an editorial opinion. Indeed, The Cartoonist has uses far beyond interactive cartoons, and as a result we will be changing the final product's name to reflect its broad potential. More on that as things progress.

Once it is fully developed, our studios will work with local reporters, columnists, and cartoonists in Atlanta and Santa Cruz to introduce them to the authoring system. Later, we'll make the tool and its source code available to everyone, from veteran cartoonists, to indie game developers, to citizen journalists. Until then, we'll be publishing findings, problems, and points of interest twice a month on this blog, along with other articles on our own Newsgames and Expressive Intelligence Studio websites. We look forward to your questions, comments, and continued support.

September 01 2010

10:57

NEW DIGITAL NARRATIVES: FACTS, GRAPHIC IDEAS AND FAST QUALITY JOURNALISM &

chiquiesteban

INNOVATION’s Chiqui Esteban leads the New Narratives department of lainformacion.com in Madrid, Spain.

The graphic work done with his small team (he and Carlos Gamez plus Sarah Potts, an intern) is astonishing.

They have the support of the Art Director Antonio Pasagali, video and web developers, HTML designers of lainformacion.com but they do 90% of the final work.

They use Flash, Illustrator, Photoshop, Cinema 4d, Dreamweaver, Soundbooth, Premiere and Click2Map for Google Maps…

Chiqui and Carlos are fast like the best writers of the best newswire services.

They are quick, but accurate, and always focus on “the news behind the news” trying to explain, to find out, discover new angles and delivering not just facts but graphic ideas and fast quality journalism.

This is a 24/7 full time team and they are on permanent deadline mood.

Chiqui and Carlos have limited resources but unlimited creativity, and shows what you can do when you have real journalists.

Here you can review some of the work done during the last 12 months of lainformacion.com.

portada

An amazing showcase of almost 400 pieces of first class visual journalism!

Keep in mind that lainformacion.com was founded by Mario Tascon, the most influential Spanish infographics journalist, a new pure digital media company that today has a new editor, Carlos Salas, a very visual journalist, founding editor of El Economista, the financial newspaper launched by INNOVATION, and one the Best Designed Newspapers of the World.

And more:

Chiqui has been able to lead all this effort and at the same time work with many INNOVATION clients around the world teaching and preaching the New Visual Journalism Gospel.

Follow his Spanish/English blog.

A must-read blog.

August 24 2010

14:14

New York Times seeks multimedia journalism interns

Poking around in The New York Times’s job listings, I found this description of three distinct internships “in the Web Newsroom of The New York Times”:

  • Front-end Interactive Designer: full skill-set of client-side technologies including HTML, CSS and JavaScript/Prototype. Experience with Ruby on Rails is a plus.
  • Motion Design Storyteller: working knowledge of AfterEffects and Photoshop in producing motiongraphics. Final Cut a plus. We are looking for someone to help grow the motion design side of storytelling. So applicant must have a strong sense of timing and narrative and have the ability to implement a variety of creative styles.
  • Interactive Flash Journalist: Advanced programming knowledge and experience in Flash and ActionScript 3. Experience with Photoshop and Illustrator is a plus.

When I tell journalists and journalism students that skills such as these are important to the future of their career, I catch a lot of flak. Frankly, I’m a little tired of hearing that there is no need for journalists to learn these skills. This is storytelling. This is what the ability to type on a typewriter was in 1970.

As Ann Landers used to write in her advice column: Wake up and smell the coffee!

Update (10:30 a.m.): Then I found an ad for a reporter at The Times-News of Hendersonville, N.C., “a New York Times-owned media company” that describes itself as “a print and 24/7 online newsroom that produces a 14,000 circulation daily newspaper and a website with about 2 million pageviews a month”:

Our reporters cover beats, work on enterprise projects, post stories to the Web and shoot video. Our staff works as a team and reporters are often asked to cover other beats as well as breaking news. The right candidate will have a passion for journalism and multimedia, a strong sense of community journalism and the ability to develop sources and go beyond routine meeting coverage.

June 09 2010

21:54

KickApps Synchs with Adobe for Open Source Flash Video Player

As the HTML 5 versus Flash debate rages on, the yeoman's Web work being done by many media companies still relies on Flash-powered video. 

That's why New York-based social Web software company KickApps recently partnered with Adobe to introduce the Open Source Media Framework Studio, which lets brands and media companies create drag-and-drop Flash experience for their sites and videos. We recently caught up with KickApps' CEO Alex Blum who shared details on the partnership as well as updates on the work KickApps has done for companies such as NBC and Food Network.

"This has made it easy for non-technical people to integrate into their custom players," he said of the Adobe-KickApps deal. That includes NBC Universal, a KickApps partner that has used the software to power community development and to integrate with social tools such as blogs, video and audio. The Adobe partnership should let NBCU employees, as an example, focus more on the experiences they are creating for the Web and less on the technical integration, Blum said.

In the hyper competitive world of social and video technology providers, such ease of use and customer service efforts are becoming important differentiators among the many players.  Plus, the company's software seems to be driving results.  Food Network, for instance, has used the KickApps tools to drive traffic to its video- and social-centric site Food2.com.

The new initiative with Adobe was announced in early May

Daisy Whitney, Senior Producer

May 31 2010

19:27

Best way combine video/photo of varying file types

I have a few question about importing video. I use Final Cut Pro to edit but have problems making it play nice with various mix of file types I use - .avi, .mov, .jpg, etc. - a combo of video and still photos usually. How do I know which sequence settings will work best for each project? Another problem I am having is that even after I convert .avi files into .mov for import into FCP, I can't get transitions to work (except for audio ones). As well, I am wondering about best Export options. I export MPEG4 then convert to flv for Flash. Then I save a Flash swf at medium quality to reduce file size. Is this a logical workflow? I don't want to degrade file quality more than needed. If anyone has some tips or good links to help me understand this process better, it would be much appreciated. Thanks!

Tags: video fcp flash

May 12 2010

13:00

Slate advertiser incorporates a mystery story into an animated ad that will only bother you once

As I was perusing Slate’s homepage Monday, an ad caught my eye. Granted, I’d have to have had my eyes closed to miss it: It was the kind that takes over your screen momentarily, with a high-production-value animation enticing you to check out the advertiser’s site, in this case Auto Trader. I found it alluring enough that I opened up a new browser to watch it one more time. When a teaser for a story by Joel Dreyfuss (“Michael Steele has a point”) appeared at the top of the page, animated cars burst onto the screen, smashing the front-page design. When the ad ended, the front page reassembled itself in a Universal Studios backlot-tour style. Neat! (Or, annoying! Depending on your taste.)

I clicked around the Slate homepage looking for Dreyfuss’ story to see if I could trigger it again, but no luck — in either finding the story or triggering the ad. Josh grabbed a video of it for me, and, as you can see above, the ad launches just after the mystery Steele story takes the top slot. In the real, non-ad world, that story is not actually featured on Slate’s front page: It’s a month-old story published on Slate’s sister site The Root, whose stories are frequently cross-promoted on Slate.

In an email exchange with Matt Turck, VP of advertising sales for Slate Group, which saw a 52-percent ad revenue gain in the first quarter of this year, he explained that Auto Trader chose the Steele story and took the screenshot of it to use as part of the ad. So when you see what looks like a placeholder for the Steele story, you’re actually already watching Auto Trader’s advertisement. It creates a natural flow for the launch of the ad, but with downside of confusing any readers who’d actually like to check out the story.

(That didn’t stop us from having an age-old problem: After watching the ad, we couldn’t remember what it was for. A car company? Some sort of car-related service? I guessed Carfax; Josh guessed Ford.)

Turck said Slate tracks how well campaigns like this one work at getting clicks, but that information is “proprietary to advertisers.” He did say that, generally, ads that break out of the traditional banner box like this work better than traditional ones. “Most successful ad campaigns take advantage of unique and creative executions.”

But, of course, one person’s “unique and creative” execution is another person’s “typical and irritating,” forcing Slate also to consider their audience’s, and balance intrusive ads against fleeing users. I asked if Slate has a set of criteria in place to help strike that balance. “There’s no specific set of criteria, but we run all advertising by editorial first conceptually, and then again just prior to final execution,” he said in the email. “Our editors will always err to the intelligence of our reader base. Fortunately for Slate, our readers have grown up on the Web and therefore are often interested in and embrace interesting ad executions.” (Slate posts its reader demographics and ad services it provides here.) Turck also noted that the intrusive Auto Trader ad only loads once in a 24-hour period for a user, barring a browser switch.

May 06 2010

23:10

How do I embed flash content in Word Press?

I'm trying to figure out how to embed a flash map we've built into wordpress.

I've tried using the following code, but it makes the map tiny in chrome and tiny + shows code in firefox.

Help?

April 24 2010

21:24

New Flash journalism tutorials

I would call this past 12 months “the year I re-learned ActionScript.” After a semester of teaching Adobe Flash CS4 and ActionScript 3.0 to journalism/design students, I’ve got a better handle on both. I’m not too worried about CS5 changing too much — CS4 was the radical, once-in-a-decade (I hope) reworking of the foundations of the Flash application.

So as to share the wealth, I organized many of the tutorial files I created for my students and put them online here: How to Do Stuff in Flash CS4 (AS3).

This is not a comprehensive, how-to-do-everything-in-Flash set of lessons. The students also had a textbook. For further details, see Updating Flash Journalism (Dec. 6, 2009) and Updating Flash Journalism (Part 2).

The tutorials and Flash files are free to download and use for any non-commercial purpose.

April 20 2010

04:15

Moving Beyond Flash?

Most (many at least) interactive news projects have Flash front-ends. Without Flash support on mobile devices all that content is now inaccessible to a large audience. This is especially troubling if the iPad or like devices that also don't support Flash start to become people's primary computers.

What are people doing to get around this? Have people experimented much with porting existing applications to Javascript/HTML or with doing fewer things in Flash? What about other authoring environments that compile into multiple run-times like OpenLaszlo? http://www.openlaszlo.org/

Or things similar to what Sprout just announced for ads? http://techcrunch.com/2010/04/16/sprout-now-lets-you-simultaneously-build-rich-ads-in-both-html5-and-flash/

I've used Laszlo a little and it seemed like things would take much longer to write in it than Flash as well as missing many features. There's definitely enough for many map/timeline/simple roll-over projects though.

I wonder if anyone who has more extensive experience with this can comment on possible solutions.

Edit: The long-termish seems to hold a lot of promise, but I think we've been waiting for the technology to mature for long enough. What can we start doing now to get better compatibility with mobile devices and ensure a smooth transition.

April 14 2010

01:22

Apple, Adobe and HTML5

I’ve been working on a blog post about the tech topic du jour — not the power play between two corporate giants so much as the implications for online video, for interactive graphics, for Web standards — and it got to be awfully long, so I set it aside for a while.

But I also had to prepare for a lecture and discussion with my students about the near future, and what they need to know — today — about HTML5. That led me to produce this PowerPoint, drawing on the research I had done for the blog post.

So I’ll return to the post (or maybe it’s more than one post) in a couple of days. For now, I think the PPT gives a pretty good summary of the current situation.

If you want the sources for the PPT, you can download a PDF here.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl