Transcript Information Systems 1

IMS5401
Web-based Information Systems
Topic 2: Elements of the Web
(d) Digital representation
Copyright 2003 Monash University
Agenda
1.
2.
3.
4.
4.
2
Background
Digital representation of media
File sizes for web page elements
File formats for multimedia elements
Implications for web developers
Copyright 2003 Monash University
Elements of the Web
Connecting
computers
Digital
representation
of documents
THE WEB
Linking
documents
3
Copyright 2003 Monash University
Display and
organisation of
documents
1. Background: Multimedia
documents and the web



4
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?)
Copyright 2003 Monash University
Issues for multimedia documents
and the web




5
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
Copyright 2003 Monash University
2. Digital representation







6
Basics
Numbers
Text
Graphics
Colour graphics
Animation and video
Sound
Copyright 2003 Monash University
Digital representation:
Remember the basics!



7
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
Copyright 2003 Monash University
Digital representation: Numbers





8
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
Copyright 2003 Monash University
Digital representation: Text





9
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)
Copyright 2003 Monash University
Digital representation: Graphics




10
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)
Copyright 2003 Monash University
Digital representation: Colour
Graphics



11
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
Copyright 2003 Monash University
Representing Colour in
Graphics: Bit Depth





12
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
Copyright 2003 Monash University
Calculating the size of graphics
files




13
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
Copyright 2003 Monash University
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]



14
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
Copyright 2003 Monash University
Digital representation:
Animation and video




15
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
Copyright 2003 Monash University
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
16
Copyright 2003 Monash University
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)


17
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
Copyright 2003 Monash University
3. File sizes for web page
elements



18
Some sample sizes
When does it matter?
File compression
Copyright 2003 Monash University
A summary of sample file sizes







19
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)
Copyright 2003 Monash University
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)


20
Answer = download time in seconds
Look at data transmission rates in next lecture
Copyright 2003 Monash University
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


21
Very complex area; rapidly evolving; too messy
to talk about here
Provides a partial solution to the file size
problem
Copyright 2003 Monash University
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

22
File transmission on the Internet - MIME-types
Copyright 2003 Monash University
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)
•
•
•
•
•
•

23
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
Copyright 2003 Monash University
4. Implications for web developers






24
(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
Copyright 2003 Monash University
What can be done about the storage
requirements of digital media?




25
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
Copyright 2003 Monash University
Issues for the Web developer





26
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