Archive for the ‘web production’ Category

Audacity and Soundcloud for audio editing and publishing

Think audio is dead? Serial proved that wrong. But basic audio editing and publishing also is bread-and-butter for tasks like 911 calls for quick gonzo interviews, especially a critical quote to add authenticity,

Without doubt, Audacity is the most powerful free audio editing tool. Then, one of the best publishing tools is Soundcloud, which generates fully responsive embeds.

How to create animated gifs with Photoshop

How to make animated GIFs with CS5/6, a six-step process that can take fewer than 5 minutes.

1. Identify clip
2. Create raw footage (from sites to iMovie to Snapz Pro X or Snagit)
3. Import into Photoshop
4. Edit
5. Optimize file size and save
6. Preview and share

Grab all the details from the primer: PDF: How to create animated GIFs with Photoshop

Timeline JS walk-thru

Timeline JS is an open-source timeline tool built in javascript by NU prof Zach Wise and the Knight Lab. It’s based on a Google Drive spreadsheet, accepts photo, video, Tweets, audio, maps etc and generates fully responsive embed code, so it’s Next Gen friendly.


Chief Keef
Mike Ditka (not this one)
Boston Marathon bombing manhunt


1. Get a copy of the template
2. Clear out data
3. Insert your information into the spreadsheet
4. Select Edit/Publish to web/Start publishing to make the spreadsheet public
5. Paste document URL into Timeline JS interface
6. Hit preview to make sure everything’s OK
7. Grab the embed code and insert into an HTML page/story.

Tutorial and data

You can get the template here.

Grist for timeline:

Soundcloud audio from Jan. 16, 2013

Sept. 8: Chicago Bears defeat Cincinnati Bengals 24-21 as Marc Trestman gets first NFL head coaching victory.

Flickr photo from Sept. 15.

Tribune image from Sept. 15 Bears game.

In that game, with 3 minutes, 8 seconds left, a game that had twisted and turned suddenly hinged on the confidence of a huddle and the poise of quarterback Jay Cutler, who gathered his offense near the Chicago 34-yard line. The story from Sept. 15.

Biggs tweet about typo on 9/15.

Cutler tackle from Sept. 22

Ben Roethlisberger turned the ball over four times, two of which the defense returned for a touchdown, as the Bears beat Steelers 40-23 on 9/22. Story here

Published spreadsheet here.

Documentcloud walk-thru

DocumentCloud is one of the best tools for archiving original source documents, as well as a very powerful public way to create a deeper online experience and aid in transparency.

Here’s the latest version of the DocumentCloud primer.

And here’s a few examples as to how we’ve used it:

Single annotated document: FRA derailment support

Single annotated document: NIOSH firefighter deaths report

Document collection: Jesse Jackson Jr. case file

Exploring interactive chart tools: Infogram, Datawrapper and Google Charts

Posted on: 2 Comments

This week I explored four data visualization tools to build interactive charts: Google Fusion Tables, Datawrapper, and Google Charts.

As Fusion Tables is being phased out for charts, the latter three our your best choices. Google Charts, however, requires a somewhat higher skill level than the browser-based Datawraper and

Download the sample data here.

What can be done? Pretty decent stuff.

1. Datawrapper line chart of January weather
2. Datawrapper line chart of historic snowfall totals
3. tree chart of Chicago’s top Twitter accounts

Juxtapose JS tutorial

Posted on: No Comments

Juxtapose JS is a relatively new Knightlab tool designed by Alex Duner that allows users to juxtapose two photos in a single responsive display, highlighting both differences and similarities. It’s ideal for those before-and-after photos, such as development or aerial shots of tornado damage.

Simply go to the web app, plug in both of your full photo URLs (you will need them hosted somewhere) and photo data. Then grab the embed code and style code and paste both into an HTML story content item. You can easily stack embed codes with a little margin between them, but you just need the style code once. The web app also allows you to turn off labels, credits and animation, although those features are fairly desirable.

There’s a few limitations, mostly in display. There’s no way to resize or nudge photos to make them line up better. So your original crops are critical. Be picky.

Here’s a few early tests of the tool:

Example 1: John Malkovich vs. historic photos
Example 2: Wrigley Field signs