Journalists' Toolkit

Icon

A training site for multimedia and online journalists

HTML and CSS templates for learning, teaching

I have made a GitHub repo containing HTML and CSS templates for beginners.

An entire GitHub repo can be downloaded by clicking the “Download ZIP” button on the right-hand side of the main page.

As a teacher, I find it’s very handy to have files ready to open and show to students who are having trouble with one aspect of CSS or HTML. I show them the code, we talk about it, they usually get a clearer idea of how it works. But digging around for files on my hard drive is time-consuming and not always successful. Writing a new stylesheet from scratch takes time.

So this collection of simple problem-solving (and problem-illustrating) files will be useful to me in many situations. You can use it too.

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.

Typography for the Web

In your CSS, you can specify typefaces (font families) to be used for the headings, paragraphs, etc., in your HTML.

However, what you see on your computer is not always going to be the same thing your audience sees. Why? Because different people have different fonts installed on their individual computers, phones, and other devices. If they do not have the font you specified, their device will automatically substitute … some other font.

It could be ugly. Very ugly.

There are two ways to ensure that the typeface you see on your pages will be seen by everyone else. The first and simplest way is to use Google Web Fonts. Just click that link, and you’ll be on your way.

The other way is more complicated to set up, initially, and you’ll have to upload the fonts to your own Web host. (That is not necessary if you use the Google fonts.) If you want to try it, go to Font Squirrel.

You should also read this helpful article from Six RevisionsCSS Typography: Techniques and Best Practices.

The article explains the techniques used for fonts in present-day Web design.

Comparison of Google Web fonts and @font-face

I chose three different fonts from the Google Web fonts collection. I made a simple page that uses all three fonts (view that page).

Then I uploaded those same three fonts to Font Squirrel’s generator page and used it to create the complete package of files that one needs to upload to the server (when using @font-face instead of the the Google Web fonts). I used the same simple page and its original CSS in combination with the @font-face CSS to make a comparison. If you view that page side-by-side with the other, you can check for differences in different Web browsers.

The two pages should look the same, but understand that the coding is different on each one. For the Google Web fonts version, there’s just one line in the HEAD of my HTML page. For the @font-face version, there is a separate additional stylesheet and also 590 KB of files on my Web server to make the fonts work.

Good tutorial sites for HTML, HTML5, CSS, jQuery

There are a zillion sites out there offering free tutorials, but many are pure junk. So here are a few that I recommend, in no particular order:

And some handy lists of many recent tutorials:

If you know of any others, please leave a comment.

Baby Steps in Data Journalism

This is a Tumblr blog that I started in early April 2012:

Baby Steps in Data Journalism

Its purpose is to collect links and other useful information related to learning about data journalism.

To go directly to something you might be searching for, try these links:

How I installed Python (April 2012): Mac OS

A review of basic Unix commands:

  1. Baby Steps in Unix/Linux Part 1: Listing
  2. Baby Steps in Unix/Linux Part 2: Change Directories
  3. Baby Steps in Unix/Linux Part 3: Your Home Directory

Major categories so far:

Other tagged categories:

Eventually I will organize some of this material into new sections here at Journalists’ Toolkit. But for the near future, it’s all at the “Baby Steps” site.

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.