Copyright 2003 Monash University IMS5401 Web-based Information Systems Topic 2: Elements of the Web...

Copyright 2003 Monash University

IMS5401Web-based Information Systems

Topic 2: Elements of the Web

(d) Digital representation

Copyright 2003 Monash University2

Agenda

1. Background

2. Digital representation of media

3. File sizes for web page elements

4. File formats for multimedia elements

4. Implications for web developers


Elements of the Web

THE WEB

Connecting computers

Digital representationof documents

Display and organisation of

documents

Linkingdocuments


1. Background: Multimedia documents and the web What would the web be like if it could include

only black and white text-based documents? Tim Berners-Lee’s original proposal saw the

capability for multimedia documents as an independent development, but an essential element for his ‘web’ of documents

To what extent are web-based systems now dependent on the use of multimedia - colour, graphics, animation, sound, video - to make them work? (eg how much would the porn industry use the web without multimedia?)


Issues for multimedia documents and the web The use of multiple media is seen as crucial

for effective presentation of information; the success of the Web has been strongly based in its ability to use multimedia

Problems in dealing with multimedia have also been the single greatest source of complaints and dissatisfaction about the web

Some proposed uses of the web have never got going because of its weaknesses in dealing with multimedia

To understand why, we need to examine how multiple media are represented in a computer


2. Digital representation

Basics Numbers Text Graphics Colour graphics Animation and video Sound


Digital representation: Remember the basics!

Computers represent everything they store as collections of 1s and 0s; these are called bits

Computers are designed to manipulate and move data around in groups of bits called bytes; one byte = 8 bits

Representation of all media requires conversion of the message from its ‘normal’ form (words, numbers, pictures, sound, etc) to collections of bits


Digital representation: Numbers

Very simple! In our decimal number system, all numbers are

written as combinations of powers of 10: eg 1503 = (1 x 103) + (5 x 102) + (0 x 101) + (3 x 100)

We can just as easily use a binary system in which numbers are represented as powers of 2:eg 10011 = (1 x 24) + (0 x 23) + (0 x 22) + (1 x 21) + (1 x 20) (ie 16+0+0+2+1 = 19 in a decimal system)

Therefore to represent numbers in a computer we just convert them into binary

To store a number we need as many bits as it takes to represent it in binary form


Digital representation: Text

Computers use a standard coding system for alphabetic characters, symbols and punctuation marks; called the ASCII code

Each text character is represented by a specified sequence of bits

Eg the letter M = ASCII code 77 = 1001101 Therefore, every alphabetic character

requires 1 byte of storage Eg a page of text = about 3000 characters =

3000 bytes of storage (24,000 bits)


Digital representation: Graphics

Computers represent a graphic by superimposing a grid (raster) over the graphic

Each grid square = a pixel (picture element) For simple black and white graphics, the

computer assigns a value to each square depending on whether it is black or white (eg 1=black, 0=white)

The more squares in the grid, the better quality the graphic representation (resolution); (….. but the more storage space is needed for the graphic)


Digital representation: Colour Graphics

As for black and white graphics, but we add extra storage space for each pixel to define its colour

Many systems to represent colour; simplest one is RGB (Red Green Blue), where the computer stores a number which indicates the amount of each of these 3 colours which should be shown on the monitor for that pixel

The more precisely we want to measure the amount of each colour, the more storage we must allocate to recording colour information for each pixel; this is called the bit depth


Representing Colour in Graphics: Bit Depth

1 bit colour - Black or white 2 bit colour - 4 colours 8 bit colour - 256 colours 16 bit colour - 65,536 colours 24 bit colour - 16, 777, 216 colours


Calculating the size of graphics files

Size of graphics file = height*width*bit depth Height and width determined by number of

pixels - (standard screen=640*480 pixels) Depth depends on colours (see previous

slide) Eg 640*480*24 bit depth image (good

resolution, high quality colour graphic the size of a standard computer screen) needs 921,600 bytes of storage


Digital representation: Vector Graphics

Store the graphic as an instruction Software at reader end converts instruction into

raster (bit map) for screen display For example

• Line [(2,3), (345,197), Line-type=dotted];• Circle [(234, 267), 45, Thickness=3]

More efficient storage and scalable to suit different display types

Requires software at user end plus standards for vector instructions

Good only for line graphics; can’t do photos, etc


Digital representation: Animation and video

Animation or video is created by showing a rapid sequence of still pictures

Frame rate = rate of display of still pictures in a video or animation

Frame rate of 20+ pictures per second needed for high quality video or animation

Low frame rates (<15 frames/sec) gives jerky animation/video


Animation and video file sizes

File size for animation/video files =size of graphics * frame rate * time

Eg 1 minute of high quality video • (24 bit depth colour; • full screen display (640 x 480 pixels) • frame rate of 24 frames/second)

requires:(640 x 480 x 24) x 24 x 60 = 1.3Gb of storage


Digital representation: Sound

analog to digital sound conversion sampling rate 11kHz - 44KHz

• 11kHz - narrative voice quality (AM radio)• 22kHz - general purpose (FM radio)• 44kHz - top quality (audio CD)

Sound resolution 8-bit (256) or 16 bit (65,536) (like bit depth for colour)

Stereo sound = sound for 2 speakers = twice the storage of mono sound


3. File sizes for web page elements Some sample sizes When does it matter? File compression


A summary of sample file sizes

A page of text = 3Kb A full screen graphic with ‘normal’ colours =

300Kb A full screen graphic with ‘high quality’

colours = 1Mb One minute of voice = 0.6Mb One minute of CD quality music = 5-10 Mb One second of high quality full screen video

= 25-30Mb (Remember, these are in bytes, so multiply by

8 to convert to the number of bits)


When does size matter?

When a web server sends a page to a browser, the length of time it takes to get there (download time) depends on file size and speed of transmission

To calculate the download time for a web page:• work out the size of each of the page’s elements (text,

graphics, etc);• add them together;• convert to bits; and • Divide by the transmission speed (in bits per second)

Answer = download time in seconds Look at data transmission rates in next lecture


Compression

Enormous amounts of work have gone into developing compression techniques for digital media to reduce file sizes

Wide variety of techniques for both:• Lossless copmpression = no loss of quality; and• Lossy compression = some loss of quality

Very complex area; rapidly evolving; too messy to talk about here

Provides a partial solution to the file size problem


3. File formats for web documents

Multimedia before the web Why different file types?

• Proprietary formats and ownership issues• Quality of reproduction issues• Efficiency issues

File transmission on the Internet - MIME-types


File formats for web documents Multimedia on the web - MIME-types, browsers and

plug-ins Coping with unknown MIME-types Standards?! (discuss in later lecture)

• Text - Acrobat• Bitmapped graphics - GIF, JPEG, PNG(?)• Vector graphics - SVG?• Sound - WAV, AIF, AU, MP3• Video - Quicktime, AVI, MPEG• Animation - Shockwave

The web can cope fairly well with common standard files, but it can become very confusing otherwise


4. Implications for web developers

(Web design can require a lot of mathematics!) Digital representation of all media except numbers is

clumsy and inefficient It takes a relatively small amount of storage to

represent text It takes a lot of storage to represent a graphic or

sound or simple animation It takes a very large amount of storage to represent

high quality graphics or sound It takes an enormous amount of storage to store

video or complex animations


What can be done about the storage requirements of digital media?

Remove web page elements which need big files - no video, sound, complex animation

Reduce actual size of web page elements - smaller pictures, shorter animation/video/ sound

Trade-off quality against file size - fewer colours, lower quality sound, jerky animation/video

Compress files


Issues for the Web developer

How important are the big web page elements to the site?

How much do I have to change my page sizes to cater for my users’ data transmission rates?

How far can I go in reducing design quality in order to achieve better page download speeds?

How much will users put up with slower download speeds in order to get a high quality page design?

What matters most for my system and its users, and how can I find out what my web page users think?!

Copyright 2003 Monash University IMS5401 Web-based Information Systems Topic 2: Elements of the Web...

Documents

Transcript of Copyright 2003 Monash University IMS5401 Web-based Information Systems Topic 2: Elements of the Web...