COM 205 Multimedia Applications

1. COM 205Multimedia Applications St. Joseph’s College Fall 2004

2. Chapter 4 Text

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

4. Text in History • Text came into use about 6,000 years ago

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

6. The Power of Meaning and the Importance of Text • Words must be chosen carefully • Words appear in: • Titles • Menus • Navigational aids • Test the words you plan to use • Keep a thesaurus handy

7. Using Text in Multimedia • Type terminology • Typeface • Arial • Courier Times • Fonts • Points • Styles • Leading • Kerning

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

9. Character Metrics

10. Factors affecting legibility of text • Size. • Background and foreground color. • Style. • Leading (pronounced “ledding”).

11. Styles • Examples of styles are boldface and italic Italic Bold Underlined Outlined

12. Leading and Kerning Computers can • adjust the line spacing (called leading) leading and • the space between pairs of letters, called kerning

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

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

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

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

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

18. Text Font Design Tips • Use the most legible font available • Use as few different faces as possible ( too many called “ransom-note” typography • Usebold 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

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

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

21. 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!

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

23. 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 portrait landscape

24. 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>)

25. 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)

26. 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)

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

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

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

30. Computers and Text Allow text to be drawn at any size without “jaggies”, by anti-aliasing the edges of the characters

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

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

33. Unicode • Numbers • Mathematical symbols • Punctuation • Arrows, blocks and drawing shapes • Technical symbols

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

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

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

37. Font Editing and Design Tools • Fontographer (from Macromedia)

38. Editing and Design Tools

39. Hypermedia and Hypertext • Hyper media provides a structure of links • Hypertext words are linked to other elements • Hypertext is usually searchable by software robots

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

41. Hypermedia Structures • Hypermedia elements are called nodes • Nodes are connected using links • A linked point is called an anchor

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

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

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

45. 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….