Applications of Information and

Communication Technologies
C HA PT ER 1 0 (M U LTIMEDIA A N D T HE W EB )
BY
P ROF. D R. M . FA RHA N SHA FI Q U E

Original Credit and copyright Deborah Morley Charles S. Parker 1

Learning Objectives
1. Define Web-based multimedia and list some advantages and disadvantages of
using multimedia.
2. Describe each of the following multimedia elements—text, images,
animation, audio, and video—and tell how they differ.
3. Briefly describe the basic steps and principles involved with designing a
multimedia Web site.
4. List the various tasks involved with developing a multimedia Web site.
5. Explain how markup languages, scripting languages, and other tools are used
today to create multimedia Web pages.
6. Discuss the possible use of Web-based multimedia in the future.
Overview
• This chapter covers:
– What Web-based multimedia is and how it is used today
– The advantages and disadvantages of using multimedia
– Basic multimedia elements commonly found on Web pages
– Steps and principles in designing a multimedia site
– How a multimedia Web site is developed and the software used during this
process
– The future of Web-based multimedia
What Is Web-Based Multimedia?
• Multimedia
– The integration of a variety of media, such as text, images, video, animation,
and sound
• Web-Based Multimedia (also called rich media)
– Multimedia (sound, video, animation) located on Web pages
• Multimedia Sites
– Are interactive
– Often contain elements that users interact with directly
– Display information as requested by the Web page visitor
What Is Web-Based Multimedia?
• Fast computers and broadband Internet connections make Web-
based multimedia much more feasible than in the past
• Vast majority of Web sites today include multimedia
(advertisements, TV shows, podcasts, user generated content)
• Why Learn About Web-Based Multimedia?
– Multimedia is an integral component of the Web
– Businesses and individuals need to understand the
characteristics of the various types of multimedia elements
and the impact of adding them to a Web site
Web-Based Multimedia Applications
• Information Delivery
– Photos of products, video clips and podcasts, and users’ manuals are used
to convey information
– Important component in Web-based training (WBT)
• E-Commerce
– Online catalogs, samples of movies and music, etc.
– Virtual Reality (VR)
• The use of a computer to create three-dimensional environments that
look like they do in the real world (i.e., homes for sale)
• Augmented Virtual Reality - overlaying computer generated images
on top of real time images
Web-Based Multimedia Applications
• Entertainment
– Online TV/movies and games are
available through TV network sites
• Social Media and Virtual Worlds
– Photos and videos on many social
networking sites
– 3D Virtual Worlds (Second Life)
Advantages and Disadvantages of Web-Based Multimedia
• Advantages
– Can deliver some content that could not be delivered otherwise
– Can address a variety of learning styles
• Visual learners
• Auditory learners
• Kinesthetic learners
– Material more interesting and enjoyable
– Many ideas are easier to convey in multimedia format
Advantages and Disadvantages of Web-Based Multimedia
• Disadvantages
– Time and cost of development
– The cost of hosting and delivering the multimedia needs to
be considered
– The impact on visitors that have slow Internet connections or low
bandwidth caps
Multimedia Elements
• Text
– Used to supply basic content, and to add
text-based menus and hyperlinks
– Serif Typeface
• Small lines on edges of letters
• More readable, used for large bodies
of text
– Sans Serif Typeface
• No lines on edges of letters
• Used for titles, headings, Web page
banners
Multimedia Elements
– Different typefaces can convey widely different feelings
– Important to select a typeface that matches the style of the Web site
– When a consistent text appearance is required (such as for a logo) an
image containing the text is used instead
• Images (Graphics)
– Digital representations of photographs, drawings, charts, and other
visual images
• Images are static and are available in many formats— TIF, BMP, GIF,
JPEG, and PNG
• Clip art consists of pre-drawn images (flaticon.com, iconarchive.com)
• Stock photos are also available online
Multimedia Elements
Multimedia Elements
– GIF
• Graphic Interchange Format
• Commonly used for Web page images
• Used with logos, banners, other nonphotographic images
• 256 colors max
• Uses lossless file compression
• Can be transparent
• Can be interlaced
Multimedia Elements
Multimedia Elements
– PNG
• Portable Network Graphics
• Format designed specifically for use with Web page
images in 1996
• Uses lossless compression
• Can compress more efficiently than GIF
• Can use specific color palette of 256 colors or true color palette of 16
million colors
• Can also be transparent and interlaced
Multimedia Elements
– JPEG
• Joint Photographic Experts Group
• Standard format for Web page photos
• Uses lossy file compression
– Image quality is lost during compression
• Can use true color
• The amount of compression is specified when the file is saved
Multimedia Elements
Multimedia Elements
– Choosing a Graphic Format
• GIF or PNG—typically used for line art (clip art, logos,
navigation buttons, etc.)
• JPEG—typically used for photographs
• Use thumbnail images when
very large images are required
Multimedia Elements
• Animation
– A series of graphical images are displayed in succession to simulate
movement
– Animated GIF
• A group of GIF images saved as an animated GIF file that is inserted
in a Web page
• Displayed one after another to simulate movement
– Audio
• All types of sound including music, spoken voice, sound effects
• Can be recorded using a microphone or MIDI instrument, captured from
CDs, or downloaded from the Internet
Multimedia Elements
– Often played when an event occurs on a Web page or when the visitor clicks
a link
– Streaming audio is used to speed up delivery
– Common audio file formats include:
• Waveform (.wav)
• Moving Picture Experts Group Audio Layer 3 (.mp3)
• Audio Interchange Format File (.aiff)
• Advanced Audio Coding (.aac or .m4a)
Multimedia Elements
– Video
• Begins as a continuous stream of visual information, which is then broken
into separate images (frames) when the video is recorded
• Video data, like audio data, is usually compressed
• Streaming video is recommended to speed up delivery
• Common video file formats include:
.avi .mp2 .mov
.flv .mp4 .wmv
Quick Quiz
1. The most common file format for Web page photographs is
.
a. GIF
b. JPEG
c. PNG
2. True or False: Delivery speed is one potential disadvantage of using Web-based
multimedia.
3. A small image that is linked to a larger version of the same image is called
a(n) .

Answers:
1) b; 2) True; 3) thumbnail image
Multimedia Web Site Design
• Web Site Design
– The process of planning what a Web site will look like and how it will
function
– Good planning is very important
• Basic Design Principles
– Web pages should be interesting and exciting
– Pages should Provide information of value or interest
– Load quickly and be easy to use
 Technology and You Box
Responsive Web Design (RWD)
– Focuses on building sites that are compatible with a variety of devices
– Can create multiple versions of your site
yourself or use a flexible site that adjusts
to each visitor’s device
– Can create a desktop site and use a
service to generate mobile versions
Determining the Objectives and Intended Audience of the Site
• One of the first steps in designing a multimedia application or Web site
• Intended audience affects the appearance (such as the style,
graphics, fonts, and colors) of the site
• Once the objectives and audience have been identified, you should have a good
idea of the main topics to be included in the site
Using Flowcharts, Page Layouts, and Storyboards
• Flowchart
– Used during the Web design process to illustrate how the pages in a Web site
relate to one another
• Page Layout
– Illustrates the basic layout and navigational structure of a Web site
– Typically two are created: one for the home page and one for the rest of the
pages in the site
• Storyboard
– Ordered series of sketches showing each page or screen in an animation
sequence
Using Flowcharts, Page Layouts, and Storyboards
Navigational Design Considerations
• Users should be able to get to most pages on the site within three mouse clicks
– Using site maps and drop-down menus with larger Web
sites will help
• Navigational items should be placed in the same location on every page
• Break long pages into multiple pages
• A link to the home page should appear on every page
• Include identifying information on each page to indicate which page is
currently displayed
Access Considerations
• Device Compatibility
– The device being used to access a Web site affects how the site will
appear and how functional it will be
• Assistive Technology
– Hardware and software specially designed for individuals
with physical disabilities
Quick Quiz
1. Which of the following is most often used to illustrate what a Web page will look
like?
a. Flowchart
b. Storyboard
c. Page layout
2. True or False: In order for a screen reading program to identify an image-based
hyperlink, alternative text must be assigned to that image.
3. A Web page that contains links to all the main pages on a Web site is called a(n) .

Answers:
1) c; 2) True; 3) site map
Multimedia Web Site Development
• Web Site Development
– The process of creating, testing, publishing, and maintaining a Web
site
• Occurs after the site is designed
• Can be performed in-house or outsourced
• Creating the Multimedia Elements
– Usually several different software programs are used
• Image editing and animation software
• Audio and video editing software
– Each element should be saved in the appropriate size, resolution, and file
format
Multimedia Web Site Development
Multimedia Web Site Development
• Web Site Authoring Software
– Used to create Web pages and entire Web sites (Dreamweaver)
– Appropriate JavaScript or other code is automatically generated
– Allows you to create an entire cohesive Web site, not just
individual pages
– Allows you to easily include forms and database connectivity
– Often includes tests for broken links & accessibility tests
Multimedia Web Site Development
Testing, Publishing, and Maintaining the Site
• Web site should be thoroughly tested prior to publishing
– All hyperlinks should be clicked to ensure they take the user to the proper
location
– Complex animations (such as games and tutorials) should be tested
individually
– Proofread each page or screen carefully
– Use Web page code validators built into Web site authoring
programs or online validator services
– Consider a “stress test”
Testing, Publishing, and Maintaining the Site
• Once thoroughly tested, Web site is ready to be published
– Identify Web server
– Upload files
• After publishing, the Web site must be maintained
– Update content and check links on a regular basis
– Site should be evaluated on a regular basis to locate areas needing
improvement
The Future of Web-Based Multimedia
• Web-based multimedia will be more exciting and more embedded into
everyday events
• Web-based content, cloud services, and home entertainment
devices will likely continue to converge to allow seamless access to desired
content on the user’s device of choice
• Technology will evolve to support mobile multimedia
• Usage of multimedia applications that are tied to a geographical location or
current status and that involve user- generated content will also likely
continue to grow
Summary
• What is Web-Based Multimedia?
• Multimedia Elements
• Multimedia Web Site Design
• Multimedia Web Site Development
• The Future of Web-Based Multimedia