CHAPTER 1
An Introduction to Web DesignTOC



Consider the SourceTOC




The simple structure of the World-Wide Web along with its portability has already revolutionized computer science and its application to everyday life.

One of the unique features of the World-Wide Web is the open nature of information transfer. By an open system I mean that the system allows the weblian to easily access any participating server in the entire world. Each server, in turn, may contain a vast system of webpages with valuable information. The world of information suddenly opens up before us. Is it a yawning chasm, or a creative new World-Wide-one-room schoolhouse? It is both and this is the paradox. The World-Wide Web has grown at a rate that must seem unbelievable to its original developers, and with this uncontrolled growth there have emerged some problems.


Information PagesTOC

There are many different types of web pages. One predominate design type is the web page which is designed to catch someones fancy. This sort of page will use graphics, fonts, animations and the like to draw the user in.

Another type of page is an information page or infopage. The infopage will be designed to make access to the available information as easy and effortless as possible.

To be a sucessful designer entails avoiding some pitfalls that are not always apparent to the designer.

  • Client browsers may use different fonts or may not interpret your fonts correctly.

  • Client machines use different graphic screen sizes.

  • Client browsers may or may not use the colors or the color scemes you design.


Some of these problems can be overcome by viewing your web designs on several different machines and browsers, but this is time consuming. I have listed here a few simple tips which can help.

  • Try to keep the view area less than 640 pixels across. This can be set by a Width=640 statement in the TABLE tag. You might also use a percent statement such as width=80%. I prefer the pixel statement because you tend to get the same look from machine to machine.

  • Avoid using the FONT tag. Obviously the FONT tag gives you more ability to express yourself. It is certainly more important if you are designing an eye catching page. Many older browser dont support this tag and different browser will handle the tag in a different manner. This is even true for the standard fonts < H1 > ,..., < H6 > . In addition clients can change the look of the fonts on their browsers to suit their tastes.

  • When designing pages with color, care should be taken. An example of this is given by the Table of Contents for this set of notes. I originally designed the fonts inside a green box to be white and I designed the background color as white. But a browser that does not allow for color in tables will simply place a white font on a white background.

  • A simple rule of thumb is to design info pages as simply as possible. This book design is a simple one. The width is 640 pixels the background is white the text is black the links are standard colors and only the standard fonts are used. But in this case the only design criterion is readability and the transfer of information.

  • I have used the same design concepts for the Mathematics Department webpage. The pages are not fancy and are not particularly eye catching, but the purpose is primarily to transfer information easily and quickly. But this does not mean that sophisicated pages are not possible. I have used map techniques on the Mathematics Department faculty-staff picture and linked faces with names on the departmental list. I have used the same procedure to create a simple campus tour.

One approach to make a page more interesting is to use either java or javascript. The same design problems will occur when one uses javascript. Namely, not all browsers handle javascript in the same way. So when you design a page you may be designing it for one kind of browse. Microsoft and Netscape have different versions of javascript. One must either write the code to be performed on both browsers or use a trick to filter the clients and route them to different pages. We will discuss this in more detail in the ensuing chapters.

What is the UNIX Philosophy?TOC



One might say that the era of open friendly computer systems was born with UNIX. One would be wrong to say so,... yet there is more than a little bit of truth in the saying. There is probably no question that the World-Wide Web is the child of the UNIX philosophy. One of the major components of the UNIX operating system is the open nature of the filing system: the ease with which files can be shared as well as the ability to keep some files locked up and away from prying eyes. Many persons use UNIX without any knowledge of these capabilities. The typical user may find themselves using a UNIX server without any idea that the system is not dedicated to their own individual needs. The beauty of UNIX is that a user might feel this way. The truth is that the system has many features which are definite clues to the multi-user facilities of UNIX. In most cases, your UNIX server will not provide you with a convenient word processor. The reasons for this are many:
  • The system has many different printing ports.

  • The UNIX server has many different terminal types accessing it at the same time. Consequently, it is best for the UNIX server to only transfer ASCII-type file information back and forth between the server and your computer.

  • The UNIX server has many different clients. Each client uses some of the computing time. The more time spent with each client, sending special graphics files for example, the more time you will have to wait to be served.

Perhaps the major reason that there are not convenient word processors on UNIX machines is that, up until recently, UNIX machines were mostly used by computer enthusiasts with a great deal of patience. There are some ways to get around the lack of easy-to-use editors. One is to use your browser's e-mail capabilities to send files to your email account. Then save the files and strip the headers. That is: strip the address and subject e-mail information. Another way is to edit on your personal computer and the transfer files using an ftp utility. Finally, if you are a patient person you can learn to use vi. This chapter is mainly for those who have neither the time nor the inclination to buy a UNIX or vi manual in order to learn all the right stuff.

What is a Server?TOC



A server is to the computer network like the heart to the body. A server is a computer which is primarily dedicated to storing and distributing files, and running computer applications over a network. The advantage of using a computer application from a server is readily apparent to anyone who has tried to keep the software in a local network up-to-date. It is a tedious and thankless job to go from one machine to another installing the same software. If the software is accessed over a network, then it requires only one installation. This is a great time saver.

Once a file or program is installed on the server, anyone with the proper authority can access the information or program. Whenever you access a distant webpage you are using a server, or perhaps a series of servers.

Using a server is a little like going to eat at a restaurant. If the restaurant is busy, you must wait in line. This is called a queue in computer lingo. Finally, you are seated. The server awaits your request. Over a network, you make a request by moving your mouse or striking your keyboard. The request is then written down on a pad of paper by your server (or put another way, the computer stores your request in a buffer). The server then takes your order into the kitchen for processing.

Sometimes the restaurant is very busy. The server may not be able to attend to your requests quickly. This can also happen with computer servers. You may find yourself typing into your server, while at the same time nothing appears on the screen. This can also happen on your personal computer, if it is doing several tasks at once.

We imagine that when we type something at the keyboard, there is a direct link from the keyboard to the screen: just like a mechanical typewriter. This is not the case. Whenever you type on the keyboard, the information goes to a buffer. This is a temporary storage mechanism. The information in the buffer is then processed by the computer, usually as letters printed on your screen, or by the movement of the arrow on your screen.

If the server is busy, or if you have a low priority in the computer queueing system, then your request is not processed immediately and you must wait for your action to appear on the screen. If you are editing a document over the network, then each time you press a key on the keyboard, you are requesting a service. The keyboard request travels across the network to the server which then recognizes the request and sends a signal back to your computer. Your computer processes the signal and then puts the letters on your screen. This process is called echoing.

On most servers, the more requests you make, the quicker the server responds ... up to a point. If you leave your editing process for a short time, you may notice that when you return, you can type several letters before the server will echo the letters back to your screen.

A Note on BuffersTOC

    A buffer is a temporary data storage system: a kind of holding tank. The most efficient transfer of data is in bundles. Suppose you are typing at a UNIX prompt. The letters you type are placed in a buffer and echoed back to your screen. The command you type is not executed until you hit the " enter" key. The use of buffers makes multi-tasking over networks more efficient.

    A Note on The Enter KeystrokeTOC

    To avoid confusion, I will use the symbol "¬ " throughout, to denote the enter keystroke.



What is a Client? TOC



A client is the person, or computer system, making a request from the server. The use of the term client is to indicate the relationship between the two computers in a given interaction. The client is dependent on the server for obtaining the resources needed and for carrying out some operations.

Operations that are server-side require the server to do most of the work. The client simply receives the results of the work. Editing documents using an editor like vi is primarily a server-side relation.

Operations that are client-side require the personal computer to obtain information from the server, and then perform the task of making that information usable. The concept of the World-Wide Web involves participation by the server and the client. The use of a browser is primarily a client-side relation. This does not minimize the importance of the server in the interaction.

The future of client/server computing lies in client-side applications which make UNIX invisible. This does not mean that the UNIX system will not be used, it only means that the average person will be unaware of how they are using UNIX and telnet commands. A good example of this kind of distributed computing is the World-Wide Web browser. Another example is afforded by transparent ftp programs. These ftp programs will be discussed later in the chapter.

Using the Directory SystemTOC



Most directory systems have a parent/child relationship. In this sense, the directories on the machine, and in particular on your account, are like a family tree. When you log onto your UNIX account the computer places you in your HOME directory. On a UNIX machine you can always go HOME by entering

  • $ cd home ¬

    where $ represents the UNIX prompt sign and where cd means change directory.

    Starting in any directory, and assuming that you have the system's permission, you can move to the parent directory by entering

  • $ cd .. ¬

    This means change directory and go to the directory which contains my current working directory. You can create a directory in your HOME directory, simply by entering

  • $ mkdir www ¬

    This action will create a child-like-directory, in your HOME directory, called "www"

    A child-like-directory is usually called a subdirectory. This simply means a directory which lies below on the family tree of the directories.

    To see a list of directories and files enter at the prompt:

  • $ ls -a ¬

    This action will list all files and directories along with their characteristics. Another way to list is

  • $ ls -l ¬

    which lists everything along with their characteristics except the hidden files .

    If you get lost wandering through your directories, enter

  • $ pwd ¬

    at the prompt to print your working directory. Remember, on UNIX, unlike real life, you can always go home.



    Using LINUXTOC

    We will be using LINUX as our basic operating system in this workshop. Most of the information given here is easily transfered to another operating system. We may choose to compile, edit, and run java programs from a command line in Linux. We will be using the kde window system. Is is again possible to edit, compile and run java programs using a terminal emulator and a command line, but we will be using the emacs editor in kde which will give us a fairly nice integrated system. If you wish to compile a java program using the command line simply type at the prompt:

    $ javac filename.java ¬


    to run a java program that is compiled (into a class ) - type at the prompt:

    $ java filename ¬



    We can view files in LINUX/kde by clicking on the home/folder icon in the task bar. Then navigate as you would in any window-folder menu system. Open the home directory using the window-folder icon. We can make a directory to contain your files with a right click (no the other right!) in the folder window. Choose New and Folder. Name the folder JavaPlain. As an example use any ASCII type editor to create the following file in your JavaPlain directory:

    public class First{
        public static void main(String[] args){
          System.out.println("Good Morning America");
          System.out.println("and all her ships at sea !");
        } // end main
    } // end class

    Now compile and run this simple program. Next perform a right click on the icon for the file you have created and choose the emacs editor. You should be able to compile and run using the menu system in emacs. Compile and run the following program, but be careful.

    class Factorials {

    static int computeFactorial(int k) {
        if (k < 0) return -1;
        else if (k == 0 || k == 1) return 1;
        else return k*computeFactorial(k-1);
      }

    public static void main(String[] args) {
      int n;
      n = Integer.parseInt(args[0]);
      for (int i = 1; i <= n; i++)
        System.out.println(i + " factorial is " + computeFactorial(i));
      }
    }

    Assignment 1

    1. Write a short java program that sums the first n integers.
    2. Write a short program that reads a message and prints out a message.

    And now ...

    See the director of the World-Wide Web consortium and founder of the concept of the web at

  • http://www.w3.org/pub/WWW/People/Berners-Lee/

    and find out about the history of the World-Wide Web.

    This is a beautiful example of the power of java on the web to teach geometry.

    http://aleph0.clarku.edu/~djoyce/java/elements/elements.html


    References TOC


    		•