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 scouting for good designers within your professional associations and affiliations. It could expedite the process if you work with a designer who has already built similar Web sites for your industry.

Next, try contacting a local Internet Service Provider (ISP). They may have a good recommendation or an ongoing relationship with a Web developer.

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. The key to hiring students, we've found, is to work with them after they graduate and not while they're still dealing with a busy courseload.

Vetting Contractors

After you've located some leads, you need to choose the right vendor. In today's Web developer market, it's fairly difficult to choose among various candidates based on their reputation. There are no business licenses required specifically for Web developers, nor do any significant professional organizations police their members.

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?

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 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.
• 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 (DAT). There is only one viable portable DAT recorder, but there are many rack-mountable units you can hook up to your computer. This format produces very high quality recordings suitable for almost any use you might make of them. Tapes can be expensive, but will last, and can be reused.
• An MP3 player. Some MP3 players can 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.
• A high-quality tape recorder. Don't be fooled into using the microcassette recorders you find in most electronics stores; those are fine for dictation and notes but the recording quality isn't good enough for publication. A high-end tape recorder, however, will work just fine, giving you good audio fidelity along with a device most of us could use in our sleep.
• A MiniDisc recorder. Small, portable and very high quality – MiniDisc recorders are an excellent choice for field recording. There are also rack-mountable units for use in the office or studio. MiniDisc recordings
• 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.
• Tapes, CDs, MiniDiscs, 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. MP3 players used as recorders and MiniDisc recorders can be used for this purpose. Or, record directly onto your computer, bypassing the need to wait for files to transfer.

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 quick recommendations to get you started:

Marantz manufactures a series of high-quality portable cassette tape recorders, the PMD 101, 201, 221, and 222. They all make very good analog audio recordings and are hardy enough to withstand transportation. The PMD 201, 221 and 222 units include a telephone jack for making recordings from the phone. All of the units have headphone jacks. Visit the Marantz Web site to find a local retailer. Expect prices to range from $250 for the PMD 101 up to $450 for the PMD-222. Marantz also makes CD and DAT recorders.

If you're thinking about using a DAT recorder, consider the Sony PCMM1 Professional DAT Player and Recorder. Capable of 3.5 to 4 hours of audio, this unit costs between $700 and $800.

Sony makes a series of portable MiniDisc recorders, ranging from $200 to $500. The Sony MZ-M100 uses Hi-MD discs capable of storing 1GB, and audio can be transferred directly onto your computer via USB. You'll love the battery life, too, at up to 33 hours.

Behringer is a very reputable audio manufacturer. The Behringer Eurorack mixing board permits you to plug in two microphones and is small enough to be highly portable. At about $65, the price is right, too.

Sennheiser and Sony both make high-quality headphones that run in the $60-$125 range. Look for ones that fully cover the ear. They are bulkier, but they give you a better audio experience by blocking out environmental sounds.

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'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/.

Advanced Projects

Here are several examples of different display methods bringing data (audio, images, text, numbers, locations) together into a more coherent whole:

Gotham Gazette's ground zero planner, http://www.gothamgazette.com/rebuilding_nyc/groundzeroplanner/

Miami Herald's new skyline, http://www.miami.com/multimedia/miami/business/archive/skyline/index.html

Washington Post's new baseball stadium graphic, http://www.washingtonpost.com/wp-srv/business/daily/graphics/stadium_081505/

These are award-winning sites, so don't expect that there's a simple tool that will let you whip a similar presentation together in an afternoon. But it's instructive to think about how you'd go about creating a project like this. There are some general steps you need to take to end up with something like this.

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.

Here’s how to save an SWF:

1. With your movie open, select File > Export > HTML + SWF. This exports both the SWF and the appropriate HTML code to embed the file in a Web page. Choose to export the HTML code if you need the code in order to embed the SWF in a Web page.  Other times you may already have the code, and only need to generate the SWF. If you only need the SWF, select File > Export > SWF.
2. SWiSHmax opens the Publish SWiSHmax Movie window. Choose the location on your computer where you want to save your file, then click the Save button.
3. SWiSHmax asks if you want to edit the HTML file that was exported. Select No.
4. Your movie is now ready for Web use. You can open the HTML file with any text editor or HTML editor you are using, or use an HTML editor to place the SWF in a Web page. Remember to upload the SWF file to the Web server just as you would upload an image to a Web page.

Always be sure to test your SWF files once you upload them. It’s better to be safe than sorry.

Before doing the tutorial, understand that an interactive button is said to have multiple states, depending on how the user is interacting with the button. These states are:

• Up state. The default behavior of the button.
• Over state. The button when a mouse is placed over it.
• Down state. The button when it is clicked.
• Hit state. The clickable area of the button.

You don’t have to use every state with your buttons, but the more you customize these states, the more interactive your button will appear to be – basically the better understanding the user will have of what is happening.

To create a button in SWiSHmax:

1. Start a new movie.
2. Use the Tools to draw a box on the stage.
3. Click the Shape panel and give your button a name. In this example, the shape is called “Red Button.”
4. Select the Line pull-down menu, and select a line style to outline your button. Set the width of the outline in the field that appears, then use the color menu to select an outline color. You can change the Fill color of the button in this panel as well.
   
5. From the Modify menu, choose Convert > Convert to Button. Your object has now been turned into a button, and you will see a Button tab in the Objects panel.
6. Click the boxes next to “Has separate over state” and “Has separate down state.” (It is only necessary to set a separate Hit state if the area that should be clickable is not the same shape as the button you created. For example, if your button is text, but you want the spaces around and between letters to be clickable, you could set a separate Hit state and define a larger area as clickable.)
7. Take a look at the Outline panel. In it, you can see your Red Button object. Click the plus sign () next to the object view all the button states.
8. To set a new Fill color for the Over state, select the shape object under the Over State. SWiSHmax opens the Shape tab in the Objects panel. Select a new Fill color and a new line color if you wish.
   
9. To set a new Fill or Outline color for the Down state, select the shape object under the Down State in the Outline panel. SWiSHmax opens the Shape tab in the Objects panel.
   
10. Use the Shape tab to set new Fill and/or Outline colors.
11. Click the play button () in the icon menu across the top of the application to watch your animation. Place your mouse over the button, and click the button to preview the Over and Down states.
12. Now it’s time to add the interactivity that will make your button actually do something when clicked. Some of the possibilities include:
    • Jumping to a specific frame in the animation.
    • Stopping or starting the animation.
    • Playing a sound.
    • Opening a Web page.

To apply interactivity you need to add a script to the button. Select Script from the Panels menu at the top of the application. The Script panel opens.

1. In the Outline panel, select the Red Button object (you want the entire button to be selected, not just one of the button states).
2. In the Script panel, click the Add Script pull-down menu . Then select Browser/Network > getURL(&hellip from the menu that appears. SWiSHmax places the code in the Script panel that will cause this action to occur. Below the code, you can see fields for the Properties you need to provide.
3. In the URL field, type or paste the exact Web address you want the button to open. Remember to include the http://. For example: http://www.google.com
4. The Window field allows you to target how the Web page opens. You don’t need to select anything if you want the page to open in the same browser window the user is currently using.
5. Click the play button () in the icon menu across the top of the application to preview your animation. When you click your button, the Web page should open in a browser window if you have an active Internet connection (even though you haven’t yet put the SWF onto your Web site).

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.

Some of the most basic provisions you might consider are identified in this section.

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.

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.

In the screenshot below, Harris Direct has sponsored the "Site Search" function on nytimes.com. Every time the site search is shown on the page, their logo is displayed. This does not mean that Harris Direct has provided any of the technology behind the search or that they've tinkered with the search results to be "Harris-friendly." They've simply paid to be associated with this tool on the site.

Charles Schwab is the sponsor of the Investing section of BusinessWeek Online. For their money, they've received a fixed placement near the main content area of the page and a smaller tile-sized ad [LINK] in the left navigation. Again, this does not imply that Schwab 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.

Salon.com employs an interesting example of site sponsorship. In this somewhat unique case, Salon provides a "day pass" of premium access to users who view an interactive ad presented by the sponsor.  By viewing this ad, site users have access to all the content on the site. Without this pass, users either need to sign up for a "Salon Premium" subscription or are extremely limited in what articles they can read on the site.

Although Salon has been using this sponsorship for at least two years, the model has been slow to catch on. Increasingly, however, more sites are beginning to look at paid content or subscription models.

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. For example, the Charles Schwab sponsorship of the Investing section on Business Week Online leads readers to think of the Schwab brand when considering investment choices, while the placement on the Business Week Web site lends the credibility of Business Week to Schwab. (Incidentally, this can work both ways, where having big-name advertisers gives readers the impression that the site is one of some prominence, too.)

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.

Additional reading:

Online Advertising Glossary: Sponsorships

http://www.clickz.com/experts/archives/media/media_sell/article.php/824121

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.

The Minneapolis Star Tribune posts its guidelines for acceptable advertising online at http://startribunecompany.com/119.

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.

Here are some examples:
http://sales.marketwatch.com/ad_specs.bak
http://www.nytimes.com/marketing/adinfo/advertise/adpositions.html

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/conline/pubs/buspubs/ad-faqs.htm

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.

In the screenshot below, Harris Direct has sponsored the "Site Search" function on nytimes.com. Every time the site search is shown on the page, their logo is displayed. This does not mean that Harris Direct has provided any of the technology behind the search or that they've tinkered with the search results to be "Harris-friendly." They've simply paid to be associated with this tool on the site.

Charles Schwab is the sponsor of the Investing section of BusinessWeek Online. For their money, they've received a fixed placement near the main content area of the page and a smaller tile-sized ad in the left navigation. Again, this does not imply that Schwab 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.

Salon.com employs an interesting example of site sponsorship. In this somewhat unique case, Salon provides a "day pass" of premium access to users who view an interactive ad presented by the sponsor. By viewing this ad, site users have access to all the content on the site. Without this pass, users either need to sign up for a "Salon Premium" subscription or are extremely limited in what articles they can read on the site.

Although Salon has been using this sponsorship for at least two years, the model has been slow to catch on. Increasingly, however, more sites are beginning to look at paid content or subscription models.

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. For example, the Charles Schwab sponsorship of the Investing section on Business Week Online leads readers to think of the Schwab brand when considering investment choices, while the placement on the Business Week Web site lends the credibility of Business Week to Schwab. (Incidentally, this can work both ways, where having big-name advertisers gives readers the impression that the site is one of some prominence, too.)

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.

Additional reading:
Online Advertising Glossary: Sponsorships
http://www.clickz.com/experts/archives/media/media_sell/article.php/824121

Ads could range from The Lawrence Journal-World’s video employment ads, that pitch jobs to job seekers to real estate listings such as the Steamboat Springs Pilot’s 360-degree house tours.

Consider inviting local retailers and restaurants to offer their best bets or dinner deals of the day.

Or you could build all-in-one advertising packages like the VillageSoup.com’s $19.95 monthly special that gives local businesses their own online directory listing, banker ads, unlimited classifieds and discounted ads in the print editions.

Who can you get to advertise on your site? How do you find them, and what are the key elements of your pitch?

Endemic Advertisers

Chances are, your site specializes in a certain subject matter that is a natural match for certain categories of advertisers. For example, a site about high school football would likely be attractive to sports nutrition and sports drink manufacturers and to sporting goods stores. A site with recipes could find advertising support with kitchen appliance retailers or grocery stores. These common-sense sources of advertising are called endemic advertisers.

In general, figuring out who your endemic advertisers are should be a fairly straightforward exercise. Ask yourself:

• What is your site about?
• What are the products or services involved in the topic?
• Who makes or sells these items?

Demographic Targets

Sites that change topic frequently, however, can have a hard time identifying and appealing to endemic advertisers. If your site falls into that category, you may want to focus more on advertisers who are looking for the audience that your site attracts. In addition to looking for consumers by topical interest, advertisers target potential consumers by demographics. Key identifiers include where they live (generally specified by ZIP code), age, gender and household income range, which is sometimes hard to get.

So it helps to have a fairly good idea of your audience's demographics. One way to get this information is through user surveys.

You can also discuss with potential advertisers who they're looking to reach. Sometimes you can make an educated guess. Home electronics stores, for example, generally target a younger (18-34) male audience. For local retailers, geography is very important because shoppers usually don't drive more than about 25 miles unless they're looking for a very unique item.

Qualifying Your Leads

Your list of leads is a great start to getting money in the door, but it's only the first step. From here, you'll want to qualify the list by focusing on those that have a marketing budget and are open to applying it to your site. Generally, this means calling, e-mailing, and being persistent. It may take several calls or e-mails just to reach the right person in the organization. This type of "cold calling" can be uncomfortable to do. However, the important thing to remember is that you are calling a potential advertiser with an opportunity that may potentially help them reach customers.

One pitfall to avoid is assuming that larger companies are the best targets. While they're likely to have larger budgets than small companies, they're also likely to require more levels of approval to buy an ad, and it’s likely that their marketing plans have been set a year in advance. Also, while there has been movement in some large companies to capture "niche" audiences, a large, national company usually wants to reach a large, national audience. Your audience will need to be of a certain scale to capture their attention.

If your site has a public service aspect to it, consider approaching the public relations or community outreach division of a larger company. These departments are separate from product marketing, have their own budgets and might be willing to support a interactive exercise on community issues, or a community survey or town hall meeting. Or perhaps they would fund some interns to work on your site.

Your Pitch

Make some preparations before you make a sales presentation. Prepare:

• A brief recap of your client's goals.
• Statistics about your site's traffic, usually measured in terms of page views or unique visitors.
• A screenshot showing where your client's ad will be placed.
• Some proposal of how often the ad will be displayed (e.g., "fixed placement," "in rotation".
• Bullet points on why your site is a great match to fulfill your client's goals.
• Pricing options.

Put yourself in the shoes