New Designing and Developing a Website 7 May 2015 Marking Scheme · 2016. 12. 2. · Designing and Developing a Website 7 May 2015 Marking Scheme This marking scheme has been prepared

Designing and Developing a Website

7 May 2015

Marking Scheme

This marking scheme has been prepared as a guide only to markers. This is not a set of model answers, or the exclusive answers to the questions, and there will frequently be alternative responses which will provide a valid answer. Markers are advised that, unless a question specifies that an answer be provided in a particular form, then an answer that is correct (factually or in practical terms) must be given the available marks. If there is doubt as to the correctness of an answer, the relevant NCC Education materials should be the first authority.

Throughout the marking, please credit any valid alternative point.

Where markers award half marks in any part of a question, they should ensure that the total mark recorded for the question is rounded up to a whole mark.

Marker's comments:

Moderator's comments:

Mark:

Moderated mark:

Final mark:

Penalties applied for academic malpractice:

Page 2 of 22

Designing and Developing a Website © NCC Education Limited 2015

Answer ALL questions

Marks Question 1 a) The W3C stands for the World Wide Web Consortium. A consortium is a

collection of different individuals, companies and organisations working together for a common purpose. Why is it important that the W3C is a consortium? Award 1 mark for each bullet point up to a maximum of 3 marks.

The members of the W3C consortium include major technology companies such as Apple and Google.

When the W3C agrees new web technologies they have the support of the consortium members, which means that new web technologies will be supported by a wide range of web browsers and devices.

The webpages we create using these technologies will work across many different platforms.

3

b) A focus of accessible web design is to support users with deafness and hearing

loss. State THREE (3) specific actions that web designers can take to support users with deafness and hearing loss. Provide alternatives for audio/video (1 mark) and audio (1 mark) content. This can be in the form of transcripts for any audio content on a website e.g. podcasts and captions or subtitles for video content (1 mark). Note: Credit valid alternative answers. e.g. the point that deaf users often have sign language as their first language. Therefore the written content of a website, not the first language for deaf users, should be presented in a concise, clear style.

3

c) Consider the following diagram of the WWW:

Figure 1: A model of the WWW

i) What does HTTP stand for? Hypertext Transfer Protocol

1

Question 1 continues on next page

Page 3 of 22


ii) Briefly describe the roles of the client and server computers. Award 1 mark for each bullet point up to a maximum of 2 marks.

Clients connect to web servers, make requests for web pages and display web pages for web users.

Web servers store web pages and send web pages to the client.

2

iii) The diagram represents the client machine as a desktop computer. Equally it

could be a laptop or a smartphone. State ONE (1) other device that could be categorised as a client in this model of the WWW.

1

Any suitable device e.g. tablet, smart watch, games console Total: 10 Marks

Page 4 of 22


Marks Question 2 a) Consider the following HTML document:

<!DOCTYPE HTML> <html> <head> <title>Add a title here</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <section> <h1>Welcome</h1> <p>Lorem ipsum dolor sit amet.</p> <section> <h2>About Us</h2> <p>Ut enim ad minim veniam.</p> </section> <section> <h2>Latest News</h2> <p>Duis aute irure dolor in reprehenderit.</p> </section> <section> </body> </html>

This page contains examples of key HTML concepts. Briefly explain what is meant by each concept listed below and provide ONE (1) example of the concept from the HTML document shown above. Award 1 mark for a correct definition and 1 mark for correctly identifying an example from the above document.

i) Tag

Tag – instructions to the browser that specify the meaning of content e.g. <section>, <h2>, <p>

2

ii) Content Content – the text the user sees when they view the page e.g. Latest News


2

Page 5 of 22


iii) Attribute Attribute – defines additional information for a tag e.g. http-equiv is an attribute of the meta tag

2

iv) Empty Element Empty Element – an element with no closing tag and no content e.g. <meta> is an empty element

2

v) Nesting Nesting – the application of multiple tag effects. When one element is placed inside another e.g. The elements <h2> and <p> are nested inside the <section> element

2

Total: 10 Marks

Page 6 of 22


Marks Question 3 a) The following CSS has been applied to the HTML document shown in Question

2:

*{ font-family:Verdana; } section p{ background-color:red; } section section p { color:blue; }

Describe the appearance of the text:

i) Welcome Welcome – Verdana font

1

ii) Duis aute irure dolor in reprehenderit. Duis aute irure dolor in reprehenderit. – Verdana font, background colour of red, and font colour of blue

1

iii) Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. - Verdana font, background colour of red

1

b) The W3C specifies two technologies for web page construction; HTML and CSS.

i) Describe the different roles of HTML and CSS. Award 1 mark for each bullet point up to a maximum of 2 marks.

HTML defines the structure and/or meaning of content.

CSS defines the presentation of the content.

2

ii) How does the use of two separate technologies support accessibility? Separating presentation from content supports accessibility because even if a user can’t view a page because of its presentation, the page will still be understandable because the structure of the document is specified using a separate technology. Note: Award 1 mark for a partially correct answer.


2

Page 7 of 22


c) Consider the following HTML element:

<p style="line-height:2.0em">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>

This is an example of inline CSS.

i) Why is the use of inline CSS often considered bad practice in web design? Award 1 mark for each bullet point up to a maximum of 1 mark.

The use of inline CSS involves mixing CSS with HTML. This goes against the basic principles of the two technologies.

This is a very inefficient method for applying CSS as rules have to be written for every individual element.

1

ii) State TWO (2) alternative ways of specifying CSS for a webpage. External CSS (1 mark) and embedded or internal CSS (1 mark)

2

Total: 10 Marks

Page 8 of 22


Marks Question 4 a) Consider the following web site structure:

i) A hyperlink in the page pug.html links to the page sheltie.html. What will be

the value of the href attribute for this hyperlink? sheltie.html

1

ii) A hyperlink in the page doberman.html links to the page whippet.html. What

will be the value of the href attribute for this hyperlink? ../hunting/whippet.html

1

iii) A hyperlink in the page index.html links to the page pointer.html. What will be

the value of the href attribute for this hyperlink? working/hunting/pointer.html

1

iv) A hyperlink in the page pointer.html links to the page index.html. What will be

the value of the href attribute for this hyperlink? 1

../../index.html


root

companion

pug.html

sheltie.html

working

hunting

guard

index.html

whippet.html

pointer.html

doberman.html

Page 9 of 22


b) Consider the following HTML 5 code. It represents a navigation bar with an image for each hyperlink:

<div id="nav"> <a href="home.html"><img src="home.png" alt="home button"></a> <a href="about.html"><img src="about.png" alt="about button"></a> <a href="contact.html"><img src="contact.png" alt="contact button"></a> <a href="blog.html"><img src="blog.png" alt="blog button"></a> </div>

i) Why is using images in this way considered bad practice? 3 Award 1 mark for each bullet point up to a maximum of 3 marks.

This is an example of an image inserted into HTML for design purposes. Images should only be inserted into HTML if they are part of the content of the page. For example, an illustrative photograph.

The content of the site – the links should be plain text. This assists search engines and improves the accessibility of the site.

Using text instead of images will also improves the download speed of the page as images typically have larger file size than text and using images adds to the number of requests the browser makes. Again this impacts upon download speed.

ii) Re-write the HTML code to show how it might be better structured. 3

<nav> <ul> <li><a href="home.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="contact.html">Contact Us</a></li> <li><a href="blog.html">Blog</a></li> </ul> </nav>

Award 1 mark for each bullet point up to a maximum of 3 marks.

Replacing the images with text.

Using the nav element.

Structuring the links as a list.

Total: 10 Marks

Page 10 of 22


Marks Question 5 a) Both 8-bit PNG and JPEG images can be displayed in web pages. Explain the

difference between 8-bit PNG and JPEG images and state which types of images each file format is suited to displaying.

4


8-bit PNGs display a limited number of colours, and are usually smaller in filesize than a JPEG image.

Due to the limited number of colours, 8-bit PNGs are suited to displaying images such as icons, logos and diagrams.

JPEG images can display millions of colours and tend to have a larger filesize that the equivalent 8-bit PNG.

JPEGs are suited to images that feature many different colours such a photographs.

b) An alternative to using PNG or JPEG images is to use SVG (Scalable Vector

Graphics), an XML based, vector image format. State TWO (2) potential advantages of using SVG.

2


SVG is vector based. The images will re-size with no loss of quality.

SVG is XML, a text based format. This will reduce the total size of a webpage and improve the download speed.

SVG can feature labels and descriptions; these can be used by search engines to help with the ranking of pages.


Page 11 of 22


c) Consider the following HTML <object> tag. It is used to embed the Adobe® Flash® player into a webpage. Code like this is often used to display video in a webpage.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400" id="movie_name" align="middle"> <param name="movie" value="my-movie.swf"/> <object type="application/x-shockwave-flash" data="movie_name.swf" width="550" height="400"> <param name="movie" value="my-movie.swf"/> <a href="http://www.adobe.com/go/getflash"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/> </a> </object> </object>

4

The video element feature of HTML 5 means that developers may no longer be dependent on using the <object> tag to insert media. State TWO (2) advantages and TWO (2) disadvantages of this approach to HTML 5.

Award 1 mark for each bullet point up to a maximum of 4 marks. Advantages

Not reliant on 3rd party plug-ins and technologies such as Flash.

Simpler code.

Disdvantages

It is a new technology so won’t have support from older browsers.

Not all browsers support the same video codecs.

Total: 10 Marks

Page 12 of 22


Marks Question 6 a) Consider the following HTML code. You should recognise most of the code. The

stands for non breaking space. The browser simply inserts a space “ “.

<table border="1"> <tr> <th> </th> <th> </th> <th> </th> <th> </th> </tr> <tr> <td> </td> <td rowspan="3"> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td colspan="2"> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>

i) Sketch out what this table will look like when rendered in a browser.

Award 1 mark for the correct number of rows/columns. Award 1 mark for the correct rowspanning and column spanning.

2


Page 13 of 22


ii) State ONE (1) difference between <th> and <td> elements and briefly explain how the use of <th> element supports accessibility. Both <th> and <td> element define a table cell. <th> elements define cells that are table headers, titles for the columns (1 mark). <td> elements define table data cells, the actual data in a table. <th> elements assist accessibility as screen readers will read out the content of <th> elements, the title of the column, before each <td> is read out (2 marks).

3

iii) This table features a border attribute. What might be a more effective way of

specifying the border for an HTML table? CSS

1

b) The HTML 5 specification specifes some new attributes for HTML <input>

elements. Describe the purpose of each attribute listed below in relation to the HTML 5 specification.

i) Required Required – indicates that the user must enter something into the form control. An error message will appear if the user attempts to submit the form without entering data.

1

ii) Autofocus Autofocus – When the page loads, the user’s cursor will automatically be placed in this element, ready for the user to enter data.

1

iii) Autocomplete Autocomplete – Indicates that if the user has previously filled in a similar form control, the browser will automatically enter a value based on the user’s previously entered value.

1

iv) Placeholder Placeholder – Specifies text that will appear in a text box to indicate its purpose. When the user focuses on the textbox the placeholder text will disappear.

1

Total: 10 Marks

Page 14 of 22


Marks Question 7 a) Many web developers never use id selectors in their CSS. i) What type of selector would a web developer use instead, when they prefer

not to be limited by simple tag selectors? Class selector

1

ii) Why is not using id selectors considered good practice?


This is considered good practice as more than one element in an HTML page can feature the same class value. The same isn’t true for id values.

This means that CSS rules defined with the class selector can be re-used for many different elements. This makes the CSS code more efficient and maintainable.

2


Page 15 of 22


b) Consider the following CSS and HTML code. The CSS has been applied to the HTML. Sketch out what the page will look like when rendered in a browser.

header{ outline:1px solid black; height:50px; width:100%; float:left; } nav{ outline:1px solid black; height:50px; clear:left; width:25%; float:left; } section{ outline:1px solid black; height:50px; width:75%; float:left; } footer{ outline:1px solid black; height:50px; clear:left; width:100%; }

<body> <header>1</header> <nav>2</nav> <section>3</section> <footer>4</footer> </body>

2

1

2 3

4

Award 2 marks for a completely accurate sketch. Note: Award 1 mark if the sketch demonstrates the right idea but contains some errors e.g. columns sizes are incorrect.


Page 16 of 22


c) The above example uses percentages as a unit. What are the potential advantages of using percentages as units for specifying the width of elements in a page layout?


Percentage values are calculated based on the browser window size. This means that as the browser resizes, so too does the page design.

The advantage this offers is that the design will work across a wide range of screen sizes.

2

d) The following HTML code shows the top part of an HTML document:

<!DOCTYPE HTML> <html> <head> <title>Homepage</title> <link rel="stylesheet" media="(max-width: 480px)" href="style1.css"> <link rel="stylesheet" media="(min-width: 480px)" href="style2.css"> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> …

Identify and briefly describe TWO (2) link elements in this document and provide ONE (1) reason why there are these two link elements. Award 1 mark for each bullet point up to a maximum of 3 marks.

One CSS file, style1.css, will be used for small screens, those with a maximum width of 480px.

The other CSS file, style2.css, will be used for large screens, those with a width greater than 480px.

This means that different designs can be specified for mobile (small screen) and desktop (large screen) devices.

3

Total: 10 Marks

Page 17 of 22


Marks Question 8 a) In the user centred web design process, research is often conducted into the

intended users of a website. State THREE (3) different techniques for finding out about the intended users of a website. Award 1 mark for each bullet point up to a maximum of 3 marks. • Server logs • Surveys • Interviews • Focus groups

3

b) B2B is the most common form of eCommerce.

i) What does B2B stand for? B2B – Business to Business

1

ii) State THREE (3) other categories of eCommerce and provide ONE (1) example of a type of website that fits each category. Award 1 mark for each bullet point up to a maximum of 3 marks.

B2C – Business to Consumer

C2C – Consumer to Consumer

P2P – Peer-to-Peer

M-Commerce Award 1 mark for each bullet point up to a maximum of 3 marks.

B2C – Online shops /Social networking sites that generate revenue through advertising

C2C - Auction websites such as eBay where consumers sell items they own to other consumers

P2P - Film studios distributing films via peer to peer networks

M-Commerce – Mobile phone apps e.g. an iPhone app for eBay or Amazon

6

Total: 10 Marks

Page 18 of 22


Question 9 a) Consider the following screen shot of a website.

Source: http://www.whittard.co.uk/tea/type/black-tea/english-breakfast-large-leaf-teabags.htm (accessed: Jan 2015).


8

http://www.whittard.co.uk/tea/type/black-tea/english-breakfast-large-leaf-teabags.htm

http://www.whittard.co.uk/tea/type/black-tea/english-breakfast-large-leaf-teabags.htm

Page 19 of 22


Analyse this page design from a usability point of view. You may describe positive design features that enhance the usability of the page. You may also describe aspects that you think are bad design features; e.g. features that could be confusing for users and impair the usability of the site. Briefly outline FOUR (4) design features. For each design feature explain why it is a good/bad design feature. Award 1 mark for the design feature and 1 mark for the explanation. For the following points: Examples Good design features

The page has been split into clear areas [1 mark] with good use of white space to separate different parts of the page [1 mark]

The page title ‘English Breakfast Large Leaf Tea Bags’ is large and prominent [1 mark] This, along with the large image, immediately tells the user the content of the page they are viewing [1 mark].

Breadcrumb navigation [1 mark] shows the users position in the site hierarchy and easy access back to other sections or the homepage [1 mark]

The site logo follows website conventions [1 mark], it is visually prominent, and is clearly visible in the top-right of the page [1 mark].

Bad design features

The site may benefit from a ‘You are here’ indicator on the main navigation bar (1 mark); this would clearly show the user they are in the Tea section (1 mark).

Some text is small and in caps (1 mark). It may be difficult for some users to read (1 mark).

Note: Please credit sensible answers that are based on established web design principles.

b) Card sorting involves giving potential users of a website a collection of labels and

asking them to organise them into groups and sub-groups. How is this useful in a web design project?

2


Card sorting can be a good way of seeing how users understand the structure of content in a website.

The groups users create can be used to define the site structure and the global navigation options in a website.

Total: 10 Marks

Page 20 of 22


Marks Question 10 a) i) What is meant by validating a webpage?

Validating a webpage means checking it obeys all the rules of a mark-up language e.g. HTML 5

1

ii) Why is it considered good practice to validate webpages? Award 1 mark for each bullet point up to a maximum of 2 marks.

It is considered good practice as W3C specifications such as HTML 5 are designed to support a wide range of users.

If a webpage obeys the rules of the W3C specification it is the starting point for ensuring the pages are widely usable.

2

b) Usability testing involves getting potential users of a website to perform typical

tasks using a website or website design.

i) Usability testing is best done as part of an iterative design process. Briefly explain what is meant by an iterative design process. Award 1 mark for each bullet point up to a maximum of 2 marks.

Testing isn’t something that is done once the web project has been completed. It should be done throughout the design process.

The designs or site should be tested, and using the results of the test, the design should be improved and tested again.

2

ii) Why should members of the web development team not be subjects for usability tests? Award 1 mark for each bullet point up to a maximum of 2 marks.

Members of the web development team will be too familiar with the website content and design.

Testing should be done with users that have no previous experience of the site as this will more accurately reflect the site’s real use.

2

Page 21 of 22


End of Examination Paper

c) Web Accessibility Evaluation Tool (WAVE©) is an online tool that can check the accessibility of a website. State TWO (2) advantages and ONE (1) disadvantage of using a tool like WAVE? (WAVE copyright is © 2014 – WebAIM) Award 1 mark for each bullet point up to a maximum of 3 marks. Advantages

Speed. A tool can check HTML code automatically using accessibility principles that would take a human much longer to conduct

No chance of human error. It is possible that real person performing the same checks would miss some potential problems

Limitations

The limitation is that tools like WAVE are still using principles of accessibility. The only way to really know if a design is accessible is by testing with real users.

3

Total: 10 Marks

Page 22 of 22


Learning Outcomes matrix

Question Learning Outcomes assessed

Marker can differentiate between varying levels of achievement

1 5, 6 Yes

2 2 Yes

3 2 Yes

4 2 Yes

5 3 Yes

6 2, 3, 5 Yes

7 2 Yes

8 6 Yes

9 1, 2, 5 Yes

10 1, 2, 4, 5 Yes

Grade descriptors

Learning Outcome Pass Merit Distinction

Design a website to address loosely-defined requirements

Provide adequate design to address the specification

Provide detailed and appropriate design to address the specification

Provide wholly appropriate and innovative design that meets the specification

Use web development tools to build (X)HTML- and CSS-based websites to address well-defined specifications

Demonstrate adequate and appropriate ability to build artefact

Demonstrate sound and consistently appropriate ability to build artefact

Demonstrate exceptional ability to build artefact

Understand the technology and tools needed to use multimedia in the context of a website

Demonstrate adequate level of understanding

Demonstrate robust level of understanding

Demonstrate highly comprehensive level of understanding

Develop test strategies and apply these to a website

Show adequate development

Show sound and appropriate development

Show innovative and highly appropriate development

Understand the need for Web standards




Understand the concepts associated with using the Internet and the World Wide Web for business




Documents

New Designing and Developing a Website 7 May 2015 Marking Scheme · 2016. 12. 2. · Designing and Developing a Website 7 May 2015 Marking Scheme This marking scheme has been prepared