N5 Computing Science Revision

Notes
Web Design & Development

Analysis
End-user requirements
 The end users are the people who are going to be using the website.
 Their requirements are the tasks they expect to be able to do using the website.

Functional requirements
 Processes and activities that the system has to perform.
 Information that the system has to contain to be able to carry out its functions.

Example
A rock band has three members. The band wants to develop a website for its fans. The site will
provide details about the band, including biographies, music tracks, video clips and concert
details.
The band asked some of its fans what they would like to see on the new website. Here are a few
of the comments they made.

End-user requirements
 Users should be able to:
 navigate the site easily
 view biographies and photos of band members
 view all upcoming concerts and link to an external booking site
 view video clips of the band
 listen to the band’s audio tracks

Functional requirements
 The Home page should provide internal links to the four topic pages (biographies, music,
videos and concerts).
 Individual profile pages should include biography information, with photos of the band
 member and should have a link back to the Biographies page.
 The Music page should list the band’s albums and allow individual audio tracks to be
played.
 The Videos page should list video clips and allow these to be played.
 The Concerts page should list all the upcoming concerts, with links to the external booking
site.
 All pages (except the Home page) should link back to the Home page.

Design
Linear web structure
 Pages follow one after another
 Only previous or next page can be accessed from the page you are currently on

Hierarchical web structure

 Tree-like structure with pages divided into sub-sections
 Pages can be accessed in a random order

Interface design
The user-interface planning can be illustrated using wireframes. A separate wireframe is needed
for each page on a website. Each wireframe indicates the intended layout of the page and shows
the position of:
 all text elements on the page
 any media elements (images, audio clips and video clips)
 elements that allow the user to interact with the page
 intended position and type of all hyperlinks on the page

For the National 5 course, content should be stacked vertically on the page. It is not expected that
media will be positioned side by side

Low-fidelity prototyping
A prototype is used to show the intended user interface for any software product. Low-fidelity
prototypes are paper-based. They can be created quickly and give potential end users of the
finished product an indication of how the product will look and feel as they interact with it. They
can be created in a number of ways:
  Simple hand-drawn sketch of the interface
 Graphics packages such as ‘Paint’
 ‘Pencil’ software provides free prototyping tools

Copyright, Designs & Patents Act 1988

The Copyright, Designs and Patents Act protects the original creators of work by making it a crime
for anyone to download and share their work without first paying for it, or in some cases asking
for permission to use it first.

The Copyright, Designs and Patents Act protects against:

 software piracy, either by illegal download or illegal distribution
 use of software without the relevant software license
 theft of intellectual property such as designs for 3D printers or text/written work
 using/downloading images without permission of the copyright holder
 illegal download of video and audio files

Standard File Formats

Audio file formats:
 WAV
o sound format for Windows
o Normally uncompressed so larger file size
o Used for high-quality sound applications
 MP3
o Compressed so smaller file size
o Removes sounds that can’t be heard
o Lesser quality compared to WAV

Bit-mapped graphic file formats:

JPEG GIF PNG
Joint Photographic Experts Graphics Interchange Format Portable Network Graphics
Group
Used for photographic images Used for animations and Used for internet transfer of
drawings images
24 bit colour depth 8 bit colour depth 48 bit colour depth
Lossy compression Lossless compression Lossless compresion
Doesn’t allow transparency Allows transparency Multiple levels of
transparency: transparent,
translucent or opaque

Factors Affecting File Size & Quality

 Resolution – total number of pixels in a file
 Colour depth – The number of bits assigned to a pixel is known as the colour depth, which
is also known as the bit depth.
 Sampling Rate – number of times sound file is recorded per second

Compression
 Compression is required because file sizes are usually very big to store and would take too
long to upload/download over a network (like the internet)
 Lossy compression permanently removes data from files to make the file size smaller –
loss of quality
  Lossless compression rearranges the way data is stored so that the file size is made
smaller – there is no loss of quality!
Example
A new website for ScotsWaterSport is being developed. The website will consist of five web pages
and each of these web page will have a main heading centred at the top of the page. Further
requirements for the web pages are as follows.

The home page will provide:

 a short introduction to the range of water sports available in Scotland
 internal hyperlinks to specialist pages about four different water sports (Kayaking, Surfing,
Rafting, and Sailing)
 one external link to the water sports page of the VisitScotland website

Each of the specialist sports pages will provide:

 a photo of the sport
 a paragraph of information about the sport
 a bulleted list of suggested locations and ideas to try out the sport
 a hyperlink back to the home page

The new website for ScotsWaterSport will have a hierarchical structure.

This diagram shows the navigational structure of the ScotsWaterSport website.
The arrows on the diagram indicate the direction of the hyperlinks provided on each page.

These wireframes show the planned layout of each page on the ScotsWaterSports website.
 Implementation (CSS)
Definition
CSS (Cascading Stylesheet) creates rules that can be applied to HTML code in order to define the
format or layout of a webpage.

Rules
A CSS rule is made up of a selector (which identifies the part of the HTML page affected), followed
in 'curly brackets' by a declaration.
The declaration consists of one or more attributes and the value for each attribute.
AMERICAN SPELLING IS USED!

Description CSS rule

Style of font font-family: Arial;
Size of font font-size: 12px;
Colour of font color: blue;
Alignment of text text-align: center;

Classes
The class selector selects elements with a specific class attribute.
It is represented using a . symbol.

ID
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be unique within a page, so the id selector is used to select one
unique element!
It is represented using a # symbol.

Internal
An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the head section of an HTML page.
External
External style sheets are used to format two or more webpages. Each page must include a
reference to the external style sheet file inside the <link> element. The <link> element goes inside
the head section.

Any CSS is then created in a separate file.

Inline
An inline style may be used to apply a unique style for a single element.

Priority
If one or more styles are applied to one tag then the following priorities are applied:
1. Inline
2. Internal
3. External
For example, if an external stylesheet applies a red background to all h1 elements, but an inline
blue background style is applied to a specific h1 element then its background would be blue.
Similarly, the following priorities are applied:
1. ID
2. Class
3. Tag

Implementation (HTML)
Definition
HTML (HyperText Markup Language) makes use of tags to create the content of a webpage.

Tags
Tags will be opened using < … > and closed using < / … >
<!DOCTYPE html> Defines the document type
<html> Defines an HTML document, indicates the start of a HTML document
<head> Defines information about the document. Anything inserted in here is
usually not displayed on the webpage.
<title> Defines a title for the document. Appears at the top of the browser for
example:

<body> This section is used to store the content of a webpage.

<p> Creates a paragraph in a webpage.
<h1> - <h6> Creates headings in a webpage. H1 is the largest heading size. H2 is the
second largest and so on until size H6.

<a> The tag used to create a hyperlink. There are two examples you should
know:
Hyperlink
<a href=”www.braidhurst.com”> Click here to go to the Braidhurst
Website </a>

Email
<a href=”mailto:teacher@braidhurst.com”> Click to email a teacher </a>
<div> The <div> tag defines a division or a section in an HTML document.
The <div> tag is used to group block-elements to format them with CSS.
Example
<img> Defines an image in an HTML page.
The <img> tag has two required attributes: src and alt.
Src refers to the source of an image, where it can be found.
Alt refers to alternative text that should be displayed if the image cannot
be displayed.

Example
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
<audio> Used to add in audio files to a webpage.
Audio tags are placed around a source tag which will indicate the file(s) to
be used.
Controls specifies that audio controls should be displayed (such as a
play/pause button etc)

Example

<video> Used to add in video files to a webpage.

Video tags are placed around a source tag which will indicate the file(s) to
be used.
Controls specifies that video controls should be displayed (such as a
play/pause button etc)

Example

lists Lists make use of <ul>, <ol> and <li>.

<ul> creates an unordered list where each item in the list is identified using
a bulletpoint.
<ol> creates an ordered list where each item in the list is numbered.
<li> will be used to add in items to the list.

Example
 <li> tags will be surrounded by either <ol> or <ul> tags.

Hyperlinks
 Internal – takes you to a different webpage within the same website
 External – takes you to a different webpage in a different website

Addressing
 Absolute – An absolute page address is an address which specifies exactly the location of a
file on a server, and the server itself.
 Relative – Relative page addressing is different in that it does not state the full URL of the
address. Instead, it references files and folders relative to each other.
Example

An absolute address for the file pitch.jpg would be:

http://northlanarkshire.com/home/images/outdoor/pitch.jpg

A relative address for the file pitch.jpg would be:

home/images/outdoor/pitch.jpg

Implementation (JavaScript)
 Used to add interactivity to a webpage such as
o Videos
o Buttons
 Makes use of two different functions:
o onmouseover – something will happen to an element when the mouse is moved
 over it
o onmouseout – something will happen to an element when the mouse is moved
away from it

Testing
There are four key types of testing that can be applied to a website:
 ensuring that the website matches the design (does it look the same as the wireframe?)
 ensuring links and navigation work correctly (does a hyperlink take you to the correct
page?)
 ensuring media is displayed correctly (does the image appear as it is supposed to?)
 ensuring the website appears consistent (do all pages look the same?)

Evaluation
Ensuring that the website does what it was supposed to do by comparing the completed solution
against the design and analysis, suggesting any improvements that could be made.