Transcript Multimedia on the Web - Plymouth State University

Multimedia on the Web
Text and Images
The Two Major Effects of Digitization
 Multimedia
(VISTA)
– Video
– Image
– Sound
– Text
– Animation
 Interactivity
How the Computers Capture,
Store, Transmit Multimedia
All multimedia is converted into digital
form called binary digits (bits) represented
as 1’s and 0’s or on and off
 Each multimedia object has a code
associated with it e.g. text is represented
by an ASCII code
 Typical codes for images on the Web are
JPEG, GIF, PNG
 Sound Codes are wav, midi, mp3
 Video codes are mpeg, avi

The Process of Displaying a Web Page
 Data
and instructions from the server
or host computer are sent to the
local or client computer.
 The instructions are in a computer
programming language called
hypertext markup language (html)
 The browser interprets the
instructions and causes the action.
The Look of the Web Page on the
Client Computer Depends on -The design of the web page
 The ability of the Web Page design
software to convert the page to html
 The capability of the network to transmit
the html instructions and data
 The capability of the browser to interpret
the instructions
 The capability of the client computer to act
on the instructions

Typeface
The most conventional scheme for using
typefaces is to use a serif face such as
Times New Roman or Georgia for body
text and a sans serif face such as Verdana
or Arial as a contrast for headlines.
 Serif typeface

– Times New Roman
– Georgia

Sans Serif typeface
– Verdana
– Ariel
Type Size
 Measured
inch

in Points = 72 points = 1
12 point is usually the minimum for reading
72
point is 6
times larger
The Role of Bandwidth
 Bandwidth
= Data rate = bits/second
 Low – telephone modem – 56kbps/sec
 High – cable, satellite, DSL = mb/sec
 Caution
– what appears fast on your
development computer may be unusable
over the WWW
Data Compression
 Bitmap
images are very large file
size
 Codecs (computer programs)
compress abd decompress files to
make them much smaller by:
– Removing repetition
– Pixel averaging
– Dynamic range reduction
 Jpeg
and Gif are the most common
for Web pages
Images

Advantages of GIF files
– GIF is the most widely supported graphics
format on the Web
– GIFs of diagrammatic images look better than
JPEGs
– Supports transparency and interlacing
– Supports GIF animations

Advantages of JPEG images
– Huge compression ratios mean faster
download speeds
– JPEG produces excellent results for most
photographs and complex images
– JPEG supports full-color (24-bit, "true color")
images
Web Style Guide
From the Yale Web Style
Manual 2nd Edition
Link
Planning


Web sites are developed by groups of people to
meet the needs of other groups of people.
Unfortunately, Web projects are often
approached as a "technology problem," and
projects are colored from the beginning by
enthusiasms for particular Web techniques or
browser plug-ins (Flash, digital media, XML,
databases, etc.), not by real human or business
needs. People are the key to successful Web
projects.
Although the people who will actually use your
site will determine whether the project is a
success, ironically, those very users are the
people least likely to be present and involved
when your site is designed and built.
Build a Content Inventory
Once you have an idea of your Web site's
mission and general structure, you can
begin to assess the content you will need
to realize your plans.
 Building an inventory or database of
existing and needed content will force you
to take a hard look at your existing
content resources and to make a detailed
outline of your needs
 Content development is the hardest, most
time-consuming part of any Web site
development project.

INTERFACE DESIGN
USERS OF WEB DOCUMENTS
don't just look at information,
they interact with it in novel
ways that have no precedents
in paper document design.
Page Design
The spatial organization of graphics
and text on the Web page can
 engage readers with graphic impact,
direct their attention,
 prioritize the information they see,
 make their interactions with your
Web site more enjoyable and
efficient.
Page length
 Determining
the proper length for
any Web page requires balancing
four factors:
– The relation between page and screen
size
– The content of your documents
– Whether the reader is expected to
browse the content online or to print or
download the documents for later
reading
– The bandwidth available to your
audience
Page Length
 Researchers
have noted the
disorientation that results from
scrolling on computer screens. The
reader's loss of context is particularly
troublesome when such basic
navigational elements as document
titles, site identifiers, and links to
other site pages disappear off-screen
while scrolling
Page Length Guidelines
 In
general, you should favor shorter
Web pages for:
– Home pages and menu or navigation
pages elsewhere in your site
– Documents to be browsed and read
online
– Pages with very large graphics
MULTIMEDIA
 Web
designers must always be
considerate of the consumer. A
happy customer will come back, but
one who has been made to wait and
is then offered goods that are
irrelevant is likely to shop elsewhere.
Because multimedia comes with a
high price tag, it should be used
sparingly and judiciously.
Web multimedia strategies





Simply because we can digitize hours' worth of
analog video and stream it out over the Web
doesn't mean that we should.
Most people prefer to read the work in print. We
digitize texts in order to use the strengths of
computing, such as searching and linking, to
enhance our understanding of the material.
You can link to a pdf file of text
This holds true for multimedia, too: we need to
consider how best to use the computer and not
simply translate analog video and audio content
to the computer screen.
The key to successful Web multimedia is to tailor
your content for Web delivery.
Image Attributes
Images are made of picture elements or pixels
Each pixel could be black or white (1 bit/pixel)
Or
Up to 4 billion colors (32 bits/pixel)
The more pixels per inch of display the greater the resolution and the clearer the image.
More pixels and more bits/pixel means larger files.
With one bit per pixel, two colors may be represented => 1 or 0
2 bits => 4 colors
3 bits => 8 colors, etc
24 bits =2^24 = 16,777,216 colors
10 mega(million) pixel camera => 3000 by 3000 pixels
If each pixel = 24 bits = 8 bytes => 8 x 10 mega = 80 megabytes
Use compression => jpeg, gif and png are compression techniques
to reduce file size- without sacrificing quality
Save for the Web
82.58 KB
This image is 100 by 100 pixels
Increasing the physical size blurs the image
because the resolution (pixels/inch does not change)
Saved with only 16 colors – 4 bits
Original (left) vs 256 color (right)
24 bit (16 million colors)
Compare File Sizes
KB -> kilo byte; byte -> 8 bits ; bit -> binary digit
18 KB
74 KB
213 KB
Keep in Mind –
•Images from digital cameras will need size reduced
•Some images on web “thumbnails” and are approximately
100 by 100 pixels – enlarging makes them fuzzy
Jpg ar
Keep in mind –
•Digital camera pictures must be reduced to fit on web page
•Some web page images are “thumbnails”,
approximately 100 by 100 pixels. Enlarging can make them fuzzy.
•Jpeg is best for photographic images (millions of colors)
•Jpeg does not do transparency
•GIF are best for “cartoon” or line type images (only 256 colors)
•GIF does transparency (and animation)
•PNG does both millions of colors and transparency
•There is a tradeoff between image quality and size and format
•Use the smallest file size that still has desired quality on the web page
•Resize images before inserting on the web page