back end web engineering

e-Business Technologies Specialization for MSIT Class of 2015 Praveen Garimella Last updated on Nov 2, 9:00 AM.

Front End Web Engineering

This course introduces several technologies that would enable you to create a fascinating

user experiences on the web.

The first part of the course is about HTML, CSS and Bootstrap (the popular twitter

framework). You may have already learnt using tags and create HTML documents. So, the

expectation is not to learn the tags again. It is time to step back and look at it from outside the

box. These technologies are the key enablers to creating a great experience for your website

users.

You should think of the UX (user experience) aspects of the web sites you create. How many

minutes are your visitors spending on your website? How productive is that time for them? Do

they want to back to your website and make it part of their life (like we have made

google.com)? Or do they curse the website because they dont get what they want quickly?

There is so much competition out on the web and there is always a threat of losing your

website users. All it takes is a click of the mouse (or a tap on the screen) for them to migrate

to a faster, better and cheaper option.

In the first part you will learn a systematic process of taking a design given to you in digital

format, typically a picture/image to produce a HTML document using HTML and CSS. The

following are the learning objectives for the first part of this course:

1. Define the box model for a webpage layout

2. Identify boxes for a given web page design

3. Create HTML code for the boxes

4. Apply style to the boxes and to the webpage

5. Reference Mozilla Developer Network to apply more styles

6. Use flex box layout

7. Apply the code, test and refine cycle

8. Use development tools

9. Verify HTML and CSS code using a validator

There are 3 sections that follow namely the Part 1 Project, How to score an A grade? and

Learning materials & references. My advice is that you read all the sections first to

understand what is expected out of the first part of this course. Meet with your team and

come up with a plan for the team for the first project. Communicate the plan to your mentors

e-Business Technologies Specialization for MSIT Class of 2015 Praveen Garimella Last updated on Nov 2, 9:00 AM. and get his/her inputs. Make the best use of the MOOC courses. There are a lot of useful

skills covered. Any other resource that you would like to use is perfectly fine. Share it with

[email protected] for my comments on the resources. Sometimes other resources can be

misleading for a topic of this kind. The key to success is your work on the project. That will

fetch you lot of valuable skills and a respectable grade.

Part 1 Project Build a website for a new e-commerce company www.clicktobuy.com (replace this with a

name that your team wants to give) with static web pages that describes the company and its

online offering. The website should present products that the company wants to sell online

(dont present more than 1 product per team member). Your team can decide what these

products are. Some examples of products are electronics, movies, clothing, spectacles,

groceries, furniture, computers, etc. If you cant think of products then choose some services

such as Banking, Insurance, Car Buying, etc. The goal for this project is for you to

demonstrate that you can build a multi-platform, responsive CSS framework, pixel perfect

website with a great user experience using the front-end web technologies. So, make sure

your products are presented online exceptionally well.

In order to decide what webpages to include in your project, study some of the popular

shopping websites such as Amazon.com, Flipkart.com, Snapdeal.com, etc. From these

websites figure out the webpages that are about the company such as about us, contact us,

etc. You have to be as exhaustive as you can be. The content of course can be fictitious but it

should NOT be copied from these websites. You should write your own content, which you

can do, if you studied the popular shopping websites well.

After completing the project, administer a usability study by creating a survey and sending the

website link to MSIT alumni working in various companies and in the field of web

development. A good survey should have a minimum of 10 responses. Your mentor should

approve the survey questions before you send it to the participants.

How to score an A grade? 1. Keep your mentor informed via emails everyday about the progress your team is

making on the project. Inputs from your mentor will help you identify how far you are

from getting the A grade.

2. Mentors follow the evaluation rubric given below to grade this project. Before you

start working on the deliverables you should specifically review the rubrics Exceeds

Expectation column for each parameter. A grade can be obtained by getting


Exceeds Expectation for all the parameters in the rubric. Such teams are redirected

to the Principal Mentor for an interview.

Does not meet

specification

Meets Specification Exceeds

Expectation

Website Content Incomplete content,

language errors,

confusing

statements.

Complete and well

written content,

correct use of

language, crisp and

clear statements.

Meets specification

and the content is

very engaging and

attractive for the

visitors.

Page Layout Cluttered, Not

making good use of

the screen, Not

responsive design,

Rough

Implementation

Clutter free, Making

good use of the

screen, Responsive,

Pixel perfect

implementation.

Meets specification.

Page layout is very

creatively done.

Navigation Visitor is lost on the

website, hard to find

the next page to visit,

too many clicks to

reach the desired

page.

Visitor is aware of the

website context,

Intuitive navigation,

one or two clicks to

reach any desired

webpage.


Enables visitor to

spend less time

navigating and gets

more work done.

Look & Feel Color scheme not

professional and

visitor survey score is

below average.

Good color scheme

and visitor survey

score is above

average.


Establishes credibility

with the use of good

color scheme.

Typography Inconsistent fonts,

not web friendly font

face, punctuation

errors.

Consistent use of

fonts, web friendly

fonts, perfect

punctuation.


Enables faster

reading and

establishes credibility

with the use of

perfect typography.

Learning Material & References 1. https://www.udacity.com/course/ud304 Intro to HTML and CSS MOOC course

2. https://developer.mozilla.org/en-US/ Mozilla Developer Network for Reference


3. http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-

guidelines/ Required reference for your project.

4. https://www.youtube.com/watch?v=qj1Gf2bCKUM Usability Review of e-Commerce

websites. Required reference for your project. Study the websites being reviewed

before you hear the expert comments.

5. http://www.usability.gov/what-and-why/visual-design.html Visual Design Basics.

6. http://www.usability.gov/how-to-and-tools/methods/online-surveys.html Usability

survey questions.

Congratulations on completing the work on part 1 of the Front End Web Engineering. In part 2 you will learn the following:

1. JavaScript syntax to manipulate data types such as JSON 2. Building loops and creating functions 3. jQuery DOM 4. Basic structure and functionality of a shopping website

There are 3 sections that follow namely the Part 1 Project, How to score an A grade? and

Learning materials & references. My advice is that you read all the sections first to

understand what is expected out of the first part of this course. Meet with your team and

come up with a plan for the team for the first project. Communicate the plan to your mentors

and get his/her inputs. Make the best use of the MOOC courses. There are a lot of useful

skills covered. Any other resource that you would like to use is perfectly fine. Share it with

[email protected] for my comments on the resources. Sometimes other resources can be

misleading for a topic of this kind. The key to success is your work on the project. That will

fetch you lot of valuable skills and a respectable grade.

Part 2 Project Enhance the website you have created in part 1 with a product catalog that has at least a 100

different products. You may not have access to such data yourself. So, get on to some of the

World Wide Web and scrape data from some of the popular online shopping websites.

The visitor on your website using the product catalog should be able to find the products they

want to buy by filtering. They check or uncheck various product attributes that will narrow

down the product listing. Products in the list should be updated dynamically when the user

checks or unchecks product attributes. Examples of product attributes are as follows:

Cloths color, size, gender, brand, type of clothing, occasion, price range, etc.

Phones OS, screen, battery, price range, etc.

Visitors should also have a search box to type the names of products or its brand. The search

box should show product suggestions as the user types into it. It should also maintain a

search history (on the client side) to show the previous searches ahead of the suggestions.


There will be a lot of products displayed on the page. On page load dont show the entire

product listing. As the user scrolls down the products should be updated on the page

dynamically. User can select from 2 different views for the product listing namely Grid view

and List view. Grid view shows the products in the form of cards/boxes. The grid can be

designed as a 3 x 3 or a 4 x 4 based on the type of products. List view is showing one product

in one row and the next product and so on. Based on the width of the screen the views should

change between Grid and List views.

Show the product page with more detailed description and specification of the product upon

clicking a product on the listing page. Add an option for users to submit reviews and show the

reviews posted about this product. This page should have a Buy button.

On clicking Buy, the product should be added to the shopping cart. Shopping cart page

should show the list of items in the cart with the quantity, pricing and estimated shipping with

a Checkout button.

On clicking checkout the payment and shipping details should be taken and an order

confirmation page should be shown.

All the clicks on the web pages should be logged with the x and y coordinate.

The goal for this project is for you to demonstrate that you can build a multi-platform,

responsive CSS framework, pixel perfect website with a great user experience using the

front-end web technologies. Show a demo not just on the laptop but also on a tablet and a

phone. If you dont have the devices then emulate them using Chorme developer tools.

Represent all the product data in JSON format that can be processed by JavaScript code.

There is no need to have server side programs or a database at this stage. Write JavaScript

code for all the interaction that the website visitors are going to have with the product catalog

and the shopping cart.

Study the features and the design of the product catalogs and the shopping cart of the

popular shopping websites such as Amazon.com, Flipkart.com, Snapdeal.com, etc.

After completing the project, administer a usability study by creating a survey and sending the

website link to MSIT alumni working in various companies and in the field of web

development. A good survey should have a minimum of 10 responses. Your mentor should

approve the survey questions before you send it to the participants.










Does not meet

specification


Expectation

Content The product catalog

does not have

enough product data.

The required number

of products along

with the product

details.

More than the

minimum number of

products along with

product details.

Function use No functions are

used to build the

shopping website.

Some functions are

used to build the

shopping website

and most of it is

spaghetti code.

All the code is

modular.

Encapsulation No functions have

been encapsulated

inside related

objects.

Some functions are

encapsulated and

most functions are in

global scope.

All the code is

encapsulated within

an object with the

data related to it.

Interactivity The shopping

website does not

have additional

interactivity.

All the given

interactivity is

implemented.

Meets specification

and additional

interactivity is

implemented.

Artistic Creativity Existing templates

are used.

Good look and feel

with a standard

layout seen is most

websites.

New layouts with

good look and feel.

Learning Material & References 1. https://www.udacity.com/course/ud804

2. http://eloquentjavascript.net/


Backend Web Engineering Congratulations! You now have skills to create fascinating user experiences. It is now time to

bring the mockups to life by implementing server side software. This course introduces the

skills involved in the design of the backend that will scale your web application to millions of

users on the web. There are 3 parts to the course. In the first part you will revisit the features

developed in part 2 to produce an architecture and design for the backend and implement it.

You are free to choose any server side web programming environment such as J2EE,

Python, Perl, PHP, Ruby, etc. Many of these platforms have several frameworks that support

maintainability of the code. You must survey the frameworks, evaluate them and choose one

framework that is a best fit for the implementation. The following deliverables have to be

submitted in two weeks time.

1. Report on the Survey of Server Side Frameworks and Selection In this

deliverables list all the frameworks and for each framework present a SWOT

analysis. You can read more about SWOT in

http://en.wikipedia.org/wiki/SWOT_analysis. It can be a very powerful method to

determine which framework is the best for your use in this project. Implement sample

use cases to understand the usage of the selected frameworks. Perform the SWOT

analysis and choose the best server side framework for your project. This deliverable

should be completed in 10 days time for fulltime students.

2. Video Presentation of the Server Side Frameworks Record a 20 minutes

presentation with the summary of the frameworks you have surveyed and your

rational for choosing one for the project. This deliverable should be completed in 2

days for fulltime students.









e-Business Technologies Specialization for MSIT Class of 2015 Praveen Garimella Last updated on Nov 2, 9:00 AM. Does not meet

specification


Expectation

Sample Use Cases Did not implement

sample use cases for

the frameworks

identified.

Implemented sample

use cases for 3

frameworks.

Implemented sample

use cases for 5

different frameworks.

SWOT SWOT does not

factor in the sample

use case

implementation

experience and is

only based on the

documentation.

SWOT is based on

the sample use case

implementation

experiences.

SWOT is based on

the sample use case

implementation

experiences and is

also based on the

features of the

project done in part 2

of the front-end web

engineering.

Report Copy and paste from

the framework

documentation and

the web.

Clear report with

appropriate

references.

Professional looking

report with a good

argument for

choosing one

framework.

Presentation Does not convey the

rational for the

selection of a

framework.

A good presentation

that gives the

summary of the work

done by the team

and the rational for

selecting the

framework.

Has nice info

graphics in addition

to the Meets

expectations.

back end web engineering

Documents