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 Multimedia Web Static Web http://designreviver.com/wp-content/uploads/2009/07/dark-05.jpg http://www.caxiamgroup.com/_media/photos/interactivedesign_boatswains_lg.jpg

Advantages and Disadvantages of Using Web-Based Multimedia 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.)

Compression Lossy Lossless

Compression & Decompression 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 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.