Reference no: EM132361510
Assessment : Client-Side Web Programming
Background
You have been approached to create two storefront websites for a storefront in Brisbane. Your choice will be the same choice you made as per your Assignment 1 work. You must create the websites to be as realistic as possible for a normal organisation. The organisation has requested two websites: A public website with information about the organisation and an internal website that members of the organisation will use for day-to-day management. For assignment 2, you are now tasked to create the public website.
This assignment is part of a running scenario for all assignments in this subject, where the Brisbane storefront will continue to be your client. Please also refresh your memory regarding the additional background information provided previously in Assignment 1. The tasks of this assignment are organised as follows. Tasks 1-5 first describe the functional requirements of the website, regarding what each of the web pages will do. Then Tasks 6-10 describe the non-functional requirements regarding the behaviour of all parts of your solution.
Task 1: Home (index.html)
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.
Task 2: Products (products.html)
The purpose of this page is to advertise the various offerings of the storefront. Some examples are as follows: product inventory, popular products, recommended products, specials and bulk discounts.
This page must be organised into a minimum of three subsections each with content about the different offerings.
Task 3: About (about.html and about.js)
This page contains background information about the organisation. 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.
Task 4: Purchase (purchase.html, response.html and response.js)
This page contains a form that you must design to allow the user to purchase products. 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 <input>
4. Longer text input with <textarea>
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.
Task 5: Site map (sitemap.html and sitemap.js)
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 fragments. Additionally, the sub-lists will be implemented as accordions using JavaScript, 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
(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 subfolder called “images”. Note that the website cannot use copyrighted images. To avoid this problem, you are welcome to use images with an open licence. You can get these from free image websites or by performing an image search on your search engine with a “usage rights” filter set to “labelled for reuse” (or equivalent). Maintain a list of references in a file called references.txt in your solution with the name, author, location and access date of the images.
(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:
a) Create a new folder called xxx_cse2icx_assignment2, 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.
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 endeavour 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.
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 -->, /*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 clickable 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 JavaScript code to consistently use best-practice casing (lowercase for HTML/CSS and camelCase for JavaScript, with first letter in lowercase). (The DOCTYPE declaration is an exception.)