Higher Computing Science _{WDD Revision notes}

End-user and functional requirements

There are two kinds of requirements that need to be considered when building a website: the end-user requirements and the functional requirements.

End-user requirements specify what the user should be able to perform. Normally creating a list of end-user requirements involves talking to the end-users to get information on what they want the website to allow them to do. For example, a user may require accessibility features on a website.

Functional requirements specify what the website should be able to do, usually, for instance processes that the website must be able to do. For example, with a website that is allows users to purchase items one functional requirement may be that the website can process forms.

Navigation

Navigation of a website can be either linear or hierarchical.

Linear could be in a multipage website where it follows a structure like Page 1 → Page 2 → Page 3 etc. In a linear structure, user would move from one page to the next.

Image from BBC Bitesize

Hierarchical structure pages can be accessed based on the user's location in the hierarchy.

Image from BBC Bitesize

In this diagram, if the user is on the Kids page, they can go to the Membership plan page but cannot go to the Boxing page. Also, note the arrows. If the arrow points both ways it means that they can access each other (it also means that it is an internal link), if it only points one way, then only one page can access the other (usually going down the way). Finally, there is an external link on this diagram. External links are a separate website (domain) and therefore cannot link back to the site, thus the arrow pointing to it does not point back the way.

Links

There are two kinds of links:

• Internal: links to a page on the same website
• External: links to a page on another website (or domain)

As well as this, we have absolute link and relative links. A relative link will normally look something like page1.html where as an absolute link would start with the domain it is trying to access, for example, www.google.com/image.jpg. A relative link will link to a location in the same directory on the website structure whereas an absolutely link is completely fixed and points directly to the file or webpage.

Wireframes

A wireframe is a method of design a website or webpage. Wireframes should clearly show all navigation, text areas (using horizontal lines to represent text), images, audio, video and other forms of media and positions of links on the page and a description of where the link will go.

Image from BBC Bitesize

Some wireframes also include description which specify background colours, text font, size and colour, text alignment and size of images.

low-fidelity prototypes

Low-fidelity prototypes are often hand drawn or made on a piece of software such as Balsamiq or even just on a simple graphics program such as Paint. They are also known as mockup designs within the industry. They are shown to end-users who give feedback on the design.

low-fidelity prototypes contain images and text that gives more idea of what the finished website would look like.

Image from BBC Bitesize

Consistency

A website should be consistent across all pages. This means that each webpage should follow a similar structure to the previous. For example, if the navigation bar was at the top of the Homepage, it should also be at the top of the About page. This helps users and prevents the 'don't make me think' attitude that some users would have when they visit the webpage.

External CSS can help with making a website consistent by including an external CSS file with all of the styles which are applied to all webpages.

Media

There are several different types of media that can be used on a webpage. They include text, graphics, video and audio. They all have their own formats:

• Images include: JPG, PNG, GIF
• Audio includes: WAV, MP3
• Video includes: MP4, AVI

The Copyright, Designs and Patents Act (1998) covers the use of materials on a website. For example, text, graphics, video and audio are all covered by this law. It is important that where required the developer acknowledges the sources of images or pays the original copyright owner.

Some images, content or media cannot be used due to copyright.

Compression of files

Compression is very important with websites because it leads to lower storage requirements on the server hosting the files and because it allows the client to download the files much faster.

There are two kinds of compression; lossy and lossless.

Lossy compression involves removing parts of the original file to make the file smaller.

Lossless compression maintains the original data and doesn't remove anything but applies methods such as identifying repetition in a file. Lossless compression is much less effective at obtaining smaller files sizes than lossy.

Standard File Formats

WAV and MP3 are the most common formats for storing audio:

MP3 uses lossy compression by removing parts of the audio file that are difficult for the human ear to hear. WAV is approximately 10 times the size of an MP3 file.

Sample rate is one method of reducing the file size of an audio file. The sample rate is the number of audio recordings in a second. For example, with a sample rate of 1Hz you would only record one different sound in a second.

Image formats include JPG, GIF and PNG. The table below shows the different formats and compares them on several features of the format.

Colour depth is often considered one of the best ways to compress an image, however, it means that less colours can be stored and represented by an image file.

We can also reduce a file size of an image by reducing the resolution of it.

JPEG works similar to MP3, by removing colours that the eye cannot notice so easily.

For HTML at Higher you need to know how to use the elements from National 5, but you also need to be able to use and explain the purpose of the following semantic elements.

• nav
• header
• footer
• section
• main

A semantic element is one which does not necessarily make any changes to the appearance of the webpage but has a meaning to things like Google and also helps with the structure of a page.

You can, of course, style these elements using CSS.

You need to be able to use these as well as identify them within a wireframe, low-fidelity prototype or on a webpage.

Form elements

The form element is made up of the following elements:

• <input> - used for small piece of data such as a username or password
• <textarea> - used for larger formatted text
• <select> - used to create dropdowns

Form elements should have a name attribute.

Input

The <input> element can also have a type attribute set. If the type attribute is set to any of the following, the input will change:

type="text": allows any characters to be inserted

type="number": allows only numbers to be inserted

type="radio": create a radio button. Radio buttons are used to submit a specific choice in a form

<form>
  Choose your booking time:<br>
  <input type="radio" name="time" value="09:00 to 13:00"> 09:00-13:00
  <br>
  <input type="radio" name="time" value="13:00 to 17:00"> 13:00-17:00
  <br>
  <input type="radio" name="time" value="17:00 to 22:00"> 17:00-22:00
</form>

The following example has min and max attributes. This allows us to create a range check.

<input type="number" name="seats" min="1" max="100" value="10" placeholder="Insert your age">

min = "1" max = "100" – Range check has been set to ensure values are >=1 and <=100. The value="10" sets the default value of the input box to 100 and the placeholder="Insert your age" will set the text to display if the value is empty.

Radio buttons are buttons that only allow you to pick one of the options. To create them, use an input tag with a type attribute of radio:

<input type="radio" name="age" value="25-34"> 25-34
<input type="radio" name="age" value="35-44"> 35-44
<input type="radio" name="age" value="45-54"> 45-54

Textareas

Text areas are useful for extended input.

<form>
  Please enter any dietary requirements:
  <textarea name="dietary_requirements" rows="5" cols="40"> </textarea>
</form>

rows="5": this will set the rows of the textarea (rows manage the height of the textarea)

cols="40": this will set the columns of the textarea (columns manage the width of the textarea)

Form submission

The submit type will make the input act as a button to submit the form:

<input type="submit" onclick="alert('Form Submitted, Thank You!')" value="Submit">

Select

Dropdown lists can be constructed using the <select> and <option> elements:

<form>
   Select city:
   <select name="city">
     <option value="Aberdeen">Aberdeen</option>
     <option value="Dundee">Dundee</option>
     <option value="Edinburgh">Edinburgh</option>
     <option value="Glasgow">Glasgow</option>
     <option value="Inverness">Inverness</option>
     <option value="Perth">Perth</option>
     <option value="Stirling">Stirling</option>
  </select>
</form>

<select> elements can also be given the multiple attribute that allows the user to hold the control key (or command on a Mac) and select multiple options.

Display

The CSS display property has three values, block, inline, none. A block element is one which takes the whole width of its container (for example, the full width of the page). An inline element will take as much width as is necessary. The none value will hide the element and make it take up no space on the screen.

This is Charlie, she is a wonderful rabbit. This text has display:block applied to it, and you can see it takes the whole line.

This is Charlie, she is a wonderful rabbit. Whereas this text has display:inline applied to it, and you can see that the image is on the same line.

Float

The float property makes it possible to put an element at the side of another element within its container. In the example below, the image has the float : right property and value pair.

This is Charlie, she is a wonderful rabbit. This image has the float : right property and value pair applied to it.

You'll see that the paragraph elements (<p>) will wrap around the image, like with the content of this paragraph, similar to the text wrap feature of Microsoft Word.

Margin and padding

The box model of HTML and CSS describes how elements are separated from each other, including, but not limited to, internal elements.

In the following example, the red are the two other elements surrounding the orange-coloured element. The green represents the content section, and the orange is the whole element (since it has padding). The blue represents the margin applied to the element.

You can use this example to see how each affects each element:

• Margin sets the space outside of an element and other elements
• Padding sets the internal space between the edges and its content within an element

Margin is set with:

margin : 15px;
margin : 15px 5px;
margin-left : 5px;
margin-right : 5px;
margin-top : 15px;
margin-bottom : 15px;

And padding is set with:

padding : 15px;
padding : 15px 5px;
padding-left : 5px;
padding-right : 5px;
padding-top : 15px;
padding-bottom : 15px;

Dimensions

The dimensions of elements can be set using:

width : 100px;
height : 100px;

Clear

The clear property is also very important since it prevents elements that have the float property floating over other elements:

For this we can use clear : both, or if we want to stop elements floating over just on one side we can use clear : left or clear : right.

List-style-type

Finally, we can remove bullets and/or numbers using list-style-type: none;.

Building navigation bars

Websites often feature a horizontal navigation bar. For Higher we need to be able to build a very basic navigation bar like this.

The HTML code to do this is shown below:

<nav>
    <ul>
      <li>
        <a href="index.html">Home page</a>
      </li>
      <li>
        <a href="page1.html">Page 1</a>
      </li>
      <li>
        <a href="page2.html">Page 2</a>
      </li>
    </ul>
</nav>

And the CSS for this follows:

nav ul {
  list-style-type : none;
  height: 50px;
}
nav ul li {
  float: left;
  padding: 15px;
  margin: 10px;
}
nav ul li a{
  display: block;
}
nav ul li a:hover{
  background: red;
  color: white;
}

JavaScript is one of the most commonly used programming languages. It is run client-side. By client-side we mean on the user’s computer. This means that it is executed by the browser on the user’s computer.

JavaScript is often used to make pages interactive and change in response to something. Client-side JavaScript can be used to perform validation on data entered into forms to verify correct inputs, but since JavaScript can be turned off, proper validation should be done when the data arrives at the server for security reasons.

JavaScript is the main client-side scripting language that is used to manipulate HTML elements.

To embed an external JavaScript file we use the <script> tag with the src="" attribute:

<script src="code.js"></script>

Note the closing tag for the script tag.

JavaScript can also be written internally (inside an HTML page):

<script>
    document.getElementById("mainbody").style.color = "green";
</script>

A JavaScript event is something that causes JavaScript to be executed. For example, when the mouse goes over an element. This is done inside the HTML tag:

<img id="hover_img" src="img1.jpg" onmouseover="mouseOver();" onmouseout="mouseOut();">

This <img> element will perform an action on the mouse over and on the mouse out. The JavaScript for this would look like:

<script>
  function mouseOver(){
    document.getElementById("hover_img").src = "img2.jpg";
  }
  function mouseOut(){
    document.getElementById("hover_img").src = "img1.jpg";
  }
</script>

The following events are listed to show you what you need to know for Higher:

• onmouseout - occurs when the cursor is moved away from an element such as a button or a heading.
• onmouseover - occurs when the cursor is hovered over an element such as a button or a heading.
• onmousedown - occurs when the user presses a mouse button over an element.
• onmouseup - occurs when the user releases the mouse button over an element.
• onclick - occurs when the user clicks on an element such as a button or hyperlink.
• onmousemove - occurs when the cursor is moving over an element such as an image or menu.

A website can be tested by:

• Testing user interface against interface design – does the website match the prototype designs
• Testing website accessibility – can everyone access the information on the website
• Testing links and navigation – checking that links go to the correct pages
• Testing media - checking that video and audio files work as expected
• Testing for consistency – checking that each page doesn’t have a different appearance from the previous. For example, using the same colours, fonts, font sizes, layouts, navigation system, and where appropriate, the same media across pages.

Usability testing

Usability testing is very important in ensuring a website works under real world conditions.

Usability testing is done often on several occasions when the website is being built to ensure that it is working as expected.

The testers are given a set of details and a set of test cases that they must carry out.

Testers are given a persona, which is basically a fake user with certain aspects about them. A persona could include the user’s age or the skill level of the individual.

Testers are given a set of test cases which is a set of actions that verify a function of a website is working.

They are also given scenarios which are a set of goals to complete whilst using the website (for example, logging in to the website and then buying something)

Web developers often use software including heat maps (which demonstrate where the user clicked) or screen capture software to see what the user did.

Usability testing is also often done using a low-fidelity prototype so to save on cost and time, rather than simply building the website and then doing the usability testing.

Input Validation testing

Input validation testing means testing all inputs with validation. For example, a login for a website would require that both the username and password fields would have data. If the user can login without entering a password then the input validation has failed.

Link testing

Link testing involves checking that links go to where they are expected to go. Testing that the site navigation goes the correct place is very important at this stage.

Media testing

Media testing involves checking videos and audio, as well as pictures on a website to ensure that they load and display as expected. All media should be tested.

Compatibility testing

The world wide web is an amazing invention, but because there are so many variations of browsers out there (for example, Chrome on PC and Android or iOS) you will quickly learn that certain things that work in one browser may not work in another.

Web developers constantly test their websites with different browsers to ensure maximum compatibility with browsers. If a website works in one browser, it’s not always the case that it will work with another. This is called compatibility testing.

Compatibility testing also involves testing the website on multiple devices such as smartphone, tablet and PC.

If a website is designed for a width of 1000px, then it will not display correctly on a smartphone. Sometimes a webpage will display completely differently that on a desktop browser, so this should be checked.

Making a website work across multiple devices is called responsive web design.

Evaluating a website involves checking the website against the original analysis.

A website is fit for purpose if:

• It meets the end-user requirements set out in analysis
• It meets the functional requirements set out in analysis