Graphics,Graphics, Hypermedia, Hypermedia,

and and MultimediaMultimedia

•Focus on Computer Graphics

•Data Compression – How and Why

Painting Software

GrAphicS

Pixels: tiny dots of white, black or color arranged on the screen

Bit-Mapped Graphics: pictures that are simple maps showing how the pixels should be arranged on the screen

J a r g o n

Resolution: the number of pixels (dots) per inch

Use pointing devices to “paint” objects, shapes or freehand script on the screen

Painting Software

Painting Software

Painting tools are used to create drawings

A variety of special effects can be added

Outlinedshapes can be filled with colors

Painting Software

Photography e.g. PhotoDeluxe

Images

Image files come in a variety of formats, but most Web browsers support only two or three of the formats for in-line images. The popular browsers support only a limited number of graphics file formats for in-line images, with the most common being GIF and JPEG.

Sometimes inline images have more visual impact if the "background is removed". For example, consider the following two inline displays of the same image, the first with the background displayed and the second with it suppressed:

In the second example, the background is not actually removed, but is instead effectively set equal to the color of the browser display, which is equivalent to making it transparent.

Pixels

There is a delicate balance between the crispness of a picture and the number of pixels needed to display it. Let's say you have two images, each is 5 inches across and 3 inches down. One uses 300 pixels to span that five inches, the other uses 1500. Obviously, the one with 1500 uses smaller pixels. It is also the one that offers a more crisp, detailed look. The more pixels, the more detailed the image will be. Of course, the more pixels the more bytes the image will take up.

Gif Images

GIF, which stands for "Graphic Interchange Format," was first standardized in 1987 by CompuServe, compression actually belongs to Unisys. The first format of GIF used on the Web was called GIF87a, representing its year and version. It saved images at 8 bits-per-pixel, capping the color level at 256. That 8-bit level allowed the image to work across multiple server styles, including CompuServe, TCP/IP, and AOL. It was a graphic for all seasons, so to speak.

CompuServe updated the GIF format in 1989 to include animation, transparency, and interlacing. They called the new format, you guessed it: GIF89a.

JPEG Images

JPEG is a compression algorithm developed by the people the format is named after, the Joint Photographic Experts Group. JPEG's big selling point is that its compression factor stores the image on the hard drive in less bytes than the image is when it actually displays. The Web took to the format straightaway because not only did the image store in fewer bytes, it transferred in fewer bytes.

JPEGs are "lossy." That's a term that means you trade-off detail in the displayed picture for a smaller storage file. I always save my JPEGs at 50% or medium compression.

The difference between the 1% and 50% compression is not too bad, but the drop in bytes is impressive.

Which image do I use where• Small images, like icons and buttons: GIF

• Line art, grayscale (black and white), cartoons: GIF

• Scanned images and photographs: JPEG.

• Large images or images with a lot of detail: JPEG

Where do I find clip art?

The Clip Art Universe Graphics Links

•Graphics, Hypermedia, and Multimedia

Digital Audio MediaOptical Media (CD-ROMs)•Offer better clarity and greater storage capacity when compared with traditional audio media•Easier to directly access target audio for replay•With CD-Rs and CD-RWs you can also record audio

Digital Audio MediaInternet Audio•You can download audio rather than acquire CDs•While audio clips in Wav and MP3 formats are widely available, MP3 is gaining popularity because it require smaller files•You will need media players (typically free) to play back these files

MP3 Files•Sometime include visualizations (graphics or video) displayed during audio playback•MP3 players usually include recording and playback controls to enhance quality and control sequences•Typically music but may also include any other audio elements

Digital Audio Media

•Using streaming media, many radio stations simultaneously broadcast via the Web as well as the airwaves•National and international stations outside the local area are now available via the Web•Include music, news and talk stations from around the world

Digital Video TechnologiesDigital Video Basics•Digital video images allow for limitless editing•Instructional annotation can be added to any frame •Frames may be rearranged for better instructional emphasis•Digital video can be added to many digital files (presentations, web sites, etc)

•Digital video can be taken with a digital video camera or can be converted from analog video•Full motion digital video files are very large with 3 minutes of video requiring 1 gig of storage•Video compression helps remedy the file size problem

Digital Video TechnologiesDigital Video Basics•Compressed files require video compression playback software such as MS Media Player, Real Player, and Quick Time to decompress and playback video•AVI, MPEG, and MOV are the most popular compression formats•Check players to be sure which formats they can handle

Digital Video TechnologiesDigital Versatile Discs (DVDs)•DVDs can store up to 10.5 gigabytes of digital video on each side•DVD storage also allows for frame-by-frame play back in real or slow motion •DVDs also offer direct access to any frame or sequence for targeted replay in the classroom•DVD-Rs which allow recording on DVD are just entering the market

Digital Video TechnologiesDigital Video Capture•Analog video can be converted to digital via a video capture expansion card•External jacks on the card allow analog video input from VCR, cable, etc.•Card captures, compresses, and stores the video on the computer’s hard drive•Video editing software makes it possible to edit captured video

Digital Video TechnologiesDigital Video Cameras•Capture and store moving images as digital files rather than on VHS tape•Digital files can then be downloaded to computer and adjusted with editing software•Video clips can then be played back on computer monitors or projected via displays•Clips can also be inserted into presentations, email, etc

Digital Video TechnologiesInternet Video•Live compressed video images can also be transmitted across the Net•Images are not as clear or steady as with a CVS•Internet video broadcasts (webcasts) offer streaming video to shorten wait times•With emerging compression technologies, interactive Net video will more useful for schools

Digital Video TechnologiesLive Cams

• Live cameras connected to computers logged into the Internet offer live digital video feeds

• Many live cams are focused on subjects of educational interest

• Students can view live cams by visiting the website that features the live cams images

• Some live cam sites are questionable so all must be carefully previewed before using

Audio, Video, Graphics on the Internet

There are two ways of offering sounds and video over the Internet: helper applications and embedding the sounds.

Helper applications were programs that attached to the Netscape browser

From Hypertext to Multimedia

Plug-Ins are software extensions that add new features. Examples include…

• QuickTime• Shockwave/Flash• RealPlayer• Acrobat

What happens is this:

• The browser gets the sound file and downloads the entire thing.•Once the download is complete, the helper application is launched.•The browser loads the sound file into the application.•The application plays the sound.

If you have a sound you'd like to offer, follow this format:

<A HREF="http://www.yoursite.com/filename.wav"> Click Here</A>

Click Here

Imbedding a Sound Embedding a sound on a page means that you include the sound commands in your HTML document and use a plug-in to run it.

What's A Plug-In?

Plug-ins are programs that help your browser perform at a higher level. A sound plug-in does basically the same thing the helper application does, except it works inside the Netscape Navigator window rather than starting up as a whole other program.

MIDI?It's an acronym that stands for Musical Instrument Digital Interface.<EMBED SRC="peanuts.mid" AUTOSTART=FALSE

LOOP=FALSE WIDTH=145 HEIGHT=55 ALIGN="CENTER"></EMBED>

HEIGHT/WIDTH deals with the plug-ins control panel size on the page. The control panel at the top of the page was giving a size of 145 pixels wide by 55 pixels high. You can't very well embed a sound, so to have the browser understand what the thing is, it is offered as if it is almost an image. (Note the image of the control panel popped up.) If you do not want a panel, add the command HIDDEN="yes" or set the height and width to zero.• SRC stands for "source." It tells the browser where to go to get the audio file.• AUTOSTART deals with whether you want the sound to play by itself or by the viewer starting the file after the plug-in box pops up. "True" starts the file straight away, "false" prompts the viewer. Note I used "false" above. "True" would have started the file straightaway upon load.•*LOOP works the same way. "True" loops the sound so it plays forever. Make the

loop "false" if you only want it played once.

Other Sound Formats

AU, AIFF, and MPEG audio.

AU (also often referred to as u-law, after its most widely used sound sampling scheme) has the advantage of being available on a wide variety of systems. So if you choose to link to AU files in your Web pages, people viewing your pages from PCs, Macs, and Unix machines should all be able to hear the sounds. On the other hand, AU files have rather poor sound quality.

Audio Players

Streaming audio players may be obtained from Real, Microsoft (Windows Media Player) and Apple (Quicktime 5).

Movie Formats

QuickTime and MPEG are two of the most common cross platform movie formats currently in use. Qucktime files will have a .MOV extension

Many movies that originate on Windows systems are produced in the AVI format (and have an .AVI extension). Windows users can view these movies with Windows Media Player that is included with their systems.

http://www.webteacher.org/macnet/movies/simpsons-2001.mpg

A Movie

QuickTime™ and aYUV420 codec decompressor

are needed to see this picture.

Putting Movies on a Web page

<EMBED SRC="lesson14.mov"> This command instructs the browser to play the quicktime file called lesson14.mov PLUGINSPAGE="http://quicktime.apple.com" Tells the browser to take you to the specified URL if your computer does not have quicktime so that you can download it.

WIDTH=320 HEIGHT=240 Specifies the size of the movie screen.

CONTROLLER=true This tells the browser to place the contriols for the movie at the bottom.

LOOP=false This tell the browser to play the movie just once

AUTOPLAY=true This tells the browser to start playing the movie automatically, as soon as it is loaded

<EMBED SRC="lesson14.mov" PLUGINSPAGE="http://quicktime.apple.com" WIDTH=320 HEIGHT=240 CONTROLLER=true LOOP=false AUTOPLAY=true>