copyright 2003 monash university ims5401 web-based information systems topic 2: elements of the web...
Post on 21-Dec-2015
213 views
TRANSCRIPT
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
Copyright 2003 Monash University3
Elements of the Web
THE WEB
Connecting computers
Digital representationof documents
Display and organisation of
documents
Linkingdocuments
Copyright 2003 Monash University4
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?)
Copyright 2003 Monash University5
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
Copyright 2003 Monash University6
2. Digital representation
Basics Numbers Text Graphics Colour graphics Animation and video Sound
Copyright 2003 Monash University7
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
Copyright 2003 Monash University8
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
Copyright 2003 Monash University9
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)
Copyright 2003 Monash University10
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)
Copyright 2003 Monash University11
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
Copyright 2003 Monash University12
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
Copyright 2003 Monash University13
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
Copyright 2003 Monash University14
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
Copyright 2003 Monash University15
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
Copyright 2003 Monash University16
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
Copyright 2003 Monash University17
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
Copyright 2003 Monash University18
3. File sizes for web page elements Some sample sizes When does it matter? File compression
Copyright 2003 Monash University19
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)
Copyright 2003 Monash University20
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
Copyright 2003 Monash University21
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
Copyright 2003 Monash University22
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
Copyright 2003 Monash University23
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
Copyright 2003 Monash University24
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
Copyright 2003 Monash University25
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
Copyright 2003 Monash University26
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?!