StudentSignature: Student Number: Your Computer Number. Concepts for Advanced Computer Usage.

Transcription

1 University of Waterloo Place sticker here CS200 Lab Exam Student Name: StudentSignature: Student Number: Handin Code: Your Computer Number Course Abbreviation: Course Title: Course Instructor: CS200 Concepts for Advanced Computer Usage. Elodie Fourquet Time and Date of Examination: to 15.00, August 14, Duration of Examination: 150 minutes. Number of Pages: 8. Additional Materials Allowed: None. To be filled in by marker: Question Total Marks A B C D E F G I /75 /10 /5 /10 /5 /25 /10 /10 II /75 /5 /14 /20 /20 /16 Total /150

2 General Instructions SETUP Log in to OS X. Connect to Oscar and mount the share point cs200exam. Within it locate your cs200exam folder, whose name is yourhandincode_exam (yhc_exam), and the folder * Exam Materials (at the top of cs200exam). Copy the contents of the folder *Exam Materials (i.e. PartI-html-css & PartII-graphics-svg ) to your cs200exam / cs200section_101 / yhc_exam Do all your work in your yhc_exam folder, saving and creating your files either in PartI or PartII folder as appropriate. PRACTISE SAFE COMPUTING As you work, you will occasionally find you have messed something up. It is good practise, therefore, to periodically save your file with different names: e.g. SomeName_0, SomeName_1, SomeName_2, etc. If you do this every time you have made significant progress, you can easily retreat to an earlier version of your document if that seems useful. If you have done this, be sure that the files you would like marked are appropriately named. It is your responsibility to practise safe computing during this examination. AT THE END OF THE EXAM Oscar and the lab Macs will shut down at the end of the examination sitting, and the disk Macintosh HD on the lab Macs will be re-initialized. The files found in your cs200exam folder, and only those files, will be marked; if there are multiple copies numbered as above, then only the correctly named copy will be marked. There is no separate handins folder for this examination. Quit all applications and dismount cs200exam by dragging it to the trash before logging out of OSX. Overview For this lab examination you are to use Amaya only. Amaya is a Web client that acts both as a browser and as an editor. It has been designed in collaboration with W3C (the World Wide Web Consortium) with the primary purpose of demonstrating new Web technologies and helping users to generate valid Web pages. Amaya started as an HTML + CSS style sheets editor and was extended to support XML. It also includes features for editing Math and geometric graphics (SVG). For this lab exam you will use Amaya to do the following two things. 1. Editing/creating HTML with and without CSS. 2. Creating some SVG pictures. Part I and Part II are entirely independent. If you are stuck in Part I and can t do more, then skip to Part II. Amaya is an open source software project, thus is subject to occasional failure, so save your document often. Its interface uses a paradigm that you are not familiar with, so read the PREAMBLE section carefully before starting. Remember Your Pearls! And the Help menu! ( 2 of 8 )

3 PART I. HTML CSS PREAMBLE Amaya provides many different views of an HTML document. The most interesting ones are the Browser view, which is the default when opening an HTML document and the Source view, which you open using the 'Views' menu. Another view of interest is the Structure view, which shows the hierarchy of HTML tags. HTML Direct editing features Style section unfolded Browser view Source view Because it is difficult to synchronize between different views and because Amaya is under ongoing development, there are sometimes redraw problems. In the Browser view text elements may overlap when they should not. If so you can force a redraw by clicking on one of the Magnifying Glass icons. In the Source view where HTML tags are coloured, the colouring is occasionally missing on some HTML tags. Again the remedy is to force the view to redraw, switching back and forth between Structure view and Source view does the job. Direct editing in Browser view assumes a interface paradigm, requiring successive presses of the Enter key that you are not familiar with and that may be awkward at first. You may not want to consume too much time figuring it out. Experiment a bit with it, but if you find it too frustrating, go on to work directly on the HTML code instead in the Source view. Use the interface to get idea of the piece of code that it generates when you do not recall how to do something. Get inspiration from it, but if it is not efficient just go back and make sure your code is clean and simple by working directly on the source. Synchronize or save to see the results in the Browser view or Source view. I A. [10 points]. Familiarization, Debugging and Code Cleaning Open elodiehomepage.html in Amaya. From the menu 'Views', select 'Split view vertically'. The HTML source should open on the right. Check the box on the right if this is the case. On the bottom right of the Amaya window there is a RED circle, which means that my webpage contains some HTML errors. Your task is to fix them by doing the following. ( 3 of 8 )

4 Click on the bottom red circle, which opens a window listing the errors. Read them and click on them to go to the problematic HTML tag 1. Fix each error. Save the file after each change you make to the HTML source and reopen the errors window to see if you solved the error you were working on. When the circle turns to GREEN the page has no more errors. Go to the menu 'Tools' and select 'Code clean up', it makes the HTML tags consistent in appearance, turning them all lowercase. (It will also try to fix HTML errors if there were any...) Save your file and remember these nice Amaya features while working with the software! I B. [5 points]. Views and Synchronization Open ToyPearl.html in Amaya. Open the HTML source as you did above. In the source view do the following steps. Double-click on today, which is found in the last text sentence. It should select the word, and you should see a red arrow at the beginning of the corresponding sentence in the browser view. If you do, check the box on the right. Change today to class. Press the key combination Apple+Y, to synchronize the two views. Check the box on the right if the browser view updates. In the browser view do the following steps. Insert at the bottom of the page a new line with the text The Copy Pearl. On the right pane, unfold the Elements section. Use it to turn the inserted text to be an Heading 1(T1). Save or synchronize to see the corresponding changes in the source view. Check the box on the right if the source view updates. In either the source or browser view, do the following three updates, using synchronize to see the effect of each. 1. don t to do not 2. isn t to is not 3. we ve to we have You are done with ToyPearl.html, so save it now. I C. [10 points]. Basic Formatting Make a copy of your ToyPearl.html in your working directory and rename it BasicPearls.html. Open BasicPearls.html in Amaya and change the text of the HTML title tag to BasicPearls. Edit it to replicate the content and formatting of the target file BasicPearls.pdf. The given BasicPearls.txt is the text only version of the document, which you may find useful. You can either work directly in the browser view by using the interface buttons / menus for selecting the appearance of the elements to be Headings, bulleted lists, and so on, or you can edit in the source view using HTML If clicking on an error line does not make the cursor jump to the line, try the next error. 2. Hint: if you are not successful with one way, try the other. ( 4 of 8 )

5 When you are done with BasicPearls.html make sure you save it. I D. [5 points]. Classic Built-in Style Copy BasicPearls.html and rename it ClassicPearls.html. Open ClassicPearls.html in Amaya and change the HTML title to ClassicPearls. Apply an Amaya s built-in style to it by doing the following: In the right pane of the Amaya window, unfold the Style section or look at the menu 'Format > Theme', and apply the 'Classic' theme to the page, instead of 'No theme'. Save the file, look at it in Safari to make sure the appearance really changed, and then close the file. I E. [25 points]. Updating a CSS file Copy BasicPearls.html again and rename it myclassicpearls.html. In Amaya change the HTML title of myclassicpearls.html to reflect its filename. Now the task is to link the page to the given style sheet file myclassic.css. Using the menu 'Format > Style Sheets > Link...' you can either navigate through the folders to the CSS file, or click on the opened CSS file in Amaya. Linking the CSS file should change the appearance of myclassicpearls.html. The appearance is close to that of ClassicPearls.html you created previously. Look at the given file myclassicstartingpearlinitial.html 1 if you are not sure to have done it properly. It is important to save and check the result in Safari at this point. Next, you have to edit myclassic.css to make it similar to the standard one, but also to improve it with more pleasing amounts of white space. The aim is to replicate the appearance of the target file myclassicpearls.pdf by the end of the process. Refer to the target file to understand what is requested at each of the following steps. Do the following modifications to myclassic.css using Amaya 2. Change the heading 1 background colour from blue back to a grey colour. The grey should be set so that it uses the brightest of the RGB components of the current blue. Heading 1 style is not centered, make it centered. The background of heading 1 is not big enough for the font (look at it in Safari if necessary). Increase the height of the area of the background to fit the font. There is more space below heading 1 than above it. Swap the sizes of the spaces, i.e. use the bigger value for above and the smaller one for below. For paragraphs, set the above line spacing to 0.5em. For bulleted list items, add an attribute to indent them by 1em. Now make the following addition to myclassic.css and use it in myclassicpearls.html. Create a span class named important in myclassic.css, that highlights text with the greenish colour d1f1d1. 1. At this point myclassicpearls.html should look the same as myclassictoypearlinitial.html, except that you should have the text of the four pearls, instead of only one. 2. I expect you to look at the given CSS code and to experiment with Amaya interface, so to recall CSS attributes names during this editing task. If you have trouble you can ask for a cheat sheet, but you will lose 8 marks for requiring it. ( 5 of 8 )

6 Apply important to the words experiment and save in the Toy Pearl text of myclassicpearls.html file, as done in myclassicpearls.pdf. When you are done, save and close myclassic.css and myclassicpearls.html. I F. [10 points]. Adding Images Copy myclassicpearls.html and rename it myclassicpearlswithimages.html. In the copied file, your task is to insert a table at the bottom of the Model Pearl, and to place in it two images, replicating the content of the target file myclassicpearlswithimages.pdf. The two images are named model1.jpg and model2.jpg and are among the files you copied initially. Make sure you save and close myclassicpearlswithimages.html when you are done. I G. [10 points]. URL Links Open filelinks.html. Edit in the browser view the file so that each bulleted item of the list links to the appropriate HTML file. Amaya has a nice 'Click' feature to activate a link, learn it to make this task easy. At the bottom of each of your other HTML files, i.e. elodiehomepage.html, BasicPearls.html, ClassicPearls, myclassicpearls, and myclassicpearlswithimages, insert a URL link called Back that points back to filelinks.html. In the rectangle below briefly explain how you learned Amaya s 'Click' feature and what it is. ( 6 of 8 )

7 PART II. SVG Geometric Graphics PREAMBLE In Amaya when you are working on an SVG file, make sure that on the right pane, for the Elements section that the tab displayed is 'Drawing', as shown in the snapshot below. Make sure the Style section on the right pane shows the graphics object style properties and not the font / paragraph properties when you are working on graphics shapes. Selecting a graphics object and folding / unfolding the Style section makes the graphics style properties available. When manipulating graphics objects right click (or control key press) for a shortcuts menu. The 'SVG canvas' is an important concept introduced in part A below. Make sure your graphics objects are always within the canvas boundaries or weird things may happen. Drawing Features Graphics Object Style properties II A. [5 points]. Ellipse, Grouping and Canvas Open the file fish.svg in Amaya. You see a Bézier closed path representing the body of a fish. Add an ellipse for the eye, and make its inside a yellowish colour, as shown in the target file fish.pdf. Group the two components together, i.e. the Bézier path and the ellipse. On the right pane in the Elements section for drawing, the first button on the first line gives access to the 'SVG Canvas'. Select it to see the boundaries of your SVG image; the cursor changes to a cross, and you can extend the current canvas with the mouse and option key pressed. It is ESSENTIAL to stay within the canvas when you are drawing. To switch back to the drawing mode, getting the normal cursor back, press the control key. Select the fish and using the control key, move it to get it centered in the SVG canvas. Using a transformation available with the control key, scale down the fish by approximately half. Save your fish.svg. II B. [14 points]. Duplicate, Transformations and Alignment Use the menu 'File > New > New Drawing...>' to create a SVG document called fishcrowd.svg in your working directory. Insert at least five copies of your fish into fishcrowd.svg. Make sure you insert into the canvas area. Use transformations to replicate (approximately) the crowd of fish of fishcrowd.pdf. The second column of fish should have their right side aligned. Use an extra transformation to modify one of the fish (not one in the second column) so that the transformation is obvious and apparent. Enter the following information. Name of the transformation: Group all the fish into a single group. ( 7 of 8 )

8 You are done with fishcrowd.svg, save it and close it for now. II C. [20 points]. Simple Bézier Curves Create a new svg document called plant.svg. Using Amaya you should reproduce the plant found in plant.pdf. Specifically, your plant should have the five properties listed below. 1. It should be made of a 'Closed Bézier Curve'. 2. It should have four branches. 3. It should be greenish. 4. All the anchor points should be smooth. 5. It should look roughly like a plant (that means its appearance should be controlled and natural looking). When you are done with plant.svg, save it. II D. [20 points]. More on Bézier Curves and Shape Appearance Create a new svg document called aquarium.svg. Your task is to roughly reproduce the file aquarium.pdf. It should have the following three components. 1. A sand bank which is a path with a yellowish fill colour and a curvy top and straight vertical and bottom edges. 2. A front glass pane made of a rectangle shape with a black outline of 5 pixels, and a semi-transparent, i.e. transparency 60%, inside colour that is bluish. 3. A plant that you insert by copying it from your plant.svg. Place it behind the glass and the sand. When you are done with aquarium.svg save it and close it. II E. [16 points]. Final Cartoon Copy your aquarium.svg and rename it final.svg. Open final.svg in Amaya. Place your group of fish in final.svg, by copying them from your fishcrowd.svg file. Place them behind the glass window. Replicate the target document final.pdf. Keep your transformed fish. The important additions are the bubbles and the text. When you are done with final.svg save it and close it. Congratulations, you are done!! You can have some holidays now... at least from cs200 work. Check your cs200exam folder. Quit Amaya and dismount cs200exam. ( 8 of 8 )