Examples of interactive journalism – Week 13

As always, add your own example for extra credit by providing a link in a reply to this post. (You still have three more chances to post, Weeks 14–16.)

The charts in Fewer Helmets, More Deaths (from The New York Times) react to your scrolling. New data comes into the charts and they change. But what’s super innovative about this story is the way it responds on a phone. See the second image below. Be sure to open this on your own phone and observe the differences!

Desktop: Fewer Helmets, More Deaths

Mobile: Fewer Helmets, More Deaths

Your Reply

Leave a comment on this post to submit your example for this week. Rules are on the Required Work page.

Make sure your link is correct and functional.

Include the title or headline of the example you are linking to.

Write one sentence about why we should appreciate it.

Examples of interactive journalism – Week 12

As always, add your own example for extra credit by providing a link in a reply to this post. (You still have four chances to post, Weeks 13–16.)

Here’s a cool interactive data graphic from The Washington PostWhere Congress stands on Syria. I know that might not sound sexy to you, but check out what you can do with a giant dataset and some jQuery magic.

Here, I sorted on all members of Congress who are “For” military action:

Washington Post graphic

Here, I searched for a Florida representative (Alcee Hastings) using the search box at upper right:

Washington Post graphic

Click the image below to see full-size links to all JavaScript and jQuery files used in the graphic:

Washington Post JavaScript

Your Reply

Leave a comment on this post to submit your example for this week. Rules are on the Required Work page.

Make sure your link is correct and functional.

Include the title or headline of the example you are linking to.

Write one sentence about why we should appreciate it.

Dates for your project work

To be clear, these are the weeks in which your individual meetings are about your three weeks of project work:

  1. Week 14 | April 7 (meetings April 8, 9, 10)
  2. Week 15 | April 14 (meetings April 15, 16, 17)
  3. Week 16 | April 21 (meetings April 22, 23, 24)

So that week’s work needs to be complete when you come to meet with me.

The last day of classes is April 23. So I messed up here — I’m not allowed to make you meet with me on April 24, which is an official Reading Day. Therefore, the four students who meet me on Thursdays will need to schedule with me for earlier in that week. Of course, if you want to meet on Thursday, that’s up to you.

On April 28, I’m getting on a plane. I’ll be out of the country for about 10 weeks. So if you’re interested in the extra credit (due Monday, April 28, before 6 p.m.), discuss it with me.

Week 13 assignments: Practice with jQuery, JavaScript

For Monday, March 31, you will complete four (4) jQuery or JavaScript tutorials and produce your own version of the project(s) from each tutorial. So you will have at least four different Web pages (on your hard drive) to show me. Files from the Lynda.com downloads will not suffice. Make your own files.

Your files need not be as complex as the exercise files downloaded from Lynda.com! You can make a simple file with a very plain design to test and experiment with what the tutorial taught. That’s what I want to see.

This will definitely take seven hours, so please be sure to start early and work daily on these assignments.

Choose from ONLY these tutorials at Lynda.com (log in here for free access):

See the benchmark (Week 13). Do not substitute any other tutorials. Choose four from the list above only.

I recommend that you code along with the videos. Arrange the video window beside your TextWrangler and type everything that is typed in the video. Of course, you can pause the video as needed.

NOTE: When you show your work, I will need to be convinced that you did MORE than simply COPY the exercise files downloaded from Lynda.com. Make your own variations. Play with the code. 

How to find answers to your code problems

I know I’ve told this to some of you in individual meetings, but here is the pattern:

programming language name + verb + specific keywords

Use that pattern when typing for a Google search.

Example: javascript replace text button

A coding beginner like you wrote this helpful advice: Googling for code solutions can be tricky — here’s how to get started

(Note: You can write about your experiences as new coders!)

Examples of interactive journalism – Week 11

As always, add your own example for extra credit by providing a link in a reply to this post. (You still have five chances to post, Weeks 12–16.)

This week’s example is a little different. It’s about the power of code, and it’s also about a UF J-school alum, Ken Schwencke (JM – 2009), who works on the Data Desk at the Los Angeles Times.

Whenever there’s an earthquake, the U.S. Geological Survey (USGS) sends out email alerts. Schwencke set up an email account to receive those emails. This past Monday, an email landed in that inbox. Automatically, because the email had arrived, a program (written by Schwencke) parsed the text of the email to find answers to these three questions:

  • Is the quake in LA, with greater than 2.5-magnitude?
  • Is the quake in California, with greater than 3.0-magnitude?
  • Is the quake in the U.S., with greater than a 4.5-magnitude?

If only the last question is answered affirmatively, the bot emails the paper’s national reporters and editors — a kind of early alert to a developing story. If either of the first two questions are affirmative, though, it both alerts the metro desk to the quake and writes a simple post.

The Atlantic published a first-rate story about it: How a California Earthquake Becomes the News: An Extremely Precise Timeline. The quote above comes from that story.

Slate published the shorter, more hip-sounding The First News Report on the L.A. Earthquake Was Written by a Robot. This one reproduces the complete text of the very first report (written by the program) — this was later expanded and updated by humans at the same URL.

Schwencke was interviewed on NPR’s morning Weekend Edition news program on March 22 (2 min. 59 sec.).

Your Reply

Leave a comment on this post to submit your example for this week. Rules are on the Required Work page.

Make sure your link is correct and functional.

Include the title or headline of the example you are linking to.

Write one sentence about why we should appreciate it.

Week 12 assignment: Create your project plan

Here are the details about your obligations for Week 12:

  1. Write a detailed three-week plan for your project in a Google doc (Google Drive). DO NOT UPLOAD A WORD DOCUMENT. Write a native Google doc so you and I can share it actively and edit it together.
  2. Carefully read all about the project requirements on the Project page. Check that your document covers all the requirements.
  3. Do all that BEFORE CLASS on Monday, March 24. During class, you will explain your project so everyone can hear about it.
  4. Share the Google doc with me before you leave class on Monday, March 24. Use only my GMAIL ADDRESS, which I will send to you in an email from E Learning (so you can look it up later if you lose it).
  5. Be prepared for close questioning about your plan during our usual weekly meeting March 25–27.

The jQuery (part 2) PowerPoint from this week’s class, a link to the new jQuery exercises GitHub repo, and a link to a jQuery “cheat sheet” appear on the Course Schedule page, under Week 11.

Examples of interactive journalism – Week 10

As always, add your own example for extra credit by providing a link in a reply to this post.

This week’s example, The ‘Boys’ in the Bunkhouse, from The New York Times, has several not-so-flashy JavaScript effects that are worth thinking about. It uses the responsive Foundation framework — check out its features!

A very obvious use of JavaScript appears about one-fourth of the way down the page (see the third image below): click the gray-boxed text or the pullout text on the right side, and an image of a document reveals itself in-line with the main text.

Boys NYTimes March 2014

Boys 2 NYTimes March 2014

Boys 3 NYTimes March 2014

Boys 4 NYTimes March 2014

Your Reply

Leave a comment on this post to submit your example for this week. Rules are on the Required Work page.

Make sure your link is correct and functional.

Include the title or headline of the example you are linking to.

Write one sentence about why we should appreciate it.

Week 11 assignments: Continue jQuery

Complete the benchmark listed on the Course Schedule for Week 11. If you have time, several students have recommended that you also work on the Codecademy modules for jQuery — they are an excellent supplement to the Code School exercises. If you complete all five Codecademy jQuery modules (this week OR next week), I will be happy to award you an “awesomeness” point for the extra work.

Project plan: Start thinking about the project you will complete for this course. Your plan is due in class on March 24. Your project requires three weeks of work, and I expect a solid seven hours per week (or more) for you to earn a point. Our individual meetings will continue, and you’ll need to show your work each week. No putting it off until the end!

Meanwhile, you are running out of time to get the extra-credit point for submitting examples. After this week’s examples post, only five more will appear.

The two PowerPoints from class, a link to the GitHub repo, and a link to recommended jQuery resources appear on the Course Schedule page, under Week 10.

Learn how to use GitHub

Two highly recommended articles:

GitHub for Beginners: Don’t Get Scared, Get Started

As embarrassing as it is to admit, this tutorial came into being because all of the “GitHub for Beginners” articles I read were way over my head. That’s probably because I don’t have a strong programming background, like most GitHub users. I couldn’t identify with the way most tutorials suggest using GitHub, as a showcase for my programming work.

Includes a section called “Setting Up GitHub and Git for the First Time.”

GitHub for Beginners: Commit, Push and Go (Part 2, by the same author)

… let’s add the first part of your project now by making your first commit to GitHub. When we last left off, we’d created a local repository called MyProject …

Part 2 steps you through using GitHub through the command line. But (as some of you know from MMC 3260 in fall 2013) you can also use the very slick and simple free app GitHub for Mac (or GitHub Windows) and forgo the command line most of the time.

Follow

Get every new post delivered to your Inbox.

Join 36 other followers