Week 4 - Web Development & Multimedia Design Flashcards

1
Q

What is a website?

A

• Visual representation of information in the WWW.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What 4 things can web pages contain?

A
  • Text
  • Images
  • Video
  • Animation
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What other languages are needed to make a web page fully interactive alongside HTML?

A
  • CSS
  • Javascript
  • SVG
  • Databases
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is CSS used for?

A

• Styling and designed the layout of the web page

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What’s the difference between classes and ID’s?

A
  • Classes use a ‘.’

* ID’s use a ‘#’

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What does javascript allow a web page to do?

A

• Allow the user to interact with the web page through buttons and text inputs.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What are the two types of drawing in HTML5?

A
  • Canvas

* SVG

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is HTML5 canvas drawing?

A
  • Canvas rendered pixel by pixel.

* Shapes defined by HTML.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

How does HTML5 canvas animation work?

A
  • Graphic is drawn.
  • Changing graphic position requires a whole new scene.
  • Frame-based animation.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is SVG?

A
  • XML based
  • Each shape drawn as an object
  • If object is changed, browsers remembers original shape.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Pros of HTML5 Canvas?

A
  • High 2D performance
  • Constant performance
  • Best for generating raster graphics
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Cons of HTML5 Canvas?

A
  • No DOM nodes, all pixels
  • No API for animation
  • Poor text rendering capabilities
  • Limited accessibility
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Pros of SVG?

A
  • Resolution independence
  • Good animation support
  • Full control over each element
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Cons of SVG?

A
  • Slow rendering when document complexity increases

* Not suited by itself for apps like games

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q
What are the 4 stages of the Iterative design cycle?
Iden
Des
Pro
Eva
A
  • Identify user needs
  • Design a solution
  • Prototype a solution
  • Evaluate with real users
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q
What are the 4 stages of the Interaction cycle?
Eva
Form
Dat
Upd
A
  • Evaluates & understands the display
  • Formulates goals & generates inputs
  • Data mode changes
  • Updates display
17
Q

Who created the Gulf of Understanding?

A

• Donald Norman

18
Q

What are the 2 types of Gulf of Understanding?

A
  • Gulf of Evaluation

* Gulf of Execution

19
Q

Describe the Gulf of Evaluation?

A
  • Users interpret what they see on screen & evaluate it relative to their goals.
  • Understanding the state of the system.
  • Ergonomic failure can occur.
20
Q

What is the design & layout of the Gulf of Evaluation?

A
  • Poor layout of info and non-important info.

* User may miss the important info.

21
Q

Describe the Gulf of Execution?

A
  • User doesn’t know what sequence of input events will accomplish the desired goal.
  • Operations of objects on screen not obvious. e.g. buttons, links.
22
Q
What are the 6 elements to keep consistent and simple on a web page?
Si
Co
Lo
Wo
Se
Fu
A
  • Size
  • Colour
  • Location of elements
  • Word choice
  • Sequencing & order
  • Functionality
23
Q

Due to human memory issues, what is a suitable amount of elements to have on one page?

A
  • 5-9 elements.

* Short-term memory loss approx 30 seconds - 2 minutes.

24
Q

What are some key tips to help humans understand a web page?

A
  • Avoid stacking elements
  • Design for task closure
  • Recognition not recall (use recognizable symbols)
25
Q

When is it suitable to put in a status indicator (bar)?

A
  • When the system is performing a lengthy task.

* Status bar should be synchronized correctly.

26
Q

State the 4 general text design guidelines?

A
  • Max 2 font sizes.
  • Use minimal underlining, bold, italic.
  • Max 3 fonts.
  • Use capitalization where appropriate.
27
Q

State the 4 general colour design guidelines?

A
  • Max 4 colours per page.
  • Max 7 colours whole website.
  • Text contrast is important.
  • Avoid blue text.
28
Q

State the 3 general sound design guidelines?

A
  • Use harsh & soft audio tones for warning & positive feedback.
  • Use sound where appropriate.
  • Provide mute option.
29
Q

State 2 display issues?

A
  • Maintain display inertia.

* Location, shape & size kept constant of elements.