CS 1033A – Final Exam Notes Page 1

Compsci 1033B – Final Exam Notes

Lecture 01: MULTIMEDIA AND COMMUNICATION

- 7-15 seconds to make a good first impression, 4 min for someone to decide to go beyond first impression
- MULTIMEDIA: everything you can hear or see; Media include texts, books, pictures, music, sounds, CDs,
videos, DVDs, MP3 players, iPods, records films etc
- MUTLTIMEDIA (technical): Describes any application or technology that can be used to present: Text,
images, sound, animation video
- We communicate using the five senses

Software applications  Delivery on the Internet Via Website  Combined into a media application to
inform, educate, entertain

Multimedia History Quiz

- Earliest drawings/paintings by humans discovered in France

- The first permanent photograph was taken between 1820-1830
- The first motion picture was recorded between 1880-1890
- The first full length movie with synchronized dialogue (talkie) was The Jazz Singer
- One of the first full length movies to use colour was The Wizard of Oz
- Arpanet was the name of the predecessor to the internet
- Tim Berners-Lee invented the World Wide Web
- Mosaic was the first graphical browser for the World Wide Web
- The Rolling Stones was the first band to give a concert over the Internet
- Toy Story was the first full length feature film that was completely computer generated
- Napster was an application that revolutionized/irritated the music industry in 1999
- Digital cameras became fairly accessible and affordable to the public in 1996

Multimedia History of the Internet

- 1969: NETWORK TECHNOLOGY INTRODUCED  ARPANET

o ARPANET: Advanced Research Projects Agency Network, 1969
o First packet switching network and predecessor to the internet (discussed in 1962)
o Objective: a network technology to allow researchers at various locations across the country to
share information
o 4 locations in 1969 – UCLA, Stanford, UC Santa Barbara, University of Utah
o 1970 – East coast
- 1991: WORLD WIDE WEB is finished and debuts (Tim Berners-Lee)+
- 1993: Mosaic – First graphical browser (web pages with images), by Marc Andreesen, Erin Brina, and Tim
Clark (transformed internet from research to household)
- 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
- Future: multimedia will continue to grow into more than 1 $100 billion industry with top three applications
 #1 – Entertainment $15 billion
 #2 – Publishing $7 billion
 #3 – Education/Training $7 billion
o E-leaning, iTV (interactive TV)
o Web 2.0 (sharing between users) – trend in web design, development, can refer to second
generation of web-based communities and hosted services (social networking, wikis, blogs) which
aim to facilitate creativity, collaboration, and sharing between users
CS 1033A – Final Exam Notes Page 2
o Laptops becoming smaller, thinner, more powerful
o Legal issues – copyright, rights management, piracy  problematic since rapid technology changes
o Better skills – strong understanding of media and moving images as well as traditional IT and
programming skills

MULTIMEDIA FEATURES

1. INTERACTIVITY
o USER CONTROL over the application
o Experience ACTIVE rather than passive as with television
o Examples: clicking on links on the internet, on-line computer-based exam, driving simulation
2. HYPERLINKING
o INDEX allows for “jumping” around sections
o Vs Sequential: start at beginning and move to the end (books, movies, videos)
 HTML has features that allows you to build hyperlinks to other webpages or location on the
same page
3. COMPUTER BASED DELIVERY
o Computer-based multimedia applications INTEGRATE the various media components and ALLOW
interactivity
o Modes of delivery of the applications include: video games, interactive web applications, CD ROM
disks, info kiosks
- Multimedia categories and applications
o Education – offering instruction (CD-Roms for preschoolers, bio in virtual labs)
o Entertainment – largest category (games (CDs/web), proprietary systems (X-box), MP3
players/ipods)
o Inform – Encarta and interactive world atlas (interactive multimedia including sound, video, and 3-
D animation to provide information and illustrate concepts)
o Business – businesses delivering marketing applications and employee training on CD’s and
Internet (job openings, product lines, services)
- How should you deliver the application – WWW vs CD/DVD

CD/DVD World Wide Web

Access Time View instantly by inserting into drive May encounter slow connection speeds
Ability to change Cannot change content – must Easy to update material, new updates can
content recreate and redistribute be accessed instantly
- Required equipment
o Development systems: systems used by multimedia developers to create applications
o User systems: systems used to playback multimedia applications
o Multimedia developer requires: sound card, video card, microphone, speakers, camera, DVD drives

MULTIMEDIA COMPONENTS

TEXT ATTRIBUTES

- Dual role:
o VISUAL representation of the message
o GRAPHICAL element
- Use of text in multimedia applications varies on:
o The type of application – educational, entertainment, business
o Audience – children, teens, adults, elderly, ESL (less text for children vs adults)
- Changing the mood of webpage by changing:
o Text attributes – colour, size, font type
o Design/layout/placement of text – bullets, alignment, text in groups
CS 1033A – Final Exam Notes Page 3
- Emphasis can be added by varying text attributes
o Font type – Arial, times new roman
 SERIF – tails, script, body paragraphs (times, courier new, century schoolbook, palatino)
Tails = easier to read on paper
 SANS-SERIF – no tails, block-oriented, headings, titles (arial, verdana, Helvetica, comic)
Easier to read paragraphs on websites, short headings
o Style – regular, bold italics
o Kerning – space between pairs of letters, measurement expressed in “em” (emphasis) – negative,
0, positive values
 Helps align multiple lines
o Tracking – space between all the letters horizontally

o Text Leading – vertical space between lines of text, measured in positive, 0, or negative points
 lower value – closer together; higher value – further apart
o Size – pts vs. pixels
o Colour – red, blue, black...
o Special effects – underline, shadows, superscript, subscript
- Text size – Pixels vs. Points
PIXEL (.ppi aka dpi) (in general use pixels) POINTS (.dpi)
unit of measure for monitor resolution (px) unit of measure for printer resolution (pt)
-WEB -WORD
- # of pixels per inch of monitor display -# of dots per inch
-a display setting of: 1280x1024 has 1.3 million DPI, -absolute type size – usually used in printing
800x600 has 480,000 DPI -higher dpi = better resolution
-standard resolution on Mac – 72 dpi -points are a PRINT unit of measure
-standard resolution on Windows – 96 dpi
-PC fonts 25% larger than mac fonts on websites
-fronts more precisely the size you want on the -if web document – text expressed in points
screen -can be displayed much larger or smaller than you
-some browsers will not allow the text size to change expect
(IE – no, FF – yes) -http://www.largnet.on.ca/
-http://www.uwo.ca -Control over the viewing size
-print style sheets created to print text using points *72 pts WILL ALWAYS BE 1 INCH WHEN PRINTED,
*develop websites using the pixel system regardless of what monitor it was processed on
10 px is SMALLER than 10 pts – NOT EQUAL

- Text colour - Hexadecimal code

o Represented as a number of 6 hexadecimal digits
o Made up of decimals (0-9) and letters (A-F)
o Represents RRGGBB
o Red = #FF0000, White = #FFFFFF, Black = #000000, Western = #660099
- Text design – readability, visual appeal (compliment graphics, position), mood creation (headings sans-
serif, body serif),
o Avoid exotic fonts for consistency on different systems
o Use a max of 2-3 different types of fonts
o Use a max of 2-3 different colours in a document/website
o NEVER use underlining in a webpage
- CRAP: Principles of Poster & Webpage Design:
o CONTRAST: avoid making 2 elements just similar – either made them same (colour/font) or VERY
different
o REPETITION: repeat some aspect of the design throughout
CS 1033A – Final Exam Notes Page 4
o ALIGNMENT: items are aligned – creates stronger cohesive unit
o PROXIMITY: group related items together *physical groupings imply relationship

Lecture 02: IMAGES/GRAPHICS

- We rely on images for – Information, explanations, entertainment

- Graphics originate from: non-digital medium (paper copy of a photo), outside world, create image
- Computers only understand/speak “BINARY” (digits 0 and 1) – convert all words, images, etc. to 0 and 1
- DIGITIZATION: the process of translating a piece of information (text, images, sound recording, video) into
BINARY BITS (computers only understand/speak binary)
o BIT: short for Binary Digit, value of “1” or “0” – fundamental units of information in a computer
system
o When press a key, binary code sent to RAM (memory)  CPU  Video card  On screen
o Measurement system – binary system (base of 2, exponent = number of bits)
o BYTE: collection of 8 bits  (28) = 256 possible combinations of 1s and 0s
 Ex: 21 = 2 values (0, 1), 22 = 4 values (00, 01, 10, 11)...
- HOW MANY SYSTEMS ARE THERE:
o Binary  (2 Binary Digits/ BITS)
0,1,10,11,100,101, 111,1000
o Octal  (8 Digits – or think of it as 8 number values)
0,1,2,3,4,5,6,7,10,11,12,13,14,15,16,17,20
o Decimal  (10 Digits)
0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20
o Hexadecimal (16 Digits)
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F, 10,11,12,13,14,15,16,17,18,19,1A,1B,1C,1D,1E,1F,20
-
- IMAGE: represented by a grid (array, matrix) of squared picture elements called PIXELS (the smallest image
component and thus shows the smallest detail)
o Pixel – numerical value corresponding to a COLOR INDICATOR (bw or colour)
o 640x480 screen – 640 dots on each of 480 rows  300,000 pixels
- Coding colors
o Black/white = 1 bit ONLY (0 = black, 1 = white)
o 2 bits – combination of black and white (01/10)  grey
o More bits, more shades... 4 bits  24 = 16 grey shades
USED FOR WEB - Additive Model (RGB) USED FOR PRINTING- Subtractive Model (CMYK) (k=black)
Primary colours: Red, Green, Blue Primary colours: Cyan, Magenta, yellow
“added” light to a black background in order to “subtracted” from a white background
obtain color shades

- In “TRUE COLOR” each pixel represents some color shade – Uses 24 bit representation = 16 million colors
- Color can be expressed in:
RGB Code Hexadecimal Code
Each pixel is represented by 3 values -consists of 16 unique symbols:
-ie: light yellow = <255,255,127> <R,G,B> 0,1,2,3,4,5,6,7,8,9,E, and F
Syntax: -color represented by 6 digits: ie, #FFCC66
Each value ranges from 0-255
256 color shades = 28 bits
-16 million colors in the spectrum (2563)
Red: <255,0,0> Red: #FF0000
Green: <0,255,0> Green: #00FF00
CS 1033A – Final Exam Notes Page 5
Blue: <0,0, 255> Blue: #0000FF
-Web-safe colors: only 1,3,6,9,C,F

o RGB does not = Hexadecimal, need converter

o Cathode ray tube devices (such as computer monitors) can only display colour with red, green and
blue light – this is the color system of the web
o Note: equal amounts of red, blue and green make gray
- Types of Graphics – Bitmap or vector – effects how graphics are displayed on a computer screen: Quality,
file size, time to display graphics

BITMAP (zoom in to pixels) VECTOR (zoom in, no pixels)

-images made up of small squares called Pixels -image is represented with lines and arcs that have a
-Editing pixels: changing color, shade, brightness mathematical relationship
Advantages of using a small image rather than larger: -describes the drawing of the shape
-shorter time needed to display on screen - Line: starting point, direction length
-smaller file size - Rectangle: start point, width height
Disadvantages: - Circle: center and radius
-distortion occurs when image is enlarged *SMALLER FILE: records mathematical relationship
-as image is enlarged (resized): -as image enlarged (resized):
- Dots become larger, edges more jagged - Dots become larger, edges still clean, crisp
- Quality decreases - Quality is maintained – no distortion
- File size increases - File size increase

BITMAP-BASED programs “PAINT” VECTOR Graphics programs – “DRAW”

-ability to edit an image’s pixels -greater control and precision with free-hand tool
-images from scanners, cameras -display more accurately on screen
-need a “PAINT” program -download faster because support of Flash and Scalable
Vector Graphics (SVG formats)
-produce smaller files that download faster
-more details in vector-based illustrations
-must use a “DRAW” program – draw and edit paths
Photoshop, paintshop pro, photoplus Adobe illustrator or Macromedia FreeHand, Corel Draw
(but photoshop v6.0 has vector features)

- QUANTIZING  How many discrete values (bits) will I use to represent each pixel  represents the colour
combinations
- Graphic Attributes  IMAGE QUALITY: Image resolution, image bit depth
o IMAGE RESOLUTION (ppi/dpi): the number and spacing of pixels in an image
 The number of pixels per square inch on a computer-generated display
 Ex: if resolution 100 ppi, each pixel 1/100th inch
 When you increase the number of pixels, increase quality of detail in the resolution
 For different output delivery:
 Web – set to 72 dpi (smaller graphics, don’t see detail)
 Laser Printers – 300-600 dpi
 High end imagesetters – 1200 dpi, 2400 dpi, or higher (newspapers/magazines)
 Image size: the physical dimensions of an image
 If number of pixels in an image is FIXED:
 decreasing the size of an image increases its resolution (crisper edges)
 increasing the size of an image decreases its resolution (pixelated, jagged)

Lecture 04: GRAPHICS CONTINUED

CS 1033A – Final Exam Notes Page 6
- IMAGE BIT DEPTH (aka COLOR DEPTH): maximum number of colors used to represent an image
 The more bits used the more color info stored to describe the color of a pixel
 Quality improves and larger file size
 Human eye can detect about 10 million colors, therefore, storing more than 10 million
colours is pointless, so we only use 24 bit color (16 million colours)
- FILE FORMATS
o Universally supported files: universally supported by graphics industry  JPG, GIF
 When an image is being sent to another application, convert to JPG or GIF
o Proprietary files (NATIVE FILES): Default files used by specific software application, can be Bitmap
or vector formats psd, dwg, pic – can save in native format or universal format
 PSD: Adobe Photoshop, AUP: Audacity, MVMM: moviemaker
 Not meant to be transferred to other applications
 Software-specific image properties can only be retained when an image is saved in the
software’s native format (layering in photoshop)
o CDR: CorelDraw – vector
o DWG: Autocad – Vector

.GIF – Graphics interchange format (bitmapped) .JPG – joint photographic experts group (bitmapped)
-attributes file format -attributes file format
-compression -compression
-color resolution -progressive jpeg
-dithering
-interlacing **distorts edges where there is sharp contrast
-transparency ARTIFACTS: noise/specs around the image
-common image format used on the internet
-cross platform
-supports a max of 8-bit color scheme (8 bits/pixel = 256 -stores full color information – max 24 bits/pixel (16
colours) - good for clip art, not photos million colors)
-best for large areas of solid, flat color -best for: blends of color, softer shadow effects and
subtle changes in color
-NOT for well defined lines or sharp contrasts between
colors
-uses: illustrations, logos, text as graphics, cartoons, -uses: photos, computer games, screenshots, stills from
buttons a movie
**tiny file size and limited colors **larger file size but full color scheme
“LOSSLESS” compression – no data discarded during “LOSSY” compression – data is discarded each time file
compression  QUALITY KEPT compressed QUALITY DEGRADES

COMPRESSION TECHNIQUES: 1024 bytes = 1 KB

- GIFs – “LOSSLESS” compression  no discard of data

o Does not get blurry or mess
o Uses simple technique called LZW compression to reduce files sizes of images by finding repeated
patterns of pixels
o Never degrades image quality
- JPGs – “LOSSY” compression  discards data
o Not all information in original image is preserved – NOT the same as original
o Degrades image quality
o Compression achieved by “forgetting” certain details about the image, which JPG fills in later when
it is displayed
o Degree of lossiness can be varied by adjusting compression parameters
CS 1033A – Final Exam Notes Page 7
 0% compression = 100% quality, 95% compression = 5% quality
o *work with image in native format then save final in jpg
o Uses compression algorithm which can be applied on sliding scale
o When saving jpg image, can generally select quality or compression ratio of final image
o Observations:
 Quality of JPEG file is proportional to the file size
 Higher image quality setting (has a lower compression value) results in less data being
discarded

File Format File Extension

Tagged Image File Formats • Most widely used bitmapped file format
• Supported by image-editing applications, scanning software, page-
(.TIF, .TIFF)
layout programs, and word processing software.
• Supports bit depths from 1 to 32 bits
• Cross platforms for MAC, PC, and Unix systems
• Most commonly used when the output is printed

Encapsulated Postscript • Vector based graphic

• Popular image files since they can be imported into nearly any
(.EPS, .EPSF) application.

Windows Bitmap • Standard bitmapped format on the Windows platform

• Supported by most Windows applications.
(.BMP)

Graphics Interchange Format • Bitmapped graphic

• May see it as “CompuServe GIF” since Compuserve created it
(.GIF)
• One of two standards used on the Web without plug-ins
• Gif format only supports up to 256 colors

- Sources of Graphics  graphics must be in DIGITIZED form to use in multimedia application

o Digitized cameras, camcorders: captures images and digitizes them into computer images through
its software
CS 1033A – Final Exam Notes Page 8
 Megapixel: how many millions of pixels you can capture in a photograph on your digital
camera
o Scanners: digitizes drawings, illustrations, and 3D objects into computer images using its software
 The scanner or the camera determines how many samples to take – measured as dpi (dots
per inch

o Internet sites: free clipart, on-line stock photo library ($$)

SERVERS AND UPLOADING

- Uptime: how long does server stay up

- Upload: transfer files to server so they can be displayed on the web
- Advantages of a server:
1) Connected: on all the time and connected to internet
2) Always available: website always available since always on
3) Taken care of: security and maintenance by people
- Panther: name of computer, “server”, that hosts uwo website
o Host name: panther.uwo.ca
o User website: http://www.publish.uwo.ca/~username
- FTP: file transfer protocol
o Ex: SSH Secure File, Filezilla, WS-FTP, Fugu (for mac)
o Some file transfer programs do not connect to all servers
- S-FTP using Secure shell
o SHELL CLIENT: can type in commands by hand – but it’s in Unix
o FILE TRANSFER CLIENT: allows us to transfer files to panther –
o Setting permissions:
CS 1033A – Final Exam Notes Page 9
 Sometimes you can’t see your files on internet because files are “locked” after uploaded
 Solution 1: change file “permissions” – Every time you upload new file, go to Shell window
and type in “publish
 Solution 2: change file “permissions” – using Secure File Transfer, everytime you upload
new file change permission rights on that file or folder (change properties)
 “Horseshoe”– checkmarks shaped in an upside down “u”
 644 for file, 755 for folder

How images are used

- For printing: 1) Quality, 2) File Size

- For the Web: 1) File Size, 2) Quality (DOWNLOAD speed) – objective – download website as quickly as
possible

OPTIMIZE IMAGES: reduce the file size (download time) without compromising image Quality

- 1) File formats – choose jpg or gif

- 2) Reducing color resolution – 24 bits, 16 bits, 8 bit
- File formats acceptable on the web: gif, jpg, png
- Color resolution
o GIF control: color resolution (number of colors) support 8-bit color – 256, 128, 64, 32, 16, 8 bytes
 By changing the color resolution (bit depth) can lower download time
- BMP files – no compression, stores information about each pixel, each pixel is 1 byte
- GIF files – divide image into shapes on a grid (startx, starty, endx, endy, color)
o Each shape records 5 bytes
o Another way:
 Looks for patterns: ex: 12345123451234512345, 1=12345  1111
 Builds a decoding hash table (1 = 12345)
- JPEG files – conversion programs try to save information about brightness (human eye pays more attention
to brightness than color details). If it finds two adjacent pixels with very similar colors, store both pixels as
same color and discard other color
- DITHERING: (when saving GIFs) most common method of reducing the color range of images down to the
256 colors seen in 8-bit GIF images
o Juxtaposing pixels of two colors to create the illusion that a third color is present (grainy look)
o BROWSER SAFE PALLETE: 216 colors honoured between MAC & PC browsers, operating systems,
and computer platforms
o If image uses color hues outside browser safe palette automatically dithers displayed image into
browser-safe image
o Juxtaposes coloured pixels from browser-safe palette in order to simulate any color which is not in
palate
o Can reduce number of colors in a GIF and choose options to control the way colors dither in
application or browser
- Interlacing technique: how images downloaded to your screen (applies to GIF files)
o Process by which image is drawn in a series of passes rather than all at the same time (file size
bigger) – see full image, gets clearer as downloads
- Transparency: allows page background to display through the image so the image appears to have no
visible border around it  supported by GIF and PNG ONLY
- PNG (Portable Network Graphics)
o Developed as replacement for GIF due to legal issues with LZW compression – starting to replace
o LOSSLESS compression (no discarded)
 PNG-8 (max of 256 colours)
 PNG-24 (max of 16 million colours)
CS 1033A – Final Exam Notes Page 10
 Allows images to have up to 48 bit color (but would never be necessary) – more for photos
o Can set which color bit depth you want to make file sizes smaller
o Advantages of PNG:
 Lossless compression
 Smaller/same size as GIFs keeping lossless (5-25% smaller)
 PNG better than JPG with images that contain text or line art
 Supports opacity and translucency
o Disadvantages of .PNG:
 Older browsers may not support
 No animation (unlike GIFs)
 File size for 24 bit color photographs bigger than JPG files

- Reduce the download time by using any or all combinations:

1) Reduce file size
2) Choosing .jpg or .gif formats
3) Reducing color resolution (24 bits, 16 bits, 8 bits)

- Goal: download web page fast – download time effected by graphic file size and file format
o File size
 Use smaller sized graphics expressed in “KB” measurement to reduce amount of webspace
needed to store image
 Recommended file size for graphics on the internet is no larger than about 100KB,
otherwise it will add seconds to download time
o File Format: .GIF or JPG rather than BMP, TIFF or other
o Most graphics software can export from any extension to .jpg or .gif

Lecture 05: WEBSITES

- Why build a website

o Reach potential customers
o Details on services/products providing testimonials
- Process:
o Choose a domain name
o Order Web hosting
o Meet with the client
o Create website
- Canadians purchased $40 billion online, 28 hours online each month, 1/373 web pages/CAN household
- Web searches worldwide = 5.7 billion per day
- EBAY – online auction and shopping, March 2008 revenues $8.7 billion
o Sept 1995 – Pierre Omidyar – Echo Bay consulting, “broken’ Laser pointer
o Sept 1996 – Jeff Skol (Movie producer) – Marketplace for goods and services
o Sept 1998 – went public – Meg Whitman (Harvard, Hasbro) – Vision: “connecting” people
o John Donahoe – CEO of Ebay

Website Startup

- THE INTERNET: a collection of local, regional, national and international computer networks that are linked
together to exchange data and distribute processing tasks
o a global system of interconnected computer networks that use the standardized Internet Protocol
Suite (TCP/IP) to serve billions of users worldwide; a network of networks
o The Internet is hardware - the World Wide Web is software that runs on the Internet!
o TCP = Transmission Control Protocol developed by ARPA (ARPANET)
o Works by circuit switching or packet switching
CS 1033A – Final Exam Notes Page 11
- HOST: a computer on the internet that provides services such as web pages, emails, web storage
- ISP: internet Service Provider  Western, Bell, Rogers, Execulink, Costco
o Allows one to connect to the internet
o Company that maintains an internet host computer providing internet access and user account for
accessing internet, e-mail box, webspace to host website
o offers connection via telephone lines, cable TV or personal satellite dish
- data travels from one internet host to another along best route, if links overloaded/out of service –
rerouted
- IP (Internet Protocol) Address: uniquely identifies each computer/device connected to the internet
o An IP Address is 32 bits (4 bytes) wide and may be represented various ways
o Consists of 4 numbers (dotted-quad - most popular) = 192.102.249.3
o Each quad must be between 0-255
o Picks a route for a packet, stopping at routers (devices) which pick the next best
machine/network to send the packet to (the router is the central switching device).
- DOMAIN NAME: the text name corresponding to the numeric IP address of a computer on the internet
o *only what comes after www – ex: uwo.ca (129.100.0.45); csd.uwo.ca (129.199.19.247)
o 2 parts – identifies the NETWORK and the specific COMPUTER
o When browsing a website, IP address determines successful communication between your
computer and website
o A DNS (Domain Name System) maps the domain name to the correct IP address so data can route
to the correct computer
- Finding your IP address – www.showmyip.com, www.whatismyip.com
- Finding IP address of any website – Command prompt type ping and the website
- URL: Uniform Resource Locator – an Address of a web document on a computer
o Every webpage is referred to by a unique URL

- Domain name rules

o Max of 67 characters (including extension)
o 0-9, a-z
o Dash character (hyphen)
o NO UNDERLINE, no spaces, cannot start or end with dash, case insensitive, no _
CS 1033A – Final Exam Notes Page 12
o Must end with a domain extension - .net, .com, .org... (TLD)
- SUBDOMAIN: a domain that is part of a larger domain, two or more parts (labels) separated by “.”s
o http://www.en.wikipedia.org – domain name: Wikipedia.org, Subdomain: “en”
o Used to organize website content
http://year2005.mycorvettes.mycars.com
.com is the first level domain (top level domain  TLD)
Mycars is the second level domain mycars.com is the DOMAIN
mycorvettes is the third level domain – subdomain of the domain “mycars.com”
year2005 is the fourth level domain – subdomain of “mycorvettes.mycars.com”
o Rules:
 Max of 127 labels (each level is a label)
 Each label max 63 characters long, min 3 characters
 But whole domain cannot exceed 255 characters, including TLD
- TLD: identifies the type of organization that is associated with the domain
o .com (commercial organization, business, companies), .net (internet administrative site, network
providers), .org (non-profit organizations), .edu (educational institutions), .gov (government
agencies), .info (information), .biz (business), .ca (Canada), .us (united states)....
- Choosing domain name – pay on a per year basis, must re-new
o search: mydomain.com, yahoo.com, godaddy.com, register.com...
- WEB HOSTING: the SERVICE that provides internet users with online systems for storing information,
images, video, or any content accessible via the web
o WEB HOSTS: (ISPs) COMPANIES that provide space on a server they own for use by their clients as
well as providing internet connectivity (rogers, execulink, AOL...) **files must be hosted on
webserver provided by ISP to be available on the internet
o Why not to host website on your computer:
 Expensive, continual connection (needs 24/7 high speed connection), technical
(complicated), support (server maintenance requires 24 hour support, skills, knowledge)
o Criteria for choosing web hosting company: disk space (5-10GB), bandwidth (amount of traffic that
is allowed to occur between your website and the rest of the internet in a given time period), web
site speed, database/programming language support, technical support, uptime, FTP access, web
statistics summary, scripts availability, web provider

Lecture 06: WEBSITE CREATION AND DREAMWEAVER CONCEPTS

Effective Website Design

- Good features:
o KISS Principle (Keep it simple, stupid)
o Consistency
o Color
o Balance
o Easy to navigate

- CREATING A WEBSITE:
-
1) Planning and Design – Meet with client, decide on colors, fonts,
background, links
o ALWAYS call splash page index.html – that way domain name
leads right to it
2) Implementation – who will maintain? straight HTML programming vs Web page software? complexity, KISS
principle, CRAP principles, Test in Netscape, explorer, firefox, documentation

Implementation: Designing for Web

CS 1033A – Final Exam Notes Page 13
a. WEB PAGE: HTML (hypertext markup language) – computer instructions used to create web page,
browser reads html code
i. HTML – cross platform, any computer can read
ii. HTML Tags: <tag> xxxxxx </tag>
b. WEB SITE: collection of web pages created and maintained by an individual/organization
c. WEB SERVER: computer that stores web pages and makes them available for people to see on the
internet
d. WEB BROWSER: program that allows you to view the internet (IE, FF, Netscape, Safari...)

3) Publish – Web space, use FTP software, upload once website is ready, Back up files
4) Maintenance – who is maintainer, training, update frequently, documentation, backup information
o Make sure allow for frequent updates in design

Lecture 06b: DREAMWEAVER CONCEPTS

- Web Authoring Software – WYSIWYG (what you see is what you get)
o Dreamweaver: web page editor and site management tool
 SITE MANAGEMENT: organize files/folders, moving files, rearranging pages and updating
links easily
 records HTML code as you build
o Interface:
 Document window: area where you build webpage
 Panels: provide you with commands/properties and characteristics of the current object or
task you are busy with – can move them, most common floating is property inspector
 Site panel: folder that you are currently working on, gives filenames, path directory, etc
 Property panel: characteristics of objects/text that you have inserted (size, color, font)
o Navigation styles – make sure consistent between pages
- Creating a New Site
o ** ALWAYS identify to Dreamweaver: the folder where your website will be stored through
Manage Sites
 New site: no files exist yet, but will be creating them
 Folder/files exist: but never worked with files in DW
o Identify Site name (descriptive name) and local root folder (where all pages stored)
o File names:
 Do not use spaces in file names and folders (allowed - %20 = space)
 Do not use capital letters – PANTHER IS CASE SENSITIVE
 .htm (hypertext Markup) – DW versions prior to 8, based on Dos/windows 3.x
 .html (hypertext markup language) – DW 8
 .shtml (server side includes) means that html document has special commands for the
server to process
 .cgi (common gateway interface) – instructions that causes events to happen on server by
executing programs written in perl, c..., used for database access, forms processing
 .asp (active server pages) – scripting language developed by MS, script embossed within a
webpage along with its HTML, causes active server side processing
 Same function as .cgi but integrated into Active X environment
 .php (hypertext pre-processor) – alternative to asap, script language and interpreter used
primarily on Linux web servers, empeded within web page along with its HTML, before
page sent to user that has requested it, server calls php to interpret and perform the
operations called for in the script
o Script: special instructions beyond DW commands
- View Layouts:
o Design view: shows WYSIWYG view
CS 1033A – Final Exam Notes Page 14
o Split: combo of both views (design and code)
o Code View: shows your HTML code
- Page Title Property: associates a general description of what webpage is about – an identity
o Displays title on first line (title bar) when page open in browser window (CHANGE FOR EACH PAGE)
o Important: when printed, identity
- Entering Text
o Automatic line wrapping
o width of paragraph depends on width of web browser window (unless in table or CSS style sheets
o paragraph break – leaves plank line between lines (<p> HTML tag) – Press <ENTER>
o Line Break – no space between lines (<br> HTML tag) – press <SHIFT><ENTER>
- Formatting Text
o Control:
 Headers – H1, H2, H3, H4, H5, H6 (predefined approximate sizes and bolds text)
 Text color – hexadecimal #
 Text Size – use pixel system (pts larger)
 Font type – i.e. Times New Roman, Calibri
 Special effects – bold, italics, underline etc. – DO NOT USE UNDERLINE
o Indenting paragraphs
- Page properties: (set defaults)
o Set background color, background images
- Graphics – enhances appearance of a web page
o Images from scanner, digital camera, clipart, internet
o Formats – gif (clipart), jpg (photo), png
o Lower download times – use smaller sized graphics, resize larger image in graphics package not DW
o Optimize: color resolution, compression will affect quality and size
- Download time of page: Benchmark: 56k modem speed, max of 30-35 seconds
o See status bar – total size appears in kb (edit>preferences>status bar)
- Image attributes – using property inspector: size, space around image, border, alternative text, alignment,
sharpen, contrast, crop
o Alternative Text: caption in browser, displays text associated with the image
 May display while graphic loading, or if using a text only browser
 To meet “barrier free access”
 For Firefox: insert title=”xxxxx” before alt=”xxxxx”
- LINKING TYPES
o To another web page within your site in your folder – point to the file
o To another website on the internet (start with http://)
 Use target field to open in new window – set to “_blank”
 Type URL address directly
o To an e-mail address
 Select text for hyperlink, insert e-mail link  mailto:[email protected]
o Creating an image hyperlink
 Select image, in property inspector click on folder, select path directory
o Create multi-links within an image – image map (HOTSPOTS)
 Select image, type descriptive name in map field, click on drawing tool, draw an area on
image, click folder and indicate file associated with hotspot
o To jump to a specific spot (other than beginning of the webpage) within a web page (setting
bookmarks, anchors, targets
 Create the anchor
 Create the link to the anchor
 ANCHORS: predefined anchor (#top), returns you to top of page
 In IE: no need to define “top”, but do in FF – so ALWAYS DEFINE
 To get rid of blue link lines – click on image and change brdr to 0
CS 1033A – Final Exam Notes Page 15
o You can link to files of type: Other than html files, Proprietary software (word, excel – audience
needs software on their system), Images (.gif, .jpg....), Acrobat reader files (.pdf)
- Tables – control web page layout and customize effects
o Table width: expressed as % - covers a percentage of the screen, fixed – width fixed on screen
 Assignments – FIXED 780 pixels for width
o Inserting a table – click where you want table to appear, select insert>table...
o Selecting table – place mouse over table’s cell grids until see red outline, single-click
o Merging cells: highlight cells you want to merge, click merge in property inspector
o Splitting cells: highlight cells you want to split, select split icon, enter information
o Table properties: can control – Layout, width (pixels/percent), cell padding (space around contents
of each cell), cell spacing (space between each cell in table), borders (0 = invisible)
o Cell properties: applied to one cell or group of cells: horizontal alignment, vertical alignment,
width/height, cell border (colour), background color

Lecture 07: MARKETING THE WEBSITE

- WEB PUBLISHING – upload/”ftping” completed pages to server with Secure Shell Client or from within DW
o Use FTP software
o File Transfer protocol: an internet standard that allows you to upload and download files with
other computers on the internet
 NOT ALL FTP SOFTWARE can connect to a web server (security, firewalls)
 Not all FTP clients will connect to a server – Secure Shell, Filezilla, cutepdf, Fugu
o Added features: Via FTP software can delete, rename, move, and copy files on a server
o DOWNLOADING: process of receiving a program, document or file via a network from another
computer - Remote site (server)  Local computer
o UPLOADING: Local computer  Remote site (server)
o Publishing the website: Need 4 pieces of information from web host:
1. Host name (ex: panther.uwo.ca)
2. Username
3. Password
4. URL/Web page address
- Marketing – include website address in “signature”, on all printed materials, advertisements
- Finding information on the internet: use program that searches internet for topics or keywords and points
you to a site DIRECTORY vs SEARCH ENGINE (85% of people find sites through search engines)

SEARCH ENGINE - Google, Alta Vista, Hotbot SUBJECT DIRECTORY - Yahoo, About.com, AOL
-A program that enables the user to search internet sites -a program that enables the user to search internet sites
- User types a list of keywords -internet sites are organized by subject and topic
-allowing users to choose a subject interest and then
browse the list of resources in that category
- returns a list of the documents where the keywords collection of websites organized by topic
were found
searches a database of information about the internet Human-selected (hand-picked) internet resources are
arranged and classified in hierarchical topics
Uses spiders, webcrawlers to gather database Human editors review webpages, rank them, organize
information of websites; index sites and score pages and them into categorized list with brief descriptions
puts the information into a database
Publisher registers into database, or wait for spider Wait for human editors
Examples: Google, altavista, Hotbot Yahoo, about.com, AOL, Open Directory (open directory
is 1% size of google)
CS 1033A – Final Exam Notes Page 16
- SPIDER/WEB CRAWLER: web software that constantly searches for new web pages and follows any links
- DATABASE: addresses, page titles, significant words, topics
o search engines access the database NOT the internet sites
- META-SEARCH ENGINGE/METACRAWLER: internet search engine which searches other search engines
o Uses searches of other engines, returns the “top” results, doesn’t create its own databases
- Top search providers: google (62%), yahoo, msn
- How does Google work:
1. Gathers the Information: crawl and index billions of pages of WWW, performed by Googlebot, a
“spider” which connects to web servers around the world to fetch documents. Spider gives each
retrieved page a number so it can refer to the pages it fetched
2. Build a database (index): List every document that contains a certain word
3. Rank results: rank them in terms of relevance – google uses many factors in ranking:
a. PageRank algorithm – how many links there are to a web page from other pages, quality of
the linking sites
b. Frequency of keywords in a webpage
c. Appearance – words right next to each other
4. Rank Results: make a list of documents and their scores – take the documents with the highest scores
as the best matches
a. Google also shows snippets from each document that highlight the words the user typed
b. In search ranking, google returns the ranked URLs and the snippets to the user as results page
- SEO: Search Engine Optimization: 3 Components you should look at when you are trying to make your site
more visible are:
o Text:
 STEP 1: IDENTIFY THE CRUCIAL KEYWORDS
 STEP 2: PUT KEYWORDS IN BEST LOCATIONS (Title; Property Title; Visible Body Text around
and in links; Text that is above the fold (first screen))
 Keyword density
o Links: No broken links
o Popularity: Link-popularity and click-through popularity
- CACHED: highlights where searched words are
- How to improve ranking of website in a search engine:
o Ensure pages have full meaningful titles
 The most important tag, heading people will see in search engines <title> xxx<title>
 DW = the property title – important: UNIQUE property title attribute for every page
o Add a meta ‘description’: description of the site (1-2 lines) which sometimes appears along with
the title in the search results page of some search engines
 <meta name=”Description” content =”xxx”>
o Add meta “keywords”: words that your customers would enter to search to find site
 Keywords NOT a major factor search engines consider when ranking sites because of abuse
 <meta name=”keywords” content=”x,x,x,x,x”>
 TIPS: single words, do not repeat more than 3-5 times, use plurals, use important words in
different forms, keep length between 200-500 characters (10-15 words)
 List of occurances of each words on a page more important
 Special weight to keywords that appear: placement (high vs low), beginning of sentence vs
embedded, proximity, headings, in title, metatag description, alt tags for graphics, generic
metatags keywords, in link text for inbound links, in the URL
o Add your page to the actual search engine site
 Search engines: robots used to index sites, use meta tags keywords, title, and alt fields
 Directories: robots not used, human editor reviews, therefore, meta tags etc DO NOT help
with ranking – best to describe site accurately – make sure site completely done before
submission
o Get sites that score highly on the search engine results to link to your site
CS 1033A – Final Exam Notes Page 17
 Integrate a blog into your website, press release, submit into social network sites,
comment on other people’s blogs
o Check your competitors web pages – determine why theirs ranks higher than yours
- Using Statistics – knowing what visitors like and dislike about website
o ISP – web servers keeps logs of all visitor activity – records requests for files on site, date, time etc
 # of visitors: Number of users to your site
 Files: number of files retrieved from a web site
 Pages: Number of distinct html files/pages looked at (stickiness)
 Hits: Number of files sent to a user after a page results (includes graphic files)

History of “Searching the Net”

- 1990: The first tool for searching the Internet was called “Archie” (short for archives)
o Original implementation written in 1990 by Alan Emtage, Bill Heelan, and Peter J. Deutsch at McGill
o Designed to index FTP archives, allowing people to find specific files
o Word’s first internet search engine
o Downloaded directory listings of all files located on public anonymous FTP servers: creating a
searchable database of file names
- 1991: “Gopher” – by Mark McCahill, Frahad Anklesaria, Paul Linder, Dan Torrey, and Bob Alberti of
University of Minnesota
o Gopher is a distributed document (shared by compuers) search and retrieval network protocol
designed for the internet
o Its goal was similar to that of the world wide web, but now become obsolete
- 1991: World Wide Web developed at CERN – Tim Berners-Lee (Geneva, Switzerland)
o Problem: data difficult to access and exchange due to differing encoding formats and networking
schemes
o Several criteria: system must be flexible, compatible with numerous languages and operating
systems, system must be capable of recording random links between objects; enterting and
correcting information is easily performed
- 1995: April – Yahoo – David Filo, Jerry Yang – more than 10,000 employees
- 1998: September – Google (search engine): Larry Page and Sergey Brin – more than 10,000 employees,
management team most experienced technology professionals in the industry

Lecture 08: ANIMATION

ANIMATION: a drawing that moves, bringing the drawing to “life”

- Rely on “moving images” for effective communication

- Used for: entertainment (action, realism), Education (visualization, demonstration)
- Why use animation?
o Shows progress
o Indicate movement
o Illustrate change over time
o Visualize 3D objects
o Attract attention
- Simulation of movement through a series of pictures that have objects in slightly different positions
- Each drawing is called a FRAME: snapshot of what is happening at a particular moment (FPS: frames per
second)
o Movies on film – 24 fps
o TV – 30 fps
o 9000 frames for five minute cartoon – computer animation, “jerky” anything less
- In animation, each frame overlaps the previous one
- Movement is caused by: rapidly displaying each frame in sequence
CS 1033A – Final Exam Notes Page 18
- Types of Animation
o Computer-based training programs: the way something works (assembling parts, surgery)
o Education: teach applied and hands on skills (spelling, exam prep, learning instruments, athletes)
o Games: playstation, nintento, xbox...
o Web: animated buttons, banners, text, characters, etc
- Two types of animation  2-D Animation (cel/path) 3-D animation
o 2-D Animation: Cel-Based
 “Cel” (Celluloid): clear sheet material on which images were drawn by movie animators
 Images placed on a stationary background – background remains fixed
 Object changes from frame to frame
 Ex: toonz software
o 2-D Animation: Path-based
 Moves object along predetermined path on screen
 Path: straight or any curves
 Often object does not change (but resized or rotated)
 Path animation easier to create than cel based animation
 Pick: a starting point for an object, (start frame) + an ending point for an object (end frame)
+ a path for the object to follow
 And then the computer generated all the frames in between called TWEENING

Motion Tween Shape Tween

Works with symbols only Works with shapes only

Can’t morph (only movement) Can morph shapes

Only one symbol per layer if the symbol will Can have more than one shape per layer
have a motion tween but be careful, depends on what you want
to morph

Can be used with motion guide Can’t use motion guide

 Animation software features:

 Frame rate: speed of the animation
 Transitions: special effects (fade in, fade outs)
 User control: play back, how many times to run
 Looping: plays continuously until user stops it
 Speed up animation by increasing Frame rate/second or eliminating frames
o 3-D Animation: involves 3 steps: Modeling, Animating, Rendering
1. Modeling: defining the objects 3D shape – process of creating broad contours and
structure of 3D objects and scenes (draw views – top, side, cross section)
2. Animating: process of defining object’s motion – defining lighting and perspective views to
create change during animation
3. Rendering: give objects attributes – colour, amounts of transparency, surface textures
- RAY TRACING: technique of adding light and shadows to a 3D image
- Special effects
o Morphing: process of blending together two images into a series of images
CS 1033A – Final Exam Notes Page 19
 useful for showing how image might change over time
o Warping: distorts a single image – warp frown into smile
- VIRTUAL REALITY (VR): creates environment where user becomes part of the experience
o Boeing: flight simulators of airplane cockpits (hydraulic controlled on legs)
o CD based adventure games: point and go thru doors, stairs
o Hand-held equipment allows person to interact with environment
- Animated GIFS (simple animations)
o Special type of GIF file known as animated GIF/GIF89a that provides the animation you need
o Animated GIFS are formally called Multi-block GIFS: a series (blocks) or still GIF images within ONE
single GIF file
o When the GIF document is viewed, the multiple images display quickly and in succession, and
produce a STREAMING ANIMATION
o Characteristics of an Animated GIF:
 File size is affected by: the # of colours (256 max), amount of noise in the frames (just like
other GIF files)
 Number of colors: only 256****
 No plug-ins required: require no plug-ins, and the authoring tools to create them are often
free and easy to learn
 PLUG-IN: a program that permits web browser to access and execute files that the
browser would not normally recognize (Flash uses Shockwave)
 No sound
- Sources of animation – lots of free software online to create GIF animations
- Other animation file types:
o Animated GIFS (.gif) (universal)
o Flash (.fla, .swf) (by Adobe)
o Macromedia Director
o Sophisticated Animations: strata 3D, Lightwave, 3d studio Max, Maya, Houdini
- Animation Software
o Flash Professional CS3 – multimedia authoring and playback system
 Launched 1996 by Macromedia/Adobe bought in 2005
 Flash popular for its animated graphics
 Industry’s most advanced authoring environment for creating interactive websites, digital
experiences and mobile content
 Why popular?
 Professional designs, interactive content rich with videos, graphics, animation
 Import multimedia elements from other applications
 Support vector graphics – much more space efficient over bitmapped frames, scale
up with accurate detail no matter how large the window is resized by the user
 **Flash player is a free client application that works with popular web browsers to play
the animation
 The standard for delivering high-impact, rich web content. Designs, animation, and
application user interfaces are deployed immediately across all browsers and platforms
 *smaller file size
- Terminology
o KEYFRAME Animation: animating a graphical object by creating smooth transitions between
various KEYFRAMES (the frames that indicate the beginning and end of an objects motion path
o TWEENING: short for ‘in-betweening’, the process of generating intermediate frames between two
images to give the appearance that the first image evolves smoothly into the second image
o ONION SKINNING: 2D computer graphics term for a technique used in creating animated cartoons
and editing movies to see several frames at once
CS 1033A – Final Exam Notes Page 20
 Purpose: animator/editor can make decisions on how to create or change an image based
on the previous image in the sequence
o Rotoscoping: An animation technique for combining (compositing) figures with realistic settings in
television commercials and is also used for special effects in feature-length films

Animated Flash Director

GIF

Created Depends Flash (sound) Director (sound)

by (no sound)
Extension Source .fla (source) .dir (source)
depends .swf (movie) .dcr (movie)
.gif .flv (flash video encoder)
(movie)
Size Larger Vector images take up less Vector images take up less space than GIF bitmapped
than space than GIF bitmapped images
normal gif images
Uses Banners, Interactive video, graphics, More interactive sites
small areas animation
Need to Nothing Flash Player (Free and works Web browser plug in (The Shockwave Player)
play it with most browsers)

- Animation in the Movies

o Digital video: 1983 Star Trek - the Wrath of Khan
o Digital Animation: Toy Story (1995) first full length film created entirely with digital animation
o Movies – visual effects: Terminator II, Jurassic Park Dinosaurs
o 12 highest gross earnings made so far by computer generated animations worldwide as of 2007
o Shrek 2 – highest grossing computer generated film

Lecture 09: VIDEO

VIDEO
- Video uses the power of MOTION and SOUND
- ANALOG VIDEO: smooth electronic waves (ex: Conventional TV)
- DIGITAL VIDEO: converts into digital media (0s and 1s) – benefit of delivering on internet
o Composed of a series of bitmap graphics, each one called a frame
o Motion in a video is an illusion caused by the rapid display of several still images or frames
o Movies display at 24-30 fps  computer displayed video display at 12-15 fps
o Characteristics:
 Bits store Colour and Brightness data for each video frame
 Retains image quality no matter how many times it is copied
 Easily manipulated on a pc because stored in digital format
o Kinds of digital videos:
1. Desktop video (DTV): constructed and displayed using a personal computer
2. Web-based video: incorporated in web pages and accessed with a browser
3. DVD-Video: used for commercial DVDs that contain feature-length films
4. PDA vide: small-format video designed to be viewed on a PDA or cell phone screen
o Creating digital video (first storyboard)
CS 1033A – Final Exam Notes Page 21
1. Produce Video Footage. Select equipment for filming videos and use effective filming
techniques
2. Transfer video footage to a computer. Use cable to cable transfer or a video capture card
to move video footage from cameras, videotapes, television, and DVDs to your computer’s
hard disk
3. Edit video footage. Use software to select video segments, arrange them into a video, and
add a soundtrack
4. Store and play video. Select digital video file formats for playback on desktop, web, PDA,
and DVD platforms
o Ready to make a video
1. Pre-Production stage: Planning the video and gathering any resources you might need
2. Production stage: Camera work and sound recording
3. Post-production:
 Downloading from camcorder to computer
 Editing and/or encoding the finished video
 Removing unwanted footage
 Arranging desired footage in the correct order
 Adding music, titles, transitions, and possibly other effects
 Converting (encoding) into the correct format(s)
o MAKING A VIDEO: Post-Production
1. Capture video: download video from camcorder to computer
2. Edit Digital video (using computer, digital video software): edit it, add titles, filters,
transitions, superimpose clips, synchronize audio with video, authoring software: create
menus and interactivity
3. Output Video: output to different file formats – back out to tape, the Web, CD, DVD
- Capturing Video – must be in DIGITAL form to use in multimedia application. Process:
o Video camera (analog video) (analog signal) Video card  (digital signal) PC
o Digital camera (digital signal)  (Digital signal PC
- Five Factors to consider when making a video:
1) Source Device: camcorders and digital video cameras can be used to capture full-motion images
(analog vs digital)
2) Video Capture Device: video capture card needed (if using analog camcorder from analog to
digital)
o No need if source device outputs a digital signal (such as Firewire or USB)
3) Connecting Leads: Firewire, USB cable
4) Computer: Download video to edit
5) Software: capturing, editing, outputting
- Home video Edit facilities for: editing Home movies, creating TV productions, manufacturing CDs,
authoring and uploading internet material, internet video conferencing
- Video Capture Device
o Analog Camcorder: Need VIDEO CAPTURE CARD
o Digital Camcorder: FIREWIRE connection
1. SOURCE DEVICE:
o CAMCORDER (camera Recorder): device for recording video images and audio onto a storage
device. To use video in a multimedia application, it must be in digital form (1s and 0s)
o Analog vs. Digital camcorders:

ANALOG (older Technology) – 1983 DIGITAL (Newer Technology) – 198

-Records electrical signals/pulses directly onto a -Records binary code (string of 1s and 0s) compressed
medium (like a tape) with a magnetic encoding on magnetic tape or other media
Disadvantage: Picture loses quality Advantage: No image degradation
CS 1033A – Final Exam Notes Page 22
Video Capture card needed to convert video from Plug video camera directly into computer via Firewire
analog to digital for your computer (aka i.Link) or USB connection
These are digital connections and allow you to
“dump” footage straight from the camera to hard drive
- ANALOG:
o 1983: VHS, VHS-C format (BetaMovie) – No playback/rewind capabilities, 30 min recording
o 1985: 8mm format – smaller cassette size, 2 hr recording, higher recording quality
o 1990: Video8 (original) and Hi 8 format (improved) (types of 8mm)
o Size comparison (smallest to largest): Mini-DV, VHS-C, VHS
- DIGITAL:
o 1994: (MiniDV) Digital Video – smaller than 8mm cassette, tape transport size adjustment,
improved audio and video quality over best analog camcorders, standard play of 60 min
o 1999: (D8) Digital 8 – obsolete: cassette size – large as Hi8 format (a type of 8mm)
o 2001: (DVD) Digital Versatile Disk
o 2006: (HDD) Hard Disk Drive and (SD Memory stick) Solid State Media Card
- Types of Camcorder recording media:
o Videotape cassette: recording to digital tape, like MiniDV (DV) and HDV
o DVD Disc: uses recordable DVD discs for playing in a home DVD player or PC
o Hard Disk Drive: HDD, saving to non-removable hard disk drives
o Solid State Media Card: Saving to cards like SD and Memory stick PRO
- Viewing Images on TVs

CRT Display: Older Technology Flat-panel Display : PLASMA/LCD

Screen resolution 480, electron gun beam activates the Screen resolution 1080i/1080p, flat grid of pixels
dots I=interlacing, p=progressive
-Our eyes see phosphor dots on the screen
An electron beam (gun) activates the dots. The gun
scans through the dots horizontally
A complete scan is when the gun starts at the top left
and scans several times horizontally till it gets to the
bottom right
Interlacing effect (line 1, 3, 5, 7,) (line 2, 4, 6, 8) Progressive effect (Line 1,2,3,4,5,6,7...)
-each pass is called a field -each pixel has 3 sub-pixels (RGB)

- Digital Advantage: higher resolution (# of horizontal lines)

o Digital recorders: 480+ horizontal lines recording
o Analog recorders: 280 lines for black and white, 240 lines for color with analog recorders
- Device photos: see lecture 9 slide 32
- VIDEO CAPTURE CARD: needed to convert video from analog to digital for computer
o Placed in open expansion slot on main board of the computer
o Once installed, video capture cards allow you to connect a camcorder, VCR, or TV to the computer
o Special software enables the images to be converted from analog to digital form
- FIREWIRE (i.Link, IEEE1394): a means by which information could be sent from the camcorder directly to
the computer
o A high speed digital serial data connection that allows the output of the camera to be fed directly
into a computer in digitized form
o Digital video footage requires 13 GB of storage per hour of video
o All major manufactures agreed to use a common digital tape format and a method  Firewire
(universal standard)
- Firewire vs USB
o Firewire 400 by Apple: wanted to charge per machine used, so PC used USB 1.1 instead
- Transmitted originally at 400Mbps
CS 1033A – Final Exam Notes Page 23
- Peer to Peer technology (can chain one camcorder to another without a computer)
o USB 1.1 could transmit at 12 MBps
- Used for mice, keyboards, printers, too slow for video
- USB 2.0 – backward compatible, transmitted at 480MBps
- Master/Slave technology – need to connect to a computer
o Currently – Firewire 800, transmits at 800 MBPS, expect future to transmit at 3.2 Gbps
- Benefits of Digital
o No loss of quality: Digital videotape can be copied almost indefinitely
o No need for analog-to-digital conversion: can be directly uploaded to digital editing systems
o Reduces/eliminates problems such as dropouts due to error correction associated with digital
electronics
o Archival (long-term) storage: better suited for longer periods
o Quality of digital recordings is significantly better than analog recordings
- Controlling the transfer process
o Video capture software: doesn’t matter if using analog or digital camera
o Should have features:
- Start and stop the transfer
- Select a file format for storing your video footage
- Specify file name for each video clip
- Video capture software is supplied with video editing software and with video capture
devices
o Last major Hollywood picture to be realized as a VHS picture – A History of violence
- Uncompressed format on the digital camcorder
o Almost all digital camcorders store video in DV format – digital video (uncompressed); most
common form in DV25
o Windows moves DV directly into AVI (which can be uncompressed or compressed) and never deals
with .DV files
o Quick Time will convert .DV to other formats
- Colour Format for Video
o For pictures – RGB commonly used
o For video – Y or &UV(CbCr) (for MPEG compress)
- Y  luminance (brightness)
- UV (CbCr)  chrominance (color/hue)
o Black/White TV only used the Y signal – since only transmits brightness information
o Human eye detects changes in luminance more easily
- Color sampling: digital video compression technique
o 4:1:1, 4:2:0, 4:4:4: (no color substitution) – the numbers represent colour sampling
- Scale: 4 – no compression, 0 - max compression thus 4:4:4 = no compression
- X:Y:Z (X = brightness; Y,Z = colour) = 4:4:4
o Averages out pixels to cut down on bandwidth for faster transfer rates
o Eye sensitivity: rods (light vs dark, black vs white – not color) cones – see color
o We can detect brightness better than color (more rods)
o What does 4:1:1: mean?
- Assume we have 4 pixels – red, orange, blue, purple (red and blue = purple)
- Blocks of 4 pixels averaged out, 4x1 block
- All four pixels get forced to become purple (shades of brightness), block of 4 pixels
averaged out
o 4:2:0 – blocks of 4 pixels averaged out – 2x2 grid

Color Amount of Y Amount of U Amount of V (color Amount of Used in

Sampling
CS 1033A – Final Exam Notes Page 24

Method (luminance) (color or hue) or hue) Compression

4:4:4 4 samples 4 samples 4 samples None

12 samples for each

group of 4 pixels

4:2:2 4 samples 2 samples 2 samples Reduced from 12 Digital Betacam

samples to 8, 33% format
reduction in storage

4:2:0 4 samples 2 samples of either U or V, one scan 12 to 6, 50% HDV, MPEG-1,

line of U, then one scan line of V reduction in storage DVD, MPEG-2, PAL
DV

4:1:1 4 samples 1 sample 1 sample 12 to 6, 50% NTSC DV, miniDV

reduction in storage digital camcorder

Lecture 10: VIDEO EDITING

- Editing Digital video

o Transfer videos in a series of short clips (1-2 min)
o Some software automatically detects frame changes
o LINEAR EDITING: before digital camcorders – consisted of recording segments from one videotape
to another tape – can’t jump around
o NON-LINEAR EDITING: (now) computer hard disk and video editing software
- Several gigabytes of available storage space at least 512 MB RAM-2GB
- Edit and easily arrange video clips – any order
o Video editing software key attributes:
- Arrange video clips on TIMELINE
- VIDEO TRACKS contain video segments, transitions
- AUDIO TRACKS (voices, music)
- Overlay video track with several audio tracks
- Edit it, add titles, filters, transitions and FX, superimpose clips, synchronize audio with
video output in different file formats
- OUTPUT VIDEO
o For best quality final product – store video in a Raw, non-compressed DV format for editing
o After trimming unwanted footage – convert video in other formats for distribution
o *know which video files are compressed and which are streamed

DIGITAL VIDEO FORMATS

* File Type Also known as: Originally created by

CS 1033A – Final Exam Notes Page 25

.mov QuickTime movie Apple

.avi Audio Video Interleave Intel

.rm Real Video Real Systems

.wmv Windows Media Microsoft

.mpg MPEG Motion Picture Experts Group
.mpeg
.flv Flash Video Adobe

.mkv Newest technology

- Optimizing for web: Balance between QUALITY and FILE SIZE

o FILE SIZE is dependent on:
- Lower Frames per second (fps) – TV = 30 fps, Web Video = 10-15 fps
- Picture size dimension – Full screen = 640x680 pixels, std web frame size 160x120 pixels
- Colour resolution – (24 bit, 16 bit, 8 bit) – Lower resolution  lower quality  smaller file
- Length of the clip
- Pick a CODEC that does higher compression
o Video data contains both Spatial and Temporal compressions
- Similarities are encoded by identifying differences:
 Within a frame  Spatial
 Between frames  temporal

CODECS: SPATIAL COMPRESSION (within a frame) CODECS: TEMPORAL COMPRESSION (Between Frames)
-compress each frame individually -just save info on selected frames (keyframes)
-Uses same techniques as JPG compression -all other frames just save the differences from the
previous keyframe
-good when difference between current frame and
keyframe is small
Codecs that do spatial compression are: Animation, Codecs using temporal compression are: Sorenson
PlanarRGB video, H.264

- Compression technology: reduces the file size for transfer and storage while maintaining quality
o Speed transfer improved
- CODECS: video compression/decompression programs – scheme fro coding and decoding
large amounts of data
 STORAGE – coded
 VIEW – Decoded
o Electronically compress and decompress video and related data
o Benefits:
- end result smaller file size
- large amounts of information can be stored on media or sent by e-mail
- streamed over the internet in smaller packages but still looks good upon playback and
downloads faster
o Two types of compression: lossless vs. lossy

LOSSLESS COMPRESSION (no loss of data) LOSSY COMPRESSION (loss of data)

CS 1033A – Final Exam Notes Page 26
-Squeezes data into smaller space without eliminating -discards “repetitive” or “redundant” data; may not be
information noticeable to the eye
-100% of data still there, similar to zipping a document -results in compression ratio as large as 200:1 for some
-uses a compression algorithm that reduces file size but -greater ratio, poorer the decompressed image
does not lose any data -applied to video because quality loss not noticeable in
moving images
-applied to internet streaming
**applied to .jpg and .mpg formats –
“redundant” info = similar info –
20:1 compression, 1MB to only 50 kB or 1024KB to 50KB

CODECS (COMPRESS DECOMPRESS):

- Speed up downloads – 10 times smaller than uncompressed video files, which would take 3-5x longer
- Codecs for audio/video, streaming media, videoconferencing, mp3s, speech, screen capture
- The codec used to compress is the one needed to view

Video Transfer for the Web

HTTP: Hypertext Transfer Protocol RTSP: Real-Time Streaming Protocol

-Download the video from the host (server) to the user’s -Played directly from the sever to the user’s computer in
computer in its entirety then play the clip a process called “STREAMING”
-RTSP allows the user to perform tasks such as pause
and play
User must wait for the download process to end File played directly from server, thus some delay
Video can be played repeatedly and copied if necessary Video is broadcast to user and after displayed, discarded
Suited for SMALL video clips Suited for LARGE file and LIVE broadcasts
- RTSP – “Streaming” (Webcasting)
o Requires a program to display streaming video
o Leading programs: Real Player, Windows Media Player, Apple QuickTime Player
- All 3 can: play both audio and video, handle true streaming media, provide plug-ins for use
on either platform (Mac/PC) at no charge to the user
o All 3 players work with popular video formats such as AVI, MPEG
o Webcasting of video events in real time – concerts, conference speakers
o Streaming is either On-Demand (stored on server and streamed on user request) or Live (sporting
event, election results)
- Streaming: The process of taking large audio/video file and transmitting small, continuous amounts of that
file over a network. “Steady and continuous” – File remains on server
CS 1033A – Final Exam Notes Page 27

- Small buffer space is created on the user’s computer

- Data starts downloading into it – as soon as buffer is full, file starts to play
- Process of creating streaming files: (USED REALPRODUCER)
o Locate and prepare source materials/media content
o Digitize and then compress files with a streaming format
o FTP streaming files to streaming server
o Link from a webpage to the streaming media/embed file on a webpage
- HTML webpage links to a .ram file which launches the real player and links to the clip
- Saving the streaming file – Extension for RealProducer = .rm
- Advantages of streaming:
o Does not take up local disk space
o Little waiting time
o Deliver long duration videos
o Live delivery and archiving: audio and video programs can be delivered live and archived
simultaneously
- Advantages of downloadable media files:
o Readily available independent of server – user can use it later
o Higher image quality (streamed videos highly compressed for efficient delivery)
o Step through frame-by-frame – can jump through audio/video track

- Unicast  each user gets his/her own stream of video, the server has to send out A LOT of data if several
users are watching at once
- Multicast  send the same stream to a bunch of users but then they lose the ability to pause, rewind, etc.

Video for multimedia applications – consider:

- Source: quality tied to color resolutions, frames/sec, compression format

o Higher the quality of original video, the better the digitized version
- Appropriateness: due to large video file sizes and poor quality, animation could be better
- Playback systems: web-based video may require browser plug-ins
- User control: provide user with control options to start video, jump through, pause, stop, volume

Viewing Video on the Web (and audio)

CS 1033A – Final Exam Notes Page 28
LARGE FILES

o Download (Progressive): Files downloaded to the user’s computer, and only then begin to play
- Disadvantage: large files, long wait times
- Advantage: permanently stored on users computer
o Progressive download: click begins download, but after some portion had been downloaded movie
starts to play
- Disadvantage: interruptions in watching video, delay times
- Advantage: permanently stored on users computer
- How is it done – player calculates the speed of the download and guesses when to start
playing the portion it has, plan to start late enough that whole movie downloaded by the
time finished watching
o True streaming: file is not downloaded at all – media beings to play as soon as it gets the packet
- Advantages:
 Fastest but requires that the server be set up to serve streaming media
 Reduces waiting time required of the user
- Drawback: congestion on the net may cause media to stall if can’t keep up with playback

Lecture 11: SOUND

SOUND: Record  process  deliver

- Rely on sound to enhance multimedia applications: easily capture the attention of users, facilitate easy
learning, set the mood
- On the web sound offers: Background music, narration, sound effects, Record testimonials,
educate/presentations webcast, one-way audio offers on-demand radio listening, conferencing
- What is sound: pressure waves of air
o Visualize the sounds as a series of recurring waves called WAVEFORM
o VOLUME: the higher the wave the louder the sound
o PITCH/FREQUENCY: the closer the waves the higher the pitch
- Sources of sound:
o Pre-packaged (come with computer), purchased/borrowed, create own (recording program,
recording studio for higher quality, electronic instruments captured in MIDI)
- How is sound recorded
o MICROPHONE translates movement into electrical signals (analog) then tape recorder translates
the waveform from an electrical signal on a wire to a magnetic signal on a tape (analog)
o Analog-to-digital converter (ADC): ADC captures a snapshot of the electric voltage on an audio line
and represents it as a digital number that can be sent to a computer
o SOUND CARD: a device that is responsible for transforming the bits stored in an audio file into
music. Does 3 things:
1. Transforms digital bits into analog waves when you play back a waveform audio file
2. Transforms analog waves into digital bits when you make a sound recording
3. Handles compression and decompression, if necessary
- In multimedia application, sound must be in a DIGITAL FORM (string of 1s and 0s)
o Sound can be recorded directly in digital form or an analog sound can be converted to a digital
sound
o To convert analog sounds to digital sounds  thousands of SAMPLES are taken of the sound waves
and recorded as bits
o Each dot in the sound wave photo (wavy line) represents ONE audio sample
- Quality of digital recording depends on:
1. SAMPLE RATE: rate at which samples are captured, number of times/sec that the
waveform is measured
 1000 samples per second = 1KHZ (1000HZ)****
CS 1033A – Final Exam Notes Page 29
 8KHZ voice only, 22KHZ music files, 44.1KHZ used on CD
 *lower rate – file smaller since missing sound
2. SAMPLE SIZE: resolution or precision that sample was taken (in bits)
3. CHANNELS: Mono vs Stereo
 MONO SIGNAL: one stream of data reproduced equally on both speaker channels,
lose stereo operation
 STEREO SIGNAL: consists of two streams of data working together (left and right)
o double the size of mono file
4. CODECS: software programs that greatly REDUCE the audio file size
 Use lossy compression: removes redundant data, quality reduced each time
o HIGHER sampling rate and LARGER sample size, the more accurately sound can be digitized
o Quality of the digitized sound gets better as file size increases
o In audacity, settings are in edit>preferences
o 1 min of recording could end up being 10MB
- Sound editing programs characteristics:
o Record sounds in different sample size and resolutions
o Digitize analog sounds
o Create special effects
o Save sounds in different file formats
- Audacity software: edit the clip, combine it with other sound files, Add transitions and FX
o Same for WaveStudio
- PROCESS
o Once digitized sound is in the computer
o Sound editing software
1. Edits: unwanted noise, pauses, trimming
2. Fade-ins, fade-outs, background music, special effects
3. Several found files can be mixed or spliced together
o Save the file in a format intended for the audience application
- DELIVER: to head through speakers, digital sound is sent through a digital-to-analog converter (DAC)
o Delivery method – powerpoint, website, CD
- Sound on the web
o File size: select small sized files, the smaller the file, the faster webpage will download
o File formats: consider platform support, browser support, compressed of uncompressed quality
- Sound file formats: know which are streamed/compressed, large/small, plug-in required

- AIFF (audio interchange format) - .aif – LOSSLESS

o Excellent sound quality, supported in browsers without a plug-in
o Audio data is stored raw – uncompressed format, files LARGE
- MP3 (MPEG-1 Layer 3) - .mp3 – LOSSY
o Good sound quality, even though file compressed, can be streamed over the web
o Requires standalone player or browser plug-in
- REALAUDIO - .ra .rx
o High degree of compression produces smaller files, data can be streamed over the web
o Sound quality is not up to the standards of other formats, requires a player/plug-in
- WAVE - .wav - LOSSLESS
o Good sound quality: supported in browsers without a plug-in
o Audio data is stored in raw, uncompressed format so files are very large
- LOSSY vs LOSSLESS
o .aiff and .wav – LOSSLESS
o .mp3 is LOSSY: with medium quality, a typical song compressed to 1/10 the size it would have been
on a CD
CS 1033A – Final Exam Notes Page 30
o .wma and .mp4 are LOSSY and allow for built-in lockdowns which is why Microsoft and apple
pushing
- MIDI: Musical instrument Digital interface
o Classified as SYNTHESIZED sound
o Contains instructions for creating the pitch, volume and duration of notes that sound like various
musical instruments
o Disadvantage: does not produce high-quality vocals, no full resonance of “real” sound
o Advantage: midi files are more compact – 3 min of MIDI = 10 KB, 3 min other = 15 MB
o *compact, but can’t get full sound or produce high-quality vocals
o MIDI FORMAT
1. Music composition software (ie Finale)
2. Create your own tunes
3. Input directly from a MIDI instrument to your computer
4. Edit notes/combine parts for several instruments
- Listening to Audio on the Web – problem large files

Downloadable Audio Streamed Audio

Advantages Disadvantages Advantages Disadvantages
Once downloaded, Takes a long time to Plays immediately Cant rewind, pause, etc.
can be replayed, download, especially for
edited over and over big files
(don’t need to wait
again for download)
Don’t need a special Takes up disk space on Consumes RAM only Need a special server to
streaming web server the computer to store it while being played, post it
to post the file then purged after

Example: Audio Files on Limewire Example: cbc radio

- Streamed video  broadcast TV

- Streamed audio  broadcast radio
- Lower bandwidth required  streaming successful for audio
- Embedding code into a webpage
o Linking to the sound file
o Embed the sound file

Review Questions: Lecture 02

 Name the 4 things to watch for when doing any design: CRAP Principles
 Name 5 components that make up multimedia? Text, image, sound, video, animation
 What measurement would you use for text in creating a Word document? Points
 Name 3 relevant events in the history of multimedia.
Arpanet (1969); Intro to world wide web (1991); Mosaic (1993-first graphical browser)
 What type of font is this: Hello World (serif)

Review Questions: Lecture 03

Question: How many things can you represent with a 5 bit depth (5 bits)?
Question: What is the smallest value that you should set the dpi for an image that you plan to print?
Question: When converting analog to digital what two things to you have to do to analog data?
CS 1033A – Final Exam Notes Page 31
Question: What bit depth do you need to represent a black and white image?

Review Questions: Lecture 04

 Question: How big will an image be in terms of bytes if it is uncompressed, true colour and 200 by 400
bytes? 200 x 400 = 80,000 bytes
 Question: What type of compression doesn’t lose any of the original information about the image? Lossless
 Question: Which type(s) of file formats perform a lossless compression? .GIF and .PNG
 Question: JPGs will produce a smaller file size than PNG 24 for a photograph: TRUE
 Question: What should you set the dpi for an image you wish to print? (your own printer) Set printer
resolution at 300 dpi; When printing images you should set your printer resolution to 300-ppi (dpi) since
you can get reasonable 4x6
 Question: If you want to print an image at 5” by 7”, what is the minimum size it must be in pixels for it not
to look pixelated:
 Assumption: Best to use printer resolution 300dpi
 FORMULA is: (inches  pixels)
 Print Size Dimensions(in PIXELS)
 = INCH dimensions x print resolution
 = 5inches x 300dpi
 = 7inches x 300dpi
 Image size : 1500 pixels x 2100 pixels
 Question: Which of the following images will print the largest?
(a) 300 pixels by 300 pixels at 100dpi
(b) 300 pixels by 300 pixels at 50dpi
(c) 300 pixels by 300 pixels at 10dpi
(d) They will all be the same size
Answer:
FORMULA is: (pixels inches)
Print Size Dimensions (in inches)=pixel dimensions /print resolution
(a) 300/100 and 300/100 = 3” x 3”
(b) 300/50 and 300/50 = 6” x 6”
(c) 300/10 and 300/10 = 30” x 30”
 Uncompressed file size (assume 24bit depth)
o = (image dimensions - pixels) x (<R,G,B> bits)
o = 200 * 300 * 24bits
o = 200 * 300 * 3 bytes = 180,000 bytes

Review Questions: Lecture 05

1. What are the chunks of data that are sent over the internet called?
2. True or false, the Internet and the World Wide Web are the same thing?
3. Give an example of a valid IP address.
4. True or false, www.csd.uwo.ca/courses is a domain name?
5. Give 3 valid TLDs
6. www.homer.simpson.com is a valid domain name. TRUE or FALSE
7. Zack&Cody.Love.You.2.com is a valid domain name. TRUE or FALSE
8. What is a message (a webpage or an email message or a file) on the Internet broken down into before it is
sent over the net?
9. Are the following valid IP addresses?
1.1.1.1
126.265.13.10
129.129.129
CS 1033A – Final Exam Notes Page 32
Review Questions: Lecture 06
 Question: What is the input we give a web browser?
 HTML Code
 Question: What is the output from the web browser program?
 Webpage on the screen
 Question: Can you name 3 web browser programs?
 Internet Explorer, Safari. Google Chro,e
 Question: Does anyone know how you look at the html that was used to create the page currently
displayed in the browser?
 Internet < view source

Review Questions: Lecture 07

 Question: What is the PageRank algorithm?
 Google’s algorithm to decide what order to present the pages it found to you
 Question: Name the most popular search directory web site?
 Yahoo
 Question: Name the most popular search engine website? What % of the market does it currently have?
 Google
 Question: What are the 3 components you must address to get your page a higher ranking?
 Text, Links, Popularity
 Question: Who started Yahoo, who started Google?
• Yahoo – David Filo, Jerry Yang
Google - Larry Page, Sergey Bin
 Question: Name one search tool that predates Google and Yahoo
 Archie; Gopher
 If you want a table in your webpage to automatically resize as the user resizes the window, then you should
define it in terms of pixels not percentages
 True
 Which of the following is the most important in terms of getting your website ranked highly in Google?
Question: Which will rank you higher with Page Rank, having 1 link to your site from www.wikipedia.org
or having 3 links to your site from www.uwo.ca?
 The number of links from other pages to your page
 Question: if we search for the terms “Cattle”, “Ranch”, “Texas” and we only get pages back that have those
words, what are some of the factors that will make one page show up ahead of another page?
 Property titles; alt tags; frequency of key words; closer frequent words

Review Questions: Lecture 08

Question: What name do we give to the start frame and the end frame? (not the frames that are computer
generated, rather the frames drawn by us?)
* Keyframes
Question: Why is the act of generating the frames in between the first frame and the last frame called?
* Tweening
Question: The path the object follows have to be a straight line, FALSE
Question: What software allows us to do path based animation?
* Flash
Stage: rectangular area where the visible motion will take place
Timeline: series of frames in a row and stacks of layers. Indicates key frames, regular frames and empty frames
Shape: basic shapes drawn with the shape tools, line tool or a single letter
CS 1033A – Final Exam Notes Page 33
Symbol: store in a library and can be reused. Changes to the library symbol will result in changes in all of the copies
of this symbol currently on the stage.
 Graphic: static graphic, can be used in other symbols
 Button: interactive part of animation with user, responds to mouse clicks and rollovers.
 Movie clip: reusable piece of animation, can turn a simple animation into a movie clip symbol and
reuse it.
Question: How many frames per second should we have when building an animation for display on a computer?
12-14
Question: Which type of animation uses frames:
 Cel Based
 Path Based
 Both
 Neither
Question: If an animation is 40 frames long and the fps is 5, how long will the animation take to play? 8 seconds

Review Questions: Lecture 09

1. Which is faster: Firewire 400 or USB 2.0 or Thunderbolt?

2. Every Apple computer has a firewire port, true or false ?
3. What was the Frame Rate for NTSC TVs in the 80s?
4. What is the Frame Ratio for NTSC TVs
5. What is the Frame Ratio for HD TVs
6. What does 1080p mean?
7. Question: Black and White TV only used the Y signal
(fill in the blank with Y, U or V)
8. Question: Which of the following color sampling methods offers 0% compression? 4:4:4
9. Question: Name two types of data transfer methods you can use to move your video from your camcorder
to your computer. USB, Firewire
10. Question: How many scan lines are there on an analog TV from the 1970s? 480
11. Question: What does 720p mean? 720 lines in Progression (Sequence)

Review Questions: Lecture 10

Question: Why can your computer sometimes play one .avi file but then not play another .avi file? All depends on
the CODEC
Question: What file format does YouTube use (.AVI, .WMF, etc.) What newer file format is Flash Player pushing
(FL4)
Question: avi is a container file format. True
Question: .avi files will always use the same codec to play them. False
Question: Name 3 ways of reducing the file size of a piece of video before moving it onto your website.
a) Lower frame size (from 680x480 – 320x240)
b) Lower frame rate
c) Choose a CODEC
Which of these will NOT affect the size of a video file?
a. Picture Size
b. Color Resolution
c. Type of font used for credits
d. Number of Frames per second
e. Length of Clip
f. All of the above will affect the size
What is a codec?
CS 1033A – Final Exam Notes Page 34
a. A type of video capture card
b. A piece of software used for compression/decompress of videos and audios
c. A piece of software used to edit videos
d. None of the above

Review Questions: Lecture 11

1. Which has more samples per second?

a. CD recording – 44KHZ
b. FM Radio – 22KHZ
c. Both are the same
2. In general, what is the minimum amount of samples needed for voice only? 8KGZ
3. Which part of a sound wave reflects the volume?
Amplitude