Week 4 - Web Development & Multimedia Design Flashcards
What is a website?
• Visual representation of information in the WWW.
What 4 things can web pages contain?
- Text
- Images
- Video
- Animation
What other languages are needed to make a web page fully interactive alongside HTML?
- CSS
- Javascript
- SVG
- Databases
What is CSS used for?
• Styling and designed the layout of the web page
What’s the difference between classes and ID’s?
- Classes use a ‘.’
* ID’s use a ‘#’
What does javascript allow a web page to do?
• Allow the user to interact with the web page through buttons and text inputs.
What are the two types of drawing in HTML5?
- Canvas
* SVG
What is HTML5 canvas drawing?
- Canvas rendered pixel by pixel.
* Shapes defined by HTML.
How does HTML5 canvas animation work?
- Graphic is drawn.
- Changing graphic position requires a whole new scene.
- Frame-based animation.
What is SVG?
- XML based
- Each shape drawn as an object
- If object is changed, browsers remembers original shape.
Pros of HTML5 Canvas?
- High 2D performance
- Constant performance
- Best for generating raster graphics
Cons of HTML5 Canvas?
- No DOM nodes, all pixels
- No API for animation
- Poor text rendering capabilities
- Limited accessibility
Pros of SVG?
- Resolution independence
- Good animation support
- Full control over each element
Cons of SVG?
- Slow rendering when document complexity increases
* Not suited by itself for apps like games
What are the 4 stages of the Iterative design cycle? Iden Des Pro Eva
- Identify user needs
- Design a solution
- Prototype a solution
- Evaluate with real users
What are the 4 stages of the Interaction cycle? Eva Form Dat Upd
- Evaluates & understands the display
- Formulates goals & generates inputs
- Data mode changes
- Updates display
Who created the Gulf of Understanding?
• Donald Norman
What are the 2 types of Gulf of Understanding?
- Gulf of Evaluation
* Gulf of Execution
Describe the Gulf of Evaluation?
- Users interpret what they see on screen & evaluate it relative to their goals.
- Understanding the state of the system.
- Ergonomic failure can occur.
What is the design & layout of the Gulf of Evaluation?
- Poor layout of info and non-important info.
* User may miss the important info.
Describe the Gulf of Execution?
- 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.
What are the 6 elements to keep consistent and simple on a web page? Si Co Lo Wo Se Fu
- Size
- Colour
- Location of elements
- Word choice
- Sequencing & order
- Functionality
Due to human memory issues, what is a suitable amount of elements to have on one page?
- 5-9 elements.
* Short-term memory loss approx 30 seconds - 2 minutes.
What are some key tips to help humans understand a web page?
- Avoid stacking elements
- Design for task closure
- Recognition not recall (use recognizable symbols)
When is it suitable to put in a status indicator (bar)?
- When the system is performing a lengthy task.
* Status bar should be synchronized correctly.
State the 4 general text design guidelines?
- Max 2 font sizes.
- Use minimal underlining, bold, italic.
- Max 3 fonts.
- Use capitalization where appropriate.
State the 4 general colour design guidelines?
- Max 4 colours per page.
- Max 7 colours whole website.
- Text contrast is important.
- Avoid blue text.
State the 3 general sound design guidelines?
- Use harsh & soft audio tones for warning & positive feedback.
- Use sound where appropriate.
- Provide mute option.
State 2 display issues?
- Maintain display inertia.
* Location, shape & size kept constant of elements.
