Chapter 39

Essential Tools, Gadgets, and Resources


CONTENTS


Visit the archives of the HTML Writers Guild mailing lists or listen in to any of the discussion groups of HTML and CGI experts (several of which are named in this chapter) and one thing becomes apparent: Webmasters seldom agree on anything. This chapter does not present anything like a consensus of Webmasters. It does present the personal preferences of one of the authors, and gives some of the reasoning behind these choices.

This chapter covers what to get from where. Most of the tools are on the Net, available for free or at very low cost. We describe our personal favorites-how to get them, how to set them up, and how to make sense out of what they say.

These tools are our favorites not because they are always the best (although some certainly are!), but because they work well in our environment. Your mileage, as always, may vary.

Authoring HTML

The fundamental task of a Webmaster is authoring HTML pages. This section describes a variety of tools that aid in that task.

HTML Editor

Name: None
Where to get it: N/A
How to set it up: N/A
How to use it: N/A

There are many fine HTML editors out there. Some are commercial products; many are free. We don't use any of them.

Why? Having written a lot of pages, most of which conform with our style guide, a new project comes up the fastest by taking an existing page and cutting and pasting elements on it. The old page serves as a template and a checklist:

Each of our sites has a unique header and footer file, included by SSI, so that we can set the look and feel for a site quickly. After that, everything we do is typing, and it seems faster to type the HTML tags than to stop and put them in with an editor.

In early 1996 there was a thread on the HTML Writers Guild "HWG Business" entitled "What do you want from a web editor?" The upshot of that discussion was that:

The full thread is available from the HWG Mailing List Archives.

While some experienced Webmasters use editors, many share our opinion that it's just as fast to start with existing pages and change the tags by hand.

Style Guide

Name: Yale Medical School
Where to get it: http://info.med.yale.edu/caim/
How to set it up:
N/A
How to use it: N/A

The style guide from CAIM at Yale Medical School is not the most up-to-date style guide. In fact, it contains some information thg is just plain wrong, such as the recommendations for using headers to set a font size. But it seems to cover so much ground in such a small number of pages that we can't bring ourselves to give it up. We have a printed copy, marked with our local adaptations. Someday we'll change. But not yet. Not yet.

Color Matcher

Name: Hype
Where to get it: http://www.phantom.com/~giant/HYPE_BACK/hypeback.html
How to set it up:
N/A

How to use it: Point your browser to the hype.html page and select a color from the list, shown in Figure 39.1. These links lead to full-page samples of the color, like the one shown in Figure 39.2. This site lists a large variety of colors with picturesque names. For the artistically challenged (that's me!), the names are more useful than seeing hundreds of colors in a color-picker like most of the ones at http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Page_Design_and_Layout/Color_Information/. Each line shows the hex codes for the color so that you can reproduce it quickly. There is a link for each color to give the developer an idea of what a full screen of that color looks like.

Figure 39.1 : The Hype Color List shows the hex codes and samples for over 400 different colors.

Figure 39.2 : Each color on the Hype site is linked to a fullscreen sample of that shade.

Tip
The files used in the Hype Color Matcher all have names that obey the DOS naming convention (eight characters) though they do have the four-character "html" file extension. By changing "html" to "htm" these files can be copied onto a Windows machine and used on the desktop.

Background Patterns

Name: Netscape Backgrounds
Where to get it: http://home.netscape.com/assist/net_sites/bg/backgrounds.html
How to set it up:
You can use it on line; I prefer to copy the whole set as a gzipped tar.

How to use it: To get an idea of how a site will look with a background pattern, keep the image directory in a standard place like /graphics/backgrounds/. Then go to the header file for the site and put in a call to a background like "aluminum_brushed" (shown in Fig. 39.3):

Figure 39.3 : The Netscape collection of backgrounds is a good starting point if your style guide allows textured backgrounds.

<BODY BACKGROUND="/graphics/backgrounds/aluminum_brushed.gif">

Once I'm more or less happy with a background, I show it to my art director, and he improves upon it. Chapter 38, "Evaluating Your Web Staffing Needs," describes the roles of the various team members in Web development. Be sure to look at the site from both the technical and the aesthetic points of view. The quality of the finished product will reflect the combination of viewpoints.

For example, the art director knows that the aluminum_brushed.gif background uses quite a few of the colors in the color map. If pages on the site will have graphics with heavy demands on the color map, the art director may move the site to a simpler background so the color map doesn't overflow (forcing dithering). If only a few pages will have complex graphics that threaten to overflow the color map, the art director may use DeBabelizer (described below) to build a unified color map that meets the needs of all the graphics on those pages.

Graphics Tool

Name: The best "graphics tool" is a good art director. Many of them have strong preferences about their tools, and the wise Webmaster will not try to force them to use a tool they wouldn't choose for themselves.

That said, many graphic artists would agree with our art directory that Adobe Photoshop and DeBabelizer form a powerful combination that can meet most graphics needs.

Where to get it: Commercial Products, described online at http://www.adobe.com/Apps/Photoshop/ and http://www.equilibrium.com/.

How to set it up: Instructions are shipped with the products.

How to use it: Become an artist, and do what comes naturally.

General Page-Checking

Name: Harold Driscoll's list of Page-Checking Resources
Where to get it: http://www.ccs.org/validate/
How to set it up:
Use it online

How to use it: For most validation, start at this site. As shown in Figure 39.4, Harold Driscoll's site provides links to the most popular validation tools, including the ones described in "Reducing Site Maintenance Costs Through Testing and Validation" (Chapter 2). Run the page past KGV, and fix any problems. Then run it through WebLint. Finally, run it through Doctor HTML. While you're here, use any specialty tools you need, like WebSter or the Lynx emulator.

Figure 39.4 : Harold Driscoll offers "one-stop shopping" for validation services.

Validator

Name: Gerald Oskoboiny's Kinder Gentler Validator
Where to get it: http://ugweb.cs.ualberta.ca/~gerald/validate/
How to set it up:
Use it online; reach it from http://www.ccs.org/validate/.

How to use it: Start with the KGV, shown in Figure 39.5, when validating Web pages. It is strict enough to catch most errors, but unlike Weblint, will not flood you with error messages.

Figure 39.5 : The Kinder, Gentler Validator shows where each error is, gives a short description of it, and provides a link to a full description of the problem.

Lint

Name: WebLint
Where to get it: http://www.unipress.com/weblint/
How to set it up:
Use it on or offline; reach it from http://www.ccs.org/validate/.

How to use it: Run it in what WebLint calls "pedantic mode" for best results. WebLint is picky to begin with. Pedantic mode turns WebLint into a fanatic-exactly what you want if your site is to be as technically clean as possible. The results of a typical WebLint run are shown in Figure 39.6.

Figure 39.6 : In "Pedantic Mode," WebLint is fanatically picky about HTML coding.

LinkChecker

Name: DoctorHTML
Where to get it: http://imagiware.com/RxHTML.cgi
How to set it up:
Use it online; reach it from http://www.ccs.org/validate/.

How to use it: Use DoctorHTML, shown in Figure 39.7, after KGV and WebLint for a final polish and double-check. DoctorHTML offers many tests-all are useful, but the one that should be rerun regularly is the Link Checker (since both internal and external links have been known to fail.)

Figure 39.7 : DoctorHTML offers one of the most userfriendly link checkers on the Web.

CGI and DBMS Tools

Once the pages are designed, the next step is to code any CGI. Start by reusing any scripts that may apply. If you must code, reuse pieces like the GET and POST extractors in formmail.pl.

Scripts Archive

Name: Matt's Scripts Archive
Where to get it: http://www.worldwidemart.com/scripts/
How to Set It Up:
Use it online or have all the scripts e-mailed to you.

How to use it: Many common scripts (such as a counter or formmailer) as well as some unique ones (such as ones you would use to put up a random image) are available here, as shown in Figure 39.8. All of these scripts were written by Matt Wright-check out his home page while you are at the site. If you get stuck, there's an excellent general FAQ as well as one for each script. Matt also operates one mailing list for discussion about the scripts (www-scripts) and a help center that leads to a second mailing list (help-scripts) for people who are badly stuck. Figure 39.9 shows an example of how each script is presented.

Figure 39.8 : Matt's Script Archive is one of the best online sources of CGI scripts.

Figure 39.9 : formmail.pl, from Matt's Script Archive, is a full-featured program for e-mailing the contents of an HTML form.

Scripting Language

Name: PERL5
Where to get it: See the list at http://perl.com/perl/faq/Q1.12.html
How to set it up:
Versions are available for all major platforms. Get one for every machine you use.

How to use it: Every development machine should have a copy of Perl. It is useful for quick changes to files, simple maintenance actions, as well as writing CGI scripts. Dream in Perl.

Tip
If you are new to Perl, visit the Perl Frequently Asked Questions list at http://perl.com/perl/faq/index.html. This site offers a wealth of information about Perl.

Note
If your site has Perl 5, look at http://www- genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html. That site, shown in Figure 39.10, has a CGI toolkit which may save quite a few hours of programming time.

Figure 39.10 : Once you are familiar with CGI programming, the CGI.pm library can save programming time.

Site Searcher

Name: htgrep
Where to get it: http://iamwww.unibe.ch/~scg/Src/Doc/htgrep.html
How to set it up:
Download the FAQ first, shown in Figure 39.11, then follow the directions.

Figure 39.11 : Read the htgrep FAQ to find out if it will meet the needs of your site.

How to use it: Build a wrapper script and backend similar to the ones shown in Chapter 16, "How to Index and Search the Information on Your Site." Set up a standard text file style that works with your script. Keep reusing them for each new project.

Putting the Site Up

Once the site is ready, the pages validated, and the code tested, it is time to send the code to the server. If you don't have a server, you should make arrangements with a service provider for virtual hosting (See Chapter 37, "Evaluating the Server Environment").

Hosting Service

Name: Northwest Nexus
Where to get it: http://www.halcyon.com
How to set it up:
Contact Nortwest Nexus's sales department and ask about virtual hosting. Send e-mail to sales@halcyon.com or phone 1-800-539-3505.

How to use it: There are many good companies offering virtual hosting services, but Northwest Nexus has got it as right as anyone I've seen. Its home page is shown in Figure 39.12.

Figure 39.12 : Northwest Nexus and Halcyon are two names for the same organization.

Web Server

Name: Apache
Where to get it: http://www.apache.org/, shown in Figure 39.13.

Figure 39.13 : Apache was developed from the "patched" version of the NCSA Server, and offers many advanced features.

How to set it up: Download the binaries if they are available for your machine. Otherwise plan to compile it. The make file seems to be robust enough to support most platforms. There is a comprehensive README file in the installation kit, plus help files online.

How to use it: Untar the installation kit into an empty UNIX directory and follow the instructions to compile and install the server. You must have root privilege to use the default settings, which are recommended.

Telnet

Name: NCSA Telnet
Where to get it: ftp://ftp.utexas.edu/pub/mac/tcpip/ncsa-telnet-26.hqx
How to set it up:
The preceding URL points to the Macintosh version; download a version appropriate for your machine.

How to use it: The humble Telnet client is available for all common machines. It is built in to many vendors' offerings, particularly in the Windows community. If you don't have it, get it from ftp://ftp.utexas.edu/pub/mac/tcpip/ncsa-telnet-26.hqx. (This URL points to the Macintosh version.) Telnet is the fastest way to do maintenance on files that are already on the server. If your service provider doesn't give you Telnet access, find another service provider.

Figure 39.14 shows an example of Telnet in use, in which the user has logged in to the Knowbot service at info.cnri.reston.va.us. Figure 39.15 shows the Telnet in action.

Figure 39.14 : The Knowbot service is accessed via Telnet.

Figure 39.15 : Telnet in action.

FTP

Name: Anarchie
Where to get it: ftp://ftp.utexas.edu/pub/mac/tcpip/anarchie-16.hqx
How to set it up:
The file is BinHexed (for the Mac). Open it into its own folder.

How to use it: Anarchie (pronounced like "anarchy") is a combination of FTP Client and Archie. You can look for a file in Archie, then download it with FTP, all from within Anarchie. I understand there is nothing like it for Windows. Amazing!

Anarchie is shown in action in Figure 39.16.

Figure 39.16 : Anarchie is a combined Archie and FTP Client, Available only on the Macintosh.

Selecting Partners for the Web Business

For many Webmasters, putting up HTML is more than a hobby. It's a way of life (and also how we feed our families). Many of the better Web presence providers do not offer ISP services, under the logic that being an ISP is a full-time job in itself. The Webmaster who offers his or her services as a business will have to find a good ISP (if only for their own access) and will want to team with one or more on-line transaction processors so their clients can sell online (as described in Part VII, "Advanced CGI Applications:
Commercial Applications.")

ISP

Name: VisiNet
Where to get it: http://www.visi.net/
How to set it up:
N/A

How to use it: VisiNet is a local service provider (serving Hampton Roads, VA., with new service coming in other parts of the state). If you are in the Web business, people will inevitably ask you for a recommendation on an ISP. We teach them to look for three things:

A good technical support staff (with at least 12¥6 coverage, and provision for 24¥7).

VisiNet serves Virginia well on all three counts. May you be so fortunate in your area.

VisiNet's home page is shown in Figure 39.17.

Figure 39.17 : Every Web Presence Provider should have an ISP to meet their needs and to recommend to their clients.

Note
Many ISPs will be happy to partner with a Web Presence Provider, and will offer an incentive to the Webmaster to recommend them to clients. It's probably best to decline the incentive. If they're good, feel free to recommend them. If they're no good, feel free to recommend their competitor.

Caution
Many isps offer Web site development as well. If you refer one of your clients to them for general connection, make sure the ISP doesn't think they can sell them Web development services. Have a clear understanding with the ISP, and get input from your legal advisor so you don't inadvertently engage in unfair trade practices.

Transaction Processor

Name: First Virtual Holdings
Where to get it: http://www.fv.com/

How to set it up: First Virtual Holdings makes it very easy to set up an account for buying (so you can be a customer) or for selling (so you can open an online store). Instructions are on its site.

How to use it: Many users want to use their credit card, but don't want to send it over the Net. First Virtual is a perfect solution. The merchant doesn't have to get a merchant account-First Virtual processes the card itself. The buyer has to set up an account, but that can be done very quickly online. The user's credit card info is sent by phone, not over the Net. These guys have got some impressive backers, and look like they'll be around for the long haul. Their home page is shown in Figure 39.18.

Figure 39.18 : First Virtual allows a small merchant to set up shop without having to get a merchant's credit card account.

Tip
Chapter 25, "Getting Paid: Taking Orders over the Internet" includes scripts for verifying a buyer's account status, and for sending online requests for payment to First Virtual using its special protocol.

Netscape Commerce Server

Name: VisiNet
Where to get it: http://www.visi.net/
How to set it up:
Contact Ed Fang at edfang@visi.net.

How to use it: Sometimes you'll want to put a form on a secure server, but will be content to have the rest of the site on your regular server. I use VisiNet for this purpose. If you can't find someone well-qualified in your local area, give Ed a call at 1-804-873-4500. Tell him Mike sent you.

Maintenance Tools

Once the site is up, use the processes described in Chapter 43, "How to Apply These Lessons to the Internet," to keep it up-to-date. Some of the tools, like Doctor HTML, are described in this chapter. Others are useful mainly during periodic maintenance.

Log Analyzers

Name: Web-Scope
Where to get it: http://www.tlc-systems.com/dir.html

How to set it up: Web-Scope is a commercial service. Contact it through its Web site to arrange for it to begin producing a report.

How to use it: Read the reports into a spreadsheet or a simple Perl script to capture dwell-time-per-page (difference between the time a user requested a page and the time he or she requested the next page. That information, plus information about where the user sent text, says a lot about the effectiveness of each page. See "How to Keep Them Coming Back for More" (Chapter 41) for more information about how to use reports such as this one. See "Processing Logs and Analyzing Site Use" (Chapter 42) for details about a variety of log analyzers.

Security Tool

Name: .htaccess
Where to get it: Built into NCSA and Apache servers

How to set it up: See Chapter 17, "How to Keep Portions of the Site Private."

How to use it: Depending on your security stance, your needs may or may not be met by .htaccess. If they are, so much the better-it's simple to set up and will at least keep the good guys from stumbling onto private information. (It will not resist a determined attack for very long.)

Figure 39.19 shows an example of the browser's response to an authentication challenge raised by .htaccess.

Figure 39.19 : The .htaccess popup screen alerts visitors that this portion of the site is private.

Security Analyzers

Name: SATAN
Where to get it: http://www.fish.com/satan/
How to set it up:
A ReadMe file is enclosed in the installation kit.

How to use it: See Chapter 40, "Site Security," for a discussion of this tool. SATAN is a comprehensive battery of tests that probe a site to see how well it would resist attack by a cracker. Some of the tests require root access.

Special Purpose Resources

Many sites do quite well with HTML, GIF, and JPEG resources. From time to time, however, a site will need something more. See Chapters 33, "How to Add High-End Graphics," 34, "How to Add Sound," 35, "How to Add Video," and 36, "The Third Dimension: VRML," for a fuller description of advanced capabilities.

Real-Time Audio

Name: RealAudio
Where to get it: http://www.realaudio.com/

How to set it up: Download the player for your platform. Contact Progressive Networks through the realaudio Web site about getting a server.

How to use it: To listen to RealAudio real-time sound, download the player from its site, shown in Figure 39.20, and install it in accordance with the directions. You can also get a Personal Server from its site that will let your site serve up to two simultaneous audio connections. Most sites will want more than that; contact Progressive Networks through its site to order a server with more licenses for simultaneous connections.

Figure 39.20 :

MPEG

Name: MPEGPlayer
Where to get it: http://www.geom.umn.edu/docs/mpeg_play/mpeg_play.html
How to set it up:
As shown in Figure 39.21, binaries are available for many UNIX machines.

Figure 39.21 : MPEGPlayer is a robust MPEG player that runs on most UNIX machines.

How to use it: It takes a heavy-duty machine to decode an MPEG. We use our PowerPC 601 running IBM's AIX. MPEG players are available for all common platforms. Put yours on your most powerful machine.

VRML

Name: WebSpace
Where to get it: http://webspace.sgi.com/

How to set it up: WebSpace is a full-featured, industrial-strength VRML browser. Check for binaries for your machine. Even if the binary is available, you'll need the OpenGL library from your computer vendor or the Mesa library (described below) to get WebSpace running. The documentation available on the Web site is quite complete.

How to use it: As described in Chapter 36, "The Third Dimension: VRML," VRML has applications in architecture, education, and chemistry, to name just a few fields. The number of VRML sites on the Web is growing daily. WebSpace is full-featured-it implements nearly every node in VRML 1.0. You need OpenGL to run it. Get a copy from your vendor, or get Mesa from http://www.ssec.wisc.edu:80/~brianp/Mesa.html and compile it on your platform.

Tip
The WebSpace home page, shown in Figure 39.22, offers links to many VRML resources. Even if you use a different VRML client, the site is worth a visit just to explore the links.

Figure 39.22 : WebSpace's Welcome page offers links to many VRML resources.

Note
Many 3-D graphics programs require OpenGL. The Mesa 3-D graphics library ffers a nice workalike implementation of the OpenGL standard. Unlike commercial implementations, source code is available, and can serve as a good starting point for programmers who want to learn how to write their own graphics routines. The Mesa home page, http://www.ssec.wisc.edu:80/~brianp/Mesa.html, is shown in Figure 39.23.

Figure 39.23 : Mesa is an excellent workalike for the OpenGL 3D library.

Name: Vrweb
Where to get it: http://hyperg.iicm.tu-graz.ac.at/vrweb;sk=6B077880
How to set it up:
Binaries are available for many machines. Source is also available.

How to use it: VRweb is not as rich as WebSpace. There are some nodes it doesn't know how to deal with (such as WWWInline, and some aspects of Texture2). But in a world where no browser is fast, it is less slow than many others. If it is compiled with calls to the vendor's OpenGL library, it can take advantage of native graphics hardware accelerators.

General-Purpose Resources

Some of the resources in this section are not found online, which is generally a minus. But some background books are best used offline, where you can absorb 2,000 library calls at one sitting without worrying about how to get them all to link.

Background Reading for the World Wide Web

Books are a very personal choice. Here are some that we think should be on the shelf of any Webmaster. (Well, yes, besides this one!)

Perl

A book about Perl by the author of Perl. Not a tutorial, but quite readable. Only covers Perl 4. Perl 5 data is online (and is quite comprehensive).

Programming Perl, by Larry Wall and Randal Schwartz (O'Reilly & Associates, Inc., 1991).

If you are new to Perl, don't wade right into Wall and Schwartz-instead look for a good tutorial like Teach Yourself Perl (Sams, 1996). Also look for Special Edition, Using Perl for Web Programming (Que, 1996). This book covers some of the same topics as our Chapters 7, "Extending HTML's Capabilities with CGI," and 8, "Six Common CGI Mistakes and How to Avoid Them," in more detail.

C/C++

Yes, there are times when you want to do something in a language other than Perl. When that happens, look to C++.

Using Borland C++ 3, by Lee Atkinson and Mark Atkinson (Que, 1992).

SQL

A good introduction to a language with a lot of subtleties.

The Practical SQL Handbook, Second Edition, by Judith S. Bowman, Sandra L. Emerson, and Marcy Darnovsky (Addison-Wesley, 1993).

TCP/IP

Here's the book that tells you everything you ever wanted to know about TCP/IP except how to program it:

TCP/IP Illustrated, Volume 1, by W. Richard Stevens (Addison-Wesley, 1994).

And here's the book that shows how to write programs for TCP/IP:

UNIX Network Programming, by W. Richard Stevens (Prentice Hall, 1990).

UNIX

This is where everyone else learns UNIX. It is comprehensive and well-organized, but definitely not a tutorial, and only lightly touches the programming issues. It's also starting to become just a bit dated.

UNIX Power Tools, by Jerry Peek, Tim O'Reilly, and Mike Loukides (O'Reilly & Associates/Bantam Books, 1993).

If you're ever interviewing to fill a position that requires a UNIX expert, ask the candidates to name the most comprehensive book on UNIX. If they name this book, hire them on the spot. If they have a copy with them, let them name their price.

Advanced Programming in the UNIX Environment, by W. Richard Stevens (Addison-Wesley, 1992).

VRML

This book is one of the more understandable and up-to-date on the subject.

Special Edition Using VRML, by Bernie Roehl and Stephen Matsuba (Que, 1996).

Search Engines

When you need to know everything about a subject quickly, use SavvySearch. It knows about a dozen search engines, and searches several in parallel with your keywords.

SavvySearch, at http://www.cs.colostate.edu/~dreiling/smartform.html

Yahoo! is among the search engines SavvySearch looks at, but sometimes you want to see a category. For example, to find out who else besides RealAudio is in the real-time audio business, find RealAudio in Yahoo!'s search engine, then look at the category to find other companies like them.

Yahoo!, at http://www.yahoo.com/

Mailing Lists

Here are the mailing list addresses for some of the better discussion lists on HTML and CGI authoring. If you are not familiar with how to join a mailing list, follow the instructions given in Chapter 10, "Integrating Forms with Mailing Lists."

Advanced HTML (LISTSERV@UA1VM.UA.EDU, SUBSCRIBE ADV-HTML Firstname Lastname)
Advanced CGI (listproc@lists.nyu.edu, subscribe ADV-CGI Firstname Lastname)

Also visit http://www.worldwidemart.com/scripts/maillist.shtml to find out about several mailing lists operated by Matt Wright of Matt's Scripts Archive (MSA). Although those lists primarily deal with the scripts in MSA, you will learn a great deal about scripting by following the discussions.

Newsgroups

There are several good Web-related USENET newsgroups, though none come close to the quality of the HTML Writers Guild mailing lists. Here is a sampling of good newsgroups:

comp.lang.perl
comp.infosystems.www

Class by Itself

Name: HTML Writers Guild
Where to get it: URL: http://www.hwg.org
How to set it up:
Follow the instructions on the site to join.
How to use it: Read the mailing lists, visit the archives, post the lists (after reading the FAQs, archives and, oh, by the way, the by-laws).

The HTML Writers Guild is a reasonably well-disciplined group of professionals who meet on mailing lists to discuss issues relevant to their profession and occasionally whine like babies. The signal-to-noise ratio varies, but it is worthwhile to subscribe and to follow many of the threads. There's a list on HTML basics, and one on business issues. Some of the best minds in the industry meet here. Check out the mentor/apprentice program on the Web site, as well as the comprehensive archives (including the archives of the mailing lists)

Tip
The HTML Writers Guild Mailing List Archives can be searched by key words in the header fields (at http://sunsite.unc.edu/hwg-bin/query) or by words in the message text (at http://sunsite.unc.edu/hwg-bin/query/fulltext).