Teaching Web video: Everything you need to know now

In non-TV news organizations today, we see mostly one of two choices for video (or both of these):

  • iPhone (more than any other phone or small device)
  • DSLR (various models)

All the smaller video cams seem to have fallen out of favor. Only TV and feature-length documentary makers use high-end video cameras.

What does this mean for teaching in j-schools? Some great minds in multimedia journalism education have been discussing that on the Facebook group “ONA Educators,” in response to a question posted on April 25, 2013. With permission of those named, here is what they said.

First, the question — which came from a journalism instructor who prefers not to be named, and who uses “flipcams” to introduce video in a basic multimedia journalism course at a U.S. university:

We’re on the video portion of our Multimedia Journalism class (we did audio and photography earlier in the semester). So far the students have learned:

  • How to operate a flipcam and small tripod and pay attention to sound/background noise and lighting. The five-shot method.
  • The basics of interviewing: Asking non-yes/no questions, not staging scenes, etc.
  • Keeping the camera steady and shooting from different angles and perspectives for more visual interest
  • Basics of iMovie: Editing shots down to ~5 seconds each, using sequencing to tell the story, voiceover technique (separating audio/video), background noise reduction, lower thirds titles

Are there any video skills you’d add to this list for beginning multimedia journalists?

The term flipcams can refer to the Flip brand (discontinued in 2011) or any other very small, simple-to-operate video cameras, usually priced around $100 (U.S.). In professional newswork, these have been replaced by iPhones or other mobile phones with HD video capability. While flipcams were an easy buy for many j-schools, high-end smartphones carry much higher price tags.

Robert Quigley, who teaches at the University of Texas, answered:

  • Teach them how to shoot steady video when no tripod is available (lean against a wall, set camera on a ledge, etc.)
  • Rule of thirds.
  • Basics of three-point lighting, using natural light.
  • Basics of Final Cut.
  • Importance of B-roll (shoot at least 6 minutes of footage for every 1 minute used is the rule of thumb I use).
  • Make the videos entertaining — look for the fun in life. News videos tend to be boring. No people sitting in their offices!
  • Keep videos under 2 minutes. Aim for 60 seconds. If they edit themselves hard, it will be a better video.
  • No fancy transitions/special effects should be used.
  • Get names spelled correctly and identify people.

Let’s break out some categories from what we have so far:

  1. How to shoot (how to hold the camera; getting B-roll; five-shot method); composition (rule of thirds)
  2. Studio techniques or setting up controlled shoots, such as some interviews (lighting)
  3. Editing software and editing techniques (Final Cut; length of final video; avoid transitions; lower thirds)
  4. Reporting practices (get names and other identifying info from all subjects; interviewing on camera)

Quigley also recommended videos from EveryNone to show the importance of audio (one example: “Play it with the sound off for 20 seconds or so first, then turn on the sound and start it again,” Quigley wrote.)

Curt Chandler, who teaches at Penn State, wrote:

We don’t use flipcams. The students shoot with DSLRs, Canon Vixias, JVC broadcast cameras and sometimes with smartphones. We stopped being device specific a while ago. We talk about outcomes and what gear it will take to produce that outcome, then support the students on whatever they choose to shoot with. I do a lot of pass/fail grading early on to encourage experimentation. Once the students and I are agreed on what quality I am looking for on a type of story — and what it takes to produce that — then grades appear.

So much good there!

Chandler said his students learn both breaking news and higher-end Web video/multimedia. Although he doesn’t explicitly discourage students attempting higher-end video with smartphones, he said, “during class critiques I’m pretty candid about comparing results for produced stories shot with high-end tools and the same type of story shot on the fly. The iPhone gallery on Vimeo shows it can be done, but only in a limited set of circumstances.”

And: “After a point, it’s easier to work with the more complex — and controllable — tools,” Chandler concluded.

Andrew Lih teaches at USC Annenberg; he shared the video training checklists that he and Lam Thuy Vo presented at ONA 2012. He also shared his new Wiki Makes Video project. Lih added these tips:

Closeups! More closeups! Not only because detail is more interesting than wide/medium shots, but today more than likely, folks are viewing video on smaller screens (i.e., mobile phones).

Start video shooting by ignoring the zoom rocker/lever. Keep the lens completely zoomed out. Hold each shot for 10 seconds.

Lih’s students start with consumer camcorders (Canon HF-R100 or R300) with mic inputs, “so we can use external mics. This teaches [students] ‘nightly news’–style pieces where they can use a lavalier or stick mic. Also camcorders can get real close for macro shooting. Then we branch out to both lower and higher fidelity,” Lih wrote.

Two assignments Lih shared:

  1. Shoot a piece entirely on your iPhone, Android phone or a point-and-shoot camera as a “web video.” Just to get the experience of shooting with what you have on your person. See here for an example of a piece I shot entirely on a Samsung Galaxy Camera. I teach students that getting close to the subject is not only more compelling video, it gets better audio pickup. Win-win. [The video uses WebM, so you need either Chrome or Firefox to view it.]
  2. Shoot a piece using a DSLR, having to go into manual focus mode. Gives students that third dimension of depth-of-field blur and rack focus. This is a real eye-opener for students, but they quickly realize the shortcomings audio-wise, and that it may not be ideal for deadline reporting.

Here’s a student example from the second assignment:

Allissa Richardson teaches a mobile journalism class at Bowie State University. She wrote:

I add a locative element. Be sure to include some instruction on how to geotag a video, and how journalists can create/use mapping through apps like Meograph to add more dimensions to video reports.

This opens a whole other area for instruction — shooting and editing video in the field using only a phone. In a recent conversation with Richardson, I was reminded that up to four iPod Touch devices can be tethered to one iPhone for uploads (Settings > General > Cellular > Set Up Personal Hotspot) — note that not all U.S. phone plans include this feature. Read more about Personal Hotspot on the iPhone.

There are so many situations when knowing how to get best results with video on a phone camera will pay off. I’m thinking every j-student needs to learn how to do it.

Getting Better Audio for Video

Finally, the discussion included some specific references to audio. The clear advantage of both consumer video cameras and the higher-end models favored by documentary videographers is the ability of such cameras to easily accept microphone inputs and record good-quality audio in sync with video. Using an external mic is a must for all cameras; monitoring the audio signal with headphones is strongly recommended.

Both DSLRs and smartphones have been notorious for recording poor-quality audio without an external mic.

One educator noted that using a separate Zoom audio recorder (Zoom H4n or Zoom H2n) in conjunction with a DSLR means one must then sync the files in post.

Chandler responded:

Syncing is fairly easy in Final Cut X, as long as one of the audio inputs doesn’t have a lot of background noise. DSLRs made in the last six months have headphone jacks and sound level meters, so audio as the Achilles heel of DSLR video won’t be a factor much longer.

We run a shotgun or a lav mic into the Zoom and get good results. The mics on the Zoom are fine, if the recorder is close to the subject. But to get it close enough, it ends up in the picture, so we usually end up using a lav and putting the recorder out of sight in the subject’s pocket.

If Rode ever delivers the smartLav mic to distributors, then you’ll be able to use a smartphone as a .wav recorder that can be placed on the subject.

Another not-yet-available mic, for iPhone and iPod Touch: the Zoom iQ5. Not clear yet (to me) whether this will fit with popular video cases such as Phocus or mCAM products.

Lih noted: “On most DSLRs you cannot monitor the audio being recorded from the tiny mic on the camera body. A big problem. Also, some [older] DSLRs have limits on how many minutes can be recorded uninterrupted.”

Video Editing Software (Quick Notes)

On the iPhone: the Voddio app, from VeriCorder.

On the desktop/laptop:

  • Final Cut Pro X: Easier to learn, teach, than Final Cut Pro 7, but disliked by editors who work in a team environment, including TV newsrooms.
  • Adobe Premiere: Now experiencing a big comeback because of the teamwork production issues in Final Cut Pro X. A number of j-schools have switched or are considering switching from Final Cut to Premiere for this reason.

There are other video editing programs, but these are the only ones that I hear being discussed today in the Web video arena. I recommend using iMovie in an introductory multimedia course that teaches a number of other things in addition to video — especially if the students have their own MacBooks — in part because you can teach it in about 15 minutes. If I had sufficient time in the course, or if it’s a video-only course, I would certainly teach Final Cut or Premiere.

Code for journalism students: Presentations

In the semester now ending, I taught a course in coding for journalism students. You can see the detailed course schedule online.

Here are all the PowerPoints I showed in that class. You can view them on SlideShare or download them there.

The class went well. The students seem happy with what they have learned and done. They had had a basic intro to HTML and CSS in a previous course, where they built two very simple Web sites.

Top 10 posts this month

These are the most-viewed posts on this blog in the past 30 days:

  1. 10 examples of bespoke article design and scrolling goodness
  2. 10 Rules for Visual Storytelling
  3. Advice to journalism students: Forget grad school!
  4. Recording phone interviews: A solution that works
  5. Get started with Web coding. Part 5: How to use Git and GitHub
  6. List of requirements for a digital story designer
  7. Best social media tools for journalists
  8. Why does anyone major in journalism?
  9. How to shoot video interviews
  10. Get started with Web coding. Part 1: HTML and CSS


Journalism curriculum, and the hands-in-the-air approach

Photo by Andy Hares on Flickr

It’s hard work making sure a journalism curriculum remains relevant.

Here are “four essential components to the new curriculum for teaching news and communication,” according to Tom Rosenstiel, executive director of the American Press Institute and co-author of The Elements of Journalism (2001):

  1. “Teaching of technical skills (how to use different platforms and technology). …”
  2. “Journalistic responsibility (including history, values, ethics, community, material that always made journalists better). …”
  3. “Understanding of business (how to understand audience metrics, revenue, entrepreneurship). …”
  4. “The intellectual discipline of verification … a more conscious, disciplined and clinical approach to what we once called knowing how to report, think and write …”

I think every j-school in North America (including the one where I teach), and probably the world, falls short. We need to ask ourselves why.

One suggestion, which Rosenstiel and others have made, is to partner up with other departments in the university — such as computer science. Some j-schools have done this in one way or another, but it’s not going to work (or work well) in every college and university. Some schools don’t have a computer science department. Some computer science departments will not allow non-majors into their courses. There are computer science departments that have no courses relevant to data-driven journalism or journalism code.

When it comes to hiring new faculty, or adjuncts, to teach the skills on Rosenstiel’s list, we run into other stumbling blocks. In small college towns, the adjunct pool may be limited — and lacking in 21st century skills even more so than the tenured faculty. In colleges and universities all around this continent, budgets have been cut and teaching positions eliminated. New hires on the tenure track are increasingly required (by the top levels of the university) to have a Ph.D., which limits who may be hired.

A common response to all of this is for professors, adjuncts, deans and chairs to throw up their hands and say, “Well, what can we do?”

The clichéd deafening silence often follows the question.

Students deserve better. Regardless of what they think journalism is when they tick the box to become a journalism major (and regardless of whether they’re paying Ivy League prices or in-state tuition at a public university), they deserve to be taught skills, techniques, and ways of thinking that will carry them through the challenging times at hand and ahead. They deserve to have every teacher — tenured, adjunct or freshly pressed Ph.D. — looking at what’s new, what’s happening today, now (what happened in and around Boston last week, for example, as seen in the mainstream news and in social media) and incorporating new methods for reporting, for storytelling, and for engaging the audience into all of their classes.

Don’t forget Rosenstiel’s item No. 3. It’s not about business journalism — it’s about the business of journalism. When students are thinking about getting a salaried job at a major media organization, they’re thinking old school. Many of them need to be pushed to open their eyes and see what’s in front of us now. It’s our job — their journalism teachers’ job — to push them.

Get started with Web coding. Part 5: How to use Git and GitHub

See all posts in this series.

If you want to design the future, learn to code.

That’s how I concluded the last post in this series. So far, I’ve discussed HTML and CSS, JavaScript and jQuery, the command line, and software and CMSs. The vast majority of journalists out there are probably not going to stick with the program much past part 1 (HTML and CSS). But for those of you still with me, Git has become a de facto standard in a very short time, so let’s go!

What is Git? Git is a version control system (VCS). Version control helps you manage and keep track of changes you make to your online projects. Version control is considered essential for teams working together on a digital project. Git is free and open source — there are no fees.

How do you get Git? You must download and install Git on your own computer. Follow these instructions for any operating system. Skip past the part “Installing from Source” and go down the page to the part for Windows or for Mac. For Mac OS, download the Git installer, which launches a typical DMG file. Note: Some steps below will not work if Git has not been installed.

How do you use Git? This has a long list of possible answers, and you will need to learn a lot more if you are working on a project together with teammates. I’m going to focus on the solo user, such as one journalism student working on his or her own files. Basically, once Git is in place in a project folder on your hard drive (explained below), you will add files from your project, commit files after you have updated or changed them, and push files to an online site or repository (repo) when ready. Even if you are not working with teammates, this can help you prevent mistakes if you work on multiple computers — you can pull the latest version from the repo to quickly incorporate any changed files on the local computer.

You might be thinking, well, my Web sites or projects are very small, only a handful of files, so I don’t need this Git stuff. Okay, fair enough. But if you ever need to share a site or a project with other people, GitHub provides an easy way to do it. Others can download your entire project by clicking the Zip button on the GitHub repo page.

GitHub image - download zipped file

I have Git — now what?

If you have installed Git and done nothing else, what’s next? Do you have an account on GitHub? No? Then let’s do that next. (Yes? Skip down to the following subheading.)

GitHub image - First steps at GitHub

GitHub is a social site for code. It has more than 3 million users and is free to use, unless you want to have private code repos (then you’ll need to pay). So if you’re not going to pay, don’t put anything on GitHub that you don’t want the world to see. Coders from all around the world share their code publicly on GitHub. This is one of the coolest things about it. Even if you do not have a GitHub account, you can look at other people’s code, like this.

Go to GitHub, type a username, your email address and a password, and you’re good to go. Now read this and do what it says. It explains how to set up your very first “repo,” which means a repository for your files and code.

GitHub image - Create a new repo

If you have a little code project on your own computer already, maybe it has a name like photo-slider or personal site or scrolling_game. That is, you’ve got files inside a folder with a name like one of those names. If so, it would make sense to name your first repo the same way, and you could try putting a real project into your first repo. (Note that repos use hyphens in the name, not an underscore or a space.) Check out the way repos are named on GitHub’s Explore page.

Note: You do not need to create a README right away. You can wait.

I have a GitHub account, and so …

You have already downloaded and installed Git, but you haven’t set it up yet. I wanted you to wait a bit because this part requires you to go to the command line. It attaches your name to your work, and your GitHub login details. If you’re already comfortable with the command line, of course this will be simple for you. If you’re not used to the command line, you can do it in the client program — read on!

Assuming you are not a command-line jockey, you should now download and install GitHub for Mac (OSX 10.7+ only) or GitHub for Windows. Each of those is a client program that lets you manage your projects and all associated files without going to the command line. To get started, you will need your GitHub username and password — which is why you had to set up GitHub before this part!

After you supply your GitHub username and password to the client program, you’ll see the name of your first repo (the one you made earlier on GitHub) appear there. (If you don’t see the name of your repo, click your username at the left side.) Notice it says “Clone to Computer” on a button to the right of the repo name (shown below). Do not click it. (There are no files in your repo on GitHub, so there’s nothing to clone!)

GitHub for Mac image - Clone to Computer button

Interlude: Set your username and email address in the client program now.

GitHub for Mac image - git config information

Now, back to the “clone” thing: If you had files on GitHub.com and not on your own computer, then you would press the clone button. This would be perfect if you had an empty folder just waiting on your computer to receive a bunch of files. Cloning would bring the whole repo from GitHub down to your local folder.

However, if you have files for this project on your computer, and no files at GitHub.com, here’s how to copy all those files up to GitHub:

  1. File menu > Add Local Repository
  2. Navigate to the folder on your computer that contains all your project files.
  3. Open the folder and click Add.
  4. The client alerts you that this is not a Git repository (yet). Click Yes to make the magic happen. (This is what I meant above when I said “once Git is in place in a project folder on your hard drive.” When you click Yes, the client invisibly runs a git init command, which enables Git in that one folder.)

GitHub for Mac client image - Add Local Repo

Now your client flips to the Changes tab, and you see all the files that are inside the folder. These files are waiting for your first commit. (This is a big difference between the client and doing Git at the command line, by the way.) You’re about to do several steps — to upload all the files to your GitHub repo (where others can see and easily download them as one zipped file) — so make sure these are files you don’t mind others having access to.

Ready? Okay. Find the text near the upper left that says “Commit summary.” Replace that text with a few words that describe what’s been changed since your last commit. Since you never committed to this repo before, type “first commit.”

GitHub for Mac client image - Type a commit message

Click the button Commit & Sync. Now your local folder and the (remote) repo are sync’d. But your files are not at GitHub.com yet.

To send the files this first time requires two steps in the client:

  1. Click the Settings tab in the client. This is where you provide the Web address of your repo at GitHub. Get the address from your repo’s page at GitHub (see illustration below). Then click Update Remote.
  2. Click the Branches tab in the client. Then click the Publish button on the right side. Refresh your repo’s page at GitHub, and you will see all your files there. Click any file to open it. You can even edit files right there, on GitHub. (Warning: If you make a change on GitHub, be sure to do a pull in the client program — it’s on the Repository menu.)

GitHub image - Get the URL of a GitHub repo

You’ll need to explore the help document for your client program — Mac or Windows — to get the hang of keeping everything sync’d up in true Git fashion. You might even find yourself yearning to learn more about the command line in just a little while.

GitHub image - Help files for GitHub for Mac client program

Forking and branches

Two bits of jargon you’ll hear often around the world of Git are fork and branch.

If you fork someone’s code on GitHub, you get an independent copy of that whole repo, in your GitHub account. You can then modify any part of it without affecting the original. The files will not appear on your computer unless you clone the repo locally (about cloning: see the third paragraph under the subheading above, “I have a GitHub account, and so …”). Note: You can download someone’s repo without forking it.

Branches are vital for teams working on different pieces of one project. A branch is a copy of the code that stays in the same project, a parallel duplicate. A branch can later be merged back into the master, or original set, of all files and code. If any changes are incompatible, Git highlights them all for you so that human intelligence can decide what to keep and what to delete. Note: The original, first or only set of files is also a branch, named master. So every repo has at least one branch.

Git vs. FTP

Are you regularly updating and uploading files to a Web server? You might like to use Git to handle that for you. There’s a repo for that, in fact! Separately, there’s a very straightforward how-to for the command line. Less straightforward — this 26-minute video is almost scary (the guy opens a lot of apps in the process of figuring out, live, how to do this) but kind of fun to watch; he uses Beanstalk, a paid service. See also: Using Git for Deployment (detailed).

You must know your way around your hosting server before you try this part (replacing FTP). And you’ve got to be comfortable with the command line. If you’re not, better stick with FTP, I think.

More Information About Git

This Series

List of requirements for a digital story designer

The job title given in the advertisement is “digital news developer.” These are the requirements:

  • College degree
  • Minimum of 2 years programming experience
  • Advanced command of HTML5, CSS, JavaScript (including jQuery)
  • Light Ruby or Python for data mining, Web scraping
  • Comfort with data analysis
  • Understanding of responsive design
  • Familiarity with Final Cut Pro and Adobe InDesign

This is a very reasonable list, in my opinion, and the ad copy is good overall. It is not the kind of “computer jesus” job description that Sean Blanda blasted in 2008. What’s the likelihood that the McClatchy Company (which publishes 30 daily newspapers) will find a perfect person to hire? I’m not sure. And will the salary be good enough? Washington, D.C., is an expensive area to live in.

Those concerns aside, what does this list say to journalism educators? And to journalism students who love design?

Is this a job for a person who has a degree in computer science? Absolutely not. You will not learn those skills in a computer science program.

I think the only regrettable thing about this intriguing job ad is the job title. A better title would be something like “storytelling architect.”

Recently I was discussing with a few colleagues the value of design courses in the journalism curriculum. One colleague noted that maybe the j-school is not really the correct place for such courses. Even though traditional design skills — such as how to use typography, color, and white space — are still hugely important in digital and print design alike, those skills are taught in the graphic design program in the College of Fine Arts. But where in the university will the student learn about responsive design and storytelling?

Look again at that skills list. This really is a journalism job. It’s not an art job. It’s not a programming job.

10 examples of bespoke article design and scrolling goodness

Have you been noticing all the pretty sliding/scrolling articles that are popping up around the Internetz? My students think they’re wonderful, and so do I. So let’s look at a roundup of some great ones.

Screenshot: Snow Fall

Of course we’ll begin with Snow Fall: The Avalanche at Tunnel Creek. This New York Times multimedia feature had the world journalism community talking and tweeting like crazy as soon as it appeared online. This blog post — More than 3.5 million page views for New York Times’ “Snow Fall” feature — reproduces an internal New York Times memo about how popular the multimedia feature turned out to be. In this post at Source (a project concerning journalism code) — How We Made Snow Fall: A Q&A with the New York Times team — the graphics director, graphics editor, video journalist, and deputy director for digital design who created this feature explain how they did it.

Screenshot: America: Elect!

America: Elect! (from The Guardian) is not only a fun, slidy mini-graphic novel — it’s also the subject of a short but very helpful how-to article: How we built our “America: Elect!” graphic novel interactive, by interactive developer Julian Burgess. Parallax scrolling libraryskrollr (check this one out).

Screenshot: Dock Ellis 1 of 2

Screenshot: Dock Ellis 2 of 2

ESPN was ahead of the pack with The Long, Strange Trip of Dock Ellis, a lavishly illustrated story about the Pittsburgh Pirates pitcher. Plugincurtain.js.

Screenshot from Pitchfork 1

Screenshot from Pitchfork 2

Pitchfork magazine used the technique as a showcase for photography, featuring Bat for Lashes singer Natasha Khan, in a cover story titled Glitter in the Dark.

Screenshot: Lost and Found

Lost and Found, an NPR story about photographer Charles W. Cushman, has a beautiful horizontal scrolling audio story in the middle of the page. Look for the Play button below the heading “The Year Is 1938.” Frameworkpopcorn.js.

Screenshot: Fracking

Screenshot: Every Last Drop

The Guardian‘s Burgess linked to a scrolling graphic story about fracking — What goes in and out of hydraulic fracturing (it appears that designer Linda Dong rolled her own scrolling code for this one) — which reminded me a little of Every Last Drop, which uses scrolling graphics to tell the story of how much water we waste every day (parallax scrolling libraryskrollr). I found the fracking story to be more journalistic, especially given the sources listed at the end.

Screenshot: Cycling's Road Forward

Another long-form narrative dressed up very nicely with this technique: Cycling’s Road Forward, from The Washington Post. Framework: Bootstrap. Tools include Modernizr.

Screenshot: Unfit for Work

Unfit for Work (from Planet Money, a program that runs on NPR) has a beautiful responsive article design. I love the big data graphics embedded throughout the article. I’ve been all over the code looking for the bit that slides the sections up and down, but all I can find is very clean CSS and HTML, great attention to responsiveness, and assorted JavaScript files that don’t reference the section element, the H3, or the wallpaper class. I’m super-impressed by the code, because it looks like it can be replicated for other articles. In other words, this design is repeatable.

Screenshot: Too Young to Wed

Too Young to Wed (from the United Nations Population Fund) is a little harder to navigate than the others, in my opinion (it interrupts the vertical scroll with horizontal-scrolling slideshows), but the gorgeous photography and heartbreaking story make it well worth a look. jQuery plugin: ScrollTo.

There are many tutorials for parallax scrolling — here’s one.

Related: The future of the feature: Breaking out of templates to build customized reading experiences, by Kevin Nguyen, November 2012

Do you have other examples to recommend? Please share links in the comments!