Questions and Answers

Q: What are some common Web design mistakes?

A: According to Infowrold (Dec. 15, 1997) the top 10 mistakes in Web design are:

1. Using frames
2. Gratuitous use of bleeding-edge technology
3. Scrolling text, marquees, and constantly running animations
4. Complex URLS
5. Orphan pages
6. Long, scrolling pages
7. Lack of navigation support
8. Non-standard link colors
9. outdated information
10. Overly long download times

Q: How does an image map (in HTML) work?

A: The browser takes a mouse click position and goes to the hyperlink of the first area that matches the mouse position. If you place a rectangle area that covers the entire image at the end of the list of areas in an image map, it acts as the default aera.

A: Try HTML Tidy and W3C XHTML Validator.

Q: How do I set file and directory permissions for Web access?

• All directories leading to it must have o+x permission.
• The file itself must have o+r permission for it to be readable from the Web and o+w permission for it to be modifiable from the web.
• For file upload from the Web, the target directory to receive the uploaded files must have o+rwx.
• If one wishes to allow the web server to list the names of files contained in a directory, then the directory must have o+rx permission.

Q: What are some networking speeds?

A: Networking speeds are measured in bps (bits per second).

• Local Area Network speeds: 10--100 Mbps, newer LAN (1000 Mbps)
• Wide Area Network speeds: T1 (1.5 Mbs), T3 (45 Mbs), OC-3 (155 Mbps), OC-12 (644 Mbps), OC-48 (2.5Gbps by year 2000)
• Modem speeds: up to 56 Kbps through phone line (1998) >1 Mbps with cable (e.g. Road Runner from Warner Cable)

Q: Why doing a content-only site first?

A: Without the content, the site cannot very well be linked, laid out, or visually designed. It is like doing makeup on a face. The face is the content and without a face where do you apply the makeup?

If you do your site layout and navigation and visual design without the complete content ... you are more than likely to fit the content into your design. This is akin to cutting the feet to fit the shoes.

Q: Are there good Web style guides?

A: Yes, a good style guide is from the Yale Center for Advanced Instructional Media (C/AIM). Yale C/AIM Web Style Guide by Patrick Lynch and Sarah Horton.

Also see the short style guide by Gareth Rees and Sun Micro System's Web Style Site

Q: What are some typical monitor screen resolutions?

A: Screen resolution are measured in horizontal X vertical pixels (picture elements). It can vary from 640x480, 800x600, to 1600x1200. A popular setting is 800x600. Most PC's allow you to set the resolution from the "control panel". Just remember the aspect ratio is 4:3.

Q: How do I transfer files from a MAC to other non-MAC computes.

A: (1) By FTP (file transfer by network): To FTP files from a Mac, you can use a freeware program called Fetch. A copy of this application is in Art Lab 113 and students can get it from the instructor during class. Or they can go to the site below and download it themselves.

(2)Transferfing files using floppy disk from Mac--this is a two-fold issue (a) all Macintoshes will read PC floppies so all students should purchase "PC formatted floppies" so that they could be read on both platforms. PC users can buy a fairly inexpensive or free file converter but genearally decide not to do so the the burden of file transfers falls on the Mac users.
(b) Text, in general should be saved as .txt(generic ASCII) Graphics should be saved in any format compatible on both platforms such as jpeg, gif, eps or tif.

Q: How do I make colors look good on my PC.

A: From the control panel you normally can select 16, 256, 16-bit, and 24-bit colors for you color monitor. Most browsers don't require more than 256 colors. Most monitors can only display up to 16-bit colors. But the RGB color notation can specify 24-bit colors, the 24-bit is also referred to as "true color".

Q: What is the purpose of the width and height attributes of the img element?

A: An image, in .gif, .jpeg or some other format, will already have its width and height fixed. To find the width and height of an image, use any image processing tool such as Photoshop, Paintshop. On LINUX systems, the command

xview -verbose iamage_file

If you set the width and height attributes differently from the width and height of the image file, the browser will scale up or down as appropriate. But the visual effect can be very rough. If you give the width and height attributes then a browser can reserve the correct display area and proceed to layout the page without waiting for the loading of the image file to finish. This can make Web pages much faster to load.

Q: Can you tell me a few things about colors?

A: That is a huge question. But you can begin with the number of different colors in a raster image:

• Monochrome -- black/white
• Grayscale -- different levels of gray (up to 256 shades)
• Indexed -- Each pixel color is indicated by an index into a color palette. The palette may contain a set of up to 256 colors. The smaller the palette the fewer bits are needed for each index.
• High Color -- thousands of colors 15 to 16 bit per pixel
• True Color -- 16.8 million colors, 24-bit per pixel

Q:What is DHTML?

A: Dynamic HTML is a term not a mark-up language like HTML. DHTML refers to the combined use of HTML, client-side Javascript (or some other client-side scripting), and style sheets to achieve the dynamic generation of HTML code and animation effects by the browser. IE and Netscape offer incompatible ways to support DHTML. With the ECMAScript Standard for JavaScript, CSS, and the W3C recommendation on the DOM (Document Object Model), cross-platform dynamic HTML may be a reality soon.

Q: What is a color palette?

A: Computer displayed color images are usually limited by the number of different colors that can be used SIMULTANEOUSLY. The number could be 2 for B/W, or 16, 256 (gif), etc. But an image or the displaying of the image can choose WHICH 2, 16, or 256 out of the possible colors to use.

A color palette is nothing more than a table of the different colors used in an image. Color palettes can be saved into files (in MS/Windows format or some other custom format) for use later for other images. Raster image manipulation programs, such as Photoshop, allows you to create, edit, manipulate, and save palettes for images. For example, in reducing an image to 16 colors, the progam can compute a "best fit" set of 16 colors for the image at hand, or you may pick a standard 16-color palette such as the Windows color palette.

Q: What are the 16 predefined colors for the Web?

A: The following table shows the name and the RGB setting of the 16 colors common to most browsers on the Web.

Q: What is Duotone?

A: A grayscale image may have 256 shades. But normally a single color can only accommodate 50 shade levels. By adding colors the number of different shades increases by 50 per color. A Duotone involves any two colors, tritone 3 and quadtone 4 colors. The latter two are less frequently used. Convert a grayscale to Duotone to add richness. Color images must be first converted to grayscale before turning into Duotones.

Q: Why does graphics prepared on one computer tend to look different on another?

A: Computer monitors from different manufactures have different electronic and screen properties. Contributing factors are the color characteristics of the CRT screen and the non-linear relation between perceived brightness and the voltage applied to generate the light on the screen. The brightness is proportional to the applied voltage raised to a power. This power is know as gamma. Typical CRT gamma value is close to 2.5 but can vary slightly. Strictly speaking, the red, green, and blue components of the CRT can have slightly different gamma values. Some monitors, notablly from Mac and SGI, correct this non-linearity giving a gamma value of 1.

Because of the difference in the gamma value, an image that is just right on a Mac will look too dark and more reddish on a PC (with gamma 1.8 say). It is advisable to view your image on different platforms and make some compromise.

An image file can contain the gamma and other color parameters of the platform where the image has been generated. This can allow automatic gamma and color correction on platforms where these parameters are different. GIF and JPEG, the two standard image formats for the Web, do not contain such information. But the PNG (Portable Network Graphics) format, endorsed by the W3 consortium and regarded as a replacement for GIF, does. Further more, PNG uses a lossless compression scheme. However, browsers supporting PNG are still not wildely available.

See the gamma correction page for more details.

Q: How do I make a gif image with a transparent background? And for what purpose?

A: When you display a gif image with transparent background, the Web page background will show through the transparent parts of your gif image. This sometimes can be very nice.

You use a raster image tool such as Photoshop or PaintShop Pro to designate any one color of your choice as the transparent color of your gif image. For example, in PaintShop you can simply select a color as the 'background color' on the foreground/background panel and then use the 'Preferences' item on the File menu and select 'Make background transparent' before saving the gif file.

A clear gif is a gif image that is totally transparent and can often be used to supply fine control over spacing in page layout.

Q: What is antialiasing? What is dithering?

A: The rough edging and staircase effect on slanted lines are "noise" or "alias" in digital images. Antialiasing has to do with softening the jagged edges by adjusting pixel positions or setting pixel intensities so that there is a more gradual transition between one color to a very differnet color. Antialiasing makes lines and edges in a picture look much smoother to the eye by using pixels whose color is a blend of the object color and the background color. A graphical object anti-aliased with one background color won't look right on a different background. Here are more details on antialiasing.

Dithering is the attempt by a computer program to approximate a color from a mixture of other colors when the required color is not available. Dithering can occur when reducing the nubmer of colors of an image, transforming art to Web safe color palette, or displaying a color that a browser on an operating system can't support. In such cases, the requested color is simulated with an approximation composed of two or more other colors it can produce. The result may or may not be acceptable to the graphic designer. The image may also appear somewhat grainy since it's composed of different pixel intensities rather than a single intensity over the colored space.

There are several methods or algorithms for color dithering:

• pattern dithering uses a fixed pixel pattern
• diffusion dithering propagates the error made in replacing a color pixel by a supported color to neighboring pixels.

Q: How do I transfer files between my PC or Mac and computers in the CS department?

A: Use FTP. If you have a usercode in the Math/CS department you can Connect to ftp.cs.kent.edu. Your usercode and password are required. Then just upload any file from your home computer to your home directory under UNIX, or download any file from UNIX to your home computer.

If you have a usercode with the Kent Computer Services (Computer Center) then you can use that account. Refer to Web Help for more info.

In the CS lab, the machines have the GUI WS-FTP client installed on them, and they have the Windows default command-line version of FTP on them as well. You can run the GUI version by using the icon under the Internet Applications -> WS_FTP folder on the start menu. The command line version can be used if you use the "MS-DOS Prompt" icon from the start menu and the command is ftp.

Q: After I upload my html file, I still need to open the file up for the Web. How do I do that.

A: You are right. Without opening up the permissions, a file will not be served to the Web.

Once you have uploaded a web page, say mypage3.html, to ~username/public_html or some other web directory/folder on a host computer, you need to open up the permission on this file before the web server on that host can serve it up to a browser.

On a UNIX system this is done by first cd to that directory then add the permission:

cd ~username/public_html
chmod o+r mypage3.html

cd ~username/public_html
chmod o+x homework3

http://act.kent.edu
http://www.tucows.com
http://cws.internet.com

Q: Where is a CGI directory students can use to place their CGI programs for their Web projects?

A: There is a special computer for students to place their CGI programs. To place your CGI program follow these directions:

1. Log into cgi.cs.kent.edu with your normal cs account.

2. Create a directory in /var/www/cgi-bin/users/youruserid.

3. Place publicly executable CGI programs in the youruserid directory and/or subdirectories in it.

4. Use the URL http://cgi.cs.kent.edu/cgi-bin/users/youruserid/program_name

Q: What is the difference between the GET and POST method when coding a <form> ?.

A: The textbook has a discussion on this. Another point worth bringing up is that we should use GET if a request only retrieves information. We should use POST if the request actually will change or update info kept on the server.

Q: In HTML, how do I indicate that a linked-to document will be displayed in a separate window?

A: One simple way is to use the TARGET=_blank attribute in the <A> tag. Another is to open an extra window using Javascript.

Q: Can you explain the OBJECT element of HTML?

A: Yes, definitely. In HTML 4 the OBJECT element is used to include (embed) an image, an applet, a flash animation, or some other media element into an HTML page. The OBJECT element can even be used in place of the IMG element. The OBJECT element is meant to retire the APPLET and the EMBED elements.

Basically the OBJECT element reserves a display area in the HTML document to render the media element in the same way as an IMG element. But OBJECT also allows you to specify the code, data, and other attributes necessary to run the included media type. For exmaple:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0"
        ID=movie WIDTH=600 HEIGHT=400>
   <PARAM NAME=movie VALUE="gly.swf"> 
   <PARAM NAME=quality VALUE=high>
   <PARAM NAME=bgcolor VALUE=#FFFFFF>

Alternative text

<OBJECT>

<EMBED src="gly.swf" loop=false quality=high
       bgcolor=#FFFFFF  WIDTH=600 HEIGHT=400
       TYPE="application/x-shockwave-flash"
       PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>