Designing and Developing a Website. 7 May Marking Scheme

Size: px

Start display at page:

Download "Designing and Developing a Website. 7 May Marking Scheme"

Randall Clarke
5 years ago
Views:

1 Designing and Developing a Website 7 May 05 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 Marks 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? 3 Award 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. 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. 3 Provide alternatives for audio/video ( mark) and audio ( 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 ( 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. c) Consider the following diagram of the WWW: Figure : A model of the WWW i) What does HTTP stand for? Hypertext Transfer Protocol Question continues on next page Page of

3 ii) Briefly describe the roles of the client and server computers. Award mark for each bullet point up to a maximum of 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. iii) The diagram represents the client machine as a desktop computer. Equally it could be a laptop or a smartphone. State ONE () other device that could be categorised as a client in this model of the WWW. Any suitable device e.g. tablet, smart watch, games console Total: 0 Marks Page 3 of

4 Question Marks 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> <h>welcome</h> <p>lorem ipsum dolor sit amet.</p> <section> <h>about Us</h> <p>ut enim ad minim veniam.</p> </section> <section> <h>latest News</h> <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 () example of the concept from the HTML document shown above. Award mark for a correct definition and mark for correctly identifying an example from the above document. i) Tag ii) Tag instructions to the browser that specify the meaning of content e.g. <section>, <h>, <p> Content Content the text the user sees when they view the page e.g. Latest News Question continues on next page Page 4 of

5 iii) iv) Attribute Attribute defines additional information for a tag e.g. http-equiv is an attribute of the meta tag Empty Element Empty Element an element with no closing tag and no content e.g. <meta> is an empty element v) Nesting Nesting the application of multiple tag effects. When one element is placed inside another e.g. The elements <h> and <p> are nested inside the <section> element Total: 0 Marks Page 5 of

6 Question 3 Marks a) The following CSS has been applied to the HTML document shown in Question : *{ font-family:verdana; } section p{ background-color:red; } section section p { color:blue; } Describe the appearance of the text: i) Welcome Welcome Verdana font ii) Duis aute irure dolor in reprehenderit. Duis aute irure dolor in reprehenderit. Verdana font, background colour of red, and font colour of blue iii) Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. - Verdana font, background colour of red b) The W3C specifies two technologies for web page construction; HTML and CSS. i) Describe the different roles of HTML and CSS. Award mark for each bullet point up to a maximum of marks. HTML defines the structure and/or meaning of content. CSS defines the presentation of the content. 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 mark for a partially correct answer. Question 3 continues on next page Page 6 of

7 c) Consider the following HTML element: <p style="line-height:.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? ii) Award mark for each bullet point up to a maximum of 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. State TWO () alternative ways of specifying CSS for a webpage. External CSS ( mark) and embedded or internal CSS ( mark) Total: 0 Marks Page 7 of

8 Question 4 Marks a) Consider the following web site structure: root companion working pug.html sheltie.html hunting guard index.html pointer.html whippet.html doberman.html 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 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 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 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?../../index.html Question 4 continues on next page Page 8 of

9 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 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> </ul> </nav> <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> Award 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: 0 Marks Page 9 of

10 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. Marks 4 Award mark for each bullet point up to a maximum of 4 marks. 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 () potential advantages of using SVG. Award mark for each bullet point up to a maximum of marks. 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. Question 5 continues on next page Page 0 of

11 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. 4 <object classid="clsid:d7cdb6e-ae6d-cf-96b " 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=" <img src=" alt="get Adobe Flash player"/> </a> </object> </object> 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 () advantages and TWO () disadvantages of this approach to HTML 5. Award mark for each bullet point up to a maximum of 4 marks. Advantages Not reliant on 3 rd 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: 0 Marks Page of

12 Question 6 Marks 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=""> <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=""> </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 mark for the correct number of rows/columns. Award mark for the correct rowspanning and column spanning. Question 6 continues on next page Page of

13 ii) State ONE () 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 ( 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 ( 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 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. 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. 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. 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. Total: 0 Marks Page 3 of

14 Question 7 Marks 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 ii) Why is not using id selectors considered good practice? Award mark for each bullet point up to a maximum of 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. Question 7 continues on next page Page 4 of

15 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:px solid black; height:50px; width:00%; float:left; } nav{ outline:px solid black; height:50px; clear:left; width:5%; float:left; } section{ outline:px solid black; height:50px; width:75%; float:left; } footer{ outline:px solid black; height:50px; clear:left; width:00%; } <body> <header></header> <nav></nav> <section>3</section> <footer>4</footer> </body> 3 4 Award marks for a completely accurate sketch. Note: Award mark if the sketch demonstrates the right idea but contains some errors e.g. columns sizes are incorrect. Question 7 continues on next page Page 5 of

16 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 mark for each bullet point up to a maximum of 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. d) The following HTML code shows the top part of an HTML document: 3 <!DOCTYPE HTML> <html> <head> <title>homepage</title> <link rel="stylesheet" media="(max-width: 480px)" href="style.css"> <link rel="stylesheet" media="(min-width: 480px)" href="style.css"> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> Identify and briefly describe TWO () link elements in this document and provide ONE () reason why there are these two link elements. Award mark for each bullet point up to a maximum of 3 marks. One CSS file, style.css, will be used for small screens, those with a maximum width of 480px. The other CSS file, style.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. Total: 0 Marks Page 6 of

17 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. Marks 3 Award mark for each bullet point up to a maximum of 3 marks. Server logs Surveys Interviews Focus groups b) BB is the most common form of ecommerce. i) What does BB stand for? BB Business to Business ii) State THREE (3) other categories of ecommerce and provide ONE () example of a type of website that fits each category. Award mark for each bullet point up to a maximum of 3 marks. 6 BC Business to Consumer CC Consumer to Consumer PP Peer-to-Peer M-Commerce Award mark for each bullet point up to a maximum of 3 marks. BC Online shops /Social networking sites that generate revenue through advertising CC - Auction websites such as ebay where consumers sell items they own to other consumers PP - Film studios distributing films via peer to peer networks M-Commerce Mobile phone apps e.g. an iphone app for ebay or Amazon Total: 0 Marks Page 7 of

Question 9 a) Consider the following screen shot of a website. 8 Source: http://www.whittard.co.

18 Question 9 a) Consider the following screen shot of a website. 8 Source: (accessed: Jan 05). Question 9 continues on next page Page 8 of

19 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 mark for the design feature and mark for the explanation. For the following points: Examples Good design features The page has been split into clear areas [ mark] with good use of white space to separate different parts of the page [ mark] The page title English Breakfast Large Leaf Tea Bags is large and prominent [ mark] This, along with the large image, immediately tells the user the content of the page they are viewing [ mark]. Breadcrumb navigation [ mark] shows the users position in the site hierarchy and easy access back to other sections or the homepage [ mark] The site logo follows website conventions [ mark], it is visually prominent, and is clearly visible in the top-right of the page [ mark]. Bad design features The site may benefit from a You are here indicator on the main navigation bar ( mark); this would clearly show the user they are in the Tea section ( mark). Some text is small and in caps ( mark). It may be difficult for some users to read ( 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? Award mark for each bullet point up to a maximum of 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. Total: 0 Marks Page 9 of

20 Marks Question 0 a) i) What is meant by validating a webpage? Validating a webpage means checking it obeys all the rules of a markup language e.g. HTML 5 ii) Why is it considered good practice to validate webpages? Award mark for each bullet point up to a maximum of 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. 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. ii) Award mark for each bullet point up to a maximum of 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. Why should members of the web development team not be subjects for usability tests? Award mark for each bullet point up to a maximum of 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. Page 0 of

21 c) Web Accessibility Evaluation Tool (WAVE ) is an online tool that can check the accessibility of a website. State TWO () advantages and ONE () disadvantage of using a tool like WAVE? (WAVE copyright is 04 WebAIM) 3 Award 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. End of Examination Paper Total: 0 Marks Page of

22 Learning Outcomes matrix Question Learning Outcomes assessed 5, 6 Yes Yes 3 Yes 4 Yes 5 3 Yes 6, 3, 5 Yes 7 Yes 8 6 Yes 9,, 5 Yes 0,, 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 of

Designing and Developing a Website. 7 May Examination Paper. Time: 3 hours

Designing and Developing a Website 7 May 205 Examination Paper Answer ALL questions. Clearly cross out surplus answers. Time: 3 hours The maximum mark for this paper is 00. Any reference material brought