Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
MARKING SCHEME
This Marking Scheme has been prepared as a guide only to markers. This is not a set of model answers, nor is the Marking Scheme exclusive, for there will frequently be alternative responses which will provide a valid answer. Unless a question specifies that an answer be produced 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 and associated module textbook should be the first authority.
Notice to Markers Where markers award half marks in any part of a question they should ensure that the total mark recorded for a task is rounded up to a whole mark.
ii)
iii) What are W3C standards? Provide an example of a W3C standard? Specifications or descriptions of web technologies (1 mark) e.g. XHTML 1.0 Strict/CSS 2.1 (1 mark) b)
Figure 1 Simple Model of the WWW The above diagram shows a simple model of how the WWW works. Explain the different roles of client and the web server. Clients connect to web servers, make requests for web pages and display web pages for web users (1 mark). Web servers store web pages and send web pages to the client (1 mark). c) In the context of web design what is meant by accessibility? Give THREE (3) reasons for designing websites so they are accessible. Accessibility is about designing websites that people with disabilities can use (1 mark) Any three of the following (3 marks) Disabled users make up a significant proportion of web users Accessible sites assist older web users Many countries have legal requirements to support disabled users Accessible sites assist mobile users 4
Total 10 Marks
Page 2 of 12
Designing and Developing a Website September 2012 Final NCC Education Ltd 2012
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) <acronym title="Body Mass Index">BMI</acronym> Tag name: acronym Attributes: title Values: Body Mass Index Content: BMI (2 marks) <col span="2" style="background-color:yellow"/> Tag name: col Attributes: span, style Values: 2, background-color:yellow Content: No content its an empty element (2 marks) 2
ii)
b) HTML documents should always contain the following elements: A Document Type Declaration A <head> element A <body> element Describe the purpose of each of these elements. The document type declaration specifies the version of HTML that the page uses (1 mark) The <head> element provides information about the document (1 mark) The <body> element encloses the page contents (1 mark) c) All pages should also specify a <title> element. Where is the title visible when the page is viewed in a browser? Why is it important to specify a meaningful title for web pages? In the title bar of the browser or tab, not on the page (1 mark) Two of the following (2 marks) Used by search engines Used when bookmarking Used when accessing the browser history
Total 10 Marks
Page 3 of 12
Designing and Developing a Website September 2012 Final NCC Education Ltd 2012
Marks QUESTION 3 a) Name the THREE (3) different ways of applying CSS to a webpage? Which approach to applying CSS is usually considered the most useful? Justify your answer. An external CSS (1 mark) An embedded CSS (1 mark) Inline CSS (1 mark) An external CSS is the most useful (1 mark). A single CSS file is applied to all the pages in a site (1 mark). The design for the entire site can be changed by modifying a single CSS file (1 mark). b) Look at the following HTML and CSS documents HTML <div class="description"> <p> The <a href="http://www.xyzinc.com">XYZ inc.</a> working group makes two recommendations for changes to the product catalogue</p> <ul class="show_items"> <li><a href="widgets.html">Widgets</a>. Everyone needs a widget. This recommendation outlines the reasons for providing new widgets. </li> <li><a href="gadgets.html">Gadgets</a>. Gadgets are in decline. This recommendation proposes gadgets should no longer be produced. </li> </ul> </div> CSS p{border:1px solid red} a{background-color:yellow} li a{color:red} .show_items{font-family:Arial} The CSS has been applied to the HTML. i) Describe the appearance of the hyperlink XYZ inc.? Default appearance with a yellow background Describe the appearance of the hyperlink Widgets? Explain your answer. Red text displayed in the font Arial with a yellow background (1 mark). The hyperlink is nested inside an <li> element so its affected by the third rule. It is also nested inside the <ul> which has a class of show_items so it is affected by the fourth rule (2 marks). 1 6
ii)
Total 10 Marks
Page 4 of 12
Designing and Developing a Website September 2012 Final NCC Education Ltd 2012
Marks QUESTION 4 a) Look at the following website directory structure. The pages in this site are linked together using relative URLs.
root
houses
flats
index.html
flat1a.html flat1b.html
10_south_street.html newlands.html
i) A hyperlink in the page 10_south_street.html links to the page the_elms.html. What will be the value of the href attribute for this hyperlink? ../the_elms.html A hyperlink in the page the_elms.html links to the page 26_new_street.html? What will be the value of the href attribute for this hyperlink? 26_new_street.html 1
ii)
iii) A hyperlink in the page flat1b.html links to the page the_elms.html. What will be the value of the href attribute for this hyperlink? ../houses/the_elms.html iv) A hyperlink in the page index.html links to the page newlands.html. What will be the value of the href attribute for this hyperlink? houses/committee_members/newlands.html v) A hyperlink in the page newlands.html links to the page index.html. What will be the value of the href attribute for this hyperlink? ../../index.html
Page 5 of 12
Designing and Developing a Website September 2012 Final NCC Education Ltd 2012
Marks b) The following HTML shows the application of the accesskey attribute <a href="careers.html" accesskey="c">Careers</a> i) What is an access key? Access keys allow us to associate specific keys with navigation options or parts of a webpage (1 mark). When the user presses the correct combination of keys on their keyboard they will follow the hyperlink or move to the specific part of the page (1 mark). Why can providing access keys make it easier for some mobile users to navigate websites? Some mobile users navigate by using a keypad 2
ii)
iii) Name TWO (2) problems associated with the use of access keys Two of the following (2 marks): Different web browsers use different modifier keys. For example Firefox uses CTRL and ALT whereas Internet Explorer uses ALT. There isnt a standard way of letting the user know what the access keys are. Access keys can come into conflict with browser shortcuts.
Total 10 Marks
Page 6 of 12
Designing and Developing a Website September 2012 Final NCC Education Ltd 2012
Marks QUESTION 5 a) A number of different image file formats are supported by web browsers; these include 8-bit PNG, 24bit PNG and JPEG. The following images need to be saved in an appropriate file format for display in a web page. Which file format would you use to store each of these images? In each case justify your choice. i) A pie chart showing the age distribution of participants in an experiment. A pie chart is likely to have a limited number of colours. An 8-bit PNG would be an appropriate choice because it would result in a smaller file size than the equivalent JPEG or 24-bit PNG. (2 marks) A cartoon picture of an elephant. A cartoon picture is likely to have a limited number of colours. An 8-bit PNG would be an appropriate choice because it would result in a smaller file size than the equivalent JPEG or 24-bit PNG. (2 marks) 2
ii)
iii) A photograph of a group of students celebrating their exam results Photographic images usually feature many different colours and smooth transitions. This means a JPEG would be an appropriate choice; it will be smaller in file size than a 24-bit PNG. An 8-bit PNG may struggle to support the range of colours. (2 marks) b) One of the most important new features in HTML5 are the <video> and <audio> elements. i) What advantages do these elements offer when embedding media into a webpage? Not reliant on third party plug-ins such as Flash (1 mark) No longer need complex <object> and <embed> elements to display audio and video content (1 mark) What problems do developers face when wanting to use these elements? Older browsers wont be able to display the audio/video (1 mark) Different web browsers support different audio and video file formats meaning developers need to encode media files in at least two separate formats (1 mark) 2
ii)
Total 10 Marks
Page 7 of 12
Designing and Developing a Website September 2012 Final NCC Education Ltd 2012
Marks QUESTION 6 a) HTML tables can cause problems for visually impaired users who use a screen reader to access webpages. Name THREE (3) HTML elements or attributes that can be used to enhance the accessibility of tables for users with screen readers? The <caption> element explicitly defines a title for the table. Placing a text element such as <p> or <span> close to a table to indicate a title has little meaning for users of screen readers (2 marks). The structure of a table, the arrangement of rows and columns, wont be clear to blind users. The summary attribute provides a written description of the structure of the table that can be read out by the screen reader so the user can make sense of the table structure (2 marks). The <th> elements indicate cell content is a table header. When screen readers read out the contents of table cells they will read out the associated table header value first allowing the users to make sense of the table data (2 marks). b) HTML forms can feature radio buttons and select lists. In some ways these two form controls are similar, they both allow the user to select a single option from several choices. Describe when you would use radio buttons and when you would use a select list. Use a collection of radio buttons when there are a small number of different options (1 mark). All the options will be immediately visible to the user without them having to interact with the page (1 mark). Use a select list when there are a large number of different options that would occupy too much space if displayed using radio buttons (1 mark). These can be presented concisely in a select list and the user can use the keyboard to select the required option quickly (1 mark). Total 10 Marks 4 6
Page 8 of 12
Designing and Developing a Website September 2012 Final NCC Education Ltd 2012
QUESTION 7 a) i)
Marks 2
Why is the <div> element especially useful when controlling page layout using CSS? Any element can be nested inside a <div> meaning we can use it to mark up large sections of a page e.g. a header or navigation bar which can then be styled using CSS (2 marks). HTML5 offers new structural elements such as <header>, <article> and <footer>. What advantages do these elements offer over using <div> elements. They add greater meaning to the page contents. A <div> element doesnt describe its content in any way (1 mark). Cleaner, simpler HTML and CSS. Using multiple <div> elements often results in using id attributes to distinguish one <div> element from another. This tends to make the HTML and CSS more complex (1 mark).
ii)
b) CSS3 media queries can be used to specify a different style sheet if the user accesses a page using a device with a small screen resolution e.g. a smart phone. Describe how the design of a webpage might differ if designed for smart phones? Any three of the following Content should be displayed as a single column (1 mark). Column based design wont fit on a small screen (1 mark). Present navigation options vertically (1 mark). Multiple navigation options wont fit horizontally (1 mark). Avoid placing long lists of navigation options at the top of the page (1 mark). Users will want to see the content first. A skip link can be provided to quickly access the navigation (1 mark). Make buttons and links bigger (1 mark) so that they can be selected easily on touch screen devices (1 mark). Use form controls that dont require the user to type (1 mark). Typing is often more difficult on small screen/touch screen devices (1 mark). Credit sensible valid alternatives. 1 mark for the design principle and 1 mark for an explanation.
Total 10 Marks
Page 9 of 12
Designing and Developing a Website September 2012 Final NCC Education Ltd 2012
Marks QUESTION 8 a) What is an e-commerce revenue model? Describe FOUR (4) different e-commerce revenue models? A revenue model describes how a business will generate income (1 mark). 4 from the following 5. Advertising Revenue Model. Revenue is generated from advertisers who pay to advertise on a website (1 mark). Sales Revenue Model. A business sells products through a website (1 mark). Subscription Revenue Model. Users of a website are charged a fee to access content (1 mark). Transaction Fee Revenue Model. A website receives a fee for acting as a middle man in a transaction (1 mark). 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 is meant by the term user-centred design? User centred design involves giving consideration for the needs of users throughout the design process. This often involves including users in the actual design process (1 mark). Why should web designers take a user-centred approach to the design of websites? Users visit website to complete tasks. Users often fail to complete tasks; they can easily get lost or confused when using websites (1 mark) or designing a site that is easy to use is more important than how a websites looks (1 mark). 5
ii)
iii) User-centred web design projects often conduct research to find out about users. Name THREE (3) different methods that can be used to discover user requirements for a website. Three of the following (3 marks): Analysis of server logs Surveys/questionnaires Interviews Focus groups
Total 10 Marks
Page 10 of 12
Designing and Developing a Website September 2012 Final NCC Education Ltd 2012
Marks QUESTION 9 a) Card sorting is a technique that can be used in a user-centred web design process? How can card sorting help when designing a website? Card sorts are used to help define the site structure, how the information will be organised into sections and sub-sections. (1 mark) Card sorting involves the input of users so that the design of site structure isnt simply the designer guessing or speculating about how the content should be organised.(1 mark) b) Look at the following screenshot of a webpage. 2
http://www.oxfam.org.uk Describe FOUR (4) design features that have been used to make this site usable. For each design feature explain why it assists usability. The site identity (logo) is visually prominent and in the top left corner (1 mark). It clearly tells the user which site they are viewing (1 mark). Page is visually split into clearly defined areas: navigation bar, content etc. (1 mark) this will help the user scan the page (1 mark). Global navigation bar (What we do, get Involved etc.) (1 mark) provides quick and easy access to the sites main content (1 mark) You are here indicators on the global and local navigation bars (1 mark) to indicate which section the user is in (1 mark) Page title stands out visually, it is displayed in bright orange (1 mark). It will be one of the first things the user sees when they scan the page. Breadcrumb navigation (1 mark) clearly shows the users position in the site hierarchy (1 mark). Please credit valid alternatives based on the screenshot and web design principles.1 mark for the design feature and 1 mark for the explanation. Total 10 Marks
Page 11 of 12
Designing and Developing a Website September 2012 Final NCC Education Ltd 2012
Marks QUESTION 10 a) Why should web developers validate their pages using tools such as the W3C validator? Valid webpages are more likely to support accessibility, a range of devices and a range of different browsers. b) i) What is a usability test? Briefly describe what happens in a usability test? A usability test is a form of website testing. A user is observed while attempting to complete tasks using a website or website design. Notes are taken describing the problems users experience in completing tasks (2 marks). 2
ii) What are the limitations of using techniques such as questionnaires or interviews when testing usability? Questionnaires or interviews rely on users opinions rather than their actions. There is a big difference between what users say they do and what they actually do. Usability testing involves observation, studying what users do (2 marks). iii) What are the advantages of usability testing over heuristic evaluation (testing using design principles)? Testing using design principles doesnt involve real users, it is still guesswork. Usability testing is a much more reliable indicator of how easy a site is to use as it involves real users attempting to accomplish tasks using the site (2 marks) c) There are a number of different approaches to creating webpages. Some web developers use WYSIWYG tools such as Dreamweaver which automatically generate HTML. Using these tools, developers can create webpages much more quickly than writing the HTML code themselves. What are the potential disadvantages of using tools such as Dreamweaver? Any 2 of the following It is necessary to understand HTML and CSS in order to get the most out of WYSIWYG tools (1 mark). WYSIWYG tools dont always generate efficient, accessible or valid HTML and CSS (1 mark). It takes time for authoring tools to catch up with latest developments in web technologies (1 mark).
Total 10 Marks
END OF PAPER
Page 12 of 12
Designing and Developing a Website September 2012 Final NCC Education Ltd 2012