0% found this document useful (0 votes)
14 views

1033 Compsci final notes UWO

Uploaded by

chanelle1431
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
14 views

1033 Compsci final notes UWO

Uploaded by

chanelle1431
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 44

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 Discussed in 1962 - First packet switching network and predecessor to the
internet
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
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 View instantly by May encounter slow


Time inserting into drive connection speeds
Ability to Cannot change content Easy to update material,
change – must recreate and new updates can be
content redistribute 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
- 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 POINTS (.dpi)
pixels) unit of measure for printer resolution
unit of measure for monitor resolution (pt)
(px)

-WEB -WORD
- # of pixels per inch of monitor display -# of dots per inch
-a display setting of: 1280x1024 has -absolute type size – usually used in
1.3 million DPI, 800x600 has 480,000 printing
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 -if web document – text expressed in
want on the screen points
-some browsers will not allow the text -can be displayed much larger or
size to change (IE – no, FF – yes) smaller than you expect
-http://www.uwo.ca -http://www.largnet.on.ca/
-print style sheets created to print text -Control over the viewing size
using points *72 pts WILL ALWAYS BE 1 INCH
*develop websites using the pixel WHEN PRINTED, regardless of what
system 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
- 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
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 USED FOR PRINTING- Subtractive Model
(RGB) (CMYK) (k=black)

Primary colours: Red, Green, Blue Primary colours: Cyan, Magenta, yellow
“added” light to a black background in “subtracted” from a white background
order to 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,
Each value ranges from 0-255 #FFCC66
256 color shades = 28 bits
-16 million colors in the spectrum (2563)

Red: <255,0,0> Red: #FF0000


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

**Vector CANNOT be converted to Bitmap, but Bitmap CAN be converted to vector

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

-ability to edit an image’s pixels -greater control and precision with free-hand
-images from scanners, cameras tool
-need a “PAINT” program -display more accurately on screen
-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,


(but photoshop v6.0 has vector features) Corel Draw

- 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 (3)
- 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 .JPG – joint photographic experts group
(bitmapped) (bitmapped)

-attributes file format -attributes file format


-compression -compression
-color resolution -progressive jpeg
-dithering
-interlacing **distorts edges where there is sharp
-transparency contrast
ARTIFACTS: noise/specs around the image

-common image format used on the internet


-cross platform

-supports a max of 8-bit color scheme (8 -stores full color information – max 24
bits/pixel = 256 colours) - good for clip art, bits/pixel (16 million colors)
not photos
-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, -uses: photos, computer games,


cartoons, buttons screenshots, stills from a movie

**tiny file size and limited colors **larger file size but full color scheme

“LOSSLESS” compression – no data “LOSSY” compression – data is discarded


discarded during compression à QUALITY each time file compressed àQUALITY
KEPT 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
§ 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
• Bitmapped graphic
• May see it as “CompuServe GIF” since Compuserve created it
• One of two standards used on the Web without plug-ins
• Gif format only supports up to 256 colors
Graphics Interchange Format
(.GIF)

• Standard bitmapped format on the Windows platform


• Supported by most Windows applications.

Windows Bitmap
(.BMP)

• Vector based graphic


• Popular image files since they can be imported into nearly any application.

Encapsulated Postscript
(.EPS, .EPSF)

• Most widely used bitmapped file format


• Supported by image-editing applications, scanning software, page-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

Tagged Image File Formats


(.TIF, .TIFF)

File Extension

File Format
- 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
§ 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:
§ 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)
§ 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 (4)
- 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
- 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 _
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 (laura #7)
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
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 (Laura #7)
- 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
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
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 (laura #8)
- 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, SUBJECT DIRECTORY - Yahoo,
Hotbot About.com, AOL

-A program that enables the user to search -a program that enables the user to search
internet sites - User types a list of keywords internet sites
-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 collection of websites organized by topic
keywords were found

searches a database of information about Human-selected (hand-picked) internet


the internet resources are arranged and classified in
hierarchical topics

Uses spiders, webcrawlers to gather Human editors review webpages, rank


database information of websites; index them, organize them into categorized list
sites and score pages and puts the with brief descriptions
information into a database

Publisher registers into database, or wait for Wait for human editors
spider

Examples: Google, altavista, Hotbot Yahoo, about.com, AOL, Open Directory


(open directory is 1% size of google)

- 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
§ 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 computers) 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; entering 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
- 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 Can have more than one shape per
will have a motion tween layer 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
§ 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
§ 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 (movie) .flv (flash video
encoder)

Size Larger Vector images take up Vector images take up less space than
than less space than GIF GIF bitmapped images
normal gif bitmapped images

Uses Banners, Interactive video, More interactive sites


small graphics, animation
areas

Need to Nothing Flash Player (Free and Web browser plug in (The Shockwave
play it works with most Player)
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)
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) – 1998

-Records electrical signals/pulses directly -Records binary code (string of 1s and 0s)
onto a medium (like a tape) with a magnetic compressed on magnetic tape or other
encoding media

Disadvantage: Picture loses quality Advantage: No image degradation

àVideo Capture card needed to convert àPlug video camera directly into computer
video from analog to digital for your via Firewire (aka i.Link) or USB
computer 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 Screen resolution 1080i/1080p, flat grid of
activates the dots pixels
-Our eyes see phosphor dots on the screen I=interlacing, p=progressive
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, Progressive effect (Line 1,2,3,4,5,6,7...)


6, 8) -each pixel has 3 sub-pixels (RGB)
-each pass is called a field

- 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
- 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 Amount of Amount of V Amount of Used in
Sampling Y U (color or (color or hue) Compression
Method (luminance) hue)
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 Digital


12 samples to Betacam
8, 33% format
reduction in
storage

4:2:0 4 samples 2 samples of either U or V, 12 to 6, 50% HDV,


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

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


reduction in miniDV
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

.mov QuickTime movie Apple

.avi Audio Video Interleave Intel

.rm Real Video Real Systems

.wmv Windows Media Microsoft

.mpg MPEG Motion Picture Experts


.mpeg Group

.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 CODECS: TEMPORAL COMPRESSION
(within a frame) (Between Frames)

-compress each frame individually -just save info on selected frames


-Uses same techniques as JPG compression (keyframes)
-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: Codecs using temporal compression are:
Animation, PlanarRGB Sorenson 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 LOSSY COMPRESSION (loss of data)
data)

-Squeezes data into smaller space without -discards “repetitive” or “redundant” data;
eliminating information may not be noticeable to the eye
-100% of data still there, similar to zipping a -results in compression ratio as large as
document 200:1 for some
-uses a compression algorithm that reduces -greater ratio, poorer the decompressed
file size but does not lose any data image
-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) -Played directly from the sever to the user’s
to the user’s computer in its entirety then computer in a process called “STREAMING”
play the clip -RTSP allows the user to perform tasks such
as pause and play

User must wait for the download process to File played directly from server, thus some
end delay

Video can be played repeatedly and copied Video is broadcast to user and after
if necessary 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
- 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)
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)****
· 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
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

Advantages Disadvantages
Once downloaded, Takes a long time to
can be replayed, download, especially
edited over and over for big files
(don’t need to wait
again for download)
Don’t need a special Takes up disk space
streaming web on the computer to
server to post the store it
file
Example: Audio Files on Limewire

Streamed Audio

Advantages Disadvantages
Plays immediately Cant rewind, pause,
etc.

Consumes RAM Need a special server


only while being to post it
played, then
purged after
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?
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? False, Internet
is a software. WWW is a hardware.
3. Give an example of a valid IP address. (212.432.543.1)
4. True or false, www.csd.uwo.ca/courses is a domain name? False, only csd.uwo.ca
5. Give 3 valid TLDs - .net, .com, .org
6. www.homer.simpson.com is a valid domain name. TRUE or FALSE – TRUE??
7. Zack&Cody.Love.You.2.com is a valid domain name. TRUE or FALSE - 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? – deliver information to the customers??
9. Are the following valid IP addresses?
1.1.1.1 yes
126.265.13.10 yes
129.129.129 no (4 numbers)

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 Chrome
— 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
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
8. (fill in the blank with Y, U or V)
9. Question: Which of the following color sampling methods offers 0% compression? 4:4:4
10. Question: Name two types of data transfer methods you can use to move your video
from your camcorder to your computer. USB, Firewire
11. Question: How many scan lines are there on an analog TV from the 1970s? 480
12. 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?
1. Picture Size
2. Color Resolution
3. Type of font used for credits
4. Number of Frames per second
5. Length of Clip
6. All of the above will affect the size
What is a codec?
1. A type of video capture card
2. A piece of software used for compression/decompress of videos and audios
3. A piece of software used to edit videos
4. None of the above

Review Questions: Lecture 11

1. Which has more samples per second?


1. CD recording – 44KHZ
2. FM Radio – 22KHZ
3. 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

You might also like