Cs1033-final - notes PDF

Preview

Summary

notes...

Description

find more resources at oneclass.com

Western University COMPSCI 1033A Intro To Communication and Multimedia! Fall 2019! Final Exam! Professor Laura Reid!

find more resources at oneclass com

find more resources at oneclass.com

Topics included: ! 1. Multimedia! 2. Graphics! 3. Computers! 4. Files and Folders! 5. Images! 6. Communication! 7. Websites! 8. Online Visibility! 9. Animation! 10. Video! 11. Audio!

find more resources at oneclass com

find more resources at oneclass.com

Lecture 1: INTRO TO MULTIMEDIA! Multimedia: the amalgamation of multiple media forms for communications! Medium: a channel through which info is transmitted to an audience ! Multimedia application: an application that can be used to present text, sound, video, images, animation ! Multimedia is used to a) inform b) educate c) sell and run a business d) entertain! 7-15 seconds to make a first impression! Asia has the most Internet users, Australia the least! 1440s: Johannes Gutenberg invented the printing press! 1969: ARPANET (eventually the internet) launched by U.S. dept of defence ! 1983: Internet is created when TCP/IP is adopted by all ARPANET users! 1989-1990: invention of the WWW (http) and html and URL by Tim Berners Lee! Goal of communication: to convey a message!

• Should consider characteristics of target audience and how well the theme and presentation itself will resonate with this audience! Practice Questions 1. What is Multimedia?!

• Answer: multimedia is the amalgamation of multiple media forms for communications ! 2.

When was ARPANET launched?!

• 1969! 3.

What is the difference between the World Wide Web and the Internet? !

• *World Wide Web vs. Internet: Internet is hardware, WWW is software that runs on top of Internet!

find more resources at oneclass com

find more resources at oneclass.com

Lecture 2: GRAPHICS! Graphics: the oldest form of media, any combination or artwork, diagrams, imagery, text, or inscriptions, stored as pixels! Pixels: tiny, coloured cells, each containing exactly one colour! Pixel-based graphics are the only form of graphics available for photographs and the most common form for other graphics; also called bitmap graphics or raster graphics! Vector graphics are created using mathematical equations that create the lines, curves, shapes, and colours of the graphics. !

• Smaller file size, do not lose quality when enlarged! • Used for simple logos and diagrams and sometimes text! Colour Theory: the primary colours can be combined to make secondary colours, which can be combined to make tertiary colours.!

• Colour wheel visually represents relationships between colours, total of 12 colours!

• Goal is harmony between colours! • Each set of 3 consecutive colours shares at least one base colour! • Analogous colours: colours that share an undertone and thus work well together, should be used in logos and graphics!

• Monochromatic colours: use a single-colour hue as the base (blue, dark blue, light blue)! Fonts: characters that have a common design are grouped into families: Font Types, Typeface, just font! Serif: fonts with decoration at the end of each character’s strokes, Times New Roman and Georgia, good for large portions or text! Sans-serif: better choice for short headings - Arial, Verdana, Comic! Web-safe: fonts all users can see (to use a non-web-safe font insert it into your webpage as an image or use google fonts)!

find more resources at oneclass com

find more resources at oneclass.com

Kerning: adjusting the distance between pairs of letters, measured in Ems ! Tracking: adjusting the distance between all the letters! Leading: amount of vertical space between lines of text — wide columns need bigger leading! Monospaced fonts: each character occupies the same amount of space! Proportional fonts: each character only occupies as much space as it needs! Case matters - mixed case usually better, save upper case for headings! Margin: space left around entire border edge, should be left open to look clean! Robin Williams’ CRAP principles

• • • •

Contrast: different elements should look distinguishable from one another! Repetition: styles and formats of similar elements should be consistent! Alignment: elements should be placed to create clean edges! Proximity: related information should be placed close together distinguishably from other content !

Monitor: a rectangular area (screen) broke down into pixels that can represent anything visually! Resolution: number of pixels across by pixels down (Pixels Per Inches, ppi)! Smaller resolution (less ppi) —> image looks bigger on monitor! Bigger resolution (more ppi) —> image looks smaller on monitor! Smaller resolution displayed on a monitor will have bigger pixels, bigger resolution displayed on a monitor will have smaller pixels!

• 800 pixels by 600 pixels on a 17 inch monitor would have bigger pixels than 1200 by 800 pixels displayed on the same size monitor! In printing, pixels = dots!

• Less DPI = bigger dots! • Less PPI = bigger pixels! Problem with big dots or pixels: image may turn out grainy!

find more resources at oneclass com

find more resources at oneclass.com

Font Size Measurements Absolute Measurements: points, picas - MS word, inches, centimetres! Relative Measurements: pixels (relative to screen’s resolution), percentage %, ems (relative to default browser font)!

• 1 em = the width of the letter M in the default font type and size of the browser! Points: fixed units of measurement that are unaffected by screen resolution!

• One point = 1/72 of an inch! • 72-point font will print out one inch, 36-point font half an inch, 144-point font two inches ! For Accessibility use Ems or %, For Precision/Control use pixels! Ascender: the upper point of tall letters! Descender: the lower point of sagging letters! Point Unit Conversions: to calculate how many lines of text can fit in an are of known size.!

• Area’s Height in Inches ÷ Font’s Size as a Fraction of an Inch ! • AKA: ((1/72) * font size in points) * area’s height in inches = number of lines of text that can fit in the area! Font Colour

• Encoded in webpage’s HTML in Hexadecimal representation! • Hexadecimal digits are 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F! • 0 is the least amount of any colour, F is the highest amount of any given colour!

• Hex code: #RRGGBB! • Red = #FF0000! • Yellow = #FFFF00! • Black = #000000! • Purple = #660099!

find more resources at oneclass com

find more resources at oneclass.com

• Dark Gray = #222222! • Light Gray = #CCCCCC! Practice Questions 1. Calculate the text size in inches produced by a font size of 18 points.!

• 18 ÷ 72 = 0.25.! Answer: the text will print at 0.25 inches.! 2. Suppose you are printing a letter on a standard 81/2 by 11 inch sheet of paper with 1-inch margins all around it. The text is typed in 18-point font. How many lines of printed text can fit on the sheet?!

• Area’s height in inches = 11- 2 = 9! • Text size in inches = 18 ÷ 72 = 0.25! • 9 ÷ 0.25 = 36! Answer: 36 lines of text can fit on the sheet. ! 3. Which image will appear bigger on a monitor: an image with a resolution of 2000PPI or an image with a resolution of 800PPI?! Answer: 800 PPI because the pixels will be bigger. ! 4. How many pixels can the human eye distinguish?! Answer: No less than 300 PPI.! Lecture 3: COMPUTERS! Computer: system of connected hardware which typically contains a central processing unit (CPU), hard disk memory, and has input and output device capabilities!

• Before computers, media lacked interactivity, updatability, and reachability! • Features RAM (random access memory) and instruction processing! • Each circuit in ALU (Arithmetic Logic Unity) or RAM can be represented with a 1, meaning high voltage, or 0, meaning low voltage!

• Originated from John Von Neuman, 1940s!

find more resources at oneclass com

find more resources at oneclass.com

Operating systems: programs that handle the low-level assembly language programming without the user having to do anything with the code. Do all the work needed at the hardware level.! There are infinite number systems! Octal System: radix of 8, digits 0-7! Hexadecimal System: radix of 16, colour codes and IP addresses! Binary: radix of 2, only possible digits 0 or 1! Computers only speak binary! Smallest radix possible, so must add bits (binary digits) quicker than other number systems when counting! Only 1 and 0 are single bit (digit) numbers! 8 bytes can code 256 bits (including letters/characters)! Decimal to Binary Conversion

• • • • • • •

Example: convert 36 to binary! Step 1: 36/2=18 Remainder: 0! Step 2: 18/2=9 Remainder: 0! Step 3: 9/2 = 4 Remainder: 1! Step 4: 4/2 = 2 Remainder: 0! Step 5: 2/2 = 1 Remainder: 0! Step 6: 1/2 = 0 Remainder: 1!

The decimal number 36 is represented as 100100 in Binary. ! Binary to Decimal Conversion

• Value of each digit’s position is its 2 to the power of its position number (position numbers start at 0, the rightmost position/MSB, to the leftmost position) !

• LSB 101010 MSB! • 2^5, 2^4, 2^3, 2^2, 2^1, 2^0! • (2^5 x 1) + (2^4 x 0) + (2^3 x 1) + (2^2 x 0) + (2^1 x 1) + (2^0 x 0)!

find more resources at oneclass com

find more resources at oneclass.com

• 32 + 8 + 2! • = 42! • Start with the rightmost digit and multiply each digit by its value (2^position number)!

• Add the results for the decimal equivalent of the binary number Digital: computers are referred to as digital because of their need to condense data into finite chunks plotted as discrete points with finite values! Analog: continuous data sequences or signals that have an infinite number of values! DIGITAL sine wave plots is a finite set of points that are connected, ANALOG sine wave plot is a continuous line with no discrete points ! Often natural entities (like temperature) are analog and must be converted to digital form to be recognizable by computers. This process:! 1. SAMPLING: breaking continuous data into finite samples taken at equal time or position intervals. Number of samples will impact how comprehensive data is and file size (more samples = bigger file size but more detailed image)! 2. QUANTIZING: Assigning each sample a value which measures a property (colour, weight, etc). Range of available values is changed from infinite to finite. Number of value options depends on number of bits being dedicated to storing these values. ! Pixel Measurements

• Graphics measured by their length and width in pixels. Total number of pixels is length x width in pixels. (Do no equate to any real size when printed - only exist in Digital realm)!

• • • •

Pixel is smallest image component, shows smallest detail ! Pixel sizes are inversely proportional to their number ! Each pixel has a numerical value in binary that represents its colour! Printed images must have a DPI of at least 300 pixels!

find more resources at oneclass com

find more resources at oneclass.com

Calculating the Number of Pixels in a Printed Image (ie if you were to scan it)!

• Scan 8x10 picture, set resolution to 300DPI! • (8x300) x (10x300) = 72000000 pixels! Resolution: the size ratio of an image from pixels to inches when printed out, measured in PPI or DPI! Size in Pixels = inches x resolution! Size in Inches = pixels / resolution! Digital cameras: taking a picture - sampling is how many points or pixels are recorded from the actual real-world scene. Cameras/scanners can determine how many samples to take. The more samples, the higher resolution.! Samples on a monitor: PPI! Samples on scanners/printers: DPI! Megapixel: how may millions of pixels your an capture in a camera image (how many “samples” it will break image into)! Picture Quantizing: dictates the number of colour options for each pixel !$

• Eight bits = 1 byte = palette of 256 colours! • Digital photos usually stored in “true colour”: 3 bytes, 24 bits, 16.7 million colours!

• 1 bit colour = black and white (only 0 or 1 can represent each sample)!

• 4 bits = 16 colours! • 24 bits = 16.7 million colours! Images on paper must be printed at a size that has a minimum of 300 PPI How Images are Displayed on Screens

• Monitor/screen is made up of pixels, each pixel gets a colour, we map image pixels onto screen pixels in one-to-one mapping and see our image!

• The screen resolution is the number of pixels across by the number of pixels down

find more resources at oneclass com

find more resources at oneclass.com

• Amount of space image takes up on screen depends on:! • Size of image! • Screen resolution! • NOT the DPI ! Average PPI for monitors is 72 PPI - with an image at 72 PPI, what we see on a typical screen with zoom level 100% will be the same size as if we would print it! Resampling: making image smaller —> removes pixelated look, less pixels, crisper, smaller file size. Making image bigger —> more pixels, image is pixelated and jagged, bigger file size! Colour Code Representations Trichromacy: the 3 base colours detected by the eye are red, green, and blue, and all other colours are formed by combining these 3! Colour models represent colours from different perspectives! RGB model uses the trichromatic theory; an additive model because base colours are added to produce new hues. 0 of each = black, all of each = white!

• • • • • •

Colours are encoded as a triplet (ie 100,50,63)! Values for each component range from 0-255 Each component can have 256 colours. 265^3=16.7mil colours in total! White = 255,255,255! Black = 0,0,0! Gray = 127,127,127!

Subtractive colour system base colours are removed to produce new hues. 0 of each = white, all of each = black. (CMYK, HSL)! Practice Questions 1. What is 40 in Binary?! Answer: ! Step 1: 40/2=20, Remainder:0!

find more resources at oneclass com

find more resources at oneclass.com

Step 2: 20/2=10, Remainder: 0! Step 2: 10/2=5, Remainder: 0! Step 4: 5/2=2 Remainder: 1! Step 5: 2/2=1 Remainder: 0! Step 6: 1/2 = 0 Remainder: 1! =101000! 2. What is 01101 in Decimal?! (1 x 2^0) + (0 x 2^1) + (1 x 2^2) + (1x 2^3) + (0 x 2^4)! = 1 + 4 + 8! = 13! 3. What is the printed size of a graphic that is 700 pixels by 400 pixels with a resolution of 400 PPI?! 700/100 = 7 inches! 400/100= 4 inches! 4. What is the maximum size in pixels for a poster that must have a resolution of 300PPI so that it will fit on an 8.5x11 sheet of paper with a 1/2 inch margin around the entire paper!

• 7.5x300= 2250 pixels! • 10x300 = 300 pixels! Poster can have a maximum pixel size of 2250 by 3000! 5. If you have an image that is 3000 pixels by 1500 pixels, for the print quality to be good enough for the human eye, what size should you print it at?!

• 3000/300 = 10 inches! • 1500/500= 5 inches! No larger than 10 inches by 5 inches! 6. What is the size in pixels of an image that prints at 8x10 inches and has a resolution of 83 PPI?!

• 8 x 83 = 664! • 10 x 83 = 830!

find more resources at oneclass com

find more resources at oneclass.com

The image’s size on a computer or size in pixels is 664 by 830 pixels. ! Lecture 4: FILES AND FOLDERS! Colour Models! The human eye can only detect less than 10 million colours. ! 2-bits can hold 4 colours: 00 White, 01 Light Gray, 10 Dark Gray, 11 Black! Subtractive Model (CMYK): Used for printing, ink applied to paper and removes white, primary colours are Cyan, Magenta, Yellow! Additive Model (RGB): Use on monitors, “adding” light to a blue background, primary colours are Red, Green, Blue! True Colour: 24 bits or 3 bytes — 2^24 — about 16 million colours. 1 byte for red, 1 byte for blue, 1 byte for green.!

• 2^24 = 2^8 x 2^8 x 2^8 = 256 R, 256 G, 256 B! • Encoding: RGB each value 0-255! • Equal amounts of every colour = gray ! • Hex: #RRGGBB ! • Hex FF = RGB 255! • Hex and RGB represent same number of colour! • Total number of shades you can represent in hex is 16 million ! • Indexed colour: at most, 8 bits or 256 shades - used for images that do not need True Colour, we only index the colours we need! Process: running program on a computer. Data stored along with a process may be lost when that process is closed ! File: dataset stored like an object in the hard drive; solves issues of data loss when processes are closed ! Folder/directory: container of files for organizational purposes, structured hierarchically so folders can be nested within one another!

find more resources at oneclass com

find more resources at oneclass.com

Bit: an individual binary digit (either 0 or 1). One bit can contain only the value of a two option query - yes or no, true or false, on or off. ! 2^n combinations/values are made when you have n bits, since each bit contains 2 possible combinations: 0 or 1. With 2 bits, you have 4 digits - two 1s and two 0s, thus 4 combinations: 00, 01, 10, 11. ! Byte: chunk of 8 bits; common for computers because 256 values is the minimum number of values required for most data types ! Words: chunks of 16 bits (2 bytes), storing 65,535 values! Signed bytes: allow for negative values. 8 bytes = integers ranging from -128 to -127 can be stored (256 values)! Unsigned bytes: allow for only positive values. 8 bytes range from 0-255 (256 values)! Kilobyte: 1024 bytes! Megabyte: 1024 kilobytes ! Gigabytes: 1024 megabytes ! Terabyte: 1024 gigabytes:! File Formats: specific template that indicates how the data is stored in the bytes of memory ! Metadata: info about the file but not the actual content. Title, size, # of pages, author, date of creation, date of creation ! File Paths: !

• File name and extension! • Extension indicates a file format or some meta information about how the file should be opened (dog.jpg filename - dog, extension - jpg)! Absolute vs Relative Paths

• Absolute path: states file’s position in the sequence of folders and subfolders in which it’s contained !

find more resources at oneclass com

find more resources at oneclass.com

• Root directory: the drive that contains all of the files and folders at the start of the absolute path

• Relative Path: file location is described relative to an origin folder on the computer! Permissions

• • • • • • • • •

Owner: creator, full access to file! Group: user who require full or partial access! Others: no access! Read: r; Write: w; Execute: x! Permissions stored as an octal number set (radix of 8, digits 0-7)! 0 —> 7: x + w + r! Access is tracked in 3-digit number (or 4-digit if additional info is required)! Each digit represents a different group category (owner, group, user)! Octal code of 700: owner has full access, group and users have no access!

File Size

• Dependent on sampling and quantizing parameters from the digitization process!

• Raw image is written out to a file by storing the precise colour of every single pixel!

• File size in bytes equation: width in pixels * height in pixels * colour depth in bytes = file size in bytes

• Large file sizes mean clearer images but problems loading, consume data and storage!

• To reduce image file size, resize the image! Bitmapped Images: pixels in a grid !

• icons, usually 32x32 pixels, also called raster graphics! • Resolution dependent — lower resolution means bitmapped image will appear larger, higher resolution means bitmapped image will appear smaller!

find more resources at oneclass com

find more resources at oneclass.com

• Bitmapped imag...