Introduction to Multimedia: The Internet & the Web

Project Two

Overview

This week we will be looking at constructing and using GIF animations.

Resources

• Optimizing Animated GIFs
• Tutorial on GIF animation creation
• Animated Sigs and Tags article

The Futurama Project

Overview

You will make a basic web page or set of web pages. To complete this, you will be required to create one or more pages and to upload them and all of their related contents to appropriate directories on gibson.rit.edu. You will not need (or want) to change anything on your current imm page to complete this, other than adding an anchor pointing to this Project in your unified-site-navigation system.

Details

In your gibson account, create a new directory in your www/imm directory called "futurama". Create an index.html file in the futurama directory. Be sure to specify the appropriate DOCTYPE (XHTML 1.0 Strict) and the appropriate encoding-type and so on for this document. All of the code you create (or paste in) must be valid HTML and CSS. Use the title tag to make the index page display "Your Name's Futurama Site" (substituting your real name).

The page you are creating will be about the television show Futurama (http://www.gotfuturama.com/). Go to the site now, and take a quick look at it.

Banner

Your content page must have a graphic banner that includes a simple GIF. The graphic banner must satisfy the following requirements:

• graphic displays your name, the word “Futurama”, and the assignment due-date
• graphic includes an image (or portion of an image) found somewhere on the Futurama website (it is compositing time)
• graphic is stored in your imm/media directory

Contents

The page itself should also include:

• "Futurama" as a headline <h1>. This headline should be displayed in a different font and color from the rest of the text by redefining the <h1> tag with CSS
• a summary of an episode taken from the "Articles" page at the Futurama site
• a noticeably modified version (put it into your media directory on gibson.rit.edu) of any of the images from the Futurama site (use cropping, scaling, filters, transformations, additions of text, etc.)
• modified image is either aligned or floats to the left or the right of your text
• includes a paragraph describing exactly what kind of image manipulation you performed. Be specific and be descriptive. This paragraph should be formatted differently from the other text using a CSS custom class.

Navigation Bar

At the top of the page (above your banner), you should create a navigation bar. It should satisfy the following requirements:

• it should include your actual name
• it should be composed of at least 3 slices from a larger graphic
• it should have rollover behaviors for the slices
• clicking on your name should replace the current page (standard link behavior) with your main imm page
• clicking on "Go to Futurama" should replace the current page with http://www.gotfuturama.com/
• clicking on "TV Listings" should replace the current page with the "TV Listings" page from the Futurama site

Upload

Upload all of your files to your imm/futurama directory on gibson.rit.edu. Don’t forget to set proper permissions for the directory and all the files and directories within it so that I have read permissions. Test the files by going to the address http://people.rit.edu/~yourid/imm/futurama/ (replacing ~yourid with your username).

Due Date

11:59 PM on Monday, 11 February