It's common nowadays to hire someone who lives and works far away and to never speak to the person or company you've hired. If you use Elance or find someone through Craigslist, the entire process is handled with email and/or through the Elance system. Don't worry, there is very little risk to this new-age manner of hiring help, especially if you use Elance or a similar site.

If you are not comfortable with this, find someone local and follow these steps:

Have a Kickoff Meeting

In your first meeting, it's important to set the right tone. This meeting should strike a balance between a high-level overview and expected next steps. No one should leave this meeting wondering what they're supposed to do next. At the same time, this shouldn't be the time for every task to be spelled out. Just get people moving forward.

Find a Gatekeeper

At the kickoff meeting, appoint a key contact person from each organization who is responsible for being part of every information exchange, be it a meeting, call or e-mail. Unless the project involves dozens of people, it's important that this one person be the keeper, if not the conduit, of all information.

Share Contact Info

Make a list of all contact information for each person involved. Keep it up-to-date. If time zones or work hours vary, include this on the contact list.

Establish a Regular Meeting Schedule

It doesn't have to be too frequent, but you should confer regularly. You can always supplement with additional meetings, if needed. Organizations being what they are, it's hard to squeeze meetings into full calendars, so the sooner you schedule your meetings, the greater the likelihood that you’ll avoid delays in search of mutually agreeable times.

Make sure you schedule regular meetings, in advance. You don’t need to clog up your schedule with meetings every few days. Just plan to meet often enough to keep the project on track. Scheduling your meetings in advance will help prevent conflicts down the road.

Keep Track of Progress

One of the best ways to keep a project on track is to use a shared project management tool. The more project people who have access to this tool, the more likely it is to be kept up-to-date. We’ve had good success with Basecamp.

You can track a single project for free or pay a reasonable amount per month to track several projects.

There are several good books about project management. Here are a few of our favorites:

• "Web ReDesign : Workflow that Works," by Kelly Goto, Emily Cotler (ISBN 0735710627)
• "Web Project Management: Delivering Successful Commercial Web Sites," by Ashley Friedlein (ISBN 1558606785)
• "Real Web Project Management: Case Studies and Best Practices from the Trenches," by Thomas J. Shelford, Gregory A. Remillard (ISBN 0321112555)

Who Owns What

Your contract should state clearly that your contractors are creating a work for hire and that they give you the copyright to all parts of it.

Some developers may want to retain the right to the programming, to certain design elements or even to some of the writing done for the site. If this is the case, make sure that you have a clear, broad and unending license to use what they made for you. For example, you'll want to be able to use screenshots of the site in brochures, advertising or manuals. You'll also want to be able to modify any of the programming and be able to reuse it on any other site you might want to start.

Properly Cleared Material

Of course, before the designers can give you the rights to your Web site, they must be sure that they have the rights in the first place. This means you should ask for some sort of warranty that the pictures, the code, the design and any other material they include are either public domain or otherwise safe to use because they have been cleared with the owners. Ultimately, if you're the one using the material, the copyright owner is going to go after you, so this is a critical protection.

General Caveats

The usual legal warnings should naturally apply. Make sure that:

• Your contractor signs your contract or scope of work agreement.
• The court venue for resolving any disputes is in your neck of the woods instead of theirs.
• There are clear deadlines and specific reasonable penalties for not meeting the deadlines.
• The conditions for breaking off the agreement are clear and not too harsh for either of you.

None of this should be something you'll end up dealing with, but the company that's willing to consider these details is one in which you ought to feel more comfortable placing your trust.

For starters, ask friends and colleagues who have Web sites that you admire whether they would recommend their designers. Probe for what they liked, didn’t like and what they wished they would have done differently. Nothing beats a personal recommendation.

Second, try online freelance connection services like Elance.com. This site has thousands of freelancers and contract workers in every specialty imaginable, plus a structured bidding process, a feedback system and an escrow process for payments so you won't get taken for a ride.

Next, try placing a classified ad on Craigslist or another free listing service.

If cost is an issue, local universities might offer a good pool of Web-savvy labor. If you're close to a college with a significant new media program, you might find a professor who is interested in letting his students work with you as a class project. A small ad in the student paper might also bring forth good candidates.

Vetting Contractors

After you've located some leads, you need to choose the right vendor. Many Web developers, often the best ones, are self-trained. Your best guideline is to ask for a proposal in writing and for satisfied references. Anyone who has used a contractor to build an entire Web site should be able to attest to that designer’s competence and temperament.

Still, here's a quick list of questions you should get any design candidate to answer:

1. How long have you been in business?
2. What other current or upcoming projects will you be working on?
3. What sort of data security and backup practices do you follow?
4. Will the work be done by you or subcontracted out to others? If subcontracted, in what country will the work be done?
5. What is the training or experience level of the people who will work on the project?
6. Where can one see samples of their work?
7. What sort of warranty or guarantee do you offer?
8. How do you handle any changes to an RFP?

But be warned: it takes a lot of work and may be overkill if you're just hiring a freelancer to design a logo and choose a color scheme.

A good RFP should cover the following elements:

• Intended audience. Who do you want to reach? Where do they live? What’s their demographic profile? How tech-savvy are they? For example: “This site is designed for senior citizens in Maryland who are looking for important medical information but are unfamiliar with the Web.” Or, “Our target users are college students with mobile phones who are interested in extreme sports.”
• Features list. It should detail specific functions you want the site to have, such as the ability to search the site with key words, a gallery of photos or an automated RSS feed. Take care to be specific. For instance, listing "site search" may not be enough. You may need to specify: "Search capability that is updated as each new file is added and finds any file placed on the Web server and any data added to the database, including PDF brochures. The search doesn't need to allow complex searches but does need to agree with the site's look and feel. It should also point out possible misspellings, like Google does."
• A site map. It should outline the various kinds of content you plan to have, such as stories, registration forms, grant guidelines or discussion forums. To see an example, visit Google.com’s online site map.
• Content samples. These should give the designer an idea of the kinds of documents or information you expect to offer on the site.
• Any existing technology to be integrated. For instance, you may need to integrate your existing contact information into another database system, such as Access.
• Scope of work statement. You should be clear about the work you expect to be completed by your developer and what tasks fall outside that scope.
• Behavioral profiles. These are basic "stories" about what you expect a person to do upon visiting your site. For instance, will your visitors be tracking resources, looking at grant guidelines or signing up to participate in something? This helps the designer determine placement of the design elements and suggest features that you may have overlooked.
• Future development plans. This helps your developer build a site that will accommodate your future vision. Some current development experts recommend not overbuilding for possible future plans. That is a fine strategy, especially if you have limited resources. Still, that’s no reason to build a site that can’t expand, especially in a direction you were anticipating. For example, a developer might choose to store byline information differently, if it knows that a site will allow multiple contributors on articles in the future. Or, if a site is specific to a small geographic area, but has plans to grow to a number of areas, location information might be handled in a different manner.
• Clear and explicit deadline requirements. A reputable designer will agree to a set schedule and be able to meet deadlines. You should allow some flexibility, building in a few days before you actually need the material. Building in this extra time will help prevent missed deadlines. The designer should deliver the product on or before the due date. Written in your RFP should also be agreed-upon consequences if the designer does not deliver on time, including warnings, deduction of payment and/or termination.
• Your budget. It will save time and help you develop a more suitable RFP if you say upfront what you are willing to spend. A company that would pad its estimate will do so regardless of what you tell them upfront, and a decent company will use that information to make appropriate software, hardware and design choices.
• Ongoing support and maintenance. It can be to your advantage to bundle that request into your RFP. It also gives the company an incentive to finish the work on time and budget, because they know you intend to continue to use them for ongoing work.
• Examples of what you like. Collect some favorites and share them with your developer. For example, it's one thing to say you want "spell check" as an administrative requirement. It's another to say you’d like spell check like Microsoft Word’s or search features like Google’s.

Assembling an RFP is hard work. However, a well-crafted, detailed document will become an indispensable part of the project. You will refer back to it frequently. And it’s common, at the end of your project, to end up wishing you had been even more detailed in preparing it.

If you have an RFP you'd be willing to share, please e-mail it to news@j-lab.org and we will post it here or link to it from the comments.

When Do You Need to Hire Help?

Some aspects of developing your Web site might benefit from an extra set of hands or a professional's expertise. Here, then, are some factors that will help you decide if you should hire some help.

1. To meet a deadline. There are times you simply have to complete something by a certain time. Perhaps you have a limited marketing opportunity, an annual event critical to your audience to cover, or a competitor moving into your turf. In these cases, finding a professional to assist you may pay you back in additional audience, reputation or market share. However, adding more people late in the process rarely helps you make your deadline. Decide on whether to outsource some work as soon as the deadline is known, not when the deadline has nearly arrived.
2. To do one-time setups. While it may be an advantage for you, or your staff, to be able to make basic modifications to your site's technical underpinnings, there's little payoff in learning how to install or configure most server software packages from scratch. An experienced consultant will be able to get you up and running more quickly than you could yourself, allowing you more time to focus on filling the site with content.
3. To supplement your expertise. Sure, you could buy a book, take a course and become an expert in, say, search interfaces. But becoming a master at all aspects of Web development could take years, and you still wouldn't be able to keep up-to-date with every latest Web advance. Instead, focus on the areas that play to your interests and your abilities. Hire someone to do the rest, as needed.
4. To do drudge work — sometimes. While answering customer service e-mail or cleaning spam out of the forums might not seem like fun, it does help keep your fingers on the pulse of the site. Consider putting off repetitive tasks for when you hit a down period, or plug away while you're watching TV. On the other hand, some drudge work, such as reformatting tables, has little redeeming value; hire someone to do that.
5. To build it right the first time. If you know clearly what you want, it's almost always cheaper to build it the first time than it is to renovate an existing Web site. That's because there are issues that require extra work during a redesign (data migration, backwards compatibility, fixing poor initial choices and dealing with the expectations of existing users). Outsourcing can help ensure that your first time is done right. Once you have a firm foundation, you can add on yourself. On the other hand, if you're uncertain about what shape the final product should take, it might make sense to do a quick initial design yourself and follow it with a redesign once customer feedback (and revenue) starts flowing. Just expect some costs to be associated with this process.

Always remember, the more clearly the project is defined, the less cost and effort it takes to spot and fix problems. A mistake that costs $1 to fix in a site’s planning stages might cost $5 while in production, or $25 once the site is launched. The place to start is a good request for proposals (RFP) that specifies what you want at the end of the process.

From the beginning, HTML has always been perceived as a very simple "language" to learn.  With only a few simple tags, you could mark up a document and put it online.  HTML was very forgiving, flexible and intuitive.

However, this same simplicity was HTML's biggest weakness. You could easily make a headline, add an image, make a list, or create a form. However, you had no control over how that content would look once a visitor to your site called it up. Tables would resize themselves willy-nilly depending on the browser being used, and fonts and colors were difficult to standardize and even harder to go back later and change.

In order to assert some control over how a page would look for all visitors, there either needed to be a complete overhaul of HTML or an alternative, parallel system of style control (control over the display of a document, as opposed to the internal structure of a document).  Guiding this system was a strong concern that the user be able to display Web pages on a wide variety of devices – readers for the blind, handheld devices, TVs, printouts, and more. 

History

Cascading Style Sheets was one of several solutions, and they have been around for a long time in Web years. In 1996, CSS 1.0 became a full recommendation of the World Wide Web Consortium (W3). [http://www.w3.org/Style/LieBos2e/history/]  But agreement on, and adoption of, CSS in browser software has been a slow and complicated process.

Cascading Style Sheets — even the name sounds a little intimidating, like perhaps you're falling down a steep slope.  But the name is just an accurate description of what CSS is — "sheets" (pages or chunks) of code that describe the style of a document in such a way that multiple commands "cascade" — in other words, they're applied in a certain order that ensures that both the user and the page designer get as close to the same effect as they possibly can.

Basic Overview

Many tutorials start with an overview of the language, but the best way to appreciate CSS is to see how it works. With CSS, you can take a very simple HTML document and make it appear in exactly the way you'd like.  First, let's start with a basic HTML document:

<html>
<head><title>CSS Demonstration</title></head>
<body>
<h1>How to Carve a Turkey</h1>
<p class="byline">By Travis Smith</p>
<p>If you're going to carve a turkey, there are several things you must have.</p>
<ol><li> a cooked turkey</li>
    <li> a sharp knife</li>
    <li> a clean cutting board</li>
    <li> a large fork</li>
</ol>
<p>Questions? Visit our <a href="comment_form.html">comment form</a>.
</body>
</html>

You can click here to view it.

When you view this document now, you can see it is styled with the font size and type you have chosen for viewing with your browser.

Using CSS, you can quickly establish uniformity over the document's look.  Let's quickly improve the document by creating a second file, a CSS file, and putting these lines in it:

body {
   font-family: verdana,arial,sans-serif;
   font-size: 14px;
   line-spacing: 2em;
}

h1 {
   font-size: 300%;
   color: #6666FF;
   font-weight: normal;
   text-align: center;
}

ol {
   text-indent: 2em;
   list-style-type: upper-roman;
}

.byline {
   font-style: italics;
   font-variant: small-caps;
}

(Don't worry, we'll explain all this code as we go through this section. For now, just bear with us.)

Now, we add one more line to the HTML file that tells it to use the styles from the CSS document.  That line goes in the HEAD of your HTML document, and it looks like this:

<link rel="stylesheet" href="sheet1.css">

Now, click here to see the results. With the exact same HTML (except for the addition of the link to the style sheet, of course), the page is now styled with CSS and a significant transformation has occurred.  Let's go through that CSS step-by-step and see what happened.

Our beginning CSS file has four rules in it. Each rule describes what to do about a particular part of an HTML document. The first rule contains instructions about the BODY element.  It says, for anything within the BODY tag (in other words, for everything displayed on the Web page) use the "Verdana" font, at 14 pixel size.  Space the lines out double ("2em" means space the lines twice the height of a regular line of text).

The second rule describes how to display any H1 (the largest sized headline) element.

By default, a browser will display H1 elements at about double regular size, but we're overriding that and telling the browser to use a size that's 300% of the standard size. (Standard size is, according to the first rule, 14px.) We also change the color of all H1 elements to blue.  [Learn more about HTML colors here.] Usually, H1 also makes text bold, but we explicitly make it normal and also set the text to be centered within the body of the document.

The third rule takes OL, the tag for an ordered list, and indents it using Roman letters instead of the usual 1,2,3,4.

The fourth rule is a little more specific.  Instead of changing an existing tag, we're creating a rule for a "class" of elements by putting a period (".") in front of the rule.

In our HTML, you can see that one paragraph ("P") is described as 'class="byline".'  You can apply any class name to any element and then refer to elements of that class using CSS.  For example, you could say <li class="byline"> to specify the "class" of an element in a list or <h3 class="byline"> to specify the class style in a middle-sized headline.

By defining a class style, you can easily and logically structure your documents and apply formatting exactly to the parts of the document that need them. In this case, we've made the byline appear as small capital letters, displayed in italics.

Now it's true that we could have gotten most of these effects using straight HTML. But imagine that your site has hundreds or thousands of articles. Let's say you decide you'd rather not have the bylines in italics. Instead of having to change all those files one by one, you can change the display of your bylines just by changing the CSS file and you won’t need to touch the HTML code at all.

CSS Structure in Detail

That's the power of CSS. Now, let's take a closer look at the parts of a CSS file. We've already said that a CSS file is a collection of rules. Each rule defines how to display some portion of an HTML document. Here's a pretty basic rule:

H1 { font-size: 300%; color: #6666FF; }

A rule consists of a selector (the part outside the curly braces that says what parts of a document will be affected) and a declaration block (which is the part inside the braces that describes what to do with the thing that's selected).

A declaration block should contain at least one declaration, which is a property (like font-size) and a value (like 300%) followed by a semicolon.  For the most part, spaces don't matter in CSS. So, for example, the H1 rule above, and the one below are the same:

H1   {
       font-size:  300%;
       color:       #6666FF;
}

If you have a mistake in any part of a declaration, the entire declaration is bad and that might spill over and affect other declarations or even rules. Here are some WRONG examples:

H1   {
       font-size  =  300%;
       color:       #6666FF;
 }

In this example, the use of "=" instead of ":" after "font-size" means that not only does the "font-size" declaration not work, but the "color" property gets attached to the "font-size" property like one run-on word, so it's broken, too.

P { text-align: right ;
H1   {
     color:       #6666FF;
}

In this case, the missing right brace before H1 means that the whole H1 rule is going to fail – the P rule (for paragraph) doesn't end until there is a right curly brace ("}") inserted after H1.  This might be really frustrating to track down because the H1 won't work while the P seems to be displaying just fine.

Selectors

We've discussed two kinds of selectors: element selectors (like P and H1) and class selectors (that start with a ".").

Elements are easiest to remember as existing HTML tags.  So you can redefine the behavior of, say, the <B> tag and make it also be red, or underlined -- though this might end up causing come confusion for people who don't know about the special CSS rules on your site.

Class selectors are added to HTML by way of the "class" attribute. So above, we had a tag that looked like this: <p class="byline"> and in the CSS document, we defined the byline class with a rule that started like this: .class {

There are a few more, and they can interact in really useful ways.

There are ID selectors

#nav {
   text-align: right;
   width: 150px
}

The difference between class and ID, other than the obvious "#" vs. "." is that an HTML page should only have one of each ID, while it can have many of each class.  So if you had a class that was "subhead," you could use it several times, but if you had an ID called "footer," you should really only use it once, like so:

<p id="footer">Copyright 2005</p>

Remember also that the name of the class or the ID in the HTML does NOT include the "#" – that's only used in the CSS to define the rule.

You can combine selectors easily for powerful results.  You could have a rule that made links in the navigation a different color than links in the document overall, like this:

A        { color: #45FF45 }

.nav A { color: #6666FF }

In a nutshell, this says that A elements (that is to say, links) are generally green, but if they're within a class that's called nav, they should be blue.

You can also do this with elements:

LI B { font-size: 16px;}

This says that any bold tag used within an LI tag (which creates an element in a list) will cause that text to become 16 pixels large.

Yet More Selectors

Finally, there's a whole set of selectors called pseudo selectors. A pseudo selector is a selector that matches a part of an HTML document based on something that's not explicit in the HTML.  The most obvious of these are the :link, :visited, :hover selectors:

A:link { color: green }

A:visited { color: black }

A:hover { color: blue }

Obviously, you don't specify in the HTML whether a link has been visited or not – that's something that the browser determines.  Ditto for hover – you don't know when or if your users are going to put their cursor over a link.  So a pseudo selector describes a style for a part of the document that may or may not exist. In this case, you're saying that general links are green, visited links should be black, and a link should turn blue when you hover over it.

You can use :hover with any element or property:

A:hover { color:red; text-style: italics }

This will make any link element turn to red italics when you put your cursor over it.  Click here for an example.

There are many other pseudo selectors, and with them you can create drop caps, indent first lines, select and format only certain tags, and more.  Using all these types of selectors, alone and in combinations, you can exert some truly remarkable control over the display of a basic HTML document.  If you want to learn more, check out the resources listed below.

Grouping

One of the things that makes CSS a little more confusing than HTML is that, in the interest of making it efficient to write and download, you can group selections to define them all at once.  So, for example, you can do this:

OL, UL, P, FORM, TABLE {
   margin-top: 8px;
   margin-bottom: 8px;
   margin-left: 8px;
   margin-right: 8px;
}

This sets an eight-pixel margin on all sides of those five elements (ordered list, unordered list, paragraph, form and table) no matter where they appear in the document. For even more efficiency, you can write this:

OL, UL, P, FORM, TABLE {
   margin: 8px 8px 8px 8px;
}

or even this:

OL, UL, P, FORM, TABLE {
   margin: 8px;
}

Each of these will apply an eight-pixel margin to all sides of each of the selected elements.

Cascading

You knew there had to be a reason it was called "cascading," right?  Well, let's look at the previous rule:

OL, UL, P, FORM, TABLE {
   margin: 8px;
}

Click here to see this rule in action on the sample document.

(sheet2.css)

Now, to see the cascading effect, let's add one more rule to the bottom of the CSS document:

P { margin-left 30px; }

You'll see that the later P rule overrides the higher P rule.  There are many, many ways that one rule can override another.  Here are a few:

• Later declarations in a rule override earlier ones.
• Later rules override earlier ones.
• If you have multiple style sheets linked from an HTML document, the last one takes precedent.
• If you put style rules directly into your HTML document, that takes precedence over rules from a linked sheet.
• "Class" rules override "tag" rules – so, for example,  ".byline" would be more authoritative than a simple "P" rule, regardless of where the rule is defined.

With all these (and several other) comparisons determining which rules take precedent, you can see why CSS can turn into a complicated mess.  On the other hand, a logical set of CSS rules can actually help keep your site HTML organized.  So it makes a lot of sense to learn CSS.

Dreamweaver

The current version of Dreamweaver, Version 8, has excellent CSS handling. Some of its CSS features:

• It helps you determine which style rules apply to any particular part of your HTML page.
• It keeps all the various possible properties at your fingertips so you don't have to guess or have them memorized.
• It can easily swap between different CSS documents and let you see the changes on screen immediately.

If you're trying to modify CSS, especially complex CSS, Dreamweaver can be well worth the cost.

The Dark Side of CSS

CSS sounds like the answer to all your HTML problems, doesn't it?  You simply make a basic HTML page, then use CSS to lay it out exactly as you envision it.  Alas, this is far from the truth.

The problem is that Internet Explorer, Netscape and Safari all have different, sometimes conflicting interpretations of the CSS standard. CSS is currently at version 2.1, and there's a version 3.0 proposed, but even now, not all browsers correctly implement all of CSS 2.0.  As you start to use CSS, it becomes absolutely critical that you test in every major browser that visitors to your site may use.

Using CSS, you'll definitely find that things that look OK on one screen look too small, too wide, too dark or the wrong font on another browser.  You'll then discover that either you've made a mistake in your CSS, or that you need to go looking through one of the many CSS resources.

Resources

CSS spec at the World Wide Web Consortium (W3)

Start with the W3's guide to CSS.  The information here is straightforward, clear and a good base for beginners – rare for a technical site.

http://www.w3.org/Style/CSS/

CSS Zen Garden

If you look at the source code of this site's home page, you'll find very plain, straightforward HTML.  By clicking the links on the side of the page, though, you can completely transform the look and feel simply by switching the CSS.  It's an instructive – and inspirational – example of CSS in use.

http://www.csszengarden.com/

Position Is Everything

This site has a big catalog of the bugs in CSS that you may have stumbled across and the ways to work around them.  The thing about CSS bugs is that there's almost always a way to defeat them. Other people have spent hours or days figuring out how to make a page like yours work in every browser, and the secrets are often listed at this site.

http://www.positioniseverything.net/

Eric Meyer CSS

No description of CSS would be complete without a mention of Eric Meyer. He's written several excellent books on CSS – one's an authoritative reference; others are how-to books that outline specific techniques for getting the most out of CSS.

http://www.meyerweb.com/eric/css/

We’ve already pointed out some quick hardware and software backup options, but unless you actually do your backups, they won’t do you much good.

Once you set up your backup hardware or software, we recommend that you follow these rules to be sure you won’t lose any important files:

• Back up everything you need. Types of files that are commonly backed up include documents and templates, e-mail, databases, calendars, configuration files (like your FTP settings in Dreamweaver), Internet favorites and bookmarks. Back up all key files from images to databases. If you develop Web site pages offline and hold them for publication, consider setting up a way to backup your local files as well as those on the server.
• Assign one of your workers the responsibility of backing up your data on a regular schedule, daily or weekly. Don't let backing up get postponed or written off as something that can be done tomorrow. Backing up is only effective if it is done regularly; the best way to ensure that happens is to establish a backup schedule. Many backup software packages can be scheduled to run on off hours — after the work day ends or early in the morning before it begins — so that backing up won't interfere with your production schedule.
• If you make backups that are stored on tapes, DVDs or other removable media, consider making multiple copies and keeping them in several locations — not just in your office. That will ensure that you have your files if your office is caught in a fire, flood or hurricane.
• Test your backups. It won’t help to back up regularly only to discover you can't actually access the files you are protecting. On a periodic basis, open your backups and make sure you can retrieve all your files.
• Run backups before making major software and system changes. For example, if your Web host plans to upgrade the operating system of your Web server, back up your files prior to the upgrade. Do the same if changes are being made to hardware – for instance, when disks are upgraded or RAM is added.

Web sites can be backed up locally; that entails keeping a copy of your Web site on your desktop computer. This isn't a bad solution for sites built with standard HTML files, but for sites that use content management software and databases, look into the backup options offered by your Web hosting company.

If your site adds new content on a daily basis, look for a Web host that can provide daily backups, preferably tape backups that are stored in a different location than the Web server.

Finally, consider setting up and using a couple of backup methods. For example, you might do daily backups to an external hard drive that sits beside your desktop machine. On a weekly basis, you could also burn tape or DVD backups that you take home and store.

Remember, applications generally don't need to be backed up since they can be reinstalled. Do, however, keep and back up records of serial numbers for those applications as well as installation disks. If you have installed software by downloading it from another Web site instead of from a CD, be sure to also back up the installation files.

• A device capable of recoding audio. Your options include:
• A computer. Laptops are useful to take on location, but desktop machines can also be used if you are recording something, such as an interview, that can be done in a home or office. If you are using a computer, remember to make sure you have enough hard drive space to hold the audio files. A minute of CD quality audio, for example, can use 10MB of disk space. Audacity is a free audio editing program available for both Macintosh and PC you can use to record directly onto your computer.
• A digital audio recorder. There is many viable portable digital audio recorders and most are relatively inexpensive. Olympus makes reliable, entry-level models. But the best audio recorder for the money as of this writing is probably the Zoom H2. The Edirol R-09 is another favorite of multimedia journalists, but is a bit more expensive.
• An MP3 player. You can buy a microphone accessory for your iPod or other MP3 player and record directly into MP3 format, making the transition from recording to the Web incredibly fast. Be aware that recording isn't the purpose these units were designed for, so you may have some problems getting set up and getting high-quality audio out of them.
• Headphones. Audio is no good if you can't listen to it. Include headphones in your audio kit so that you can check the sound quality during recording and listen to it afterward.
• A microphone or several microphones. There are many kinds of microphones; your recording situation will influence the one you choose:
• Lavalier or lapel microphones are useful for recording a single person giving a lecture or for an interview.
• A handheld microphone can be handed around if you must record multiple speakers.
• A boom microphone can be suspended over or directed toward the subject(s) and might be ideal for recording a concert, performance, or press conference.
• A unidirectional microphone can be pointed toward the subject and will help exclude other room noise when you must record in a noisy environment.
• Wireless microphones are useful for recording in environments where your subject(s) must move around.
• Tapes, CDs, memory cards, or whatever recording media you are using.

Optional equipment that can improve the quality of your video or extend your ability to record is:

• Mixing board. Mixing boards allow you to plug in several microphones at once and control the volume for each microphone separately. When you have separate microphones for several speakers, a mixing board is essential and generally results in better quality audio.
• Cables. You'll have to connect all your gear together – don't skimp on these connecting cables! Audio quality is affected by every piece of your equipment, so good quality cables are important. The staff in your local RadioShack or electronics store may not know every audio recorder, but they are generally very knowledgeable about which cables work best.
• Power cords and extra batteries.

If you plan to take your audio recording kit on the road, look for small, portable components and be sure to arrange to transport all of it easily.

For many reporters, speed is an issue. If you need to get your audio live as quickly as possible, look for an audio recording device that creates digital files that can be quickly transferred to your computer for editing.

Many good electronics stores carry microphones, headphones and mixing boards, as well as recording devices. Spend some time in the store trying out and testing the options before you buy.

You should do your own research to find the right equipment for your needs, but below are some additional recommendations to get you started:

Microphones are available in all shapes, sizes and prices. Audio-Technica, Sennheiser, Shure and Sony are all good manufacturers to research.

A good source of information – both for research and purchasing purposes – is B&H Photo Video. Its Web site lets you quickly find and compare products and offers good prices as well.

Who Works on Databases?

There are several people involved in getting a database-powered site up and running, especially if you are having one custom-developed for your site. They include a:

• Database architect. This person looks at the type of data you're collecting and how you expect it will be used and recommends a structure of relationships and fields that meets the needs of your site. If you just want to set up a simple blog, you don’t need a complex database with dozens of tables. On the other hand, if you’re running a news content management system, a database built with only a few simple tables may bog you down. The proper database [schema] can make or break a project, so don’t skip or scrimp on this step.
• Database programmer / analyst. This person usually works closely with, or is also, a Web programmer. Sometimes it makes sense to let database software sort, manipulate or cache your data. Other times, your site will run more efficiently if the Web page reformats the data for display. A database programmer is an expert at making these distinctions and ensuring that the database is communicating data additions and requests properly.
• Database administrator (DBA). This person makes sure that your database is handling its user load well and is receiving regular backups. The administrator is likely to tell you that everything the programmer wants to do will bog down the database, regardless of how necessary the function is. The programmer, on the other hand, will likely add more and fancier functions and tell you that you can add more servers to handle the load.

How much do these people make? Salary.com reports (https://secure.salary.com/jobvaluationreport/docs/jobvaluationreport/jobsellhtmls/Database-Administrator-salary-job-description.html) that an average DBA makes a little over $80,000 a year, though many can be hired by the hour, week or month. Architects and programmers make a little less if they're just starting out and can charge a lot more as their experience grows.

Open Source Options

If your site runs on open-source software, it's likely to have one of two database applications available: MySQL or PostgreSQL.

MySQL (http://www.mysql.com/) is the most popular open-source database application, and most open-source Web services, such as forums or blog software, work with it. MySQL powers many large sites but has limited ability to coordinate multiple database edits at the same time.

For a site that has a large, active community of contributors, MySQL might end up running into scaling problems. MySQL supporters will, of course, refute this, and new features are added all the time, so keep an open mind.

PostgreSQL (http://www.postgresql.org/) is also often mentioned as a free database server option with stronger protections and tools for working on chunks of the database at one time. PostgreSQL also offers a less restrictive license for those who want to bundle a database application with software that they built.

Here's an article (http://www.devx.com/dbzone/Article/20743/1954?pf=true) that compares the two and a webpage (http://dev.mysql.com/doc/refman/4.1/en/index.html) where you can find an older version of MySQL's own manual, which should give you some historical idea of the differences in the two servers.

Windows Databases

If you are using Microsoft Windows, there's Microsoft Access (http://office.microsoft.com/en-us/FX010857911033.aspx), part of the professional version of Microsoft Office. This can be a database container only – a file sitting on your Web server storing the data. Many Web hosts that run Microsoft’s .Net (http://www.microsoft.com/net/) software, which uses pages that end in “.asp”, will be familiar with hosting Access databases. Because all the data is in a single file, it's also easy to move or backup (or to corrupt – but that's another story). You don't technically need to have Access software to use an Access file as your site's database. You just need someone with the software to create the file for you initially, and then the Windows software on your Web server can handle the communications between the Web site and the underlying database.

Microsoft Access can also be a powerful way to edit directly the information stored in your site’s databases. To get to that data, Access requires you to describe all the information you want to edit or change in a file called a “form.” But once you’ve done that, Access offers the same useful features as Microsoft Word, including checking, cutting and pasting.

On the downside, Access only runs on Windows computers. And if you switch computers and want to edit your database with Access, you’ll have to set up that custom “form” all over again. In contrast, if you build HTML-based forms that run in a Web browser and add, edit or display information from your database, you can manage your database from anywhere, on any computer with a Web connection.

The next step up on the Windows side is Microsoft SQL Server (http://www.microsoft.com/sql/default.mspx), a database server that can handle a significant load and offers some snazzy development tools — but the cost starts at around $5,000.

Macintosh Databases

On Macintosh computers, you can run MySQL or PostgreSQL. Programmer Mark Liyanage offers easy-to-install versions for Mac OS X on his Web site (http://www.entropy.ch/software/macosx/). But if you want a beginner-friendly graphical interface to create and edit databases, the latest version of FileMaker (http://www.filemaker.com/) is fully relational and can handle significant loads. FileMaker has not been commonly used to create or serve Web site databases, but it's worth a look now, especially if you're a Mac-only operation.

Once you start looking at more powerful solutions, you'll want to bring in some professional assistance.

Let me Google that for you: Like most anything you want to do on the Internet, you can find out how to do something you’ve never done before simply by searching for it.
For example, if you enter “start a blog” into Google one of the first links that appears is http://www.wikihow.com/Start-a-Blog. This is an intuitive step-by-step description of how start a blog that you can follow to create your own blog.

Quick plan: Before you create your blog, take some time to think about what you will blog about. This
will help you as you set up the software and will guide your early activity with the blog. But realize that you can always change course.

Here are three questions to answer in forming a quick plan for your blog:

1. What will you name your blog (1-3 words)?
2. What is a good short description or catchphrase for your blog?
3. What will you write about in the blog? What is your blog’s mission
(2-3 sentences)?

Publish the answers to these questions on your new blog so readers will know immediately what you are all about. It’s frustrating to stumble upon a new blog and not be able to quickly figure out its raison d’etre.

Choose a blog system

While there are many capable blog platforms – many of which are free – Blogger or Wordpress are two of the leading platforms and there is a good chance you will be able to use this experience in the future.

Creating a blog at Blogger.com or Wordpress.com is quick and painless and both sites have demos and video tutorials to help you get started. It’s also free.

Hosted solution: If you are an advanced computer user, consider paying the small monthly fee for a hosted Wordpress blog. This offers several advantages, including the ability to choose from a larger number of themes and edit the CSS on your theme, as well as install dozens of plug-ins (which are similar to the gadgets in Blogger). It also allows you to have a personalized domain name without “wordpress” in it (eg. “mycoolblog.com”). For more information on hosting your own Wordpress blog go here. The hosting plans on this page allow “one-click” installation of Wordpress and cost less than $10 a month.

Once you know what you’ll name your blog and where you’ll be doing your blogging, you’re ready to get started. Both Blogger.com and Wordpress.com will help you create a new blog in a matter of seconds,
not minutes.

Name: The name you choose for your blog will display at the top of the page and also in the URL. For example, a blog called “My Cool Blog” would have a URL of
http://mycoolblog.blogspot.com on Blogger or http://mycoolblog.wordpress.com on Wordpress.

Theme: You can choose how your blog looks by picking from several different themes for your blog. Wordpress offers more themes for a basic blog than Blogger. But Blogger offers basic users more flexibility to customize the design of their blog pages without knowing any code. You select fonts and colors just like you would in a word processing program.

In both programs you can use basic CSS to customize the look and feel. But don’t let that scare you away. In fact, it’s a great environment to get your hands dirty with some beginning CSS.

In Blogger (above), select the “Layout” tab from the top of the admin screen after you have logged in. From there, you can modify the following sections (links appear at the top of the page under the “Layout” label).

• Page Elements: Simply click “Edit” next to any of the sections on the page you wish to modify. Upload your own header image and add a short description in the “header” field.
• Fonts and Colors: Simple color and font selection.
• Edit HTML: This is false advertising; it’s a really “Edit CSS” since the code you will access from this link is mostly the CSS stylesheet.
• Pick New Template: Choose from several stock templates and change your blog’s look and feel with two clicks.

In Wordpress (above), select “Appearance” from the left navigation menu of the Dashboard after you have logged in. From there, you can select a new theme for your blog with two clicks. Or modify the following sections (links appear at the top of the page next to the “OPTIONS:” label).

• Widgets: Quickly add some extra functionality to your blog, like a search box and a calendar that shows your recent blog posts.
• Extras: Not much to see here; move along.
• Custom Image Header: Upload your own header image.
• Edit CSS: You can experiment with CSS styles but you can’t save the changes and make them public on your blog unless you upgrade to the Wordpress Custom CSS Editor (about $15 a year). Or you can host your own Wordpress blog and have complete access to the stylesheets.

Extras, gadgets and widgets: It’s easy to add some very cool features to your blog using Blogger or Wordpress. Everything from a display of recent comments to a list of blogs you follow, are available one click away.

In Blogger (above), these features are called Gadgets and you add them from the Layout page. Click on the “Edit” link next to Gadgets and select from the dozens of available. Click the “+” sign next to the Gadget you wish to add and follow the ensuing steps to configure the Gadget for your blog.

On a basic Wordpress blog (above), these features are called Widgets and can be accessed from the “Widgets” link under the Appearance header in the left navigation menu. Find a Widget and click “Add” then click “Edit” to configure the Widget. It can be a little more confusing to set up the Widgets in Wordpress. For example, when using certain Widgets (like Links or Categories) you can only configure them by accessing them from separate links in the left navigation menu. So if you add a Widget but can’t figure out how to customize it, scan the links in the left navigation menu for a matching item and use it to build out the Widget the way you want it.

Buy a customized design

If you are hoping to copy what many start-up publishers are doing today by launching a hosted Wordpress blog system as your entire Web site, but don’t have HTML and CSS skills, you should consider hiring a freelance Wordpress theme developer. There are many talented individuals who can take a Wordpress theme and customize it to look just how you want. Place an ad on Craigslist or post a job on eLance.com to find help.

While there aren’t any hard-and-fast rules about how many images to use in a slideshow – it all depends on the subject and the quality of the images – a good rule of thumb is to create a slideshow if you have 6-10 quality images. Of course, many news sites create slideshows with dozens of photographs in each one, so this rule of thumb gets broken a lot.

It’s important to think about any slideshow as another version of the story you are tying to tell. Order the images so they it is logical, yet compelling. Your best image should lead the series, even if it doesn’t come first chronologically. It is considered the opening of the story and can be followed by the rest of the images in order that build the story from a beginning to an end.

This same thinking applies to a photo gallery, which is generally considered to mean a group of thumbnail images. A slideshow, on the other hand, refers to a series of images presented with continuity, usually in a Flash-based player like a movie.

Most blog software platforms make it easy to add a photo gallery. To create a slideshow, especially one with audio, additional software is needed. Photoshop Elements offers easy slideshow creation through its Bridge platform. But if you want to add audio to your story, Soundslides is the tool of choice for most multimedia journalists.

Of course, to create a compelling slideshow you need to begin planning it before you get to the publishing step. In order to present the most effective package, you will need to have been thinking about it while capturing the images. A good rule to follow is to take wide (far away) and medium shots, plus lots of tight shots (close-ups).

It’s critical to have all the shots you need when building a slideshow. Whether created with just photos or photos and audio, it should have all the elements of a good story:

• An attention-grabbing opening


• A logical progression the builds to a climax


• A walk-off or finish that provides a sense of summary

Once you have determined which photos accomplish this for a particular story, create a new folder on your computer and move the edited photos you have chosen to it.

Building a Photo Gallery in Photoshop Elements

To build a photo gallery in Photoshop Elements, simply select Create Web Photo Gallery  under the File menu and follow the instructions to determine which photos to use and how they should be displayed.

1. Under Source Images select Folder and then browse to the folder on your computer that contains the photos. Then select Destination and determine where the finished product should be created. It’s a good idea to create a new folder as your destination since Photoshop will create seven different files when it builds your gallery.

2. Use the Options pulldown menu to modify the following settings:

• General: Decide between “.htm” and “.html” extsension for the final product.


• Banner: Fill in the desired title, credit and date information.


• Large images: Determine how big you want to display the images, the quality and the title.


• Thumbnails: Determine how big you want to display the thumbnail images.


• Custom Colors: Modify the colors for the background, banner, text and links.


• Security: Enter copyright information to protect your work or use this area to enter full credits for the slideshow.

3.  Click OK. Admire your work.

Building an Audio Slideshow in Soundslides

When you want to add an audio to your photographs (see Chapter 7 to learn how to gather and edit audio), using Soundslides is the way to go. The basic version costs less than $50 and the Plus version is less than $100, so it’s not free, but it’s worth it if you plan to create slideshows with audio.

Without knowing any computer programming or Flash programming, you can create a Flash-based movie of pictures and sound by uploading a folder of photos and an audio file in just a few minutes.

The user interface is ridiculously simple – just how it should be. The first screen asks whether you want to start a new project or work on an existing (or “old”) project.

The next screen has only two buttons: click JPG to browse and select the folder of images you will use, then click SND to browse and select the audio file you will use. You can also determine the output size, but the program allows you to do that later.

To build a slideshow, rearrange the thumbnail photos to the desired order by clicking and dragging. Then drag the bars that separate the thumbnails in the project bar below to line up the image transitions with the audio file, so the timing of the audio matches the visual from the images.

Once you timings are set, you can use the tabs along the top of the screen to add captions, modify the look and add headlines. Once you’re finished, click EXPORT and moments later you’ll have a folder called “publish_to_web” that is ready for the Web. Upload it to your Web server and link to the “index.html” file.

Let's make sure we're working from the same set of terms.

Data. A set of symbols. It can be characters that make up an e-mail, bits that make up a photo or a fax, numbers in a spreadsheet or a database. Everything stored on your hard drive is data. An example of data: 6044085722

Information. Data that has been assigned meaning. In daily life, you're probably used to dealing with massive amounts of information ‑ that is, data that has been manipulated and sorted to become something meaningful, like the To, From and Subject of an e-mail or columns in a spreadsheet. An example of information: Phone: 604-408-5722

Knowledge. For information to be truly useful, it has to be displayed properly. Consider the difference between these two displays of data:

W.P.: 604/408/5722

Work ph.: (604) 408-5722

Both are information, but one can be more generally understood with less effort than the other. When information is arranged and organized well, it can become knowledge – patterns can be detected, meaning can be extracted and additional inferences can be drawn.

As a niche publisher, you have a special opportunity to gather and share data that might not regularly be available to your audience. Data in its raw form can be useful to a small subset of your readers. But if you take that data and put it into a meaningful form, such as a chart, a graph or a timeline, your audience can more easily absorb, remember and draw useful inferences from what was once just raw data.

So, with the idea of starting with data and ending up sharing knowledge with your audience, let's talk about some common ways to display data.

Charts and Graphs

When people think about visualizing data, a chart pops to mind, something like this:

(We're using the example chart from http://www.learner.org/exhibits/dailymath/getpicture.html )

A chart like this can be done quite easily on the Web. In fact, there's a handy set of HTML tags that help create tables – the TABLE, TH, TR and TD tags. (See the HTML section)

Charts are most useful when you have information that people will want to be able to reference exactly. With a chart, they might be able to cut actual numerical information from one document and paste it directly into another.

There is, however, the old expression that a picture is worth a thousand words. In many cases, a graphical presentation of data helps bring out differences and relations that are not clearly visible from the numbers themselves.

Taking the chart above, we'll make it into a pictorial form to promote better understanding. Probably the easiest way to do this is with Microsoft Excel. If you don't have Excel, you can use the open-source “OpenOffice” or another spreadsheet tool; the steps will be similar though the commands will not be exactly the same.

1) Launch Excel, and make sure you're looking at a new blank document.

2) Type in the data from the chart above. You should have the column headers across the top, and the row headers down the side. If your numbers or words are too wide for the columns, you can click and drag the dividers between the cell headers to make the columns the size you need. If you'd like to skip the data entry, you can click here to download a pre-filled Excel spreadsheet.

3) Select the data you want to make into a graph. In this case, leave out the main chart label and just select the columns and rows from A2 to F6.

4) Go to Insert -> Chart Wizard. A dialog window will appear to help guide you through the many chart choices.

5) Choose the type of chart. For this data set, 3-D columns are probably the best choice. Once selected, click Next.

6) For this chart, make sure the Data range is set to " =Sheet1!$A$3:$F$4” (“Sheet1” is the name of your worksheet. “$A$3” is the starting cell, “$F$4” is the ending cell, and the data selected is everything between those two cells.) Excel might automatically have selected $A$2 instead of $A$3 – this causes an extra row of data to appear on the chart. But if you followed the example, that top row is really not data but rather a row of headers. You want those headers to appear on the chart, so click "Series" at the top of the window, and in the Category (X) axis labels, enter " =Sheet1!$B$2:$F$2". Then click Next.

7) In this next section, you can make a number of choices about how the chart is going to be labeled – where the lines of the chart will appear and so on. The defaults are probably fine for now, except that it will look better if you click the "Legend" tab at the top and uncheck the "Show legend" box. When you've customized the chart to your liking, click Next.

8) Choose to place the chart in your current worksheet by clicking with the cursor and drawing a box. Make sure you're placing the chart as an object (the default choice). Click Finish.

9) Finally, you've produced a 3-D column chart. At this point, there are still many ways to modify the chart's colors, fonts, size, and more. You accomplish this by right-clicking (or on a Mac, control-clicking) on the chart. Most important, though, is the ability to right-click on the outer edge of the chart and choose "Save as Picture" from the menu that appears. You can save the chart in any standard Web format – PNG is a fine choice – and upload the chart as you would any other image file (INCLUDE LINK) on your Web site.

HTML Charts

For simple bar charts, you can use a different method of producing a graphical display of data that can be done directly with HTML – no Microsoft Excel needed. All you need are several very small GIF images in a solid color.

Let's say you wanted to display the results of a Web site poll as a graph. For the purpose of this example, we'll say the question is "How many days a week do you work?" and the answers and relative percents are as follows:

• Less than three: 25%
• Three: 15%
• Four: 20%
• Five: 30%
• More than five: 10%

It would be more effective if you could represent this in a visual format and would probably encourage better recall by your readers and perhaps even higher participation in the poll.

By using HTML to stretch the small GIF image into several differently proportioned rectangles, you can have a bar chart with minimal hassle.

First, calculate the length of each image proportionally. So, if 100% would be 600 pixels across, 25% of 600 pixels is 150 pixels for the first bar, 15% of 600 pixels is 90 for the second bar, and so on. With some basic HTML code like this, you'll end up with a clearly understood chart:

<IMG SRC="/images/zred.gif" height="11" width="150" alt=""> Less than three<br>
<IMG SRC="/images/zred.gif" height="11" width="90" alt=""> Three<br>
<IMG SRC="/images/zred.gif" height="11" width="120" alt=""> Four<br>
<IMG SRC="/images/zblack.gif" height="11" width="180" alt=""> Five<br>
<IMG SRC="/images/zred.gif" height="11" width="60" alt=""> More than Five<br>

The final result will appear like this

Less than three
Three
Four
Five
More than Five

Even a beginning programmer would be able to take the simple output of a set of votes, count them and apply those proportions to an image. By using different colors for the top result or for different polls, you can create dynamic, easy-to-update bar charts using only simple HTML.

Additional Charting Software

If basic Excel charts aren't enough, more advanced image creation and manipulation techniques are always an option. You may want to create images on the fly from a continuously updated set of data, like placing markers on a map or creating relational drawings showing connections between various people or agencies.

To do this, you would need to have software that runs on your server, written in Perl, PHP or ASP, that generates images as people request them. Two common image manipulation libraries are ImageMagick (http://www.imagemagick.org/) and GD Graphics Library (http://www.boutell.com/gd/). There are many different ways that these programming languages can generate images. Teaching one of these languages, especially the advanced techniques of image manipulation, is beyond the scope of this site. But a competent Web programmer would be able to come up with a tool that could generate many images in whatever size, shape or detail you want.

Calendars

One other common way to represent data is in a calendar format.

Many blogging and CMS tools will have built-in functions to display calendars and to provide archives that organize data by date. Web site users commonly will attempt to look up by date articles or other data they've previously found.

When creating a calendar, there are a few things to keep in mind.

First of all, make sure it's easily identifiable as a calendar by having it follow the conventions of your culture's calendars. For North American monthly calendars, that means it's organized horizontally, with weeks starting on a Sunday. If you can, make the whole box of a day clickable, not just the number – it's easier to click on the box. If you are putting text in the day boxes, try to keep the boxes equally proportioned, don't squish empty days down to nearly nothing.

Finally, it's often quite easy, and very considerate, to provide an alternate interface for calendar data, like a simple listing with day headings.

Advanced Data Visualization

There will be occasions when a particular project calls out for a significant effort to present data in a non-textual way.

Think, for example, of a story about a new museum that's opening or a concert hall. Allowing people to review the construction plans, and even manipulate and create alternative versions, is extremely useful in helping your readers comprehend something like this.

Or for events that unfold over a particular time frame, especially when there are very large numbers of people or actions and reactions, a timeline can be an excellent way to display information.

If you are interested in learning more about data visualization techniques, one of the most respected experts in this field is Edward Tufte, http://www.edwardtufte.com/tufte/.

1) Decide what you're trying to explain. In many ways, this is the hardest part. You need a clear idea of what you want your readers to be able to take away from the site after they've engaged with your creation.

2) Sketch out an interface. This can be something simple, drawn on graph paper. It can be a mockup in Photoshop. Or it can be a basic, black-on-white dynamic HTML page. Different Web editors might approach this in different ways, but the idea is to proceed with something tangible.

3) Gather your materials. This might be photos, audio clips, color choices.

4) Repeat steps 2 and 3 several more times, because they influence each other. As you find out you have a wealth of archive photos, your photo-handling interface might need to be expanded or redesigned.

5) Think about the flow – not only how you'd like people to click through the data you're assembling, but how you don't want them to click. Consider what they might, perversely, try to do – like zoom a map too far out or put all zeros in a budget simulator.

6) Decide on a programmer and a programming method. Make sure you're not going to exclude your target audience – things built in Java or that require the latest browser might not be as good as something built with Flash or with basic HTML forms.

7) Think about wider implications of your application. For example, decide if there are any privacy concerns. Think about how you're going to handle the possibility of additional traffic due to the application. Think about any long-term data storage or backup needs.

8) Keep on schedule. Have a launch date in mind and work back from that.

9) Think about how long the data feature will live. Make sure you have a plan for how you'll transition it to inactive status. These sorts of features can be great link attractors, and yet the purpose of the feature might have a natural sunset, for example if it is for a certain budget year, or a sporting event that will take place and then pass. Having a nice clear label that this is a discontinued data tool will let people continue to enjoy it without being confused or angry that some parts of it are no longer valid.

10) Finally, after a long stretch of development, test it. There is no chance to make a second impression, so it's often a good idea to let a select few come in early and try it out before you unveil it to your entire audience.

• SWiSHmax Help: There is a good manual and several excellent tutorials that come installed with your SWiSHmax program. You can access these from the Help menu.
• SWiSHzone support forums: Get help from others using SWiSHmax on the support forums. Before you post, you should search to see if your question has already been answered in the forums. There is also a list of other SWiSH community Web sites on this forums page.
• SWiSHzone online tutorials: Get help on everything from SWiSHscript to cartooning with these step-by-step instructions.

You can use a program like SWiSHmax to create attractive photo slide shows. Begin by preparing your images at the size you want them to be in the slide show using a graphics program. For this example, the images have been sized to a maximum of 400 pixels wide by 300 pixels high.

1. Start a new movie in SWiSHmax, then click the Movie tab in the Objects panel.
2. Set the movie width and height to the desired size. In this example, the size is set to 450 pixels wide by 350 pixels tall, 50 pixels larger than the images. Set the background color to be the desired color.
3. From the File menu, select Import. SWiSHmax displays the Open window. Navigate to the location of your images, and select them. You can select multiple images by clicking and dragging the file names, or by selecting an image and holding down the Control key on your keyboard while you select the others. Click the Open button.
4. SWiSHmax imports the images and places them on the stage. Notice that each image is also visible in the Outline panel and has its own layer in the Timeline panel.
5. While all the images are still selected (they will all be highlighted in gray in the Outline panel if they are all selected), click the Align tab in the Objects panel. From the Align Relative To pull-down menu, select Stage, and then click the Align Horizontal Center and Align Vertical Center buttons. The images are now centered on the stage both horizontally and vertically, regardless of their size. (If not all the images are selected, simply select the first image in the Outline panel, hold down Shift and select the last image. This selects all the images in between.)
   
6. Now you must set each image to be placed on the stage. In the Timeline panel, click Frame 1 of the first image layer. Click the Add Effect  button, and select Place.
7. Repeat this in Frame 20 of the second image layer, frame 40 of the third image layer, frame 60 of the fourth image layer, and so on, until each layer has a place frame  in it. Your Timeline will look like this:
   

   

8. Next you must set each image to fade out once it has been viewed. Click in Frame 10 of the first layer. Click the Add Effect  button, and select Fade > Fade Out. SWiSHmax places the Fade Out effect across the next 10 frames, ending the Fade Out just before the next image appears.
9. Repeat this step in Frame 30 of the second image layer, Frame 50 of the third image layer, and so on. Your Timeline will look like this:
   

   

10. Click the play button () in the icon menu across the top of the application to preview your animation.
11. Adjust the timing and placement of your place frames and fade outs to suit the images and pacing you want to achieve. In this example, the movie produces a slide show that changes to a new image every two seconds. This is the SWF created by this tutorial.

For long slide shows, you may want to consider creating a preloader. A preloader plays a short animation while loading the images in the background. Once everything is loaded, the slide shown begins. This prevents frustrating waits during the flow of your presentation. There is a sample preloader included with SWiSHmax that you can access by going to File > Samples > Beginner > Preloader.

It took months, sometimes years, for journalists to engage in the practice of blogging their news. It took some journalists even longer to come around to the concept of publishing partial versions of their news stories online, then following them up with fuller versions.

If blogging started as an online journal, think of microblogging as an instant messaging journal. A microblogging service allows users to publish brief text messages, usually no more than 140 characters, with links to other Web sites, photos or videos. Messages can be submitted in a variety of ways, including text messaging, instant messaging, email, digital audio or the Web.

The messages can also be consumed in many ways, including on a mobile device, via email or by visiting a Web site such as Twitter.com. The services make it simple to subscribe to an individual and receive his or her updates however you want, or to secure your own messages and restrict access only to those individuals you want reading your updates.

The ease of publishing, combined with the ease of consuming, has contributed to micro-blogging’s rapid growth. Whereas blogging could intimidate a writer who didn’t feel like they consistently write anything of interest, anybody can contribute something with a 140-character limit. And, when you find someone worth reading, you can easily “follow” that person and automatically receive his or her updates on a Web site or on your mobile device.

Twitter is the most popular microblogging service. In fact, the platform is so popular that more people have probably heard of Twitter than the term “microblogging.” The company launched its service in July 2006 and, as of Feb. 2009, had raised $55 million in venture capital funding. With rapid growth and millions of users, investors are confident that Twitter can find a sustainable business model, but that is yet to be seen.

Another form of microblogging is using a feature in a social network like Facebook or LinkedIn to post “status updates.” Yet another service, FriendFeed, takes all of these updates for an individual and publishes them in one stream.

These features, like Twitter, invite users to post a quick update on what they might be doing, thinking or planning at any given point in time. The more updates that people post for one another, the more connected friends and colleagues become, 140 characters at a time.

In the end, a microblogging platform like Twitter is really a social network disguised as a short-message publishing platform.

There is power in finding new people to follow, thereby extending your network. There is social capital to be earned by actively participating in that network, where you give information and ask questions and expect your followers to do the same.

The great thing about microblogging, especially on Twitter, is how easy it is to get going. It take a few minutes to register for a new account, upload a profile picture and post your first Tweet.

Before you get “on” Twitter, though, you need a sense of what you’re going to do with it. Not everyone has the same goal, of course. And while you don’t have to rigidly stick to one approach with your microblogging, it’s helpful to know what you are hoping to accomplish as you get started.

• Are you a reporter hoping to build community with readers?


• Are you an editor aiming to build a network of readers around a specific topic?


• Are you a journalist hoping to network with other journalists?Are you an aspiring (insert dream job here) looking to build your personal brand?


• Identifying what you hope to accomplish with it will help determine your Twitter ID (or username). If you are a news site, the username should be consistent with the site’s brand. If you are hoping to build a personal brand, then use your full name. If you want to network with others around a shared interest, you can have a little fun with your Twitter ID (and your profile picture) but you should still add your real name to your profile.

Twitter basics

To participate in any community, first you need to know the language. Thankfully, there are only a handful of “insider” terms you need to know in order to be a functioning member of the Twitter community.

• DM: Direct Message


• @: Used to reply, it precedes a Twitter ID in a reply (eg. @johndoe)


• RT: Retweet, meaning copying someone else’s Tweet and posting it so your followers can see it, too.


• Tweet: As a verb it means sending a message on Twitter. As a noun, it means the message sent or received.


• Hashtag: A common label for any Tweet that should be tied together with others’ tweets, preceded by a # symbol. Especially effective for a news event or a conference (eg. #sxsw for the South By Southwest conference).


• “Tw” as a prefix for any other word: A practice on Twitter is to develop a new twist on old words. For example, “Tworld” means Twitter world, “Tweeples” are those who use Twitter, and a “Tweetup” is a meetup by people using Twitter.

There are four main things you can do on Twitter: post a message, read other people’s messages, read reply messages that other people direct to you and send/receive Direct Messages which are private. (We’ll cover searching on Twitter separately.) Here’s a look at each activity:

• Post: It’s easy, just don’t exceed the 140-character limit.


• Read: It’s easy, too, since the messages of the people you follow automatically display on your Twitter homepage (after you sign in).


• Replies: Reading reply messages is easy, too: just click “@Replies.” If you want to reply to someone simply add the “@” sign before their Twitter username (or click the arrow on the person’s tweet you wish to reply to).


• Direct messages: Sending a direct message is easy, too. Just click “Direct Messages” and select the person you wish to communicate with from the drop-down menu. That person will receive an email notification regarding their direct message (or “DM”) and the message is not public.

Build your Twitter network

When you start on Twitter, you don’t have a network or a community. But you can build one rather quickly with a little time and effort.

The first step is to find people to follow. Go to search.twitter.com and search for terms you are interested in, like “journalism” or “newspapers” or “iphone.” Once you find a tweet that looks interesting, click on the person’s profile who posted it. Then click on “following” to see who that person is following and when you find someone whose interests seems aligned with yours, and whose posts are somewhat interesting, click “Follow” on their profile.

Now that person’s tweets will appear on your Twitter homepage. When someone retweets (with an RT) another post, follow it and you’ll probably find someone else new to follow. Following just a few new people every day will quickly grow the depth and breadth of tweets flowing into your homepage.

This also helps in the next step, which is to get people to follow you. Each time you click the “Follow” button on someone’s profile, that person receives an email notification about your decision to follow their tweets. Most people then click the link to your profile and if your tweets seem interesting enough, they will click the “Follow” button on your profile.

A "Terms of Use" statement is a must for a Web site, especially one that offers resources or solicits input and interaction from users.  These statements clearly set out how resources may be used and what your site will not allow in terms of unlawful or libelous postings, obscene material, or child pornography.

Data Collection and Web Site Privacy Practices

It is important to tell visitors to your site what type of information you collect about them and what you intend to do with the information. Usually, it's best to assure your visitors that their information will not be sold or given to other parties.

While not strictly a legal issue, such disclosures give participants a sense of what is going to be done with their personal information, which helps inspire trust in the publication. Also, by disclosing this information up front, as long as you follow your own policies, it can't later be claimed that you acted without the user's permission.

Some sites require visitors to register if they want to access content and post comments or queries. The registration process can generate some useful demographic data, particularly for marketing purposes, but you need to be aware that some visitors will resent taking the time to register and be suspicious of how their information will be used. Furthermore, given the widespread threat of Web site data-hacking, you need to take reasonable safeguards to assure site security.

If you intend to collect private personal information that will be shared with a financial institution, such as accepting credit cards for advertising buys, conference registrations, product sales, or charitable donations, you need to comply with the Gramm-Leach-Bliley privacy law. The Act imposes explicit rules  such as handling of privacy notices, opt-out rights and how private information can be resold, among other rules.  You can read more about the Gramm-Leach-Bliley Act.

Sometimes, users post information that is ordinarily private like addresses or phone numbers belonging to themselves, fellow employees for a company Web site or members of a club on the club's Web site. If the information disclosed violates the privacy of others, those disclosures may prompt legal action by the person whose private information has been made public depending on how the information got posted and the state law that applies. 

Forum Selection Clauses

Forum Selection Clauses can be used to state how a complaint against you can be made; in which jurisdictions you will agree to be sued ("forum selection"); and whether you prefer arbitration or a court suit.

Such provisions must be clear and conspicuous on the site.  You may want to consider the use of click-through technology to be assured that the user has reviewed the policies during registration or subscription. In other words, the user must click "through" the terms in order to complete registration.  In any event, stating that any actions filed against you must be brought in the city where your business is located is strongly urged – you don't want to have to fly across the country to defend yourself in court.

Absent unconscionable or unreasonable provisions, your choice of forum for determining disputes should be enforced by the courts.  See, e.g., Graham Technology Solutions, Inc. v. Thinking Pictures, Inc. (N.D.Cal 1997) 949 F.Supp.1427.

While it may seem attractive to try to limit the number of lawsuits you may have to defend by selecting a hard-to-reach location, such as Nepal or the British Virgin Islands, be forewarned. Courts have limited unreasonable conditions.

In Comb v. PayPal, Inc. (N.D.Cal.2002) 218 F.Supp.2d 1165, the court found an arbitration provision unconscionable and refused to enforce it because of the high cost of private arbitration when compared with the low-dollar value of the individual claims being submitted against PayPal.  The court determined that the use of high-cost arbitration acted to discourage legitimate claims. Discouraging legitimate claims was found to be procedurally unconscionable to PayPal's customers.

Handling Claims of Copyright Infringement

Occasionally, someone will claim that copyrighted materials have been posted on your site. This frequently happens when a user cuts-and-pastes material from another site.  Consequently, most sites should develop a policy for dealing with such claims. 

The easiest way of handling such claims is to comply with Section 512 of the Digital Millennium Copyright Act (17 USC 512).  That section provides a "safe harbor" for Web site operators who take down allegedly copyrighted material upon request by the copyright holder.  There are some technical requirements that must be met to comply with the safe harbor provisions, and it is worth learning about them from the Copyright Office's Web site.

Speak Back Sections

Libel law developed largely as a consequence of a defamed individual not having a podium to respond to unfounded allegations. Arguably, the Internet provides numerous sites for responding to defamatory claims.

A site operator may want to create a "free speech zone" where responses can be posted regarding a person or issue being discussed by regular contributors. The existence of such a forum may give a court sufficient comfort that the ability to access the same audience means that the site shouldn't be held liable for defamatory content.

Liability insurance

One of the issues that commonly arises in any discussion about independent journalism start-ups is liability. Working for a large news company, journalists feel protected against libel lawsuits since they corporate counsel on their side. But when you go it alone, you’re completely exposed.

David Ardia, the director of the Citizen Media Law Project at the Berkman Center at Harvard acknowledged the cost concerns in a Journalism 2.0 blog post, but is strongly in favor of insurance:

"I think liability insurance is very important," Ardia said. "While legal counsel can help to fend off liability, if a publisher loses the lawsuit, they will be on the hook for damages.  Unfortunately, most insurance carriers price their insurance products well above what a small journalism startup can afford."

So one option is the “high deductible approach:” find a good lawyer to use if you get sued instead of paying monthly premiums for liability insurance. If you’re just starting out, this might be your only option.

Ardia added that this issue is covered in detail in the center’s legal guide, which is a must-visit site for anyone launching a new journalism start-up:  http://www.citmedialaw.org/legal-guide/finding-insurance.

Sponsorships generally provide more exposure and branding than an average banner or skyscraper ad on a Web site. What can be sponsored and what advertisers get for the money varies widely among sites.

Types of Sponsorships

Two somewhat common types of sponsorships are for:

• Site tools.
• Focused content sections.

It's common to see an advertiser's name displayed near a search box or other utility on a news or content Web site. This does not mean that the sponsor has provided any of the technology behind the search or that they've tinkered with the search results to be "sponsor-friendly." They've simply paid to be associated with this tool on the site.

For their money, the sponsor receives a fixed placement near the tool. It can also be done with a type of content, like breaking news or a topical section. The sponsor's logo will appear near the main content area of the page. Again, this does not imply that the sponsor has influenced the editorial content of this section. But its sponsorship dollars have given the company more prominent placement than the usual ad units on the page.

On some sites, section sponsorship will also entitle the advertiser to fixed placement in all of the ad units in the section. This, of course, is generally more expensive.

Why Advertisers Like Sponsorships

Like most ad products, the key to developing a good sponsorship program is to think like an advertiser. Unlike some banner and tile campaigns, advertisers who purchase sponsorships are focused more on brand association and awareness than direct response. Instead of specific click-through goals, the benefits lie in raising general awareness of the advertiser’s brand and associating it with the subject matter being sponsored or the respected name of your site.

So think about placements that will give more impact and presence on a page than a regular banner ad. Ideally, they should be as close to the main content area as you can comfortably handle and permanently placed on the page for the duration of the campaign. You'll also want to make sure – for your benefit and your advertiser’s – that you have clearly labeled the advertiser as a sponsor and identified what the advertiser is sponsoring.

Sponsored Content

When an advertiser sponsors site content or tools, it does not mean that the advertiser is influencing editorial content.

But sometimes advertisers pay for advertorials, which consist of content that is either provided by the advertiser or is specifically written to be "advertiser-friendly." For example, a home design advertorial section might include articles about kitchen remodeling, the steps involved or the choices in kitchen cabinetry, and also endorse a particular manufacturer's product line because they are sponsors of the section.

It is important to distinguish clearly between such advertorial content and other editorial areas of the site. A common practice in printed publications, and which translates well online, is a simple "Advertisement" label across the top of the page.

To maintain your operation’s center of gravity, it's helpful to develop a set of guidelines in advance to provide to potential advertisers. Decide what ads you will and won't accept before you’re confronted with a questionable situation.

Ad Standards

As a site publisher, you'll want to set up standards for what kinds of advertising you'll accept. Common areas of contention are ads for gambling, firearms, and adult content. While you're able to change this policy at any time, having made some initial decisions will keep you focused on the advertising you ideally want without getting distracted by potentially lucrative but questionable opportunities.

Ad Specifications

Ad specifications are common among larger publishing Web sites. This document tells advertisers what ad units you display on your site. It describes the size of each unit, the maximum file size and format you'll accept. It may also include a screenshot example of where ads are placed, and if they're interactive, how they work.

Rate Cards

Although all printed publications have a "rate card" that lists prices for various sizes and frequency of ads, the same has not been true for Web sites. Some sites have pricing listed in an online media kit. Others require potential clients to contact a staffer to get more information. Having a rate card allows you to provide information quickly to those who inquire. At the same time, it may set a price that is too high for some potential buyers. Not having a rate card requires you to negotiate every sale individually. This is time-consuming but enables you to modify your prices to your advertisers’ budgets and create custom packages that reward higher-volume advertisers. In the end, you’ll need to decide which model will work best for your site.

Future Considerations

The world of online advertising changes constantly. Every year a new ad size, technology or placement becomes popular with advertisers. Regardless of how good your ad units are today, tomorrow someone will come along and ask you to place a bigger ad in a more intrusive place. So how does a good online publisher or editor develop guidelines and standards that continue to hold throughout all the changes? There isn't a perfect method. Perhaps the best way is to consider what you're trying to avoid in general.

Some questions to evaluate new ad opportunities:

• Does this ad get in the way of providing a good user experience?
• Does it greatly inhibit a user's ability to get to the editorial content?
• Is it still clear which part of the page is advertising and which part is editorial?

Additional reading:

The Federal Trade Commission's Q&A on Advertising Policies
http://www.ftc.gov/bcp/guides/guides.shtm

Sponsorships generally provide more exposure and branding than an average banner or skyscraper ad on a Web site. What can be sponsored and what advertisers get for the money varies widely among sites.

Types of Sponsorships

Two somewhat common types of sponsorships are for:

• Site tools.
• Focused content sections.

It's common to see an advertiser's name displayed near a search box or other utility on a news or content Web site. This does not mean that the sponsor has provided any of the technology behind the search or that they've tinkered with the search results to be "sponsor-friendly." They've simply paid to be associated with this tool on the site.

For their money, the sponsor receives a fixed placement near the tool. It can also be done with a type of content, like breaking news or a topical section. The sponsor's logo will appear near the main content area of the page. Again, this does not imply that the sponsor has influenced the editorial content of this section. But its sponsorship dollars have given the company more prominent placement than the usual ad units on the page.

On some sites, section sponsorship will also entitle the advertiser to fixed placement in all of the ad units in the section. This, of course, is generally more expensive.

Why Advertisers Like Sponsorships

Like most ad products, the key to developing a good sponsorship program is to think like an advertiser. Unlike some banner and tile campaigns, advertisers who purchase sponsorships are focused more on brand association and awareness than direct response. Instead of specific click-through goals, the benefits lie in raising general awareness of the advertiser’s brand and associating it with the subject matter being sponsored or the respected name of your site.

So think about placements that will give more impact and presence on a page than a regular banner ad. Ideally, they should be as close to the main content area as you can comfortably handle and permanently placed on the page for the duration of the campaign. You'll also want to make sure – for your benefit and your advertiser’s – that you have clearly labeled the advertiser as a sponsor and identified what the advertiser is sponsoring.

Sponsored Content

When an advertiser sponsors site content or tools, it does not mean that the advertiser is influencing editorial content.

But sometimes advertisers pay for advertorials, which consist of content that is either provided by the advertiser or is specifically written to be "advertiser-friendly." For example, a home design advertorial section might include articles about kitchen remodeling, the steps involved or the choices in kitchen cabinetry, and also endorse a particular manufacturer's product line because they are sponsors of the section.

It is important to distinguish clearly between such advertorial content and other editorial areas of the site. A common practice in printed publications, and which translates well online, is a simple "Advertisement" label across the top of the page.

BlufftonToday.com

BlufftonToday.com offers this useful tutorial to help Bluffton, S.C., residents figure out whether a photo is good enough to publish online.

• Read article

For J-Learning press releases, please click here.

J-Lab Staff

Jan Schaffer, Executive Director | E-mail: jans AT j-lab DOT org
Jan Schaffer, former Business Editor and a Pulitzer Prize winner for The Philadelphia Inquirer, is executive director of J-Lab: The Institute for Interactive Journalism and one of the nation’s leading thinkers in the journalism reform movement. She left daily journalism in 1994 to lead pioneering journalism initiatives in the areas of civic journalism, interactive and participatory journalism and citizen media ventures. She launched J-Lab in 2002 at the University of Maryland’s College of Journalism to help newsrooms use innovative computer technologies to engage people in important public issues. As a federal court reporter, she helped write a series that won freedom for a man wrongly convicted of five murders. The stories led to the civil rights convictions of six Philadelphia homicide detectives and won several national journalism awards, including the 1978 Pulitzer Prize Gold Medal for Public Service.More...

Craig Stone, Web Editor | E-mail: craig AT j-lab DOT org
Craig Stone has been the Web Editor at J-Lab since June 2005. He is a native of Laurel, Maryland, and earned a bachelor's degree in print journalism from the University of Maryland’s Philip Merrill College of Journalism in 2005. While with J-Lab, he was a contributing editor for Mark Briggs' book, "Journalism 2.0: How to Survive and Thrive," as well as J-Lab's research publication, "Citizen Media: Fad or the Future of News?" As a Maryland student, Craig was a copy editor for the student newspaper, The Diamondback, and he has written and edited for College Magazine.

Rachel Sandor, Project Manager | E-mail: rachel AT j-lab DOT org
Rachel Sandor is the Project Manager at J-Lab. She grew up in Boulder, Colorado and earned her bachelor’s degree in media studies from the University of San Francisco. While attending USF, she was a film critic for the student newspaper, The San Francisco Foghorn. She is also a former editorial staff member of Rotten Tomatoes, a movie review Web site. Rachel enjoys traveling and lived in Budapest, Hungary for over a year. Her other interests include watching movies and exploring Washington with her fiancé, friends and dog.

Hop Studios

Susannah Gardner is a Web designer and developer at Hop Studios (hopstudios.com), an Internet consulting firm with offices in both Pasadena, Calif., and Vancouver, British Columbia. She authored Buzz Marketing with Blogs for Dummies (buzzmarketingblogs.com), which was published in March 2005, and co-wrote two other Internet-publishing guides: Dreamweaver MX 2004 for Dummies and Teach Yourself Visually: Dreamweaver MX 2004. As a graduate of the University of Southern California, Gardner has played many roles in the Annenberg School for Communication – particularly in its online program – and has served as lecturer, director and editor for a variety of projects. She also helped to set up the Web site for the Los Angeles Times as both an electronic editor and multimedia director.

Travis F. Smith is a partner at Hop Studios. Also a graduate of USC, has been a long-time online journalism lecturer in the Annenberg School and had been the Online Journalism Review’s Paris bureau chief. Smith previously helped to run Variety.com and the Los Angeles Times Web site, which he helped to create in 1994. He has spoken on a number of panels regarding blogging, subscription-based revenue models and online journalism. Smith’s avid enthusiasm for the Internet also finds him maintaining at least three blogs, including Unvarnished (hopstudios.com/nep/unvarnished).

Colophon

Gardner and Smith were responsible for all the writing on the site at its launch, in addition to crafting the design and the functionality of the J-Learning site. Hop Studios specializes in content intensive, community-based Web sites, and can be reached via its Web site at hopstudios.com.

The site runs on Expression Engine 1.3, a blog and content management system developed by PMachine that's as flexible as it is affordable. It's also running a custom article rating module developed for Expression Engine by Mitchell Kimbrough of solspace.com. The site content was organized using MediaWiki for internal collaboration and shared editing, and Basecamp for project management. The site is hosted by the good folks at Nexcess.net.

Our address is:
J-Lab: The Institute for Interactive Journalism
3201 New Mexico Ave. NW, Ste. 330
Washington, DC 20016

Phone: (202) 885-8100
Fax: (202) 885-8110

E-mail:

For J-Learning press releases, please click here.