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:
22
Embed
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
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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.
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
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
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
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.
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
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.
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.
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.
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?
Award 1 mark for each bullet point up to a maximum of 2 marks.
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.
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.
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?
Award 1 mark for each bullet point up to a maximum of 2 marks.
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:
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.
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
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
Award 1 mark for each bullet point up to a maximum of 2 marks.
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.
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.
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.