Journalists' Toolkit

Icon

A training site for multimedia and online journalists

JavaScript Console in Chrome

For testing things quickly in JavaScript, open the JavaScript Console in the Google Chrome browser. View menu > Developer > JavaScript Console.

You’ll see the console at the bottom of the current page.

The console gives you a command line so you can test short pieces of code to see what they do.

If you want to use the console as a stand-alone window, undock it with the button in the lower left corner.

You can keep the window open for quick access while you’re learning JavaScript.

The best video export options

How do you choose the best settings for exporting your video, after you have edited it?

I remember how confusing this was for me when I started working with Web video several years ago. With the slower computers we had back then, I would wait for what seemed like forever while exporting a small 2-minute video — only to have it come out looking horrible. Then I would change the export settings, using whatever information I had to base decisions on, and then go through the process again.

I kept thinking someone, somewhere must have the list of instructions for how to export my video properly! Why couldn’t I find that list?

I couldn’t find it because it doesn’t exist, and here’s why:

  1. Every video editing program has a different constellation of options for exporting.
  2. The options change, at least slightly, every time a new version of the software comes out. This is at least partly because improvements are being made in digital video technology almost continuously.
  3. The character of the video itself can require different settings for best results.
  4. There are so many different possibilities for your output — will it be playing on an iPhone or on a large HD screen?

The good news

To save yourself a lot of time, start by looking at where the final video is going to appear. If it’s going to be on YouTube, then start by reading about their supported file formats. YouTube has a list of helpful articles about editing videos.

If it’s going to be on Vimeo, read their guide on compression. This is actually a list of common things you will see in your video editing software when you go to export your edited video. They also list their supported file formats on that page.

In other words, work backward from the end result you are aiming for. Choosing the file format cuts out many of the myriad options offered by most video editing programs.

If you’re working for a company that frequently puts videos on its website, you can bet there is already a “recipe” for how to export. If no one has experimented, determined the best practices, and written that recipe yet — then maybe that’s YOUR job! Seriously, if you’re part of a media organization and no one has codified the preferred workflow and export settings for video, then someone needs to step up and get that done.

Highest quality

Do not choose a low-quality option for exporting your video. In some programs you might have an option such as “For e-mail” — that would make a small, ugly video, because the emphasis is on making the file size small enough to be practical for sending as an e-mail attachment (which no one should ever do with video anyway!).

In Windows Movie Maker, there is a setting “For Web,” which you might think is a good choice for Web video. Wrong! Again, you are choosing an unreasonably bad quality. In that case the highest quality is “For computer.” (Windows is just weird.)

On the other hand, “For DVD” in any program is likely to do all kinds of things you DO NOT want for the Web.

Once you have exported a high-quality video file, it is possible to convert it to other formats and lesser quality without going through the whole export process again. If you have a low-quality file, however, it is not possible to improve it — UNLESS you go back and export all over again.

General terms and things to look for

File format: I mentioned this already. Every computer file has a format, and that format is represented by a file extension, such as .docx for Microsoft Word documents and .jpg for most photographs. There are lots of different video file formats, but some of these are far more common than others. MP4 (.mp4) and WMV (.wmv) are two you might be familiar with. What about .ogv or .webm? Not so common today, but it’s likely they will be, as HTML5 gains ground. You need to figure out which format will be suitable for the video you want to export.

Codec: This word is short for coder/decoder, and in many video editing programs, this is what you need to select before you get a choice of file formats. So, choose H.264 for MP4, for example. If your software does not offer you a choice of codecs (like Windows Live Movie Maker), it is probably because there is only one, so you don’t get to choose.

Frame rate: Digital video usually has a frame rate (number of frames per second) of 30 or close to 30 (29.97). Film has a frame rate of 24 frames per second. Generally you’re going to shoot at 30 fps and export for 30 fps.

Audio: If you get to choose audio settings, keep in mind that “CD quality” is 44.1 kHz and 128 kbps. Anything lower starts to sound bad. If you can choose mono instead of stereo, you could consider that the file size will be significantly smaller if you select mono.

Data rate: This is a big consideration for quality for streaming video. Lower numbers mean lower quality. Higher numbers, while they do provide higher quality images and motion, also increase the file size. If you’ve ever watched an online video that stopped and started repeatedly, that video probably had a high data rate. I start with a data rate of 1000 kbps for a video that does not have a lot of action and motion in it. If the quality of the exported file seems poor, then I try again with 2000.

Deinterlacing: Always choose this for online videos. Otherwise, the image can be messed up.

Aspect ratio: An easy way to think about this: Is your video frame almost square, like an old-style TV? That’s 4:3. Is your video frame long and wide from side to side? That’s 16:9. These are the two most common aspect ratios.

Resolution: This is measured in pixels — and for Web video, keep in mind that many people do not have gigantic computer screens. A standard (4:3) video is typically 640 x 480 (width x height), and a widescreen (16:9) video is often 853 x 480. HD video (also 16:9) is 1280 x 720 — half-size (still 16:9) would be 640 x 360.

Keyframes: I usually choose “Automatic” if the video editing software gives me an option. You may choose to have a keyframe added for every x frames, but I don’t know the criteria for choosing the number. I do know that a higher number will increase the file size!

Final tips

If you have exported a video and you like the results, go back immediately and write down all the settings you used. There’s no way you will remember them next time!

If you’re using the same settings you always use, but this time the video came out poorly (especially if it is indistinct, or smeared in appearance), maybe this video has a lot more changes at a faster pace. It does not have to be motion; it may be just a lot of fast cutting among very different scenes. Try increasing the data rate and/or adding keyframes — for example, keyframes every 30 frames.

Video Resources updated

The new Video Resources page has been added to this site.

This is a carefully curated page with links to good tutorials for video editing software, video shooting tips, and the like. It’s intended for beginners, particularly journalism students and journalism educators who are teaching video in their classes.

Flash Journalism updates

I have been hard at work updating the Flash Journalism website. New tutorials for ActionScript 3.0 and for working on the Timeline in CS4 and CS5 have been added.

The old pages from the original site (created to support the book I wrote about Flash journalism in 2004) are still online, and all the old links will remain operational (for ActionScript 2.0. and Flash MX 2004/Flash 8). I have built a new site on top of the old one.

There are lots of new working examples that can be downloaded and used by students or working journalists who are learning to use Flash to tell stories and to add interactivity to stories. Here are a few to get you started:

The main difference I have discovered so far between CS4 and CS5 concerns the way embedded fonts are handled. This will affect any tutorial that includes a dynamic text field (for loading text from outside files), including the scrollbar file and the XML file above. What that means: When an example is labeled CS4 and includes a dynamic text field, that FLA will need extra work if it is opened with CS5. If you don’t have CS5, there’s no problem. And all the files still work perfectly online in Flash Player 9 or 10.

But if you are using CS5, and you open a CS4 tutorial that includes a dynamic text field, you need to rebuild that text field and embed the fonts in the new way. If you do that, a Flash CS4 file works fine in every respect when edited and saved in CS5. And if there are no dynamic text fields, a CS4 file works fine in CS5.

Web hosting and domain names

So you have decided that a free WordPress.com blog is not enough for you, and you’re ready to be in charge of your own Web space. Hooray for you! Now what?

First, you should understand the difference between a domain name and Web hosting.

What is a domain name?

My personal site is at mindymcadams.com — a domain name that I own. Other examples of domain names:

  • apple.com
  • copyright.gov (.gov is U.S. government only)
  • tmobile.net (.net is often, but not always, used by network service providers)
  • amnesty.org (.org is often, but not always, used by nonprofit organizations and NGOs)
  • cbc.ca (.ca — Canada — is a country code top-level domain: ccTLD. Others include .mx, .cn, .in, .br, .ru)

Note that “owning” a domain name is rather like renting an apartment — you have to pay for it every year. Stop paying, and you lose it.

To learn more about general top-level domains (gTLDs), see the list of ICANN-Accredited Registrars for each domain. See a list of all ccTLDs at IANA, the Internet Assigned Numbers Authority.

What is Web hosting (and how do you get it)?

Web hosting is also a bit like renting — it’s a home for your Web pages. You could set up a Web server (a computer running server software), but almost no one does that. Instead, giant (and small) Web hosting companies do it for us. They have multiple servers all running different people’s Web sites and services.

When you sign up for Web hosting the first time, the deal often includes one free domain name. If you take that deal, you’ll still have to pay for your domain every year, but it takes away an extra step that otherwise you’ll need to take. If you do own a domain name separate from your hosting deal, you will NOT need to transfer your domain name (a complicated process) — you only need to direct it to your new host. Most Web hosting companies provide simple instructions to help you do this.

Here’s a really nice guide for choosing a hosting provider: How to Choose a Web Host.

Lifehacker readers voted for the Five Best Personal Web Hosts (May 2010). Also highly recommended: WebFaction. (Disclaimer: If you sign up using that link, I get a small kickback.)

How to get your website onto the Web server

Having set up a space for your website by acquiring hosting and a domain name, you’ll need to create some Web pages and graphics and upload them. It is most convenient to use an FTP program (or client application) to do this. You’ll create the pages and graphics on your own computer and then upload them to the Web server (your host).

Your Web hosting company should provide simple instructions about how to do this.

An easy-to-use free FTP client is FireFTP, which works in the Firefox Web browser. See a tutorial for FireFTP here at Journalists’ Toolkit.

If you use Dreamweaver, the FTP client and site management tools are built in. This is quite handy for smaller sites that use only static (non-dynamic) pages.

New screencast tutorial for Audacity

The second “how to edit audio with Audacity” video screencast tutorial is finished: Multitrack Audio Editing (Audacity Part 2). This is a 15-minute self-guided tutorial with lots of comments and a detailed table of contents.

The first video screencast tutorial for Audacity is an introduction: Audacity Basics: Getting Started in Audio Editing. At 17 minutes, it’s an ideal starting point for journalists or journalism students. I have added a detailed table of contents to this one as well.

These tutorials were built with Adobe Captivate, so once they are downloaded, you can skip back and forth without any waiting. The table of contents is clickable, so you can go straight to any segment for review. However, that means the file format of these tutorials is SWF, so for now, they will not play on iPad.

7 Do’s and Don’ts for Video on Point-and-Shoot Cameras

Video shot with a still camera costing less than $300 is often better in quality than video shot with a video camera in the same price range.

For best results when shooting video with an inexpensive still camera, follow these tips:

1. Do NOT zoom. Ever. EVER! The quality for video on these cameras is only acceptable at the widest angle (not zoomed at all). This is true even though the zoom works great for your still photos.

2. Do NOT move the camera around while shooting. This will make your clips difficult to edit. VERY difficult. Stand completely still, like a rock, while you are recording video. Do not pan (camera moves left or right). Do not tilt (camera moves up or down).

3. Do NOT shoot inside an apartment or a house. They are almost always too dark! Some indoor settings are fine — for example, a brightly lighted classroom with the overhead fluorescent lights on.

4. DO pay attention to the light — not only the amount of light, but also the direction. If the light is BEHIND your subject, the person will be a dark blob in silhouette — and that’s not good!

5. Do NOT shoot in dark places. Video game rooms, pool rooms, bars and indoor performance venues are usually too dark for acceptable video with these cameras. A more expensive digital video camera ($600 and up) can often get decent video in low light, but most of these little cameras can’t compensate for darkness. (For exceptions to the rule, look for a camera with a bigger sensor size.)

6. Do NOT turn the camera into a portrait position (vertical) for video — EVER! Always hold it in landscape position (horizontal).

7. When shooting a video interview, DO stand VERY close to your subject. The microphone built into the camera is going to capture all the sound around you, and unless you are quite near the person who is speaking, the voice will be drowned out by surrounding noise.

More tips for shooting video: Five Shots, 10 Seconds.

Avoiding the shakes: How to hold the camera.

Soundslides: Getting started, tips and help

A new resource page here: Soundslides: A Brief Introduction.

It provides a simple overview of what Soundslides can do and how to get started with the application — which is widely used for creating simple audio slideshows for the Web.

At the bottom of the page you’ll find some helpful links.

You might also be interested in this site’s Soundslides Troubleshooting Guide, which covers the most common errors made by new users of Soundslides.

iMovie 09 tutorials for journalism students

For journalism students just starting to learn video, I created two compact, illustrated handouts in fall 2010:

Basic iMovie 09 Tutorial — PDF, 9 pages, 1 MB

More iMovie 09 Tips (Part 2) — PDF, 6 pages, 552 KB

The reason I made two handouts instead of one:

In the first video editing class, I teach purely editing. I focus on how to trim, what to trim, and how to match the action. I talk a little about avoiding jump cuts. I explain how to export a high quality file.

In the second video editing class, I devote most of the time to how cutaways work and how to make them. Then I cover how to add audio, titles and credits. Adjustments to audio volume and detaching audio from video are also explained.

You can use these handouts under this Creative Commons license.

Apple’s how-to videos for iMovie 09 are here.

Use Kuler, Photoshop to make a quick palette

What’s the quickest way to whip up a beautiful color palette for a new website?

1. Start with Kuler, a free online tool from Adobe.

2. Register and sign in so you can download a color swatch for your chosen palette(s). Not signed in? Then you can’t download. (Pay attention to WHERE you save the file!)

3. Open Photoshop and find the Swatches panel.

4. Open the Swatches panel menu and select Load Swatches.

5. Find that file you downloaded in step 2 and select it.

6. The last colors in your Swatches list will be the new ones from Kuler (open the Swatches panel menu and select Small List to see the hexadecimal color codes as shown below).

There you have it! To learn more about using Kuler, watch this video at Adobe TV (6 min. 34 sec.).

It’s useful to finalize a color palette in Photoshop before you start coding your CSS. Test all text and link colors against the background colors where they will appear to ensure that the contrast is okay.

Smart Tip: Save the palette as a PNG-24 file and upload to a Web server or Dropbox. Then test it by opening that file on every computer you can get your hands on. Hues and contrast can vary widely on laptops and desktops, Mac and Windows. Make sure your palette will work for all users!

Learn more about Web color and Photoshop: The Mysterious “Save For Web” Color Shift, by Doug Avery.