Week 4 - Web Development & Multimedia Design

Question 1

What is a website?

Answer 1

• Visual representation of information in the WWW.

Question 2

What 4 things can web pages contain?

Answer 2

• Text
• Images
• Video
• Animation

Question 3

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

Answer 3

• CSS
• Javascript
• SVG
• Databases

Question 4

What is CSS used for?

Answer 4

• Styling and designed the layout of the web page

Question 5

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

Answer 5

• Classes use a ‘.’

* ID’s use a ‘#’

Question 6

What does javascript allow a web page to do?

Answer 6

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

Question 7

What are the two types of drawing in HTML5?

Answer 7

• Canvas

* SVG

Question 8

What is HTML5 canvas drawing?

Answer 8

• Canvas rendered pixel by pixel.

* Shapes defined by HTML.

Question 9

How does HTML5 canvas animation work?

Answer 9

• Graphic is drawn.
• Changing graphic position requires a whole new scene.
• Frame-based animation.

Question 10

What is SVG?

Answer 10

• XML based
• Each shape drawn as an object
• If object is changed, browsers remembers original shape.

Question 11

Pros of HTML5 Canvas?

Answer 11

• High 2D performance
• Constant performance
• Best for generating raster graphics

Question 12

Cons of HTML5 Canvas?

Answer 12

• No DOM nodes, all pixels
• No API for animation
• Poor text rendering capabilities
• Limited accessibility

Question 13

Pros of SVG?

Answer 13

• Resolution independence
• Good animation support
• Full control over each element

Question 14

Cons of SVG?

Answer 14

• Slow rendering when document complexity increases

* Not suited by itself for apps like games

Question 15

What are the 4 stages of the Iterative design cycle?
Iden
Des
Pro
Eva

Answer 15

• Identify user needs
• Design a solution
• Prototype a solution
• Evaluate with real users

Question 16

What are the 4 stages of the Interaction cycle?
Eva
Form
Dat
Upd

Answer 16

• Evaluates & understands the display
• Formulates goals & generates inputs
• Data mode changes
• Updates display

Question 17

Who created the Gulf of Understanding?

Answer 17

• Donald Norman

Question 18

What are the 2 types of Gulf of Understanding?

Answer 18

• Gulf of Evaluation

* Gulf of Execution

Question 19

Describe the Gulf of Evaluation?

Answer 19

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

Question 20

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

Answer 20

• Poor layout of info and non-important info.

* User may miss the important info.

Question 21

Describe the Gulf of Execution?

Answer 21

• 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.

Question 22

What are the 6 elements to keep consistent and simple on a web page?
Si
Co
Lo
Wo
Se
Fu

Answer 22

• Size
• Colour
• Location of elements
• Word choice
• Sequencing & order
• Functionality

Question 23

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

Answer 23

• 5-9 elements.

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

Question 24

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

Answer 24

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

Question 25

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

Answer 25

* When the system is performing a lengthy task. | * Status bar should be synchronized correctly.

Question 26

State the 4 general text design guidelines?

Answer 26

* Max 2 font sizes. * Use minimal underlining, bold, italic. * Max 3 fonts. * Use capitalization where appropriate.

Question 27

State the 4 general colour design guidelines?

Answer 27

* Max 4 colours per page. * Max 7 colours whole website. * Text contrast is important. * Avoid blue text.

Question 28

State the 3 general sound design guidelines?

Answer 28

* Use harsh & soft audio tones for warning & positive feedback. * Use sound where appropriate. * Provide mute option.

Question 29

State 2 display issues?

Answer 29

* Maintain display inertia. | * Location, shape & size kept constant of elements.