Web design/section 3 Flashcards

1
Q

Analysis

A

Web developers consider the end-user requirements and functional requirements of a website

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

Analysis

End-users

A

The people most likely to use a finished product

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

Analysis

End-user requirements

A

Features that are needed or wanted by the end-user

Such as any accessibility requirements

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

Analysis

Functional requirements

A

The processes the website should carry out and interactions with databases/information

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

Design

What act protects the assets of an individual?

A

Copyright, designs and patents act 1998

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

Design

What elements related to the Copyrights, designs and patents act do developers need to consider?

A

Elements such as text, graphics, videos and audio

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

Design

What do developers have to do with media that isn’t theirs?

A

Give credit and acquire relevant permissions before using the media

This may also involve paying copyright holders

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

Design

Copyright holders

A

The owner of any multimedia

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

Design

Failure to comply with the Copyright, Designs and Patents Act can result in…

A

Fines and prosecution

Can include end-users and business owners/developers

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

Design

Compression

A

Reducing a file’s size/required storage space

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

Design

Benefits of compression

A

Lower storage requirements on the server side, more responsive upload rates/less time to transfer files to the client side

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

Design

Compression techniques

A

Lossy and lossless compression

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

Design

Lossy compression

A

Removes some of the data when compressing, so compression rates are higher

Only if the file format supports lossy compression

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

Design

Lossless compression

A

Maintains all original data, lower compression rates

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

Design

Types of site navigation sructures

A

Linear, hierarchal

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

Design

Linear navigation structure

A

A structure where the user moves from one page to the next in a sequence

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

Design

Hierarchal navigation structure

A

A structure where pages can be accessed dependant on the user’s position in the hierarchy

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

Design

Wireframes

A

Used to design the visual layout of the webpage

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

Design

Wireframes must show…

A

Navigation links, text areas, media used with file format, position and types of hyperlinks

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

Design

Benefits of wireframes

A

Used to show the client the design early-on, easy way to design user-interface

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

Design

Low-fidelity prototypes

A

A quick design of the user-interface of a website, usually drawn on paper

Benefit of it being low cost

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

Design

File formats for audio files

A

WAV and MP3

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

Design

Compression in WAV files

A

Almost always uncompressed

Can sometimes use LCPM encoding for lossless compression

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

Design

WAV file consistency

A

Consistent with the original sound

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

Design

WAV file size

A

Restricted to less than 4GiB

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

Design

WAV file sampling rate

A

44.1-48kHz

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

Design

Sampling rate

A

Number of times sound is captured per second

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

Design

MP3 file compression

A

Lossy compression that uses perceptual coding

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

Design

MP3 file quality

A

Quality depends of levels of lossy compression

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

Design

MP3 file size

A

There is no defined limit

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

Design

MP3 file sampling rate

A

44.1-48kHz

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

Design

File formats for images

A

JPEG, GIF, PNG

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

Design

JPEG file compression

A

Lossy compression

DCT encoding

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

Design

JPEG file animation

A

Not supported

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

Design

JPEG file transparency

A

Not supported

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

Design

JPEG file colour depth

A

24 bit; 16,777,216 colours available

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

Design

GIF file compression

A

Lossless compression

LZW encoding

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

Design

GIF file animation

A

Supported

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

Design

GIF file transparency

A

Supported

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

Design

GIF file colour depth

A

8 bit, 256 colours available

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

Design

PNG file compression

A

Lossless compression

DEFLATE encoding

42
Q

Design

PNG file animation

A

Not supported

43
Q

Design

PNG file transparency

A

Supported

44
Q

Design

PNG file colour depth

A

24 bit; 16,777,216 colours available

45
Q

Design

JPEG is ____ quality than PNG

A

Lower, because JPEG is compressed with lossy techniques

46
Q

Implementation

Basic HTML file structure

A
<!DOCTYPE html>
<html>
    <head></head>
	<body></body>
</html>
47
Q

Implementation

<!DOCTYPE html>
A

Specifies the type of HTML for the browser, starts the document

48
Q

Implementation

<html></html>
A

Specifies that all code within the tage is HTML

49
Q

Implementation

<head></head>
A

Anything not seen by the end-user, such as links and titles, are stored inside the head tag

50
Q

Implementation

<body></body>
A

Anything in these tags is shown in the browser window, elements such as text and images

51
Q

Implementation

Closing tags in HTML

A

Used for most elements and begin with a /, these tags end elements that have content in between them

52
Q

Implementation

<p></p>
A

Creates a paragraph in the browser window

53
Q

Implementation

<h1></h1>
A

Creates a heading; can go from h1 to h6, with the size decreasing

54
Q

implementation

<div></div>
A

A container element; good for grouping elements and for applying CSS elements to groups

55
Q

Implementation

Hyperlinks in HTML

A
<a href="url">link text </a>

Where “url” is the URL, “link text” is the text you click to redirect

56
Q

Implementation

Link to CSS file in HTML

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

Stylesheet stays the same as it specifies a CSS file, same with text/css

57
Q

Implementation

Link to JS file in HTML

A
<script src="homepagescript.js"></script>
58
Q

Implementation

Images with HTML

A
<img src= "IMAGE LINK" alt= "DESCRIPTION">

ALT is the description for when an image cannot appear

ALT is used for screenreaders

59
Q

Implementation

Audio with HTML

A
<audio controls>
   <source src= "AUDIO FILE" type = TYPE OF AUDIO">
	 </audio>

Types of audio files: audio/…: mpeg or wav (mpeg for mp3, wav for wav)

controls is a parameter of audio

60
Q

Implementation

Videos with HTML

A
<video width="num" height="num" autoplay>
<source src="VIDEO FILE" type="video/mp4">
</video>

Same as audio, source is a child of the video tag

61
Q

Implementation

Types of lists in HTML

A

Ordered and unordered

62
Q

Implementation

HTML unordered lists

A
<ul>
<li></li>
<li></li>
</ul>

<li></li> is list elements, these have the elements of the list

63
Q

Implementation

HTML ordered lists

A
<ol>
<li></li>
<li></li>
</ol>

<li></li> is list elements, these have the elements of the list

64
Q

Implementation

Internal hyperlinks

A

Take you to another page in the same site

65
Q

Implementation

External hyperlinks

A

Take you to a different website entirely

66
Q

Implementation

Absolute hyperlinks

A

Completely fixed and don’t change

Include all link information such as server address, path and file name

67
Q

Implementation

Relative hyperlinks

A

Take you to a file in the same directory, are more flexible

68
Q

Implementation

CSS code consists of…

A

A selector and a declaration

A selector is the element you are applying the style, or declaration, to

69
Q

Implementation

CSS text properties

A

font-family, font-size, color, text-align

70
Q

Implementation

CSS general properties

A

background-color

71
Q

Implementation

CSS font-family

A

A set of fonts that are applied to text

Fonts are in families so that if a font isn’t available the next is used

72
Q

Implementation

CSS font-size

A

The size of text, typically in pixels (px)

73
Q

Implementation

CSS color

A

Sets the colour of the text

Note that the element is color, not colour

74
Q

Implementation

CSS text-align

A

Positions the text; this cold be, left, right or centre for example

75
Q

Implementation

CSS background-color

A

A general CSS property, sets the backround colour for any element

76
Q

Implementation

CSS syntax

A
p {color: blue; font-size: 12px;}

This code applies to all paragraph elements

Each declaration is seperated by “;”, and there is a colon between the property and the specification for that property

77
Q

Implementation

HTML style element

A
<style></style>

Anything inside the style tag is CSS, goes in the <head></head> tag

78
Q

Implementation

ID declaration in HTML

A
<p id="text"></p>

This allows CSS code to target this paragraph of text specifically

79
Q

Implementation

Using an ID in CSS

A
#text {color: blue;}

This CSS code only applies to the HTML element with ID “text”

80
Q

Implementation

Class declaration in HTML

A
<h1 class= "heading"></h1>
81
Q

Implementation

Using a class in CSS

A
.heading {font-size: 30px;}
82
Q

Implementation

Difference in syntax between a class and ID in CSS

A

A class uses a .text as a selector, ID uses #text as a selector

83
Q

Implementation

Different uses of ID and class in CSS

A

Code for a class can be used for multiple elements, code for an ID is used for a specific element

84
Q

Implementation

The client

A

The computer system that runs the web browser

85
Q

Implementation

Client-side scripts

A

Scripts that are interpreted by the browser and executed on the client system

86
Q

Implementation

Main client-side scripting language

A

JavaScript

87
Q

Implementation

HTML script element

A
<script></script>

Anything inside this code is JavaScript by default

88
Q

Implementation

Mouse over events in JS

A

Changes an element when the cursor goes over it

89
Q

Implementation

Mouse out events in JS

A

Changes an element when the cursor goes off it

90
Q

Implementation

JS functions

A
function mouseOver()
{}

Declare a func with function, use () for parameters, code goes in {}

91
Q

Implementation

Creating a mouse-over event in JS

A
function mouseOver () {
document.getElementById("id").style.color = "red"

Must specify the ID in HTML for the code to work, then use CSS after ID

You need to apply the JS function in the HTML element, just the function isn’t enough

92
Q

Implementation

Creating a mouse-out event in JS

A
function mouseOut () {
document.getElementById("id").style.color = "black"

Must specify the ID in HTML for the code to work, then use CSS after ID

You need to apply the JS function in the HTML element, just the function isn’t enough

93
Q

Implementation

Code within the JS function to specify what to do in the event of mouse-over/mouse-out

A
document.getElementById("id").style.color = "red"

The ID is the HTML ID

94
Q

Implementation

Applying JS functions to CSS elements

A
<h1 id="id" onmouseover="mouseOver()" onmouseout="mouseOut()"></h1>

onmouseover specifies func to use in a mouseOver event, like a mouseOut

95
Q

Testing

Factors to take into account when testing a website

A

user interfance, links and navigation, media, consistency

96
Q

Testing

How to test user-interface

A

Ensure the website matches the wireframe and considers end-user requirements

97
Q

Testing

How to text links

A

Make sure all internal and external hyperlinks work correctly

98
Q

Testing

How to test media

A

Make sure the position & alt tags are correct, and media is working

99
Q

Testing

How to test consistency

A

Make sure all CSS elements are consistent and the styling is applied correctly

100
Q

Evaluation

How to test the fitness-for-purpose of a website

Fit-for-purpose is what you evaluate

A

Make sure the website meets end-user and functional requirements