Question #1 (4 marks) Before you start, is necessary to understand how the web works. You will need to draw a diagram of the protocol stack that...

Question #1 (4 marks)

Before you start, is necessary to understand how the web works. You will need to draw a diagram

of the protocol stack that allows the Web to operate. Use acronyms in the labelling of your diagram

and provide a list of the acronyms with their full names.

Question #2 (12 Marks)

Now, the first step in creating the website is to create the interface mock-up. There are some critical

pages that will need to be created and linked together to illustrate the interface features. For those

pages that will ultimately contain user-contributed data, they can be loaded with sample data to

illustrate the design. You should use the bootstrap or another HTML/CSS framework for help

1 - Home page

This is the default. It shows a logo, store title (h1 tag), a list of products (with pictures), a list of

categories, a search option (to search for a product), a menu with the login (form), registration

(button), and cart.

1.1 - Login

The purpose of this form is to allow the user to enter their username and password to login.

2 - Registration page

This form should collect the information required for creating a new account on your store. At the

least, it should collect the name, email address, date of birth, image profile, and password. The

form should ask the user to enter their password twice, to ensure that it is entered properly.

3 - Profile Page

For this page, only the middle should change from the home page. The menus and categories

should be visible for all pages. Here you should be able to see all your information from the

registration form, with a button to edit the user data if is necessary. Moreover, you should have a

button for the logout and a list of all products that you bought/placed the order before. In the end

of the page, you will have all the products in your "wish's list" with the link to the product page

and a button to remove the product from the list.

4 - Administrator Page

For this page, only the middle should change from the home page. The menus and categories

should be visible for all pages. Looks like the profile page, but instead of showing all the products

that you bought, should show all the products sold in the website, the user that bought it, the

quantity and the final price. Moreover, the admin should have a button to register a new product

and another one to remove or add a new category.

4.1 Add/Remove category

This page is only a pop-up, so, there is no need to have all the menus, logo, or category menu. In

this page, you should list all the categories of the store, with a button to delete in the side of each

category. In the top, you should have an input text to type the name of a new category and then, a

SAVE button.

4.2. Add a new product

This page is only a pop-up, so, there is no need to have all the menus, logo, or category menu.

Here you should have a form for the admin input the Product Title, Select a Category from a select

list, Select a Picture (file upload), Put a Description (text area), Put the Quantity available, and the

Unit Price.

5 - Product page

For this page, only the middle should change from the home page. The menus and categories

should be visible for all pages. Here you will show the product picture, the title, the description,

the price, a box to put how much items you want to buy and the add to cart button. Next, you will

need to make a button to add this product to the "whish's list" in the case that the user wants to

buy it later. Moreover, you should show the similar products after the product description (other

products from the same category, at least 4 more).

6 - Cart Page

For this page, only the middle should change from the home page. The menus and categories

should be visible for all pages. Here you should list add the products that you had added before to

the cart (picture, title and quantity) and the total price for each product as well (in a kind of table

format). In the end, you should show the grand subtotal (the sum of all products prices plus), the

GST amount and the PST amount (will be calculated automatically). Finally, you should have the

final Total each a sum of everything and a button to place the order or keep shopping (go back to

the home page). Each product should have the quantity box editable for an automatic update

(changes the quantity bought and the price) and a button to remove the item from the cart.

OPERATIONS:

For each of these pages, you are to draw sketches and then build each of these pages using HTML5

(following the syntax rules of XTHML) and CSS. You need to ensure that there is a proper

separation of the specification of the content from the specification of the presentation rules. Your

submission should include six sketches, six HTML5 pages, and a single CSS file, plus the

framework folder. As a complement, you need to provide the links for each w3c validation, for

example: https://validator.w3.org/nu/?doc=http%3A%2F%2Furegina.ca%2F~martinsp%2F