WEB DESIGN AND
MULTIMEDIA
INTECH 2100
Chapter I
Multimedia Elements
What is HyperText and HyperMedia?
▪ Hypertext is a text which contains links to
other texts.
▪ The term was invented by Ted Nelson around
1965.
3
What is HyperText and HyperMedia?
4
What is HyperText and HyperMedia?
HyperText Navigation
● Traversal through pages of hypertext is therefore usually non-linear 5
What is HyperText and HyperMedia?
non-linear
6
What is HyperText and HyperMedia?
▪ HyperMedia is not constrained to be text-
based. It can include other media, e.g.,
graphics, images, and especially the
continuous media – sound and video.
7
HyperMedia
8
Example Hypermedia Applications
▪ The World Wide Web (WWW) is the best
example of a hypermedia application.
▪ PowerPoint Application
▪ Adobe Acrobat (or other PDF software)
▪ Adobe Products
▪ Many Others
9
Linear and Non-Linear Multimedia
A multimedia website can be linear, which users start
at the beginning and progress through a set
sequence of events until they reach the end. But
most websites use a nonlinear approach to
navigation, which users have more control over what
they are interested in pursuing.
10
Linear Multimedia
11
Non-Linear Multimedia
12
Interactive Multimedia
It enables the user to directly respond to and control
any or all of the media elements. Hence, users of
interactive multimedia applications become active
participants instead of the passive recipients of
information.
13
Multimedia vs Hypermedia
14
Multimedia vs Hypermedia
15
HyperText versus HyperMedia
16
Text
▪ Most text files store their text using the ASCII
coding scheme.
▪ ASCII stands for American Standard Code for
Information Interchange.
▪ Each character is translated into 7 bits.
17
Text
Typography is the art and
technique of arranging type to
make written language legible,
readable, and appealing when
displayed.
18
Text
The Basic Elements
1. Typeface - text style.
Eg. Arial and Helvetica.
2. Typeface style, width and height.
Eg. Courier, Calibri, Verdana, Tahoma and Times New Roman.
All typefaces come in different sizes. The height of every individual character is
called x-height. When pairing fonts together, most graphic designers usually pick
a typeface with similar x-height.
On the other hand, the set width refers to the area of the body of the letter and
the buffering space that follows. The most popular way to measure type is called
the point system. One point equals 1/72 of an inch and 12 points equal one pica 19
(1/16 inch).
Text
TYPEFACE
vs
FONT
20
Text
21
TypeFace vs Font
22
Text
23
Text
24
Text
The Advanced Elements
Tracking is the space
between text characters,
which is also referred to as
letter spacing.
Kerning is like tracking, but
only refers to the space in
between letters and
characters. 25
Text
The Advanced Elements
Leading addresses the
vertical gaps between lines
of text – often crucial in the
creation of magazine
articles, blog pages, and
other pieces of written
work.
26
Images
27
An image catches the viewers’ attention much more quickly than just plain, old text.
Almost every multimedia application contains images.
Images
Graphics on a screen are made up of tiny blocks
called pixels.
The more pixels on the screen, the higher the resolution and the better
the quality of the picture will be. The higher the image resolution, the 28
more memory is needed to store the graphic.
Images
29
PIXELS COORDINATES AND GEOMETRY
Raster (Bitmap)
Bitmap images are organized as a grid of colored squares called
pixels (short for 'picture elements').
JPEG
GIF
PNG
30
Raster (Bitmap)
Each color of an image is stored as a binary number.
31
What is Vector Graphics?
Vector graphics are computer images created using a sequence of commands or
mathematical statements that place lines and shapes in a two-dimensional or
three-dimensional space.
32
[Link]
What is Vector Graphics?
33
[Link]
Vector Types
One of the most common vector file formats is Scalable Vector
Graphics (SVG). SVG is an open standard for vector graphics.
Vector graphics are used in:
▪ CAD packages
▪ AutoShapes in Microsoft Office
▪ animated movies
▪ Encapsulated PostScript (EPS)
▪ Animation programs such as Blender and Adobe After Effects
▪ Image manipulation programs such as Adobe Photoshop and GIMP
▪ Portable Document Format (PDF)
34
▪ Windows Meta-File (WMF)
Images
35
Images – Color Depth
A black and white
image (1bit color depth)
36
Images – Color Depth
Most computer systems and digital cameras use 24-bit images. 24 in binary is
1111 1111 1111 1111 1111 1111. This means there are over 16 million possible
colours per pixel.
Resolution is a measure of pixel density, usually measured in dots per inch (dpi).
Images on websites usually have a resolution of 72 dpi. This means that a 1-inch 37
square contains a grid of pixels that is 72 pixels wide by 72 pixels high. 72 x 72 = 5184
pixels per square inch.
Images – Metadata
Image files usually also contain metadata. Metadata means 'data
about data' and provides information about the image.
The information includes:
▪ filename
▪ file format - eg JPEG, GIF or PNG
▪ dimensions
▪ resolution
▪ colour depth
▪ time and date the image was last changed
▪ camera settings when the photo was taken
38
▪ GPS
Images – Compression
Compression is used to reduce file sizes and change various attributes
of an image file. These attributes include:
▪ file type
▪ resolution
▪ dimensions
▪ bit depth
39
Images – Compression
Compression can be lossy or lossless.
40
Images – Compression
Compression can be lossy or lossless.
41
LOSSLESS LOSSY
Images – Compression
Compression can be lossy or lossless.
Lossless compression algorithms reduce the size of files without
losing any information in the file, which means that we can
reconstruct the original data from the compressed file.
Lossy compression algorithms reduce the size of files by
discarding the less important information in a file, which can
significantly reduce file size but also affect file quality.
42
Images – Compression
The differences between lossy and lossless compression.
43
[Link]
Images – Compression
Types of compressed image files
PNG is a lossless compression type. It is often used where the graphic might be
changed by another person or where the image contains layers of graphics that
need to be kept separate from each other. It is high quality.
JPEG is often used for digital camera images because it has a fairly small file
size for the quality that it displays. JPEG is a lossy format that offers a higher
compression rate than PNG in the trade-off for quality.
GIF compresses images to a maximum 8-bit colour depth, making it unsuitable
for high-quality photographs. GIF is often used where transparency is needed on
the graphic. GIF can also be used to store simple animated images. GIF is a 44
lossless data compression format
Images – Compression
Advantages and disadvantages of lossy and lossless compression.
45
[Link]
Images – Compression
Lossy vs lossless summary.
When it comes to digital images, it’s not simply a case of taking pictures and
uploading them to a server, folder or website. Before compression, digital
pictures can be huge in size – but you need to find the right kind of compression
for your images and files.
• Lossy will save you the most space, but can affect your image
quality.
• Lossless saves less space, but won’t usually impact your image
quality.
46
[Link]