The University of the South Pacific Serving the Cook Islands, Fiji, Kiribati, Marshall Islands, Nauru, Niue, Samoa, Solomon Islands, Tokelau, Tonga, Tuvalu, and Vanuatu. Faculty of Science, Technology and Environment School of Computing, Information and Mathematical Sciences IS221 WEB APPLICATIONS DEVELOPMENT Semester 1, 2013 FINAL EXAMINATION PAPER Time Allowed: 3 hours + 10 minutes reading 100 marks (50% of final grade) INSTRUCTIONS 1. 2. 3. 4. 5. 6. This examination has 8 questions. ALL questions are compulsory. Write all answers in the Answer Booklet provided. This paper has 11 pages including this page. You must hand-in the Answer Booklet to your supervisor at the end of the examination. Please note: To pass IS221; you need to score a minimum mark of 40, which is 40% of 100 (the total final examination raw mark). 40 out of 100 raw marks is equivalent to 20% out of 50% allocated to the final examination. GOOD LUCK!!! Question 1: Web Typography 10 Marks The type choices you make for your site provide the foundation for the clear communication of your content. Type can flexibly express emotion, tone, and structure. a) In strict typography, what is the difference between typeface and font? b) As you work with type, it is important that you follow four important principles for creating an effective design, as discussed in class. List these four principles. [2 Marks] c) When considering fonts for your Web designs, start thinking of font-families. [i] Name four generic font families that you know of. [ii] d) Give an advantage of using font families instead of a specific style. [2 Marks] [2 Marks] [1 Mark] Small capitals add a distinctive look for chapter openings, acronyms, and other special purposes. Write the appropriate CSS style that applies small capitals to the paragraph opening as in the Figure 1 below. Write the style as well as part of the paragraph to which this style is applied to. Do not write <style type=”text/css”>… </style>, as well as the whole paragraph. [3 Marks] Figure 1 IS221 Final Examination – Question Paper Semester 1, 2013 Page 2 of 11 Question 2: Box Properties 10 Marks CSS box properties allow you to control the margin, padding, and border characteristics of blocklevel elements. a) To understand more about CSS box properties, you need to understand the CSS visual formatting model and the box model. [i] Briefly discuss the CSS visual formatting model. [1.5 Marks] [ii] b) Briefly discuss the CSS box model. [1.5 Marks] Identify the labeled numbers indicated in the Figure 2 below. [1.5 Marks] 1 3 Figure 2 2 c) Figure 4 is the result of applying a CSS style to the Penguin image or graphic in Figure 3. Write the appropriate CSS style that will achieve this transformation. [Hint: Your style rule declaration should have at least two properties set.] [1.5 Marks] Figure 3 IS221 Final Examination – Question Paper Figure 4 Semester 1, 2013 Page 3 of 11 d) Use figures 5 and 6 below to answer the questions that follows. Figure 5 [i] Figure 6 The CSS style below was applied to the side bar in Figure 5 above. Complete the given style rule. Label 1 is the selector that needs to be used only once. Labels 2 and 3 are just values for the corresponding properties. ____1____ { width: 200px; height: 250px; padding: 0px 10px 10px 10px; margin: 0px 10px 5px 0px; color: blue; float: ____2____; border: ____3____; } [2 Marks] [ii] You must have noticed that there is a problem, as depicted in Figure 5, when applying the CSS styles in part [i]. Modify the CSS style in part [i] to solve this problem, as shown in Figure 6. A scroll bar is added to the side bar. [Hint: CSS style rule declaration has only one property.] [1 Mark] [iii] There is an alternative; instead of adding the style code(s) in part [ii] to part [i], you can still fix the problem in part [i] by modifying the CSS style in part [i]. This will result in the whole content of the sidebar fully displayed without a need for a scroll bar. Write the appropriate style code(s) that will fix this. [1 Mark] IS221 Final Examination – Question Paper Semester 1, 2013 Page 4 of 11 Question 3: Page Layouts 15 Marks In the past, Web designers used tables to create multiple column layouts and gain more control of their page designs. Modern Web designs are built using the CSS layout capabilities. Use the values shown in Figure 7 below as well as the additional information to write the XHTML codes for this centered fixed three-column layout page. Additional information: 1. Omit the root element. You only need to complete the <head> and <body> sections. 2. There is a wrapper which has a simple border. 3. There are a total of 6 sections including the wrapper. 4. Use internal style rules between the <style type=”text/css”>… </style> structure in the <head> section. 5. Do not include styles for text color, background color and so on. 6. Inside each section, except the wrapper, there is a single word to label that section such as Header, Left, Middle, Right, and Footer. All these to be formatted as heading 2 elements. 7. Use proper id selectors to define the styles for each section. 8. You must include a proper <body> section, where styles defined will be used to form the centered fixed three-column layout. Width: 960 px Height: 60 px No margins Width: 200 px Height: 400 px No margins Width: 200 px Height: 400 px No margins Width: 560 px Height: 400 px No margins Width: 960 px Height: 40 px No margins Figure 7 IS221 Final Examination – Question Paper Semester 1, 2013 Page 5 of 11 Question 4: Web Forms 10 Marks This question is about XHTML forms not ASP.NET Web Forms. Forms let you build interactive Web pages that collect information from a user and then process it on a server. a) A XHTML form is created using the <form> element. The <form> element has a number of attributes. One of them is the method property. This property has two possible values. Identify these two values and briefly describe the difference between these two methods. [2 Marks] b) Figure 8 below shows a form with some form controls. Use this form to answer the questions that follow. Figure 8 [i] All address information such as House No., Street, City, and Country information requires two Form controls. Name these Form controls. [1 Mark] [ii] Write the appropriate XHTML codes that render the Street information using the two controls named in part [i]. Street information must be clickable, not only on the input control but on the text “Street” as well. [2 Marks] [iii] Figure 8 also shows that all texts: House No., Street, City, and Country are in a control or field that is 80px wide. Also each text is right-aligned with a space of 10px between the text and input field. Write the appropriate CSS styles that will render these texts as they are in figure 8. [Hint: Need a selector with our attributes properties.] [5 Marks] IS221 Final Examination – Question Paper Semester 1, 2013 Page 6 of 11 Question 5: Graphics and Colors 10 Marks The ability to freely combine graphics, text, and color into page-type layouts is one feature that makes the Web so attractive and popular, but it also can be the undoing of many Web sites. a) You learned of four graphics file formats in this course. They are GIF, JPG, PNG, and SVG. What does each acronym mean? [4 Marks] b) What are Interlacing and Progressive display? [2Marks] c) What are dithering and banding? [2Marks] d) List two important guidelines when using images or graphics on your Web page. [2Marks] Question 6: Site Navigation 14 Marks a) Effective navigation includes providing not only links to other pages in the Web site, but also cues to user’s location. Users should be able to answer four navigational questions. List these four questions. [2 Marks] b) Many Web sites tend to present too much information at one time. Lengthy files that require scrolling or have arrays of links and buttons can frustrate and overwhelm the user. List and briefly describe one way you can limit information overload. [1 Mark] c) In addition to linking to external documents, you can also add internal links for navigating within the current page. One such example that you learned about is adding a Back to Top link that let users return to the top of the page when they reach the bottom of the page. Write the necessary XHTML codes that will achieve this. Do indicate clearly the locations of your codes. [3 Marks] IS221 Final Examination – Question Paper Semester 1, 2013 Page 7 of 11 d) Suppose you want to build a horizontal navigation bar for your Web pages. The navigation bar will be created from the unordered list, Figure 9 below, and looks like Figure 10 on the browser. Figure 9 Figure 10 [i] Now using the selector, ul#navlist { }, add style properties to remove the default spacing and bullets from the unordered list. You only need to add three properties. [3 Marks] [ii] Write another rule that will apply to each list item, this will result in the list being displayed horizontally by the browser instead of the default vertical list. [2 Marks] [iii] Write another rule that will remove the underline from the links as well as adding a space of 20 pixels between the list items. [3 Marks] Figure 11 IS221 Final Examination – Question Paper Semester 1, 2013 Page 8 of 11 Question 7: Data Tables 6 Marks The 3.2 release of HTML in 1997 included the table elements for the purpose of organizing tabular data in rows and columns. a) The table below shows the top five movies from the American Film Institute (AFI). Write the appropriate XHTML codes that will render the table in Figure 12 below. Write only the codes for the first three lines. The first line, AFI Top 5 Movies, describes the table and the third line is the first movie, Citizen Kane. [3 Marks] Figure 12 b) Write the appropriate style rule that renders the display in Figure 13 below. The style rule transforms Figure 12 to Figure 13 by adding the following properties: All borders collapse. Font family: Arial Table border: solid 4px blue Table cell border: solid 1px solid Table cells padding: 10 pixels Do not include <style type="text/css"> … </style>. [3 Marks] Figure 13 IS221 Final Examination – Question Paper Semester 1, 2013 Page 9 of 11 Question 8: ASP.NET 25 Marks This section is dedicated to ASP.NET. a) In creating Web applications in ASP.NET, there are three ways in which you can integrate programming codes with your XHTML codes. List these three methods. [1.5 Marks] b) Figures 14, 15 and 16 below shows the result in running a simple Web application called Check Box. This application was discussed in class. This Web application has three server controls: a check box, a label and a button. User click to check or uncheck the check box and then click the submit button. By clicking the submit button, a message will be displayed in the Label as in Figures 15 (checkbox being checked) and 16 (checkbox being unchecked). Use these figures and later information to answer the questions that follow. Figure 14 Figure 15 Figure 16 IS221 Final Examination – Question Paper Semester 1, 2013 Page 10 of 11 [i] Figure 17 is the source view of the Web form for the Check Box application with the body section being hidden. Write the codes that appear in a new Web form body section, before you even add any content. [4 Marks] Figure 17 [ii] The general syntax of a Web server control is given below as well as an example of Text Box server control. Every time you add a new server control, it comes with two important properties or attributes: ID and Runat. Other attributes can be added as required. General Syntax: <asp:TypeOfControl ID="ControlName" Runat="Server" /> Example: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> Write the ASP.NET/XHTML codes to complete the body section of the Web form for the Checkbox application. [Hints: Study Figures 14 to 16 in order to identify additional properties or attributes you need to add to each control. In each server control case you only need to add one more property or attribute. For the Label server controls, the color of the text displayed is red. You set the color by adding and setting the property or attribute called ForeColor. Also consider adding space and line break.] [14.5 Marks] [iii] Figure 18 below shows the content of Checkbox.aspx.vb, the code behind the file for the Check Box application. Write the appropriate VB codes that will complete the button click event handler, Button1_Click. Remember that clicking on the button, a message will be displayed in the Label depending if the check box is checked or not. [5 Marks] Figure 18 – – – THE END – – – IS221 Final Examination – Question Paper Semester 1, 2013 Page 11 of 11