MIT

Web Guide is no longer being maintained and the information on this page may be out of date. For assistance with managing course materials, please visit MIT's Stellar course management system.

ACS Academic Webpage Creation Guide


Building Your Pages > Including Graphics and Multimedia

Including Graphics and Multimedia


Understanding Media Types for Web Publishing

Before starting to create your Web pages, it is useful to know about the file formats for different media commonly found on the Web. The formats listed below (with links to further information) are recommended for MIT Web pages because they are compatible with all three computer platforms common at MIT: Macintosh, Windows and Unix (including Athena).

Graphics: GIF, JPEG,

Graphics: GIF, JPEG, PNG
Photos: JPEG
Movies: Quicktime or non-streaming MPEG
Audio: a "pictureless" Quicktime movie is currently the best option. Otherwise, you will need to publish copies of the same audio file in different formats, one for each platform: Macintosh -- AIFF; Windows -- WAV; Unix/Athena -- AU.
Text: HTML or PDF

Unless you are certain that people will access your Web pages with a Macintosh or Windows system, do not use platform-specific formats such as Shockwave or Windows Media (Microsoft is apparently working on a Unix version of Windows Media, so stay tuned). MIT recently reached an agreement with Real Corporation, so Real Player is also a viable format for MIT Web use.

Tips for Effective Use of Graphics

See Effective Use of Graphics on the WWW, created by MIT's CWIS group.

Accessibility Issues

Misused graphics and multimedia are one of the primary stumbling blocks for the Universal Accessibility of Web pages. See MIT's Web Accessibility Policy and Principles for information on how to effectively and accessibly use graphics.

Where on campus can I create Graphics for the Web?

The MIT New Media Centers are clusters of Macintoshes running software for multimedia development: video digitizing, animation, photo manipulation, audio editing, Web authoring, etc. The New Media Center in Room 26-139 is used as a classroom during the day and a staffed cluster open to MIT students, faculty, and staff at night. The Center in Room N42-013 is available to members of the MIT community by advance appointment. Some departments also have private New Media Center clusters for use by their own students, faculty, and staff.

Creating Graphics for the Web

An excellent program for creating Web graphics is Fireworks 2, from Macromedia. With Fireworks you can design, animate, optimize, and export images for the Web. The software runs on Power Macintoshes and Windows systems. Fireworks is available in MIT's New Media Centers, where you can try it out or use it to create Web pages. Fireworks is not an IS-supported product -- meaning the Computing Help Desk does not have expertise in using it. The program has, however, an excellent tutorial and help system.

Imagemaps

An imagemap, or "clickable map," is a Web graphic containing links or "hotspots." An example is the map of the MIT campus, which has been divided into four sections: East, West, the Infinite Corridor, and Kendall Square. Clicking on one of these sections takes you to another imagemap focusing on that area.

Creating Imagemaps Using Macromedia Fireworks

The Fireworks program provides an easy way to create imagemaps. After importing or creating a graphic in Fireworks, you select a shape (round, rectangle, or polygon) from the Hotspot tool and draw a hotspot over the desired area on the graphic; you then enter the URL to create the link from the hotspot. The completed imagemap, with links, is exported as a GIF file for inclusion on a Web page.

Note: Imagemaps can be either "client-side" or "server side." Unless you are running your own web server, you will want to create only client-side imagemaps for your MIT web pages. Client-side imagemaps are easier to create, as they do not require the presence of a server-side CGI script in order to interpret the coordinates of the "hot" regions of your clickable image. The client-side imagemap is much more efficient than the server-side imagemap and, for the viewer's information, the URL associated with the mapped region is displayed in the status bar of the Web browser.

Animated GIFs

An animated GIF is a single file containing multiple images which act as successive frames of an animation when viewed in a Web browser. Common examples of animated GIFs include banner ads and the rotating "E" graphic that is often found as the e-mail link on Web pages. Before delving into how to create animated GIFs, a word of caution: Animations on Web pages, while eye-catching, are considered a nuisance by many people (along with blinking text, sound files that launch when a page is opened, etc.). Use animations sparingly, and do not set them to loop continuously (have them loop 4 or 5 times and then stop).

Creating Animated GIFs Using Fireworks

To create an animated GIF, you first create the individual frames comprising the finished animation. Frames, in this case, refer to the individual images akin to animation cells or to the individual pages of a flip book. Click the Frames tab on the Layers and Frames panel. Choose Add Frames from the pull-down menu to the right of the panel and type in the number of frames you want. These will be listed numerically on the Frames panel. To edit each frame, simply click on the frame number, then draw or import the contents for that frame in the editing window.

For instance, to create an animation of a balloon flying upwards, click on Frame 1 and draw the balloon at the bottom of the editing window. Then, copy the balloon, click on Frame 2, and paste the balloon in a slightly higher position in the editing window. Repeat this in each successive frame until the balloon is at the top of the window. You can see a rough approximation of what the animation will look like by clicking rapidly through the series of frames.

When the frames are complete, select Export from the File menu and define your creation as an animated GIF. If desired, click on the Animation tab in the Export dialog box to adjust the speed of the animation and whether or not it loops (repeats). Do not set an animated GIF to loop forever -- it is extremely annoying while trying to read the rest of the page. Let the animation loop a maximum of 4 to 5 times and then stop.

Once the animated GIF has been exported, you can use it as you would any other GIF file -- the individual frames are saved together under the single file name.

Rollovers

Rollovers are images that change appearance in the browser when you roll the cursor over them (for example, see the International Students Office home page). Unlike animated GIFs, rollovers consist of four or five separate files, one for each image state of the rollover:

Up -- what appears when the page loads but before you roll the cursor over it.

Over -- when you move the cursor onto the image.

Down -- as you begin to press the mouse button down.

Click -- when you click the mouse button.

An HTML file contains the JavaScript code that tells the browser which image to display for which state.

Creating Rollovers Using Fireworks

The process for creating a rollover is similar to that of making an animated GIF. You make four frames, one for each state, and then export your work as a Rollover. You can even incorporate special graphics effects into your rollovers, such as buttons that appear to glow when the cursor is on them, or icons that appear inset (sunken) when clicked. When you export the Rollover, you end up with four GIF files plus the JavaScript file, which you can paste into an existing HTML document or use as is.

Making Web Movies at the New Media Centers

Using Adobe Premiere 5.1 in the New Media Centers to Digitize Video

  1. Make sure the VCR or camcorder is connected to the computer: Video Out of the VCR/camera to Video In of the computer.
  2. In Room 26-139, make sure the amplifier is turned on (lowest item in rack next to instructor's machine). In Room 9-250, open the Sound and Monitors Control Panel and be sure the Mute box is not checked. Also, be sure your sound cables are plugged in.
  3. Launch Adobe Premiere. When asked for project settings, use the defaults unless you know you require a particular setting (for example, if you know you will be copying your project back to videotape, in 26-139 set the size to 640x480, and in 9-250 set the size to 160x120; actually, Media100 enforces a capture size of 160x120 for all projects).
  4. In 9-250 always use the Media100 NTSC codec, as this system has a Media100 board. From the File menu choose Capture > Movie Capture. The Movie Capture menu will appear, plus the capture window.
  5. Press the Play button on the VCR or camcorder and click in the Movie Capture window. If your setup is correct, you will see your video appear in the window. When you want to record, click the Record button.
  6. Your cursor will disappear when recording. Click the mouse again to stop. Note: In 9-250 you will not hear the audio while recording, but you will hear it when you playback the recorded clip. In 26-139 you will hear the audio while recording (this is due to differences in capture boards).

With the current storage and memory capacities of the New Media Center machines, you can record only about a minute of video at a time. Experiment with different audio and video settings, particularly the frame rate, to get your clip the way you want it.

Editing and Saving Your Digital Video

Your digitized video segment appears in a separate window labeled Clip. You can save individual frames of the clip as GIF files (from the File menu choose Export > Frame), or you can drag the clip into the Timeline window to edit it or combine it with other clips. If the Clip window is white, close the Movie Capture window and your video should reappear once you play the clip.

Quicktime is the recommended format for Web-based movies at MIT, because it runs on Macintosh, Windows, and Unix systems.

  1. To save your clip as a Quicktime movie, from the File menu choose Export > Movie and click on the Settings button.
  2. Export as File Type: Quicktime, and choose a Compression option under Video Settings. Select Cinepak for regular video, or Media100 on the Media100 station.
  3. When you click OK, your Premiere file will be exported as a compressed Quicktime movie. This may take time, so be patient! When naming the file, end it in .MOV to signify that it is in Quicktime format.

If you intend to leave your Quicktime movie in electronic form for the Web or a CD-ROM, you may want to use Media Cleaner Pro to compress it even further. The Media Wizard inside Media Cleaner Pro will step you through the process.

Printing the Movie to Videotape

If you are recording the movie back to videotape, quit Premiere and make sure cables connect the Video Out of the computer to the Video In of the VCR (they should be set up that way). Open QuicktimePlayer or MoviePlayer, then open the .MOV file you wish to videotape and choose Present Movie. Set a 5-second delay and press Record on the VCR. The movie should now be recorded to videotape. (Note: The Print-to-Video feature in Premiere is not compatible with the Media100 system in 9-250, but you can try it with the system in 26-139).

For More Information

Terran Interactive, the makers of Media Cleaner Pro, produced a very informative Web site, Making Multimedia Movies. If you plan to do many such projects, it is worth your time to visit the site.

Scanning Images, Slides, Text at the New Media Centers

To Scan Images (But Not Slides)

The scanners in both New Media Centers are made by Epson. The scanner in 9-250 has a special attachment with which to scan slides.

  1. Be sure the scanner is turned on.
  2. In 9-250, open Adobe Photoshop. From the File menu choose Import > Twain Acquire. This opens the Epson Scan application within Photoshop.
    In 26-139, open Epson Scan separately (not from within Photoshop) and the Epson Scan window will appear.

    You may see the image scanned by the person using the machine prior to you; don't worry, this will soon be replaced by your image.

  3. Place your document on the scanner flatbed so it is aligned with the arrow in the upper-right corner. Close the lid.
  4. In the Epson Scan window, adjust the settings as you want them (72 dpi will cause your image to appear the same size on the screen as it does on paper; increasing the dpi will enlarge the image). For example, to scan in handwritten course notes you might want to choose 72 - 75 dpi, grayscale, and save as gif format.
  5. In the Preview section click on the document icon (above the Scan button). The scanner will do a quick pass over the image.
  6. On the preview, select the region of the image you want scanned by clicking and dragging over it (a box will appear around the area selected).
  7. Click Scan. Your image will be digitized. Save the scanned image by choosing Save As from the File menu.

You can edit the image in Photoshop. In 26-139, first close Epson Scan and then open Photoshop separately, as the scanner software is not compatible with Photoshop 5.

To Scan Slides (Available Only in 9-250)

The process is very similar to scanning images above, with the following exceptions:

  1. Remove the foamcore sheet covering the light source in the lid of the scanner. It clips into the lid.
  2. Depending on your slides, in the Epson Scan Source window select TPU for negative or positive film. Place the slide on the flatbed so it is aligned with the upper right corner. Scan as above.
  3. Replace the foamcore when finished!

To Scan Text for OCR (Optical Character Recognition)

Use the Omnipage 8 application to scan and interpret your text. Go to the online help for instructions.

Creating Simulations

Simulations, especially those that allow the user to change one or more variables, can make abstract concepts come alive for students. If you plan on experimenting with simulations, please keep in mind that information presented this way can be inaccessible to users with disabilities or people using non-graphical browsers. MIT is committed to ensuring that information served over the Web is accessible to the widest range of people; see MIT's Web Accessibility Policy.

There is no easy solution to deal with these issues, but there are some tools and guidelines to help you: