Website Design & Development: Test Plan and Performance Review

This report provides a detailed overview of website design and development, starting with an explanation of server technologies and management services, including DNS types, domain name organization, communication protocols, server hardware, operating systems, and web server software. It categorizes website technologies, tools, and software used for development, discussing the capabilities and relationships between front-end and back-end technologies and their relation to presentation and application layers. The report also compares online website creation tools with custom-built sites, considering design flexibility, performance, functionality, UX, and UI. Furthermore, it details the creation of a branded, multipage website using appropriate design principles, standards, and guidelines, supported by wireframes and client requirements. Finally, the report includes a test plan to review the website's functionality and performance, identifying key performance areas and using the plan to evaluate the site.

Website Design and Development
0

Table of Contents
Introduction......................................................................................................................................3
LO1 Explain server technologies and management services associated with hosting and
managing websites...........................................................................................................................4
P1 Identify the purpose and types of DNS, including explanations on how domain names are
organized and managed...............................................................................................................4
P2 Explain the purpose and relationships between communication protocols, server hardware,
operating systems and web server software with regards to designing, publishing and
accessing a website......................................................................................................................6
M1................................................................................................................................................7
M2................................................................................................................................................7
LO2 Categorise website technologies, tools, and software used to develop websites....................8
P3 discuss the capabilities and relationships between front-end and back-end website
technologies and explain how these relate to presentation and application layers......................8
P4 Discuss the differences between online website creation tools and custom built sites with
regards to design flexibility, performance, functionality, User Experience (UX) and User
Interface (UI).............................................................................................................................10
M3..............................................................................................................................................12
LO3 Utilise website technologies, tools and techniques with good design principles to create a
multipage website..........................................................................................................................13
P5 Create a design document for a branded, multipage website supported with medium-fidelity
wireframes and a full set of client and user requirements.........................................................13
P6 Use your design document with appropriate principles, standards, and guidelines to
produce a branded, multipage website supported with real content..........................................18
M4..............................................................................................................................................22
LO4 Create and use a Test Plan to review the performance and design of a multipage website. .23
1

P7 Create a suitable Test Plan identifying key performance areas and use it to review the
functionality and performance of your website.........................................................................23
M5..............................................................................................................................................26
Conclusion.....................................................................................................................................27
References......................................................................................................................................28
List of Figure:
Figure 1: Domain names organization and maintains......................................................................5
Figure 2: Purpose of website..........................................................................................................13
Figure 3: Communication form.....................................................................................................14
Figure 4: Image of website............................................................................................................15
Figure 5: Navigation of website.....................................................................................................15
Figure 6: Grid-based layouts..........................................................................................................16
Figure 7: Mobile friendly website..................................................................................................17
Figure 8: Home Page.....................................................................................................................18
Figure 9: contact us form...............................................................................................................18
Figure 10: Course details page.......................................................................................................19
Figure 11: Professor details page...................................................................................................20
Figure 12: Quiz Page.....................................................................................................................21
Figure 13: Email Validation...........................................................................................................24
Figure 14: Form Validation...........................................................................................................24
Figure 15: Link of website page....................................................................................................24
Figure 16: Responsive Website.....................................................................................................25
Figure 17: W3 Validation..............................................................................................................25
2

Introduction
The website is a collection of multiple web pages which includes multimedia content with the
common domain name. It publishes on the web server. The website contains back-end site and
front-end side for the user communication. It designs with the manual and online tool. HTML,
CSS, javascript, and PHP etc are webs designing language. Here, Website Design and
Development report are designed in the four parts.
In the first part, DNS server will be defined and also explained the DNS server organized and
managed properly. There will be also discussed the web server hardware, software, and operating
system. In the second part, front end and back end techniques will be explained. There will be
also compared to online website creation tools and custom. In the third part, I will be explained
website designing principle and design the website according to website designing principle. In
the four parts, website performance will be tested.
3

LO1 Explain server technologies and management services associated with
hosting and managing websites
P1 Identify the purpose and types of DNS, including explanations on how domain
names are organized and managed
DNS referees as Domain Name System that is a web server. It designs for a massive database
connection which stored domain name related information with their DNS records. DNS record
involves web host, the registrant of the domain, active name servers and so-on information. It is
also known as a name server. Overall world 13 Root DNS server which holds the whole database
of each server. DNS server are two types such as a primary server (work in one zone) and a
secondary server (work in another zone)
Type of DNS Server:
Primary or Master DNS Servers: It reads an information from web server file which located
on the hosting account for the domain zone. It also gives information to the secondary server.
Server administrators have specified the information as zone data. During zone transfer, the
primary server communicates with the secondary server and sent the data one zone to another
zone. Each Zone contains Two DNS server which offers easy communication and more secure.
After creating the zone data, primary server does not need the secondary sever copied
Secondary DNS Servers: It is also known as slave or simple server which received data from
the primary server. DNS Manager referred secondary DNS servers as a secondary’s software.
The secondary server needs permission for each function performance. It takes permission from
the master server. It can also use another secondary server as a master server. It gives security for
primary servers in the redundancy form. It also balances the load (Pcnames, 2013).
Domain names are organized and managed
Domain names contain three parts which are defined below:
 Root Name Server: All worlds have 13 root servers for the internet world. It is a cluster
of duplicated servers that is created for reliability and security purposes.
4

 Top-Level Domain (TLD) servers: It contains top-level domains such as gov, edu, net,
com, org, and country domains such jp, ca, UK, and fr etc. Company network use com
TLD server and education network use edu TLD sever in the top-level domain
 Authoritative name servers: it uses for access the organization website or application in
the publicly through the internet. The organization uses authoritative DNS server for their
DNS Records. It uses as a backup server. The organization contains own primary and
secondary (backup) authoritative name server (Userpages, n.d.).
Figure 1: Domain names organization and maintains
Source: (Userpages, n.d.)
5

P2 Explain the purpose and relationships between communication protocols, server
hardware, operating systems and web server software with regards to designing,
publishing and accessing a website
Here, I have explained the Web server Hardware, Software operating system, and
communication protocols that are used for website design, publish, and access.
The web server can mention as software (application of computer) or hardware (computer
system) that supports to the delivery of web content which is accessed through the internet
connection. The website used database server, file server, and print server. It contains IP address
and domain name
Web server Hardware:
The web server needs the hardware for the web traffic management (manage the HTTP request
on the website), General Sense and Customers View for the website.
 The website needs Professional server computers that have fast and large disk storage
space and also contain permanent IP address that helps to recognize the computer in the
network.
 There need a database server, file server, and print server for the website design and
storage their data on the server.
 Webhost needs for the Web sites that are monitoring and maintaining the website works
(Yourbusiness, 2013)
Web server Software:
The software is a collection of machine-readable instructions that perform a specific task through
computers processor. It contains both source code and machine instructions. Web server software
is used for creating and edit the HTTP files on the web server pages.
 Apache is web server software. It is public- domain open source which developed on the
Linux operating system. It gives website security and offers the source code for the
website. It has a large-scale library which completed the specific needs.
6

 Microsoft-IIS work as Internet Information Server which executed on the Windows NT
platform. It is integrated with operating systems that are easy comparing than administer.
 Nginx is high-performance HTTP server that offers a reverse proxy for the website. It
also gives rich feature set, stability, high performance, short resource consumption, and
simple configuration for the website design. It also searches threads on the website (Nani,
2013).
Web server operating system:
The operating system of the web server is run a number of the program on the server and also
kept the monitoring the user log in on the system and make ensured user does not interfere with
another user. Microsoft.NET, Windows NT Server, Advanced Server, and Windows 2000 are the
window based operating system. FreeBSD, Solaris, and Linus are the Unix-based Operating
system for the web server (Slideshare, 2010).
M1
I have used HTML, CSS, Javascript, and Jquery frameworks are suggested for the website design
which gives a user-friendly and responsive layout of the website. It gives the navigation, block,
section, animations, back end and front end connection. It also gives the communication for web
server and browser. These languages managed and controlled website functions.
M2
Website performance is dependent on the SEO (engine optimization). The website should search
engine optimization which enhanced the rank and index value of the website which increased the
organization brand value. I have used APACHE web server for the website design which gives
the SEO friendly website.
7

LO2 Categorise website technologies, tools, and software used to develop
websites
P3 discuss the capabilities and relationships between front-end and back-end
website technologies and explain how these relate to presentation and application
layers.
Back-end technologies: It developed as the server-side programming and an application layer
that can be utilized to empower convey dynamic substance and personalization on the site. Back-
end site contained three sections, for example, serve, API, and database. All backend
programming keeps running on disjoining that is a capable PC framework. The programming
interface is medium of the correspondence amongst client and web server. The database is a
gathering of the site information which separated through the client inquiry. Backend webpage of
the site is outlined with the assistance of disjoining content dialect. Usefulness and convenience
are giving the Back-end advancements. Rubby, PHP,.NET, Python, Java, and C# are the server
side content that procedure on the client question and communicate with the database and give
the valuable data. It gives dynamic web applications that have propelled highlights such sparing,
recovering information, exploring amongst pages and client approval. There is some structure
that utilized by the server side, for example, Koa, Ruby on Rails, Express.js ASP.NET, and
Django that give dynamic substance on the site. Back-end Site webpage additionally assumes a
noteworthy part of the site creation and support (Walker, 2017).
Front-end technologies: It used to design the UI (user interface) of the website that attracts the
people and improved their user experience on the website.
.
 Debugging and Testing are a noteworthy procedure of the front end advancement process
that finds the blunder and bugs amid the site execution and checked site are working
legitimate way or not. It additionally checks the usefulness of the site that pulls in the
web client
8

 Rendition Control/Git is an open source programming that controlling and following the
adjustments in the site code. The site ought to be planned most recent form that gives
propelled highlights for the web architecture.
 The site should program perfectly that enhanced the client encounter so a JavaScript
comfort (discover the mistake amid site execute on the web program) and an assessor
(permitted to alter CSS and HTML code) is utilized as a part of the front-end code.
 The site should program perfectly that enhanced the client encounter so a JavaScript
comfort (discover the mistake amid site execute on the web program) and an assessor
(permitted to alter CSS and HTML code) is utilized as a part of the front-end code.
 Jquery and JavaScript are front-end engineer tool stash that gives intuitive highlights on
the site, for example, amusements, sound and video, page movements, and looking over-
capacities. jQuery is a library that holds modules and augmentations that makes simpler
and quicker utilization of the site. It lessened the code that spared engineer time.
 CSS and HTML dialect that is utilized for making the pages. It gives the front – end of
the site that plans an easy to understand and responsive site which enhanced the User
Experience. These dialects utilized textual styles, shading, format and so on to outline
compelling GUI of the website page (Wales, 2014).

9

P4 Discuss the differences between online website creation tools and custom built
sites with regards to design flexibility, performance, functionality, User Experience
(UX) and User Interface (UI).
Here, I have explained the custom built sites and online website with their User Interface, User
Experience, performance, flexibility, and functionality.
RIA (Rich Internet Application) can be used by the web developer for the website design.
Javascript and CSS packages and frameworks are used as RIA. It makes a user-friendly and
responsive application that gives better user experience on the website. During the website
design, JavaScript has interactive functionality element that manages the event that creates by
HTML code of the website. Structured folders, file and files code of the website are designed
with the help of CSS packages and frameworks. It makes a user-friendly website with the
website Animation, layout, form, and Navigation that maintained the design flow on the
network.
Online content management systems:
CMS is a tool for the website created and maintained. It manages the users, online content, and
servers’ side application and software. Internet connection requires for the CMS which gives
Administration feature. Drupal, Joomla, and Word press are the major online content
management systems.
The advantage of CMS:
 It offers fast development for the website design with the static website approach.
 CMS offers good SEO for the website marketing.
 It designs an effective website for the organization.
 It handles a number of tasks at the time so there are implemented the third party plugins
and also improved and upgrade these plugins that give an effective website.
Disadvantages of CMS:
 It occurred the extra load on the server due to extra security patches, upgrades, backups,
and Maintained.
10

 It breaks the website if the developer does not proper configuration the CMS on the
website pages.
 It increased the project price during the training session.
 It gives the worst design for the website text (HARRISON, 2009).
Website Design:
Proposed website designs with JavaScript, CSS, and HTML code. It is a custom website which is
secure, responsive, flexibility, attractive User Interface and user-friendly website.
Differences between online website creation tools and custom built sites
Here, I have explained the Differences between online website creation tools and custom built
sites which are shown in below:
S.No. Online website creation tools Custom built sites
1. It is less expensive with the significantly
designs
It is costly compare than the Online
website
2. It is fast implemented and designs the
website.
It takes time to design and developed the
website.
3. It is well-designed, robust, and allows
customization.
It is less robust and does not allow the
customization
4. It gives the limited navigation capability
and graphics design for the website.
The developer can design graphics and
navigation according to their needs during
the website design
5. There is a security issue on the online
website.
There is less security issue.
6. The online website is less flexible and SEO
friendly.
It gives a flexible and Search engine
optimization website (Prime Design
Solutions, 2014).
11