Designing and Developing a Website. 6 August Marking Scheme

Size: px

Start display at page:

Download "Designing and Developing a Website. 6 August Marking Scheme"

Lynn Fletcher
6 years ago
Views:

1 Designing and Developing a Website 6 August 015 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:

2 Answer ALL questions Question 1 a) Consider the following statement: Marks 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. 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 () different examples of W3C web standard. Examples include: HTML 5, CSS.1; OWL; and RDF. Note: Credit alternative valid examples. ii) When developing websites, why is it very important to follow W3C web standards? Award 1 mark for each bullet point up to a maximum of 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 Page of 0

3 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). Award 1 mark for each bullet point up to a maximum of 3 marks. 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 Page 3 of 0

4 Question Marks 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> Award ½ marks for correctly identifying each feature up to a maximum of marks. Tag name: em Attribute: style Value: margin:10px Content: concern ii) <area shape="circle" coords="90,50,10" href="zebra.html" alt="zebra" /> Award ½ marks for correctly identifying each feature up to a maximum of 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> Award ½ marks for correctly identifying each feature up to a maximum of 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 Award up to 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. 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 Page 4 of 0

5 Question 3 Marks 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. 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. 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. 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. 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). 4 Total: 10 Marks Page 5 of 0

6 Question 4 Marks a) Consider the following website structure: root North_ America Europe usa.html canada.html UK index.html england.html scotland.html germany.html 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 ii) UK/scotland.html 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? england.html 1 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 Page 6 of 0

7 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 Page 7 of 0

8 Question 5 Marks 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. 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? 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. 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. 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 Page 8 of 0

9 e) The <img> element is used to insert an image into a webpage. Why should the <img> element always feature an alt attribute? 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 Page 9 of 0

10 Question 6 Marks 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 Award 1 mark for each bullet point up to a maximum of 3 marks. 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. Question 6 continue on next page Page 10 of 0

11 b) You have been asked to create an HTML form that will ask the user to respond under the following three categories: 6 1) Name: ) Age: Under 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. The maximum number of marks awarded to this question is 6. Award up to 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 (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 Page 11 of 0

12 Question 7 a) Consider the following HTML and CSS documents: Marks 4 HTML CSS <div class="box1"><div class="box"></div></div> <div class="box3"></div> <div class="box4"></div> div { border:1px solid black; }.box1,.box3,.box4 { width:100px; height:100px; }.box1,.box3 { float:left; }.box{ 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. Question 7 continue on next page Page 1 of 0

13 The maximum number of marks awarded to the question is 4. Award up to 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. Award 1 mark for each bullet point up to a maximum of marks. 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. Award 1 mark for each bullet point up to a maximum of marks. 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. Question 7 continue on next page Page 13 of 0

14 ii) Briefly explain what is meant by a media query and how its use can support responsive web design. Award 1 mark for each bullet point up to a maximum of marks. 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 Page 14 of 0

15 Question 8 a) Briefly explain what is meant by an e-commerce revenue model and briefly discuss FIVE (5) different e-commerce revenue models. Marks 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 Award 1 mark for each bullet point up to a maximum of 5 marks. 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? The maximum number of marks awarded to this question is. 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 () ways wireframe models support the designing of a website. Award 1 mark for each bullet point up to a maximum of 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 Page 15 of 0

Question 9 a) Consider the following screen shot of a website: Marks 8 (http://www.vauxhall.co.uk/vehicles/vauxhall-range/cars/new-astra/features-andspecifications/equipment.

16 Question 9 a) Consider the following screen shot of a website: Marks 8 ( Accessed March 015) 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. Question 9 continue on next page Page 16 of 0

17 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. 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 Page 17 of 0

18 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 () disadvantages of using an approach such as Nielsen s ten heuristics. Marks 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 Google Chrome was the most popular web browser in February 015. 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. Award 1 mark for each bullet point up to a maximum of marks. 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. Question 10 continue on next page Page 18 of 0

19 c) Most modern web browser feature developer tools. State TWO () ways in which developer tools can help web developers when designing a website. Award 1 mark for each bullet point up to a maximum of marks. 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 End of Examination Paper Page 19 of 0

20 Learning Outcomes matrix Question Learning Outcomes assessed 1 5, 6 Yes, Yes 3, Yes 4 Yes 5 3 Yes 6, 3, 5 Yes 7 Yes 8 6 Yes 9 1,, 5 Yes 10 1,, 4, 5 Yes Grade descriptors Marker can differentiate between varying levels of achievement Learning Outcome Pass Merit Distinction Design a website to address looselydefined requirements Provide adequate design to address the specification Use web development tools to build (X)HTMLand CSS-based websites to address well-defined specifications Understand the technology and tools needed to use multimedia in the context of a website Develop test strategies and apply these to a website Understand the need for Web standards Understand the concepts associated with using the Internet and the World Wide Web for business Demonstrate adequate and appropriate ability to build artefact Demonstrate adequate level of understanding Show adequate development Demonstrate adequate level of understanding Demonstrate adequate level of understanding Provide detailed and appropriate design to address the specification Demonstrate sound and consistently appropriate ability to build artefact Demonstrate robust level of understanding Show sound and appropriate development Demonstrate robust level of understanding Demonstrate robust level of understanding Provide wholly appropriate and innovative design that meets the specification Demonstrate exceptional ability to build artefact Demonstrate highly comprehensive level of understanding Show innovative and highly appropriate development Demonstrate highly comprehensive level of understanding Demonstrate highly comprehensive level of understanding Page 0 of 0

Designing and Developing a Website. December Sample Exam Marking Scheme

Designing and Developing a Website December 2015 Sample Exam 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