Frequently Asked Questions and Answers

---

Q: How do I join the mailing list for this class?

A: Every student can go to the list control panel to subscribe and perfrom other functions such as removing yourself from the list and browse past messages to the list.

After subscribing from the control panel, you'll get email from the list. Do not reply to this email even though it tells you to. Instead go to the URL given in that email and get yourself confirmed. You won't be officially joined until you do that.

To reach every one on this list, simply address your email message to

webpub@cs.kent.edu

Be sure to indicate your reply email address in the body of your message explicitly. When you use the reply function of your mail reader to respond to a piece of message distributed by the list server, the reply will go to everyone on the list, not just the sender. To send a reply just to the sender and not to everyone on the list, you need to address the message explicitly to the sender, not to the list.

---

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

A: Use SFTP. If you have a userid in the Math/CS department you can connect to ftp.cs.kent.edu. Your userid and password are required. Then just upload any file from your home computer to your home directory under Linux, or download any file from Linux 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: What are some networking speeds?

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

• Local Area Network speeds: 10-100 Mbps (1000 Mbps for newer LAN)
• 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. RoadRunner from Time Warner Cable)

---

Q: How do I transfer files from a MAC to other non-MAC computers?

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 this site and download it themselves.

(2) Transferfing files using a thumbdrive or external hard drive: 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: What are some typical monitor screen resolutions?

A: Screen resolution are measured in horizontal X vertical pixels (picture elements). It is not uncommon to see resolutions of 1024x768, but it can vary from 640x480 and 800x600 to 1600x1200. Widescreens are becoming more popular. Most PC's allow you to set the resolution from the "control panel". The aspect ratio will either be 4:3 or 16:9.

---

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: Why do a content-only site first?

A: Without the content, it becomes difficult to link, lay out, or visually design the face of the site. 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: What are some tools for making sure our HTML is valid and XHTML strict?

A: Try HTML Tidy and W3C XHTML Validator.

---

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. You can designate a default area that covers the entire image at the end of the list of areas in an image map.

---

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

will show the size of the given image.

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: 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: 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 Linux system this is done by first cd to that directory then add the permission:

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

If you place your page under a folder, say public_html/homework3 then you need to make the folder accessible to the web server as well.
This is done by

            cd ~username/public_html
            chmod o+x homework3
            

If you use WS_ftp (a freeware file transfer protocol program), right click on the file name that is on the server, and there will be a window that pops up. One of the selections is CHMOD. WS_ftp will make the file, available only to you, the rest of the server users, and/or to the world.

Its much faster and easier. Pick up a copy from

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

---

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

A: The use of the TARGET=_blank attribute in the <a> tag is not longer supported by W3C standards for XHTML Strict. Instead, open an extra window using the Javascript command poup().

---

Q: Can you explain the object element of HTML?

A: In XHTML Strict the object element is used to include (embed) an image, a Java 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 (even though bugs have prevented this from occurring so far).

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 example:

<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="loop" value="false">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">Alternative text</object>

includes a Flash animation object. XHTML-compliant browsers should be able to process the above object without any problems. To guard against non-compliant browsers, such as Netscape, the following embed code can be inserted before the "alternative text":

<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>

See the W3C document on object for more details.

The object element is also used to include the map element used in image maps. In this case, it is placed in the head part of a page.

---

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: What are some common Web design mistakes?

A: According to useit.com's list for 2005, the top 10 mistakes in Web design are:

1. Bad search
2. PDF files for online reading
3. Not changing the color of visited links
4. Non-scannable text
5. Fixed font size
6. Page titles with low search engine visibility
7. Anything that looks like an advertisement
8. Violating design conventions
9. Opening new browser windows
10. Not answering users' questions

For more information, go to this website.

---

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.

---

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

16-bit color is just fewer than the human eye can see but just about the limit of colors that can be produced by color monitors.

---

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 in other images. Raster image manipulation programs, such as Photoshop, allow you to create, edit, manipulate, and save palettes for images. For example, in reducing an image to 16 colors, the program can compute a "best fit" set of 16 colors for the image at hand, or you can 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. However, it is better to use the actual color code to comply with W3C standards.

black "#000000"	green "#008000"	silver "#C0C0C0"	lime "#00FF00"
gray "#808080"	olive "#808000"	white "#FFFFFF"	yellow "#FFFF00"
maroon "#800000"	navy "#000080"	red "#FF0000"	blue "#0000FF"
purple "#800080"	teal "#008080"	fuchsia "#FF00FF"	aqua "#00FFFF"

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 do 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 W3C and regarded as a replacement for gif, does. Further more, PNG uses a lossless compression scheme.

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.

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.

Pattern dithering is most useful in filling a larger area with a desired color. Diffusion dithering works well for continuous tone pictures.

---

Q: How to get multi-valued form data in Perl with the Perl CGI module?

A: The rough edging and staircase effect on slanted lines

$value = param('email');   /* single value */
@values = param('sport');   /* array of values */

To use the array @values you can

foreach $value (@values)
{   do something with $value
}