Multimedia on the WebMultimedia on the WebText and ImagesText and Images

The Two Major Effects of DigitizationThe Two Major Effects of Digitization

Multimedia (VISTA)Multimedia (VISTA)– VideoVideo– ImageImage– SoundSound– TextText– AnimationAnimation

InteractivityInteractivity

How the Computers Capture, How the Computers Capture, Store, Transmit MultimediaStore, Transmit Multimedia

All multimedia is converted into digital All multimedia is converted into digital form called binary digits (bits) represented form called binary digits (bits) represented as 1’s and 0’s or on and offas 1’s and 0’s or on and off

Each multimedia object has a code Each multimedia object has a code associated with it e.g. text is represented associated with it e.g. text is represented by an by an ASCII code

Typical codes for images on the Web are Typical codes for images on the Web are JPEG, GIF, PNGJPEG, GIF, PNG

Sound Codes are wav, midi, mp3Sound Codes are wav, midi, mp3 Video codes are mpeg, aviVideo codes are mpeg, avi

The Process of Displaying a Web PageThe Process of Displaying a Web Page

Data and instructions from the server Data and instructions from the server or host computer are sent to the or host computer are sent to the local or client computer.local or client computer.

The instructions are in a computer The instructions are in a computer programming language called programming language called hypertext markup language (html)hypertext markup language (html)

The browser interprets the The browser interprets the instructions and causes the action.instructions and causes the action.

The Look of the Web Page on the The Look of the Web Page on the Client Computer Depends on --Client Computer Depends on --

The design of the web pageThe design of the web page The ability of the Web Page design The ability of the Web Page design

software to convert the page to htmlsoftware to convert the page to html The capability of the network to transmit The capability of the network to transmit

the html instructions and datathe html instructions and data The capability of the browser to interpret The capability of the browser to interpret

the instructionsthe instructions The capability of the client computer to act The capability of the client computer to act

on the instructionson the instructions

TypefaceTypeface The most conventional scheme for using The most conventional scheme for using

typefaces is to use a serif face such as typefaces is to use a serif face such as Times New Roman or Georgia for body Times New Roman or Georgia for body text and a sans serif face such as Verdana text and a sans serif face such as Verdana or Arial as a contrast for headlines.or Arial as a contrast for headlines.

Serif typeface Serif typeface – Times New RomanTimes New Roman– GeorgiaGeorgia

Sans Serif typefaceSans Serif typeface– VerdanaVerdana– ArielAriel

Type SizeType Size

Measured in Points = 72 points = 1 Measured in Points = 72 points = 1 inchinch

12 point is usually the minimum for reading12 point is usually the minimum for reading

72 point is 6 72 point is 6 times largertimes larger

The Role of BandwidthThe Role of Bandwidth

Bandwidth = Data rate = bits/secondBandwidth = Data rate = bits/second Low – telephone modem – 56kbps/secLow – telephone modem – 56kbps/sec High – cable, satellite, DSL = mb/secHigh – cable, satellite, DSL = mb/sec

Caution – what appears fast on your Caution – what appears fast on your development computer may be unusable development computer may be unusable over the WWWover the WWW

Data CompressionData Compression

Bitmap images are very large file sizeBitmap images are very large file size Codecs (computer programs) Codecs (computer programs)

compress abd decompress files to compress abd decompress files to make them much smaller by:make them much smaller by:– Removing repetitionRemoving repetition– Pixel averagingPixel averaging– Dynamic range reductionDynamic range reduction

Jpeg and Gif are the most common for Jpeg and Gif are the most common for Web pagesWeb pages

Images Images Advantages of GIF filesAdvantages of GIF files

– GIF is the most widely supported graphics format GIF is the most widely supported graphics format on the Web on the Web

– GIFs of diagrammatic images look better than GIFs of diagrammatic images look better than JPEGs JPEGs

– Supports transparency and interlacingSupports transparency and interlacing– Supports GIF animationsSupports GIF animations

Advantages of JPEG imagesAdvantages of JPEG images– Huge compression ratios mean faster download Huge compression ratios mean faster download

speeds speeds – JPEG produces excellent results for most JPEG produces excellent results for most

photographs and complex images photographs and complex images – JPEG supports full-color (24-bit, "true color") JPEG supports full-color (24-bit, "true color")

images images

Web Style GuideWeb Style Guide

From the Yale Web Style From the Yale Web Style Manual 2Manual 2ndnd Edition Edition

Link

PlanningPlanning Web sites are developed by groups of people to Web sites are developed by groups of people to

meet the needs of other groups of people. meet the needs of other groups of people. Unfortunately, Web Unfortunately, Web projects are often approached projects are often approached as a "technology problem," and projects are as a "technology problem," and projects are colored from the beginning by enthusiasms for colored from the beginning by enthusiasms for particular Web techniquesparticular Web techniques or browser plug-ins or browser plug-ins (Flash, digital media, XML, databases, etc.), not (Flash, digital media, XML, databases, etc.), not by real human or business needs. People are the by real human or business needs. People are the key to successful Web projects. key to successful Web projects.

Although the people who will actually use your Although the people who will actually use your site will determine whether the project is a site will determine whether the project is a success, ironically, those very users are the success, ironically, those very users are the people least likely to be present and involved people least likely to be present and involved when your site is designed and built.when your site is designed and built.

Build a Content InventoryBuild a Content Inventory Once you have an idea of your Web site's Once you have an idea of your Web site's

mission and general structure, you can begin mission and general structure, you can begin to to assess the contentassess the content you will need to realize you will need to realize your plans. your plans.

Building an Building an inventory or databaseinventory or database of existing of existing and needed content will force you to take a and needed content will force you to take a hard look at your existing content resources hard look at your existing content resources and to make a detailed outline of your needs and to make a detailed outline of your needs

Content development is the hardestContent development is the hardest, most , most time-consuming part of any Web site time-consuming part of any Web site development project. development project.

INTERFACE DESIGNINTERFACE DESIGN USERS OF WEB DOCUMENTS USERS OF WEB DOCUMENTS don't just look at information, don't just look at information, theythey interactinteract with it in novel with it in novel

ways that have no precedents ways that have no precedents in paper document design.in paper document design.

Page DesignPage Design

The spatial organization of graphics The spatial organization of graphics and text on the Web page canand text on the Web page can

engage readers with graphic impact, engage readers with graphic impact, direct their attention, direct their attention,

prioritize the information they see, prioritize the information they see, make their interactions with your make their interactions with your

Web site more enjoyable and Web site more enjoyable and efficient. efficient.

Page lengthPage length Determining the proper length for any Determining the proper length for any

Web page requires balancing four factors:Web page requires balancing four factors:– The relation between page and screen size The relation between page and screen size – The content of your documents The content of your documents – Whether the reader is expected to browse the Whether the reader is expected to browse the

content online or to print or download the content online or to print or download the documents for later reading documents for later reading

– The bandwidth available to your audience The bandwidth available to your audience

Page LengthPage Length

Researchers have noted the Researchers have noted the disorientation that results from disorientation that results from scrolling on computer screens.scrolling on computer screens. The The reader's loss of context is particularly reader's loss of context is particularly troublesome when such basic troublesome when such basic navigational elements as document navigational elements as document titles, site identifiers, and links to titles, site identifiers, and links to other site pages disappear off-screen other site pages disappear off-screen while scrolling while scrolling

Page Length GuidelinesPage Length Guidelines

In general, you should favor shorter In general, you should favor shorter Web pages for:Web pages for:– Home pages and menu or navigation Home pages and menu or navigation

pages elsewhere in your site pages elsewhere in your site – Documents to be browsed and read Documents to be browsed and read

online online – Pages with very large graphics Pages with very large graphics

MULTIMEDIA MULTIMEDIA

Web designers must always be Web designers must always be considerate of the consumer. A considerate of the consumer. A happy customer will come back, but happy customer will come back, but one who has been made to wait and one who has been made to wait and is then offered goods that are is then offered goods that are irrelevant is likely to shop elsewhereirrelevant is likely to shop elsewhere. . Because multimedia comes with a Because multimedia comes with a high price tag, it should be used high price tag, it should be used sparingly and judiciously. sparingly and judiciously.

Web multimedia strategiesWeb multimedia strategies

Simply because we Simply because we cancan digitize hours' worth of digitize hours' worth of analog video and stream it out over the Web analog video and stream it out over the Web doesn't mean that we doesn't mean that we shouldshould..

Most people prefer to read the work in print. Most people prefer to read the work in print. We We digitize texts in order to use the strengths of digitize texts in order to use the strengths of computing, such as searching and linking, to computing, such as searching and linking, to enhance our understanding of the material.enhance our understanding of the material.

You can link to a pdf file of textYou can link to a pdf file of text This holds true for multimedia, too: we need to This holds true for multimedia, too: we need to

consider how best to use the computer and not consider how best to use the computer and not simply translate analog video and audio content simply translate analog video and audio content to the computer screen. to the computer screen.

The key to successful Web multimedia is to tailor The key to successful Web multimedia is to tailor your content for Web delivery.your content for Web delivery.

Image Attributes

Images are made of picture elements or pixels

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.

Each pixel could be black or white (1 bit/pixel)

Or

Up to 4 billion colors (32 bits/pixel)

With one bit per pixel, two colors may be represented => 1 or 0

2 bits => 4 colors3 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

82.58 KB

Save for the Web

This image is 100 by 100 pixels

Increasing the physical size blurs the imagebecause 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 fuzzyJpg 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