CoED 105-Introductio to Multimedia
Lecture 2
Mohamed MAGANGA
Today’s Objectives

Multimedia Overview
– Define multimedia
– Types of media found in multimedia
– Uses of multimedia
– History of multimedia

Text Overview
– Text Attributes
– Basic design principles
– Poster analysis
Question: Making an impression?
Now consider, after you first arrive at
a website…….
How long does it takes you to decide if you want to
stay or if you want to leave this site?
Multimedia
Communications
Make an Impression on the Internet!
How do we use multimedia to effectively communicate?
So what’s this
course all about?
MULTIMEDIA
COMMUNICATIONS
Exploring
multimedia
components
Effectively
communicate
Clear
(text, images,
animation, sound,
video)
Exact
Professional
Make an impression
•
use Software Applications to deliver on the internet
•
Proper tools, guidelines, concepts
What is Multimedia?

Five senses are mechanisms to communicate
with others and environment
Most
important?
What is Multimedia?
Definition:
Multimedia is
everything you can
hear or see.
Different media:
Texts, books, pictures,
music, sounds, CDs,
videos, DVDs, MP3
players, iPods, Records,
Films, and more
Technical
Definition:
Describes any
application or
technology that can
be used to present:
• Text
• Images
• Sound
• Animation
• Video
Cambridge Dictionary  “using a combination of moving
and still pictures, sound, music and words, especially in
computers or entertainment”
What is Multimedia?
• Text
• Images
• Sound
• Animation
• Video
Software
Applications
Combined into an
application to
Inform, Educate, Entertain
Multimedia Uses

To Inform:
–
–

To Educate:
–
–

How to fix a flat tire
How to fix a flat tire
To Sell and Run Businesses:
–
–
–

http://www.cbc.ca/radio/
Compton’s Interactive World Atlas
http://www.chapters.ca
http://www.monster.ca
http://www.eharmony.ca
To Entertain:
How are you going to get your
multimedia message out there?

What current tools can we use to “communicate
or spread a message” to people?
Other people
 Telephone
 Radio
 TV
 World Wide Web on the Internet -- WHY??


The World Wide Web:
_____________
 _____________
 ______________

The World Wide Web is
the Voice of Power!
ASK YOURSELF
1.Which area do you think has the most people?
Africa, Asia, Europe, Latin American/Caribbean,
Middle East, North America, and Oceania/Australia
2.Which area do you think has the most internet users?
3.Which area is the smallest, has the least users
http://www.internetworldstats.com/stats.htm
Let’s Test Your Multimedia History
Knowledge! Take out a pen and some paper:
1.
Where were the earliest drawings/paintings by humans
discovered?
A. Egypt
B. France
C. Chili
D. Iran
2.
In what decade was the first permanent photograph
ever taken?
A. Between 1780 and 1790
B. Between 1820 and 1830
C. Between 1880 and 1890
D. Between 1890 and 1900
3.
When was the first motion picture ever recorded?
A. Between 1880 and 1890
B. Between 1890 and 1990
C. Between 1900 and 1910
Quiz continued…
4.
What was the first full length movie with synchronized
dialogue (i.e. the first talkie)?
A. The Jazz Singer
B. Gone With The Wind
C. The Gold Rush
D. Casablanca
5.
What was one of the first full length movie to use colour?
A. It Happened One Night
B. Metropolis
C. The Gold Rush
D. The Wizard Of Oz
6.
What was the name of the predecessor to the Internet?
A. Arpanet
B. Oprahnet
C. Gammanet
D. Fishnet
Quiz continued…
7.
Who invented the World Wide Web?
A. Bill Gates
B. Tim Berners-Lee
C. Al Gore
D. Alan Emtage
8.
What was the very first graphical browser for the World
Wide Web?
A. Netscape
B. Mosaic
C. Internet Explorer
D. FireFox
9.
What was the first band to give a concert over the Internet?
A. Rolling Stones
B. Areosmith
C. Grateful Dead
D. U2
Quiz continued…
10.
What was the first full length feature film that was
completely computer generated?
A. Bugs Life
B. The Little Mermaid
C. Toy Story
D. Shrek
11.
What application revolutionized/irritated the music
industry in 1999?
A. ITunes
B. Napster
C. Limewire
12.
When did digital cameras become fairly accessible
and affordable to the public?
A. 1980
B. 1991
C. 1996
D. 2001
Grotte de Lascaux, France
History
15,000 - 13,000 BC  Prehistoric humans paint images
on the walls of their caves Grotte
de Lascaux, France
1914  Silent movies incorporated multiple
media by using film and text captions
together
1928  Walt Disney debuts the second
short starring a debuts
Steamboat Willie,
Mickey, and the first cartoon to
use synchronized sound.
1928 – 1931  Movies with sound replace silent
movies
History
1930s  Technicolor is introduced in film and most
movies are filmed in colour after 1940.
Bell Laboratories had a breakthrough in creating
1937  dual sound tracks on film. Fantasia was the first
commercial movie with a complete surround
soundtrack in 1940
NETWORK TECHNOLOGY INTRODUCED
1969  ….Arpanet is created
….Advance Research Projects Agency Network
…. (discussion 1962)
…..First packet switching network and the
predecessor to the Internet.
http://www.let.leidenuniv.nl/history/ivh/chap2.htm#The%20Creation%20of%20ARPANET
Creation of Arpanet 1969
1970 – East coast
1969
4 locations (1969)
Began talks in 1962
•UCLA
Objective: Build a network
•Stanford
technology to allow researchers at
various locations across the country
to share information
•UC Santa Barbara
•University of Utah
History
1969: Network technology introduced: ARPANET
1977  Apple starts to dominate PC market.
1981  IBM PC announced and captures market share in
18 months.
1991  World Wide Web debuts thanks to Tim BernersLee.
1992  MS Windows 3.1 is released
1992  HTML debuts
1993 
The first graphical browser is born (allows us to see
web pages containing IMAGES), it is called Mosiac,
by Marc Andreessen, Erin Brina &Tim Clark
http://www.let.leidenuniv.nl/history/ivh/chap2.htm#The%20Creation%20of%20ARPANET
1969: Network technology introduced: ARPANET
1971: First email sent
1977  Apple starts to build to dominate personal
computer market.
PC announced/introduced and captures market
1981  IBM
share in 18 months.
1991  World Wide Web debuts thanks to Tim BernersLee. (accessing information over the internet)
1992  MS Windows 3.1 is released
1992 
HTML debuts
1993 
The first graphical browser is born (allows us to see
web pages containing IMAGES), it is called Mosiac,
by Marc Andreessen, Erin Brina &Tim Clark
http://www.let.leidenuniv.nl/history/ivh/chap2.htm#The%20Creation%20of%20ARPANET
1994  The Rolling Stones become the first major band to
broadcast a live performance over the Internet.
1995  Disney releases Toy Story, the first feature length
computer generated movie (77 minutes long, 4 years to
make, 800,000 machine hours to render).
1996  Affordable digital cameras widely available.
1998  Google Search Engine operates by Larry Page & Sergey
Brin
1999  Napster debuts, allowing users to download and share
MP3s.
2000s 
Integration of computer, memory storage, digital data
camcorders, MP3 players, IPods, speakers, telephones,
HD TV and other technologies explodes!
•2001  Apple introduces iTunes and the iPod
•2005  youTube.com launches
•2007  Search engine giant Google surpasses Microsoft
as "the most valuable global brand," and also is the most
visited Web site
FACES of the Internet Legacy
1981-
1991199219931998/http://news.com.com/2009-1032-995680.html
Possible Future ???
Future
2009 $30 billion industry
- Multimedia continues to grow into more than a 20% every year
Which is the correct order of top three applications?
(least to highest)
a)
b)
c)
d)
Education/Training, Entertainment, Publishing
Entertainment, Education/Training, Publishing
Publishing, Education/Training, Entertainment
Education/Training, Publishing, Entertainment
http://www.innovateads.com/examples.php
Possible Future ???
Future of Multimedia will depend mostly on the
development of current technology:
•Education
•Shopping and Retail
•Entertainment
•Communications
Conferences:Technology Tradeshows
http://www.cesweb.org/
http://www.interop.com/lasvegas/
Where we are now
Education:
• E-learning will become a ‘real area’ not just a substitute for lack of teachers
• Accessibility of learning All learning facilitated on-line
• All learning will be technology mediated in some way
Shopping and Retail:
• Traditional shopping replaced by on-line shopping entirely
• Shopping experience will totally change
Entertainment:
• Electronic games – more virtual reality and on-line
• Media on demand
Communications:
• Video phone
• Internet telephone and video phone systems
LAPTOPS BECOME SMALLER, THINNER, MORE POWERFUL!
http://www.docstoc.com/docs/2458634/Lecture-13-The-Future-of-Multimedia
With the Future…. comes
Legal issues
• _________________________________________________
• Problematic because of the rapid change in technology
Better skills:
• Need to be multi-skilled:
•
•
Articulate, think and write clearly
Web design skills an essential
It is necessary to have the web design skills set
Very strong understanding and ability to
___________ internet media < -- > _______________
Multimedia Features
Multimedia components
• Text
• Images
• Sound
• Animation
• Video
used in combination with the following features:
1.
2.
Interactivity
Hyperlinking
(1) Interactivity

____________ over the application.

Experience active rather than passive
TV is interactive, Kiosks, web, games

Examples:
1.
Surfing the Internet and clicking on links to move to different
webpages
2.
Student selecting choices during an on-line computer-based
exam
3.
A user simulating a driver test through a computer game.
(2) Hyperlinking
Books
and Movies: beginning, middle, end
Index/Table
of Contents allows for ” jumping” around
sections

___________ you start at the
beginning and move to the end (e.g. Books,
VCR technology with Videos)

____________  an index allows for
_______________ to different sections (e.g.
Webpages, some books, DVDs,ipods)

HTML has features that allows you to
build hyperlinks to other webpages or
location on the same webpage.
Computer Based Multimedia Applications
Computer-based multimedia applications integrate the
various media components and allow interactivity and
hyperlinking
Modes of delivery include:
–
–
–
–
–
The World Wide Web
CD/DVD discs
Informational kiosks
Game boxes
Handheld devices  IPods
Delivery of Multimedia Applications

How should you deliver the application?
 World Wide Web
 CD-ROMs/DVD
Criteria
Access Time
Ability to
change content
CD/DVD
World Wide Web
When creating your Multimedia
Application, what will you need?
Keep in mind that creating an
application has different needs
than viewing an application!

User Systems: Systems used to play back
multimedia applications (browser, speakers,
plugin players when needed)

Development Systems: Systems used
by multimedia developers to create
applications
Required Equipment

Question: What pieces of hardware do
you think a multimedia developer would
need to have either contained in his/her
computer or attached to it?
•
•
•
•
•
•
•
•
Sound Card
Video Card
Microphone
Headphones/Speakers
Camera, Camcorder
Fast Processor
Lots of storage capacity
DVD burner/player
Software to develop
the applications:
•Image creation
•Website creation
•Video
•Animation
Introduction to Text:

Dual Role:
–
Visual
representation of
message
–
Graphical Element
Text:
Use of text in multimedia applications varies on:
 ______________
 Educational, Entertainment, Business

_______________
ie. Children, teens, adults, Elderly, ESL
Text:

Change the look of your webpage by
changing:
–
–
Text Attributes
Design/Layout/Placement of the text
Text Attributes
Here is some text
with different
attributes
Design/Layout/Placement
Here is some text with
different:
•
Placement
•
Layout
•
Design
The End
Text Examples From Advertising
http://www.chillonline.ca/chillmag.html
…..Final Example
Text Attributes:
Text doesn't have to be boring!
• Emphasis can be added by varying the text
•
•
•
•
attributes
Font type - Arial, Times New Roman, Comic Sans
Style - Regular, bold, italics
Kerning – space between cha r a cters
Leading - vertical space between
lines of
text.
• Size - pts vs. pixels ( 8 pt,
, 10 pt, 10 px, 36pt.)
8 px
• Color - (red, blue, black… )
• Special effects - underline, shadow, superscript,subscript,
Font Types
Serif
Sans-Serif
Tails
No
Script
Body
paragraphs
Times
Roman
Courier
Century
Palatino
New
Schoolbook
tails
Block-oriented
Headings, titles
Arial, Verdana
 Helvetica,
Arial Black
Comic Sans MS
See Western Site: www.uwo.ca Use Verdana, Arial
Fun Fonts:
Examples from: “The Non-Designer’s Design Book by Robin Williams
Try out this website  http://www.fontscape.com/explore?7AR
Font Types:
Text Attributes
Examples from: “The Non-Designer’s Design Book by Robin Williams
Font Types:
Examples from: “The Non-Designer’s Design Book by Robin Williams
Font Styles:
Variations in the appearance that lets you emphasize
parts of the text.
- Bold, Italics, Superscript, Subscript etc.
Some examples
Bold Times New Roman
Times New Roman
Underline Times New Roman
Bold Comic
Italics Comic
Underline Comic
IMPORTANT:
Never underline
in a website
unless it is a
link
Kerning
–
–
Adjusting the distance ____________of letters
In standard spacing distance between uppercase A
and W seems farther than say H and N
 AW
vs. HN
 We can use kerning to fix this
Tracking
–
–
Adjusting the distance _____________the letters
Measured in ems
Tracking/Kerning Example

From PowerPoint main
menu, select View, then
Toolbars and then
WordArt. Click on the
words Fun and Sun and
play around with the
Kerning buttons:
More Examples - Kerning
No Kerning
Kerning (244)
Even More Examples
Examples from: “The Non-Designer’s Design Book by Robin Williams
Text Leading


the amount of __________________of text
Measured in either positive or negative points or zero
Greatness is not found in
possession, power, position or
prestige. It is discovered in
goodness, humility, service
and character.
Greatness is not found in
possession, power, position or
prestige. It is discovered in
goodness, humility, service
and character.
Leading Examples
Loose Track Less Leading
More space between all chars with
less leading
O k a y, t h a t m i g h t b e a b i t
subjective but lots of
Western students,
including computer
science students say that
one of the factors that
made them decide to
come to Western to study
was seeing the campus.
Okay, that might be a bit subjective
but lots of Western students,
including computer science
students say that one of the factors
that made them decide to come to
Western to study was seeing the
campus.
How easy is it
to read the
text?
To correct:
________________________
Distance between lines needs
to be greater than distance
between words, otherwise eye
jumps to next line
Leading Examples
Loose Track More Leading
More space between all chars with more
leading
Ok a y,
that
might
subjective
Western
students
to
to
study
campus.
bit
of
computer
say
factors
decide
lots
a
students,
including
the
but
be
that
that
come
was
science
one
made
to
of
them
Western
seeing
the
Okay, that might be a bit subjective
but lots of Western students,
including computer science
students say that one of the factors
that made them decide to come to
Western to study was seeing the
campus.
How easy is it
to read the
text?
Consider the:
________ (space between chars)
________ (space between lines)
Leading Examples
Tight Track More Leading
Less space between all chars with
more leading
Okay, that might be a bit subjective
but lots of Western students,
including computer science
students say that one of the factors
that made them decide to come to
Western to study was seeing the
campus.
Okay, that might be a bit subjective but
lots of Western students, including
computer science students say that
one of the factors that made them
decide to come to Western to study
was seeing the campus.
__________________
__________________
Text Size
PIXEL (px)
POINT (pt)
• the smallest discrete
component of an image or
picture on a monitor
• A linear unit measuring
size of text
• Points are a print unit of
• Pixels are a measurement for
measure (Word processing)
text and images for the web
• 72 pt = 1 inch
• 1 pt = 1/72 inch
• A monitor display setting of
800px x 600px = 480,000 pixels
1280px x 1024px = 1.3 million pixels
Text Size: Points – when printing
NOTE: A point size of 72,
will always give you a font
that is one inch high
when printed.
If you sent this MS Word
Document to a printer and
measured between the
lines, it would be one
inch. For print it doesn’t
matter if you print from a
Windows machine or a
Mac, a 72 point font size
on paper is always one
inch high.
Text Size: Pixels – when viewing on a monitor
Comparison table of points and pixels
For now,
Willl revisit slide
when we
Dreamweaver
Difference on a Web Page – viewng on monitor
Pixel versus Points (in HTML)
Text Colour – representation for the web
COLOUR
 Hexadecimal
code
 represented as number of six digits
 made up of decimals (0–9) and
letters (A-F)
Red Color is #FF0000
Represents
RRGGBB
What is Purple Western Colour
Text Design Considerations
Readability
Is the text easy to read?
Avoid dark text against dark
background
Visual Appeal
Does the text complement the
graphics?
Choose text that co-ordinates with
any graphics
Position text carefully to achieve a
good balance with the other
multimedia elements
Text Layout – simple, clear, white
space
Text Design Considerations
Mood Creation
 Set the mood using appropriate font
attributes and layout
 Headings usually looks better SansSerif, body usually looks better Serif
Design in General
 Use a max of 2 to 3 different types of fonts
 Use a max of 2 to 3 colours in a document/website
 Never use underlining in a webpage
Sample websites that create a mood:
http://www.courtjesters.co.nz/
http://www.circleworks.co.nz/
Before we begin building websites, let’s get some
design basics:
Good Design Is As Easy
as 1-2-3
Good Design
is as easy as . . .
1. Learn the principles.
They’re simpler than you might think
2. Recognize when you’re not using them.
Put it into words – name the problem.
3. Apply the principles.
You’ll be amazed.
Learn the principles
They’re simpler than you might think
Recognize when you’re not using them.
Put it into words – name the problem.
Apply the principles.
You’ll be amazed.
Examples from: “The Non-Designer’s Design Book by Robin Williams
Both boxes above say the same thing.
Which design do you like better?
Can you put your finger on what makes one “Better” than the other.
When designing a webpage, think about:
 Contrast
Avoid making 2 elements just
similar
Either make them the same (same
font, colour, etc…) or make them
VERY different.
 Alignment
Items are aligned - creates stronger
cohesive unit
 Proximity
Group related items together
 Repetition
Repeat some aspect of the design
throughout the entire design i.e. Bold
font, thick rule, bullet, colors, font
types
Design Considerations:
REPETITION
Brad Pitt
Movies
Thelma and Louise
Legends of the Fall
Oceans Eleven

Repetition of
–
–
–
–
Relationships
Gwyneth Paltrow
Jennifer Aniston
Angelina Jolie
Childhood
Birthday: December 18, 1963
Born: Shawnee, Oklahoma
References available upon request
–
–
Bullet type
Spacing
Light text
Heavy text
Alignment
Indentation
Design Considerations:
REPETITION

What repetition can you see in this Microsoft
web page?
Design Considerations:
CONTRAST
Cool Quotes
•See everything, overlook
a great deal, improve a
little.
•Between two evil,
choose neither; between
two good, choose both.
•Give with no strings
attached, and you will
receive in the same
manner
Design Considerations:
CONTRAST

Rule to remember: Don’t be wimpy!
Examples from: “The Non-Designer’s Design Book by Robin Williams
Design Considerations:
PROXIMITY
The Menu
Spinach and Bacon Salad
Pecan Crusted Trout
Steak and Kidney Pie
Apple Crisp
Cheese Fondue
Macaroni and Cheese
Strawberry Cheesecake
Lemon Mousse
Caesar Salad
Roast Chicken


The Menu
SALADS:
Caesar Salad
Spinach and Bacon Salad
ENTREES:
Pecan Crusted Trout
Steak and Kidney Pie
Roast Chicken
Cheese Fondue
Macaroni and Cheese
DESSERTS:
Strawberry Cheesecake
Lemon Mousse
Apple Crisp
What do you think when you look at the second box compared to the first
box?
Remember Physically grouping things together implies a
relationship
Design Considerations:
PROXIMITY
Examples from: “The Non-Designer’s Design Book by Robin Williams
Design Considerations:
ALIGNMENT
Fun Things for a
Professor to do the
First Day of Classes:
Ask students to call you "Tinkerbelle" or
"Surfin' Bird".
Growl constantly and address students as
"matey".
Show a video on medieval torture
implements to your calculus class.
Giggle throughout it.
by Alan Meiss
Design Considerations:
ALIGNMENT
Examples from: “The Non-Designer’s Design Book by Robin Williams
Consider the following poster that was a semi
finalist from the Fall 2007 Poster Contest

It already used great colour
choices and had some
wonderful creativity but can
you think of some things,
based on:
–
–
–
–
Repetition
Proximity
Contrast
Alignment
that might have made this
poster a little bit better?

Can you see examples of
the four principles that
worked well in this poster?
Can you see:
–
–
–
–
Repetition
Proximity
Contrast
Alignment
Review Questions

Name the 4 things to watch for when doing any
design:

Name 5 different media that could be used in a
multimedia website:

Name 3 relevant events in the history of multimedia:

What type of font is this: Hello World