Ch2 Text CSC

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 | JUHAIDA ISMAIL 1
CONTENTS
1 3 5
IMPORTANCE USING FONT EDITING & DESIGN
OF TEXT IN A MULTIMEDIA TEXT ELEMENTS IN A TOOLS
PRESENTATION M/MEDIA PRESENTATION
2 4 6
UNDERSTANDING COMPUTERS & TEXT MULTIMEDIA &

FONTS & TYPEFACES HYPERTEXT
CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2

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.
Multimedia developers must use words

carefully and accurately. (the power of
meaning)
CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 3

IMPORTANCE OF TEXT
Factors affecting legibility of text :
(legibility - the quality of being clear enough to read)
SIZE BACKGROUND &

FOREGROUND COLORS
LEADING STYLE
UNDERSTANDING FONTS AND TYPEFACES
TYPEFACES VS. FONTS
TYPEFACES (the design) FONTS
A family of graphic characters A collection of characters of a

that usually includes many single size and style belong to
type sizes and styles. a particular typeface family.
Example : Example :
Verdana, Impact, Times New Verdana 20-point Bold Italic, Courier
Roman 18-point underlined

The study of fonts and typefaces includes

the following:
FONTS &
T Y P E FA C E S 1. Font Styles
2. Font Sizes
)
3. Cases
4. Serif vs. Sans Serif
1. FONT STYLES
Font styles include:
Boldface
Italic
Underlining

2. FONT SIZES
Font size is measured in points.

Character metrics are the
general measurements applied
to individual characters.
Kerning is the spacing between
CHARACTER PAIRS.
Leading is the space between
LINES. (line spacing)
Tracking is the spacing between
CHARACTERS.

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
an intercap (e.g. WorldWideWeb,
GlaxoSmithKline).

4. SERIF VS. SANS SERIF
(i) SERIF
A serif is the little decoration at the end of a
letter stroke.
Serif fonts are used for body text (e.g. Times New Roman,
Bookman, Palatino).
(ii) SANS SERIF
Sans serif fonts do not have a serif at the end
of a letter stroke (e.g. Arial, Tahoma, Verdana).
These fonts are used for headlines and bold statements.
TEXT CHARACTERISTICS
Ascender
Capital Height x-Height
FD xhp Serif p -Height

Point size Descender
Ascender : an upstroke on a character

Descender : the down stroke below the baseline of a character
BITMAP VS. VECTOR FONTS
BITMAP FONTS VECTOR FONTS
Bitmap fonts depend to the Vector fonts can be drawn in

size and the number of pixels. any size by scaling the vector
drawing primitives
mathematically.
File size is much smaller than
bitmaps.
TrueType and PostScript are
the examples of vector font
formats

BITMAP VS. VECTOR FONTS (cont.)
BITMAP FONTS VECTOR FONTS

JAGGIES & ANTIALIASING
Jaggies are the jagged edges you

see when a bitmapped image is
resized.
It is a consequence of the
underlying array of pixels from
which the image is composed.

JAGGIES & ANTIALIASING (cont.)
Antialiasing is a technique that can be

used to eliminate jagged edges.
It substitutes additional pixels in
other colors to fool the brain into
thinking it is seeing continuous lines
The technique is used to blend the
font into the background by
transitioning the color from the font
color to background.
This technique minimizes the
jagged edges making for a
smoother overall appearance.

USING TEXT ELEMENTS
The text elements used in

multimedia are:
Menus for navigation
Interactive buttons
Fields for reading
HTML documents
Symbols and icons

USING TEXT ELEMENTS
1. MENUS FOR NAVIGATION
A user navigates through content

using a menu.
A simple menu consists of a text list
of topics.

USING TEXT ELEMENTS
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.

USING TEXT ELEMENTS
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.

USING TEXT ELEMENTS
3. FIELDS FOR READING (cont.)
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.

USING TEXT ELEMENTS
4. HTML DOCUMENTS
HTML stands for Hypertext Markup

Language.
HTML documents are marked using
tags.
An advanced form of HTML is DHTML.
DHTML stands for Dynamic Hypertext
Markup Language.
DHTML uses Cascading Style Sheets
(CSS).

USING TEXT ELEMENTS
4. HTML DOCUMENTS (cont.)
Some of the commonly used tags

are:
The <B> tag for making text
boldfaced
The <OL> tag for creating an
ordered list
The <IMG> tag for inserting images

USING TEXT ELEMENTS
5. SYMBOLS & 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.

USING TEXT ELEMENTS
CHOOSING TEXT FONTS
Consider legibility and readability.

Avoid too many faces.
Use color purposefully.
Use anti-aliased text.
)
Use drop caps and initial caps for accent.
Minimize centered text.
Use white space.
Use animated text to grab attention.

COMPUTERS AND TEXT
PostScript, TrueType, and OpenType outline

fonts allow text to be drawn at any size without
jaggies. Anti-aliasing text and graphics creates
smooth boundaries between colors.
THE FONT WARS
)
PostScript
OpenType
TrueType

COMPUTERS AND TEXT
THE FONT WARS
1.POSTSCRIPT
PostScript is a method of describing an image in

terms of mathematical constructs.
PostScript characters are scalable and can be
)
drawn much faster.
The two types of PostScript fonts are Type 3 and Type
1.

COMPUTERS AND TEXT
THE FONT WARS (cont.)
2.TRUETYPE
Apple and Microsoft developed the TrueType

methodology.
TrueType is a system of scalable outline fonts
)
and can draw characters at low resolution.

COMPUTERS AND TEXT
THE FONT WARS (cont.)
3. OPENTYPE
Adobe and Microsoft developed OpenType, now

the international standard.
It incorporates the best features of PostScript and
)
TrueType.

COMPUTERS AND TEXT
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.

COMPUTERS AND TEXT
CHARACTER SETS (cont.)
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.
)
Mapping across platforms:
Fonts and characters are not cross-platform
compatible.
They must be mapped to the other machine using
font substitution.

FONT EDITING & DESIGN TOOLS
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.

FONT EDITING & DESIGN TOOLS (cont.)
CREATING ATTRACTIVE TEXTS
Applications that are used to enhance texts and images

include: Adobe Photoshop, TypeStyler, COOL 3D, HotTEXT and
TypeCaster

MULTIMEDIA & HYPERTEXT
Multimedia.
Hypertext system.
Using hypertext systems.
Searching for words.
Hypermedia structures.
Hypertext tools.

MULTIMEDIA & HYPERTEXT (cont.)
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.

HYPERTEXT
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.

USING HYPERTEXT
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.

USING HYPERTEXT (cont.)
Hypertext databases make use of proprietary

indexing systems.
Server-based hypertext and database engines are
)
widely available.

Typical methods for word searching in hypermedia systems are:
CATEGORICAL SEARCH
Selecting or limiting the documents, pages, or fields of text
within which to search for a word or words. (e.g. Songs,
Malay songs)
WORD RELATIONSHIP
)
Searching for the words according to their general proximity
and order. Example : birthday party and cake.
ADJACENCY
Searching for words occurring next to one another. (e.g.
widow, black)

(cont.) Typical methods for word searching in hypermedia

systems are:
ALTERNATES
Applying an OR criterion to search for two or more words.
(e.g.fish, OR prawn)
ASSOCIATION
)
Applying AND criterion to search for two or more words.
(e.g. ship, AND ferry)
NEGATION
Applying a NOT criterion. (e.g. programs NOT university)

(cont.) Typical methods for word searching in hypermedia systems

are:
TRUNCATION
Searching for word with any of its possible suffixes. Example :
geo# (geology, geometry)
INTERMEDIATE WORDS
)
Searching for words that occur between what might normally be
adjacent words, such as a middle name. (eg: Mahathir,
Mohamad)
FREQUENCY
Searching for words based on how often they appear.

HYPERMEDIA STRUCTURES
Links
Nodes
Anchors
Navigating hypermedia
structures

link
)
LINK
Links are connections between conceptual
elements.
Links are the navigation pathways and menus.
e.g. Links will connect Home with About Us
42
node
)
NODE
Nodes are accessible topics, documents, messages,
and content elements.
Nodes and links form the backbone of a knowledge
access system.
43
ANCHOR
)
An 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. 44
NAVIGATING HYPERMEDIA STRUCTURES

The simplest way to navigate hypermedia structures
is via buttons.
Location markers must be provided to make
navigation user-friendly.

HYPERMEDIA TOOLS
Two functions common to most hypermedia text

management systems are building (authoring) and
reading.
The functions of a builder are:
)
Creating links
Identifying nodes
Generating an index of words
46
Hypertext systems are used for:

Electronic publishing and reference works.
Technical documentation.
Educational courseware.
)
Interactive kiosks.
Electronic catalogs.

CHAPTER 2 : TEXT
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

THANK YOU

Ch2 Text CSC

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Ch2 Text CSC

Hochgeladen von

Copyright:

Verfügbare Formate

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 | JUHAIDA ISMAIL 1

UNDERSTANDING COMPUTERS & TEXT MULTIMEDIA &

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2

Text is a vital element of multimedia

Multimedia developers must use words

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 3

SIZE BACKGROUND &

TYPEFACES (the design) FONTS

A family of graphic characters A collection of characters of a

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 5

The study of fonts and typefaces includes

Font styles include:

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 7

Font size is measured in points.

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 8

A CAPITALIZED letter is referred to

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 9

FD xhp Serif p -Height

Ascender : an upstroke on a character

BITMAP FONTS VECTOR FONTS

Bitmap fonts depend to the Vector fonts can be drawn in

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 12

BITMAP FONTS VECTOR FONTS

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 13

Jaggies are the jagged edges you

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 14

Antialiasing is a technique that can be

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 15

The text elements used in

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 16

A user navigates through content

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 17

A button is a clickable object that

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 18

Reading a hard copy is easier

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 19

The taller-than-wide orientation

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 20

HTML stands for Hypertext Markup

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 21

Some of the commonly used tags

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 22

Symbols are concentrated text in the

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 23

Consider legibility and readability.

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 24

PostScript, TrueType, and OpenType outline

THE FONT WARS

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 25

PostScript is a method of describing an image in

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 26

Apple and Microsoft developed the TrueType

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 27

Adobe and Microsoft developed OpenType, now

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 28

The American Standard Code for Information

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 29

Unicode is a 16-bit architecture for multilingual text and

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 30

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 31

Applications that are used to enhance texts and images

CSC253 INTERACTIVE MULTIMEDIA| CHAPTER 2 32