2. A Multimedia Application is an Application which
uses a collection of multiple media sources e.g. text,
graphics, images, sound/audio, animation and/or
video.
Hypermedia can be considered as one of the
multimedia applications. Some examples of
multimedia applications are:
i. business presentations
ii. online newspapers
iii. distance education
iv. interactive gaming
v. advertisements, art and entertainment
vi. engineering, medicine, mathematics
vii. business, scientific research and spatial temporal
applications.
3. Other examples of Multimedia Applications include:
World Wide Web
Hypermedia courseware
Videoconferencing
Video-on-demand
Interactive TV
Groupware
Home shopping
Games
Virtual reality
Digital video editing and production systems
Multimedia Database systems
4. Typically, a Hypertext refers to a text which contains
links to other texts.
Hypertext is therefore usually non-linear
In 1990, Tim Berners-Lee proposed the World Wide
Web to CERN (European Center for Nuclear
Research) with aim of achieving collaboration in
organizing and sharing of research work and
experimental results.
5. HTML is defined using SGML and is a language for publishing
hypermedia on the web.
It uses ASCII format which makes it compatible with different
computer hardware and this makes it acceptable for global
exchange of information.
The current version of HTML is HTML5 developed in 2019. HTML is
designed to use tags in order to describe document elements. The
tags are in the format <token params> to define the start point of a
document element and </token> to define the end of the element.
Some elements have only inline parameters and do not require
ending tags.
HTML divides the document into a HEAD and a BODY part as
shown below: <HTML> <HEAD> ... </HEAD>
<BODY> ….. </BODY>
6. HyperMedia s not constrained to be text-based. It is
an enhancement of hypertext, the non-sequential
access of text documents, using a multimedia
environment and providing users the flexibility to
select which document they want to view next, based
on their current interests.
The path followed to get from document to document
changes from user to user and is very dynamic. It can
include other media, e.g., graphics, images, and
especially the continuous media - sound and video.
The World Wide Web (WWW) is the best example of
hypermedia applications.
7. Hyper media provides a structure of links
Hypertext words are linked to other elements
Hypertext is usually searchable by software
robots
8. Multimedia - combines text, graphics
and audio
Interactive multimedia - gives user
control over what and when content is
viewed (non-linear)
Hypermedia -provides a structure of
linked elements through which user
navigates and interacts
9. Hypermedia elements are called nodes
Nodes are connected using links
A linked point is called an anchor
10. Link - connections between conceptual elements (navigation
pathways and menus)
Node - contains text, graphics sounds
Anchor - the reference from one document to another
document, image, sound or file on the web
Link anchor - where you came from
11. Doug Englebart - inventor of mouse
1965 Ted Nelson coined the word
“hypertext”
Computer-based hypertext systems will
fundamentally alter the way humans
think, approach literature and the
expression of ideas
Hotlinks - lead user from one reference
to another
12. Searching for words
boolean search using AND, OR, NOT
truncation - using only part of word,
such as geo might yield result with
geology, geography, George, etc.
Search engines employ “robots” to
visit web pages and create
indexes.
13. Building or authoring
builder creates links, identifies nodes,
generates an index of words
Reading
both linear and increasingly non-linear
Becoming more comfortable with non-
linear hypertext systems will change
the way we think….
14. Building or authoring
builder creates links, identifies nodes,
generates an index of words
Reading
both linear and increasingly non-linear
Becoming more comfortable with non-
linear hypertext systems will change
the way we think….
15. Basically, a Multimedia system has four
vital characteristics:
Multimedia systems must be computer
computer
controlled
controlled
Multimedia systems are integrated
integrated
The information they handle must be
represented digitally
digitally
The interface to the final presentation of
media Is usually interactive
interactive
16. Multimedia systems may have to render a
variety of media at the same instant distinction
from normal applications. There is a temporal
relationship between many forms of media
(e.g. Video and Audio). Multimedia systems
are often required for:
1. Sequencing within the media -- playing frames in
correct order/time frame invideo
2. Synchronisation -- inter-media scheduling (e.g.
Video and Audio). Lip synchronisation is clearly
important for humans to watch playback of video
and audio and even animation and audio. Ever
tried watching an out of (lip) sync film for a long
time?
17. The key issues multimedia systems need to
deal with here are:
1. how to represent and store temporal /time
based information
2. how to strictly maintain the temporal
relationships on play back/retrieval
3. what are the processes involved in tackling
these issues?
4. have to be represented digitally, i.e.
translated from the analog source to the
digital representation.
18. The following features are desirable for a Multimedia
System: -
1. Very High Processing Power: This is a requirement for
dealing with large data processing and real time delivery
ofmedia.
2. Multimedia Capable File System: This feature is essential for
delivering real-time media -- e.g. Video/Audio Streaming.
Special Hardware/Software needed e.g. RAID technology.
3. Data Representations/File Formats that support
multimedia: Data representations/file formats should be easy
to handle yet allow for compression/decompression inreal-
time.
4. Efficient and High I/O: Input and output to the file subsystem
needs to be efficient and fast. It is necessary to allow for real-
time recording as well as playback of data. e.g. Direct to Disk
recording systems.
19. Special Operating System: A special operating system is
required to provide access to file system and process data
efficiently and quickly. Consequently, the multimedia
system needs to support direct transfers to disk, real-time
scheduling, fast interrupt processing, I/O streaming etc. –
Storage and Memory: Large storage units(oftheorderof50 -
100 Gb or more) and large memory (50 -100 Mb or more).
Large Caches also required and frequently of Level 2 and 3
hierarchy for efficient management.
Network Support: Client-server systems commonly known
as distributed systems.
Software Tools: User friendly tools are needed to handle
media, design and develop applications, deliver media.
20. 1.
1. Capture devices
Capture devices-Video Camera, Video Recorder, Audio
Microphone, Keyboards, mice, graphics tablets, 3D input
devices, tactile sensors, VR devices. Digitizing/Sampling
Hardware
2.
2. Storage Devices
Storage Devices-Hard disks, CD-ROMs, Jaz/Zip drives,
DVD, etc
3.
3. Communication Networks
Communication Networks-Ethernet, Token Ring, FDDI,
ATM, Intranets, Internets.
4.
4. Computer Systems
Computer Systems -Multimedia Desktop machines,
workstations, MPEG/VIDEO/DSP Hardware
5.
5. Display Devices
Display Devices -CD-quality speakers, HDTV,SVGA, Hi-
Resolution monitors, Color printers etc.
21. Main multimedia content include:
1. Texts and Static Data
2. Graphics
3. Images
4. Audio
5. Video
23. A pixel, short for "picture element", is the unit of
measurement for the size and quality of a digital image or
display. In digital photography, it refers to the smallest unit of
a digital image captured by a camera's image sensor. A
specification for image resolution is a megapixel, which is
equal to one million pixels.
It is commonly used to measure the resolution of digital
cameras and the quality of digital images. For example, a
camera with a 12-megapixel sensor can capture images with
a resolution of approximately 12 million pixels, resulting in
higher detail and clarity. Higher megapixel counts are
generally associated with higher-resolution images.
An image is a 2-dimensional plane of pixels where every
pixel have a domain of colors.
A Graphics is a graphical object-oriented framework, which
can be 1-dim (vector), 2-dim (plane), 3-dim (object), 4-dim
(animation)
24. Importance of text in a multimedia
presentation.
Understanding fonts and typefaces.
Using text elements in a multimedia
presentation.
Computers and text.
Font editing and design tools.
Multimedia and hypertext.
25. The sources of this media are the keyboard,
floppies, disks and tapes.
Text files are usually stored and input
character by character. Files may contain raw
text or formatted text e.g HTML, Rich Text
Format (RTF)or a program language source
(C, Pascal,etc.)
The basic storage of text is 1 byte per
character (text or format character). For other
forms of data e.g. Spreadsheet files some
formats may store format as text (with
formatting) others may use binary encoding
26. Text is a basic media that is used to
explain how applications work, guide
users, and provide information.
It can be presented in linear or non-
linear formats.
Factors like background/foreground
colors, size, and style affect the
legibility of text.
30. A typeface is a family of graphic characters
that includes many type sizes and styles (such as
Times, Arial, Helvetica)
A font is a collection of characters of a single
size and style belonging to a typeface family
(such as bold, italic)
Font sizes are in points 1 point = 1/72 inch
(measured from top to bottom of descenders in capital letter)
X-height is the height of the lower case letter x
34. Computers can
adjust the line spacing (called leading)
leading
and
the space between pairs of letters,
called kerning
35. PostScript, TrueType and Master fonts can be altered
Bitmapped fonts cannot be altered
The computer draws or rasterizes a letter on the screen with
pixels or dots.
36. When type was set by hand, the type for
a font was kept in a drawer or case,
The upper drawer held the capital
letters, and the lower drawer held the
smaller letters
From this we get the terms uppercase
and lowercase
37. Password, and paths in a URL are case
sensitive ( that is “home” is different from
“HOME”)
It is easier to read words that have a mixture
of upper and lower case letters rather than
all upper case
Computer terms use an intercap for
readability as in PageMaker, or LastName
38. WYSIWYG - What you see is what you get!
Aim for a balance between too much text and
too little
Make web pages no more than
1 to 2 screenfuls of text
Bring the user to the destination with as few
actions as possible
39. Use the most legible font available
Use as few different faces as possible ( too
many called “ransom-note” typography
Use bold and italics to convey meaning
Adjust line spacing ( leading)
Adjust the spacing between letters in headings
to remove gaps
Use colors and background to make type stand
out
Use meaningful word for links and menus
40. Anti-aliasing or dithering blends colors
along the edges of letters to create gentle
effect.
Experiment with shadows
Surround headlines with white space
Try attention grabbing effect with color,
word art or large drop letters at the
beginning of text
41. A Multimedia project or web site
should include:
content or information
navigation tools such as menus, mouse
clicks, key presses or touch screen
some indication or map of where the user is
in the presentation
42. Buttons are objects that make things happen
when they are clicked
Use common button shapes and sizes
Label them clearly
BE SURE THEY WORK!
43. Reading from a computer screen is slower than
from a book
People blink 3-5 times/minute, using a
computer and 20-25 times/minute reading a
book
This reduced eye movement causes fatigue,
dryness
Try to present only a few paragraphs per page
44. Monitor use wider-than-tall aspect ratios
called landscape
Most books use taller-than- wide orientation,
called portrait
Don’t try to shrink a full page onto a monitor
portrait
landscape
45. Standard document format on the web is
called Hypertext Markup Language ( HTML)
Originally designed for text not multimedia -
now being redesigned as Dynamic HTML
( DHTML), which uses CSS (Cascading Style
sheets) and permits defining text choices.
Specify typefaces, sizes colors and properties
by “marking up” the text with tags (such as
<B>, </B>)
46. Symbols act like “visual words” to convey
meaning, (called icons)
MAC - trash can
Windows - hourglass
Icons and sound are more easily
remembered than words
It is useful to label icons for clarity
47. To grab a viewer’s attention:
let text “fly” onto screen
rotate or spin text, etc.
Use special effects sparingly or they
become boring
48. Fonts smaller than 12 point are not
very legible on a monitor
Never assume the fonts installed on your
computer are on all computers
Stay with TrueType fonts ordinarily
ASCII character set - most common
Extended Character set - used for HTML
UNICODE –supports characters for all known
languages
49. Developed in 1989 for multilingual text
Contains 65,000 characters form all
known languages and alphabets
Where several languages share a set of
symbols, they are grouped into a
collection called scripts ( eg. Latin,
Arabic, Cyrillic, Greek, Tibetan, etc.)
Shared symbols are unified into
collections called scripts
51. Viewing a presentation on either MAC and PC
reveals differences
Fonts must be mapped from one machine to
another
If same font doesn’t exist on the other
machine, one is substituted
( called font substitution)
To avoid this, convert to bitmaps
54. Graphics are usually constructed by the composition of
primitive objects such as lines, polygons, circles, curves and
arcs.
Graphics are usually generated by a graphics editor program
(e.g. Freehand) or automatically by a program (e.g. Postscript
usually generated this way).
Graphics are usually editable or revisable (unlike Images).
Graphics input devices include: keyboard (for text and cursor
control), mouse, trackball or graphics tablet.
Graphics files may adhere to a graphics standard (OpenGL,
PHIGS, GKS) Text may need to stored also.
Graphics files usually store theprimitive assembly and do not
take up a very high overhead.
55. Images are still pictures which (uncompressed) are represented as
a bitmap (a grid of pixels). They may be generated by programs
similar to graphics or animation programs. But images may be
scanned for photographs or pictures using a digital scanner or
from a digital camera. Some Video cameras allow for still image
capture also.
Analog sources will require digitizing. Digital images in form of
photographs, line art or slides could be digitized as digitize
images, where applications such as Adobe Photoshop could be
used to perform editing and other formatting as may be required.
In using image-editing software, text and images could be
combined by multimedia developers in order to create any work
of art one could imagine.
Examples :Adobe Photoshop. Adobe Photoshop is a common among
designers and photographers, Gimp. Gimp is an acronym that stands for
Gnu Image Manipulation Program, Corel PaintShop Pro, Pixlr
Editor,Stencil,Adobe Lightroom.Capture One,Canva.
56. Raster images, also known as bitmaps, are comprised
of individual pixels of color. Each color pixel
contributes to the overall image.
Raster images might be compared to pointillist
paintings, which are composed with a series of
individually-colored dots of paint.
Each paint dot in a pointillist painting might represent
a single pixel in a raster image. When viewed as an
individual dot, it’s just a color; but when viewed as a
whole, the colored dots make up a clear and detailed
painting.
The pixels in a raster image work in the same manner, which
provides for rich details and pixel-by-pixel editing. Digital cameras
create raster images, and all the photographs you see in print and
online are raster images.
58. Unlike raster graphics, which are comprised of colored pixels
arranged to display an image, vector graphics are made up of paths,
each with a mathematical formula (vector) that tells the path how it is
shaped and what color it is bordered with or filled by.
Since mathematical formulas dictate how the image is rendered,
vector images retain their appearance regardless of size. They can be
scaled infinitely. Vector images can be created and edited in
programs such as Illustrator, CorelDraw, and InkScape
Though vectors can be used to imitate photographs, they’re best-
suited for designs that use simple, solid colors.
Vector images are comprised of shapes, and each shape has its own
color; thus, vectors cannot achieve the color gradients, shadows, and
shading that raster images can
True vector graphics are comprised of line art, sometimes called
wireframes, that are filled with color.
A wireframe is a two-dimensional skeletal outline of a webpage or app. Wireframes
provide a clear overview of the page structure, layout, information architecture, user flow,
functionality, and intended behaviors. Styling, color, graphics, and other design elements
are kept to a minimum.
60. They are really just a list of graphical objects such
as lines, rectangles, ellipses, arcs, or curves—
called primitives.
Drawings programs, also called vector graphics
programs, are used to create and edit these vector
graphics.
Vectors can be infinitely scaled without loss of
quality, they’re excellent for logos, illustrations,
engravings, etchings, product artwork, signage,
and embroidery.
Vectors should not be used for digital paintings or
photo editing; however, they’re perfect for projects
such as printing stickers that do not include photos.
61. The difference is easy to see when you zoom on in a raster
versus a vector; you can see individual pixels in the raster
file, but the vector is still smooth. With vectors, resolution
is not a concern.
62. 2. Raster images are capable of displaying a myriad
of colors in a single image and allow for color
editing beyond that of a vector image. They can
display finer nuances in light and shading at the
right resolution. Vector images are scalable, so
that the same image can be designed once and
resized infinitely for any size application-from
business card to billboard.
3. Rasterized images, on the other hand, are
perfectly capable of rendering true-to-life
graphics: visually-perfect color blends, shades,
gradients, and shadows. Of course, unlike vectors,
they’re still limited by dimensional size and
resolution.
63. The most common raster file types include JPG, GIF, PNG, TIF,
BMP, and PSD. The most common vector file types are AI, CDR,
and SVG. Both rasters and vectors can be rendered in EPS and
PDF format, where the software that created the file dictates
whether it’s a raster or vector file.
Common vector creation and editing programs include Adobe
Illustrator, CorelDraw, and InkScape. The most popular raster
editors are Photoshop (which has limited vector capabilities) and
GIMP.
Because rasterized images must contain all the information
necessary to render the image (pixels, colors, arrangement of
pixels, etc.), they can have large file sizes – and the higher
resolution and dimensional size, the larger the file.
Compression can help minimize those file sizes, but compared to
vectors, rasters take up a lot of space-Since vectors rely on
calculations to be performed by the programs that load them, the
only information they need to contain are their mathematical
formulas.
64. Raster Vector
Comprised of pixels, arranged to
form an image
Comprised of paths, dictated by
mathematical formulas
Constrained by resolution and
dimensions
Infinitely scalable
Capable of rich, complex color
blends
Difficult to blend colors without rasterizing
Large file sizes (but can be
compressed)
Small file sizes
File types
include .jpg, .gif, .png, .tif, .bmp, .psd
; plus .eps and .pdf when created by
raster programs
File types include .ai, .cdr, .svg; plus .eps
and .pdf when created by vector programs
Raster software includes Photoshop
and GIMP
Vector software includes Illustrator,
CorelDraw, and InkScape
Perfect for “painting” Perfect for “drawing”
Capable of detailed editing Less detailed, but offers precise paths
65. Vector graphics have a number of advantages
over raster graphics. These include:
1. Precise control over lines and colors.
2. Abilitytoskewandrotateobjectstoseethemfromdif
ferentanglesoraddperspective.
3. Abilitytoscaleobjectstoanysizetofittheavailables
pace.Vectorgraphicsalwaysprintatthebestresolu
tionoftheprinteryouuse,nomatterwhatsizeyouma
kethem.
4. Color blends and shadings can be easily
changed.
5. Text can be wrapped around objects.
66. Many projects combine raster and
vector images together: example in a
brochure, for example, might include a
corporate logo (vector) and a photo of
happy customers (raster)
Often coupled in layout software such as
InDesign or QuarkXpress (though
Illustrator and Photoshop can also be
used to pair raster and vector images).
67. Representation of images could be done using techniques known as
data type.
Data type could be in the likes of monochrome and colored images
where monochrome images is created using single color whereas
colored image is created using multiple colors. The commonly used
data types of images are as follows
1-bit images: Image is represented in pixels.
A pixel is a picture elements in a digital image. 1 bit image can only
store each pixel as a single bit of either 0 or 1.
A bit has only two states represented in either on or off, white or
black, true or false and so on. When such form of images exist, it is
referred to as 1-bit CIT 742 MODULE 4 95 monochrome images, this is
because it contains one color that is black or white for off and on state
respectively.
One of the challenges of 1-bit image is that the clarity or quality is very low. A 1-bit
image with resolution 640*480 needs a storage space of 640*480 bits. 640 x 480 bits. =
(640 x 480) / 8 bytes = (640 x 480) / (8 x 1024) KB= 37.5KB.
68. 8-gray level : Every pixel of an 8-bit Gray level image is
represented by a single byte (8-bits).
This means that for each pixel of such image
representation, can hold up to 28 = 256 values ranging
from 0 – 255.
Hence, the brightness of each pixel is measured in a scale
of black (where 0 represents no brightness or intensity) to
white (with 255 being of full brightness or intensity).
For instance, one could have a dark pixel which could be
represented with a value of 15 and a bright one of a value
of 240.
8-bit image with resolution 640 x 480 needs a storage space of 640 x 480
bytes=(640 x 480)/1024 KB= 300KB. Therefore an 8-bit image needs 8
times more storage space than 1-bit image
69. This has each pixel represented with 3 bytes usually RGB
(Red, Green and Blue).
A true color is known with 256 shades of RGB for a total
of 16777216 color variations. This gives the opportunity
of representing RGB colours in a large number of
variations of images ranging to high quality photo
graphic images or complex graphics.
Many of the 24-bit color images are stored as 32-bit
images with an extra byte for each pixel created to
illustrate a special effect information and is known as an
Alpha value.
A 24-bit color image with resolution 640 x 480 needs a storage
space of 640 x 480 x 3 bytes = (640 x 480 x 3) / 1024=900KB without
any compression.
Also 32-bit color image with resolution 640 x 480 needs a storage
space of 640 x 480 x 4 bytes= 1200KB without any compression
70. Disadvantages of a 24-bit color image - It requires large
storage space Many monitors can display only 256 different
colours at any one time. Thus, it is wasteful to store more than
256 different colours in an image.
71. In this data type, 8 bit or 1 byte represents a pixel and it
is the method of storing an image information in a
computer memory where the maximum number of colour
that could be displayed at once is 256.
It consist of two parts namely:
1.
1. Color map
Color map describing what colours are present in the
image
2.
2. The array of index
The array of index value for each pixel in the image.
Most times, colours are selected from a palette of
16,777,216 colours (24bits: 8 red, 8 green and 8 blue)
A 8-bit color image with resolution 640 x 480 needs
a storage space of 640 x 480 bytes=(640 x 480) /
1024KB= 300KB without any compression.
72. GIF- Graphics Interchange Formats- This is the
most popularly used on internet and this is as a result
of its compact size.
It supports 256 colours and is recommended for small
icons used for simple diagram and navigational
purposes.
It is lossless only for images of 256 colours or less.
73. Developed by the Joint Photographic Experts
Group.
It is a bitmap image file and can store
information as 24-bit colour.
JPEG has become the most popularly used
picture format in Web and digital cameras saved
images are of JPEG format too.
It uses a lossy compression
lossy compression technique and works
well with photographs, artwork and similar
material but not so well with lettering, simple
cartoons and line drawings.
75. A bitmap is an array of bits that specify the
color of each pixel in a rectangular array of
pixels. The number of bits devoted to an
individual pixel determines the number of
colors that can be assigned to that pixel.
The bitmap file format (BMP) data types is one
of those that are not suitable for internets and
this is due to its uncompressed format.
It can store many different type of image of 1
bit image, grayscale image, 8 bit color image,
24 bit RGB image and so on.
76. PDF format is usually platform independent.
It is a vector graphics with in-built pixel graphics
including compression options. It gives the
opportunity to print from any document to a PDF file
in as much as there exist an Adobe Acrobat on the
system
EXIF- Exchange Image File- Exif includes
specification of file format for audio that
accompanies digital images. It is an image format
used by digital cameras.
WMF- Windows MetaFile- WMF metafiles are
small, flexible and can only display images properly
using their proprietary softwares only. It is a vector
file format for MS-Windows operating environment
77. PICT is a graphics file format introduced on the
original Apple Macintosh computer as its
standard metafile format.
It allows the interchange of graphics (both
bitmapped and vector), and some limited text
support, between Mac applications, and was the
native graphics format of QuickDraw.PICT
images are useful in Macintosh software
development and should be avoided in desktop
publishing.
Photoshop- Photoshop file format is created by
Adobe and it can be imported directly into most
desktop publishing applications.
