89
Sights and Sounds of the Internet Chapter 4
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
