com 205 multimedia applications
DESCRIPTION
COM 205 Multimedia Applications. St. Joseph’s College Fall 2004. Chapter 4. Text. 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. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/1.jpg)
COM 205Multimedia Applications
St. Joseph’s CollegeFall 2004
![Page 2: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/2.jpg)
Chapter 4
Text
![Page 3: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/3.jpg)
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.
![Page 4: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/4.jpg)
• Text came into use about 6,000 years ago
Text in History
![Page 5: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/5.jpg)
Revolution in Communication• Using symbols for communication
relatively recent - 6,0000 years old• 15th Century- Johann Gutenburg
printing press revolutionized information
• Recently - another revolution - the World Wide Web and its native language - HTML
![Page 6: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/6.jpg)
The Power of Meaning and the Importance of Text
Titles
Menus
Navigational aids
•Words must be chosen carefully•Words appear in:
•Test the words you plan to use•Keep a thesaurus handy
![Page 7: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/7.jpg)
Using Text in MultimediaType terminology
•TypefaceArial
CourierTimes
•Fonts•Points•Styles•Leading•Kerning
![Page 8: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/8.jpg)
Fonts and Faces• 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
![Page 9: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/9.jpg)
Character Metrics
![Page 10: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/10.jpg)
Factors affecting legibility of text– Size.– Background and foreground color.– Style.– Leading (pronounced “ledding”).
![Page 11: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/11.jpg)
Styles• Examples of styles are boldface and italic
Italic
Bold
Underlined
![Page 12: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/12.jpg)
Leading and KerningComputers can • adjust the line spacing (called
leading) leading
and• the space between pairs of letters, called kerning
![Page 13: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/13.jpg)
Fonts and Faces• 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.
![Page 14: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/14.jpg)
Cases• 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
![Page 15: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/15.jpg)
Case Sensitive• 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
![Page 16: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/16.jpg)
Serif and Sans Serif• Type either has a little decoration at
the end of the letter - called a serif • or it doesn’t - sans serif ( “sans”
from the French meaning without)• Examples ( Times - serif “T” )
( Arial - sans serif “T”)• Use what is appropriate to convey
your message
![Page 17: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/17.jpg)
Using Text In Multimedia• 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
![Page 18: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/18.jpg)
Text Font Design Tips• 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
![Page 19: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/19.jpg)
More Text Font Design Tips• 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
![Page 20: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/20.jpg)
Menus For Navigation• 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
![Page 21: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/21.jpg)
Buttons for Interaction• Buttons are objects that make things
happen when they are clicked• Use common button shapes and
sizes • Label them clearly• BE SURE THEY WORK!
![Page 22: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/22.jpg)
Fields for Reading• 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
![Page 23: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/23.jpg)
Portrait vs. Landscape• 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
portraitlandscape
![Page 24: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/24.jpg)
HTML Documents• 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>)
![Page 25: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/25.jpg)
HTML Documents• The Font tag is used to specify the
font to be displayed (if present)
• <font face = “Verdana, Arial, Times”>
• If those fonts are not on the system, the default is used ( see p. 55-57 for common fonts)
![Page 26: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/26.jpg)
Symbols and Icons• 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• See “smileys” in textbook (p. 61)
![Page 27: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/27.jpg)
Animating Text• To grab a viewer’s attention:
– let text “fly” onto screen– rotate or spin text, etc.
• Use special effects sparingly or they become boring
![Page 28: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/28.jpg)
Computers and Text• Mac standard - 72 pixels/ inch• PC - VGA - 96 pixels/inch• Screen ( 640 pixels across x 480
down, called 640 x480 resolution)• Today much higher resolution
possible
![Page 29: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/29.jpg)
Fonts “Wars”• Apple - Adobe PostScript page description
font language– describes an image in terms of
mathematical constructs (Bezier curves)– Can be scaled larger or smaller– Currently > 6,000 typefaces available
• Apple & Microsoft created TrueType
![Page 30: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/30.jpg)
Computers and TextAllow text to be drawn at any size without “jaggies”, by anti-aliasing the edges of the characters
![Page 31: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/31.jpg)
Fonts and Characters• 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
![Page 32: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/32.jpg)
Unicode• 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
![Page 33: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/33.jpg)
Unicode • Numbers• Mathematical symbols• Punctuation• Arrows, blocks and drawing shapes• Technical symbols
![Page 34: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/34.jpg)
Mapping Text Across Platforms• 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
![Page 35: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/35.jpg)
Representing Languages• Some contain different symbols• Others represent an entire concept
with a single symbol (as in some Asian languages)
• Translating into another language is called localization
![Page 36: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/36.jpg)
Font Editing and Design Tools• Allow you to create your own fonts
– ResEdit for MAC– Fontographer (from Macromedia) caan be
used to create Postscript, TrueType and bitmapped fonts for MAC, PB, SUN includes a freehand drawing tool
– 3D programs, such as COOL 3D and HotTEXT, create special effects
– See text for descriptions
![Page 37: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/37.jpg)
Font Editing and Design Tools– Fontographer (from Macromedia)
![Page 38: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/38.jpg)
Editing and Design Tools
![Page 39: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/39.jpg)
Hypermedia and Hypertext• Hyper media provides a structure of links • Hypertext words are linked to other
elements• Hypertext is usually searchable by
software robots
![Page 40: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/40.jpg)
Hypermedia and Hypertext• 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
![Page 41: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/41.jpg)
Hypermedia Structures Hypermedia elements are called
nodes Nodes are connected using links A linked point is called an anchor
![Page 42: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/42.jpg)
Hypermedia Structures• 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
![Page 43: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/43.jpg)
Hypermedia and Hypertext• 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
![Page 44: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/44.jpg)
Using Hypertext• 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.
![Page 45: COM 205 Multimedia Applications](https://reader033.vdocument.in/reader033/viewer/2022051419/56815cf7550346895dcafaf6/html5/thumbnails/45.jpg)
Hypertext Tools• 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….