1 1/16/2014
Prepared by: Haval Ahmed Aqrawi
2 1/16/2014
Overview
• 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.
3 1/16/2014
Importance of Text in a
Multimedia Presentation
• Words and symbols in any form, spoken or
written, are the most common means of
communication.
• Text is a vital element of multimedia menus,
navigation systems, and content.
4 1/16/2014
Importance of Text in a
Multimedia Presentation
Factors affecting legibility of text:
• Size.
• Background and foreground color.
• Style.
• Leading.
5 1/16/2014
Understanding Fonts and
Typefaces
• A ‘typeface’ is a family of graphic characters that
usually includes many type sizes and styles.
Figure 4-1
The
• A ‘font’ is a collection of characters of a single
measurement
size and style belonging to a particular typefaceof type.
family.
6 1/16/2014
Understanding Fonts and
Typefaces
1. Font styles:
• Boldface
• Italic
• Underlining
• Outlining
7 1/16/2014
Understanding Fonts and
Typefaces
2. Font Sizes:
• Font size is measured in points.(1pt=0.138 inch)
• Character metrics are the general
measurements applied to individual
characters.
• Kerning is the spacing between character
pairs.
• Leading is the space between lines.
8 1/16/2014
Understanding Fonts and
Typefaces
3. Cases:
• A capitalized letter is referred to as 'uppercase',
while a small letter is referred to as 'lowercase.‘.
• Placing an uppercase letter in the middle of a
word is referred to as intercap.
9 1/16/2014
Understanding Fonts and
Typefaces
4. Serif Versus Sans Serif:
• Serif is the little decoration at the end of a
letter stroke.
• Serif fonts are used for body text.
• Sans serif fonts do not have a serif at the end
of a letter stroke.
• These fonts are used for headlines and bold
statements.
10 1/16/2014
Using Text Elements in a
Multimedia Presentation
The text elements used in multimedia are:
1. Menus for Navigation:
• A user navigates through content using a menu.
• A simple menu consists of a text list of topics.
11 1/16/2014
Using Text Elements in a
Multimedia Presentation
2. Interactive Buttons:
• A button is a clickable object that executes a
command when activated.
• Users can create their own buttons from
bitmaps and graphics.
• The design and labeling of the buttons should
be treated as an industrial art project.
12 1/16/2014
Using Text Elements in a
Multimedia Presentation
3. Fields for Reading:
• Reading a hard copy is easier and faster than
reading from the computer screen.
• A document can be printed in one of two
orientations - portrait or landscape.
13 1/16/2014
Using Text Elements in a
Multimedia Presentation
3. Fields for Reading (continued):
• The taller-than-wide orientation used for
printing documents is called portrait.
• The wider-than-tall orientation that is normal
to monitors is called landscape.
14 1/16/2014
Using Text Elements in a
Multimedia Presentation
4. HTML Documents:
• HTML stands for Hypertext Markup Language.
• It is the standard document format used for
Web pages.
• HTML documents are marked using tags.
15 1/16/2014
Using Text Elements in a
Multimedia Presentation
4. HTML Documents (continued):
• An advanced form of HTML is DHTML.
• DHTML stands for Dynamic Hypertext Markup
Language.
• DHTML uses Cascading Style Sheets (CSS).
16 1/16/2014
Using Text Elements in a
Multimedia Presentation
4. HTML Documents (continued):
• Some of the commonly used tags are:
The <B> tag for making text bold faced.
The <OL> tag for creating an ordered list.
The <IMG> tag for inserting images.
17 1/16/2014
Using Text Elements in a
Multimedia Presentation
5. Symbols and Icons:
• Symbols are concentrated text in the form of stand-
alone graphic constructs.
• They are used to convey meaningful messages.
• Symbols used to convey human emotions are called
emoticons.
• Icons are symbolic representations of objects and
processes.
18 1/16/2014
Figure 4-3
Some symbols are easily recognized but
may still require text titles; “smiley”
symbols, or emoticons, used in internet
conversation to express mood, are
made up entirely of text and
punctuation characters.
19 1/16/2014
Using Text Elements in a
Multimedia Presentation
• Anti-aliased text must be used when a gentle and
blended look for titles and headlines is needed.
• Ideas and concepts can be highlighted by making
the text bold or by emphasizing text.
• A pleasant look can be created by experimenting
with different font faces, sizes, leadings, and
kerning.
20 1/16/2014
Computers and Text
1. The font wars:
a. PostScript:
• PostScript is a method of describing an
image in terms of mathematical constructs.
• PostScript characters are scalable and can
be drawn much faster.
21 1/16/2014
Computers and Text
a. PostScript (continued):
• The two types of PostScript fonts are Type 3 and
Type1.
• Adobe developed Adobe Type Manager for
displaying PostScript fonts on both Macintosh
and Windows.
22 1/16/2014
Figure 4-4
Anti-aliasing text and
graphics creates
“smooth” boundaries
between colors. The
top row of letters is
not anti-aliased; the
bottom row is.
23 1/16/2014
Computers and Text
b. TrueType:
• Apple and Microsoft
developed the TrueType
methodology.
• TrueType is a system of
scalable outline fonts, and
can draw characters at low
resolution.
24 1/16/2014
Computers and Text
2. Character sets:
• The American Standard Code for Information
Interchange (ASCII) is a 7-bit coding system.
• The extended character set is commonly filled
with ANSI standard characters.
• The ISO-Latin-1 character set is used while
programming the text of HTML pages.
25 1/16/2014
Figure 4-6
KeyCaps on
the Macintosh
and
Charmap.exe
in Windows let
you see which
key to press on
the keyboard
to print a
character in a
font face.
26 1/16/2014
Character Sets
• Unicode is a 16-bit architecture for multilingual
text and character encoding.
• The shared symbols of each character set are
unified into collections of symbols called scripts.
27 1/16/2014
Character Sets
Mapping across platforms:
• Fonts and characters are not cross-platform
compatible.
• They must be mapped to the other machine
using font substitution.
28 1/16/2014
Font Editing and Design Tools
Figure 4-7
Portion of a five-
language web site
using normal HTML
code for the Roman
languages and
screen-captured
graphic images to
display the Chinese
and Japanese
translations.
29 1/16/2014
Font Editing and Design Tools
1. Macromedia Fontographer:
• Fontographer is a specialized graphics editor.
• It is compatible with both Macintosh and
Windows platform.
• It can be used to develop PostScript,
TrueType, and bitmapped fonts.
• It can also modify existing typefaces and
incorporate PostScript artwork.
30 1/16/2014
Figure 4-8
Fontographer is a
powerful font
editor for
Macintosh and
Windows.
31 1/16/2014
Font Editing and Design Tools
2. Creating Attractive Texts:
• Applications that are used to enhance texts
and images include:
Adobe Photoshop
TypeStyler
COOL 3D
HotTEXT
TypeCaster
32 1/16/2014
Figure 4-9
Image-editing
applications let
you make
pretty text.
33 1/16/2014
Figure 4-10
COOL 3D and
HotTEXT let you
extrude, wrap,
twist, and rotate
characters and
adjust lighting
and texture effects
for high-impact 3-
D titles.
34 1/16/2014
Multimedia and Hypertext
1. Multimedia:
• Multimedia is defined as the combination of
text, graphics, and audio elements into a
single presentation.
• When the user assumes control over the
presentation, it is called interactive
multimedia.
• Interactive multimedia becomes hypermedia
when a structure of linked elements is
provided to the user for navigation and
interaction.
35 1/16/2014
Multimedia and Hypertext
2. Hypertext System:
• Hypertext is defined as the organized cross-
linking of words, images, and other Web
elements.
• A system in which words are keyed or indexed
to other words is referred to as a hypertext
system.
• A hypertext system enables the user to
navigate through text in a non-linear way.
36 1/16/2014
Using Hypertext Systems:
• Information management and hypertext
programs present electronic text, images, and
other elements in a database fashion.
• Software robots visit Web pages and index entire
Web sites.
37 1/16/2014
Using Hypertext Systems:
• Hypertext databases make use of proprietary
indexing systems.
• Server-based hypertext and database engines
are widely available.
38 1/16/2014
Searching for words:
Typical methods for word searching in hypermedia
systems are:
• Categorical search
• Word relationship
• Adjacency
• Alternates
• Association
39 1/16/2014
Multimedia and Hypertext
Typical methods for word searching in hypermedia
systems are (continued):
• Negation
• Truncation
• Intermediate words
• Frequency
40 1/16/2014
Multimedia and Hypertext
5. Hypermedia Structures:
a. Links:
• Links are connections between conceptual
elements.
• Links are the navigation pathways and menus.
41 1/16/2014
Multimedia and Hypertext
5. Hypermedia Structures (continued):
b. Nodes:
• Nodes are accessible topics, documents,
messages, and content elements.
• Nodes and links form the backbone of a
knowledge access system.
42 1/16/2014
Multimedia and Hypertext
5. Hypermedia Structures (continued):
c. Anchors:
• Anchor is defined as the reference from one
document to another document, image, sound,
or file on the Web.
• The source node linked to the anchor is referred
to as a link anchor.
• The destination node linked to the anchor is
referred to as a link end.
43 1/16/2014
Multimedia and Hypertext
5. Hypermedia Structures (continued):
d. Navigating Hypermedia Structures:
• The simplest way to navigate hypermedia
structures is via buttons.
• Location markers must be provided to make
navigation user-friendly.
44 1/16/2014
Hypertext Tools
The functions of ‘builder’ are:
• Creating links.
• Identifying nodes.
• Generating an index of words.
45 1/16/2014
Hypertext Tools
Hypertext systems are used for:
• Electronic publishing and reference works.
• Technical documentation.
• Educational courseware.
• Interactive kiosks.
• Electronic catalogs.
46 1/16/2014
Summary
• Text is one of the most important elements of multimedia.
• The standard document format used for Web pages is
called HTML.
• Multimedia is the combination of text, graphics, and audio
elements into a single presentation.
• A hypertext system enables the user to navigate through
text in a non-linear way.
