Build a Website: Advanced Web Tools

HTML has come a long way since it was first developed, giving Web designers many more graphical layout options. However, HTML by itself provides almost no interactivity beyond the ability to "jump" between sections of a document or from one page to another using hyperlinks.

Nevertheless, there are ways to turn a static site into a dynamic one, enabling visitors to do many useful things. For example, readers can search for information in a database or select items from a form and get a customized reply. One way to accomplish this type of interactivity is by using a Common Gateway Interface script, commonly known as a CGI or a gateway script.

Simply put, a gateway script is a program that runs on a web server and is triggered by input from a browser. The script is usually a link between the server and some other program running on the system, like a database. Most of the work happens on the server, behind the scenes. You only see the result. The beauty of CGI is that it allows two-way communication through the use of HTML.

The web page is programmed in HTML and the gateway script usually is written in a programming language like C or Perl. Gateway scripts can be used for a wide variety of Web applications, ranging from the very simple to the complex. For example, a simple CGI script can track the number of site visitors with a page counter or it might automatically update each page with the local time and date.

The most common use of CGI scripts is for implementing image maps and forms. An image map is a graphic image with distinct areas that have different URLs associated with each one. A gateway script for an image map keeps a list of the coordinates associated with the URLs. When you click on a particular region of the image, the browser feeds the coordinates to the server, which uses a script to locate the correct URL and return the appropriate HTML page to the browser.

The real value of gateway scripts, however, is realized through the use of online forms. These can range from simple e-mail forms or data entry boxes for searching, to complex surveys with multiple choices or purchase order forms that process orders online. A form is set up in HTML in a way that lets someone enter information by selecting buttons, pulling down or scrolling through menus, entering text into data entry fields, or combinations of all of these features.

At the bottom of the form there are usually two buttons, one to reset the form and one to submit the data. The Submit button sets the process in motion. It sends information to the server pointing it to the CGI directory and to the appropriate script to run the procedure.

Here's the sequence of events:

1.A URL points to a gateway script the same way it points to any other document on the server. The browser requests that URL from a server just as it would any other document.

2.The server receives the request, notes that the URL points to a script (based on the location of the file or based on its extension, depending on the type of server), and activates that script.

3.The script performs some action based on the input from the browser (for example, querying a database, calculating a value, or calling up some other program on the system).

4.The script formats the result in a manner that the server can understand.

The server receives the result from the script and passes it back to the browser, which formats and displays it for the reader.

Each script has a special header that gives the server, and eventually the browser, information about the output it is sending. That way, it knows how to properly format the output at each step of the process. The header isn't actually part of the document and it's never displayed anywhere.

CGI is widely used on the Web and probably will continue to be for some time to come. However, new tools promise to open the doors to more sophisticated ways of expression and communication, taking interactivity on the Web to another level.

Another widely used tool is a product called Flash from Adobe, Inc. Flash is an animation and authoring program specifically developed for use on the Web. Viewing Flash animations requires a plug-in, a software program specifically designed to work with an existing program, in this case, your web browser. Flash plugs into your web browser and plays animations embedded on a web page.

Internet Explorer, Firefox and Safari all support Flash and recent versions come bundled with the Flash player. If you don't already have it, you can download it from the Adobe website. Once you've installed it, visit the rapidly growing list of Flash showcase sites.

Although Flash represents another milestone for the World Wide Web, the real breakthrough in interactivity and multimedia content delivery is a programming language called Java. Developed by Sun Microsystems, Inc., this powerful object-oriented programming language uses a Java-enabled web browser to run interactive applications.

Like a gateway script, Java is activated by a special HTML tag. Unlike gateway scripts, which require information on the server to run applications or process input, Java enables developers to create content that can be delivered to and run by users on their computers. This software supports anything that programmers can dream up, from spreadsheets and tutorials to interactive games and animation.

A well done Java application running on a web page can be enormously engaging. Rather than just providing text, sound, images, or videos, a Java page offers a place to play, learn, communicate and interact with others. Java turns a web page into a software delivery system.

How does it work? Java makes Java-enabled browsers "smart" enough to interpret and execute the content, instead of relying on servers to provide information and functionality. When downloading a web page that contains the special hypertext tag called "APP," the Java-enabled browser knows that a special kind of Java program called an applet is associated with that page. The browser then downloads a file of information that describes the execution of that applet. This file of information is written in what are called bytecodes. The browser interprets these bytecodes and runs them as an executable program on the user's computer. All of this downloading and execution happens automatically. When the browser requests a web page, here's what happens:

1.The HTML document is returned to the user's browser. The document contains the APP tag, which identifies the applet.

2.The corresponding applet bytecode is transferred to the user's computer. This bytecode had been previously created by a Java compiler using the Java source code file for that applet.

3.The Java browser on the user's host interprets the bytecodes and provides the display.

4.The user may have further interaction with the applet without further downloading from the provider's web server. This is because the bytecode contains all of the information necessary to interpret the applet. So now, instead of the server computing a result, the browser becomes the mechanism for computation.

Last update: Jan 12, 2010