Web design/section 3 Flashcards

(100 cards)

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
# Design WAV file size
Restricted to less than 4GiB
26
# Design WAV file sampling rate
44.1-48kHz
27
# Design Sampling rate
Number of times sound is captured per second
28
# Design MP3 file compression
Lossy compression that uses perceptual coding
29
# Design MP3 file quality
Quality depends of levels of lossy compression
30
# Design MP3 file size
There is no defined limit
31
# Design MP3 file sampling rate
44.1-48kHz
32
# Design File formats for images
JPEG, GIF, PNG
33
# Design JPEG file compression
Lossy compression | DCT encoding
34
# Design JPEG file animation
Not supported
35
# Design JPEG file transparency
Not supported
36
# Design JPEG file colour depth
24 bit; 16,777,216 colours available
37
# Design GIF file compression
Lossless compression | LZW encoding
38
# Design GIF file animation
Supported
39
# Design GIF file transparency
Supported
40
# Design GIF file colour depth
8 bit, 256 colours available
41
# Design PNG file compression
Lossless compression | DEFLATE encoding
42
# Design PNG file animation
Not supported
43
# Design PNG file transparency
Supported
44
# Design PNG file colour depth
24 bit; 16,777,216 colours available
45
# Design JPEG is ____ quality than PNG
Lower, because JPEG is compressed with lossy techniques
46
# Implementation Basic HTML file structure
``` ```
47
# Implementation ``` ```
Specifies the type of HTML for the browser, starts the document
48
# Implementation ``` ```
Specifies that all code within the tage is HTML
49
# Implementation ``` ```
Anything not seen by the end-user, such as links and titles, are stored inside the head tag
50
# Implementation ``` ```
Anything in these tags is shown in the browser window, elements such as text and images
51
# Implementation Closing tags in HTML
Used for most elements and begin with a /, these tags end elements that have content in between them
52
# Implementation ```

```
Creates a paragraph in the browser window
53
# Implementation ```

```
Creates a heading; can go from h1 to h6, with the size decreasing
54
# implementation ```
```
A container element; good for grouping elements and for applying CSS elements to groups
55
# Implementation Hyperlinks in HTML
``` link text ``` | Where "url" is the URL, "link text" is the text you click to redirect
56
# Implementation Link to CSS file in HTML
``` ``` | Stylesheet stays the same as it specifies a CSS file, same with text/css
57
# Implementation Link to JS file in HTML
``` ```
58
# Implementation Images with HTML
``` DESCRIPTION ``` | ALT is the description for when an image cannot appear ## Footnote ALT is used for screenreaders
59
# Implementation Audio with HTML
``` ``` | Types of audio files: audio/...: mpeg or wav (mpeg for mp3, wav for wav) ## Footnote controls is a parameter of audio
60
# Implementation Videos with HTML
``` ``` | Same as audio, source is a child of the video tag
61
# Implementation Types of lists in HTML
Ordered and unordered
62
# Implementation HTML unordered lists
```
``` | `
  • is list elements, these have the elements of the list`
    63
    # Implementation HTML ordered lists
    ```
    ``` | `
  • is list elements, these have the elements of the list`
    64
    # Implementation Internal hyperlinks
    Take you to another page in the same site
    65
    # Implementation External hyperlinks
    Take you to a different website entirely
    66
    # Implementation Absolute hyperlinks
    Completely fixed and don't change | Include all link information such as server address, path and file name
    67
    # Implementation Relative hyperlinks
    Take you to a file in the same directory, are more flexible
    68
    # Implementation CSS code consists of...
    A selector and a declaration | A selector is the element you are applying the style, or declaration, to
    69
    # Implementation CSS text properties
    font-family, font-size, color, text-align
    70
    # Implementation CSS general properties
    background-color
    71
    # Implementation CSS font-family
    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
    # Implementation CSS font-size
    The size of text, typically in pixels (px)
    73
    # Implementation CSS color
    Sets the colour of the text | Note that the element is color, not colour
    74
    # Implementation CSS text-align
    Positions the text; this cold be, left, right or centre for example
    75
    # Implementation CSS background-color
    A general CSS property, sets the backround colour for any element
    76
    # Implementation CSS syntax
    ``` p {color: blue; font-size: 12px;} ``` | This code applies to all paragraph elements ## Footnote Each declaration is seperated by ";", and there is a colon between the property and the specification for that property
    77
    # Implementation HTML style element
    ``` ``` | Anything inside the style tag is CSS, goes in the `` tag
    78
    # Implementation ID declaration in HTML
    ```

    ``` | This allows CSS code to target this paragraph of text specifically
    79
    # Implementation Using an ID in CSS
    ``` #text {color: blue;} ``` | This CSS code only applies to the HTML element with ID "text"
    80
    # Implementation Class declaration in HTML
    ```

    ```
    81
    # Implementation Using a class in CSS
    ``` .heading {font-size: 30px;} ```
    82
    # Implementation Difference in syntax between a class and ID in CSS
    A class uses a `.text` as a selector, ID uses `#text` as a selector
    83
    # Implementation Different uses of ID and class in CSS
    Code for a class can be used for multiple elements, code for an ID is used for a specific element
    84
    # Implementation The client
    The computer system that runs the web browser
    85
    # Implementation Client-side scripts
    Scripts that are interpreted by the browser and executed on the client system
    86
    # Implementation Main client-side scripting language
    JavaScript
    87
    # Implementation HTML script element
    ``` ``` | Anything inside this code is JavaScript by default
    88
    # Implementation Mouse over events in JS
    Changes an element when the cursor goes over it
    89
    # Implementation Mouse out events in JS
    Changes an element when the cursor goes off it
    90
    # Implementation JS functions
    ``` function mouseOver() {} ``` | Declare a func with `function`, use () for parameters, code goes in {}
    91
    # Implementation Creating a mouse-over event in JS
    ``` function mouseOver () { document.getElementById("id").style.color = "red" ``` | Must specify the ID in HTML for the code to work, then use CSS after ID ## Footnote You need to apply the JS function in the HTML element, just the function isn't enough
    92
    # Implementation Creating a mouse-out event in JS
    ``` function mouseOut () { document.getElementById("id").style.color = "black" ``` | Must specify the ID in HTML for the code to work, then use CSS after ID ## Footnote You need to apply the JS function in the HTML element, just the function isn't enough
    93
    # Implementation Code within the JS function to specify what to do in the event of mouse-over/mouse-out
    ``` document.getElementById("id").style.color = "red" ``` | The ID is the HTML ID
    94
    # Implementation Applying JS functions to CSS elements
    ```

    ``` | onmouseover specifies func to use in a mouseOver event, like a mouseOut
    95
    # Testing Factors to take into account when testing a website
    user interfance, links and navigation, media, consistency
    96
    # Testing How to test user-interface
    Ensure the website matches the wireframe and considers end-user requirements
    97
    # Testing How to text links
    Make sure all internal and external hyperlinks work correctly
    98
    # Testing How to test media
    Make sure the position & alt tags are correct, and media is working
    99
    # Testing How to test consistency
    Make sure all CSS elements are consistent and the styling is applied correctly
    100
    # Evaluation How to test the fitness-for-purpose of a website | Fit-for-purpose is what you evaluate
    Make sure the website meets end-user and functional requirements