You are here

Programming Methods for the World-Wide Web

Author(s): 

Brian M. Tissue
Department of Chemistry, VIrginia Polytechnic Institute and State University
Blacksburg VA, 24061-0212
tissue@vt.edu

Note: This article was scanned using OCR from the Fall 1996 CCCE Newsletter. Please contact us if you identify any OCR errors.
 
Introduction
          This article provides a basic overview of several common programming methods that are used to create Interactive material for the World Wide Web (WWW).1 Interactive Web pages can be textual, calculational, or graphical; and can serve as on-line versions of tutorials, homework problems, take-home exams, and other educational tools. The largest distinc-tion between the different interactive methods is that some are client-side, in which all processing in done on the client computer, and others are server-side, in which all processing is done on the WWW server. Client-side methods include client-side image maps, JavaScript,2 and Java. The question-and-answer information for client-side image maps and JavaScripts is contained in the HTML file, and users have access to the information by looking at the HTML source code. Server-side meth-ods include server-side image maps, and scripts or programs called through the Common Gateway Inter-face (CGI). Server-side methods are most appropriate for delivering interactive exercises that access existing databases of information, or require tracking or grading capabilities. Client-side methods are most appropriate for practice exercises. Client-side methods have a ma-jor advantage in delivery speed over server-side meth-ods in that they do not make a new connection and transfer data over the internet for the data processing step. This consideration can be very important for inter-active material that requires many repetitive actions. Combinations of client-side and server-side methods are possible. For example, a client-side JavaScript can check the format of data entry before it is submitted to a server-side program for evaluation.
 
Hyperlinks
          Multiple-choice exercises can be produced with-out any programming by simply using hyperlinks for each answer choice. When a choice is selected, the link retrieves a new HTML page that can indicate if the choice was correct or incorrect, and can also provide an explanation or a retum link to try the exercise again. An extension of this simple hyperlink method is to create a graphical multiple-choice exercise using a clickable image map. Although this approach is simple, It can create a large number of files, requiring careful file management. The major limitation of using only hyperlinks is the inability to create interactive materials that require relational or calculational evaluation of a user's input. Such exercises require a programming method that can be interfaced to the Web.
 
Image Maps
          Clickable image maps are in-line images that contain active areas, and provide a very simple means of creating interactive graphical components on a Web page. Clicking on an active area calls a specified URL, which can be a hyperlink to a different part of the Web page or to a new HTML file, or a call to a JavaScript function. There are two types of image maps: client-side and server-side, which differ in the placement of the information specifying the active areas. The client-side map information is contained in the same HTML file as the Web page that is being displayed, and the server-side map information is in a map file on the WWW server. Support for client-side image maps was imple-mented in Netscape Navigator 2.0 and compatible browsers. Client-side maps operate faster than server-side maps because they do not have to reconnect to the WWW server for each click on the image map. Client-side maps are also easier to develop because the files can be tested and edited on a local disk before transfer-ring to a WWW server. Server-side maps have the advantage that the map information is not available to the user, so they can be used as interactive graphical exercises in on-line testing material. Clickable image maps can be created manually by typing in the coordi· nates of the active areas, but are easily created using one of the free or inexpensive image map programs that are available on the Web, such as Map This or Mapedit.
 
• Image map Authoring Guide and Tutorial Sites, http://www.cris.com/-automata/tutorial.shtml.
• lmagemap Help Page -Instruction, http:// www. hway .netlihip/.
• MapThis Home Page, http:// galadriel.ecaetc.ohio-state.edu/tc/mV (Win32 version only).
• Mapedit, http://www.boutell.com/mapediV (Win-dows and UNIX versions only). 
 
JavaScript 
          JavaScript is an object-based scripting lan-guage that is supported by Netscape Navigator 2.0 and equivalent browsers.3•4 Internet Explorer supports VBScript and JavaScript, although the degree of lan-guage compliance between Internet Explorer and Netscape Navigator is not 100%. Netscape Navigator 2.0x does not print a Web page generated by JavaScript commands, but Netscape 3.0 and compatible browsers will print script-generated pages. JavaScript is like other scripting languages in that it is fairly easy to use, and allows Web authors to write programs without a full-featured compiled language. The JavaScript code is contained in the HTML document, usually in the header section between <SCRIPT> ... <ISCRIPT> tags. The JavaScript is interpreted by the user's browser when a new HTML file Is loaded, and any JavaScript state-ments that write to the page are executed before the HTML code in the body of the document is interpreted and displayed. JavaScripts can recognize and respond to a number of user events such as mouse clicks, form Input, and page navigation. Form elements such as radio buttons and text boxes allow users to enter data, such as selecting choices or typing text, that can be evaluated by a JavaScript function, which then returns a response. (The fonn elements are the same as used to submit information to a WWW server for a CGI program to evaluate.) The disadvantage of using JavaScript alone is that no results from the user's actions can be saved to the server. 
 
• JavaScript Authoring Guide, Netscape Com-munications Corp., http://www.netscape.com/eng/ mozilla/Gold/handbook/javascript/index.html.
• JavaScript Index, Andrew Wooldridge, http:// www .c2.org/-andreww{javascript/.
• The Complete Idiot's Guide to JavaScript, Aaron Weiss & Scott J. Walter, http://www.winternet.com/ -sjwalte r/javasc ript/index .htm l.
• Interactive Exercises for On-Line Education, http :1/www .chem. vt.edu/chem-ed/CH P/scripts/ (JavaScript and Perl examples). 
 
Common Gateway Interface 
         The Common Gateway Interface (CGI) is a standard protocol that allows information to be passed between a browser program running on a client com-puter and an application program running on a WWW server. When a browser requests a •.cgi file, the server executes the script or program that is contained in that file. The CGI interface also passes any data that was submitted from the client to the program. The program evaluates the user input and returns a response. CGI can interface to any language that can be executed on a WWW server, such as CIC++, Fortran, TCL (Tool Command Language), PEAL (commonly called Perl, although it is an acronym for Practical Extraction and Report Language), VisuaiBasic, HyperCard, and AppleScript. Non-compiled languages, such as PERL, are usually preferred due to their ease of modification, maintenance, and debugging (PEAL is also free).O CGI programs are executed on the WWW server using the resources of the server computer. Processor-intensive applications or the ability to serve many clients simulta· neously can create a heavy load for a WWW server, ; requiring a powerful computer. The advantage of the CGI method is the ability to use sophisticated programming languages, and to have access to the server's hard disk to use existing databases or log user responses. 
 
• The Common Gateway Interface, http:// hoohoo.ncsa.uiuc.edu/cgil.
• The Perl Language Home Page, http:// perl.com/perllindex.html. 
 
Java 
           Java was developed by Sun Microsystems, Inc. to create a simple object-oriented and platform-independent programming language to distribute ap-plication programs over the Web.e Java programs are called applets, and are included in HTML code. To create a Java applet, you write a Java program and compile it into a file of Java bytecodes, and include a reference to the applet using <APPLET> ... <IAPPLET> tags in an HTML file. When a Java-enabled browser encounters the applet tags, the browser downloads the specified Java applet, interprets the Java object code, and runs it in a window on the browser screen. Applets are stand-alone programs that can accomplish a broad range of functions such as animation, calculations, graphing, etc., and could find wide utility in the creation of interactive learning material. However, Java is a highly syntax-dependent language, requiring some programming skill by the applet author, and the lan-guage is still at an early stage of developmenF Microsoft is developing asimilar technology called ActiveX. Cur-rently Internet Explorer 3.0 supports Java and ActiveX but Netscape Navigator 3.0 only supports Java. 
 
• Java -Programming for the Internet, http:// java.sun.com/.
• All About Java(tm), http://java.sun.com/ aboutJava/index.html.
• Java(tm)/HotJava(tm) Frequently Asked Ques-tions -Index, http:/{java.sun.com/faqlndex.html.
 
VIsualization Methods
          There are several methods for viewing and manipulating 3·0 structures on the Web. Simple 2-0 and 3-0 visualization can be created with drawing programs and converted to simple or animated im-ages. The following methods include some level of interactivity, in that the user can manipulate the 3-0 object, or use the visualized object in an interactive exercise (e.g. hyperlinks in VRML or QTVR). Various representations of molecules; ball-and-stick, space-filling, etc.; in Brookhaven protein data bank (*.pdb) and other file formats can be displayed and manipu-lated with the Rasmol program. RasMol can also be set up as a helper application for a browser. Alternatively, an evaluation copy of the Chime Plugin for Netscape Navigator displays • .pdb and • .xyz files, and provides most of the functionality of the stand-alone RasMol program. An enhanced version of the RasMol program allows viewing of multiple molecules in the program window, bond rotation, and other features. 
 
• RasMol home page, http://www.umass.edu/ microbio/rasmol (Win, Mac, and UNIX versions).
• UCB ENHANCED RASMOL, http:// hydrogen.cchem.berkeiey.edu:BOBO/Rasmol/
• MDL Home Page (Chemscape Chime plug-in), http://www.mdli.com/ 
 
          Virtual Reality Modeling Language (VRML) al-lows visualization and manipulation of 3-0 objects in a window on a Web page. The user can change the position from which the object is viewed, including zoom-i.ng in and out. VRML objects can Include hyperlinks making it possible to use them as interactive 3-0 exer-cises. Apple has developed similar panning and linking capability for Quick Time movies called QuickTime VR. VRML files have a •.wrt extension and QuickTime VR flies have the same • .mov extension as regular Quick Time movies. VRML appears to be used mostly for 30 render-ings of objects, and QuickTime VR for panoramic scenes created from video. 
 
• VRML Architecture Group, http://vag.vrml.org/.
• Welcome to vrml.sgi.com, http:f/vrml.sgi.com/.
• Apple QuickTime VA Home, http:// qtvr.quicktime.apple.com/. 
 
Summary 
         The following table summarizes the methods discussed above and appropriate uses. Java and JavaScript are complementary tools. Java provides so-phisticated programs that run in a separate window on the browser screen, and JavaScript provides a simple language that interfaces with Web page elements such as forms, etc. For security reasons, neither Java nor JavaScript can write to a user's hard disk. The CGI interface allows utilization of sophisticated programming languages and access to the server hard disk. 
 
 
          This article has attempted to present an overview of Web programming methods. There are a number of other software tools for visualizing and manipulating objects and data that were not dis-cussed in this article. A couple of noticable ones for education are the Shockwave plug-in that allows Macromedia Director, Authorware, and Freehand files to be viewed from a browser window, and Mathcad 6.0 or Mathbrowser for viewing mathcad worksheets. 
 
• Macromedia: Shockwave Center, http:// www.macromedia.com/shockwave/.
• Mathcad 6.0 Animation Gallery, http:// www.mathsoft.com/60dir/animatio.htm.
• Mathbrowser Home Page, http:// www.mathsoft.com/browserlindex.html. 
 
References
Note: all URLs listed in this article were verified 9/16/ 96. 
 
1. A good starting point to find programming and Web tools is: Yahoo! Computers and lnternet:lnternet:World Wide Web, http:// www. yahoo.com/Computers_and_lnternet/lnternet/ World_Wide_ Web/. 
 
2. Not to be confused with a server-side version of JavaScript, which is under development. 
 
3. Mark. C. Reynolds and Andrew Wooldridge, Spe-cial Edition Using JavaScript (Que, Indianapolis, IN, 1996); ISBN: 0-7897·0789-6. 
 
4. Aaron Weiss and Scott J. Walter, The Complete ldiotfs Guide to JavaScript (Que, Indianapolis, IN, 1996); .ISBN: 0·7897-0798-5. 
 
5. Till, D. Teach Yourself PERL in 21 Days; Sams Publishing: Indianapolis, IN, 1995. 
 
6. There are lots of books on Java (and the other topics in this article). O'Reilly sells several Java 
 
books at several levels of expertise; see: Java, http:// www.ora.com/catalog/java.html. 
 
7. JavaScript is also at an early stage of development, but uses less rigorous variable typing and is therefore more forgiving for imperfect program code. 
Date: 
10/20/96 to 10/24/96