Answered Essay: Assignment 1 HTML5 Web Site Prototyping This assignment provides the first step toward developi

Assignment 1 HTML5 Web Site Prototyping

This assignment provides the first step toward developing an e-commerce web application by creating a set of static HTML5 pages for several core parts of the application flow. These pages serve as a look-and-feel design prototype for later functional / dynamic application development. This assignment is intended to (re)familiarize students with HTML development and navigation, as well as application design, deployment requirements, and assignment submission in the context of the course.

Course Standards for Web Page Design

This assignment introduces the fundamental standards for web page design in the course. In this and all subsequent assignments, the following design standards apply.

Pages must be valid HTML5 standard.

You must not use site-builder or automatic site generation tools. You must code your

HTML directly, by hand.

All pages must validate cleanly as HTML5.

All pages must render sensibly cross-browser.

All pages must have full and complete separation of CSS into separate files – only the

link(s) to load the CSS should be present in the HTML document. No style definitions

within the page.

All pages must have full and complete separation of JavaScript into separate files – only

the link(s) to load should be present in the HTML document. No scripting within the

page.

All resources (CSS, JavaScript, Media) must be locally stored with the web application

(e.g., local copy of JavaScript libraries).

Each assignment will consider coding efficiency and design choices, which includes

coding elegance or style. Efficiency is required to make the best use of resources (many full pages are viewed on mobile devices). Good code design is required for maintenance, understanding, reusability, and extensibility of applications. Proper indentation for nested elements is just one example. Course staff are the final arbiters on efficiency and design choices in this context.

Page design choices must be sensible for use by a broad audience. Course staff are the final arbiters on sensibility in this context. Ridiculous and laughable branding / inventory may be fine. Ridiculous and laughable site design / implementation is not.

Even if not explicitly or specifically mentioned in assignment requirements, points may be deducted on an assignment for poor efficiency / (code or user interface) design practices in submissions.

Assignment Description:

In this assignment you will develop four HTML pages, according to the following specifications.

Choose an e-commerce area of interest to you. You must develop your own unique site with branding, categories, and items representative of that area. Creativity is encouraged.

You are not allowed to select previously created branding / content. You must create your own. In particular, you must not use any branding / content from (1) the assignment itself; (2) the textbook; or (3) any other students in any of the sections of the course.

Each of the pages specified must be a standalone, individual HTML page. And not, for example, framed or one single page with main content section visibility switching.

Each of the pages must be standalone, but must have a common design to preserve the look-and-feel of the site. So, some of the common look-and-feel elements will be repeated across pages. Common look-and-feel elements must render exactly the same, so there are seamless transitions with no jitter between pages for common elements.

You must conform to the required overall page layout structure.

Within each of the sections of the overall page layout structure, you may style the content differently than the representative examples (color scheme, alignment, etc.), as long as the illustrated types of content are present and represented in a reasonable and understandable way.

All of the content must be represented using HTML directly (no JavaScript DOM generation).

For this assignment, we will consider the following specific design standard requirements:

Validation of HTML5 by the following tool: http://html5.validator.nu/

Cross-browser checking for Firefox and Chrome

[page2image15328]

Required Page Structure

All pages must use the following foundational layout structure, including:
• Full-width containers of sensible height for (1) page header area, (2) area for user specific

navigation elements, (3) page footer area.
• Partial-width containers of the same height sensibly divided for (1) general site

navigation and (2) main content area.

Page 1 – Home Page

Common content elements described here (navigation, header, footer) also apply to the other pages. This page should provide the following content / functionality:

Filename: index.html

Logo / primary branding in the header

Placeholder for login name

Breadcrumb for current place in site structure

Representative links for user-specific navigation (sign-in, cart, my orders, etc.)

o Cart link must provide navigation to cart page

Representative links for general site navigation (home, catalog, about, etc.)

o Catalog link must provide navigation to catalog page

o Home link must link to home page

Representative footer information (copyright, etc.)

Main content area should provide an introduction and overview to the site. May be more

than simply text

Page 2 – Catalog Page

This page should provide the following content / functionality in addition to common content:

Filename: catalog.html

At least two categories of items

At least three items per category

All item listings should link to the same item page, as a design placeholder

Note that within the main content container, catalog organization may be fancier than a

plain list (e.g., dropdown category select box driving item display)

Page 3 – Item Detail

This page should provide the following content / functionality in addition to common content: (Note: only one item page is needed as a representative page – not a different one for every item in the catalog list)

Filename: item.html

Picture of item

Item highlights, including category and price

Item detail description

Button to add the item to the shopping cart

o Button action should link to the shopping cart page

Page 4 – Shopping Cart

This page should provide the following content / functionality in addition to common content:

Filename: cart.html

Main content container should provide a table structure listing representative items,

quantities (> 0), prices, and totals, and overall subtotal.

At least two items with different quantities should be represented

Quantities should be values within input field elements (should be able to change the

values)

Update cart button action should link to the cart page

Checkout button should link to the catalog page

Assignment Submissions

What to submit using Canvas (Email submissions will NOT be accepted):

hw1.war – An archive of the entire web application (project) stored in a standard WAR

file. Though there are only HTML pages for this assignment, part of the exercise is to go through the steps of creating and submitting such archives. Note that while there are no java sources for this assignment, but when there are, you must ensure that the java source files are included as part of the archive. The WAR file will be imported into Netbeans for grading and may be required to be deployed as part of the submission.

info.pdf – PDF document with the following assignment information :

a Explanation of status and stopping point, if incomplete.
Explanation of additional features, if any.
c Discuss the easy and challenging parts of the assignment. How did you overcome all or some of the challenges?

Expert Answer

 

style.css

div.container {
width: 100%;
border: 1px solid gray;
}

header, footer {
padding: 1em;
color: white;
background-color: turquoise;
clear: left;
text-align: center;
}

nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}

nav ul {
list-style-type: none;
padding: 0;
}

nav ul a {
text-decoration: none;
}

article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
min-height: 200px;
}
.header_menu{
text-align: right;
}
.header_menu a{

color: white;
text-decoration: none;
}
.login_form{
padding-bottom: 2px;
}

.productbox {
background-color:#ffffff;
padding:10px;
margin-bottom:10px;
-webkit-box-shadow: 0 8px 6px -6px #999;
-moz-box-shadow: 0 8px 6px -6px #999;
box-shadow: 0 8px 6px -6px #999;
}

.producttitle {
font-weight:bold;
padding:5px 0 5px 0;
}

.productprice {
border-top:1px solid #dadada;
padding-top:5px;
}

.pricetext {
font-weight:bold;
font-size:1.4em;
}
.column{
float: left;
width: 35%;
margin-left: 8%;
height: auto;
}

img{
width: 100%;
height: auto;
display: inline-block;
}
.item1, .item2{
display: block;
}
.button {
background-color: #551A8B;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.button:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.button a{
text-decoration : none;
color: white;
}

script.js

function selCategory(itemCat){
if(itemCat == 1){
$(‘.item1’).show();
$(‘.item2’).hide();
}else if(itemCat == 2){
$(‘.item1’).hide();
$(‘.item2’).show();
}else{
$(‘.item1’).show();
$(‘.item2’).show();
}
}

index.html

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>.
</head>
<body>

<div class=”container”>

<header>
<h1>Logo / primary branding in the header</h1>
<div class=”header_menu”>
<form action=”#” method=”post” name=”loginForm” id=”loginForm” class=”login_form”>
<input type=”text” name=”username” id=”username” placeholder=”User name” value=””>
<input type=”password” name=”userpass” id=”userpass” placeholder=”Password” value=””>
<input type=”submit” name=”submitForm” value=”Login”>
</form>
<a href=”#”>Sign-in</a> | <!– go to sign-in/registration page form–>
<a href=”#”>Cart</a> | <!– link to cart page –>
<a href=”#”>My orders</a> <!– link to my order page –>

</div>
</header>

<nav>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”catalog.html”>Catalog</a></li>
<li><a href=”about.html”>About</a></li>
</ul>
</nav>

<article>
<p>
Content of your site. Main content area should provide an introduction and overview to the site
</p>
</article>

<footer>Copyright &copy; Your website name</footer>

</div>

</body>
</html>

Sample output:

catalog.html

<!DOCTYPE html>

<html>

<head>

<link rel=”stylesheet” type=”text/css” href=”style.css”>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>

<script src=”script.js”></script>

</head>

<body>

<div class=”container”>

<header>

<h1>Logo / primary branding in the header</h1>

<div class=”header_menu”>

<form action=”#” method=”post” name=”loginForm” id=”loginForm” class=”login_form”>

<input type=”text” name=”username” id=”username” placeholder=”User name” value=””>

<input type=”password” name=”userpass” id=”userpass” placeholder=”Password” value=””>

<input type=”submit” name=”submitForm” value=”Login”>

</form>

<a href=”#”>Sign-in</a> | <!– go to sign-in/registration page form–>

<a href=”#”>Cart</a> | <!– link to cart page –>

<a href=”#”>My orders</a> <!– link to my order page –>

</div>

</header>

 

<nav>

<ul>

<li><a href=”index.html”>Home</a></li>

<li><a href=”catalog.html”>Catalog</a></li>

<li><a href=”about.html”>About</a></li>

</ul>

</nav>

<article>

<div>

<b>Category: </b>

<select name=”itemCategory” id=”itemCategory” onchange=”return selCategory(this.value);”>

<option value=””>Select Category</option>

<option value=”1″>Category 1</option>

<option value=”2″>Category 2</option>

</select>

</div>

<div class=”column productbox item2″>

<img src=”img/img1.jpg” width=”” height=””>

<div class=”producttitle”>Product 1 name of the prodcut</div>

<div class=”productprice”><div class=”pull-right”><a href=”#” class=”btn btn-danger btn-sm” role=”button”>BUY</a></div><div class=”pricetext”>120.35</div></div>

</div>

<div class=”column productbox item1″>

<img src=”img/img2.jpg” width=”” height=””>

<div class=”producttitle”>Product 2</div>

<div class=”productprice”><div class=”pull-right”><a href=”#” class=”btn btn-danger btn-sm” role=”button”>BUY</a></div><div class=”pricetext”>8.95</div></div>

</div>

<div class=”column productbox item2″>

<img src=”img/img3.jpg” width=”” height=””>

<div class=”producttitle”>Product 3</div>

<div class=”productprice”><div class=”pull-right”><a href=”#” class=”btn btn-danger btn-sm” role=”button”>BUY</a></div><div class=”pricetext”>115.05</div></div>

</div>

<div class=”column productbox item1″>

<img src=”img/img4.jpg” width=”” height=””>

<div class=”producttitle”>Product 4</div>

<div class=”productprice”><div class=”pull-right”><a href=”#” class=”btn btn-danger btn-sm” role=”button”>BUY</a></div><div class=”pricetext”>85.30</div></div>

</div>

</article>

<footer>Copyright &copy; Your website name</footer>

</div>

</body>

</html>

Sample output:

item.html

<!DOCTYPE html>

<html>

<head>

<link rel=”stylesheet” type=”text/css” href=”style.css”>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>

<script src=”script.js”></script>

</head>

<body>

<div class=”container”>

<header>

<h1>Logo / primary branding in the header</h1>

<div class=”header_menu”>

<form action=”#” method=”post” name=”loginForm” id=”loginForm” class=”login_form”>

<input type=”text” name=”username” id=”username” placeholder=”User name” value=””>

<input type=”password” name=”userpass” id=”userpass” placeholder=”Password” value=””>

<input type=”submit” name=”submitForm” value=”Login”>

</form>

<a href=”#”>Sign-in</a> | <!– go to sign-in/registration page form–>

<a href=”#”>Cart</a> | <!– link to cart page –>

<a href=”#”>My orders</a> <!– link to my order page –>

</div>

</header>

 

<nav>

<ul>

<li><a href=”index.html”>Home</a></li>

<li><a href=”catalog.html”>Catalog</a></li>

<li><a href=”about.html”>About</a></li>

</ul>

</nav>

<article>

<div class=”productbox”>

<img src=”img/img1.jpg” width=”” height=””>

<div class=”producttitle”>Category: Category 1</div>

<div class=”producttitle”>Price: 120.35</div>

<div class=”producttitle”>Product 1 name of the prodcut</div>

<p>Description/content of the item. Sample test product content. Sample test product content.Sample test product content.Sample test product content.Sample test product content.Sample test product content.</p>

<a href=”cart.html”><button class=”button”>Add item to shopping Cart</button></a>

</div>

</article>

<footer>Copyright &copy; Your website name</footer>

</div>

</body>

</html>

Sample output:

cart.html

<!DOCTYPE html>

<html>

<head>

<link rel=”stylesheet” type=”text/css” href=”style.css”>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>

<script src=”script.js”></script>

</head>

<body>

<div class=”container”>

<header>

<h1>Logo / primary branding in the header</h1>

<div class=”header_menu”>

<form action=”#” method=”post” name=”loginForm” id=”loginForm” class=”login_form”>

<input type=”text” name=”username” id=”username” placeholder=”User name” value=””>

<input type=”password” name=”userpass” id=”userpass” placeholder=”Password” value=””>

<input type=”submit” name=”submitForm” value=”Login”>

</form>

<a href=”#”>Sign-in</a> | <!– go to sign-in/registration page form–>

<a href=”#”>Cart</a> | <!– link to cart page –>

<a href=”#”>My orders</a> <!– link to my order page –>

</div>

</header>

 

<nav>

<ul>

<li><a href=”index.html”>Home</a></li>

<li><a href=”catalog.html”>Catalog</a></li>

<li><a href=”about.html”>About</a></li>

</ul>

</nav>

<article>

<div class=””>

<table border=”1″ cellpadding=”10″ cellspacing=”0″ width=”100%”>

<tr>

<td>

Quantity

</td>

<td>

<input type=”text” name=”itemQuant” id=”itemQuant” value=”2″>

</td>

</tr>

<tr>

<td>

Price

</td>

<td>

98.63

</td>

</tr>

<tr>

<td>

Total (product price * quantity)

</td>

<td>

197.26

</td>

</tr>

<tr>

<td colspan=”2″>

<a href=”cart.html”><button class=”button”>Update Cart</button></a>

<a href=”catalog.html”><button class=”button”>Checkout</button></a>

</td>

</tr>

</table>

</div>

</article>

<footer>Copyright &copy; Your website name</footer>

</div>

</body>

</html>

sample output:

Buy Essay
Calculate your paper price
Pages (550 words)
Approximate price: -

Help Me Write My Essay - Reasons:

Best Online Essay Writing Service

We strive to give our customers the best online essay writing experience. We Make sure essays are submitted on time and all the instructions are followed.

Our Writers are Experienced and Professional

Our essay writing service is founded on professional writers who are on stand by to help you any time.

Free Revision Fo all Essays

Sometimes you may require our writers to add on a point to make your essay as customised as possible, we will give you unlimited times to do this. And we will do it for free.

Timely Essay(s)

We understand the frustrations that comes with late essays and our writers are extra careful to not violate this term. Our support team is always engauging our writers to help you have your essay ahead of time.

Customised Essays &100% Confidential

Our Online writing Service has zero torelance for plagiarised papers. We have plagiarism checking tool that generate plagiarism reports just to make sure you are satisfied.

24/7 Customer Support

Our agents are ready to help you around the clock. Please feel free to reach out and enquire about anything.

Try it now!

Calculate the price of your order

Total price:
$0.00

How it works?

Follow these simple steps to get your paper done

Place your order

Fill in the order form and provide all details of your assignment.

Proceed with the payment

Choose the payment system that suits you most.

Receive the final file

Once your paper is ready, we will email it to you.

HOW OUR ONLINE ESSAY WRITING SERVICE WORKS

Let us write that nagging essay.

STEP 1

Submit Your Essay/Homework Instructions

By clicking on the "PLACE ORDER" button, tell us your requires. Be precise for an accurate customised essay. You may also upload any reading materials where applicable.

STEP 2

Pick A & Writer

Our ordering form will provide you with a list of writers and their feedbacks. At step 2, its time select a writer. Our online agents are on stand by to help you just in case.

STEP 3

Editing (OUR PART)

At this stage, our editor will go through your essay and make sure your writer did meet all the instructions.

STEP 4

Receive your Paper

After Editing, your paper will be sent to you via email.