Softwire Website Development: A Comprehensive Guide to Design, Development, and Testing

This report documents the development of the "Softwire" website, a multipage platform designed to showcase the company's services, projects, and team. The report covers key aspects of web development, including server technologies, DNS, communication protocols, front-end and back-end technologies, design principles, and quality assurance. It also includes a detailed analysis of the website's design document, wireframes, and test plan.

P a g e | 1
Table of Contents
List of Figures.........................................................................................................................................2
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
organised 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 Evaluate the impact of common web development technologies and frameworks with regards
to website design, functionality and management............................................................................6
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................6
LO2 Categorise website technologies, tools and software used to develop websites Website
technologies:.........................................................................................................................................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).....................................................................................................................................................9
M3 Evaluate a range of tools and techniques available to design and develop a custom built
website..............................................................................................................................................9
LO3 Utilise website technologies, tools and techniques with good design principles to create a
multipage website...............................................................................................................................11
P5 Create a design document for a branded, multipage website supported with medium fidelity
wireframes and a full set of client and user requirements..............................................................11
P6 Use your design document with appropriate principles, standards and guidelines to produce a
branded, multipage website supported with realistic content........................................................11
M4 Compare and contrast the multipage website created to the design document......................17
LO4 Create and use a Test Plan to review the performance and design of a multipage website........18
P7 Create a suitable Test Plan identifying key performance areas and use it to review the
functionality and performance of your website..............................................................................18
M5 Evaluate the Quality Assurance (QA) process and review how it was implemented during your
design and development stages......................................................................................................20
Conclusion...........................................................................................................................................21
References...........................................................................................................................................22

P a g e | 2
List of Figures
Figure 1 Domain Name Structure..........................................................................................................4
Figure 2 Fetching IP address..................................................................................................................5
Figure 3 DNS Hierarchy..........................................................................................................................5
Figure 4 Home Screen..........................................................................................................................12
Figure 5 Work Screen..........................................................................................................................13
Figure 6 Service Page...........................................................................................................................14
Figure 7 About Page............................................................................................................................15
Figure 8 Contact Page..........................................................................................................................16
Figure 9 Test Plan 1.............................................................................................................................18
Figure 10 Test Plan 2...........................................................................................................................19
Figure 11 Test Plan 3...........................................................................................................................20

P a g e | 3
Introduction
The website "Softwire" is developed to provide an online platform to the company to extend and
manage the business needs. The website covers all the services provided by the company. It consists
of the brief view of the company. The company, Softwire claims to provide best software solutions
around the world. It was started in 2000 and now currently incorporates around 130 employees.
Customer Satisfaction is the major objective of the company. The company provides online solutions
to the customers. The company is a Software Solution provider and Open Source Enthusiast. They
provide services like Software Development, Web Design, Video Editing, Mobile Optimization, Cloud
and Web Analytic. They are currently working on the projects like organization Projects, web
Applications and Business Development. They have made various other projects like PayRoll System,
Hospital Management and Student Management System. Besides these, the recruitment of the new
employees is also managed through it. Through website, they provide new career opportunities.
Currently it is one of the most rapidly growing company in the market.

P a g e | 4
LO1 Explain server technologies and management services associated
with hosting and managing websites.
Website Hosting and Management: Every website needs hosting on the servers so that it can be
available for services. For dynamic websites, management is an important factor. The websites
needs to be updated in timely manner. Domain names are also needed to be acquired for any
website. The server technologies aid in providing services to other computer programs. Its main
focus is on the power. It fulfils the requested services from client programs in case of client server
model.
The following are the types of the servers:
 Application Server
 Proxy Server
 Virtual Server
 File Server
 Web Server
 Distributed Server
 Mail Server
 Blade Server
 Policy Server
P1 Identify the purpose and types of DNS, including explanations on
how domain names are organised and managed.
DNS: It stands for Domain Name Server. It can be considered equivalent to phone book of internet.
The domain names server serves us as database. The internet consists of a directory that contains
name of all the domains and it also translates them in to the IP addresses. The domain names are
easy enough to be remembered. There is a central registry that stores the information provided
from DNS over the internet.
Domain name Structure:

P a g e | 5
Figure 1 Domain Name Structure
The domain name comprises of two sections:
1. Actual Domain Name
2. Top Level Domain
Figure 2 Fetching IP address
In the above figure, the system requests the DNS server, then the DNS server recognizes its IP
address. The IP address looks like the above displayed in the figure.
Working of DNS
The DNS system makes the browsing experience comfy. With these, the users do not have to
remember those typical IP address. Instead users only have to remember their domain names that
are quite easy to remember also. The browser searches these domain names on the DNS systems
and gets the IP addresses of the requested websites. On the DNS system, the IP address of the
requested domain name is searched in the root DNS records. Upon finding the needed IP address,
the browser opens the requested website.

P a g e | 6
Figure 3 DNS Hierarchy
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.
Communication Protocol:
For accessing a website, HTTP is used as a Communication Protocol. HTTP stands for Hypertext
Transfer Protocol. It is a protocol of application layer that virtually transmits files on WWW. The
browsers are the client of HTTP as it send the request to the servers of HTTPs and then responds to
the clients. These are based on TCP/IP protocols (Flynn, 2018).
Web Server Hardware:
The web server hardware ensures to service HTTP requests in the minimum possible time. The web
server computers make use of many processors. The web server hardware should have good latency
and have good placement count. Besides these, it should have good amount of RAM.
Web Server Software:
It consists of many programs and tools that builds and manages web servers. The tools can be some
programming language or can be FTPs (File Transfer Protocol). With these the programmers can
optimize the web servers. These provides them with unique experiences that they can incorporate
for the users. The web server softwares are used to create pages and edit them.
M1 Evaluate the impact of common web development technologies and
frameworks with regards to website design, functionality and management.
Common web development technologies used for management, functionality and designing website
are as under:

P a g e | 7
 HTML5: This has a big impact on industry of web development. For inducing features such as
Geolocation, we use HTML5.
 CSS3: It is the latest version of CSS. with this, one can build attractive websites. We can make
use of this styling for watches, TV etc.
 Javascript: It consists of JavaScript framework and library. With the development AngularJS,
jQuery etc has helped developers in building internet rich applications. The browser
compatibility is also maintained by it.
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.
Search engines have their importance when it comes to browsing online. This is because
approximately more than half of the request arrives from a search engine. This is the reason why it is
crucial to optimize business websites improves ranking in the result page of search engine. The SEO
(Search Engine Optimization) service is one of the crucial service that improves the market exposure
of SME. Using techniques of search engine optimization, the small company also gets a chance to
appear in front of the big companies. The search engine provides an effective way using which e-
Commerce websites market themselves. Search engines have a huge impact on performance of an
organization. The main focus is on to improve link's placement in results at higher positions as it will
increase the probability of users selecting it. The higher the index value, more chances of getting
huge visitors.

P a g e | 8
LO2 Categorise website technologies, tools and software used to
develop websites Website technologies:
For building effective user experience and user interface, we have used front end technologies,
client side programming and presentation layers. Then for enabling personalisation and for dynamic
contents, we have used back end technologies, server side programming and application layers. We
have used various softwares, tools and techniques in order to develop this website. We have used
RIA's for enhancing the user experiences. This is done using CSS and JavaScript (Ferguson, 2014).
P3 Discuss the capabilities and relationships between front-end and back-
end website technologies and explain how these relate to presentation and
application layers.
These two terms are the most used terms in the web industry. Front end is client side while backend
is server side. The front end consists of user interfaces. It includes designing and languages such as
HTML or CSS. The backend involves how the working of the sites. It includes servers and databases
as well. The people who do work on backend are known as developers. The developers have to deal
with security, content, structure etc. Their main focus is on creating dynamic sites. The dynamic sites
keeps changing. So they are said to work in real times. It needs database to work carefully. The
people who do work on both sides are called full stack developers.
Front-end: Front end is a kind of application which mainly used by the user & experienced
by the clients or users. While working on front-end technology, we need a good developer
who has amazing knowledge about web development or web designing.
Front development is used to create a visual display. The front end development includes
HTML, CSS, and JavaScript etc. All these programming languages are used to create web-
pages, buttons, menu & all the things which are completely visible to the clients or users or
we can say are transparency.
Some technical skills required for Front-end developer. Mainly every front-end developer
needs to be perfect in these three programming languages. He/she should be good at
knowledge of these languages. These programming languages are written below:
 HTML
 CSS
 JavaScript
Back-end: As its name implies that back end is a technology which cannot be seen by users or
clients. It is just opposite to the front end technology. Mainly it includes web service server
which is basically used to host the application. Back end works like a base, on which every
work depends. Sometimes while the user is working on it, the processing becomes very slow
& this is because of back-end issues or problems (Dasari & S., 2014).

P a g e | 9
Technical skills required for a back-end developer:
 Ruby
 MongoDB
 Python
 MySql
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).
Nowadays all the websites are being made with the help of templates. But we are using only
online website creation tools. By using the templates, websites work more quickly as
compared to before. Online website creation tools are known as constant management system
(CMS).
Nowadays the most popular & most commonly used online website creating tools are
WordPress & Constant management system (CMS).
Advantages of templates: We have so many advantages of templates. But we are going to
discuss some of them which are more important. These are listed below:
 Template sites are comparatively less expensive than regular custom sites.
 Implementation of template sites is fast.
 If project is simple, template is the best option.
Disadvantages of templates: There are many disadvantages of using website template. Some
of the limitations would be:
 Sometimes graphical user interface looks similar to regular custom sites.
 Modifications in graphic design are quite difficult.
 Management issues occur in templates. So these will not be well managed.
 The main issue is regarding security.
UX/UI Design: It is called User Experience/ User Interface. UX/UI is used for the designing
of a user interface for software or machine, such as mobile device, computer, home usages
and various electronic devices. This designingis very difficult to work together (D'Souza & A.,
2018).
 UX makes interface easy.
 UI helps to achieve goals.
 UX designing is done very first.
M3 Evaluate a range of tools and techniques available to design and
develop a custom built website.
In website development, there are so many online website development tools which we can
be used to develop any kind of websites. These are used to make any regular or custom

P a g e | 10
website tools etc. These website development tools help us to make our websites look
attractive.
JavaScript libraries: JavaScript libraries are the most commonly used computer
programming language. Some of the libraries in JavaScript libraries are as follows:
 jQuery: It features all the JavaScript libraries.
 jQuery Mobile: Mainly it is used to create responsive websites.
 Moment.js: It manipulates & validates in JavaScript.
 React: The Facebook JavaScript libraries are basically used to create user interface.
Front-end frameworks: Front-end frameworks include many kinds of files & folders like
HTML, CSS, JavaScript, images etc. Though we are having so many libraries in front-end
frameworks, we are going to discuss some of them which are most important. & these are as
follows:
Foundation: Foundation is a kind of group which includes so many front-end frameworks. It
is used to make so many responsive websites & User interface designs.
Bootstrap: HTML, Cascaded style sheets & JS are used to create responsive websites &
project of mobile phones & tablet.
Uikit: This frame work is used to make powerful interface & fastest processing.
Programming languages: Programming languages is a set of instruction which is provided
by us to the computer because it knows only this language. Moreover, we can communicate
only in these programming languages.
Python: Python is the programming language which gives the fastest modules & power to do
work in combined system also.
HTML5: This is a hypertext mark-up language. It is a linked language between XHTML &
HTML.
PHP: PHP is a kind of programming language which is a scripting language and this is used
for developing websites.
Databases: Database is a kind of group which includes information from any folders or files.
In database we can change the data, we can update & can manage the data in database.
Mysql: This is the most commonly used database. It is also called as open source database.
MariaDB: This is already an open source database. Now it is becoming the most commonly
used database in IT sectors.

P a g e | 11
LO3 Utilise website technologies, tools and techniques with good
design principles to create a multipage website
P5 Create a design document for a branded, multipage website supported
with medium fidelity wireframes and a full set of client and user
requirements.
In this, the requirements of the users are to construct a website that can be utilised for the business.
The website should provide all the business features to the company. The client provided
requirements like the website should have navigations like Home, Work, Services, About and
Contact. It should feature all the services provided by the company. The worked projects and those
which are currently ongoing in the company. For this a fully flexible system is needed to be
constructed with an accurately working database. The database and the system should be tested
properly so as to minimise the chances of failure of the system (Grannell & C., 2017).
P6 Use your design document with appropriate principles, standards and
guidelines to produce a branded, multipage website supported with
realistic content.
1. Home Screen of the website includes description about the website. The main service areas
of the company, its services, projects etc. This will be the first page which the user sees on
his screen. This is made very attractive so as to attract more users. This will increase the
index value of the website which will ultimately cause the business profits.

P a g e | 12
Figure 4 Home Screen

P a g e | 13
2. This is page for work. It includes all the work description of the company. On this page the
users can review the organization work.
Figure 5 Work Screen

P a g e | 14
3. This is the page of services. This will include all the services provided by the company along
with their detailed description.
Figure 6 Service Page

P a g e | 15
4. This is about page and will include all the information and knowledge related to the
company. It also consist of description about its team and team work.
Figure 7 About Page

P a g e | 16
5. This is the contact page. This will include details about contacting company. All the contact,
addresses and emails are mentioned on this page. Using them, one can easily contact the
company.
Figure 8 Contact Page

P a g e | 17
M4 Compare and contrast the multipage website created to the design
document
In multipage website & single page website, there is no bigger difference. Scenario is almost
same but the difference is in the content. Let suppose we made a website for an e-commerce
company. We are having 2-3 pages like HOME, ABOUT US, CONTACT US, SALE etc.,
then all the pages are of same pattern. We just changed the content only. Even UI (user
interface) will the same in all the pages. HOME page provides basic information about the
working and properties of the company. In ABOUT US page there will be all the information
of the company like what they do, what kind of services they provide etc. & in CONTACT
US page, contact details of company will be provided like mobile no., e-mail id, Fax etc.
Design document: Design document is the very initial point for any document or project.
Even sometimes we have to make a design document first before starting the original
document. It is a kind of document file in which we make a pre-planning that we are going to
make our new website & how we will develop it. This process is step by step process for
developing the website.

P a g e | 18
LO4 Create and use a Test Plan to review the performance and design
of a multipage website
P7 Create a suitable Test Plan identifying key performance areas and use it
to review the functionality and performance of your website.
Test plan 1: Responsiveness of website.
Expected Result: The website should be responsive on devoices like mobile phones.
Outcome: Website is responsive on different platforms.
Remark: Successful.
Figure 9 Test Plan 1

P a g e | 19
Test plan 2: On clicking the icon of Softwire, the website should be navigated to home page
Expected Result: The website navigates to home page.
Outcome: Properly navigated to home page.
Remark: Successful.
Figure 10 Test Plan 2

P a g e | 20
Test plan 3: Send Message.
Expected Result: The message should be sent.
Outcome: Message sent.
Remark: Successful.
Figure 11 Test Plan 3
M5 Evaluate the Quality Assurance (QA) process and review how it was
implemented during your design and development stages.
We have properly analysed this website in order to assure the quality. All the issues and problems
have been successfully identified and resolved while developing this system. This developed system
is free from any loop hole and there are very less chances of error or failure of the system. Every
module has been developed according to the user requirements so as to make it a robust system.
Testing is done on individual modules first then on the whole system. Responsiveness of the website
has also been achieved which was the main factor for whom we needed to remain careful.

P a g e | 21
Conclusion
The report consists of documentation about the website "SOFTWIRE". It discusses all the aspects of
the system. This document provides all the details about the website. The website is developed
according to the user requirements and it fulfils all of them. It consists of detailed description about
every key point. The website is a fully functional system. The website consists of the description
about the service areas of the company, then it describes the services provided by the company. The
website also consist sof the projects done by the company. It also hold its brief description about the
company and its team members. It also comprises of the contact details in it.

P a g e | 22
References
 Flynn C. (2018). Differential.com. Retrieved from https://differential.com/insights/14-
technologies-every-web-developer-should-be-able-to-explain/
 Dasari, S. (2014). How To Design An Effective Test Automation Framework. Evoke
Technologies Blog. Retrieved from https://www.evoketechnologies.com/blog/test-
automation-framework-design/
 Ferguson N. What's The Difference Between Frontend And Backend?.
(2018). Careerfoundry.com. Retrieved from https://careerfoundry.com/en/blog/web-
development/whats-the-difference-between-frontend-and-backend/
 Grannell, C. (2017). 25 top-class website templates. Creative Bloq. Retrieved from
https://www.creativebloq.com/web-design/best-website-templates-11513881
 D'Souza, A. (2018). How to Write an Effective Design Document » "Hello World" – The
SlickEdit Developer Blog . Blog.slickedit.com. Retrieved from
http://blog.slickedit.com/2007/05/how-to-write-an-effective-design-document/