Website Design and Development: A Comprehensive Guide

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