ProPublica to the rescue

ProPublica, known for producing excellent, investigative journalism, also has a wonderful staff of developers that have put out several tools to help fellow journalists like myself. Here’s a quick run through two of their tools I’ve used in the last month.

– TimelineSetter – I’m a big fan of timelines. They can help newspapers show passage of time, obviously, as well as keep their stories on a particular subject in one central location. This is exactly how we used ProPublica’s TimelineSetter tool when ‘Extreme Makeover: Home Edition’ announced they were going to build a new home for a local family. From the print side, we ran several stories, including about one a day during the week of the build. The photo department also put out four photo galleries on the build and a fundraiser. Finally, our videographer shot several videos. Our audience ate up our coverage, raking up more than 100,000 page views on the photo galleries alone. But unless you wanted to attach every story, gallery and video to any new story we did (which would be both cumbersome and unattractive), it would have been hard to get a full scope of our coverage. That’s were the ProPublica tool came into play. Simply, it helped compile all of our coverage of the event on one page.

I’m not going to go into detail on how I put together the timeline. Instead, I will revert you to their fantastic and easy to use documentation. Best of all, the timeline is easy to customize and upload to your site. It’s also free, unlike the popular timeline-maker Dipity. Check it out!

– TableSorter – This tool is equally as impressive and fairly easy to use. The final output is basically an easy-to-navigate-and-sort spreadsheet. And, again, the documentation is comprehensive. Run through it and you’ll have up sorted table in no time! I’ve put together two already in the last week or so.

The first is a list of farmers markets in Iowa, with links to their home page (if available) and a Google map link, which was formatted using a formula in Microsoft Excel. The formula for the first row looked like this: =CONCATENATE(“http://www.google.com/maps?q=”, ” “, B2, ” “, C2, ” “, E2, ” “, “Iowa”)

The first part is the Google Map link, obviously. B2 represented the cell with the city address; C2 = City; E2 = Zip code and finally “Iowa” so Google Maps knows where to look. In between each field I put in a space so Google can read the text and try to map it our using Google Maps (I should note that not every location was able to be mapped out). Then I just copy and pasted this for every row in the table. At this point, I had a standard XLS Excel file, which I saved as a CSV file. TableSetter uses that CSV file and formats it using a YML file to produce the final output. Go and read the docs…It’s easier than having me try to explain it all. Here’s what my CSV looked like; here’s my YML file; and finally the table, which was posted on our site.

In the same vein, I put together this table on what each state department is requesting from the government in the upcoming fiscal year.

I should also note here that the Data Desk at the LA Times has a variation of ProPublica’s TableSorter that offers more features (like embedding photos into the table, for instance). It’s called Table Stacker and works in a very similar fashion as TableSorter. I recommend checking it out after you get a feel for ProPublica’s TableSorter.

– Learning the Command Line: Both of these tools require the use of the command line using the Terminal program installed on your computer. If you are deathly afraid of that mysterious black box like I was, I highly recommend watching PeepCode’s video introduction to the command line called “Meet the Command Line.” And when your done, go ahead and jump into their second part called “Advanced Command Line.” Yes, they both cost money ($12 a piece), but there is so much information packed into each hour-long screencast, that they are both completely worth it. I was almost-instantly comfortable with the command line after watching both screencasts.

How To: Using jQuery tabs with Friday night preps coverage

At the Courier, we are lucky to have a group of sports reporters that tweet from every high school prep game they can. Iowa high school football also have a dedicated hashtag (#iahsfb) that reporters and fans alike use every Friday night to update the world and what is going on in their game. The only problem from a readers standpoint is if you want to follow several of our local reporters and everybody across the state that uses the #iahsfb hashtag, you’ll have to open several Twitter pages to follow everything at once. Using simple Javascript, we can fix this problem. Here’s a rundown on how I use jQuery tabs (shown above) to fit all of the live coverage on one page. The final product will look like this.

1. For those unfamiliar with the jQuery UI, I suggest reading through their Documentation page to get the basics. You don’t need to know much code (I don’t) to get the feature working so don’t be intimidated. Then either download a theme or color-code your own. I worked our site’s blue into the theme before downloading a copy. You don’t need any programming skills for this and best of all, jQuery shows you on the fly what the final product will look like before you download it. Now download the files and unzip them.

2. The folder you just downloaded will include the necessary Javascript (located in the js folder) and CSS (you guessed it…in the CSS folder) for the project. It also includes an index.html page that shows you some of components you can use. Now put all of the files on the web somewhere. I put all mine in wcfcourier.com/app/special/.

3. Open up or create a new HTML page. In between the <head></head> tags, link to three files: the jQuery javascript file, the jQuery UI javascript file and the CSS file. My coding looks like this, although yours might vary slightly depending on what you downloaded:

<link type=”text/css” href=”ENTER_URL/css/custom-theme/jquery-ui-1.8.15.custom.css” rel=”Stylesheet” />
<script type=”text/javascript” src=”ENTER_URL/js/jquery-1.6.2.min.js“></script>
<script type=”text/javascript” src=”ENTER_URL/js/jquery-ui-1.8.15.custom.min.js“></script>

4. Calling the tabs function is just as easy. Here’s the code (from the jQuery UI site). Stick this under the code above and above the </head> tag.

<script>
$(function() {
$( “#tabs” ).tabs();
});
</script>

5. That’s all the Javascript we need to run this fairly complicated task! Now move to the body of the HTML file. Basically the tabbed links at the top of the page (in this case, the games we are covering) is an unordered list:

<div id=”tabs”>
<ul>
<li><a href=”#tabs-1“>Cedar Falls v. Wloo West</a></li>
<li><a href=”#tabs-2“>W Dela v. Waverly-SR</a></li>
<li><a href=”#tabs-3“>Columbus v. N Hamp</a></li>
<li><a href=”#tabs-4“>All games</a></li>
</ul>

The number of tabs will vary depending on how many pages you have. In this example, our sports reporters are covering three different games plus I want a tab to link to a Twitter widget that uses the #iahsfb hashtag. So I have a total of four tabs. The text between the link tags is the text that the reader will see and click on to open each page. In this example, it’s high school games.

6. Next, we need to create four divs to be linked to. For this example, I need four Twitter widgets. The basic structure of each div is very, very simple:

<div id=”tabs-1″></div>
<div id=”tabs-2″></div>
<div id=”tabs-3″></div>
<div id=”tabs-4″></div>

Note these divs go inside the <div id=”tabs”> created above. After the final div tab (in this case number four), we want to make sure we include a </div> tag. The bare bones code looks like this:

<div id=”tabs”>
<ul>
<li><a href=”#tabs-1“>Cedar Falls v. Wloo West</a></li>
<li><a href=”#tabs-2“>W Dela v. Waverly-SR</a></li>
<li><a href=”#tabs-3“>Columbus v. N Hamp</a></li>
<li><a href=”#tabs-4“>All games</a></li>
</ul>
<div id=”tabs-1“></div>
<div id=”tabs-2“></div>
<div id=”tabs-3“></div>
<div id=”tabs-4“></div>
</div>

7. The tabs function should be working by now. But each time you click on a tab, nothing shows up. Let’s fix that: Inside each of these four divs will be the individual Twitter widgets that will show up when a reader clicks the tab. We went ahead and made the reporters’ Twitter widgets by going to Twitter’s webpage. Twitter gives you the code to copy and paste between <div id=”tabs-4″></div> tags.

I also added a quick sentence above each Twitter widget telling the reader which game the reporter is covering. The final output for one Twitter widget looks like so:

<div id=”tabs-3″>
<p>Sports Reporter Carson Tigges (<a href=”http://twitter.com/CarsonTigges” target=”_blank”>@CarsonTigges</a>) is covering the Columbus v. North Hampton game:</p>
<br />
<p align=”center”>
<script src=”http://widgets.twimg.com/j/2/widget.js”></script&gt;
<script>
new TWTR.Widget({
  version: 2,
  type: ‘profile’,
  interval: 6000,
  title: ‘Tweets from Carson Tigges‘,
  subject: ”,
  width: 580,
  height: 650,
  theme: {
    shell: {
      background: ‘#001952’,
      color: ‘#ffffff’
    },
    tweets: {
      background: ‘#ffffff’,
      color: ‘#444444’,
      links: ‘#1985b5’
    }
  },
  features: {
    scrollbar: true,
    loop: false,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    toptweets: true,
    behavior: ‘all’
  }
}).render().setUser(‘CarsonTigges‘).start();
</script>
</p>
</div>

Amazing and all contained with a div.

8. Basically all we need to do now is replicate that Twitter widget three more times (four total), which is really easy. Just change the bolded text for each reporter you’ll be using. Now copy and paste the new Twitter widget code in between another div tag. Do the same for the others until you have all four Twitter widgets on the page. The final code is long but far from complicated.

– I uploaded the final product so take a peak and copy any of it that is helpful.

NOTE: If you look at the final product, you will see the following code. Ignore it. This is automatically added by our CMS and shouldn’t have any use for you:

<script type=’text/javascript’ src=’http://stats.townnews.com/shared-content/stats/common/tracker.js’></script&gt;
<script type=’text/javascript’>
<!–
 if (typeof(TNStats_Tracker) !== ‘undefined’ && typeof(TNTracker) === ‘undefined’) { TNTracker = new TNStats_Tracker(‘wcfcourier.com’); TNTracker.setTrackerDomain(‘stats.townnews.com’); TNTracker.trackPageView(); }
// –>
</script>

New tools and (easy) Javascript tricks

Here at WCFCourier.com, I’m always looking for cool, new tools that can help present our stories/data in a new way. One of my favorite new tools is DocumentCloud, a PDF viewer that allows us to present documents in a much easier and user-friendly way than how we’ve uploaded documents before.

Previously, we loaded PDF’s directly into our CMS, which basically forced readers to download the PDF to view the document. For documents that number in the hundreds of pages, that was impractical for readers. DocumentCloud not only gives readers an easy way to thumb through the pages without having to download the whole thing, it allows us to annotate specific text with the document to highlight major points. I was immediately impressed with the service and have used it to upload every document for the past several months.

Here’s some other tools I’ve used that may help you out:

• Storify: This tool has become all the rage in the techie-journo world and it’s easy to see why. Basically, the tool allows journalists to make chronological, list stories using photos, text and video from a variety of social media platforms like Facebook and Twitter. Here’s a few examples: 1. A recap of our coverage from Michele Bachmann’s big presidential announcement in Waterloo; and 2. A Cedar Falls woman who inspired thousands on Twitter.
• ScribbleLive: We recently switched from CoverItLive to ScribbleLive for our live chat needs. One thing I love about the service when compared to CIL is the lack of ads within the live chat when a reader first goes to the page. We’ve also had better luck loading in video to the chat than with CIL. Here’s an example from Saturday’s UNI football game.
• Google Charts: Who doesn’t like fancy graphs that help break down numbers and figures? Using Google Docs and Google Charts, journalists basically only need a simple spreadsheet to output graphs like pie or line charts. And, of course, Google’s API gives you plenty of options to customize them to make them look how you want.
• jQuery tabs: Anybody will a little bit of Javascript knowledge and an understanding of basic jQuery shouldn’t have any problem implementing this simple but flexible tool into their website. The jQuery UI also gives you great flexibility to style it how you want it to look when it’s all done. I now use the tabs feature to promote our sport reporters who live tweet high school prep games every Friday night.
• jQuery before/after plugin: This is a tool I definitely want to use again the future. I won’t describe it in too much detail here; instead, I point you to the one time I used it to compare ward maps in Cedar Falls. But basically this is one of the best tools to visually compare before and after photos. And it’s simple to use. I swear. Check it out.