DESIGNING AND DEVELOPING A WEBSITE 7 th NOVEMBER 01 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. Throughout the question, please credit any valid alternative point. 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.
CANDIDATES MUST ATTEMPT ALL QUESTIONS QUESTION 1 a) i) What are WC standards? 1 Specifications or descriptions of web technologies (1 mark). ii) Provide an example of a WC standard? 1 XHTML 1.0 Strict/CSS.1 (1 mark) iii) When developing websites why is it important to use web standards? The standards aim to provide web technologies that support the greatest number of web users. If we follow web standards we can be confident our websites will be accessible to as many users as possible ( marks). b) Computers on the World Wide Web can be classified as clients or servers. Explain the different roles of the client and server computers. 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) Name two types of disability that would affect someone s use of a website. For each disability describe how the use of the web would be affected. Any two of the following, 1 mark for identifying a relevant disability and 1 mark for describing the impact on the use of the web: 4 Visual Disability: People that are blind or have limited vision. Can t see web pages may have to magnify the page contents or use a screen reader Motor: People that have limited or no use of hands. Struggle to use conventional input devices that require fine motor control, struggle to select and click on navigation options. Auditory:People that are deaf or hard of hearing. Struggle to understand audio and video content on the web Cognitive: Suffers may struggle to use websites with complex language, navigation, or interaction processes Total 10 Page of 1
QUESTION a) Look at the following XHTML document. It is viewable in a web browser but validating the page reveals several errors. 4 <!DOCTYPE html PUBLIC "-//WC//DTD XHTML 1.0 Strict//EN" "http://www.w.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w.org/1999/xhtml"> <head> </head> <body> <title>chocolate</title> <h1>chocolate</h1> <p>made from the beans of the cacao tree, chocolate is a popular food that is eaten in many forms and in many parts of the world. It has a long and interesting history stretching back thousands of years. Much of the chocolate consumed these days is sweetened chocolate that comes in a number of varieties. <ul> </p> <li><a href="milk_choc.html">milk</a></li> <li><a href=dark_choc.html>dark</a></li> <li><a href="white_choc.html">white</a><li> </ul> </body> </html> Identify the errors in the XHTML (None of the errors are in the doctype declaration or opening <html> tag). The <title> element should be in the <head> of the document (1 mark) The <ul> and <p> elements are overlapping. The <p> element needs to close before the <ul> (1 mark) The third <li> element hasn t been closed properly. (1 mark) The value for the href attribute for the second hyperlink should be placed in quotes (1 mark) b) 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) <a href="milk_choc.html">milk</a> Tag name: a Attributes: href Values: milk_choc.html Content:milk (0.5 marks for each correct tag name, attribute(s), value(s) and the content of the element) Page of 1
ii) <em style="color:pink">leader s jersey</em> Tag name: em Attributes: style Values: color:pink Content: leader s jersey (0.5 marks for each correct tag name, attribute(s), value(s) and the content of the element) iii) <link rel="stylesheet" type="text/css" href="house_style.css" /> Tag name: link Attributes: rel, type, href Values: stylesheet, text/css, house_style.css Content: There is no content, <link> is an empty element. (0.5 marks for each correct tag name, attribute(s), value(s) and the content of the element) Total 10 Page 4 of 1
QUESTION a) Compare and contrast the different roles of CSS and HTML. How does having these two different technologies for webpage creation support accessibility? HTML is used to define the structure and meaning of document contents, not the appearance of parts of the page (1 mark). CSS is used to define the presentation (appearance) of web pages (1 mark). Separating presentation from content means that even if a device can t implement the CSS the page contents will still be understandable for the user (1 mark) b) Look at the following HTML and CSS documents HTML <div id="content" class="story"> <p> The city break is a popular type of holiday. Regardless of the weather or time of year, two or three days experiencing the sights and sounds of a different city can make a fascinating and memorable holiday. Among the most popular city break destinations are large cities such as Paris, Dubai, London and Rome. </p> <p class="story"> There are many guidebooks and on-line guides for travellers wishing to visit these popular destinations. Many of the world's smaller and lesser-known cities also have much to offer visitors, especially for short breaks. However, finding information about things to do and advice on the best places to eat and stay for these lesser-known destinations can be more difficult. </p> <h>top Destinations for City Breaks</h> <ol> <li>paris</li> <li>barcelona</li> <li>rome</li> </ol> </div> CSS p, h{ color:red; }.story, h{ font-family:arial, Helvetica, sans-serif; } #content{ background-color:pink; } The CSS has been applied to the HTML. Page 5 of 1
i) Describe the appearance of the second paragraph? 1 Red text, Arial font, pink background (1 mark) ii) Describe the appearance of the <h> element? 1 Red text, Arial font, pink background (1 mark) iii) Describe the appearance of text Barcelona? 1 Arial font, pink background (1 mark) iv) How will the first paragraph differ in appearance to the second paragraph in this page? Explain your answer. It won t differ in appearance (1 mark). Although the first paragraph isn t part of the story class it is nested inside the <div> element is so it will be affected by all three rules, just like the second paragraph (1 mark). c) The second CSS rule in the above example features the font-family attribute. Why are three fonts specified? If the user doesn t have the first font installed, the CSS specifies alternatives that can be used (1 mark). The final font specified is a generic font family name that will allow the browser to select an appropriate font (1 mark). Total 10 Page 6 of 1
QUESTION 4 a) Look at the following website directory structure. The pages in this site are linked together using relative URLs. root sports technology media index.html reds_win_league.html company_cut_jobs.html latest_reviews.html weekend_results.html developers_rally.html ratings_up.html champion_signs_new_deal.html i) A hyperlink in the page weekend_results.html links to the page champion_signs_new_deal.html. What will be the value of the href attribute for this hyperlink? champion_signs_new_deal.html (1 mark) ii) A hyperlink in the page champion_signs_new_deal.html links to the page company_cuts_jobs.html? What will be the value of the href attribute for this hyperlink?../technology/company_cuts_jobs.html (1 mark) iii) A hyperlink in the page index.html links to the page ratings_up.html. What will be the value of the href attribute for this hyperlink? media/ratings_up.html (1 mark) 1 1 1 iv) A hyperlink in the page reds_win_league.html links to the page index.html. What will be the value of the href attribute for this hyperlink?../index.html (1 mark) 1 Page 7 of 1
b) What are skip links? How do skip links assist users of mobile devices and users accessing the web with a screen reader? Many websites feature navigation bars at the top of the page. Skip links allow the user to jump over the navigation directly to the content in a webpage ( marks). 6 Screen readers read out link text to the user. It can be time consuming listening to the screen reader read out every navigation option. Skip links allow quicker access to the content of the page ( marks). Some mobile devices require users to navigate using a keypad or have very small screens. Tabbing through several navigation options at the top of a page can be tedious. Skip links reduce the amount of effort needed to access the content of the page ( marks). Total 10 QUESTION 5 a) JPEG is a commonly used image file format on the web. What type of image is the JPEG format suited to? Explain your answer. Photographic images and images that have many different of colours (1 mark). JPEG format can display millions of different colours with a small file size (1 mark). Alternative image file formats such as 8-bit PNG or GIF can t display the range of colours often found in photographic images (1 mark). b) Web Designers often use image replacement techniques to get greater control over the design of a web page. i) What are image replacement techniques? Image replacement techniques involve hiding part of the HTML content using CSS (1 mark). The hidden part of the page is replaced with a background image using CSS (1 mark). ii) What particular problem do they solve for web designers? They provide a reliable way for designers to use specific fonts that may not be installed on the user s machine to display text (1 mark). The HTML is unaffected; the content is hidden, not removed. Search engines and screen readers will still be able to access the content of the page (1 mark). c) What is a codec? Why do we need to use codecs to deliver audio and video over the web? Codec stands for compressor/decompressor. A codec is a program that reduces the size of large video and audio files (1 mark). A codec is also needed to play the video/audio file (1 mark). Without the use of codecs it would be difficult to transfer large files such as video and audio over the internet (1 mark). Total 10 Page 8 of 1
QUESTION 6 a) HTML 5 offers a number of new form controls such as the url and email controls. Which group of users in particular benefit from the use of the url and email input types, why? Smart phones users (1 mark). Smart phones often have on screen keyboards with a limited number of keys visible at any time (1 mark). By knowing the type of input required the phone can display the specific keys that will be most useful to the user, for example the @ symbol if the control is an email control (1 mark). b) The <label>, <fieldset> and <legend> elements can enhance the accessibility of forms. Explain how these elements can assist users accessing the web with a screen reader. The <label> element specifies a text description for a form control. It allows the screen reader to directly associate a text description with a form element (1 mark). The <fieldset> and/or <legend> elements are used to group form controls and provide a description for this group. Screen readers can use the <legend> text to add context to <label> elements (1 mark). c) By default browsers apply little styling to HTML forms. Describe three different approaches to controlling the layout of HTML forms? Which approach would be considered best practice, why? Three approaches: Using the <br/> element to create line breaks (1 mark) Using HTML tables (1 mark). Using CSS and the float property (1 mark). 5 Using CSS would be best practice as the design of the page would be separate from the contents. The HTML would be cleaner/simpler with all the design information in the CSS file ( marks). Total 10 Page 9 of 1
QUESTION 7 a) It is possible to create complex page layouts using HTML tables. Name three reasons why we should use CSS and not tables for controlling the layout of a web page? Three of the following: Easier to change the design in the future. A single CSS file can specify the design for the entire site. Simpler, cleaner HTML code. Coding tables for page layout is complex. Separate presentation from content, follows web standards. Tables often don t work well on the small screen of mobile devices. Rendering complex tables can be computationally intensive. b) CSS offers a number of new properties such as curved corners on rectangles, drop shadows, and even animations. Discuss the potential advantages and disadvantages of using CSS properties in your web site designs? Advantages, can create sophisticated design effects without having to resort to using images, image replacement techniques or JavaScript (1 mark). These means simpler, cleaner code but also a reduction in the number of files/bytes to be downloaded (1 mark). Disadvantage Only the most recent browsers will support CSS properties (1 mark) and for some properties we have to use prefixes such as moz or webkit to target particular browsers (1 mark). c) What are CSS media queries? How can they help provide a usable page layout for mobile devices? CSS media queries allow us to define style sheets and CSS rules for specific screen resolutions (1 mark). Multi-columned layouts commonly seen on the web are often difficult to use on mobile devices (1 mark). CSS media queries can be used to define alternative single columned layouts specifically for mobile devices (1 mark). 4 Total 10 Page 10 of 1
QUESTION 8 a) i) BB is the largest form of ecommerce. What does BB stand for? 1 BB Business to Business (1 mark). ii) Name three other categories of ecommerce Three from the following: BC Business to Consumer (1 mark) CC Consumer to Consumer (1 mark) PP Peer-to-Peer (1 mark) M-Commerce (1 mark) iii) For each category provide an example of a type of website that fits the category Three of the following or alternative sensible answer that fits the model BC Online shops /Social networking sites that generate revenue through advertising (1 mark) CC - Auction websites such as ebay where consumers sell items they own to other consumers (1 mark) PP - Film studios distributing films via per to peer networks (1 mark) M-Commerce Mobile phone apps e.g. an iphone app for ebay or Amazon (1 mark) b) i) What is meant by the term user-centred design? 1 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). ii) 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). Total 10 Page 11 of 1
QUESTION 9 a) A user-centred web design process often involves the production of site structure diagrams and wireframe models? What is a site structure diagram? What are wireframe models? How are these diagrams useful when planning a website? Site structure diagrams show how the content of a website will be organised in a hierarchical structure (1 mark). The diagrams are useful as they define how the user will navigate through a site (1 mark). 5 Wireframe models are rough sketches of user interface designs. They give an indication of the navigation and content of individual pages within a site. They show a level of detail that can t be communicated through a site structure diagram ( marks). One of the following Wireframe models are used in site planning as a basis to develop screen designs or build the actual site (1 mark). They are quick and cheap to produce and can be used for usability testing early in the design process (1 mark). b) What is persistent or global navigation? Why should websites implement a persistent navigation bar? A group of navigation options that appear on every page of a site (1 mark). Provide easy access to the main content and functions of a site (1 mark). Provide reassurance to the user, helps to prevent users from feeling lost in a site (1 mark). c) When designing web pages we should aim to create a clear, consistent visual hierarchy. What is a visual hierarchy, why is it particularly important when designing web pages? A clear, consistent visual hierarchy organises the page content visually so that important elements, for example the page title, site logo are emphasised (1 mark). It is particularly important on the web because users scan web pages, they don t read them in in a careful and considered way. A clear visual hierarchy makes it fast and easy for users to scan web pages (1 mark). Total 10 Page 1 of 1
QUESTION 10 a) Many web browsers feature developer tools, e.g. (Firebug in Firefox). Explain how these tools are useful to web developers when building XHTML and CSS websites. Any two of the following: Help fix problems in XHTML and CSS code by inspecting parts of a page. The tools can show the exact CSS that is being applied to an element (1 mark). Dynamically changing the CSS rules that are applied to element. We can the view the effect of changing a CSS rule without having to save and refresh a page (1 mark). They are useful in learning CSS techniques that are being used on other websites. The developer tools can be used to inspect these websites to see the CSS that has been applied (1 mark). b) In the context of web design what is meant by graceful degradation? Provide an example to support your explanation. Graceful degradation involves designing a website that uses the latest technologies and techniques while still ensuring the site can be viewed by as many users as possible (1 mark). An example would be the use of CSS properties. If these properties are used we should ensure the site is still viewable even by older browsers that don t support the new properties (1 mark). c) One approach for evaluating the usability of a website is heuristic evaluation such as Krug s Trunk Test or Neilson s 10 usability heuristics. What does evaluating using heuristics involve? What are the main advantages and disadvantages of testing using heuristics? Heuristic evaluation involves testing the website against a set of established design principles e.g. is there a clear site logo? (1 mark) They have the advantage that they are quick and easy to carry out. (1 mark) The disadvantage is they still rely on speculation. We only really know if a site is usable by running a usability test, actually observing real users attempt tasks on a site. (1 mark) d) Consider the following statement Learning to use a WYSIWYG authoring tool such as Dreamweaver is no substitute for learning HTML and CSS Explain what is meant by this statement. It is necessary to understand HTML and CSS in order to get the most out of WYSIWYG tools (1 mark). WYSIWYG tools don t 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 1 of 1