MULTIMEDIA AND THE WEB

Topic

What is multimedia? Multimedia elements

Graphics format Animation Audio VDO

Multimedia

Multimedia refers to any type of application or presentation that involves more than one type of media, such as text, graphics, video, animation, and sound.

http://3.bp.blogspot.com/_1qN7ohI5IV4/SZC36tJybRI/AAAAAAAACeo/nrP9AdhSds8/s400/multimedia3.png

Advantages and Disadvantages of Using Web-Based Multimedia

Static Web Multimedia Web

http://www.caxiamgroup.com/_media/photos/interactivedesign_boatswains_lg.jpg

http://designreviver.com/wp-content/uploads/2009/07/dark-05.jpg

Advantages and Disadvantages of Using Web-Based Multimedia

Advantages Can address a variety of learning styles

Visual learners Auditory learners

Material more interesting and enjoyable Many ideas are easier to convey

Disadvantages Development cost Amount of storage space required Compatibility and download time for Web-

based multimedia

Multimedia Elements

Text is used to supply basic content, as well as to add text-based menus and hyperlinks Serif typefaces: more readable, used for large

bodies of text Sans serif typefaces: used for titles, headings,

Web page banners Different typefaces can convey widely different

feelings and impressions Important to select the appropriate font size When a consistent text appearance is required

—such as a logo—a graphical image is used instead

Multimedia Elements Graphics: digital representations of a

photograph, drawing, chart, or other visual image

Clip art: predrawn electronic images Included with some software programs Available for free via the Web Can be purchased individually or in collections

Stock photographs: photographs available for purchase

Various graphic formats (TIF, GIF, BMP, JPEG, PNG, etc.)

Lossy Lossless

Compression

Compression & Decompression Compression

a method of removing redundant elements from a file to make the file size smaller then it requires less storage space and less time to transmit.

Sometime we refer to (compression/decompression)

Lossless VS Lossy Compression Techniques : Used

Mathematical techniques to replace pattern of bits. Nothing loss from compression. Use for Important file that the data can’t loss such as Text Document. E.g. WIN ZIP.

Techniques : Some information are permanently discarded. Used to compress sound, Image, Video files. E.g. JPEG, MPEG.

MP3

JPEG & MP3 Compression

Multimedia File Format

Data of each type of file may store and play by different ways. We call a way of storing data to file as “file format”

A file format is a particular way that information is encoded for storage in a computer file.

Multimedia Elements, Cont’d

GIF: graphics format that supports 256 colors, commonly used for Web page line art images Can be

transparent Can be

interlaced Uses

lossless file compression

Noninterlace & Interlace

Noninterlaced GIFs are displayed top to bottom at full quality instead.

Interlaced – the image is displayed initially at low resolution, and its quality is progressively increased until it is displayed at full quality;

Half of figure downloaded, non-interlaced GIF

Half of figure downloaded, interlaced GIF

http://www.jonlee.ca/image-options-interlaced-gifs-and-progressive-jpegs/

Multimedia Elements, Cont’d

JPEG: supports true color and is commonly used for photographs inserted in Web pages Can be progressive Uses lossy file compression The amount of compression is

specified when the file is saved

Multimedia Elements, Cont’d

PNG: designed specifically for use with Web page images Lossless compression Can use color palette or true color Still not widely used

Choosing a graphic format GIF—typically used for line art (clip art,

logos, etc.) JPEG—typically used for photographs Select the most appropriate format For JPEG, balance compression quality

and file size

Multimedia Elements, Cont’d

Thumbnail image: small image on a Web page that is linked to a larger, higher-resolution image

Used to save loading time since only users who click the thumbnail view the full-quality image

Multimedia Elements

Animation: a series of graphical images are displayed in succession to simulate movement Java applet: small program inserted into a Web

page that performs a specific task Animated GIF: group of GIF images saved as an

animated GIF file, inserted in a Web page; images are displayed successively to simulate movement

For more complex animations, developers can use JavaScript or another scripting language

Multimedia authoring software can be used to create multimedia elements

Multimedia Elements

Audio: sound (music, spoken voice, sound effects) Can be recorded using a microphone or MIDI

instrument; it can also be captured from CDs or downloaded from the Internet

Often played when an event occurs on a Web page or when the visitor clicks a link

Often streaming audio to speed up delivery Common audio file formats:

.wav .mp3 .midi

.aiff .aac

Multimedia Elements

Video: continuous stream of visual information broken into separate images or frames to be displayed successively to simulate the original event Requires a great deal of storage space Usually compressed to save room Streaming video is frequently used on Web

pages to speed up delivery Common video formats: .avi

.mpeg

.mov .rm

.avi – audio Video Interleave format a standard video file format developed by

Microsoft. .mpeg – Motion Picture Experts Group

format high-quality, compressed video.

.mov – QuickTime format Developed by Apple

.rm – Real format Highly compressed format used for

streaming video files.

Streaming audio or video Only a small portion of the audio video file is

initially downloaded and buffered (placed in memory or temporarily stored on the hard drive), and then the file can begin playing while the remainder of the file downloads simultaneously.

Because it allows the user to see or hear the file’s content significantly faster than if the entire file had to be downloaded first, it is recommended to use the streaming approach for all large audio and video files used with web pages.