Multimedia Multimedia Is Everything You Can Hear Or See

Computer Science 1033B

Vivi T.

12:30pm - 2:30pm

Lecture 1

Multimedia – Multimedia is everything you can hear or see.

Descries any application or technology that uses any combination of: Text, Images, Sound, Animation, Video.  To Inform, Educate, Entertain.

“Using a combination of moving and still pictures, sound, music and words, especially in computers or entertainment”

Multimedia components are used in combination with the following features: Interactivity, Hyperlinking

Interactivity
User has control over the application
Experience is active rather than passive like TV
Hyperlinking
Index allows for jumping around sections
Web pages have hyperlinks to other webpages or other locations on the same page.

Multimedia History

1969  NETWORK TECHNOLOGY INTRODUCED.... Arpanet is created

Advance Research Projects Agency Network

(Discussion 1962)

Remember ARPANET First packet switching network and the predecessor to the Internet. Requests are broken up into smaller packets and take different routes to get to the destination

Objective: Build a network technology to allow researchers at various locations across the country to share information, started with the military

The Penetration Rate in marketing is a parameter to show the rate of circulation of a product in a specific population.

1991  Intro to world wide web

1992  HTML debuts

1993  Mosaic Browser Web, prototype

1998  Google Search Engine operates by Larry Page & Sergey Brin (Founders)

What is The Internet?

The Internet is a massive network of networks, a networking infrastructure. It connects millions of computers together globally, forming a network in which any computer can communicate with any other computer as long as they are both connected to the Internet.

What is The Web (World Wide Web)?

Tim Berners-Lee debuted the World Wide Web 1991

The World Wide Web, or simply Web, is a way of accessing information over the medium of the Internet. It is an information-sharing model that is built on top of the Internet. The Web uses the HTTP protocol, only one of the languages spoken over the Internet, to transmit data. Web services, which use HTTP to allow applications to communicate in order to exchange business logic, use the the Web to share information.

With the Future comes,

Legal Issues

Problematic because of the rapid change in technology

Text can set a mood

Text Attributes

Emphasis can be added by varying the text attributes

Font type - Arial, Times New Roman, Comic Sans (Need to Identify for exam)
Serif – Tails
Easy to Follow
Sans-Serif – No Tails
Headings
Style - Regular, bold, italics
Kerning – space between the cha r a cters
Tracking - Adjusting the distance between spacing the letters
Leading - vertical space between lines of text.
Amount of 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 (Don’t underline in website, unless link), shadow.

Loose track = more space between all characters

More leading = more space between the lines

Design/Layout/Placement of the text

A Monitor is just a rectangular area, small pieces known as pixels.
Pixels represent anything, images text and drawings.
However, to printing we use ink, and the pixels are called Dots.
Dots (in printing) are just pixels in that, take on different colors, and etc.
Resolution is how many pixels in a distance, 640x480 for example

When was the first motion picture ever recorded?

Between 1880 and 1890

What was the first full length movie with synchronized dialogue (i.e. the first talkie)?
The Jazz Singer

What was one of the first full length movie to use colour?
The Wizard Of Oz

What was the name of the predecessor to the Internet?

Arpanet

Who invented the World Wide Web?

Tim Berners-Lee

What was the very first graphical browser for the World Wide Web?
Mosaic

What was the first band to give a concert over the Internet?

Rolling Stones

What was the first full length feature film that was completely computer generated?
Toy Story

What application revolutionized/irritated the music industry in 1999?
Napster

When did digital cameras become fairly accessible and affordable to the public?
1996

Text Size

Point (pt)

A linear unit measuring Size of text In a word processing doc

Points are a print unit of measure

72 pt = 1 inch (FACT: A point size of 72, will always give you a font that is one inch high when printed)

1 pt = 1/72 inch

Pixel (px)

Pixels are a measurement for text and images for the web on a monitor

Pixel is the smallest discrete component of an image or picture on a monitor

Working with Pixels to creating and viewing a webpage on a monitor

11 px does not equal 11 pt. Points are ALWAYS smaller than pixels.

Text Color

Colour is defined by:

Hexadecimal code, Six digits, made up of decimals and letters

The color Red is #FF0000

Represents RRGGBB

If there are only 3 digits, then it means each digit is represented twice.

Text Guidelines

Readability

Is the text easy to read?

Avoid dark text against dark background

Visual appeal

Complementary

Color Coordination

Balance

Text Layout

Mood

Use of Text

Text can be used to serve two purposes:

It conveys information
It can be used as a graphical element of the page

You may have downloaded a cool font for your website, but a view might not have this, so you convert the font to a image with photoshop or such, and display the image.

Create a .jpg or .gif file of the text in Photoshop
Insert that into your webpage

Poster & Web Designs

Contrast
Make 2 elements similar or dissimilar
Altering font color, font size, effect…
Visual appeal grabs attention
Repetition
Repeat some aspect of the design throughout the entire design
i.e. Bold font, thick rule, bullet, colors, font types
Repetition of
Bullet type
Spacing
Light text
Heavy text
Alignment
Indentation
Alignment
Items are aligned – creates stronger cohesive unit
Which audience are you trying to grab?
What’s easier to read?
Proximity
Group related items together
Physically grouping things implies a relationship

Exam Question—

How many lines of text could fit on a page given the following information?
1 inch margin on the top
½ inch margin on the bottom
the page contained a font of size 36
leading was 0 (space between lines)
72 pt = 1 inch
so 36 pt = ½ inch
So… 19 lines.

Lecture 2

Introduction to Graphics

We rely on images for

Information
Explanations
Entertainment

And Visual Appeal

Where did graphics originate?

Non-digital medium (paper copy of a photo)

Scanner saves the image in a file on your computer

Outside world - PHOTOGRAPHY

Digital images uploaded to a file on your computer

Create image – CLIP ART IMAGES/SCENES

Saves image to a file

How does a computer represent numbers and words and images and sound?

Computers only understand/speak “Binary” (digits 0 and 1)

What is Digitization ?

Process of translating a piece of information (text, images, sound, video etc) into BITS. ( Binary Digit)
(because that’s what computers “understand/speak”) • Bit will either have a value of “0” or “1”
Bit is the fundamental unit of information in a computer system ... WHY?
Electric signals translate into “BITS” (digits “0” and “1”)
Conversion from Analog to Digital

If we have 1 bit 

then 0 and 1

Max of 2 values
Represent Black and White
True and False

If we have 2 bits 

Then 00, 01

Max of 4 values
Represent Black, Lt Gray, Drk Gray, White
Essentially assign 4 possibilities of things.

If we have 3 bits 

Then 001, 010

Max of 8 values
Use to represent 8 factors

Every image is broken down into pixels

If a pixel color is represented by 1 bit

Value 0 = Black

Value 1 = White

So we say….

1 bit allows for 2 colours, also known as 2^1

Images are coded with pixels, and a bit value represents a color.

Thus 2 bit allows for 4 colors (2^2 = 4)

Rule: More bits, more colours available to assign to a pixel

Measurement for each bit is based on Binary sytem (base 2)

1 bit is either “0” or “1”

Formula (x bits) 2^x = y values = number of combinations

= Maximum number of colors available to assign a pixel to represent image

8 bits = 2^8 = 256 available colors

24 bits = 2^24 = max. of 16 million colors

Conversion is a 2 step process

Step 1: Sampling

 How often do I take a sample to represent the “thing”

Step 2: Quantizing

 How many discrete values will I use to represent “each part” of the “thing”

Sampling for images means how many parts (pixels) will I break the image up into?

Represented by a grid (column/rows) of squares called pixels (Picture elements)
Pixel is smallest image component and thus shows the smallest detail.

Trend: The more samples taken, the clearer the picture becomes

Quantizing for Images

 How many discrete values (bits) will I use to represent each pixel

 Represents the color combinations

Each pixel is given a numerical value that represents the corresponding colour
Will I use a 1-bit system, 2 bit system, etc..

Quantizing for Text (Letters/Punctuation)

Based on 8 bits (=1 BYTE)

8 bits system represents the keyboard

Each letter represented by 1 byte

 Called the ASCII code system

Color Models

Used for Web

Additive Model (RGB):

Primary colors are Red, Green, Blue
“Adding” light to a black background (monitor) in order to obtain color shades
Brighter than CMYK

Subtractive Model (CMYK)

Cyan, Magenta, Yellow
Uses Printing Ink – applied to paper removes (“subtracted”) from a white background
Commercial print is built on CMYK plates and inks

Why use RGB rather than CMYK model for web?

Since cathode ray tube devices, such as computer monitors, display color with red, green and blue light,
this is the color system of the Web.

RGB color

The red, green, and blue (RGB) color system can represent a large portion of the color spectrum by mixing these three primary colors on a monitor

How are Colors Coded?

“True color”

Uses 24 bit color representation

= 2^24 = 16 million colors

When we assign a color to a pixel, color can be expressed in:

RGB code
Hexadecimal code

RGB Notation

Each pixel is represented by 3 values
Light Yellow = <255,255,127>

RGB Syntax:

Each Value ranges from 0-255

0 represents no amount
255 represents maximum value

256 color shades = 2^8 bits

Need 3 bytes for True Color

(16 million colors)

1 byte for red

1 byte for green

1 byte for blue

Hexadecimal Notation

Notation is: #RRGGBB

#FF0000  Red

#00FF00  Green

#0000FF  Blue

#000000  Black

#FFFFFF White

Allowable symbols
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F

FF means 255

You CAN convert from:

RGB to Hexadecimal
Hexadecimal to RGB

How many colors can the human eye see?

10 million colors

So no need to go higher than 24 bit color, because our eyes can’t see it.

Types of Graphics

Graphics are categorized as being either:

Bitmap or Vector

This affects how the graphics are displayed on a computer screen in terms of

Quality
File size
Time to display graphics

Bitmap Graphics (Raster)

Bitmapped images are made up of small squares called pixels.

Editing pixels = assigning a color, or changing color.

Bitmapped images come from

- Scanners, cameras etc.

Types of Graphics – Bitmap

Bitmap Graphics

If you start with a small image (100 x 100 px)

Assumption: As the image is made larger by resizing (aka resampling) not zooming

- Computer adds new pixels and guesses on the colour to colour the new pixels (called interpolation)

- Squares become larger, edges more jagged

Advantages of a small image on the web:

Shorter time needed to display it on the screen because file size is smaller.

Types of Graphics – Vector

Vector Graphics

Image is represented with lines and arcs that have a mathematical relationship

Describes the drawing of the shape…

To Draw

- Line – Starting point, direction, length

- Rectangle – Start point, width, height

- Circle – Center and radius

It doesn’t matter what size the image is !!

As the image is resized larger or smaller

It remains it’s quality, only...

- File size increases

Advantage:

Ideal for producing artwork, which frequently needs to be presented in different, sizes or colors.

So… Why do we need different graphics software?

Vector or Bitmapped?

Vector-Based

Suitable for drawings that will be sized often
Greater control and precision with free-hand tool
Display more accurately on screen/paper/billboards (can be redrawn with accuracy without loss of quality)
Download faster because of .svg format (less info recorded smaller file)
Must use a “Draw “ program – draw and edit paths
Adobe Illustrator or Macromedia FreeHand, Corel Draw
Common formats: .eps, .cdr.(CorelDraw) .dwg (Autocad)

Bitmapped-Based

Images from – scanners, cameras etc
Ability to edit an image’s pixels
Need a “Paint” program
PhotoShop, PaintShop Pro, PhotoPlus Corel PhotoPAint, Fireworks
Photoshop v6.0 – has vector features as well
Common bitmap file formats: .jpg, .gif, .png, .tiff, and .bmp

Remember:

Vector  Bitmap (Rasterize)

Yes.

(Bring into Paint program… And converted to bitmap)

Bitmap  Vector

No.

“Once a bitmap, always a bitmap”

Image Quality

Image Resolution
Image Bit Depth