Web Development

Question 1

What are end user requirements?

Answer 1

The end-users are the people that are most likely to use a website.

The end-user requirements that what visitors to a website want to do.

Example: Twitter
See tweets of people I follow; See what is trending

Example: School Website
Virtual tour of the school; See who the teachers are.

Question 2

What are functional requirements?

Answer 2

The functional requirements describe what functions the website is required to perform.

Example: Twitter
User logon; find tweets of people follow; display tweets in order of time.

Example: School Website
Video introduction from head teacher, photos of all teachers.

Question 3

What elements should a wireframe show?

Answer 3

1- The indented layout of the page

2 - The position of

• Navigational bars/links
• All text
• Media
• Interactive elements
• Form inputs
• Hyperlinks

3- Sometimes the wireframe may also include annotations that specify how the content should be styled using css e.g. background-color, font, size, etc.

Question 4

What is a low fidelity prototype?

Answer 4

Low-Fidelity prototypes are created fairly-quickly.

They are shown to the end-user group and their feedback should be considered when the final version of the site is being developed.

Question 5

Do low fidelity prototype include more or less details than a wireframe ?

Answer 5

Low-fidelity prototypes will often include more detail than a wireframe. They might contain all the intended text. Images and video might contain hand-drawn version of the final image/ video.

Question 6

What are the 3 things that make a design effective?

Answer 6

Visual Layout - The website should be clear and not too cluttered.

Readability - Too much text can take too long read and clutter up the screen. Also consider target user.

Consistency - A well-designed website will have a consisted format across multiple page.

Question 7

Describe a page structure in html

Answer 7

Webpage can be split up into different sections, all of these are within the .

The element will show the website banner. This will often include a title and a log.

The element will contain navigation links

The elements will contain the page content.

The element will contain information about the webpage/website – usually contact details, links to social media or legal information.

Question 8

What does the element do and what does it contain?

Answer 8

The element allow users input to be collected in a form.

The elements of a  we will use are:
Text
Number
Text Area
Radio
Submit

Question 9

Code for capturing a first name in a box with a maximum length of 25

Question 10

Code for capturing radio buttons (“choice”) with the option A being selected as default, with A meaning - sausages and chips

Answer 10

Sausages and chips<br></br>

Question 11

Code for a drop down menu to capture a favourite food with one choice being “pizza” and the other being “sausages”

Answer 11

Pizza

Sausages

Question 12

Code for a box for verbatim spanning across 5 rows and 45 columns

Question 13

Code to submit the information

Question 14

What are the 2 types of form validation most often used?

Answer 14

Maximum & Minimum Values - Max, Min & Max Length can be added to text input, numerical input and text area to:
Limit the number of characters that can be entered.
Set a rand of valid numerical values.

Presence Check - When asking a user to complete a form it is sometimes necessary to ensure that one or more inputs are not left blank by the user.

Question 15

Code for text input with a size of 30 and a maximum length of 25

Answer 15

Text: <br></br>

Question 16

Code to capture age and check it is between 0 and 100

Answer 16

Number: <br></br>

Question 17

Code for a box for verbatim spanning across 5 rows and 45 columns, and a maximum length of 250

Answer 17

Text Area: <br></br>

Question 18

What are the 3 types of Cascading Style Sheets?

Answer 18

Inline CSS

Internal CSS

External CSS

Question 19

Example of code for an inline css + what does it do?

Answer 19

Inline CSS
Used to apply style to a single element.

<h1>This is a heading</h1>

Question 20

Example of code for an internal css + what does it do?

Answer 20

Internal CSS
Included in the of each document, only applied to one single page.

h1{
    color:maroon;
   margin-left:40px;    }

Question 21

Example of code for an external css + what does it do?

Answer 21

External CSS
CSS is placed in an external file and linked in the head of HTML document. This means that one StyleSheet can be applied to multiple page.

Question 22

What does display: block do?

Answer 22

An element uses the entire width of its container.

Question 23

What does display: inline do?

Answer 23

An element used only as much width as necessary.

Question 24

What does display: none do?

Answer 24

An element is not visible.

Question 25

What does float mean?

Answer 25

An elements can be set to the left or the right of its container.

float: left
float: right

Question 26

What does clear mean?

Answer 26

Floating elements continue down the page until we use a property called clear.

clear: both

Question 27

What’s the difference between a margin and padding?

Answer 27

Margin: A transparent area around theoutsideof an element.
Padding: a transparent areainsidethe edge of the element.

Question 28

How do you create a navigation bar?

Answer 28

A nav bar is created using <ul> & <li> inside the section.
CSS can be used to change the appearance.

nav ul {list-style-type:none;}
nav ul li {float:left; width:80px; text-align:center;}
nav ul li a {display:block; padding:8px; color:black;}
nav ul li a:hover {background-color:red ;color:white;}
</li></ul>

Question 29

What are grouping selectors?

Answer 29

When two or more selectors have the same rules, these can be grouped together.
To group these together we can use a comma to separate the selectors

p, ul, ol {color:darkBlue;}

Question 30

What are descendant selectors?

Answer 30

There may be times where we don’t want all elements such as paragraphs in a page to use the same styles.

.section2 h2 {background-color:yellow;}

Question 31

What is usability testing?

Answer 31

Usability testing measures how well people can use your website.

Question 32

What are the 3 main ways to perform usability testing?

Answer 32

Persona – may relate to the experience or age of a tester.

Test Cases – a set of steps that seek to test a specific feature of the website.

Scenarios – a test scenario would be task that the tester would be given.

Question 33

What is Functional testing?

Answer 33

A number of tests should be carried out on the website to ensure it meets the functional requirements.

Question 34

What are examples of functional requirements?

Answer 34

Input Validation

Links & Navigation

Media

Question 35

What is the main purpose of usability testing?

Answer 35

The aim of usability testing is to create real-world conditions where a product might be used. Usability testing can show problems with a design at an early stage.

Question 36

Does usability testing use wireframe or low fidelity prototypes?

Answer 36

Usability testing is utilized with low-fidelity prototypes. The low-fidelity prototypes are used under observation and the developed and make note of any issues or problems, and make changes to the design if necessary.

This means testing all navigations links work correct – both internal and external. Ensure that all links have a link back to the homepage, that no pages have been orphaned i.e. are missing from website navigations.

Question 37

What’s compatibility testing?

Answer 37

Testing your website across a range of different platforms and making sure it performs as expected on each platform.

Browsers

Device Type

A website should be tested on as many different devices as possible. Compatibility testing can expose the following problems – changes in font-sizes/types, alignment issues, scrolling issues, elements overlapping.

Question 38

What’s fitness for purpose?

Answer 38

A website is deemed fit for purpose if it meets the end-user and functional requirements determined at the analysis phase.