Website Design and Development: A Comprehensive Guide

This assessment report delves into the intricacies of website design and development, focusing on ClutchRoker, a platform offering web solutions. It explores server technologies, management services, front-end and back-end technologies, and the influence of search engines on website performance. The report also provides a detailed analysis of website design principles, tools, and techniques used to create a multipage website, along with a comprehensive test plan to review the website's performance. This document serves as a valuable resource for understanding the key aspects of website development and the essential steps involved in creating a successful online presence.

Website Design and Development
1

Table of Contents
Introduction.................................................................................................................................................3
Explain server technologies and management services for website management.....................................4
Website development tools, technologies and software tool to design front and backend.....................13
Online website creation tool.............................................................................................................13
Custom Design:..................................................................................................................................13
Website technologies, tools and techniques with good design principles to create a multipage website.
.................................................................................................................................................................. 16
Test Plan to review the performance of website.......................................................................................28
Conclusion.................................................................................................................................................31
Appendix...................................................................................................................................................31
References.................................................................................................................................................32
Figure 1 Domain name System....................................................................................................................5
Figure 2 Model View Control......................................................................................................................8
Figure 3 Model View Presenter..................................................................................................................9
Figure 4 Model View Template.................................................................................................................10
Figure 5 Model View Viewmodel..............................................................................................................11
Figure 6 Home...........................................................................................................................................16
Figure 7 About...........................................................................................................................................17
Figure 8 Services.......................................................................................................................................18
Figure 9 Features.......................................................................................................................................19
Figure 10 Contact page.............................................................................................................................20
Figure 11 Header Image............................................................................................................................21
Figure 12 Footer Image.............................................................................................................................22
Figure 13 about Us....................................................................................................................................23
Figure 14 Services......................................................................................................................................24
Figure 15 Features Pricing.........................................................................................................................25
Figure 17 Contact Us.................................................................................................................................26
2

Introduction
This is an assessment report made on ClutchRoker a website which provide web solution to
client. This website creates provide a platform to develop website, mobile application, content
management system. This website has ability to provide functionality like it provide response
front end development, CMS customization, Bespoke PHP development, Python web
development, JavaScript UI development etc. This website will be developed using Html
scripting language, CSS, Bootstrap, JavaScript programing language. This project is designed in
such a way that it provides a responsive page, attractive content, user friendly experience etc.
This provide description of plan available for client to choose from three plans as per
requirement. This website also provides a platform where website can be hosted. Website
designed is done with help of Html, Bootstrap and JavaScript plugin. This website is created for
managing client website content CMS tool i.e. Content Management System like WordPress,
Joomla, Drupal, etc. It website support core PHP based product and application which provide
web development framework like CodeIgniter, Magento.
3

Explain server technologies and management services for
website management
In this section I will discuss the about DNS, type of DNS, communication protocol, relationship
between hardware, operating system, web server software impact of web development
technology, influence of search engine, tool and technique used in web development.
P1 Explain DNS, types of DNS
DNS help to translate Domain to IP address, DNS stands for Domain Name System which is a
distributed database. DNS is a central part in internet which help as medium by providing
conversion to Domain name to IP address, Domain value always in word which is easy to
remember for human or client but server only understand IP address which a numerical value
is, to prevent this clash DNS perform as medium for conversion. The conversion with help of
procedure which is, initially user enter domain name on browser then that name goes to DNS
server then send it to root DNS server, which reply back the unique IP address which is
associated to that domain name.
4

Figure 1 Domain name System
Type of DNS Server:
There are two kinds of DNS server primary master and slave server which are described below:
DNS are of two types Standard Primary and Standard Secondary, described below:
1. Standard Primary DNS server:
Standard primary server is name server which is used to retrieve zone data from local DNS
database. Primary DNS server have the zone data so it can be trusted. This make him a reliable
DNS server. That zone data may contain file which can be edited.
5

2. Standard Secondary DNS server:
Standard Secondary DNS server will have a copy of zone data but it can only read that data,
cannot edit data. Secondary DNS server do not have ability to make any change in information
contain by them. They are mainly used as they have fault tolerance ability, provide fast access
for remote location client. Secondary decreases the load of primary server as process query if
primary DNS is not available.
Managing and organizing a domain name
Domain name managing and organizing is one of critical task in a website because every
domain name comes with an expiry date. So, if your domain name is expired and forgot to
renew in time then it will be available for any one else to occupy. A website work with help of
domain name if another person has domain name then your client unknowingly go to another
website as domain name is now not yours.
P2 Relationships between communication protocols, server hardware, operating systems and
web server software with regards to designing, publishing and accessing a website.
DNS Communication protocol
When DNS server and web server want to communicate they need a medium with help of
which they can transfer information that medium or communication protocol is DNS
communication protocol. Communication is to find of a specific IP address from a domain
name.
Server hardware:
Web server is a combination of hardware and software where both an important role in
transfer of information. Web server hardware is used to store database like document, file,
information etc. Server hard ware has some predefined program and logic which are used when
needed. Hardware has information in it which can be lost due disaster, hacker attack, any
breakdown or error in system. Information stored in server may of different kind like image,
Photograph, videos etc.
Operating System:
Operating system is an application program used as. Operating System also known as OS are
installed on the machine on basis of need of user. Using any of OS depend on the need, in few
cases more than one OS can be used on a single machine.
OS stans for Operating System which provide platform for application to run on it provide
environment to perform task on machine OS has many kinds like network, multitasking, multi
6

user, distributed, time sharing and real time OS. But it is possible with help of virtual machine or
machine has designed for using two OS. Operating System can be used online where its
functionality can be used online without installing on actual using machine, these
functionalities are provided many leading companies Amazon, Google etc.
Web server software:
is used it provide connection with help of protocol, earlier web server only supports static file
like Html, images etc. but now server support sever side application and protocol like http
which means hypertext transfer protocol also used. Less power full web server software can be
used for testing in development phase, but powerful server like apache web server, IIS web
server etc. must be used after development.
Web server software are software which provide functionally to communicate hardware and
separate it from other diversion. If server has no software support it will not function well. It
uses protocol to communicate like Http which means Hypertext Transfer Protocol. Server
software is available for global use as information in it will be transferred without depend upon
client physical location. For developer use there are server software available but can be used
only for testing purpose like XAMPP, LAMP, WAMP etc. server, for global use software like
Apache web server by Apache software foundation, IIS web server by Microsoft etc. will be
used.
M1 Common web development technologies and frameworks with regards to website design,
functionality and management.
Web development is done with help of web development technology, common web technology
is most commonly used. These technologies behave as a basic building block in developing web
pages web application.
Common Web development technologies:
Most common and popular web development technology are NodeJS, Html, Django, JavaScript,
CSS, Bootstrap. Web technology built static page, single page application, dynamic application
by which web pages and web application are built. Static pages refer to web pages where data
once filled will be change only after with help of coding, Single page application information or
data will be change not entire another page will be loaded, Dynamic application information
can be change frequently with help of server.
Web Designing is no just creating layout of client requirement and also the possible out come of
that website which makes a user-friendly environment. If interface of website is not interactive,
responsive then it will be difficult for visitor to use it. To create more audience for website a
general design must be made which help to enhance an interactive user experience.
7

Website functionality will depend upon the client need. It includes form validation, email to
contact, social media integration for feedback, file upload, file download. Website may have
many feature and functionality but more feature will un-necessary increase cost of website and
will confuse the client. SO functionally must be chosen only on the need of website and market.
Framework Techniques:
Web framework used to support web pages and web application. It also helps to access
resources like link or URL which stands for Uniform Resource Locator, web services, web API
which stand for Application Program Interface. API can be of different type like weather API tell
about current weather, Map API tell about location etc. Most common web frame work are
MVC, MVP, MVVM, MVT.
MVC defines Model View control, where model is data layer which hidden from client or user.
View is another which is visible to client and also known as User Interface. Control play an
important role as it is a medium between model and view which stablish connection which
makes task to be performed easier.
Figure 2 Model View Control
MVP acronym for is derived from MVC is used to build User Interface or UI.
MVP defines Model View Presenter which is derived from Model View control. Model is
database layer which is hidden from user. View refers to User Interface layer which is visible to
user. Presenter plays an important role in this architecture as task of communication between
both model and view stablish by presenter and present transfer the information from data
model to view by user can easily look for what is he/she looking for.
8

Figure 3 Model View Presenter
MVT is acronym of Model View Template. Model view template is used as it stablish template
integrated in html file.
MVT refers to Model View Template which is a framework to support web development. MVT
help as T that refer to template which is integrated inside Html page which makes web page
responsive.
9

Model M refers to data layer. Template T is pre-coded page. View V refers to layer which is
visible to user or client.
Figure 4 Model View Template
10

MVVM refers to Model View Viewmodel which is framework for web application. M or model is
data layer which is not visible to user but need to handled carefully. VM or Viewmodel manages
the implementation of model data in view, communication and connection model and view will
be stablished by Viewmodel. V or View refers to layer which visible to client or user and also
known as User Interface of project which handle all the UI logic.
Figure 5 Model View Viewmodel
11

M2 Review the influence of search engines on website performance and provide evidence-
based support for improving a site’s index value and rank through search engine
optimisation.
Review the influence of search engine on website performance
Search engine perform task of optimizing search result search engine perform task of searching
information online. It helps to find out information without going to that place physically. With
help of online search engine help to find out information which are not easy to get it unlock
door of information for everyone. Search engine perform task of searching information early
can be found on news paper or library but at that time manually need to search for a single
information. But now a lot information can be search with help of tool like Wikipedia, google
search engine, Bing, DuckDuckGo etc. Influence of search engine can be seen as search engine
result can be altered with help of SEO tool which refers to Search Engine Optimization. SEO help
to modify rank of search result. Actual criteria is when user enter a search in browse or search
engine then matching word website with most number of visitors will appear but SEO tool help
to bypass this criteria an SEO optimized website will be shown in higher ranking.
12

Website development tools, technologies and software
tool to design front and backend
This segment will show the tool and technology which used in web development.
P3 Relationships between front-end and back-end website technologies
User Interface or Front-End Technology:
Technology which help to design website which is known as front end, Front end of a website
can be designed with help of front end languages like Html, CSS, AngularJS, bootstrap etc.
Database or Back-End Technology:
Technology which help to manage database are known as Backend technology. Backend work is
hidden from client. Backend can be developed with help of database languages like SQL,
MySQL, MongoDB, PHP, NodeJS etc.
Example for front end and backend work together:
Frontend and Backend of a website are essential part of website without any one website not
possible. If one of them part is not prepared well then website not function well as if frontend is
not prepared well then user will face difficulty in interacting with website and if backend is not
well then website will be static.
It can be understood better with help of example describe below:
Let take example of Tumblr which is a social media and micro blogging platform. When a user
writes an article or blog on Tumblr that is saved in database first then shown to all. That
database is backend which is not shown to user only they see is frontend or User Interface.
P4 Comparison between online website creation tools and custom-built sites with reference
to design flexibility, performance, functionality, User Experience (UX) and User Interface (UI).
Online website creation tool
Tool can be used to develop a website like online website tool which help to code less and save
time. By help of these tool developers need not to write entire code by own, Template can be
used which save time. Template is chosen in such a way that it similar to client requirement.
Custom Design:
13

Custom web design tool user interface is made with help of code and logic with are decided on
the basis of analysis done on basis of client and market requirement. Due to unique design
website can be identified which help attract more visitors. For making custom design web
development languages like Html, CSS, JavaScript etc. will be used. It provides few features like
Unique design, User friendly, Adaptable.
It is not necessary, for every website we can use template. It may possible client need far
different from the template. In this situation Design will be made by developed manually
without taking help of template. Custom design is costly, consumes lot time, more effort given
to design which increases developer work load.
Comparison between online website creation tools and custom-built sites
1. Design elasticity: Custom design easily modified as developer created it by own but
design generated with help of template will be difficult to edit as not developed by that
developer.
2. Performance: Online generated design or template have better performance as they
are customized but custom design need to customized by developer which not always
possible.
3. Functionality: Custom made design have functionality according to the need of client
and market need but online generated design has fix functionality may or may not be
useful.
4. User Experience (UX): Online web creation tool help to give a better user experience as
specially designed to give better experience.
5. User Interface (UI): Online generated website has a responsive and attractive user
interface, which is moderate in custom tool.
M3 Tools and techniques available to design and develop a custom-built website.
Web development technology are used to develop web pages and web application. Website
can be developed using web development tool like HTML, PHP, CSS, jQuery etc.
1. HTML: HTML refers to Hypertext Markup Language. Html work with help of tag like to
put an image, paragraph, heading, link etc. will be done with help of tag which are
image tag, paragraph tag, heading tag, link tag etc.
2. PHP: PHP refers to Hypertext Preprocessor which is used develop web pages which are
server side which can be used as general-purpose use.
3. CSS: CSS refers to Cascading Style Sheets. CSS is performed task of deigning layout of
website and it help to modify color of background, font size, font style, fount color, etc.
4. jQuery: jQuery a JavaScript library help to add animation and create events it works as
Document object Model or DOM a tree structure representation of its element in a
webpage.
14

5. Meteor: Meteor is JavaScript framework which can be integrated with MongoDB and
use distributed database protocol.
15

Website technologies, tools and techniques with good
design principles to create a multipage website.
In this part Design documentation and development of website is discussed. Working of
website and User Interface is shown with help of wireframe and screenshot od project.
P5 Create wireframes and a full set of client and user requirements
Home:
Figure 6 Home
16

About:
Figure 7 About
17

Services:
Figure 8 Services
18

Features:
Figure 9 Features
19

Contact:
Figure 10 Contact page
20

Header Image:
Figure 11 Header Image
21

Footer Image:
Figure 12 Footer Image
22

About Us:
Figure 13 about Us
23

Services:
Figure 14 Services
24

Features Pricing:
Figure 15 Features Pricing
25

Contact Us:
Figure 16 Contact Us
26

M4 Design of multipage website
Design a web site done by making a design plan of website with help of assessment report.
Report is prepared by communicating with client by understanding its need of that project after
that reviewing its need and comparing with current market need and competition. Then
estimation of project requirement is done like estimating cost of project, tool used in
developing that project, hardware and software resources which will be used throughout the
project work etc.
Analyze the technical challenge during the website design and development
1. Requirements are not clear
Requirement of client are the main aim of developer to aim fulfill if developer miss under
stood requirement then it will lead to fanatical loss, consume more time to build project.
Requirement may be misunderstood due to communication gap between client and
developer.
2. Site will not really have done at the lunching time
If an error occur on website developer may take more than expected by this website will
not be ready at expected time.
3. It is important to launch new sites
If developer uses template for design of website then its design will be used by any other
website as template are easily available and easy to use. Then website will not have unique
design. So, have a new website design must be made without help of template.
4. Its cost too much
When estimation of cost of project is made then it is need to be understand that cost must
measured properly as in development stage or after it cost may be cross budget.
5. Plan and budget to upgrade
Website once launch need updation as with time its technology will be old and then with
time need of new layout arises. To update a website a proper plan must be made and
bugged must be taken care so as client can decide whether he want that update or not.
6. Effective content
Effective content is need of every website. As content attract visitor. If website does not
have an attractive and creative content then it will not attract audience.
27

Test Plan to review the performance of website
In this section, I will be going to explain the entire test case of ICON college website. Test case
entire plane and description of test case will be explained in below:
Test Plan:
Number Test name Description Scenario Precondition Expected
output
1. Analysis of
User Interface
Website is
performance is
as desired with
reference to UI.
Lucifer verified
for UI.
User interface
has been
effectively
verified.
Must
perform as
expected
2. Analysis
Browser
consistency
It performance
is consistent to
most browser.
Linda verified
for browser
consistency.
Dev consistency
confirmed.
Must
perform as
expected
3. Analysis
Device
consistency
It performance
consistent to
different
devices.
Mark verified for
device
consistency
Device
consistency has
been effectively
confirmed.
Must
perform as
expected
4. Analysis of
form
Authentication
Authentication
of All the forms
perform well
Jonathan check
the
authentication
phase.
Validation
authentication
has been
effectively tested.
Must
perform as
expected
5. Analysis of
Security of
website
It performance
reliable.
Rose
authenticated
for website
security.
Security has
been effectively
verified.
Must
perform as
expected
M5 Explain Quality Assurance Process
Quality Assurance Officer task is to make shore that quality of product is up to quality
standards. It also helps as if the error not known before launching project then it will become
difficult to remove them after as if reach of audience it may cause financial and legal loss.
Engineer is an enlist who maintain a report by which any error in project will be detected at
development stage. Officer will analyze the project by which the hidden error will be known at
the development time which saves time.
28

On completing development process need of quality assurance started. There are some
processes of quality assurance that are given below:
1. Read the requirements
Requirement of website is most important as if it is not checked properly then it will be
difficult to find out bug at its development stage
2. Planning the test cases
It is the second step of quality assurance process where planning of project is verified by the
quality assurance officer. After, reading the requirements engineers create a test plan case
and check that how will they perform testing. Kind of software What is the software they
will use in the website. Test cases are secondary step in quality assurance. After the report
is prepared for testing various component of project then it is decided to go further. Test
cases involves set of steps which are mention below.
3. Unit testing
In this stage project is analyzed one by one and part by part.
4. Integration Testing
Integration testing is another test case in which testing is done on the basis of verifying
document is done. In this check for project is working as single component or not.
5. System Testing
System testing is also one the testing process in this testing, checking of overall work of
website is done.
6. Performance Testing
In by analyzing project. Analyzing of project is done in this test case. Performance testing is
done by analyzing of performance of overall project is done.
7. Security Testing
If the project is not secure then it will be easily targeted by hacker which lead to security
threat. In Security Testing it verified that security of project.
8. Browser compatibility testing
Browser compatibility is most important as if a browser is not supported by website then
that website will not be access by most visitor which a development error will be.
9. Updating test cases
29

Updating a project is one of the task which will be performed after the website is launched
that require proper plan.
Test plan and review the overall test of website
Test plan review is done after all test cases are done by quality assurance officer. In this report
will contain all documentation od all test cases which help developer to review its work he/ she
can found any error in project which must be detected before the project launch.
30

Conclusion
This is to conclude that project. In this project a website is built Html, CSS, Bootstrap, and
JavaScript. This website named ClutchRocker which provide web development solution, provide
response front end development, CMS customization, Bespoke PHP development, Python web
development, JavaScript UI development etc. This website is created for managing client
website content CMS tool i.e. Content Management System like WordPress, Joomla, Drupal,
etc. It website support core PHP based product and application which provide web
development framework like CodeIgniter, Magento.
Appendix
References
31

Verisign.com. (2018). How DNS Works In Six Steps - Verisign. [online] Available at:
https://www.verisign.com/en_US/website-presence/online/how-dns-works/index.xhtml?
loc=en_US [Accessed 23 May 2018].
Tech-faq.com. (2018). DNS Server Roles. [online] Available at: http://www.tech-faq.com/dns-
server-roles.html [Accessed 23 May 2018].
Sites.google.com. (2018). Impact on Society - The Foundation of Google. [online] Available at:
https://sites.google.com/site/jurgensencompositionprojectweb/resources/technology
[Accessed 23 May 2018].
Html.com. (2018). HTML Forms. [online] Available at: https://html.com/forms/ [Accessed 23
May 2018].
Help, H., Help, C. and Hope, C. (2018). Changing link color when moving mouse over link in
HTML. [online] Computerhope.com. Available at:
https://www.computerhope.com/issues/ch000075.htm [Accessed 23 May 2018].
Htmldog.com. (2018). Customized Underlines | HTML Dog. [online] Available at:
http://www.htmldog.com/techniques/underlines/ [Accessed 23 May 2018].
Htmldog.com. (2018). CSS Dropdowns | HTML Dog. [online] Available at:
http://www.htmldog.com/techniques/dropdowns/ [Accessed 23 May 2018].
Htmldog.com. (2018). Show / Hide Navigation | HTML Dog. [online] Available at:
http://www.htmldog.com/techniques/showhide/ [Accessed 23 May 2018].
Htmldog.com. (2018). Form to Email | HTML Dog. [online] Available at:
http://www.htmldog.com/techniques/formtoemail/ [Accessed 23 May 2018].
GeeksforGeeks. (2018). Advanced JavaScript Backend Basics - GeeksforGeeks. [online] Available
at: https://www.geeksforgeeks.org/advanced-javascript-backend-basics/ [Accessed 23 May
2018].
GeeksforGeeks. (2018). Functions in JavaScript - GeeksforGeeks. [online] Available at:
https://www.geeksforgeeks.org/functions-in-javascript/ [Accessed 23 May 2018].
32