Week 1 Videos

C.R.A.P = Contrast, Repetition, Alignment, Proximity

Font Size
- 72 pt font in Word is 1 inch
Tracking: manually adjusting the horizontal space between letters in a word/line
Kerning: spacing between individual letters
Leading: spacing between adjacent lines of type
Serif font: has “tails”
Sans serif: no “tails”
Monospaced font: same width
Proportional font: different width

Font Colour
Hex Digits: 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F (colours start with #)
Red - 2 hex digits; Green - 2 hex digits; Blue - 2 hex digits
#FFFFFF = white
#000000 = black (highest decimal for hex digits)
e.g. #2A2A2A = grey; #222222 = dark grey, #CCCCCC = dark grey

Q. 17
A) 14
B) 3

Week 2 Videos
Binary Bits
Bit: 1 or 0
BYTE: 8 bits
1 bit: 0, 1 (2 items) (or 2^1)
2 bits: 00, 01, 10, 11 (4 items) (or 2^2)
3 bits 000, 001, 010, 011, 100, 101, 110, 111 (8 items) (or 2^3)

Binary Addition
0+0=0
0+1=1
1+0=1
1 + 1 = 10 (0 with a carry of 1)

Decimal Representation: 1 2 3 4 5 6 7 8

Binary Representation: 000 001 010 011 100 101 110 111

Binary to Decimal Conversion

- Ignore any 0 digits
 - If the digit is a 1, get the place value of the digit and calculate 2^ (to the power) of that
place value
- Place values begin at the right-most digit at place 0
- If the right most digit is 1, the result will end in an odd number
- If the right most digit is 0, the result will end in an even number

e.g. 1001
=3210
=2^3 +2^0
=8+1
=9

Pixel: Picture elements

- When printing an image, you should print with a dpi of at least 300
- DPI: dots per inch
- Does DPI affect file size? = No
- PPI: pixels per inch

Megapixel: how many millions of pixels you can capture in a photograph on a digital camera

A printed image must be printed at a minimum of 300 pixels per inch

Week 3 Videos
1 bit = 2 colours; 2^1 = 2 (0 = white, 1 = black))
2 bits = 4; 2^2 = 4 (00 = white, 01 = light gray, 10 = dark gray, 11 = black
e.g. 400 pixels X 300 pixels X 1 byte = 120,000 bytes or ~120 kilobytes

Subtractive Model - CMYK: Used for printing, ink applied to paper and “subtracting” the white,
primary colours = cyan, magenta, and yellow
Additive Model - RGB: Used on monitors,” adding” light to a black background (the monitor),
primary colours = red, green, and blue
True Colour: 3 bytes (24 bits/2^24) (1 byte for red, 1 byte for green, 1 byte for blue)
2 ways to encode
- RGB: 0 is no amount and 255 is the most allowed e.g. 255, 0, 0 = most of red
- Hexadecimal: #RRGGBB, 00=0, 01=1, 02=2…0A=10, 0B=11, 0C=12…FE=254, FF=255
e.g. #000000 = black and #FFFFFF = white
The human eye can detect less than 10 million colours

Indexed Colours: 2^8 = 256 colours; called Image Bit Depth (1 byte total)

Bitmapped Images: a type of graphic that is stored as a grid of pixel cell colours; most image
formats are bitmaps including JPG, PNG, and GIF, Icons are usually 32 pixels by 32 pixels
- Interpolation: When bitmapped images are enlarged, the computer adds new pixels
and guesses which colour to colour the new pixels based on surrounding pixels
Vector Graphics
- Made up of individual, scalable objects that are defined by mathematical equations
- No distortion as image is enlarged
- Usually has a smaller file size than the same image stored as a bitmap
Can easily convert a vector graphic image into a bitmapped image but not vice versa

How Big is an Image?

Length (pixel) X width (pixel) X colour bit depth (3 bytes)
- e.g. A picture has 1600 by 1200 pixels, each pixel will need 3 bytes
- = 1600 X 1200 X 3 = 5,760,000 bytes

Units of Measure
1 KB = 1024 B
1 MB = 1024 KB
1 GB = 1024 MB
1 TB = 1024 GB
*for exam, use 1000 for conversions

Download Faster
1. Make the image physically smaller: less pixels
2. Compress the image file: use tricks to make file smaller without losing the quality of the
image or the # of pixels

Compression Types
Lossless: Compress the original bits and bytes into less bits and bytes without losing any of the
original information about the picture
Lossy: Some of the original information is lost when compressed; selected portions of the
image are discarded but the selected portions are the ones that will be least noticed

RAW file: Each colour is 3 byte = 60,000 bytes of information that is stored

Week 4 Videos
ASCII Code: each letter is represented by 8 bits (1 byte)
- Huffman Coding: rather than ASCII (each letter is 8 bits or 1 byte), use the least number
of bits for common letters and more bits for less common letters
How many bytes will “see” be?
- s=8 bites, e=8 bits, e=8 bits: 24 bits (in ASCII code)
- s=4 bits, e=3 bits, e=3 bts (in Huffman code)

The human eye is more sensitive to brightness details than to fine colour details

GIF:
- Only supports 8 bit colour (256 shades)
 - Not great for photographs,
- Dithering: Place side by side pixels of two colours to create the illusion that a third
colour is present (grainy look)
- Interlacing: A process by which the image is drawn in a series of passes rather than all
at the same time (file size bigger)
- Lossless compression

256: max number of colours that can be represented in a .gif or .png8 image with no dithering

JPG (JPEG):
- Supports 24 bit colour (60,000,000/2^24)
- great for photographs but not good for crisp lines/sharp contrasts between colours
- Lossy compression (discards more data about colours)

PNG
- PNG-8: 8 bit (256 colours), 1 transparent colour, lossless compression
- PNG-24, PNG-32: 24 bit colour (60,000,000 shades), allows for transparency on each
pixel, lossless compression, png-32: full palette with full transparency, but PNG-24 will
lose some colours if there are varying levels of transparency

Week 5 Videos
CC: Creative Commons
- Standing man: BY (distribution)
- Money sign with line across circle: NC (non commercial)
- Equal sign: ND (no derivative)
- Redo sign: SA (share and like)

Copyright: your rights to control your works of creative expression (everyone owns the
copyright of their creation by default)
- Anything created that is tangible, photographs, drawings
- Can’t copyrights words or ideas

Network: a group of interconnected computers (could be connected with wires, wirelessly,

satellites)
- Intertwined network (spider web) was first created in 1969
Internet: 1969, a global system of interconnected computer networks that use the standardized
Internet Protocol Suite to serve billions of users worldwide (hardware, not software; world wide
web is software that runs on the internet)
- Uses TCP: Sending end: breaks a large chunk of data into small packets, sends the
packets out on to the Internet. Receiving end: rearranges and reassembles the packets
back into the webpage.
- Packet switching: Packet stops at first machine, then the router sends it to the next
machine on the journey (IP address) and so on until it gets to the final IP address
Circuit Switching: Only one line can be used at one time
Packet: a small group of bytes consisting of a header (destination and source) and the body
Protocol: rules for the format and transmission of data
IP: Picks a route for a packet, stopping at routers which pick the best machine/network to send
the package to. Uses IP addresses; each machine has its own unique address
- IP address: 4 numbers with dots between them, each ranging from 0 to 255, is always
32 bits

Domain Name System: maps the domain name to the correct IP address
- in most cases one to one mapping between an IP address and a domain name but not
always
Domain Names
- Web server: computer than runs software which holds the webpages and delivers
webpage to client
- Web pages are stored on the web server machine (sometimes called a host) in folders
URL: established by Tim Berners Lee in 1990 (created first web browser, came up with the
World Wide Web)
e.g. http://www.csd.uwo.ca
- csd=third level domain, uwo=second level domain, .ca=top level domain
e.g. https://www.csd.uwo.ca/undergrad/current/programs/
- TLD = .ca, URL = uwo.ca, subdomain = csd

Rules for Domain Names

- Max of 127 levels, each level can be up to 63 characters, entire domain name can max
be 255 characters, each level must consist of letters, digits, hyphens
Choosing a Domain Name: keywords, be memorable, avoid hyphens, .com extension, short

Reasons to not host your own website: expensive, needs continual connection, technical
complications, needs 24 hour support
ISP: Internet Service Provider, provide user with user account for accessing the Internet, email
access, web space to host/hold your website

ARPANET: first packet-switched network

Week 6 Videos
.html: a file with html codes that is displayed in a browser, has clickable links, images, and
sometimes forms
index.html: home page for the website (must be lowercase)
Folder Structure: use lowercase, no spaces in file names

Web browser: software/program that displays formatted webpages to the client (chrome, safari)
HTML tags: e.g. <html>, <b>, <ol>; most tags come in pairs: opening and closing tag
- 6 built-in header sizes ranging from <H1> (biggest) to <h6> (smallest)

Building a Web page

 1. Content: create an HTML file (.html)
2. Looks: create a CSS file (.css)
3. Behaviour: create a JavaScript file (.js)

Week 7 Videos
Most popular search engine: Google
How a search engine works
- Part 1: Finding all the data on the Web and building a database.
- Web Crawlers/Web Spiders: searches the internet constantly to build an index
(database)
- Words are called keywords
- Part 2: Given keywords from a searcher, returning the “best/most appropriate” pages

Timeline of the Internet/Inventions

- 1969: The internet starts; ARPANET is created, Page Rank algorithm is created
- 1976: Apple is created (Jobs and Wozniak)
- 1981: Microsoft/Windows (Gates and Allen)
- 1990: no index (had to search everything)
- 1990/1991: World Wide Web (Tim Berners Lee)
- 1994: Yahoo began as a collection of webpages
- 1995: Unlimited bandwidth for the first time
- 1996: Larry Page and Sergey Brin start working on the “BackRub” algorithm
- 1998: Google is created (founded by Larry Page and Sergey Brin)

Google’s PageRank Algorithm: Gives each webpage returned from the keyword search a
weight between 0 and 1; the higher the weight given to the page, the more likely it will be the
first page displayed to you
- Size of the circle=highest ranking (the more pages is connected to 1 page, the higher
the ranking they have)
- If the highest ranking page links to another website, then that page will be the second
highest ranking
E.g. 4 pages (A, B, C, D). Each page is given a weight of 0.25

Search Engine Optimization (SEO): Looks at text, links, and popularity

Text: Identify the crucial keywords and put the keywords in the best locations
- Title-tag: most important text by all search engines
- Keyword Prominence: keywords found near the top of the page
- Keyword Proximity: 2+ keywords that are close to each other
- Keyword Density: # of keywords to total words ratio
- Keyword Stuffing: Hide keywords in as many spots as they can
Links
- Link Popularity: Links to the site should be high quality links (pagerank)
Popularity
 - Click-through Popularity: measures how many times a site is clicked on, how often a
user returns to the site, how long a user stays at the site
Hits: number of files downloaded onto a computer to display a webpage

Bounce rate: % of users who leave a site after viewing only 1 page

Week 8 Videos
Animation: A sequence of images that create the illusion of movement when played in
succession
Frame: a snapshot of what’s happening at a particular moment
- Movies on film: 24-30 fps
- TV: 30 fps (9000 frames for five minute cartoon)
- Computer animation: At least 12-15 fps
- Digital video: each frame is stored as 0s and 1s
Sampling process: Each frame is sampled into a discrete samples and each sample becomes
a pixel (more samples means bigger quality + bigger file sizes)
Quantization process: Each pixel gets assigned a colour: 2 colours (black and white, 1 bit
colour), 16 million colour (24 bit colour)
Frame Rate: indicates the playback speed of the animation in frames per second (bigger=more
realistic motion + bigger file size)

2-D Animation
Cel Animation: Hand-drawn animation
Path Based Animation: Give the computer a starting and ending point (start and end frame)
and a path, and it will generate the animation
- Tweening: the computer generating all the frames in between
- Keyframe: the frame that you draw
- Onion skinning: Used to see several frames of an animation simultaneously
Slowing down the motion
- Add more frames or lower the frame rate (20fps to 5fps)
Computer Animation
Motion Graphics (used Path Based Animation)
Stop Motion

q. If you take an animation and remove the frames and double the frames/second playback rate,
will the new version be faster or slower than the original? Answer: slower

3-D Animation
- Modelling, rendering, animating

Tips To Create Realistic Motion

- Timing
- Ease (Slow In and Slow Out)
- Followthrough
 - Anticipation
- Squash and Stretch

Animated GIFS
- File size of animated gifs are affected by # of colours + frames
- No plug-ins required
- No sound

History of Animation
- 1886: Flip book patented
- 1877: Praxinoscope Cylinder containing slips that gave the illusion of movement
- 1898: Stop motion animation introduced
- 1928: Walt Disney uses sound and animation in Steamboat Willie
- 1937: First full length feature animation movie of Snow White
- 1968: Rotoscoping: pencil-sketch animation/live-action sketch
- 1995: Top story was the first full length completely computer-generated animation
- 2011: Cinemagraphs were invented: combine a still photo and video to make only one
part animated
- Usually stored as animated .gif

Week 9 Videos
Video: A sequence of still images (photographs) that create the illusion of movement when
played in succession
- For video, the mode is YUV or YCbCr
- Y: luminance (brightness)
- UV (CbCr): chrominance (colour/hue)
- Which YUV gives the least amount of video compression? = 4:4:4

Original TVs: 480 horizontal scan lines

- A complete scan is when the gun starts at the top left and scans several times
horizontally till it gets to the bottom right
- Each pass is called a field
- The process is called interlaced display

- HD - TVs had either 1080 or 720 horizontal scan lines

- Now 4K or 8K - TVs have ~4000 or 8000 vertical scan lines
- I: Interlaced P: progressive

Retina Displays: have a pixel density high enough so that your eyes can’t detect pixels at a
normal viewing distance (reccoemnded 300 ppi)
- Need to consider: Pixel density, viewing distance, display size

Editing of Video
Before Digital Video: Had to copy from one tape to another tape, had to load up tapes on a
machine to copy loss of quality after each copy made
Now: Can easily move clips around, no loss of quality, slight compression occurs in the
camcorder when the video is captured

History of Camcorders
- Before 1967 nothing was portable (had to use tripods)
- 1971: Sony came up with first portable black and white camcorder
- 1971: First cassettes (didn’t need to load reels)
- 1982: combine video, sound recording and playback (camera recorder)
- 2001: Most camcorders record at 5fps
- 2019: iPhone X records 4K at 60fps

Data/Bit Rate
- Average bit rate = file size divided by length in seconds of video
- Bit rate is measured in bits; Mb = mega bits, MB = mega bytes

Compression Strategires
- Lower the frame size of the video
- Lower the frame rate of the size
- Pick a codec that does higher compression
- Lower the picture quality of the video
- Lower the colour depth

Codec: A piece of code that compresses video or audio as it is created (exported from the
editing software) and then when displaying it to the user decompresses the video or audio
(standards for coder/decoder)
- Most common: H.264

Compression Concepts
Spatial Compression
- Compress each frame individually
- Uses the same techniques as JPG compression
Temporal Compression
- Just saves info on selected frames (called keyframes)
- All other frames just save the differences from the previous keyframe
- Good when the difference between current frame and keyframe is small
- High action movies do not do well with this type of compression
Lossless Compression: looks for large blocks of pixels that are the same to do run length
encoding
Lossy Compression: lowers video quality but gets better file size and better data rate (bit rate)

HTML5: supports 3 video formats, MP4, WebM, Ogg, doesn’t support .flv
Container File Format: A file format that stores both the data (the frames) and how to play the
data (which codec to use)
- Common containers: .avi, .flv, .ogg, .mp4

Subtitles
Hardsubs: embedded into the video file so they can not be turned off or removed
Softsubs: usually stored in a separate file telling what text to appear at what time in the video
(can be turned off/on)
- Must specify the start time, end time, and the text

Videos on the Web

Downloading: make a copy of the file/video on your machine
Streaming: can listen but can’t save it
- Unicast: each user gets their own stream of video, the server has to spend out a lot of
data if several users are watching at one
- Multicast: send the same stream to a bunch of users but then they lose the ability to
pause, rewind
Adaptive Streaming: When uploading a 4K video, youtube makes several versions of it

Week 10 Videos
Sounds: pressure waves of air
- Volume: the higher the wave the louder the sound
- Pitch/frequency: the closer together the waves the higher the pitch; based on the
frequency of the sound waveform; also called key

The Nyquist Limit: must take at least 2 samples for every cycle of the wave

Sampling
- Number of samples per second: Hertz (Hc)
- Number of 1000 samples per second: KiloHertz (KHz)
Sample Rate: number of samples we take per second of audio or number of times per second
the waveform is measured

Typical Sample Rates

- Voice Only (Telephone Quality): 8KHz
- AM Radio Quality: 11.025KHz
- FM Radio Quality: 22 KHz
- CD Quality Music: 441KHz
Low sampling rate: 66 KB
Medium sampling rate: 214 KB
High sampling rate: 235 KB

Samples Size
- CDS use 16-bit rate
Sound Editing
- Rearrange the Waveform
- Modify the Volume (Normalization: scans audio files to find peak/average level and
proportionally increases or reduces the levels to obtain the desired volume level
- Noise Reduction
- Hiss Reduction: noise within a given frequency range
- Noise Reduction/Removal: software examines the audio and finds unusual
differences from waveform and removes them.
- Special Effects
- Downsample and reduce the bit depth

Sound Compression Strategies

Reduce the number of samples (sample rate): go from 44Hz to 22KHz (will affect the quality)
Reduce the Sample Size: Go from 16 bit to 8 bit (will affect the quality)
Reduce the number of channels: Changing from stereo (two channels) to mono (one channel)
will half the size of the file
Pick the appropriate codec: can be either lossy or lossless (almost all are lossy)
MIDI Sound
- Hold information about music/sound such as which instrument is supposed to be
represented, the note being played, how hard the note was pressed (doesn’t handle
noises well)

Smallest to biggest filesize: MIDI, MP3, WAV

Labs
Lab 1
Hosting: a service that provides storage for website files on a computer and allows access to
those files from the Internet
Uploading: copying the files from the local PC to a remote server
Directory: a folder in a computer to store and organize files

Lab 2
Bounding box: the rectangle that fully encapsulates a shape, text, or other element, usually
shown as a light blue border when the element is selected
Canvas: main area on which graphics are added and drawn
Opacity: level of transparency; alpha is another term for this
Thumbnail: small image to give a preview of the actual image or effect

Lab 3
Crop: permanently cutting out a portion of a graphic around the edges
Superimpose: layering multiple images on the same canvas, often using transparency so that
the images merge effectively
Bitmap: a type of graphic that is stored as a grid of pixel cell colours; most image formats are
bitmaps including JPG, PNG, and GIF
Rasterize: converting a picture from a vector graphic to a bitmapped image

Lab 4
WYSIWYG: What You See Is What You Get; describes software that provide visual design
editors to generate the required HTML code
HTML: the primary language used to create websites, it uses tags around text to create
hyperlinks, images, and text effects on the World Wide Web
Hyperlink: clickable text or images that take you to another webpage, website, or location
within a webpage

Lab 5
Merge: to join cells together into one larger cell
Split: to split a single cell into multiple cells
JavaScript: a programming language that adds interactivity to an HTML website
Rollover: the effect in which the link changes (colour, size, etc) when the mouse cursor hovers
over it
Debug: the act of looking for errors (bugs) and fixing them

Lab 6
CSS: Cascading Style Sheets; language used with HTML to customize the appearance of
websites
Style: aesthetic property of a web element, including width, height, background colour, font
colour, font weight, border
Class: a named category of style rules that will be applied to one or more web elements (text,
images, tables) in order to give those elements the same look

Lab 7
Ease-in: the animation effect in which an object accelerates (gets progressively faster) rather
than moving at a linear velocity

Lab 10
Waveform: the visual representation of a sound in a sinusoidal-like plot
Track: a single stream of recorded sound, similar to one instrument in a symphony or one voice
in a podcast
Mono track: layer in an audio project which has a single channel that all speakers/headphones
would play identically
Stereo track: layer in an audio project which has separate channels for the left and rich
speakers/headphones