National 5 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.

HTML is now in version 5, known as HTML5. This is a working specification, meaning new stuff is added to it all the time. HTML is built up of HTML tags, their basic layout is shown below:

Image copyright J Balfour

The basic structure of a webpage

The basic structure of a webpage is shown below:

<!DOCTYPE html>
<html>
  <head>
    <title>Page title goes here</title>
  </head>
  <body>
  </body>
</html>

A simple rule to remember, anything that appears in the head is either meta data (information about the webpage) or additional data, stylesheets or scripts that are required for the page to load. Anything within the head does not display on the screen.

Within the body we can add our main content that we want displayed.

  <body>
    <p>
      Hello world!
    </p>
  </body>

There are several elements that you need to know about for National 5. Here are a few tags to create these elements:

Creating a link (or hyperlink) to another page using HTML is achieved with the <a> tag (anchor tag):

<a href="mywebpage.html">Click here to visit another page</a>

Where href is the destination of the link and the text in between the opening and closing tag is the text that will be displayed on the page.

The above link is an internal link. An external link would look like the following:

<a href="http://www.example.com/testpage.html">Click here now!</a>

Lists

At National 5, lists can be constructed in two ways, ordered or unordered. An ordered list uses numbers from 1 onwards:

1. Item 1
2. Item 2
3. Item 3

An unordered list uses bullets for each list item:

• Item 1
• Item 2
• Item 3

An unordered list is represented by the <ol> tag and a list item is represented by the <li> tag:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

The same can be done with an unordered list using the <ul> tag and the <li> tag:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Images

Images in HTML can be created using the <img> tag:

<img src="image1.png" alt="My birthday">

Image tags need to have an alt tag which specifies to the browser what to display if the image is not found on the webserver.

Sometimes, an image will also include information about it's size within the tag. This is achieved by adding width and height attributes:

<img src="image1.png" alt="My birthday" width="100" height="80">

Notice with the image tag there is no closing tag. This is because it is a self-closing tag.

Audio and video

HTML5 added in support for audio and video. These elements, although they seem complex, are actually quite easy to understand:

Video in HTML is created by the <video> tag combined with <source> tags inside it.

<video>
  <source src="movie1.mp4" type="video/mp4">
  <source src="movie1.ogg" type="video/ogg">
  <source src="movie1.webm" type="video/webm">
</video>

Notice there are three sources. The purpose of the three sources means that the browser has a fallback option if the first one does not work. E.g. if the browser didn't support MP4, it would try the OGG file and if it didn't support that it would move to the WEBM file.

MP4 is the most supported file format, however, it is not as efficient in compression as OGG or WEBM.

Video players can also have controls added to them that allow the user to change the volume or where they are in the video. This is done by changing the top <video> tag to look like:

<video controls>

Audio is done in pretty much the same way, except the tag changes to <audio> and the audio source files and types have different file types:

<audio>
  <source src="movie1.mp3" type="audio/mpeg">
  <source src="movie1.ogg" type="audio/ogg">
  <source src="movie1.wav" type="audio/wav">
</audio>

Again, adding the controls to the <audio> tag will give the user the ability to change where they are in the audio track and change the volume.

CSS or Cascading Style Sheets allow to add style to a webpage.

Rules

CSS is built up of rules.

Image copyright J Balfour

An example of a rule would look like this:

p {
  color: green;
}

The first part of that, the p, is called the selector. In this case it is using a tag selector. A class selector would look like this:

.page

In the case above, the selector targets any element with the page class. If it wanted to target an element with the page ID (IDs are unique) then it would look like this:

#page

The main body of the tag is inside the curly braces ({ }) and tells the CSS processor what should be done to that element.

Properties

For National 5 you need to know about several different properties:

Text

• font-family: font-family: "Arial";
• font-size: font-size: 12pt;
• color: color: #ffaa55;
• alignment: text-align: center;

Colours

• Background colour: background-color: green;
• Text colour : color : red;

Adding classes and IDs to HTML couldn’t be easier:

<p class="page">Hello world!</p>
<p id="page">Hello world!</p>

When a class and an ID are applied to the element, the property and values in both the class and the ID will be applied. If the ID has a property the class also has the browser will take the property from the ID, rather than the class. That is to say, that IDs overwrite classes. This is called specifity.

Adding CSS to a page

CSS can be added to a page in three ways; internal, external, and inline.

Internal

Internal CSS is done within the <head> element inside a <style></style> tag.

...
<head>
  <title>Page title goes here</title>
  <style>
    .page {
      background-color: #aa0000;
    }
  </style>
</head>
...

External

External CSS files are in a separate file, for example called style.css. This file is then linked to the HTML page by putting a <link> tag into the <head> tag:

...
<head>
  <title>Page title goes here</title>
  <link rel="stylesheet" href="style.css"
</head>
...

Inline

Inline styles are often the least used because they affect one element and one element only and use more resources. It is often better to simply add a class if the style is being used over and over again. However, it is necessary to understand them for National 5 Computing Science.

To add an inline style, simply add a style="" attribute to a tag in the HTML page:

...
<p style="color:green; background-color:red;">Hello world!</p>
...

Using CSS and HTML

page.html

<!DOCTYPE html>
<html>
  <head>
    <title>Page title goes here</title>
  </head>
  <body>
    <div id="main_body">
      <h1>Welcome to my new website!</h1>
      <p class="lead-text">
My name is James Cameron and I am a computer scientist. I have built my webpage with pure HTML and CSS.
      </p>
      <p>
My main interests at present include webpage development and software development. I was formerly a film director.
      </p>
      <p>
With my expertise in directing films I have brought my knowledge to building this personal website all about films.
      </p>
    </div>
  </body>
</html>

style.css

#mainbody {
  background-color: lightblue;
  font-size: 16px;
  font-family: Arial;
}
h1 {
  font-size:25px;
  color:red;
}
p {
  color:green;
}
.lead-text {
  color:#fff;
  font-size:18px;
}

A common question related to this section is something along the lines of:

The page appears with two green paragraphs. Why are there only two green paragraphs and not three?

The answer would be because there is a class applied to the first one called lead-text. Because the lead-text class specifies in the CSS file that the colour of the text is white, it will overwrite the green of the paragraph element.

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>
  document.getElementById("mainbody").style.color = "green";
</script>

Testing a website involves:

• testing the user interface against the original designs (wireframes, low-fidelity prototypes)
• testing the media works and displays
• testing links and navigation go to the correct pages
• testing for consistency to ensure that the site doesn’t look different on each page visited

Evaluation involves checking a website is fit for purpose. A website is fit for purpose if it meets both the end-user requirements and the functional requirements set out in the analysis stage. If the website is not fit for purpose at this point, the developer will need to go back to the implementation or design stages and make changes.