designing and developing a website 6 august 2015 marking ...€¦ · designing and developing a...

Designing and Developing a Website

6 August 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:

of 20

Designing and Developing a Website © NCC Education Limited 2015

Answer ALL questions

Marks Question 1 a) Consider the following statement:

The Internet and the World Wide Web (WWW) are simply different terms for describing the same thing.

Is this statement true or false? You should support your choice with ONE (1) reason.

2

Award 1 mark for stating false. Awarding up to 1 mark for the explanation, which can include:

The WWW is part of the Internet.

The Internet is much more than the WWW. Note: Credit alternative valid explanations.

b) InkML is an example of World Wide Web Consortium (W3C) standards. i) Provide TWO (2) different examples of W3C web standard. 2

Examples include: HTML 5, CSS 2.1; OWL; and RDF.

Note: Credit alternative valid examples.

ii) When developing websites, why is it very important to follow W3C web standards?

2

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

W3C standards are created to support a wide range of web users.

If we follow W3C web standards we can be confident our websites will be accessible to as many web users as possible.

Question 1 continues on next page

of 20


c) Briefly explain what is meant by accessibility in the context of web design and provide THREE (3) reasons for designing websites that are accessible.

4

Accessibility is about designing websites that people with disabilities can use (1 mark).


Disabled users make up a significant proportion of web users.

Accessible sites also assist any users that may not be registered as disabled e.g. elderly web users.

Many countries have legal requirements to support disabled users.

Accessible sites are often easier to use for users with mobile devices.

Total: 10 Marks

of 20


Marks Question 2 a) Look at the following HTML elements. For each one identify the tag name, the

attribute(s), the value(s) and the content of the element

i) <em style=”margin:10px”>concern</em> 2

Award ½ marks for correctly identifying each feature up to a maximum of 2 marks.

Tag name: em Attribute: style Value: margin:10px Content: concern

ii) <area shape="circle" coords="90,50,10" href="zebra.html" alt="Zebra" /> 2

Award ½ marks for correctly identifying each feature up to a maximum of 2 marks.

Tag name: area Attributes: shape, coords, href, alt Values: circle, 90,50,10, zebra.html, zebra Content: No content <area> is an empty element

iii) <q class=”positive”>It was the best product ever</q> 2

Award ½ marks for correctly identifying each feature up to a maximum of 2 marks. Tag name: q Attribute: class Value: positive Content: It was the best product ever

b) HTML elements can be nested. Briefly explain what is meant by the term nesting 2 Award up to 2 marks for an accurate description.

Nesting is when one element is placed inside another. Note: Award 1 mark for a partially correct answer.

c) Briefly explain the purpose of a document type declaration in an HTML document

and outline where it should appear in a web page.

2

A document type declaration is a line of code that specifies which version of HTML the page has been written in. Browsers use this information to display the page correctly. (1 mark) It should always be the first line of code in an HTML document. (1 mark)

Total: 10 Marks

of 20


Marks Question 3 a) Consider the following CSS that has been applied to a webpage.

*{ padding:0px; } #intro p{ color:blue; } .content{ border:1px solid black; }

This is the only CSS that has been applied to the document. For each statement below, state if it is true or false. You should support your choice with an answer.

i) All the paragraphs in the document will have a padding of 0px. 2 True. (1 mark) The * selector means select everything in the document.

This will include paragraphs and their padding will be set to 0px (1 mark)

ii) All the paragraphs will be coloured blue. 2 False (1 mark) The rule that sets paragraphs to blue uses the

descendent selector. Only paragraphs nested inside the element with the id of intro will be coloured blue (1 mark)

iii) None of the paragraphs will have a visible border. 2 False (1 mark) The rule for specifying the border uses the class

selector. It is possible for some or all of the paragraphs to feature this class. These paragraphs will then have the visible border (1 mark)

b) There are a number of different ways of applying CSS to a webpage, an external

style sheet, an embedded style sheet using the <style> tags, and inline styles applied using the style attribute. Which approach is usually considered the most useful? Justify your answer.

4

An external style sheet (1 mark). A single CSS file can be applied to all the pages in a site making this approach the most efficient (1 mark). The design of the site can also be easily modified by changing a single CSS file (1 mark). It keeps the presentation separate from mark-up/content (1 mark).

Total: 10 Marks

of 20


Marks Question 4 a) Consider the following website structure:

i) A hyperlink in the page germany.html links to the page scotland.html. What will be the value of the href attribute for this hyperlink?

1

UK/scotland.html ii) A hyperlink in the page scotland.html links to the page england.html. What

will be the value of the href attribute for this hyperlink? 1

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

be the value of the href attribute for this hyperlink? 1

../../index.html iv) A hyperlink in the page index.html links to the page canada.html. What will

be the value of the href attribute for this hyperlink? 1

North_America/canada.html b) Consider the following piece of HTML code:

<a href="history.html" accesskey="h">Company History</a>

This HTML features the accesskey attribute.

i) Briefly explain what is meant by an access key. 1 Access keys allow web developers to associate specific keys with

HTML elements. Using an access key, users can jump to specific parts of a web page.

Question 4 continues on next page

root

North_ America

usa.html

canada.html

Europe

UK

germany.html

index.html

scotland.html

england.html

of 20


ii) What is a modifier key? 1 A modifier key is used to activate the access key e.g. Alt is pressed

along with the access key to specify that the user wants to activate the access key.

iii) Which groups of users can benefit from the use of access keys? 1 Any users that navigate websites with a keyboard and not a mouse.

This includes users with visual impairments that may be using a screen reader, and users with motor disabilities that may not be able to use a mouse.

iv) State THREE (3) problems associated with the use of access keys. 3 Different web browsers use different modifier keys e.g. Internet

Explorer use Alt, Firefox uses Alt and Shift.

There is not a standard way of letting users know what the access keys are.

Access keys can come into conflict with browser shortcuts e.g. Alt+f is the shortcut for the file menu in Internet Explorer.

Total: 10 Marks

of 20


Marks Question 5 a) Images can be inserted using data URIs. Briefly describe what is meant by a URI

and outline ONE (1) potential benefit of using data URIs. 2

Award 1 mark for the description:

URI is image data embedded directly in HTML or CSS. Award 1 mark for an example such as:

Images created in this way have the advantage that they limit the number of HTTP requests the browser has to make as it doesn’t have to request a separate image file.

This can speed up the loading of a web page.

b) What is a codec? Why do we need to use codecs to deliver audio and video over

the web?

2

Award 1 mark for the description

Codec is a compressor/decompressor

Award 1 mark for either bullet point

A codec reduces the size of large video and audio files. A codec is also needed to decompress the audio/video file so that it can be played.

Without the use of codecs it would be difficult to transfer large files such as video and audio over the Internet.

c) State ONE (1) feature of 8-bit PNG images and outline which types of images

this file format is suited to presenting. 2

8-bit PNG images feature a limited range of colours and typically have a

small file size (1 mark). They are suited to displaying any images that have a limited range of colours, for example logos, diagrams, charts, line drawings (1 mark).

d) State ONE (1) feature of JPEG images and outline which types of images this file

format is suited to presenting. 2

JPEG images can feature millions of colours but typically have a larger file size than the equivalent 8-bit PNG image (1 mark). They are suited to images that feature many different colours. This usually means photographic type images (1 mark).

Question 5 continue on next page

of 20


e) The <img> element is used to insert an image into a webpage. Why should the <img> element always feature an alt attribute?

2

It should feature this attribute to support accessibility (1 mark). The alt attribute specifies alternative text. This is text that will be read out by screen readers that can not display the image (1 mark).

Total: 10 Marks

of 20


Marks Question 6 a) Using HTML tables, it is possible to create grids that can be used to control the

layout of a web page.

i) Provide ONE (1) alternative to using tables for page layout. 1 CSS

Note: Credit alternative valid examples

ii) State THREE (3) disadvantages of using tables as a page layout device.

3


Complex tables are time consuming to code.

They often cause accessibility problems for users with screen readers.

Can cause problems for users with small screen devices. They can resize poorly for small screens, especially if they feature many columns.

Maintenance - updating the design of a site requires changing the HTML in every page in the site.


of 20


b) You have been asked to create an HTML form that will ask the user to respond under the following three categories:

1) Name: 2) Age:

Under 18

18 or over 3) Languages spoken:

Mandarin

Spanish

English

For each of these three categories, identify which type of form control should be used when creating the HTML page.

6

The maximum number of marks awarded to this question is 6. Award up to 2 marks for each question. Question 1 (Name) - A single line text box (1 mark). The user’s name is short enough to fit in a single line text box (1 mark).

Question 2 (Age) - Radio buttons (1 mark). The user is required to select a single option from a list (1 mark).

Question 3 (Languages Spoken) – Checkboxes (1 mark). The user needs to be able to select multiple options from a list (1 mark).

Total: 10 Marks

of 20


Marks Question 7 a) Consider the following HTML and CSS documents:

HTML

<div class="box1"><div class="box2"></div></div> <div class="box3"></div> <div class="box4"></div>

CSS

div { border:1px solid black; } .box1, .box3, .box4 { width:100px; height:100px; } .box1, .box3 { float:left; } .box2{ background-color:black; float:right; width:50px; height:50px; } .box4{ clear:both; }

The CSS has been applied to the HTML. Draw a diagram showing how this page will appear when rendered in a browser.


4

of 20


The maximum number of marks awarded to the question is 4. Award up to 2 marks for each bullet point:

The <div> elements are approximately the correct size and shape

The elements have the correct position and layout (student has understood the effect of the float and clear properties).

b) An alternative to using floats is to use either the flex-box or grid layout CSS modules. State ONE (1) advantage and ONE (1) disadvantage of using either the flex-box or grid layout.

2


Advantage - Simpler CSS that is easier to write.

Disadvantage - Browser support. There isn’t widespread browser support for these new CSS properties.

c) Responsive web design involves creating websites that work effectively across a

wide range of different devices and screen sizes. Two key aspects of responsive web design are fluid grids and the use of media queries.

i) Briefly explain what is meant by a fluid grid and how its use can support responsive web design.

2


Fluid grids are page layouts defined using CSS that size elements using relative units of measure such as ems or percentages instead of fixed units such as pixels.

They assist responsive web design as they allow the page design to re-size for different sized screens.


of 20


ii) Briefly explain what is meant by a media query and how its use can support responsive web design.

2


Media queries are rules that specify when certain CSS rules should be applied.

Media queries can use the width of the browser window as a rule for applying CSS and supports responsive web design as different CSS rules can be applied for small and large screen devices.

Total: 10 Marks

of 20


Marks Question 8

a) Briefly explain what is meant by an e-commerce revenue model and briefly discuss FIVE (5) different e-commerce revenue models.

6

The maximum number of marks awarded to this question is 6. Award 1 mark for the definition.

A revenue model describes how a business will generate income


Advertising Revenue Model. Revenue is generated from advertisers who pay to advertise on a website.

Sales Revenue Model. A business sells products through a website.

Subscription Revenue Model. Users of a website are charged a fee to access content.

Transaction Fee Revenue Model. A website receives a fee for acting as an intermediate in a transaction.

Affiliate Revenue Model. A website links to an affiliate site. If a user ‘clicks through’ to the affiliate site and makes a purchase, the company receives a referral fee.

b) i) What are wireframe models? 2

The maximum number of marks awarded to this question is 2.

Wireframe models are drawings that represent pages in a website.

Wireframe models show details such as navigation options and content of pages. They do not represent visual features of a page such as colours or typography.

ii) Outline TWO (2) ways wireframe models support the designing of a website. 2

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

Wireframe models are useful as page level plans. Using a wireframe model as a guide, a designer knows which page elements are required in a page (e.g. navigation options) and if there will be video content or an image on the page.

A series of wireframe models can used as a basis for usability testing early in the development of a site without going to the time and expense of developing a fully working version of the site.

Total: 10 Marks

of 20


Marks Question 9 a) Consider the following screen shot of a website:

(http://www.vauxhall.co.uk/vehicles/vauxhall-range/cars/new-astra/features-and-specifications/equipment.html: Accessed March 2015) Analyse this page design from a usability point of view and briefly outline FOUR (4) design features that relate to usability. 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; such as features that could be confusing for users and impair the usability of the site. For each design feature explain why it is a good/bad design feature.


8

http://www.vauxhall.co.uk/vehicles/vauxhall-range/cars/new-astra/features-and-specifications/equipment.html

http://www.vauxhall.co.uk/vehicles/vauxhall-range/cars/new-astra/features-and-specifications/equipment.html

of 20


The maximum number of marks awarded to this question is 8. For each design feature, award 1 mark for listing the design feature and 1 mark for the explanation. Examples Good design features

The navigation bar features a ‘you are here’ indicators on the current navigation options ‘New Vehicles’ and ‘Features and Specifications’, and ‘Equipment’. This clearly shows the user which section of the site they are viewing.

The page title ‘Vauxhall Astra Equipment’ is the largest text. This will stand out for users letting them know which page they are viewing.

Bad Design features

The logo doesn’t follow website conventions. It is in the top-right corner. Most users would expect this to be in the top-left corner.

There appear to be two global navigation bars, one at the very top of the page and the one where ‘new vehicles’ is highlighted. It isn’t clear how content has been split between these navigation bars. For example, both appear to feature very similar options in ‘Quote’ and ‘Offers and Finance’

b) Briefly explain what is meant by ‘breadcrumb’ navigation and state ONE (1) way

in which it can help improve the usability of a website. 2

Award 1 mark for the definition of breadcrumb:

Breadcrumb navigation shows the user their position in the site structure. It shows the sub-section and section the current page.

Award 1 mark for an example, such as:

It is useful to users as it allows users to re-trace their steps when navigating a large site.

Total: 10 Marks

of 20


Marks Question 10 a) The usability of a website can be evaluated using design principles such as

Nielsen’s ten Heuristics. State ONE (1) advantage and TWO (2) disadvantages of using an approach such as Nielsen’s ten heuristics.

3

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

It is quick and easy to carry out the evaluation. A single person can carry out the evaluation in a short period of time.

Disadvantage

It doesn’t involve real users performing tasks with the site.

The only way to really know if a site is usable is to observer real users attempting to perform tasks, a usability test.

b) According to Stat Counter http://gs.statcounter.com/ Google Chrome was the

most popular web browser in February 2015.

i) Identify THREE (3) other web browsers with significant market share. 3 Internet Explorer, Firefox, Safari

Note: Credit alternative valid examples

ii) Briefly explain why using a range of web browsers can cause problems for

web designers. 2


Different web browsers support different CSS and HTML features and implement features in different ways.

A design which works well in one browser may not work at all in a different browser.


http://gs.statcounter.com/

of 20


End of Examination Paper

c) Most modern web browser feature developer tools. State TWO (2) ways in which developer tools can help web developers when designing a website.

2


Developer tools will report errors in pages such as incorrectly structured HTML or CSS

Developer tools allow us to inspect page elements to see exactly which CSS properties are being applied to elements. Individual properties can be switched on and off allowing us to easily see the effect of CSS rules that have been written.

Developer tools can be used on other websites to inspect the HTML and CSS. This is a good way for designers to learn new techniques.

Total: 10 Marks

of 20


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




designing and developing a website 6 august 2015 marking ...€¦ · designing and developing a...

Documents