Micronet International College

Transcription

1 Name: /50 Class: Micronet International College Level 4 Diploma in Computing Designing and Developing a Website (DDW) Test 2 (20%) QUESTION 1 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. 3 Photographic images and images that have many different of colours JPEG format can display millions of different colours with a small file size. Alternative image file formats such as 8-bit PNG or GIF can t display the range of colours often found in photographic images. 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? 2 Image replacement techniques involve hiding part of the HTML content using CSS. The hidden part of the page is replaced with a background image using CSS. ii) What particular problem do they solve for web designers? 2 They provide a reliable way for designers to use specific fonts that may not be installed on the user s machine to display text. 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. c) What is a codec? Why do we need to use codecs to deliver audio and video over the web? 3 Codec stands for compressor/decompressor. A codec is a program that reduces the size of large video and audio files. A codec is also needed to play the video/audio file. Without the use of codecs it would be difficult to transfer large files such as video and audio over the internet.

2 QUESTION 2 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? 6 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. The structure of a table, the arrangement of rows and columns, won t 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. 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. b) It is possible to create complex page layouts using HTML tables. Name four reasons why we should use CSS and not tables for controlling the layout of a web page? 4 Four 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.

3 QUESTION 3 a) 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. 4 Use a collection of radio buttons when there are a small number of different options. All the options will be immediately visible to the user without them having to interact with the page. Use a select list when there are a large number of different options that would occupy too much space if displayed using radio buttons. These can be presented concisely in a select list and the user can use the keyboard to select the required option quickly. b) You have been asked to create an HTML form that will ask the user the questions below. For each question, identify which type of form control should be used to implement the question. Provide a brief justification for each of your answers. i) Last name 2 A single line text field/text box. The user s name is short enough to fit in a standard text field. ii) Title (Mr/Mrs/Ms/Dr/Miss) 2 Radio buttons or select menu. The user is required to select a single option from a list. iii) I would like to be contacted by? Select all that apply ( /Text(SMS)/Phone/Post) 2 Checkboxes. The user should be able to select multiple options from the list.

4 QUESTION 4 a) Look at the following XHTML and CSS documents. 4 XHTML <div id="elem1"><div id="elem2"></div></div> <div id="elem3"></div> <div id="elem4"></div> CSS div border:1px solid black; #elem1,#elem3, #elem4 width:100px; height:100px; #elem1, #elem3 float:left; #elem2 background-color:black; float: right; width:50px; height:50px; #elem4 clear:both; The CSS has been applied to the XHTML document. Draw a diagram showing how this page will appear when rendered in a browser.

5 b) Look at the following CSS rule. It features a value of auto for the margin-left and margin-right properties. 2 #wrapper margin-left:auto; margin-right:auto; width:974px; Why is using the auto value useful when controlling the layout of a page? The auto value means the browser calculates the margins based on the window size. This means the page design will adjust and work with a wide range of browser resolutions. c) i) Why is the <div> element useful when controlling page layout using CSS? 2 Any element can be nested inside a <div>. This means large parts of a page e.g. headers, navigation bars, footers can be nested inside a <div> and styled using a single CSS rule.

6 ii) If a webpage is written using HTML 5 why might there be fewer <div> elements? 2 HTML 5 offers new elements that can be used instead of <div> such as <header>, <footer>. They can serve the same purpose as a <div> but provide greater meaning for the content they enclose. QUESTION 5 a) CSS Media queries can be used to specify different designs for different sized displays. Designers can specify one CSS file for desktop users with large displays and a separate CSS file for mobile users with smaller displays. Describe THREE (3) ways in which CSS can be used to change the design of a website so it will display on a mobile device. 6 Any three of the following: Content should be displayed as a single column. Column based design won t fit on a small screen. Present navigation options vertically. Multiple navigation options won t fit horizontally. Avoid placing long lists of navigation options at the top of the page. Users will want to see the content first. Make buttons and links bigger so that they can be selected easily on touch screen devices. Specify image sizes using percentages so the images will resize for smaller displays.

7 b) A web designer has been asked to create a website that features a number of educational videos. The website is designed specifically for high school children to use. The school that wants the website have a number of old computers running older versions of popular web browsers such as Internet Explorer 8. i) The designer is not sure how to go about embedding the video in the webpages. He is not sure whether to use the <object> element or the <video> element. What advice would you offer the designer? 2 The designer could either use both the <video> and <object> elements, or use just the <object> element. This is because the <video> element is part of HTML 5 and is only supported by the most recent web browsers. ii) A number of children in the school have disabilities including visual impairments and deafness. How could the web designer support these users? 2 There isn t an easy way to provide an alternative to video audio content. The only real possibility is to provide a transcript of the video or present the same information in a plain HTML webpages. [TOTAL: 50 marks]