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

Make an Impression on the Internet!

How do we use multimedia to effectively communicate?

Communications

MULTIMEDIA

Exploring multimedia

components

(text, images, animation, sound,

video)

COMMUNICATIONS

Effectively communicate

Clear

Exact

Professional

Make an impression

So what’s this course all about?

• 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

TechnicalDefinition: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”

• Text• Images• Sound • Animation • Video

Combined into an application to

Inform, Educate, Entertain

Software Applications

What is Multimedia?

Multimedia Uses To Inform:

– http://www.cbc.ca/radio/ – Compton’s Interactive World Atlas

To Educate:– How to fix a flat tire– How to fix a flat tire

To Sell and Run Businesses:– 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 peopleTelephoneRadioTVWorld 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. EgyptB. FranceC. ChiliD. Iran

2. In what decade was the first permanent photograph ever taken?A. Between 1780 and 1790B. Between 1820 and 1830C. Between 1880 and 1890D. Between 1890 and 1900

3. When was the first motion picture ever recorded?A. Between 1880 and 1890B. Between 1890 and 1990C. 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 SingerB. Gone With The WindC. The Gold RushD. Casablanca

5. What was one of the first full length movie to use colour?A. It Happened One Night B. MetropolisC. The Gold RushD. The Wizard Of Oz

6. What was the name of the predecessor to the Internet?A. ArpanetB. OprahnetC. GammanetD. Fishnet

Quiz continued…

7. Who invented the World Wide Web?A. Bill GatesB. Tim Berners-LeeC. Al GoreD. Alan Emtage

8. What was the very first graphical browser for the World Wide Web?A. NetscapeB. MosaicC. Internet ExplorerD. FireFox

9. What was the first band to give a concert over the Internet?A. Rolling StonesB. Areosmith C. Grateful DeadD. U2

Quiz continued…

10. What was the first full length feature film that was completely computer generated?A. Bugs LifeB. The Little MermaidC. Toy StoryD. Shrek

11. What application revolutionized/irritated the music industry in 1999?A. ITunes B. NapsterC. Limewire

12. When did digital cameras become fairly accessible and affordable to the public?A. 1980B. 1991C. 1996D. 2001

HistoryGrotte de Lascaux, France

15,000 - 13,000 BC

1914

1928

1928 – 1931

Prehistoric humans paint images on the walls of their caves Grotte de Lascaux, France

Silent movies incorporated multiple media by using film and text captions together

Walt Disney debuts the second short starring a debuts Steamboat Willie, Mickey, and the first cartoon to use synchronized sound.

Movies with sound replace silent movies

http://www.let.leidenuniv.nl/history/ivh/chap2.htm#The%20Creation%20of%20ARPANET

1930s

1937

1969

Technicolor is introduced in film and most movies are filmed in colour after 1940.

Bell Laboratories had a breakthrough in creating dual sound tracks on film. Fantasia was the first commercial movie with a complete surround soundtrack in 1940

NETWORK TECHNOLOGY INTRODUCED ….Arpanet is created ….Advance Research Projects Agency Network…. (discussion 1962)…..First packet switching network and the predecessor to the Internet.

History

Creation of Arpanet 1969

4 locations (1969)•UCLA•Stanford•UC Santa Barbara•University of Utah

Began talks in 1962 Objective: Build a network technology to allow researchers at various locations across the country to share information

1969

1970 – East coast

http://www.let.leidenuniv.nl/history/ivh/chap2.htm#The%20Creation%20of%20ARPANET

1977

1981

1991

1992

1992

1993

Apple starts to dominate PC market.

IBM PC announced and captures market share in 18 months.

World Wide Web debuts thanks to Tim Berners-Lee.

MS Windows 3.1 is released

HTML debuts

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

History1969: Network technology introduced: ARPANET

http://www.let.leidenuniv.nl/history/ivh/chap2.htm#The%20Creation%20of%20ARPANET

1977

1981

1991

1992

1992

1993

Apple starts to build to dominate personal computer market.

IBM PC announced/introduced and captures market share in 18 months.

World Wide Web debuts thanks to Tim Berners-Lee. (accessing information over the internet)

MS Windows 3.1 is released

HTML debuts

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

1969: Network technology introduced: ARPANET 1971: First email sent

1994

1995

1996

1998

1999

2000s

The Rolling Stones become the first major band to broadcast a live performance over the Internet.

Disney releases Toy Story, the first feature length computer generated movie (77 minutes long, 4 years to make, 800,000 machine hours to render).

Affordable digital cameras widely available.

Google Search Engine operates by Larry Page & Sergey Brin

Napster debuts, allowing users to download and share MP3s.

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

/http://news.com.com/2009-1032-995680.html

1981- 1991- 1992-1993-1998-

Future2009 $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) Education/Training, Entertainment, Publishingb) Entertainment, Education/Training, Publishingc) Publishing, Education/Training, Entertainmentd) Education/Training, Publishing, Entertainment

http://www.innovateads.com/examples.php

Possible Future ???

Future of Multimedia will depend mostly on thedevelopment of current technology:

•Education•Shopping and Retail•Entertainment•Communications

Possible Future ???

Conferences:Technology Tradeshows

http://www.cesweb.org/

http://www.interop.com/lasvegas/

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!

Where we are now

http://www.docstoc.com/docs/2458634/Lecture-13-The-Future-of-Multimedia

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

With the Future…. comes

Multimedia Features

Multimedia components• Text• Images• Sound • Animation • Video

used in combination with the following features:

1. Interactivity 2. Hyperlinking

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.

(1) Interactivity____________ over the application.Experience active rather than passive TV is interactive, Kiosks, web, games

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

(2) HyperlinkingBooks and Movies: beginning, middle, endIndex/Table of Contents allows for ” jumping” around sections

Modes of delivery include:– The World Wide Web– CD/DVD discs– Informational kiosks– Game boxes– Handheld devices IPods

Computer Based Multimedia Applications

Computer-based multimedia applications integrate the various media components and allow interactivity and hyperlinking

Delivery of Multimedia Applications

Criteria CD/DVD World Wide Web

Access Time

Ability to change content

How should you deliver the application? World Wide Web CD-ROMs/DVD

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

When creating your Multimedia Application, what will you need?

Keep in mind that creating an application has different needs than viewing an application!

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

Here is some text

with different attributes

Here is some text with different:

• Placement

• Layout

• Design

The End

Text Attributes Design/Layout/Placement

Text Examples From Advertising

…..Final Examplehttp://www.chillonline.ca/chillmag.html

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, 8 px, 10 pt, 10 px, 36pt.)• Color - (red, blue, black… )• Special effects - underline, shadowshadow, superscript,subscript,

SerifTailsScriptBody paragraphs

Times RomanCourier NewCentury SchoolbookPalatino

Sans-SerifNo tailsBlock-orientedHeadings, titles

Arial, Verdana Helvetica, Arial BlackComic Sans MS

Font Types

See Western Site: www.uwo.ca Use Verdana, Arial

Examples from: “The Non-Designer’s Design Book by Robin Williams

Fun Fonts:

Try out this website http://www.fontscape.com/explore?7AR

Font Types: Text Attribute

s

Examples from: “The Non-Designer’s Design Book by Robin Williams

Examples from: “The Non-Designer’s Design Book by Robin Williams

Font Types:

Font Styles:Variations in the appearance that lets you emphasize parts of the text.

- Bold, Italics, Superscript, Subscript etc.

Some examplesBold Times New RomanTimes New RomanUnderline Times New RomanBold ComicItalics ComicUnderline 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 NAW vs. HNWe 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)

Examples from: “The Non-Designer’s Design Book by Robin Williams

Even More Examples

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 ExamplesOkay, 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.

Loose Track Less LeadingMore space between all chars with less leading

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 ExamplesOkay, 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.

Loose Track More LeadingMore space between all chars with more leading

Consider the:________ (space between chars)________ (space between lines)

How easy is it to read the

text?

Leading ExamplesOkay, 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.

Tight Track More LeadingLess 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.

____________________________________

Text SizePIXEL (px)• the smallest discrete

component of an image or picture on a monitor

• Pixels are a measurement for text and images for the web

• A monitor display setting of 800px x 600px = 480,000 pixels

1280px x 1024px = 1.3 million pixels

POINT (pt)• A linear unit measuring

size of text

• Points are a print unit of measure (Word processing)

• 72 pt = 1 inch• 1 pt = 1/72 inch

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: Points – when printing

Comparison table of points and pixels

Text Size: Pixels – when viewing on a monitor

Willl revisit slide when we Dreamweaver

For now,

Difference on a Web Page – viewng on monitor

Pixel versus Points (in HTML)

Text Colour – representation for the web

COLOURHexadecimal 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 ConsiderationsReadability Is the text easy to read? Avoid dark text against dark

background

Visual AppealDoes 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

Design in GeneralUse a max of 2 to 3 different types of fontsUse a max of 2 to 3 colours in a document/websiteNever use underlining in a webpage

Mood Creation Set the mood using appropriate font

attributes and layout Headings usually looks better Sans-

Serif, body usually looks better Serif

Sample websites that create a mood:http://www.courtjesters.co.nz/

http://www.circleworks.co.nz/

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.

Before we begin building websites, let’s get some design basics:

Good Design Is As Easyas 1-2-3

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.

Good Designis as easy as . . .

Learn the principlesThey’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.

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.

Items are aligned - creates stronger cohesive unit

Group related items together

Repeat some aspect of the design throughout the entire design i.e. Bold font, thick rule, bullet, colors, font types

Alignment

Repetition

Proximity

Design Considerations: REPETITION

Repetition of– Bullet type– Spacing– Light text– Heavy text– Alignment– Indentation

Brad PittMovies

Thelma and LouiseLegends of the FallOceans Eleven

RelationshipsGwyneth PaltrowJennifer AnistonAngelina Jolie

ChildhoodBirthday: December 18, 1963Born: Shawnee, Oklahoma

References available upon request

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

Examples from: “The Non-Designer’s Design Book by Robin Williams

Design Considerations: CONTRAST

Rule to remember: Don’t be wimpy!

Design Considerations: PROXIMITY

What do you think when you look at the second box compared to the first box?

Remember Physically grouping things together implies a relationship

The MenuSpinach and Bacon SaladPecan Crusted TroutSteak and Kidney PieApple CrispCheese FondueMacaroni and CheeseStrawberry CheesecakeLemon MousseCaesar SaladRoast Chicken

The MenuSALADS: Caesar Salad Spinach and Bacon Salad

ENTREES:Pecan Crusted TroutSteak and Kidney Pie

Roast ChickenCheese FondueMacaroni and Cheese

DESSERTS: Strawberry Cheesecake Lemon Mousse Apple Crisp

Examples from: “The Non-Designer’s Design Book by Robin Williams

Design Considerations: PROXIMITY

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

Examples from: “The Non-Designer’s Design Book by Robin Williams

Design Considerations: ALIGNMENT

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