The first step in designing web pages for the GSAP site is to start an account on the GSAP web server, brooklyn.arch.columbia.edu. This account is different from your personal email account (cunix.cc.columbia.edu) and your studio/cad account (manhattan.arch.columbia.edu). If you have a cad account, you have automatically been given a corresponding web account on the brooklyn server, your brooklyn account will have the same login and password as your manhattan account. If you wish to publish your studio work online, studio accounts made are available to all studios, if your studio does not already have an account contact the editor of the GSAP-online at editor@www.arch.columbia.edu.

Writing HTML:

All of the web pages for the GSAP web site should be written to conform to standard HTML protocol. HTML documents are text files that act as meta-documents, creating multimedia pages on the web by referencing images, text, sound and video through the use of HyperText Markup Language. HyperText Markup Language is the universal language that makes the Web possible, being the only lexicon recognizable and readable by all web browsers irrelevant of computer platform. For basic information and resources about HTML refer to the HTML resources page

The easiest way to create HTML documents is using at text editor such as SimpleText, BBedit or Word (if using Word be sure to save your document in text-only format). When writing the HTML make sure all files that are referenced do not have a space in their name, HTML does not recognize spaces and files containing spaces in their names they will not appear on the web. After writing the HTML document, referencing all the desired images and files, save the file as text-only, adding a .html to the end of the file name. It is standard practice to name all files with a specific suffix, HTML files receive a .html, image files receive a .jpg or .gif, movies a .mv or .mov, at sound files .aiff or .wav. After completing your HTML document you can test it by dragging and dropping it onto any open netscape window.
the image.

Image Sizing and Formatting:

Images for publication will need to be specially sized and formatted for publication on the web, this is best done using Adobe Photoshop.

-Sizing:

The image resolution for web publication is 72dpi (the resolution of computer monitors), this is set under the Image--->Image size in Photoshop. The size of the image is variable depending on the desired layout, the critical factor when considering image size is loading time on the web. A large image will take substantially longer to load on the web than a similar image of smaller size. An image of 480 pixels by 500 pixels (the default size for Netsacpe windows) will take approximately 30 seconds to load on a 288 modem. Loading time is one of the largest constraints of web design though some problems can be alleviated somewhat by using progressive jpegs or interlaced gifs which will be discussed later. Two other considerations in image sizing are legibility and smaller screens. A medium needs to be struck between size and legibility with each image, an image that is too small often loses its legibility, because of the screen resolution. The obvious solution to this is to use a larger image, however besides the increase in loading time, a larger image can also lose legibility on smaller screens. On 14" and 15" screens most web browsers cannot fit images bigger 480x375 pixels in a window, making a clear reading difficult by forcing the viewer to pan around without ever getting a full view of

-Formatting:


There are two possible file formats for publication on the web, GIF (Graphical Interchange Format) and JPEG (Joint Photographic Experts Group). The fundamental difference between these two file formats are their compression ratios (actual size of file in bytes compared to size of saved file) and the color range that they support. The JPEG format offers a range of compression ratios, increasing in inverse relation to image quality, and supports any color palette, from millions of colors/greys to 256 colors/greys. JPEG works well on photographs and photorealistic renderings, but less well on line drawings and lettering. The GIF format has one compression ratio and one color format (indexed color), creating files larger than the same image saved using JPEG format. The GIF format does offer one advantage over the JPEG format, since it uses indexed color it functions well as a cross-platform format. Indexed color is calibrated to use the standard 256 color palette that is available on all machines and monitors, this guarantees that the color of the image will be same same irreverent of what computer of software it is viewed in. The JPEG format uses a color palette specific to the macintosh giving high quality color when viewed on the mac, however another computer using a different color palette mixes colors to approximate the macintosh colors palette, often giving a sickly or muddy color scheme. The best compression and color pallette varies per image and is best decided through simple trial and error, saving multiple copies using different ratios and palettes.

To create JPEG images use Adobe Photoshop and in the menu bar (the bar at the top of the screen) choose File--->Save As and choose JPEG from the pop-up format menu within the Save As dialogue box. JPEG images should always be saved with the suffix .jpg.

GIF images are also created in Adobe Photoshop, using two step process. The first step is to convert the images to indexed color by selecting Mode----> Indexed Color in the menu bar. After selecting Indexed color you will be presented with a dialogue box like the one below:

for best results choose 8bit/pixel Resolution, Adaptive Pallette, and Diffusion Dither. For higher compression and smaller files you can choose a lower bit/pixel setting for the Resolution.

The second step in creating a GIF image is to choose Save As under File----> Save As. in the menu bar. In the save as dialogue box chose Compuserve Gif from the file format pop-up menu. When saving a GIF image the file name should always be suffixed with .gif.

Progressive JPEGs, Interlaced GIFs and animated GIFs:

Some more advanced forms of image formatting are available that compensate for loading time by loading incrementally, or allow for small animations to be played by successively loading images. Interlaced GIFs and Progressive JPEGs are images formats that allow the image to load progressively, first loading quickly as a poor resolution image and then loading again at a higher resolution. Interlaced GIFs are supported by most web browsers and are the most common of progressive image formats, the Progressive JPEG is a newer format and is only supported by the most recent release of Netscape. Interlaced GIFs can be created from any GIF image using Graphic Converter. Progressive JPEGs can be created from any image in Photoshop 4.0 by saving as JPEG and choosing Progressive JPEG in the dialogue box.

Animated GIFs are GIF image files that contain multiple images that run sequentially making an animation. Animated GIFs allow you to embed small scale animation into a web page like standard GIFs and JPEGs, however they are not ideal for longer animations. For long animation the Quicktime Movie format gives greater compression and more freedom of design. Animated GIFs can be created using GIF Builder, available on Manhattan in the Applications folder. The first step in the creation of an GIF animation is to save each frame as an individual GIF, this can be done by exporting frames from an existing animation in Adobe Premier or by creating frames one by one in Adobe Photoshop. After creating each frame and saving them as GIF images, open GIF Builder and you will be presented with a window similar to the following:

To add frames to the animation choose
File--->Add Frame from the menu bar, the size of each image will be read and displayed automatically. The duration each image is displayed during the animation can be set in the Delay column by double clicking on the number corresponding to the desired frame and typing the delay time in 100ths of a second. The option to loop the animation a number of times or indefinitely can be set under Option---->Loop in the menu bar.

Once you have completed compiling the animation it can be viewed by selecting
Animation--->Start in the menu bar. If the animation is satisfactory it can be saved by selecting File--->Save As in the menu bar.

Uploading to the Server:

Connecting to the Server

After properly formatting your images and writing your HTML documents, they need to be put on-line by uploading them to the server using Fetch. Fetch creates a link between your personal computer and the server so that documents can be sent back and forth via the ethernet or modem. When you launch the program you will first need to specify the server and give your login and password in order to connect to the server, this is done through the dialogue box opened at startup (if this box does not appear go to File--->New Connection in the menu bar):

Enter brooklyn.arch.columbia.edu for the Host name, this is the name of the GSAP web server. Press Tab or click on the User ID entry blank to enter your login name (usually your first name or your Studio name). Press Tab again and enter your Password. Leave the Directory field in the form blank. After filling out the form fields press Return or click on OK with the mouse.

Navigating the Directory Structure

Once a connection has been established you will presented with a listing of your home directory, the window will appear similar to the one below:

All the files in your account will be listed, including the ones usually hidden to you (so do not delete any unfamiliar files because they may be essential). Navigating the directory structure in Fetch is similar to navigating through files on the Mac, double clicking to open folders and click once to select files (by holding down shift multiple files can be selected). To move back up in the directory structure use the pull-down menu above the directory list.

Uploading Files

Fetch can be used to both upload to (using Put File) and download from the server (using Get File). To upload a file to the server click on the Put File button and you will be presented with a dialogue box in which you can locate and select your file on your Mac. After selecting your file click on the Open button with you mouse and you will be presented with the following dialogue box:

In this box you can rename your file (remember no to put any spaces in the file name) and select the Format of the file. All text files and HTML documents should be uploaded using Text format. It is also suggested that all HTML documents be appended with the suffix .html so that it is easy to identify the file type.

Images should be uploaded in the Raw Data format, you can select Raw Data by clicking on the Format pop-up menu. Images should be named with a .jpg or .gif suffix. After choosing a proper name and format click on OK or press Return to upload you documents. The cursor should turn into a icon of a running dog while the files upload.

If you are uploading several files or a folder of files, its is easier to upload them all at once using the Put Folder-Files command instead of uploading them one at a time with the Put File. Put Folder-Files is found in the menu bar under Remote---->Put Folder-Files. You can select all of your files and folders at once and then uploading, setting the format for all text and image files.