Subject Code :- CSE2ICX
Title :- Internet Client Engineering
Assessment Type :- Assignment 2
You are working in a development role at the organisation ‘Website Implementation Perfection’ (WIP) A new client has recently come on board. ‘Good Gums’ are an Australian plant nursery and are keen to have WIP build a new web interface for their business. WIP has already completed some preliminary work in terms of gathering requirements for the client-facing site. Your manager has asked if you might be able to put together a fully functioning client-side prototype of the site based on the requirements outlined below.
CSE2ICX Internet Client Engineering Assignment
In creating your proto type it is expected that you will use actual pictures and descriptions of some Australian plants to give the client a real feel for what their site will look like. Refer to the assessment appendix for more information on plants that can be used.
The tasks of this assignment are organised as follows. Tasks 1-4 first describe the functional requirements of the website regarding what each of the web pages will do. Then Tasks 5-9 describe the non functional requirements regarding the behaviour of all parts of your solution.
Task 1: Home :-
The Home page is the entry point for the website. As this is the first page that will be viewed by a user it should be designed in an attractive manner including a combination of text and images. The content should include in part clear contact details for the organisation.
Task 2: Products
The purpose of this page is to advertise the various products offered by Good Gums.
Some examples are as follows:
• Product inventory (a complete list of all plants on offer)
• Popular products (plants for which there are the most sales)
• Recommended products (plants that are particularly good buys)
• On sale (plant being sold at a discounted price)
This page must be organised into a minimum of three subsections, each with content about the different offerings.
Task 3: About
This page contains background information about Good Gums. Suggestions for types of information to include can be some combination of news, history, achievements, location and personnel. This page must be organised into a minimum of three subsections.
One of the subsections must be about personnel. This section will include information that can be accessed in an interactive fashion with JavaScript, where the user can click on a portrait of a person to learn more about that person. A generic mock-up of this component is given on the next page.
Note that You have not been provided with information about the News, History, Achievements or Location of the Nursery. As this is a prototype you have a license to develop mock content for these sections The nature of the content will not be assessed, but it should give a clear representation of what the final product would look like (this representation will be assessed).
CSE2ICX Internet Client Engineering Assignment
Task 4: Order
This page contains a form that you must design to allow the user to order plants. The form fields must be suitable for the task and include the following tags as a minimum:
1.Form with the method and action attributes set correctly
2.Labels
3.Text input with
4.Longer text input with </p>
5.Drop-down list
6.Radio buttons
7.Check box
8.Submit button
All these fields must be validated appropriately using HTML5 validation attributes of their form controls. If the user provides invalid data, the website should display appropriate error messages.
If the user submits valid data, then they are navigated to the response page (response.html) that displays a summary of the responses provided by the user. Note that the form operates in a simulated fashion. I.e.: Instead of submitting the form data to the server, the form will navigate directly to the response page.
CSE2ICX Internet Client Engineering Assignment
Task 5: Site map
This page contains an unordered list of links to the five pages of this site. Regarding the pages for Tasks 2 and 3 it was stated that these pages should contain a minimum of three subsections each.
These will be implemented as sub-lists below their respective list items, and their links will navigate to the corresponding page Additionally the sub-lists will be implemented as using Java Script where the sub-lists can be expanded to view or collapsed to hide. The sub-lists will be collapsed by default.
Task 6: Organisation
The following organisational aspects must be put in place for your solution:
(1) Programming language:
The website will be a DHTML website. DHTML refers to Dynamic HTML. DHTML is the combination of HTML5, CSS3 and JavaScript working together to create a website that has a dynamic feel. Note that JavaScript may also include jQuery.
CSE2ICX Internet Client Engineering Assignment
(2) Third-party components:
The website will be hand-coded by yourself. Therefore, you may not include any third-party components.
(3) Images:
Store the images in a sub folder called “images”. Note that the website cannot use copyrighted images. To avoid this problem, you had been provided with the necessary images of the different plants sold by Good Gums and that of its employees. The images are available for download as a separate zip file within the assessment activity, where you downloaded this assessment file.
Note: you are not allowed to use these images anywhere other than for this assessment.
CSE2ICX Internet Client Engineering Assignment
(4) Integrated development environment:
The website must be built using Visual Studio 2017.
(5) Template:
The website will be built from scratch beginning with an empty folder. Follow these steps:
CSE2ICX Internet Client Engineering Assignment
a) Create a new folder called xxx_cse 2 icx_assignment 2, where xxx is your student ID.
b) Open Visual Studio 2017. Select “File” -> “Open” -> “Website…” and select the new folder.
c) Select “File” -> “Close Solution” immediately. This will prompt you to save a solution file (*.sln suffix). This must be saved in your new folder. Close Visual Studio 2017.
d) Double-click on the solution file to open Visual Studio 2017 and your solution again. Continue to use this method for opening your solution going forward for convenience.
e) You are now ready to go. Add your project assets next.
Task 7: Layout
The body of the website pages must be organised to include distinct header navigation main and footer semantic tags with the following content:
1.Header: Site name and branding.
2.Navigation: Navigation bar.
3.Main: This is the main content of each page.
4.Footer: Copyright statement as a minimum.
CSE2ICX Internet Client Engineering Assignment
Task 8: Navigation
The navigation bar appears on every page of the website and contains the following aspects:
1.The navigation bar has links to the five main pages of the website (Tasks 1-5).
2.Each navigation item must be the same size.
3.The link for the current page is disabled and has a different colour/appearance.
4.The links for the non-current pages have a different colour/appearance when hovering.
5.The navigation bar is responsive, meaning that the menu options gracefully wrap to the next line when they cannot all fit horizontally on the screen.
Examples are given on the next page (normal mode, followed by responsive mode).
Task 9: Presentation
The presentation of the website will largely be controlled by CSS with the following aspects:
1.All CSS code will be stored in a site-wide style file called styles.css and referenced on each web page.
2.The styling will include a variety of styling for layout.
3.The styling will include a variety of styling for content.
4.The presentation will end eavour to give the site a contemporary appearance, including HTML version 5 and CSS version 3 where practical.
A good way to test presentation is to perform cross-browser testing. I.e.: View your website in a range of popular web browsers and check that the presentation is consistent.
CSE2ICX Internet Client Engineering Assignment
Task 10: Code
This task will award marks according to the quality of your code according to these aspects:
1.HTML CSS and JavaScript indentation is consistent with one level of indentation per block.
2.All HTML CSS and JavaScript file types each use some comments (, /*comment */ or // comment as appropriate minimum of 3 per file type).
3.The W3C HTML markup validation service reports zero errors and zero warnings on the code when tested with the validate by direct input method.
4.The W3C CSS markup validation service reports zero errors and zero warnings on the code when tested with the validate by direct input method.
5.The HTML web page footers include click able W3C HTML5 and CSS3 validation logos to the validator to indicate compliance to the W3C standards. (See week 3 HTML lecture, slide 98, for logo examples.)
Extra: Although marks are not allocated, it is also good practice for HTML CSS and Java Script code to consistently use best-practice casing (lowercase for HTML/CSS and for JavaScript, with first letter in lower case). (The DOC TYPE declaration is an exception.)