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,
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.
See Effective Use of Graphics on the WWW, created by MIT's CWIS group.
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.
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.
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.
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.
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.
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).
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 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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
The process is very similar to scanning images above, with the following exceptions:
Use the Omnipage 8 application to scan and interpret your text. Go to the online help for instructions.
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: