COM 205 Multimedia Applications

Slides:



Advertisements
Similar presentations
COM 205 Multimedia Applications St. Joseph’s College Fall 2004.
Advertisements

BM109 Computer Applications For Media. Text Overview Importance of text in a multimedia presentation. Understanding fonts and typefaces. Using text elements.
Week 7 Web Typography. 2 Understanding Type Design Principles.
1 LECTURE 4 THE USES OF TEXT IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.
Chapter Concepts Discuss Fonts Understand Fonts
Macromedia Dreamweaver MX 2004 Design Professional Web Page DEVELOPING A.
Digital Media Text Text Text in History Text came into use about 6,000 years ago.
Illustration & Photography- Ch 9 Creating Graphics Illustration- using images that represent or express to make a visual statement Can show something that.
Chapter 2: Text Yaqoob Al-Slaise ITBIS351. Outline Word Choice Fonts and Faces Text’s role in multimedia projects Text on PC and Mac Defining Hypermedia.
Text in multimedia Why would course designers like text? The most inexpensive media to develop Least overhead in storage/transmission But text creation.
Chapter 14-Designing for the World Wide Web. Overview Introducing multimedia on the Web. Designing text for the Web. Creating images for the Web. Adding.
Multimedia: Making it Work
2.1 Different Text Attributes Font A set of printable or displayable text characters with its style and size specified Arial 16 point bold Arial 32 point.
Interactive Multimedia Development
10. Typography The basic terminology & concepts of working with type
Introduction to Interactive Media 06: Text: Static Interactive Media Component.
Multimedia Building Block : Text
Text Text. Multimedia Elements u Text u Graphics u Animation u Sound u Video.
Typography-- Using Text Typography -- Using Text There are two basic types of fonts: Sans Serif Serif.
Chapter 2: Text.
Chapter 7 Web Typography Principles of Web Design, 4 th Edition.
Chapter 4-Text.
COM 205 Multimedia Applications St. Joseph’s College Fall 2004.
Chapter 2 Developing a Web Page. Chapter 2 Lessons Introduction 1.Create head content and set page properties 2.Create, import, and format text 3.Add.
Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.
CHAPTER FIVE TEXT.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 3.
Web Page Design. Some Terms Cascading Style Sheet, (CSS) –a style sheet language used to describe the look and formatting of a document written in html;
Introduction to Interactive Media Interactive Media Components: Text.
Text dan Hypertext Pertemuan 05 & 06 Matakuliah: O Computer / Multimedia Tahun: Feb
Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.
Text. Text came into use about 6,000 years ago Text in History.
Macromedia Dreamweaver 8 Revealed WEB PAGE DEVELOPING A.
CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela.
Week - 9 Multimedia: Text element. Overview Importance of text in a multimedia presentation. Understanding fonts and typefaces. Using text elements in.
Date : 01/15/2015 The Web as Multimedia – Text and Images.
UNIT 4 - TYPOGRAPHY Digital Communications I. 3-D  an effect that gives the illusion of depth.
Color Aesthetics Weinman, chapter 2 Terms, color themes and relationships, type, layout Aesthetics a guiding principle in matters of artistic beauty and.
Date : 01/09/2014 The Web as Multimedia – Text and Images.
Computer Engineering and Networks, College of Engineering, Majmaah University Text in multimedia Mohammed Saleem Bhat CEN-318 Multimedia.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 3 Introducing Cascading Style Sheets.
Multimedia & Webpage Design 1.01 Investigate typefaces and fonts.
Objective % Select and utilize tools to design and develop websites.
The art of using text to produce professional looking publications.
Chapter 2 Developing a Web Page.
SCA Introduction to Multimedia
Chapter A - Getting Started with Dreamweaver MX 2004
DFP 4113 MULTIMEDIA TECHNOLOGY
Chapter 2: Text.
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
Typography Basics 2.01 Investigate typefaces and fonts.
THE USES OF TEXT IN MULTIMEDIA
1.01 Investigate typefaces and fonts.
Text.
Chapter 7 Text.
Multimedia & Webpage Design 1.01 Investigate typefaces and fonts.
Text.
Text and Hypertext Kuliah 03
Text and Hypertext Kuliah 03
Chapter 1&2.
Text and Hypertext Kuliah 03
Assist. Lecturer Safeen H. Rasool Collage of Science Department of IT
Multimedia & Webpage Design 1.01 Investigate typefaces and fonts.
SCA Introduction to Multimedia
Chapter 7 Web Typography
SCA Introduction to Multimedia
Lesson 3 character/font formatting
Layout Terms Visual Hierarchy
SCA Introduction to Multimedia
Multimedia & Webpage Design 1.01 Investigate typefaces and fonts.
Presentation transcript:

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. Multimedia and hypertext.

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

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

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

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

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

Character Metrics

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

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

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

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.

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

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

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

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

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

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

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

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!

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

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

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

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)

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)

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

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

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

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

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

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

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

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

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

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

Font Editing and Design Tools Fontographer (from Macromedia)

Editing and Design Tools

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

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

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

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

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

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.

Hypertext Tools Building or authoring Reading 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….