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
Q

How does colour depth affect size / quality?

A

The larger the colour depth, the more colours can be used (better quality), the more data and the larger file size

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

How does sampling rate affect size / quality?

A

The larger the sampling rate, the more data to store (better quality) and the larger file size

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

What is lossless compression?

A

Compression without quality reduction

28
Q

What is lossy compression?

A

Compression with quality reduction

29
Q

Why is compression used?

2

A
  • To have media require less storage space
  • To have media be able to transmit faster
30
Q

What does HTML stand for?

A

Hyper Text Markup Language

31
Q

How is the anchor tag used?

HTML code

A

<a href="page2.html"> Next Page </a>

32
Q

What does the href attribute do?

A

Contain the address of a web page or the name of a HTML file

33
Q

What are relative addresses used for?

A

To link pages and resources within the same website (internal link)

34
Q

What are absolute addresses used for?

A

To link to web pages outside of your website (external link)

35
Q

What does the Copyright, Designs and Patents act 1988 make illegal?

3

A
  • Make unauthorised copies of content
  • Distribute content without permission of the owner
  • Use unauthorised content
36
Q

What is the purpose of the div tag?

A

To define and group together a section of code to format with CSS

37
Q

What are the required attributes of the img tag?

2

A
  • src: specifies the file path of an image
  • alt: specifies alternative text for the image if it cannot display
38
Q

What is the structure of the audio tag?

HTML Code

A
<audio controls>
<source src="quack.mp3" type="audio.mpeg">
Your browser does not support the audio tag
</audio>
39
Q

What is the structure of the video tag?

HTML Code

A
<video width="1280" height="720" controls>
<source src="baseball.mp4" type="video.mp4">
Your browser does not support the video tag
</video>
40
Q

What is CSS used for?

A

To describe how HTML is to be displayed on the screen

41
Q

What are the two ways of implementing CSS?

A
  • Internal
  • External
42
Q

What is the selector?

A

Which element, class or ID of the web page is being styled

43
Q

What is the declaration?

A

What is being changed by the CSS

44
Q

What is the property?

A

The aspect of the selector being changed

45
Q

What is the value?

A

The new value you want for the property

46
Q

What are the CSS selectors?

4

A
  • Asterisk
  • Element
  • Class
  • ID
47
Q

What is asterisk applied to?

A

Every element

48
Q

What is element applied to?

A

All HTML elements specified

48
Q

What is class applied to?

A

All HTML elements assigned to the class

49
Q

What is ID applied to?

A

All HTML elements assigned to the specific ID

50
Q

What are the five CSS properties and their functions?

A
  • 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
Q

How is a hex code represented?

A

RRGGBB and the values go from 00 to FF to identify the colours intensity

52
Q

What is the link tag used for?

A

To link the HTML file to an external document in the head tag

53
Q

How is the link tag structured?

A

<link rel="stylesheet" type="text/css" href="styles.css">

54
Q

What are the benefits of using external CSS?

2

A
  • Ensures there is consistency across multiple web pages
  • Makes HTML code for web pages more concise and readable
55
Q

What is the order of priority for CSS styles?

A
  1. In-Line CSS
  2. Internal CSS
  3. External CSS
56
Q

What is the order of priority for CSS selectors?

A
  1. ID
  2. Class
  3. Element
  4. Asterisk
57
Q

What are the two JavaScript events?

A
  • onmouseover
  • onmouseout
58
Q

What does onmouseover do?

A

When the users pointer moves on to an element with the onmouseover event, JavaScript code can run

59
Q

What does onmouseout do?

A

When the users pointer moves off of an element with the onmouseout event, JavaScript code can run

60
Q

What is analysed during website analysis?

2

A
  • End-user requirements
  • Functional requirements
61
Q

What are end user requirements?

A

Tasks that the people who will use the website must be able to do

62
Q

What are functional requirements?

A

The processes the website must carry out and identifies the information required for the website to carry out its purpose

63
Q

What elements are tested to ensure an effective user-interface design?

4

A
  • Links & navigation works correctly
  • All web pages constantly follow the same design
  • Matches user-interface design
  • Media (texts, graphics, audio & video) display correctly
64
Q

How does a developer evaluate if a website is fit for purpose or not?

A

By checking to see if it meets both requirement types