In-Class Exercise: Internet Research

Begin by choosing a name from the list below:

Vinton Cerf J.C.R. Licklider Bob Kahn Ivan Sutherland Alan Kay Leonard Kleinrock Charles Babbage Alan Turing Seymore Papert

Paul Allen Nicholas Negroponte Jonathan Schwartz JC Herz Pavel Curtis Esther Dyson Linus Torvalds Brenda Laurel Jaron Lanier

Jon Postel Seymour Cray Steve Wozniak John Perry Barlow Kevin Mitnick Laurie Anderson Kim Polese Scott McNealy Joi Ito

Dan Bricklin Jim Barksdale Meg Whitman Stewart Brand Howard Rheingold Mitch Kapor Kai Krause Vinod Khosla Aaron Swartz

Using the various Internet search tools we discussed in class, see if you can find the following information about the person you chose. Post the results of your research as a comment to this post.

1. Why do you think they made this list? (What did they do? What makes them noteworthy?)
2. What are they doing now?
3. When and where were they were born?
4. Have they written any articles or books in the past five years? If so, what?
5. What do they look like? (Find a photo and provide the URL to it.)

In-Class Exercise: FirstClass

All IT students get accounts on the InfoTech FirstClass server, but not everyone knows how to use it effectively. This exercise will take you through some of the key features of the system.

1. Open the FirstClass client software, and make sure that the server field shows “firstclass.it.rit.edu”. Enter your FirstClass user ID and password to login.

2. From the FC Edit menu, select Preferences, and then the Content tab. Change your default font to something a little more readable [I like Verdana 10 pt, myself]. Try creating a new message and typing a few words in the text area. Don’t send it yet, but do close the window using the close box in the top left corner.

3. Now open your Mailbox—you should see the message you just created, and it should have a small white flag next to it. Once you’ve started a message, even if you haven’t entered any information, it does not go away unless you explicitly delete it, and it doesn’t get sent until you click either the send button or the send-and-close button. The white flag shows it’s unsent. See if you can figure out how to delete the message.

4. Open up Conferences, then Course Conferences, then 320 Intro to Multimedia and then the directory specific to this class. Read the message(s) you find there. Reply to the first (oldest) message in the conference (provide content comparable to the original message).

5. Now find the message with files to download. Retrieve those files (either by dragging them to the Mac desktop, or by choosing File-->Save Attachment), then upload them to your FirstClass desktop (by dragging them from the computer's desktop to the FC Desktop window).

6. Ctrl-click (hold down the control key while you click -- this would be a "right click" on a PC) on the welcome message in the conference, and choose History from the pop-up menu. You should see your name in the list of people who’ve read the message. This is useful if you want to see if your instructor or another student has read a message you’ve sent via FC.

7. Find the 320 Intro to Multimedia conference again (the one that has all the sections listed). Ctrl-click (or click-and-hold) on the icon for our section, and select Add to Desktop from the menu. Then close all windows except for your FirstClass desktop—you should now see the conference there. This will make it easier to get to the files for class quickly after logging in.

8. Now, send a message to our class course conference with a tidbit of interesting information about the person you researched last week. (It would be a good idea to mention that person’s name in the message title

In-Class Exercise: RIT Email

Overview

There are a lot of e-mail options at RIT, and even more outside of RIT! Making a decision as to which client to use, and which account to receive your mail through, is no small task. During today’s exercises, you’ll get some hands-on experience with a variety of e-mail environments, so that you can make an informed decision about the systems that you use.

PINE on Unix

1. Use a telnet or secure shell (SSH) program to connect to grace.rit.edu (Terminal on Mac OS X, PuTTY on the IT Lab PCs, or Start->Run->telnet grace.rit.edu on other PCs), and log in with your DCE ID and password.

2. Using pine, create a new message and enter your DCE user ID at the To: prompt. Press enter or tab. What happens? (Cancel the unsent message before continuing.)

3. Create an entry in your Pine address book for our class conference in FirstClass. (03-Lawley-041-TR10a@firstclass.it.rit.edu); give it a nickname like “320”. Then compose a new message with the subject “Grace to FC Test,” and send it to the nickname that you just created.

4. Quit Pine, and logout from Grace.

RIT LDAP Server

1. Go to start.rit.edu.

2. Select "manage your mail preferences" to see where your official RIT mail is sent. If you would prefer to receive your RIT correspondence at another address, you can change that here. BE CAREFUL! Official correspondence from your instructors, the registrar and other RIT offices will be sent to this address, so if you change it to a non-RIT address be sure it's one that stays functional.

3. You can create a "personalized" email address by selecting a user id for the mail.rit.edu redirect system. (This does not create a new email account; any mail sent to this new mail.rit.edu address will be automatically redirected to the address you specified in the “email address” field.) For example, my "official" RIT address is ellics@rit.edu, but my "personalized" address, which I use on all correspondence, is ell@mail.rit.edu. Mail sent to the personalized address goes to wherever my RIT address is forwarded to.

4. Return to the start page, and choose "Manage your identity preferences." Make sure your first, middle, and last name are displayed the way you'd like.

5. From the start page, choose "Manage your contact information preferences." Add whatever information you'd like to have publicly available on the RIT directory server.

Exchange Webmail

1. Use a browser to go to http://mymail.rit.edu/exchange, and login with your DCE user name and password.

2. Create a new message and send it to the FirstClass conference for this class (03-Lawley-041-TR10a@firstclass.it.rit.edu), with the subject “Webmail to FC Test”.

3. Create another new message, and type in only your last name in the "to" field. Select "check names" from the top of the window (the icon is a face with a red checkmark). If there's more than one person at RIT with that last name, it should now appear as a red link. Click that link, and find your name. What happens?

In-Class Exercise: Color, Type, and (CSS) Style

Here are the files for today's CSS in-class exercise. It's a zipped archive, which should decompress into a folder called "css exercise."

Download CSS Exercise Files

If you've forgotten to bring your HTML book, you can use this CSS tutorial.

In-Class Exercise: Design

Working with 1-2 other students (you may not work alone, and you may not work in groups of more than 3 people), go to The Viola Site. Look over the site, and then evaluate it based on the basic design principles laid out by Williams & Tollett:

• Alignment
• Proximity
• Repetition
• Contrast

Summarize your group's opinions of the site, and provide some suggestions for how the site design could be improved. (Post that information as a comment to this exercise; be sure to include all group members' names.)

Organizational Schemas: In-Class Exercise

Find examples of each of the following types of organizational schemes, and provide links to each (you can use basic HTML in your comment in order to make the link clickable):

• Topic
• Task Orientation
• Corporate Organization
• Audience
• Metaphorical

In-Class Exercise: GIF Animation

Overview Animation is a means of drawing attention and emphasis to your web materials by leveraging the power of movement. Creating movement requires the use of time. Frames are the critical component in Fireworks to create animation because Frames control time. The amount of time a frame remains visible is called the frame delay. The number of times the frame sequence repeats is called the loop.

Part 1: Frames

1. Open Fireworks and choose File->New to create a new graphic. Set the dimensions to 400 pixels wide by 80 pixels high.

2. Choose the Text Tool and click on the new graphic canvas you have just created. Type in your first (and, if it will fit, last) name. Use Verdana, 50pt, Black as the beginning settings.

3. Open the Frames Window (Window->Frames). You should see Frame 1 already.

4. Use the duplicate frames command to make n-1 copies of your first frame where n=the number of letters in your text. Each frame should be an identical copy of the first. (You can find the command by clicking on the arrow in the top right corner of the Frames Window.)

5. Click on Frame 2 to make sure you're working on the second frame. Change the color of the first letter of your name (choose a bright color).

6. Now go through each individual frame and change the color of the subsequent letter in line. By the time you finish, you will have changed the color of all the letters (except letter 1).

7. Use the play buttons at the bottom of the Canvas Window to preview your work. Keep tinkering with it until you have a set of frames that turn each letter in into a different color.

Part 2: The Animated GIF

1. Use File->Preview in Browser to look at your file. Did it play? If not, read on before you panic!

To make sure your animation works, you need to save it in Animated GIF format, not standard GIF format. If you don't, nothing will happen when you load the image. That's why all you see is the first image right now.

1. Go to the Optimize Tool (Window->Optimize) and change the format setting to animated .gif.

2. Try File->Preview again. Does the animated .gif work? If not, now would be a good time to ask for help.

Part 3: Timing and Loops

You may have noticed that your animation played through endlessly and the timing of the animations was evenly spaced. You will want the animation to play through more than once on the web but endless animation isn't good. Since some animations might be better if played more than once, you will want to change the looping. Additionally, the even rate of frame delay may not accent parts of your animation in the way you want. Let's change that and add some zip to your animation.

1. The Frames Window contains options for you to experiment with looping and with timing. Change the .gif so that it loops 3 times. Use File->Export to save the file, and then open it in a browser to test it.

2. In Fireworks, go back to the Frames Window and adjust the frame speed so that first letter of each word stays on the screen exactly 3 seconds. (How do you know how long to set the frame speed to get a 3 second appearance? HINT: the numbers measure 100ths of a second)

3. Use File->Preview in Browser to make sure your animated .gif works correctly. If it still doesn't work, keep trying until you do make it work. Do not discard this file yet.

Part 4: Layers and Animation

It makes sense that you can use Layers and Frames together. All you need to do is make sure your layers are applied in the desire frame(s).

1. Highlight Frame 1.

2. Use Window->Layers or choose the Layers tab at the top of the Frames window to open the Layers Window. Rename Layer 1 to Name (do not change the text component of Layer 1). Now, add a new layer. Rename it as Box.

3. Make sure you've highlighted the Box Layer. Using the Rectangle tool, draw a rectangular colored box over the first letter of your name (use a color that constrast with the letter). Notice that it now obscures the letter. To correct this you will have to switch the order of the layers. Remember that layers at the bottom are not visible behind layers at the top.

4. Move the Name Layer to the top of the vertical stack of layers.

5. Now File->Preview in Browser. Does the colored background appear BEHIND the letters in both frames? If not, correct it and check again.

6. Use File->Preview in Browser. Does the animation play correctly. If it does, you should see an animation sequence that changes the colors of each letter one at a time AND the first letter stays on the screen longer with a red background.

7. Congratulations, you've just mixed and matched layers with frames!

Part 5: Transforms and Animation

1. Create a new image with File->New and set it to 300 pixels wide by 300 pixels high.

2. Use the Polygon Tool and create a 5 pointed star in red.

3. Open the Frames Window and make 7 copies of this frame.

4. For each frame, Select the star and use Modify->Transform->NumericTransform to decrease the size of the image. You are trying to make an animation where the image shrinks and then gets bigger again.

5. Use File->Preview in Browser. What do you think?

Part 6: Putting It All Together

Using this airplane.gif file, create an animation that shows the airplane as it goes up and down, from Los Angeles to Rochester (by way of Chicago). Put the completed animation up in your imm directory, and post a link to it as a comment to the weblog entry for this in-class assignment.

If you want more of a challenge, figure out a way to incorporate my face in a window (remember, you can find a photo of me on my personal web page).

In-Class Exercise: Image Slicing

This exercise includes a combination of experiment and simulation of the process of preparing sliced images for a web that will be used as a navigational element of a web page. The sources for the images you are using in these exercises are listed in the exercises. DO NOT install these images on Grace. We do not have the copyright permissions for public display of these images although they can be used as part of these exercises under the fair use clause of copyright.

Part 1: Slicing the image

1. First, use CTRL-click (right-click on a PC) on this link to download the the ice08.psd file. This file contains a theoretical menu for a virtual art exhibit. We won’t take it further than optimizing this image for the web and making it interactive but you’ll get the idea. Both images and text values will be links. If you have not done so, open the file in Fireworks.

2. To optimize the image, we need to clarify some assumptions. For example, what assumptions are we making about the browsers and equipment used by our audience. Let’s assume that we are targeting a general audience that is using at least version 4.0 or later of either Netscape or IE browsers and that they are using monitors set to a color depth of at least 16 bits. So, we are not concerned in this exercise with using web safe palettes but we are concerned with minimizing the download time while maintaining high-quality visual images.

3. Using those assumptions, slice the image to achieve a balance between size and quality. Pay particular attention to maintaining the quality of the thumbnails of the paintings. Make sure you end up with at least one slice for each image and each text label. They will all have links attached to them in a little while. Now use the Slice Tool to create different slices for each text label and image. Don't forget to use the Optimize Window to switch from gif to jpg.

4. Create a new folder for the output. File->Export to create the html and sliced images.

5. How big is the data total of the sliced images? Your total should be in the range of 15-18K total. If it is larger, check your assumptions and choices and redo Step 3 until you get the right total size.

NOTE: On a Mac, remember that two values are available, the size of the data and the space occupied on the disk (the value inside the parentheses is the data size). The larger regular file size is the space occupied on the disk (in disk blocks, usually a minimum of 2k-4k each depending on the disk size). In other words, even a single pixel image requires a minimum of one block of storage on a disk (on any type computer).

Part 2: Adding links to images

Although Fireworks automatically names everything when you create the slices, and it is very logical, it is not particularly memorable or meaningful. If you look in your folder full of image slices, which one is the horse race or the text label for the horse race? If you are always using Fireworks to work with this sliced image, it is less of a problem but if you want to be able to have others help with the updating process, using more meaningful names will be a real help.

1. Throw the html and folder full of images that you created in the previous part away. You are going to redo the html and slices so these will just get in the way.

2. Slice the image again and this time, rename each slice in the Properties Window. You will need to do this individually for each slice. This time name the image slices homeimage, sportsimage, workimage and upcomingimage respectively. As you slice the text labels, again, rename them hometext, sportstext, etc. Name the text under the upcoming image as “upcoming_title”.

3. Use the Properties Window to Add URLs to the images. For the title of the exhibit (“Everyday Life:…”) link to the Web Museum, Paris’ page of artists

4. For the home, sports and work images, link to a page in the Web Museum that displays a larger version of the thumbnail.

   • Vincent’s Room, Arles
   • Degas’ Race Horses
   • Portraits in an Office, Degas
   • Monet, The Bridge at Argenteuil

5. Once you have renamed slices and added links, File->Export again. Preview it in a browser and test all the links. When it works (redo and export again as necessary), continue on.

Part 3: Changing the table

One of the advantages of slicing an image into a table is that it is easier to update. What if you decide to change the image used for the Upcoming exhibit section to a different Monet painting, like The Bridge at Argeteuil. Here is a jpeg version of this image called “monetnewsmall.jpg” that is the same width as the current version of the image that was included in the table. To update the table, rather than open Fireworks and redo things, you should make the modification by finding the current Monet image in the folder containing the slices. What is the image file called? Remember when you named the slice? The image uses the slice name. It should be a jpeg so the current image can be replaced by the new image if the name of the new image is changed to the same name as the file it replaces. The html will load the replacement image. Make the change and view the sliced image table again. No other change should be necessary if you did things correctly.

NOTE: Preview in Browser may recall information from the cache and make it difficult to load the new image correctly. You may need to reload the file in the browser to see the changes.

Save your work before continuing on.

Part 4: Rollover Effects

One of the most common reasons for slicing an image is to allow you to apply rollover effects to those parts of the image used as links. In the example you’ve been working on, you might expect that putting your mouse over a painting would cause it to change in some way—this is an indication to the user that the item is "active" in some way. Let’s add some rollover effects to the sliced image.

1. In order to create a Simple Rollover, we will need to first create two different frames. Frame 1 holds the initial/default image while Frame 2 will be used to hold the new or rollover image. Select Frame 1 now and duplicate it. Be sure you are back in Frame 1 before you go to step 2.

2. Switch to the Web Layer and select the slice that contains the image for "Home," and then choose Window->Behaviors. (You may also simply click on the small circle at the center of the slice.)

3. Create a simple rollover. Depending on the method you chose in Step 1, click on the "+" icon at the top left corner of the Properties Window and choose Simple Rollover OR simply choose ADD SIMPLE ROLLOVER. Excellent. You have just added a Rollover script to the slice you selected. Redo this step for each image. Now we need to make the rollover effect.

Before you go on, turn off the Web Layer "eye". Only the behavior is assigned to the Web Layer … the rollover effects must be made to the image itself. It will be easier to work with the image if you are not trying to look over the Web Layer.

1. The key to making a rollover in Fireworks is be sure that you match the correct layer choice, the correct effect and the correct frame. Be sure that Frame 2 is selected and switch to the Layers Window. In the Layers Window, select the correct object within the Layer 1. (i.e. "chamber" which represents the image you named home). Can you find an easier way to identify the correct layer component without clicking up and down the layer list?

2. After you have correctly selected the correct layer object, use the Effect tab in the Properties Window to add a drop shadow.

3. Repeat steps 4 and 5 for the sports, work, and upcoming images.

4. CREATE A NEW FOLDER FOR THESE MATERIALS. Don't forget to turn your Web Layer "eye" back on! Now, Choose Export from the File menu. Do not replace the previous HTML from the sliced image; put this HTML in a your new folder.

5. Preview the resulting HTML file in a browser. Go back now and make the drop shadow more pronounced …

6. Compare the HTML from the previous section with the HTML you just generated. What significant difference(s) do you see?

Part 5: Changing the Images Location

All of this works fine if you’re creating a new site with all new folders for images and html content. But what if you’re creating rollover navigation for your IMM web site? You’ll need to make sure the images go into the media directory of your IMM site, and that the HTML properly references them. Happily, Fireworks makes this relatively painless. This section will walk you through the process.

1. Create a folder on your drive called "immtest", and in it put a project2 folder and a media folder.

2. In Fireworks, choose File->Export, and select the new project2 folder you just created as the location for the HTML files.

3. In the Slices section of the export settings, check the box that says "Put Images in Subfolder." The "browse" button should now be active. Click on it, then find and select the media folder you created. You should see the path to the directory appear next to the browse button.

4. Save the files. Fireworks will put the HTML file into the project2 directory, and the associated images in the media directory.

5. Use BBEdit to view the new HTML file. What file path did Fireworks use to reference the images in the document?