CSC8004: Web Technologies CSC8004: Web Technologies Assignment Aims The aim of this assignment is to introduce you to some of the practical skills required to create functional, standards-compliant web pages using XHTML, CSS and JavaScript. Objectives To use XHTML and CSS to structure and format a web page which adheres to a (provided) specification. To gain experience developing a website in accordance with strict constraints on the technologies used, namely XHTML 1.0 Strict and CSS 2.1. This intends to emulate professional website development practices, working alongside a Quality Assurance department on legacy projects. To use JavaScript to validate data supplied in a web form and process the input prior to submitting it to a remote server. Getting started This assignment is in two parts, read through all of the specification carefully before starting. Download the following files from the resource collection (Blackboard) for these tasks: bsl-XHTML.html bsl-XHTML.png bsl-CSS.png bsl-QUIZ.html © Newcastle University and JISC Netskills 2018 1 CSC8004: Web Technologies Part 1: Using CSS Instructions Add valid CSS to bsl-XHTML.html in order to present the document as shown in the resource file: bsl-CSS.png Save your finished document and submit it to NESS as: bsl-CSS.html All your CSS must be contained inside a single external file, linked to bsl- CSS.html and called: bsl-CSS.css Comments should be included in your style sheet to explain the basic functionality of each rule and (if you found inspiration elsewhere) the source of your CSS code. Hints Redundant or extraneous mark-up will cost you marks. Think “lean and clean”. If you find yourself asking, “have I put too many tags in here?”… then you probably have 😉 You will need to add some additional XHTML to bsl-XHTML.html in order to provide framework for your CSS. You should just need & tags and class and id attributes to do this. If you are rewriting large parts of the document, you have probably made it too complicated! The final page layout and functionality should appear and behave identically in recent versions of Firefox, Google Chrome and Internet Explorer. Your page will be tested in all three on a Windows platform. For the purposes of this exercise, other browser types do not have to be explicitly catered for. Media content of your page does not need to show on Internet Explorer, since the browser recently stopped to support Flash. The screen shot bsl-CSS.png is taken from a browser window set at approximately 1900 pixels wide. You can make measurements off it if you wish, however this may not help you much beyond relative proportions for margins, borders etc. You will find some other sizing clues in the assets collection. You do not have to pixel perfect to pass. 2 © Newcastle University and JISC Netskills 2018 CSC8004: Web Technologies Validation is a simple yes/no check and you will know when you submit your work whether it will pass or fail. It is not a trick question… everything in this document can be presented as XHTML 1.0 Strict/CSS2.1 if you take the time to find out how. Assets & Resources Additional image assets, which may be useful for Part 1, can be found at: http://homepages.cs.ncl.ac.uk/harold.fellermann/csc8004/ Marking Criteria Core features The main (white) content block should be centred in the browser window and flexible between widths of 510 and 960 pixels. It should not expand/shrink beyond those limits. Use CSS to provide the layout for each of the main content sections. Pay particular attention to the use of background images, floats and CSS positioning. Make sure you correctly display the all images and media shown in bsl-CSS.png as well as the whitespace around them. Again, use absolute URLs for the images you include. The sign grids (letters and numbers) should dynamically adjust to fill the width available to them within the flexible content limits i.e. Narrow and wide page sign display 6 marks Colours and typography You should be resourceful enough to find out the correct hexadecimal codes for the colours used in the final version. Do so… and use them correctly. © Newcastle University and JISC Netskills 2018 3 CSC8004: Web Technologies The core typeface in use is Palatino Linotype, with Lucida Sans Unicode for the headings. A little research should enable you to build simple font stacks to implement them correctly using CSS. 2 marks Navigation bar The navigation menu should be presented, as shown in bsl-CSS.png, using CSS only. You must use CSS to move the navigation bar – you cannot re-order the XHTML (see below). In addition, you should change the background colour of the menu items when the user moves the move over them e.g. Colour change occurs when user moves over the Classification menu item 3 marks Underlying framework If the CSS is removed from bsl-CSS.html, the underlying page must still look identical to the reference example shown in the resource file bsl-XHTML.png This means you must not re-order the supplied content. 2 marks Validation Your finished style-sheet bsl-CSS.css must validate with no errors or warnings when checked against CSS level 2.1 at: http://jigsaw.w3.org/css-validator/ Your finished document bsl-CSS.html must contain a suitable, full DTD and validate automatically as XHTML1.0 Strict when checked by file upload at: http://validator.w3.org 4 marks Total available for Part 1: 17 marks 4 © Newcastle University and JISC Netskills 2018 CSC8004: Web Technologies Part 2: Client-side Scripting Instructions This part uses the following file from the resource area for these tasks: bsl-QUIZ.html This is a basic XHTML form which presents a short quiz about bsl. View this file in a text editor and note that it links to a single external JavaScript source file called: validate-QUIZ.js At the moment that file doesn’t exist – your primary task is to create it, according to the criteria given below. You will not be able to edit bsl-QUIZ.html in any way – all you will be submitting is your new JavaScript source file. Also notice that bsl-QUIZ.html also links to a CSS style sheet called: bsl-QUIZ.css This is a CSS style sheet that you can create as a secondary objective for this assignment. See the specification for details. Hints All the functionality provided by your JavaScript must be triggered by the function called validate() The final return value from validate() will determine whether the form submits to the PHP script or not. The event handler and call to this function is already in bsl-QUIZ.html The action for the form is set to automatically submit to a PHP script which simply returns the values to the screen so you can check they arrived safely. Make sure that the input from the form and the score show up on that page The CSS you use in Part 2 does not need to fully replicate that of from Part 1! For a start you cannot make any changes to the XHTML, so you will have to use what you have learned about CSS selectors to apply your style rules. The goal is to make the quiz look consistent with the main bsl information page – not identical. At the very least the colours and fonts should be pretty easy… © Newcastle University and JISC Netskills 2018 5 CSC8004: Web Technologies Marking Criteria Input checking Your JavaScript should check all four questions and ensure that the user provides a name and has selected at least one response for each before continuing: If any questions have not been answered, display an alert to the user telling them which question(s) they still need to complete. The incomplete question(s) for this attempt should be highlighted in yellow in the page Include functionality to ensure the user only selected 2 options for question 2 The form should not submit to the server (in order to allow the user to return and complete it) The user should not be alerted about their score at this point 6 marks Answer scoring When all the questions have been attempted, your JavaScript should also mark the quiz as follows: Award 1 point for each correct answer (so
there will be a max of 5) Accept only the correct spelling for question 4, but allow for the fact that the user could type it in any case (upper lower or mixed). Display an alert to the user telling them how many they scored (out of the maximum of 5) and that their answers and score will be sent to the server. Make sure you know the correct answers! 5 marks Submit score Finally when all the validation is complete and passed, your JavaScript should allow the browser to submit the form results and score to the PHP script on the server. 3 marks Errors Your final JavaScript should run error free in recent versions of Firefox, Google Chrome and Internet Explorer (8+). 6 © Newcastle University and JISC Netskills 2018 CSC8004: Web Technologies 2 marks Style Create bsl-QUIZ.css and add rules to give the quiz a look and feel which is consistent with bsl-CSS.html. There’s not many marks available for this, so don’t spend too much time on it! 2 marks Total available for Part 2: 18 marks © Newcastle University and JISC Netskills 2018 7 CSC8004: Web Technologies Submission You will need to submit all the file(s) for this assignment to NESS as follows: File Description bsl-CSS.html Your edited version of bsl-XHTML.html, containing all the style and structural information for the final presentation, as per the specification provided. bsl-CSS.css The single external CSS style sheet document containing the formatting rules which apply to bsl-CSS.html validate- QUIZ.js Your JavaScript code which, when linked to a reference copy of bsl-QUIZ.html will provide the client-side as specified in the assignment. bsl-QUIZ.css The single external CSS style sheet document containing the formatting rules which apply to bsl-QUIZ.html Your JavaScript and CSS files must include comments explaining each step as you understand them. You must also include the source (e.g. URL) of any external script snippets you have found to help you. The due date for this assignment is 14:30 on Friday 7th May 2020 Remember your submission is timed when it finishes not when it starts, so allow time before the deadline to submit your files. Marks Returned You will get a mark out of 35 for this assignment, which breaks down as follows: Total available for Part 1: 17 marks Total available for Part 2: 18 marks Total: 35 marks Percentage of total module mark: 35% 8 © Newcastle University and JISC Netskills 2018
