TechVideos
  Home     About           Free Videos           FAQ     Contact  
Stay Informed Tell A Friend Bookmark this site
Copyright 1998

HOW TO SIMPLIFY WEB SITE MAINTENANCE

Web site maintenance may grow into a very complex and time- consuming process as an organization places more and more information on the Web. Re-doing the "look" of pages, locating links that have become obsolete, and adding current information can be a very labor-intensive process. By incorporating the automated solutions described in this paper, these steps in Web site maintenance can be simplified.

First methods will be discussed that show how to automate the process of changing the look and feel of an entire Web site including backgrounds, navigation buttons, title banners, copyright information, etc. Next several software packages will be examined that can locate and fix broken links and can generate a visual map of the site. Finally, a CGI script will be introduced which allows the dynamic and instant posting of URLs to a site. This script allows a site to grow more resourceful by permitting other members of an organization, or even outside visitors, to help contribute content to a site without having an account on the Web server.

MAINTAINING A CONSISTENT LOOK AND FEEL

A consistent "look and feel" makes navigating around a Web site simpler and finding documents easier. It also lets people know that they are still on the same site as they go from one page to the next. A consistent look and feel can be obtained at a site by using the same navigation buttons, backgrounds, colors, headers, and footers. The footers may include contact information such as an e-mail address, a phone number, or the date the file was last modified. Depending on how many documents are at a Web site, updating this information can be a very time-consuming task. Several approaches will now be examined that can help automate maintaining consistency across all documents.

Background Images

Using the same background image across all pages is one of the easiest methods of obtaining consistency. Simply specify the same background image in all files as shown below.

     <body background="pathname/background-image">

Where pathname is either an absolute or relative pathname and background-image is the name of the JPEG or GIF file. If this same code fragment is placed in every document, then by changing this one image all of the backgrounds at a site will instantly be changed. A generic name should be given for the background image such as background.jpg. If a more descriptive filename is specified, the name may seem confusing later if the background image is changed. For example, if the background image is named blue-seal.jpg, this filename may seem confusing if the seal color is later changed to green. By providing a generic name, the Webmaster would not feel compelled in this case to change the background for every document from blue-seal.jpg to green-seal.jpg.

Background Colors

A background may also be specified as a solid color. Simply indicate the desired color as a text string or as a hexadecimal value as shown below.

     <body bgcolor="white">   or   <body bgcolor="#ffffff">

Unlike changing a background image, to change the background color across an entire Web site requires that every file be modified to use the new color. Using the following Perl command, the background color can be changed for all files ending in html in the current directory from blue to white.

     perl -pi -e 's/bgcolor="blue"/bgcolor="white"/g' *.html

If using hexadecimal values using the following command.

     perl -pi -e 's/bgcolor="#0000ff"/bgcolor="#ffffff"/g' *.html

To perform this same modification on files in subdirectories one level deep change *.html to */*.html. To go two levels deep change */*.html to */*/*.html and so forth. For people who want the flexibility to easily change the background color across all documents, but are uncomfortable using a scripting language, they should consider specifying the background as an image (described earlier) rather than as a color. In this case create a file 1x1 pixel in dimension and fill it with the preferred color. Simply changing the color of this one image will now change the background color in all documents at a Web site. The file size of a 1x1 pixel image is so small that it will go unnoticed as documents are downloaded. By using this approach, flexibility now exists to switch between a background image and a solid color without having to edit any documents.

Navigation Buttons, Headers, and Footers

The ability to modify navigation buttons, headers, and footers across a Web site is a more complicated problem than simply changing the background image or color. It typically requires much more editing. If a Web site contains 10 documents this is a manageable problem. However, for sites that have grown to 100 or 1,000 documents, this quickly becomes a time- consuming task. One limited solution is to use server side includes that provide simple information to clients on the fly such as a file's last modification date or size. The disadvantage of server side includes is that they can decrease the performance of the server, since the files must be parsed while they are sent.

A second solution is to use a WYSIWYG authoring program such as Microsoft FrontPageŠ or Adobe Site MillŠ. By dragging and dropping icons, multiple links and images can be updated. The disadvantages of these authoring packages include: limited functionality, higher cost, and the inability (at least in early versions of these software packages) to work straight with the HTML source code.

To overcome the limitations of these other approaches, a Perl script has been created that functions like a very basic HTML pre-processor. This script is now available in the public domain. This script allows an entire set of pages to be reformatted by executing just one command. The idea is that common sections of a document such as headers, footers, or navigation buttons are maintained in a single document. To change the layout, one template file is edited and then a script is executed that automatically inserts the new content into all documents.

To use this script simply insert two special markup tags into the source code. The first tag should immediately precede the changeable data and the second tag should immediately follow the changeable data in the document as shown in Figure 1.

Before After
<html>
 
<head>
<title>Document Title</title>
</head>
 
<body>

...
 
<a href="document1.html"><img 
src="pathname/button1.gif"></a> 

<a href="document2.html"><img 
src="pathname/button2.gif"></a> 

</body>
</html>
<html>
 
<head>
<title>Document Title</title>
</head>
 
<body>
 
...
 
<NAVIGATION-BUTTONS>
 
<a href="document1.html"><img 
src="pathname/button1.gif"></a>
 
<a href="document2.html"><img 
src="pathname/button2.gif"></a>

</NAVIGATION-BUTTONS>

</body>
</html>

Figure 1: Special tags which indicate the location for data insertion.

In this example, the special tags are <NAVIGATION-BUTTONS> and </NAVIGATION-BUTTONS>. These special tags may be customized for individual needs. For instance, the special tags might be labeled <HEADER-INFO> or <FOOTER-INFO>. Any tags that a browser does not recognize, such as these tags, will be ignored when the document is displayed. The ending tag must be equivalent to the beginning tag with the addition of a closing forward slash (i.e., "/"). Avoid using tags that browsers recognize such as or . When the script is executed, new information is taken from the specified template file and is automatically inserted between the special tags.

CHECKING FOR BROKEN LINKS

As documents are moved or deleted, links may become broken. A broken link is equivalent to having a typing error on a page. It indicates that the link is either configured incorrectly or is no longer valid. Links can be either internal (within a site) or external (to other sites). Hence, external links may be broken even if no internal pages have been modified. With statistics indicating that approximately 20 percent of hyperlinks become invalid in just a few months, it is essential that links be verified on a regular basis. Checking for broken or dead links can quickly become a very time-consuming task. Listed below are a few software packages that can perform automatic link checking. Some of these packages also perform more advanced site management such as checking for orphaned files, analyzing the document structure, generating visual maps, performing an image analysis, and checking the spelling of words.

CyberSpyder
Doctor HTML
Linkbot
LinkScan

ALLOWING DYNAMIC LISTING OF RESOURCES

For large organizations, the most effective approach to ensuring that up-to-date information is made available on the Web is to distribute the publishing of content to the individual departments within an organization. For example, at a large university, the department of Management Information Systems should be responsible for making its current events available on the Web, but not those events in the Physics department. A drawback exists for this distributed approach in that it becomes more difficult to centralize information. What if a visitor wants to find all special events taking place during the last week of a given month? They would be required to visit every departmental Web site at the university. A centralized listing could be created, but even adding URLs to this list may quickly become a time-consuming task.

To overcome the retrieval problem associated with distributed resources, a HTML form and a corresponding CGI script have been designed that allow dynamic submission of resources as shown in Figure 2. Using this interface, events can be added without any human intervention. To submit an event, someone fills out the description, specifies the URL containing more information, and then selects the date of the event. When finished, the event is instantly added to the master listing of all events. Rather than one person being responsible for publishing all this content, the department sponsoring or conducting the special event performs the publishing.

While this form and its accompanying scripts were designed for listing special events such as workshops, presentations, seminars, lectures, exhibitions, it easily can be modified for listing other resources. The source code is divided into two scripts and is now available in the public domain. The first script (verify-information.pl) verifies that the information the user entered is correct. The second script (insert-URL.pl) adds their entry to the master listing of special events. Security measures can easily be integrated with the form and CGI script to 1) limit who can submit resources, and 2) restrict the URLs that can be listed. For example, you may want to limit links to URLs within your own organization. Another approach to allowing visitors to contribute content to a Web site is to incorporate web-based discussion software such as NetForum and HyperMail.

List Your Special Event     Directions

Description:
URL:
   
Date: (start date for multiple day events)
    Month:   Day:   Year:
   
End date: (multiple day events only)
    Month:   Day:

Before continuing, please read keeping this service available.


Figure 2: HTML form for dynamically listing special events.

CONCLUSIONS

Because of the dynamic nature of the Web, maintaining a site can quickly become a very complex and labor-intensive process as structure and content are updated. To help automate this update process, this paper explored methods and software that can help re-do the look of pages, identify broken links, and distribute the process of adding content to a Web site. By incorporating these techniques into a site, you can begin to automate and thus simplify Web site maintenance.





Powered by Sphider