Web Design Flashcards

1
Q

What is a site structure diagram?

A

A diagram used to design the names of the required web pages and how the web pages will link together using hyperlinks

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

What are the two types of site structures?

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

What is a linear site structure?

A

Structure that allows users to move forwards or backwards through a set of web pages - no direct hyperlinks to specific web pages

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

What is a hierarchal site structure?

A

Structure that groups web pages into ain topics, which is used to create topic and subtopic web pages

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

What must an effective user interface have?

4

A
  • Navigational links
  • Consistency across multiple pages
  • Relative vertical positioning of media
  • File formats of the media (text, graphics, video and audio)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What are the two hyperlink types?

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

What does an internal hyperlink do?

A

Takes the user from one web page to another within the same website

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

What does an external hyperlink do?

A

Takes the user from one web page to another in a different website

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

What is a wireframe used for?

A

To design the layout of every web page in a website

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

What must a wireframe include?

4

A
  • All text elements on the page
  • Any media elements (graphics, video & audio)
  • Elements that allow the user to interact with the page
  • Intended position and type of all hyperlinks on page
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What are the standard image file formats?

3

A
  • Gif
  • PNG
  • JPEG
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What are the standard video file formats?

2

A
  • MP4
  • AVI
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What are the standard audio file formats?

2

A
  • MP3
  • WAV
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Gif Properties

Compression, Animation, Transparency & Colour Depth

A
  • Compression: Lossless
  • Animation: Yes
  • Transparency: Yes
  • Colour Depth: 8 bit
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

PNG Properties

Compression, Animation, Transparency & Colour Depth

A
  • Compression: Lossless
  • Animation: No
  • Transparency: Yes
  • Colour Depth: 24 bit
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

JPEG Properties

Compression, Animation, Transparency & Colour Depth

A
  • Compression: Lossy
  • Animation: No
  • Transparency: No
  • Colour Depth: 24 bit
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

MP4 Properties

Compression

A

Compression: Lossy

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

AVI Properties

Compression

A

Compression: Lossless

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

WAV Properties

Compression, Quality & File Size

A
  • Compression: Lossless
  • Quality: Higher
  • File Size: Larger
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

MP3 Properties

Compression, Quality & File Size

A
  • Compression: Lossy
  • Quality: Lower
  • File Size: Smaller
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What are prototypes used for?

A

To demonstrate or test the usability of the website design

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

What is a low-fidelity prototype?

A

Paper based prototype

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

What factors affect size / quality?

3

A
  • Resolution
  • Colour Depth
  • Sampling Rate
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

How does resolution affect size / quality?

A

The larger the resolution, the more pixels (better quality), the more datat store and the larger the file size

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
How does colour depth affect size / quality?
The larger the colour depth, the more colours can be used (better quality), the more data and the larger file size
26
How does sampling rate affect size / quality?
The larger the sampling rate, the more data to store (better quality) and the larger file size
27
What is lossless compression?
Compression without quality reduction
28
What is lossy compression?
Compression with quality reduction
29
Why is compression used? | 2
* To have media require less storage space * To have media be able to transmit faster
30
What does HTML stand for?
Hyper Text Markup Language
31
How is the anchor tag used? | HTML code
32
What does the href attribute do?
Contain the address of a web page or the name of a HTML file
33
What are relative addresses used for?
To link pages and resources within the same website (internal link)
34
What are absolute addresses used for?
To link to web pages outside of your website (external link)
35
What does the Copyright, Designs and Patents act 1988 make illegal? | 3
* Make unauthorised copies of content * Distribute content without permission of the owner * Use unauthorised content
36
What is the purpose of the div tag?
To define and group together a section of code to format with CSS
37
What are the required attributes of the img tag? | 2
* src: specifies the file path of an image * alt: specifies alternative text for the image if it cannot display
38
What is the structure of the audio tag? | HTML Code
``` ```
39
What is the structure of the video tag? | HTML Code
``` ```
40
What is CSS used for?
To describe how HTML is to be displayed on the screen
41
What are the two ways of implementing CSS?
* Internal * External
42
What is the selector?
Which element, class or ID of the web page is being styled
43
What is the declaration?
What is being changed by the CSS
44
What is the property?
The aspect of the selector being changed
45
What is the value?
The new value you want for the property
46
What are the CSS selectors? | 4
* Asterisk * Element * Class * ID
47
What is asterisk applied to?
Every element
48
What is element applied to?
All HTML elements specified
48
What is class applied to?
All HTML elements assigned to the class
49
What is ID applied to?
All HTML elements assigned to the specific ID
50
What are the five CSS properties and their functions?
* font-family: change text font * font-size: change text size * color: change text color * text-align: change text alignement to left, right or center * background-color: change background colour of html elements
51
How is a hex code represented?
#RRGGBB and the values go from 00 to FF to identify the colours intensity
52
What is the link tag used for?
To link the HTML file to an external document in the head tag
53
How is the link tag structured?
``
54
What are the benefits of using external CSS? | 2
* Ensures there is consistency across multiple web pages * Makes HTML code for web pages more concise and readable
55
What is the order of priority for CSS styles?
1. In-Line CSS 2. Internal CSS 3. External CSS
56
What is the order of priority for CSS selectors?
1. ID 2. Class 3. Element 4. Asterisk
57
What are the two JavaScript events?
* onmouseover * onmouseout
58
What does onmouseover do?
When the users pointer moves on to an element with the onmouseover event, JavaScript code can run
59
What does onmouseout do?
When the users pointer moves off of an element with the onmouseout event, JavaScript code can run
60
What is analysed during website analysis? | 2
* End-user requirements * Functional requirements
61
What are end user requirements?
Tasks that the people who will use the website must be able to do
62
What are functional requirements?
The processes the website must carry out and identifies the information required for the website to carry out its purpose
63
What elements are tested to ensure an effective user-interface design? | 4
* Links & navigation works correctly * All web pages constantly follow the same design * Matches user-interface design * Media (texts, graphics, audio & video) display correctly
64
How does a developer evaluate if a website is fit for purpose or not?
By checking to see if it meets both requirement types