chapter 4, sight and sounds of the internet

Sights and Sounds of the Internet

Chapter 4

2

You Will Learn…

How to enhance a web site with multimedia

How MIME facilitates the use of non-text files

How to download and use helper applications and plug-ins

How to add sound files to a web site

continued…

3

You Will Learn…

About different graphics file types and how to use them on web sites

How streaming multimedia technology works, and how to add movies, videos, and streaming sound to web pages

How video conferencing works on the Internet

4

Enhancing Web Sites with Multimedia Non-streaming data

Multimedia data that is first downloaded from a web set and then played

Streaming data Plays as it is being downloaded Examples: videoconferencing and

listening to the radio from a web site

5

Streaming Data

6

MIME (Multipurpose Internet Mail Extensions) A protocol used to transport non-

text files attached to e-mail messages and web pages across the Internet

Identifies a file as belonging to a category and a subcategory such as Image/gif

7

Early Attempts to Work with Non-text Files When the web and e-mail first were

developed, no provision was made to send any data that was not pure ASCII text (binary files)

Early solutions Uuencode and uudecode BinHex

Current MIME method of transmitting non-ASCII files over the Internet

RFC 1521

8

How MIME Works

1. Declare MIME type in header information

2. Encode the file3. Send the files over the Internet4. Client receives the data5. Interpret the MIME file

9

10

Viewing the Source Data

11

MIME File Types

Text Multipart Application Message

Image Audio Video Model

12

13

Helper Applications and Plug-ins Helper application (external viewer)

Used by e-mail applications to display files Opens the file in a separate window and does

not involve the e-mail software Can work independently of a browser

Plug-in (browser extension) Enhances the browser, enabling the browser to

perform the task Requires the browser in order to work

14

Helper Applications and Plug-ins

15

Helper Applications and Plug-ins

16

Helper Applications and Plug-ins

17

Helper Applications and Plug-ins

18

Downloading and Installing Plug-ins

19

Downloading and Installing Plug-ins

20

Non-streaming Sound Files

Browsers generally don’t know how to play sound files without the help of a plug-in or browser extension Internet Explorer uses Windows Media

Player Netscape Navigator uses RealPlayer

and Beatnik Player

21

Storing Sound in Files

MIDI (musical instrument digital interface)

WAV (wave) WMA (Windows Media Audio AU (UNIX Audio) AIFF MPEG (Moving Pictures Experts

Group)

22

Storing Sound in Files

MPEG technology uses lossy compression (compresses data by dropping unnecessary or redundant data)

Sounds are converted to digital data using a microphone and a sound card

A sound card receives analog flow of sound from the microphone and digitizes it (converts it to bits: 1s and 0s)

23

A Sound Card

24

Storing Sound in Files

Sampling Process of approximating an infinite

flow of sound CODEC (compressor/decompressor)

Compressing and later decompressing sound, animation, and video files

Also stands for coder/decoder when referring to digital-to-analog conversion

25

Recording Sound

26

Adding Sound to a Web Site Use any of these tags:

<BGSOUND> <EMBED> <OBJECT> <HREF>

27

The <BGSOUND> Tag

28

The <EMBED> Tag

29

Sound Used by Different Browsers Use <OBJECT> tag to embed sound

in a web page to be interpreted by both Netscape and Internet Explorer

Example:<OBJECT DATA = “chimes.wav”> </OBJECT>

30

Sound Files as Hyperlinks

Refer to the sound file name when using <A HREF> tag

31

Sound Files as Hyperlinks

32

Sound Files as Hyperlinks

33

Graphics on Web Pages

Image map A graphic on a web page that contains

multiple hyperlinks Also called clickable map

34

Graphics on Web Pages

35

Graphic File Types

Bit-mapped image (raster image) Composed of many small colored or gray dots

that look like an image when viewed as a whole Easy to import; easy to display Doesn’t enlarge as well as a vector image

Vector image (object image) Created by mathematical equations that

communicate how to draw lines and shapes to create the image to the software

36

Bitmapped Image

37

Bitmapped Image

38

Graphic File Types

GIF (Graphical Interchange Format) JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics) BMP (bit-mapped) TIFF (Tagged Image File Format) PDF (Portable Document Format) RTF (Rich Text Format) PostScript and EPS (Encapsulated

PostScript)

39

GIF Files

Most popular graphics files on the web

Bit-mapped files; easily read Support animation, transparent

background, and interlacing Use 256 colors and dithering

40

Transparent Background

41

JPEG Files

Most often used to store photographs More compressed than GIF files; use

lossy compression method Do not support transparent

backgrounds or animation, but support interlacing (progressive JPEG)

42

PNG Files

Use lossless compression, interlacing, and transparent background color

Do not support animation

43

BMP Files

Store images as many dots of varying color Do not support high resolution, animation,

interlacing, or compression Not used much on the Web

Not compressed Not supported by most browsers

Popular on PCs Easy to create Most computers have software to support them

44

TIFF Files

Bit-mapped images that can use either lossless or lossy compression and offer strong support for color

Popular for desktop publishing applications Often used for photographs, graphics, and

screen captures Not commonly used on web sites

Can be large Not supported by most browsers without a plug-

in

45

PDF Files

Proprietary file format by Adobe Systems

Provide images of the formatted document that allow anyone to view and print, but not edit the file

46

RTF Files

Convert a word processing document to ASCII code so that another word processor can read and edit the file

Lose original formatting but retain ability to be edited

47

PostScript and EPS Files

PostScript A page description language developed by

Adobe Systems Used to communicate printing directions to a

PostScript printer EPS

A file format developed by Adobe Includes directions for printing a document to a

PostScript printer Includes a print preview of the document

48

Web Page Backgrounds

Use the BACKGROUND attribute of the <BODY> tag

Example:<body background=“TEXTURE.GIF”>

Can be GIF or JPEG files

49

Animated Graphics

Add the LOOP attribute to the <IMG SRC> tag

Example:<IMG SRC=“animated.gif” LOOP=INFINITE>

50

Animated Graphics

51

Animated Graphics

Creating images Modify a graphic so that you have

images for each frame of the animation Creating animation

Join the images together to create an animation sequence

52

Creating Images

53

Creating Images

54

Creating Images

55

Creating Animation

56

Optimizing Page Download Time Keep total size of all files to be

downloaded for a single page to 50K Break large PDF files into several

shorter files Use 8-bit graphics instead of 24-bit Use compressed audio or graphics files Use GIF files for graphics and JPEG files

for photographs

continued…

57

Optimizing Page Download Time Use solid background colors Use fewer colors Set dimensions of image as small as

practical Use graphics-crunching utilities Do not save an image in one format

and then another

58

Streaming Multimedia

Can originate from a stored file or from live data arriving at the server

Uses the client/server architecture Is often buffered by the client plug-

in

59

Streaming Multimedia Architecture A media client and a media server

handle the actual streaming data request and transmission

60

Streaming Multimedia Architecture

61

Protocols

Streaming data uses the HTTP or RTSP (Real Time Streaming Protocol) protocol to format data

These protocols use either UDP (User Datagram Protocol) or RTP (Real Time Transport Protocol) to transmit data

62

Metafiles

Files that contain information about other files (eg, location and filename of the audio or video data)

List the protocol first, the server name next, and the filename last

Example:pnm://server.name.ext/filename2.rm

63

How Metafiles Transmit Streaming Data1. Web page requests metafile, which

is downloaded to the client2. HTML informs browser of the type

of plug-in required3. Plug-in is loaded and creates a link

to the data on the server as identified by the metafile

64

65

Streaming Multimedia Plug-ins QuickTime RealPlayer by Real Networks Microsoft Windows Media Player Flash and Shockwave by

Macromedia

66

Streaming Multimedia Plug-ins

67

QuickTime

Provides framework for synchronizing video, sound, and text in a web-based presentation

Supports several video compression techniques

Supports non-streaming data, stored streaming data, and live streaming data

Supports many standard video, audio, and graphics formats (WAV, MIDI, Flash, and AVI)

3D version: QuickTime Virtual Reality (QTVR)

68

RealPlayer

Uses its own proprietary audio, video, graphics, and text files

Supports several multimedia video and audio file types

69

Windows Media Player

Free plug-in that comes with Windows

Supports several popular file types

70

Flash and Shockwave

Flash Uses vector graphics to produce

animated graphics with sound Shockwave

Used mostly in audio and video production

71

Flash

72

Movies and Videos on the Web Advantage: easy access instead of high

quality Video file types

AVI (Audio Video Interleaved) MPEG QuickTime ASF (Advanced Streaming Format) Windows Media File with Audio and/or Video

(WMV)

73

HTML Tags Used to Add Movies and Videos to Web Pages <EMBED> <OBJECT> <APPLET>

74

Creating Video for a Web Site1. Create video using a camcorder 2. Download video to the PC3. Edit the video4. Compress video data5. Place video file on web site and build web

pages to view it using browser plug-ins6. View the video by the browser

75

76

Types of Video Camcorders Analog Digital

77

Live Web Broadcasts

78

Video Conferencing over the Internet Live data is filmed by:

Digital camcorder and continuously downloaded to a computer using a port on the computer, or

Analog camcorder that downloads data to a video capture card that can support inputting live data

Data is input into software and converted to a format that can be made available to the live web broadcast

A browser receives a live broadcast using a plug-in

79

Sample Screen from a Video Conference

80

Sample Screen from a Video Conference

81

Sample Screen from a Video Conference

82

NetMeeting

Allows you to have your own video conference calls if you have a microphone, PC camera, and speakers installed on a Windows 9x, Windows NT, or Windows 2000 system

Client software that uses a directory server

83

Using NetMeeting

84

Installing NetMeeting

85

Installing NetMeeting

86

Installing NetMeeting

87

Starting NetMeeting

88

A NetMeeting Session

89

Chapter Summary

How to add audio, video, and enhanced graphics to web sites

How audio and video files are created, compressed, transported, and interpreted

Software available to work with multimedia files

Technology needed to support a client that accesses multimedia web sites