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
praveeng@iiit.ac.in 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

e-Business Technologies Specialization for MSIT Class of 2015

Praveen Garimella
Last updated on Nov 2, 9:00 AM.
Exceeds Expectation for all the parameters in the rubric. Such teams are redirected
to the Principal Mentor for an interview.

Does not meet

Meets Specification

specification
Website Content

Page Layout

Exceeds
Expectation

Incomplete content,

Complete and well

Meets specification

language errors,

written content,

and the content is

confusing

correct use of

very engaging and

statements.

language, crisp and

attractive for the

clear statements.

visitors.

Cluttered, Not

Clutter free, Making

Meets specification.

making good use of

good use of the

Page layout is very

the screen, Not

screen, Responsive,

creatively done.

responsive design,

Pixel perfect

Rough

implementation.

Implementation
Navigation

Look & Feel

Typography

Visitor is lost on the

Visitor is aware of the

Meets specification.

website, hard to find

website context,

Enables visitor to

the next page to visit,

Intuitive navigation,

spend less time

too many clicks to

one or two clicks to

navigating and gets

reach the desired

reach any desired

more work done.

page.

webpage.

Color scheme not

Good color scheme

Meets specification.

professional and

and visitor survey

Establishes credibility

visitor survey score is

score is above

with the use of good

below average.

average.

color scheme.

Inconsistent fonts,

Consistent use of

Meets specification.

not web friendly font

fonts, web friendly

Enables faster

face, punctuation

fonts, perfect

reading and

errors.

punctuation.

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

e-Business Technologies Specialization for MSIT Class of 2015

Praveen Garimella
Last updated on Nov 2, 9:00 AM.
3. http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-andguidelines/ 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.
2.
3.
4.

JavaScript syntax to manipulate data types such as JSON

Building loops and creating functions
jQuery DOM
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
praveeng@iiit.ac.in 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.

e-Business Technologies Specialization for MSIT Class of 2015

Praveen Garimella
Last updated on Nov 2, 9:00 AM.
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.

e-Business Technologies Specialization for MSIT Class of 2015

Praveen Garimella
Last updated on Nov 2, 9:00 AM.

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

Meets Specification

specification
Content

Function use

Exceeds
Expectation

The product catalog

The required number

More than the

does not have

of products along

minimum number of

enough product data.

with the product

products along with

details.

product details.

No functions are

Some functions are

All the code is

used to build the

used to build the

modular.

shopping website.

shopping website
and most of it is
spaghetti code.

Encapsulation

Interactivity

No functions have

Some functions are

All the code is

been encapsulated

encapsulated and

encapsulated within

inside related

most functions are in

an object with the

objects.

global scope.

data related to it.

The shopping

All the given

Meets specification

website does not

interactivity is

and additional

have additional

implemented.

interactivity is

interactivity.
Artistic Creativity

implemented.

Existing templates

Good look and feel

New layouts with

are used.

with a standard

good look and feel.

layout seen is most

websites.

Learning Material & References

1. https://www.udacity.com/course/ud804
2. http://eloquentjavascript.net/

e-Business Technologies Specialization for MSIT Class of 2015

Praveen Garimella
Last updated on Nov 2, 9:00 AM.

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.

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.

e-Business Technologies Specialization for MSIT Class of 2015

Praveen Garimella
Last updated on Nov 2, 9:00 AM.
Does not meet

Meets Specification

specification
Sample Use Cases

Exceeds
Expectation

Did not implement

Implemented sample

Implemented sample

sample use cases for

use cases for 3

use cases for 5

the frameworks

frameworks.

different frameworks.

SWOT does not

SWOT is based on

SWOT is based on

factor in the sample

the sample use case

the sample use case

use case

implementation

implementation

implementation

experiences.

experiences and is

identified.
SWOT

experience and is

also based on the

only based on the

features of the

documentation.

project done in part 2

of the front-end web
engineering.

Report

Copy and paste from

Clear report with

Professional looking

the framework

appropriate

report with a good

documentation and

references.

argument for

the web.

choosing one
framework.

Presentation

Does not convey the

A good presentation

Has nice info

rational for the

that gives the

graphics in addition

selection of a

summary of the work

to the Meets

framework.

done by the team

expectations.

and the rational for

selecting the
framework.