Week 1 Flashcards
1
Q
When was the term multimedia coined?
A
Around 1962
2
Q
What is the Wikipedia definition of multimedia?
A
“Multimedia is media and content
that uses a combination of different content forms.”
3
Q
What is the Merriam Webster definition of multimedia?
A
Their definition is actually a multimedia definition:
Adjective: using, involving, or encompassing several media
Noun: a technique (such as the combining of sound, video, and text) for expressing ideas (as in communication, entertainment, or art) in which several media are employed
also : something (such as software) using or facilitating such a technique
4
Q
What is the Cambridge Dictionary definition of multimedia?
A
DEFINITION PREFERRED BY PROFS:
“using a combination of moving and still pictures, sound, music and words, especially in computers or entertainment”
5
Q
How do we express ourselves?
A
Through different media (video, sound, audio, text, images, etc.) to express ourselves to share ideas
6
Q
What is the main goal of the Compsci 1033 course?
A
Highschool: helped figure out what we wanted to say
Uni course: help you say it using different multimedia tools
7
Q
How long do you have to make an impression?
A
In Janet Elsea’s book “The Four-Minute Sell” she says you have just 7 to 15 seconds to make good first impression
8
Q
How much time do you have before someone decides they want to go beyond that time (continue relationship)?
A
4 minutes total for someone to decide if they want to go beyond that first 4 minutes
9
Q
Why is the time it takes to make an impression on someone important for media?
A
For a person you have minutes, for a website you have seconds to make good impression
10
Q
How long does it take you to decide if you want to stay or if you want to leave this site?
A
Decide within seconds whether or not they’re planning to stay
11
Q
What makes you want to leave a website rather than investing time in it?
A
- Flashing things
- Didn’t have info that you wanted
- Poorly organized
- Sound starts right away
- Taking too long to download
12
Q
What is the goal of the course in terms of capturing and keeping people’s attention with websites?
A
Ideas and tips to help people want to stay at website and/or help them to not redirect themselves from website
13
Q
What are the reasons why people may leave your website?
A
- Inaccessibility, ex: small-sized font that they can’t read
- Frustrating navigation, can’t figure out how to get to page they’re trying to find
- Clicking on link (ad) and it takes them away from site
- Too many ads
- Satisfied, completed, got what they needed
- Now what they’re expecting
14
Q
How can we communicate (our ideas)?
A
Via any of your 5 senses:
- Sight
- Smell
- Sound
- Touch
- Taste
Ex. chef could communicate through taste how good they are at their job
15
Q
Which of the 5 senses can be utilized for communication on the web?
A
Typically only sight and sound
But things are changing with tools being made to covey more of the senses, Ex: 4D movie chairs, aroma
16
Q
What is multimedia application?
A
An application that can be used to present text, sound, video, images and animation (technical definition)
17
Q
What are different uses of multimedia?
A
To INFORM: let ppl know what’s happening, ex: updates on COVID in 2020, news from radio
To EDUCATE: ex, videos on the Internet on how to parallel park
To SELL and RUN BUSINESS: ex. various online shops
To ENTERTAIN: ex. movies
18
Q
What are the ways we can communicate or “spread a message” to other people? Can you name some ways?
A
19
Q
What were other ways did people used to communicate or “spread a message” before the web (1990s)? How were messages shared, how did propaganda spread?
A
- Other people
- Telephone
- Radio
- TV
- Newspaper/magazines (used to spread most messages)
- World Wide Web (what we use NOW)
20
Q
What are some of the benefits of the WWW over other methods?
A
Ex: tweeting
21
Q
What are some advantages of the WWW?
A
- Fast
- Cheap (sometimes free!)
- Usually current
- Accessible by millions
22
Q
Which area of the world has the most people?
A
Asia
23
Q
Which area of the world has the most Internet users?
A
Asia, North America
24
Q
Which area of the world has the least amount of internet users?
A
Oceania/Australia
25
IMPORTANT: What is the difference between the World Wide Web and the Internet?
Internet is hardware: the wires, the routers, the satellites, the computers that connect everything together
WWW: software, other things such as email, ftp run on the internet, not just the web
26
IMPORTANT: When was the Arpanet/Internet started?
1969
27
IMPORTANT: When did the World Wide Web (http) and html and URL finish developing?
World Wide Web made its debut in 1991
28
Who established the ARPANET?
The U.S. Department of Defence, it eventually became the internet
29
Who developed the World Wide Web (http) and html and URL?
Tim Berners Lee
30
What can we do to make our websites (or any marketing material) look a bit more proffessional?
Remember design is all about CRAP!
31
What are the elements of CRAP?
- Contrast
- Repetition
- Alignment
- Proximity
32
How is CONTRAST (a crap element) used in design?
Avoid making 2 elements just similar, either make them the same (same font, colour, etc…) or make them VERY different.
33
How is REPETITION (a crap element) used in design?
Repeat some aspect of the design throughout the entire design i.e. Bold
font, thick rule, bullet, colours, font types
34
How is ALIGNMENT (a crap element) used in design?
Items are aligned - creates stronger
cohesive unit
35
How is PROXIMITY (a crap element) used in design?
Group related items together
36
What does Robin Willams (author of The Non-Designer's Design Book) say about contrast?
- Don't just do something a little, if you're gonna make something stand out, make it REALLY stand out
- General rule: don't be wimpy, go bold or go home
37
What does Robin Willams (author of The Non-Designer's Design Book) say about repetition?
- Repeat organizational structure
(bullet points, indents, headings, spacing, amount of text)
- Repeat design (fonts, color)
38
How can the CONTRAST principle be applied to design?
- Bolding headers
- Capture attention by making key information bigger
- Make contrast higher by using very bold font against vs skinny font
39
What does Robin Willams (author of The Non-Designer's Design Book) say about alignment?
In general, left and right align look a lot better and make it easier to read information
40
What does Robin Willams (author of The Non-Designer's Design Book) say about proximity?
Physically grouping things together implies a relationship
Group info that goes together
41
How does a monitor display things visually?
Just a rectangular area (the screen) broken down into very small pieces or dots where each piece/dot can take on a particular colour
42
What is analog?
- Something smooth
- You don't have to break into a million peices
Ex: drawing a line with a pen on paper, don't have to take hand up
43
Does a monitor display with analog?
No, something may appear analog, such as a straight line, but its really broken up into tiny dots that make up an image
44
What are things offline that are similar to how a monitor displays images?
- Graph paper
- Cross stitching (dots of thread)
45
IMPORTANT: What are the dots/pieces on a monitor/screen called?
Pixels
46
What can pixels be used to represent?
Use pixels (dots, thread) to represent ANYTHING (images, text, drawing) that we want to display visually on the screen (paper, fabric)
47
How do we represent size on a monitor?
In inches
48
How do we represent resolution on a monitor?
In pixels
Ex: 800 pixels (width) by 600 pixels (height)
1024 pixels by 768 pixels
49
What is the terminology for the number of pixels across by the number of pixels down?
Resolution
50
Which resolution will have the bigger pixel?
800 pixels by 600 pixels or 1024 pixels by 768 pixels
In order to fit the pixels, on a same size screen, 800 x 600 would have bigger pixels because you need less of them, aka they wouldn't have to be as small to fit
51
A 9 pixel image displayed on a screen would look bigger in which resolution?
800 pixels x 600 pixels or 1024 pixels x 768 pixels
On monitor with 800 by 600 (lower resolution) because the pixels would be larger
52
Why can a monitor with higher resolution fit more stuff on?
Because the pixels are smaller, so text/images take up less room
53
How are pixels displayed on monitors?
Using light to create to create images or text
54
When printing text or images, we use ink to create the pixel but in printing, the pixels are called _____?
Dots (of ink)
55
How are dots (in printing), just like pixels?
They can take on different colours
They can be big, creating big images, or small, creating smaller images.
56
What does dpi stand for?
Dots per inch or ppi (pixels per inch)
57
Which one will have bigger dots → 72dpi or 300dpi?
72, because dots have to be bigger in order to take up all the space in that square inch
58
What is problem with bigger dots/pixels?
- Get pixelated images
59
How is resolution affected if you have more dots/pixels?
Resolution is going to be better, crisper
Image is going to be more realistic
(more pixels to fit more colours, dots of the image)
60
When is lower resolution a bigger issue, in screens or in printing?
In printing
61
What are the 2 purposes text can be used to serve (on a website)?
1. It conveys information
2. It can be used as a graphical element of the page (i.e. it doesn’t have to be ugly or boring! ☺)
62
What do you have to consider when adding in cool fonts on a website?
You may have a cool font on your machine, but the person viewing your website might not have that font
63
What are Websafe Fonts?
Fonts that every user has on their machine
If you use these fonts, you won't have issues of it not looking the same
64
What can you do if you really want to use an unusual font on your website?
Choice 1: take screenshot of text displayed in the font and paste image onto webpage (issue is users can't copy and paste that text bc its an image)
Choice 2: Google Fonts
65
How can font set a mood?
- Cursive: fancy
- Bold: more casual
- Rough edge: avant garde
66
How can you make your style of text choices based on audience?
- Children (what age group?): little kids can't read cursive font
- Teens
- Young Adults
- Older People: font size
67
How can you make your style of text choices based on application?
- Education
- Entertainment: can get away with funky cool font
- Business: in more professional settings, you don't want to use funky font
68
What can you make your style of text choices based on?
Audience and type of application
69
What are the 2 ways you completely change the look of your font?
By varying the:
- Text attributes (italics, colour)
- Text placement (alignment)
70
How many fonts should you use on a poster?
Try not to use more than 2 or 3 or else it gets confusing
71
What is font Type (or Typeface or sometimes just Font)
Characters that have a common design are grouped into families called Font Types
72
What are examples of fonts?
- Arial
- Arial black
- Chiller
- Times New Roman
- Comic Sans MS
73
What are the 2 categories most typefaces or fonts are divided into?
1. Serif
2. Sans serif
74
What is serif font and when should you use it?
Has a fine line added to finish a letter stroke
- Always use serif fonts for large paragraphs of text. The human eye finds them easier to read!
- Examples: Times New Roman, Courier
75
What is sans serif font and when should you use it?
No line added
- Best for headlines and headings
- Examples: Comic, Arial
76
What is style and why is it important for fonts?
Variations in the appearance that allows the writer to emphasis parts of the text.
◦ Some examples
Bold Times New Roman
Italics Times New Roman
Underline Times New Roman
Bold Comic
Italics Comic
Underline Comic
77
Why does case matter?
Because humans don't read letter by letter, they read holistically
They can look at shape of word and tell what it is
Shapes give hints on what the word is
78
Why should you save uppercase for headlines?
In general it is much easier to read mixed case than all uppercase
For header: upper case and sans serif
For paragraphs: mixed case and serif
79
What is the issue when text is not kerned?
The distance between the letters are too close together and words can look different than what they were supposed to be
80
What is kerning?
Adjusting the distance between pairs of letters (horizontal)
81
What is an example of kerning?
In standard spacing A and W look further away than H and N because of shapes of letters
- Can use kerning to fix this
82
What is tracking and how is it measured?
- Adjusting the distance between ALL the letters (horizontal)
- Measured in ems
(mostly used for decorative purposes)
83
What is the difference between kerning and tracking?
Kerning: between 2 letters
Tracking: all letters
84
What is leading?
Amount of vertical space between lines of text
(between bottom of lowest letter and top of highest letter)
85
Why is leading important?
As the length of a line increases, it is harder for the reader to jump to the next line, thus wide columns require greater leading
86
How are tracking and leading related?
Loose track=more leading
Tight track=less leading
87
What is mono spaced font?
When every letter no matter what shape it is, is always the same width
88
When is mono spaced font used?
Programmers tend to use it in their code because it makes for nice indentation and easier for everything to line up
89
When is proportional font used?
Most times publishing uses proportional
90
What is proportional font?
When letters take up space proportional to their shape
91
What is an example of mono spaced vs proportional font?
In a mono spaced font such as courier, WM will be the same width as I
In proportional font like Times New Roman, WM take up more space than I
92
What are the different ways font size can be measured?
- Points, picas (as in MS Word, absolute length, publishing)
- Pixels (relative to the screens resolution)
- Percentage, ems (relative to the default browser font)
- Inches, centimetres (absolute length, printed)
93
What is points?
- Absolute length
- Always the same no matter what OS used
- Print unit
- Text that is 72 points is 1 inches tall WHEN PRINTED
94
Why is the word "now" not 1 inch when in 72 point font?
From bottom of lowest letter to top of highest letter
95
Commonly what point size font do we use?
12 points which is 1/6 of an inch
96
What is the issue with using point measurement for font?
We don't know what size monitor someone has so, or what resolution they use so we don't use it on webpages
97
Pixels, ems, % and when are they used?
- Relative length
- When text is displayed in pixels, ems, %, it is relative to the default font size for the browser and to the screen resolution.
98
What is an em?
1 em is equal to the width of an M in the default font type and size of the browser
◦ E.g. Firefox →Times New Roman, Fontsize 16 pixels
99
Why is relative type fonts used for webpages?
Different users may use different font sizes on their browser which will affect size of font on webpage when using relative
Resolution --> pixels
Browser default--> ems/%
100
How does resolution affect pixel size font?
If your resolution is big and you have lots of pixels, then font looks smaller, if resolution is low then font looks bigger
101
In general what font sizing should you not use?
Points because it's for printing (can be used for MS Word or Adobe publisher) don't use for webpages
102
If you're worried about accessibility, what type of font sizing should you use?
Use ems or % since they are
relative to the browsers default font and the user can make the text more readable
103
If you're worried about control, what type of font sizing should you use?
If you want the layout to be precise,
use pixels
104
How is colour represented in html code?
Hexadecimal representation
105
What is hexadecimal representation?
Hex Digits are: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
- With TWO space holders 99 in decimal is big, 19 is small
- With TWO space holders FF in hex is big, 1F is small
106
How is hexadecimal used to represent colour?
- Colours must start with #
- Then you need 2 hex digits for Red, 2 hex digits for Green and 2 hex digits for Blue
#FF0000 is really bright red
107
How could you represent yellow in hexadecimal?
#FFFF00
108
What colour is #222222?
Dark grey (closer to 0 than F)
109
How do you get a shade of grey?
By putting equal amounts of each colour
110
What colour is #000000?
Absence of all colour=black
111
What colour is #FFFFFF?
All possible colour=white
112
What colour is #CCCCCC
Light grey (closer to F than to 0)
113
Why should you ask yourself if text is the best choice?
Use text when it is the best way to convey information
Maybe an image would be better
114
How can you make sure your text is readable?
Use a dark background with light text or a light background with dark text
◦ Don’t make the font too small
◦ Make sure the font is readable (be careful with weird fonts)
◦ Don’t use too many fonts (2 or 3 different styles is enough)
◦ Don’t crowd your text, have some white space
◦ Paragraphs are easier to read in serif, san serif for headings
115
Why should you use text sparingly and what are ways to avoid big paragraphs?
Remember it is sometimes hard to read on a computer screen
◦ Use bullets
◦ Break text up into sections
◦ Don’t be too wordy
116
How can you be consistent with text design?
Pick a colour, size, and style of font you like and stick with it on all the pages
117
Is it important to spell check?
Yes, there is NO excuse for spelling mistakes!
118
How can you avoid offending on websites with text?
Don’t use swear words or disrespectful language
119
How can you set a mood on website (with text)?
- Try to pick a font that goes with the tone of your site (for example comic font is great for kids)
- Make sure it coordinates/complements your images/graphics
120
Why should you NEVER EVER EVER use underlining on a webpage?
Because underlined represents a link
