Web Development 2019

Table of Contents
Part 1............................................................................................................................................4
P1: Identify the purpose and types of DNS, including explanations on how domain names are
organized and managed................................................................................................................5
Introduction..............................................................................................................................................5
Domain Name System(DNS).....................................................................................................................5
Types of DNS:............................................................................................................................................6
1. DNS Resolver:...................................................................................................................................6
2. DNS Root Server:..............................................................................................................................7
3. Authoritative DNS Server:................................................................................................................7
P2 : Purpose and relationships between communication protocols, server hardware, operating
systems and web server:...............................................................................................................9
Communication Protocols.........................................................................................................................9
Server Hardware.....................................................................................................................................10
Operating systems..................................................................................................................................10
Web Server Software..............................................................................................................................11
M1: The impact of common web development technologies and frameworks.............................12
Web development technologies:............................................................................................................12
Web Development Frameworks:............................................................................................................13
Website project management.....................................................................................................14
M2 Influence of search engine website performance:..................................................................15
complicated but without good UI................................................................................................18
Part 2..........................................................................................................................................18
Introduction............................................................................................................................................19
P3 :Discuss capabilities and relationships between front-end and back-end website technologies
and explain how these relate to presentation and application layers..........................................20
Front-End and Back-End website technologies.......................................................................................20
Relationship between Front-End and Back-End website.........................................................................23
Front-end and Back-end website related to presentation and application layers...................................23
Testing and Debugging............................................................................................................................24
P4: Differences between online website creation tools and custom built site with regard to design
flexibility, performance, functionality, user experience (UX) and user interface (UI)....................24
Introduction:...............................................................................................................................24
Flexibility................................................................................................................................................25

Microsoft Office User

1
 Web Development 2019

Performance...........................................................................................................................................25
Functionality...........................................................................................................................................25
User Experience......................................................................................................................................26
User Interface.........................................................................................................................................26
M3: Evaluate a range of tools and techniques available to design and develop a custom built
website.......................................................................................................................................27
Previously I talked about the online website creation and custom built sites. There are different
tools and techniques that are used for designing website. Online and offline tools and techniques
can be found for designing websites. So here I am going to some important website designs and
tools and techniques used to design and develop a custom built websites...................................27
Some of the important website design area are:.........................................................................27
Some of the tools used for website designing are:.......................................................................27
Adobe Fireworks:........................................................................................................................27
Adobe firework is one of web designing tool which is a commercial raster and vector graphics
editor. Adobe firework is available for both MAC and windows operating system. Adobe firework
brings a plethora of tools and options for web designers that make full web layout. With Adobe
firework or the page panel of Adobe firework it is possible to create and organize master and sub
pages, and then export working HTML and CSS files. Just using Fireworks it is possible to create
an entire functional static website...............................................................................................27
Dreamweaver:............................................................................................................................27
Dreamweaver is also one of the commercial application foe web development which is available
for both operating system, MAC and Windows. Dreamweaver tightly integrates with popular
Adobe products such as Photoshop which allow user to share Smart Objects for quick and easy
updating and editing of graphics components. The features and option of Dreamweaver includes
a built-in FTP client, project management and workflow options that make team work effortless,
syntax highlighting and very smart code Hinting.........................................................................27
Panic Coda..................................................................................................................................27
Panic Coda is another application for web development available for MAC OS X operating system.
Is functions very well so that it seeks to reduce the amount of application such as CSS editor, a
version control system, FTP client, etc. Coda’s one-window web development philosophy uses a
tabbed interface for text editing, SVN, CSS, file transfers. Panic coda is simple and intuitive
interface......................................................................................................................................27
Firefox Developer........................................................................................................................28
Firefox Developer is a version of Firefox which is developed specially for web developers, among
others tools to provide the greatest assistance with web development need of developers. Its
features include building and designing with CSS Grid, HTML inspector, analyzing and debugging,
Style editor where developer have access to all their Dev Tools...................................................28
Technologies used for website designing are:..............................................................................28
D1: Tools for custom built website:..............................................................................................31
Selected techniques for developing custom built website:.....................................................................32

Microsoft Office User

2
 Web Development 2019

Conclusion...................................................................................................................................33
Here in part two, I talked about the capabilities and relationships between exist between front
end and back end technology and explained more about the relation of presentation and
application layers. I have discussed the differences between online website creation tools used
with regards to design flexibility, performance, functionality and user experience and interface.33
After, that I have evaluated the range of tools and techniques which helps in design and develop
a custom build website like HTML, CSS, JavaScript, etc. Also I discussed differences between
online website creation tools and custom built sites with regards to design flexibility,
performance, functionality, User Experience (UX) and User Interface (UI). These days there are so
many online website design sites like [Link], [Link] and so on. I have also produced an
appropriate documentation that outlines the necessary stuffs as required for the completion of
this task. I have also evaluated a range of tools and techniques available to design and develop a
custom build website. And finally I justified the tools and technology that I used in designing and
developing my site......................................................................................................................33
PART 3........................................................................................................................................34
P5 Create a design document for a branded, multipage website with medium fidelity wireframes
and full set of clients and users....................................................................................................35
Technologies used in development of website:............................................................................36
Application used in development of website:...............................................................................37
P6 Use your design document with appropriate principles, standard and guidelines to produce a
branded, multipage website supported with realistic content.....................................................37
Principle of design:......................................................................................................................38
Design interaction:......................................................................................................................40
Home Page:.................................................................................................................................40
M4 Comparison between Design document and Multipage website:...........................................70
D2 Critically evaluates the design and development process against your design document and
analyze any technical challenge..................................................................................................75
Design and development process:...............................................................................................75
Technical challenges in web development:..................................................................................77
Website testing:..........................................................................................................................80
Integrated Testing:..................................................................................................................................80
Critical Review.............................................................................................................................86
Introduction................................................................................................................................87
Quality Assurance (QA) is defined as an activity to ensure that an organization is providing the
best possible product or service to customers. Quality Assurance (QA) ensures that end-users get
a functional user interface and the best user experience when using a web app or website. It
examines a website or web application to try and uncover any flaws that might have been
overlooked during design and development. Quality Assurance usually involves:.........................87
Conclusion:..................................................................................................................................88

Microsoft Office User

3
 Web Development 2019

D3: Critically evaluates the results of your Test Plan and includes a review of the overall success of
your multipage website; use this evaluation to explain any areas of success and provide justified
recommendations for areas that require improvement...............................................................89
Some Criteria for Evaluating Peaceful tours and travels Website:...........................................................89
Design and stability:....................................................................................................................................................89

In this newly designed website, the designer gives most priority to stability its duration so that
there are no any problems like page loading error and have been made consistently available to
all the users. High resolution images have been used, using heading elements, using hypertext
link so that user can have clear view. All sorts of information have been designed by designer so
that every user can use it and have a clear perception about Rainbow Airlines...........................90
Authority and Accuracy:..............................................................................................................................................90
Recommendation:.......................................................................................................................................................91

Bibliography................................................................................................................................93

Part 1
1. As a part of your first task you are required to prepare a report identifying the purpose and
types of DNS, including explanations on how domain names are organized and managed and
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. You are required to present the relationships between domain names, DNS
services and communication. You are also required to document the overview of publishing
and managing secure websites, including search engine indexing and ranking. Your document
must include the explanation and purpose and relationships between communication protocols,

Microsoft Office User

4
 Web Development 2019

server hardware, operating systems and web server software with regards to designing and
accessing a website. You may consider the differences between web server hardware, software
and host operating systems. You may also consider the advantages of an integrated database
system with regards to expanding website capability and common web development
technologies and framework.
2. With reference to your previous task you are required to present a document that evaluates
the impact of common web development technologies and frameworks with regards to website
design, functionality and management.
3. 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 optimization.

P1: Identify the purpose and types of DNS, including explanations on how domain names are
organized and managed.

Introduction

As given scenario, Web-solution Technologies Pvt. Ltd is a leading web Hosting reseller and domain
registration with reseller Option Company in Nepal since 2007. The company deals with top level
technician and company. It works with top web hosting company of USA so that the price for us is
very affordable with high quality service for regular business relationship. As I have been hired as a
member of a Web Administrator Group I am going to explain the server technologies and
management services associated with hosting and managing websites.

Domain Name System(DNS)

The domain name systems (DNS) is the internet services that internet domain names are located and
translated into internet protocol (IP) address which computer used to locate a website because
domain names are alphabetic, and they are easier to remember. DNS uses a hierarchical naming
scheme and distributed database of IP[ CITATION Joh \l 1033 ] addresses and associated names.
DNS is assigned as a name and attached to the IP address. So for example, [Link] is the IP
address associated with [Link]. Instead of having to search by the IP, one uses the URL [Link]
and links to that IP address and finds the website. In fact, the DNS system is its own network.

Microsoft Office User

5
 Web Development 2019

The purposes of DNS are:

1. The sole purpose of the DNS System is to make our browsing more comfortable.
2. DNS translates domain names into IP addresses, allowing us to access an Internet location by
its domain name.
3. To support high performance, availability and scalability through the use of data hierarchies,
data replication, and caching.
4. Defines overall naming structure of the Internet.
5. Maintains a portion of the domain name spaces, resolves, lookups and maintains a cache.
6. Also works in a similar way by associating a unique IP address with each domain name,
which can be called as the Internet’s equivalent of a phone book.
7. DNS simply is used to resolve human-readable host-names.

There are various DNS servers which are classified on the basis of their functions. These functions
might include: query forwarding, answering the queries, look-up in the database, etc. and the types of
DNS are explained below:

Types of DNS:
1. DNS Resolver:
A DNS resolver, is designed to receiver DNS queries. DNS resolver includes a human-readable
hostname, for e.g. [Link], and is responsible for tracking the IP address for that hostname. A
DNS Resolver, often known as “DNS lookup” tool and this tool acts as a link between your
computer and the Internet’s DNS infrastructure. It manages DNS requests for all the clients in the
network as it stores a central database of DNS name servers. With such DNS resolvers, your
computer does not need to go through a difficult process of storing addresses for multiple online
name servers. With transparency, it can also avoid certain types of Internet frauds or scams, and help
in making e-commerce accessible to a wider audience. The IP provides contain much more
information on where the hardware is operating the web project and who has ownership or control of
the particular Web space. So, DNS resolver is important in Internet research and making the Internet
more transparent for users.
2. DNS Root Server:
DNS Root Server is a fundamental column of the internet, and essential for name resolution in
the DNS where the domain name (e.g. ‘[Link]’) is translated into an IP address. The root

Microsoft Office User

6
 Web Development 2019

server is the first step in the journey from hostname to IP address. It extracts the Top Level Domain
(TLD) from the user’s query, for e.g. [Link] and provides details for .com TLD Name
Server. So that server will provide details for domains with the .com DNS zone, including
“[Link]”. there are 13 root servers worldwide and its uses exactly 13 DNS servers at the root of its
hierarchy. . The number 13 was chosen as a compromise between network reliability and
performance, and 13 is based on a constraint of Internet Protocol (IP) version 4 (IPv4). Moreover,
the emerging IP version 6 standard does not have such low limits on the size of individual datagrams
so we can expect the future DNS to contain more root servers to support IPv6.
3. Authoritative DNS Server:
The Authoritative DNS Server is the last stop in the name server query where it takes the host name
and returns the correct IP address to the DNS resolver. In the DNS hierarchy Higher level servers
defines DNS server as the “authoritative” name server for a specific hostname. Meaning that it holds
the up-to-date information for the hostname. For instance, if you try to enter a domain name in your
web browser, a DNS query is sent to your ISP. The ISP then contains recursive server, which has the
required information cached in its memory. In case the data is outdated, the recursive server needs to
find the IP elsewhere then it searches in other recursive servers first and if it cannot find it there, it
needs to get the IP address from an authoritative DNS server. The authoritative DNS servers can be
found where the website is hosted or where the DNS provider is. It has two labels; which are
separated by dots (.) for e.g. ([Link]). and the labels are limited to sixty-three characters which are
taken from a ASCII character set.

Since the Internet has no central government, the assignment of space (IP, DNS, ASN) on the
Internet is strictly managed by the following organizations which are responsible for creating new
and maintaining current top-level domains.
(ICANN) Internet Corporation for Assigned Names and Numbers
(IANA) Internet Assigned Numbers Authority
Operators of Top Level Domains (like Verisign).
Accredited registrars (like GoDaddy)
Importance of DNS in web development:
 The internet is a global network due to Domain Name Server. The DNS helps in browsing the
internet.
 The DNS server provides faster connection to a network. The organization and the companies
which have DNS are able to benefit of high connection speed.

Microsoft Office User

7
 Web Development 2019

 DNS helps to specify the technical functionality of the database service and also helps in
balancing of loads in a server.

Domain Name:
A domain name is an identification string that defines a realm of administrative autonomy, authority
or control within the internet. It is formed by the rules and procedure of the Domain Name Server.
Domain name is an Internet Protocol (IP) resource such as a personal computer used to access the
internet, a server computer hosting a web site, or any other service communicated with the internet.
The domain name consist of two parts, the actual domain name and Top level domain name (TLD)
for case, in “[Link]”, ‘Google’ is the actual domain name and ‘.com’ is Top level domain
name.
Generic Domain Name
Domain name Meaning
.edu Education
.gov Government
.org Non-profit organization
.com Commercial Business
.net Network Organization
Country level Domain name
.np Nepal
.in India
.au Australia

Conclusion:
In conclusion, Domain Name System is an amazing technology whose job is to find the IP of the
given domain names. It maintains a directory of domain names and translates them to Internet
Protocol addresses. It might be easy for people to remember the domain names but the computers or
machines, access websites based on IP addresses and this is where DNS comes into play. It contains
a set of specialized servers which have only one purpose which is to connect the IP addresses with
the corresponding domain names.
P2 : Purpose and relationships between communication protocols, server hardware, operating
systems and web server:
As we define website as a central location of various web pages that are all related and cane be
accessed by visiting home page. Website can be visited in the browser by using website address
Uniform Resource Locator (URL) for e.g. [Link] For the design and creation of
website we need operating system, hardware, software etc. So in this task I am going to explain

Microsoft Office User

8
 Web Development 2019

about the purpose and relationships between communication protocols, server hardware, operating
systems and web server software with regards to designing, publishing and accessing a website. A
web browser allows a computer to communicate with web servers around the globe and gives you
the right information with just a few clicks.
Communication Protocols
A standard set of rules that allow electronic devices to communicate with each other is defined as
protocol where communication protocols are formal descriptions of digital message. Communication
protocols describes the syntax, synchronization and semantics of analog and digital communications
which cover authentication, error detection and correction, and signaling. Communication protocols
are required to exchange messages in or between computing systems and are required in
telecommunications. There are many communications protocols that are used in analog and digital
communication where communication protocols are implemented in hardware and software.
The different types of protocols are:
Hypertext Transfer Protocol (HTTP):
A HTTP is a classic ‘client-server’ protocol which is the set for transferring files, graphic images,
sound, video, and other multimedia files on the World Wide Web. HTTP is an application protocol
which runs on the top of the TCP/IP suite of protocols.
File Transfer Protocol (FTP):
A standard internet protocol which is a client/server protocol used for transferring files to or
exchanging files with a host computer.
User Datagram Protocol (UDP):
UDP is a connectionless and very important in the field of client/server part. It helps to send the
small data grams with having the establishment of connection.
Transmission Control Protocol(TCP): TCP is a network communication protocol which helps to
send data packets over the internet. TCP is a transport layer protocol in the OSI layer and is used to
create a connection between remote computers by transporting and checking the delivery of
messages over supporting networks and the Internet. It helps in transfer of data between two clients.
Simple Mail Transfer Protocol (SMTP):
SMPT provides the ability to send and receive email messages. It is an application layer protocol
helps in transmission and delivery of email over the internet.
Server Hardware
A server hardware is also called Computer server, platforms and servers, hardware server,
workgroup servers.

Microsoft Office User

9
 Web Development 2019

A web server runs on a physical hardware to store the website data and deliver them to site visitors
on their request which is made with just some clicks. The hardware has the job to make sure that the
HTTP requests are serviced to a minimum response time to manage the web traffic and also to meet
the customer’s expectations. The server hardware is a important part of IT infrastructure and
performs a large number of task at a time. The server work through the port connected with network
request such as interaction between web server and web browser. When we click on link, the server
take place a certain work behind the scene and the request for web pages send to the corresponding
web server, the server takes the results and display on the pages through using a HTTP protocol.
Operating systems
An operating system (OS), is software that allows a user to run other application in computing
device. It is possible for a software application to interface directly with hardware because of the
operating system. The operating system provides services to facilitate execution and management of
memory allocation for any software application programs. The operating system can be used by
making request for services through a defined application program interface (API), and users can
interact directly with the operating system through graphical user interface (GUI) or command line.
Operating System allows to take advantage of common libraries and specific hardware.
Some of the Operating System for designing, publishing, are:
 Windows,
 Mac OS,
 Linux,
 Chrome OS, etc.
The OS manages memory allocation, processes of programs running…files, network ports. When the
PC is first switched on, a tiny program in a chip called BIOS is loaded into the memory. That BIOS
program has a list of orders such as to check the RAM and hard disk called boot priority. When the
program finds a file called boot loader in the media, the program should load the boot loader in a
particular place in memory…start running the boot loader and its job is done. It manages resources
as said earlier (memory, network, storage, I/O, ports etc.) and attempts to keep everything working
efficiently and securely.

Web Server Software

A web server software is used by servers, computers in order to make files and programs available to
other computers. A web server software software which is destined to be used, operated and
managed on a computing server. A web server software provides and facilitates the harnessing of

Microsoft Office User

10
 Web Development 2019

underlying server computing power for use with an array of high-end computing services and
functions. A web server software is built to interact with server’s hardware infrastructure, including
the processor, memory, storage, input/output and other communication ports. There are many types
of Web server software and some popular of them are:
 Apache,
 Microsoft’s Internet information Server (IIS),
 Novell’s Web Server,
 iPlanet Enterprise software,
 MacHTTP, etc.
Apache aim is to develop and maintain an open-source HTTP server for modern operating systems
including UNIX and Windows NT and the hardware. Web server from Microsoft (IIS) provides web
application infrastructure for Windows server.
Web server is the software which answers the request for web resources. Once contact has been
made, Web server is just a computer system connected to the Internet using a particular IP address.
This is just like your computer system and it has directories, files like music, images, database, web
pages (html, PHP, asp, etc.).
Relationship between communication protocol, server hardware, operating system, and web
software.
An operating system is defined as an application which is run on a computer. Some common
examples of operating systems are Windows, Macintosh, Microsoft Disc Operating System (which is
abbreviated as MS-DOS), Linux, etc. On the other hand, an application software program is a class
of computer applications that enables the user to perform a required task by using the full capabilities
of his or her personal computer directly. System software applications are those applications that
play a direct role in integrating the various capabilities of a computer. Operating systems directly
communicate with the hardware. Computer operating systems perform basic tasks, such as
recognizing input from the keyboard, sending output to the display screen, keeping track of files and
directions on the storage drives, and controlling peripheral devices, such as printers. System software
applications are those applications that play a direct role in integrating the various capabilities of a
computer. However, a system software program does not usually apply the capabilities of a computer
directly to the performance of the task at hand. In that sense, it can be said to be in direct contrast to
an application software program.
For example, the hardware exposes operations such as writing in memory, doing arithmetic
calculations and so on, which the kernel uses to expose more complex functionalities to the operating

Microsoft Office User

11
 Web Development 2019

system, such as access to data storage, network, etc. the operating system in turn exposes other type
of functionalities to the programmers.

In conclusion, knowing how a website works is crucial for a company’s success. There is the
physical server that houses website’s data, such as HTML text, images, CSS style sheets, and
JavaScript files and supports the exchange of data between devices connected to the internet, such as
your computer. Web servers are the programs that make use of different communication protocols to
serve the files that form web pages and a website as a whole. The knowledge of how these hardware
software, communication protocols, web server software and the operating systems which they run
on, provide a better understanding of how the data is being delivered to site visitors. This leads to
choosing the right web hosting company to store all the site’s data for securing a brighter future.

M1: The impact of common web development technologies and frameworks.

Web design is the process of designing and developing websites which enclose different skills,
disciplines, tools and techniques. It includes webpage layout, content production, and graphic design.
There are different technologies and frameworks that are build for web developers to develop the
website.
Web development technologies:
Web development technologies are defined as means by which computers communicate with each
other using markup languages and multimedia packages. In another language, Web technology is the
development of the mechanism that allows two of more computer devices to communicate over a
network. For instance, in a typical office setting, a number of computers plus additional devices such
as printers may be interconnected via a network, allowing for quick and convenient transmission of
information.
It gives us a way to interact with hosted information, like websites.
The different types of web development technologies are:
 Mark-up languages, such as HTML, CSS, XML, CGI, and HTTP.
 Programming languages such as Java, Visual Basic, C#.
 SQL, etc.

Advantages of web development technologies:

 Web development technologies offers convince a high speed of communication in the
computer world.

Microsoft Office User

12
 Web Development 2019

 Web technology allows messages to be sent around a system, whereas before it may have
been necessary to employ a runner or leave workspace to communicate a message.
 Web designed has been designed to make it very easy for search engines to search our site.
 Wen technology has an open architecture means no company owns or controls the software
that we use to built and run our site.
 Web technology helps to reduce the work time as well as reduce the cost because of the use
of an architecture.

Disadvantages of web development technologies:

 Web technology can be very complicated, and it would be difficult for someone without
relevant experience.
 The existence of a network provides the opportunity for an attack on the computer system.
 Important information could be stolen or destroyed and malware could infect the various
network systems.
Web Development Frameworks:
Web development framework is a software framework that is created to support the development of
dynamic sites, web services and web applications. Web application frameworks provide a structured
environment for software development and deployment. These open source tools allow developers to
work within a standardized system to create and manage small and large applications alike.
Frameworks typically take all the difficult, repetitive tasks in setting up a new web application.
The different types of web development frameworks are:
 Express
 Ruby on Rails
 Django
 Angular
 [Link]
 METEOR
Advantages of web development framework:
 Frameworks are built to make building and working with programming languages easier.
 Most popular frameworks are free, so it helps the developer to code faster, the cost for the
final client will be smaller.
 A widely used framework has big security implementations.

Microsoft Office User

13
 Web Development 2019

 As any other distributed tool, a framework usually comes with documentation, a support
team, or big community forums where we can obtain quick answers.

Disadvantages of web development framework:

 Framework has limitation. That the framework’s core behavior can’t be modified.
 Performance issues are relevant today, when it comes to frameworks. The performance slows
down when the framework is using JavaScript.
 With single framework, it is impossible to achieve everything for developers.
 CMS require less experience and expertise than most of the frameworks, which means if you
are hiring someone to do the job for you, the developer specializing in frameworks will be
more difficult to find and costlier to hire.
Website project management:
Website project is a process of developing and creating a website, activities in a network which are
aimed to achieve a goal. The network can be both accessible for everyone or only for a certain
people. It should be based on TCP/IP (Transfer Control Protocol/Internet Protocol) technology and
concern the transfer of static and dynamic content. There are various kinds of project management
tools for managing the website project. The tools helps project manager and teams to estimate all
client requirements, time, budget and scope. There are many tools available for project management
so it is quite confused to choose right tools and where to begin with. The some project management
tools are discussed below:
 Jira:

Jira is an agile project management tool used by development teams to plan, track, and release
software. It is a popular tool designed specifically and used by agile teams. Aside from creating
stories, planning sprints, tracking issues, and shipping up-to-date software, users also generate
reports that help improve teams, and create their own workflows. It also integrates with many tools
that enable teams to manage their projects and products from end to end. It also helps in managing
the overall process of development of software making certain that all the things are covered from
concept to launch.
 AceProject:

AceProject is a web-based project tracking software that helps manage projects from end to end. It is
a complete project management solution for individuals, teams and enterprises that need to take
control of their important workflows and leave nothing to chance. AceProject provides the tools for
projects to remain on time and on budget with its time and expense tracking features. Entering time
is very easy, almost automated, and convenient with a Time Clock. Users can easily stay on top of all
their projects with a project Dashboard that gives instant information with color-coded graphs and

Microsoft Office User

14
 Web Development 2019

details. With Gantt charts, they can view the intricacies of a project and its progress to be able to
make informed decisions and necessary actions.

Conclusion
The functionality of a website development technology and tools is the interactive part of the site -
that which allows the visitor to respond in some way, thus turning the visitor into a customer Web
development technologies and frameworks are the backbone of website development. Both plays
important role in the website development regarding web design functionality and management.
Some web technologies and frameworks may be complicated but without them a website wouldn’t
be nice and having good UI.

be nice and having a good UI.

M2 Influence of search engine website performance:
Search engine optimization is the methodology of strategies, techniques and tactics used to increase
the amount of visitors to a website by obtaining a high-ranking placement in the search results page
of a search engine (SERP) including Google, Bing, Yahoo and other search engines. Its main
function is to enhance a website to better the chances of it ranking highly in the search engines.
Search engine allows Internet users to search for content via the World Wide Web (WWW). A user
enters keywords or key phrases into a search engine and receives a list of Web content results in the
form of websites, images, videos or other online data”[ CITATION Tec10 \l 1033 ]. Search engines
allow users to search the internet for content using keywords. Although the market is dominated by a
few, there are many search engines that people can use. When a user enters a query into a search
engine, a search engine results page (SERP) is returned, ranking the found pages in order of their
relevance. How this ranking is done differs across search engines. Search engines often change their
algorithms (the programs that rank the results) to improve user experience. They aim to understand
how users search and give them the best answer to their query. This means giving priority to
the highest quality and most relevant pages.
The search engine has major influence in the performance on a website. The major influence of
search engine in website performance are:
1. Website load speed:
It is the factor to determine the performance of website although the SEO takes speed to display
the content and requirements into account meet by search engine and give the rank of the

Microsoft Office User

15
 Web Development 2019

website. Google started using page speed as a ranking factor, meaning that faster pages would
earn higher SEO rankings than slow ones.
2. Mobile Friendliness:
Today mobile is the name of the game and even if we don’t have a mobile application, it’s
important to ensure that our regular web application is Mobile First. Most of the people of the
world used the mobile phones to search the required contents through use of search engine. . It
makes the search engine to make mobile phones based search engine to increase the
performance of website

3. Review Your Web Hosting:

There should be a close relationship exists between website speed and search engine. Since the
website speed also depends so much on the quality of your web hosting. For example, a shared
hosting account often involves sharing server space with dozens of other companies where
website speed is impacted by the number of people using the servers. If this is the case, then it
may be time to consider a dedicated plan where you have sole access to the server.
4. Carefully Placed Header Tags:
Readers are put off by large walls of text. Do them and favor and organize your website content
in a way that is easy to read and follow. Search engines also give higher preference to keywords
inside of header tags. In fact, the key to optimizing your SEO is to focus on the H1 tag.
5. Image optimization:
The best way to signal the relevance of an image to a search engine is by relevant keywords.
The search engine provides the way of the image optimization for improving the website
performance.
6. Update Content Regularly:
The simple and straightforward idea here is that SEO likes quality content over quantity. Search
engine focuses on quality content over quantity. This helps the website development to develop
the quality web pages.
There are different way to improve SEO Ranking and they are:
1. Publish Relevant Content:
Quality content is the number one driver of your search engine rankings and there is no substitute
for great content. Quality content created specifically for your intended user increases site traffic,
which improves your site’s authority and relevance.
2. Update Content Regularly:

Microsoft Office User

16
 Web Development 2019

We’ve probably noticed that we feel pretty strongly about content. Search engines do, too.
Regularly updated content is viewed as one of the best indicators of a site’s relevancy, so be sure to
keep it fresh.
3. Metadata:
When designing our website, each page contains a space between the <head> tags to insert metadata,
or information about the contents of your page. If we have a CMS site, the UMC web team will have
pre-populated data and they are: Title Metadata, Description Metadata and Keyword Metadata.
4. Have a link-worthy site:
Focus on creating relevant links within the text. Instead of having "click here" links, try writing out
the name of the destination. "Click here" has no search engine value beyond the attached URL.
Always use descriptive links by linking keywords—it not only improves search engine optimization,
but also adds value to your readers, including those with disabilities or who are using screen readers.
Use alt Tags:
Always describe visual and video media using alt tags, or alternative text descriptions. They allow
search engines to locate your page, which is crucial especially for those who use text-only browsers
or screen readers.
Conclusion:
Here in this part I described the purpose and types of DNS, domain name and how they are
organized and managed properly. After that I described protocols, server hardware, operating
systems and web server software briefly and also mentioned the relationship between communication
protocols, server hardware, operating systems and web server software considering design, publish
and accessing a website. Similarly I mentioned different web technologies with their design,
functionality and management. Lastly I reviewed the influence of search engine on website
performance and have provided evidence based support for improving a site index value and rank
through search optimization.

Microsoft Office User

17
 Web Development 2019

complicated but without good UI.

Some web technologies may be complicated but without it a website wouldn’t be nice and having a
good UI.
Some web technologies may be complicated but without it a website wouldn’t be nice and having a
good UI.

Part 2
1. Discuss the capabilities and relationships between front-end and back-end website
technologies and explain how these relate to presentation and application layer. The discussion
on the front end technologies may include HTML, HTML5, CSS, CSS3, SASS; JavaScript
based frameworks like Angular JS, Knockout JS, and React JS and so on. The back end
technology may include PHP with MySQL, [Link] with C# and SQL Server /Oracle /Access,
Ruby on Rails and ColdFusion and so on or as advised by the tutors.
2. 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). These days there are so many online website design sites like [Link],
[Link] and so on. You may produce an appropriate documentation that outlines the
necessary stuffs as required for the completion of this task.

3. Evaluate a range of tools and techniques available to design and develop a custom build
website. In order to evaluate the range of tools and techniques you may refer to your previous
task where you have discussed about front end and back end technologies and discussed the

Microsoft Office User

18
 Web Development 2019

difference between online and custom platform. You may analyze the suitable platform as per
the current needs to design the website with suitable evidences and appropriate areas of their
mobilizations.

4. Justify the tools and techniques chosen to realize a custom built website. Assuming that you
are supposed to design the website using the technologies you have discussed in the previous
task, justify the tools and techniques that you will be using in order to construct your site with
appropriate evidences. The evidences could be presented in the form of research based work,
real examples, citations and references, etc.

Introduction
In this task, I will discuss the capabilities and relationships between exist between front end and back
end technology and will explain more about the relation of presentation and application layers. I will
also discuss the differences between online website creation tools used with regards to design
flexibility, performance, functionality and user experience and interface. At lastly I will evaluate the
range of tools and techniques which helps in design and develop a custom build website. I will
discuss the capabilities and relationships between front-end and back-end website technologies and
explain how these relate to presentation and application layer. I will also provide discussion on the
front end technologies may include HTML, HTML5, CSS, CSS3, SASS; JavaScript based
frameworks like Angular JS, Knockout JS, and React JS and so on. The back end technology may
include PHP with MySQL, [Link] with C# and Sql Server /Oracle /Access, Ruby on Rails and
ColdFusion and so on or as advised by the tutors.
I will also 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). These days there are so many online website design sites like [Link], [Link] and so on.
I will also produce an appropriate documentation that outlines the necessary stuffs as required for the
completion of this task. I will also evaluate a range of tools and techniques available to design and
develop a custom build website. In order to evaluate the range of tools and techniques I will refer to
my previous task where i have discussed about front end and back end technologies and discussed
the difference between online and custom platform. I will also analyze the suitable platform as per
the current needs to design the website with suitable evidences and appropriate areas of their
mobilizations. I will also justify the tools and techniques chosen to realize a custom built website. I
will also assume that I am supposed to design the website using the technologies I have discussed in

Microsoft Office User

19
 Web Development 2019

the previous task, justify the tools and techniques that I will be using in order to construct my site
with appropriate evidences. The evidences could be presented in the form of research based work,
real examples, citations and references, etc.

P3 :Discuss capabilities and relationships between front-end and back-end website technologies
and explain how these relate to presentation and application layers.
Introduction:
Web application is defined as a task associated with developing website or web development Web
application includes web design, server-side/client-side scripting, web content development.
Web application is a programing or coding which enables website functionality as the owner
requirements. The ranges of web application ranges from creating plain text pages to complex web-
based application. The web application is divided into two parts: the frontend and backend. The
functionality of a website depends on each of these two parts as a single unit interacting with each
other.

Front-End and Back-End website technologies

Front-End technologies:
Front end development is a web application which focus on the “client side” of development. Or
simply we can say Front end development manages everything that users visually see first or build
the visible parts of website that users see and interact with their web browser. Front end development
includes everything that user experiences directly. Front end development use some certain
programming languages and they are: HTML, CSS and JavaScript.
 HTML:
HTML also known as hypertext markup language is the language which is understood by the
browser and forms the content of the website. The html is used to display any of the words, images,
animation and form elements. It is used to describe the structure of web pages using markup
language. The elements are building block of HTML pages that are represented by tags. The markup
language helps to convert the text into images, tables, links etc. so, HTML provides the framework
of web pages how it looks like. There are various tags used to display content on web browser. Each
tag has own specific function and makes web pages attractive. There are various tag used in HTML
pages such as headings, paragraphs, images, links and so on. The tag name are written in angular
bracket which may come in pair, which makes the beginning and closing tag that frame a particular
piece of code, text, or other tag.

Microsoft Office User

20
 Web Development 2019

 CSS
Cascading Style Sheets is front end or client side part of web development. It is a language that is
used to describe the style of an HTML document. It saves a lot of work. It can control the layout
of multiple web pages all at once. It is used to define styles for your pages, including the design,
layout and variations in display for different devices and screen sizes. It is normally attached to
an HTML file by means of a link in the HTML file. A CSS rule-set consists of selector and a
declaration block: each declaration includes a CSS property name and a value, separated by
colon. A CSS declaration always ends with a semicolon, and declaration blocks are surrounded
by curly braces. There are three way of using CSS which are:
1. Internal styles:
It is the approach of applying CSS to the element through <style> tag. It is generally
applied in the head section of the HTML.
Syntax: <style></style>
2. External style:
It is the approach of applying CSS to the element through external document linking.
It is generally applying CSS to separate files with .css extension.
Syntax: <link rel= “stylesheet” href= “[Link]” type= “text/css”>
3. Inline style:
It is approach of applying CSS to the current element. It is written inside HTML tag.
Syntax: <div style= “height:100px;”>text</div>
 JavaScript:
JavaScript is the programming language of HTML and the web. It makes computers do what you
want to do. It can change HTML content, HTML attributes, HTML Styles. It also helps to
validate data. It can be placed in the <body> and the <head> section of an HTML page. The
JavaScript code must be inserted between <script> and </script> tags. It is a language which is
used for making the website more interactive. JavaScript is also a multi tasker and run time
language for the web browser. It can be used to manipulate the web pages in response to events.
It can also retrieve content from the web and provide true dynamic nature of web page. The
JavaScript is very fast to operate and is very simple to understand. It gives the ability to code in
functional programming style.

Back End technologies:

Microsoft Office User

21
 Web Development 2019

Back-end development is a “server-side” or backend portion of website development which is not

visible by users. Back-end development is responsible for storing and organizing data and ensuring
everything on the client-side actually works. The main responsible of back end technologies is to
keep update, make changes and monitor the functionality of site. This type of web development
consists of three parts: a server, an application, and a database. The code written by back end
developers is what communicates the database information to the browser. The thing which we can’t
see easily with eyes such as database and server is work of back end developer. Back-end
development uses different language from front-end development and they are: PHP, Ruby, Python
to built an application tools like MySQL, oracle and SQL server to find, save or change data and
serve it back to the user in front end code that help to make the server, application and database
communication with each other.
 PHP:
PHP is also known as Hypertext preprocessor server side programming language. It is a server
scripting language, and a powerful tool for making dynamic and interactive web pages. It is easy
to learn and run efficiently on the server side. It is compatible with all servers and runs on
various platforms like windows, Linux, Unix, Mac OS X etc. It helps to create, open, read, write,
delete and close files on the server. Similarly, it can also send and receives cookies and collect
form data. It can be used to control user-access and encrypt data.

 Python:
Python is a popular programming language which is used for web development(server-side),
software development, mathematics and system scripting. Python can connect database
systems which can read and modify files. Python is most operating system in common use,
and is a universal language found in a variety of different application. Python is a primary
language used for the massive cloud computing project.

Relationship between Front-End and Back-End website

There is a very close relationship between front-end and back-end website development. If we really
work on project or website development than the cooperation between front-end and back-end is
very important to to complete the project. Front end development is a visible part of website
development whereas Back-end development is a coding portion of website development. Usually
the frontend or client talks to the backend or server using a protocol like: HTTP through an API.
Frontend developer is responsible for ‘visual part’ of development who creates interface that user
often clicks on. On the same tome backend developer is responsible for ‘not visual’ part of

Microsoft Office User

22
 Web Development 2019

development. If there, user need to save some information, backend developer creates database
connection and use CRUD functionality to operate on records. Most developers specialize in either
of the two: front-end development or back-end development, though there is often a
crossover between the two areas. The frontend developers rely on their backend counterparts for
creating a code which is easy to understand and manipulate. This is why the specialists in backend
development are more familiar with the standardized style guidelines and idioms of the popular
programming languages such as PHP, Ruby, Python, etc. When a user attempts to access an
application via the front-end interface, the back-end database helps to verify the relevant
information, and then the proper information is presented to the user through the back-end web
server. The knowledge of certain programming languages is strictly required to ensure the complete
package which satisfies the business requirement. So we can say that front-end and back-end
development are two sides of a coin where both side are equally important.

Front-end and Back-end website related to presentation and application layers.

There are three types of layer in website application and they are presentation layer, application
layer and database layer. There is presentation layer in front-end development whereas there are two
types of layers in back-end development and they are: application layer and database layer. But in
this task we only talk about presentation layers and application layers along with their relation.
Presentation layer:
Presentation layer is also known as presentation tier which is the front end layer and consists of the
user interface. User interface is a graphical one accessible through a web browser that displays
content and information useful to an end user. This presentation layer is mostly built on web
technologies such as HTML, CSS, JavaScript and also can be built by using other frameworks and
this layer communicates with others layers through API calls. Presentation layer is mostly deployed
to the desktop, tablets and phones either through web browser or through web-based application
utilizing a web server.
Application layer:
Application layer is also known as Application tier which is the back end layer. This layer contains
the functional business logic which drives an application’s core capabilities and it is written in
Java, .NET, C++, C#, Python, etc. Application layer is mostly hosted in cloud or in dedicated
workstation which depend upon the complexity and processing power required by the
application.

Microsoft Office User

23
 Web Development 2019

Testing and Debugging

In web development, testing and debugging plays vital role which are very important for
programmer.
The process of finding bugs or error in a web application that is done manually by tester or can be
automated is defined as testing whereas the process of fixing the bugs found in the testing period is
known as debugging. So in the web application period both concerned front end and back end
developer must properly test and debug during the time of web development. Otherwise, just a
simple error in a piece of code can end up in breaking the entire web application.

Conclusion
As front end and back end technologies are equally important in web application or web
development. They are very communicated with each other. Front end refers to the code executed in
the browser, end back end refers to code being executed on the web server. The true interaction
between the two takes place in the network which may be in the form of HTTP requests and
responses. So in the web application both frontend and back end technologies knowledge are very
important.
P4: Differences between online website creation tools and custom built site with regard to
design flexibility, performance, functionality, user experience (UX) and user interface (UI).
Introduction:
In this era of science and technology, programming has become a topic of concern. Programming
involve web application software developments etc. so for the web application or any software
development we can find many more offline as well as online tools. Website design might be one of
the most overlooked aspects of a business. So website design has the worldwide importance in every
sector like as education sector, health sector, business etc. Different offline as well as online tools are
used to develop and design website.
Digital agencies love to combine web design and online marketing and in order to build a functional
website for the company to meet its needs and brands, most firms either outsource or use online
website creation tools like using pre-made templates. So currently, there are two main ways for
building a website: Custom built sites; working with a website development agency or a professional
developer and Online website creation tools such as Squarespace, [Link], Weebly or Wix.
The DIY (Do It Yourself) websites or Online website creation tools are relatively very cheap. They
contain numerous inbuilt features that allows a company to start their very own personal or business

Microsoft Office User

24
 Web Development 2019

website in just a few minutes along with acquiring a unique domain name. On the other hand, there
are custom built sites which require agencies and developers for building a website that stands out
from the crowd and gives the company a competition edge over its competitors, which is essential in
today’s saturated web environment. Also, Custom websites tend to be more search friendly engine
than website templates as they rank higher on search engine. Below are given some areas in how
these custom built sites differentiate from online website creation tools.
Flexibility
A custom website is always expandable. The company can always consult its web developer and the
developer will ask for current marketing materials and come up with a way for a website design
consistent with the brand. This is particularly not the case when using online website creation tools,
they do not have any other option but to make utilization of the template they have built in house.
Surely a degree of customization is possible in a more expensive template, but the company is
largely stuck with the parameters of the template for graphics design and navigation. Down the road,
the company obviously needs significant changes to have an edge over its competitors and this is
when custom built sites come into play.

Performance
Custom built sites have no inherent limitations as to the number of user traffic they can handle
without making sacrifice of any functionality. Unlike template sites, custom sites are built from
scratch and thus, everything from the navigation structure to back-end functionality is tailored
specifically around the customers, brand identity and overall business needs. Along with unlocking a
range of customer-focused benefits, custom sites is also comprised of a variety of valuable back-end
tools. These include search engine optimization (SEO) tools which help the company to reach new
market customers, analytics tools that help to track site perform ace, and security tools and essentials
which protect the site from malicious cyber-activity.
Functionality
Custom features can be built in order to make the website, and sometimes the business, easier to
manage. Since there are limited features in templates and other online website creation tools, it will
be nearly impossible to make a them mobile friendly which was not intended to be mobile friendly in
the first place. There can be simple design parameters such as limited choices in icons, or a more
serious issue like the inability to have a functionality you want in the way which you would like it to
work. Adding e-commerce and any other kinds of custom applications is difficult or nearly
impossible even in the most expensive online website creation tools.

Microsoft Office User

25
 Web Development 2019

User Experience
User Experience (UX) is about how we perceive it, how we use it, and how well we remember it all.
With the design of most templates, what you see is what you get. You may have the option to change
some basic stuff like colors and fonts but the layout is pretty much set. With easy availability of
website templates, it is no wonder that the competitors of a certain company will also be using the
same template which the company is currently using. Due to this reason, the company’s website will
be lost in the abyss of cyberspace and it will look like a complete rip-off. So, the point here is to give
the site visitors a great impression, all the while staying relevant to the company’s expectation. It can
be as simple as having a bright background image, minimalist design with rich white space,
background video/GIF, hover animations and such by building a custom website.
User Interface
There are tons of templates and online website creation tools online and many of them might even
work for a hefty majority of companies. However, what even the best-designed template lacks in is
the originality. Generally, a template is probably the best option if a tighter budget, simpler scope,
and relaxed brand standards are applicable. On the contrary, in case of a decent budget, tighter brand
standards, design originality, or heavier functionality are present, a custom solution is more
applicable in such companies. The custom build sites can incorporate existing platforms, features or
code libraries to make sure the deliverables are fast, scalable and more effective. The web developers
need to create non-functional comprehensive layouts showing potential design directions.
Conclusion
In conclusion, needless to say, custom-built websites are ideal for majority of the projects, but
sometimes opting for a lower cost alternative can be a more appropriate option depending on the
website goals, timeline, and project budget. It is fairly easy to get sidetracked by dollars and cents
when you are evaluating options for building your website, but the most important factor to consider
is opportunity cost. A website can serve as a very powerful tool when done correctly, but a poorly
executed one can work against you. The bottom-line remains that a company should carefully choose
its developer no matter what type of site the company has to offer but preferably, custom-built sites
are better investments for a company’s long run since they can grow with the company.

M3: Evaluate a range of tools and techniques available to design and develop a custom built
website.
Previously I talked about the online website creation and custom built sites. There are different tools
and techniques that are used for designing website. Online and offline tools and techniques can be

Microsoft Office User

26
 Web Development 2019

found for designing websites. So here I am going to some important website designs and tools and
techniques used to design and develop a custom built websites.
Some of the important website design area are:
Authoring
Interface design
Web graphic design
User experience design
Standardized code and proprietary software
Search engine optimization

Tools and Technologies /Techniques:

There are different types of Tools and Technologies available to design and develop a custom built
websites but it doesn’t mean that all tools and technologies are same. They have their own properties
and functionalities.
Some of the tools used for website designing are:
Adobe Fireworks:
Adobe firework is one of web designing tool which is a commercial raster and vector graphics editor.
Adobe firework is available for both MAC and windows operating system. Adobe firework brings a
plethora of tools and options for web designers that make full web layout. With Adobe firework or
the page panel of Adobe firework it is possible to create and organize master and sub pages, and then
export working HTML and CSS files. Just using Fireworks it is possible to create an entire
functional static website.
Dreamweaver:
Dreamweaver is also one of the commercial application foe web development which is available for
both operating system, MAC and Windows. Dreamweaver tightly integrates with popular Adobe
products such as Photoshop which allow user to share Smart Objects for quick and easy updating and
editing of graphics components. The features and option of Dreamweaver includes a built-in FTP
client, project management and workflow options that make team work effortless, syntax
highlighting and very smart code Hinting.

Sublime Text:
The Sublime text is the best text editor I have used; at the time of programming it is my first option.
Its interface is friendly so it is easy to use, it has a very good number of keyboard shortcuts that
allows me to quickly access any program complement or perform any operation that I want, which is
great since for us the programmers, Sublime Text saves us a certain amount of time. The color
scheme that applies depending on the programming language you use is very helpful because it gives
me an incredible way to read the code documents because at a glance you can visualize all the
elements without even reading them. It has been used for writing HTML, CSS and JavaScript codes.
The feature of sublime text is multi-cursor input, multiple selection etc. makes the coding productive.
Panic Coda
Panic Coda is another application for web development available for MAC OS X operating system.
Is functions very well so that it seeks to reduce the amount of application such as CSS editor, a
version control system, FTP client, etc. Coda’s one-window web development philosophy uses a
tabbed interface for text editing, SVN, CSS, file transfers. Panic coda is simple and intuitive
interface.

Firefox Developer
Firefox Developer is a version of Firefox which is developed specially for web developers, among
others tools to provide the greatest assistance with web development need of developers. Its features

Microsoft Office User

27
 Web Development 2019

include building and designing with CSS Grid, HTML inspector, analyzing and debugging, Style
editor where developer have access to all their Dev Tools.
Photoshop CC
Photoshop is an application from Adobe which is used in graphic designing. The tool contains from
the basic to the advance tools. It has many effects and filter which is effective for logo making and
photo editing. It allows improving images quality in a simple and effective way because the interface
is very friendly and having a multiple tools. It is very easy to use, so it is possible to obtain good and
immediate results.
Technologies used for website designing are:
 HTML:
HTML stands for “Hypertext Markup Languages”, that is used to create webpages. HTML
refers to the way tags are used to define page layout and elements within the page and
hyperlinks that an HTML page may contain. HTML is the language which is understood by
the browser and forms the content of the website. The html is used to display any of the
words, images, animation and form elements. There are various tags used to display content
on web browser. Each tag has own specific function and makes web pages attractive. There
are various tag used in HTML pages such as headings, paragraphs, images, links and so on.
The tag name are written in angular bracket which may come in pair, which makes the
beginning and closing tag that frame a particular piece of code, text, or other tag. For
example- if you have to make heading on a HTML pages then the beginning tag <h1> and
ending tag with </h1>.

 CSS:

Microsoft Office User

28
 Web Development 2019

CSS also known as Cascading Style Sheet is the language that is used to style any markup
languages. The website written in HTML might not have a managed content. It needs some
styling and formatting which is done using CSS. CSS can be used to define test styles, table
sizes, and aspects of Web pages which could be define in HTML page and can control the
layout of multiple web pages all at once.

 JavaScript:
Mozilla Developer Network (2015) states that the JavaScript is the programming language
that is procedural as well as object oriented used to make a dynamic website. JavaScript is a
client side scripting language which is visible to the users. It helps to make the website more
interactive and interesting by adding certain web elements. It also helps to validate data. It
can be placed in the <body> and the <head> section of an HTML page. The JavaScript code
must be inserted between <script> and </script> tags. It is a language which is used for
making the website more interactive. JavaScript is also a multitasked and run time language
for the web browser.

Microsoft Office User

29
 Web Development 2019

 PHP
The PHP Hypertext Preprocessor (PHP) is widely used scripting language that allows web
developers to create dynamic content that interacts with databases. Especially PHP is suites for
web development and can be embedded into HTML and used for developing web based software
applications. It is easy to learn and run efficiently on the server side. It is compatible with all
servers and runs on various platforms like windows, Linux, Unix, Mac OS X etc. It helps to
create, open, read, write, delete and close files on the server. Similarly, It can also sends and
receives cookies and collect form data. It can be used to control user-access and encrypt data.

Microsoft Office User

30
 Web Development 2019

D1: Tools for custom built website:

Web design is the process of designing and creating websites which t includes the web page layout,
content production and graphic design. As part of our assignment we are given to develop a website.
So different tool and techniques are used such as Bootstrap, Photoshop, Sublime text to built custom
built website.
Selected tools for developing custom built website:
In the task I designed and developed custom built website of an Airline Company. It is very difficult
to design custom built design. But with the help of available tools I am able to developed a website.
The tools that I used for developing the Airline company’s website named Rainbow Airline are:
Sublime text, Photoshop, wireframe and XAMPP.
.
Sublime text:
The Sublime text is the best text editor I have used; at the time of programming it is my first option.
Its interface is friendly so it is easy to use, it has a very good number of keyboard shortcuts that
allows me to quickly access any program complement or perform any operation that I want, which is
great since for us the programmers, Sublime Text saves us a certain amount of time. The color
scheme that applies depending on the programming language you use is very helpful because it gives
me an incredible way to read the code documents because at a glance you can visualize all the
elements without even reading them. It has been used for writing HTML, CSS and JavaScript codes.
The feature of sublime text is multi-cursor input, multiple selection etc. makes the coding productive.
Photoshop:
Photoshop is an application from Adobe which is used in graphic designing. The tool contains from
the basic to the advance tools. It has many effects and filter which is effective for logo making and
photo editing. It allows improving images quality in a simple and effective way because the interface
is very friendly and having a multiple tool. It is very easy to use, so it is possible to obtain good and
immediate results. The most extended design and photo editing program thanks to the ease of its
software for graphic design work or we need to make assemblies or photographic compositions from
the simplest complicated ones and you do not need an internet connection to work it.

Wireframe:
Wireframe is another tool used for designing the website. The wireframe can be used to make layout
of the website which make easier to build website. A wireframe is easier to understand that is
concerned with the information design, navigation design and interface design. It offers the best
experience in creating basic outline of the website that users want to create. Simple outlines, boxes,

Microsoft Office User

31
 Web Development 2019

colors, and designs combined with simple method, creates the best user experience. I love that it
makes getting an idea from your head to the screen for some UX project about as simple as drawing
on graph paper.
XAMPP:
XAMPP is another tool used in the development of the website. It is a cross-platform, simple, open,
source web server solution. Stack package. Since most actual web server developments use the same
components as XAMPP, it makes transitioning from a local test server to a live server extremely
easy as well. I used XAMPP as a source to test the work without the access of internet. The database
were easily manipulated and created with this tool.
Selected techniques for developing custom built website:
Rainbow Airline is one of the custom built website developed using custom built techniques. So the
techniques that I used during the development of Rainbow Airline are HTML, CSS, JavaScript, as
front-end and PHP, MySQL as back-end.
The front end includes HTML, CSS and JavaScript. The front end part of custom built website
design, the HTML is used to define the structure of web pages using markup language. HTML stand
for Hyper Text Markup Language is used to create web pages as well as other types of documents
viewable in a web browser. It is a part of front end web pages of website. It is used to describe the
structure of web pages using markup language. The elements are building block of HTML pages that
are represented by tags. The markup language helps to convert the text into images, tables, links etc.
so, HTML provides the framework of web pages how it looks like. And CSS is used to style the
structure of web pages. Cascading Style Sheets is front end or client side part of web development. It
is a language that is used to describe the style of an HTML document. It saves a lot of work. It can
control the layout of multiple web pages all at once. It is used to define styles for your pages,
including the design, layout and variations in display for different devices and screen sizes.
JavaScript is used to control the behavior of web pages. JavaScript is also a multi tasker and run
time language for the web browser. It can be used to manipulate the web pages in response to events.
It can also retrieve content from the web and provide true dynamic nature of web page. The
JavaScript is very fast to operate and is very simple to understand. It gives the ability to code in
functional programming style.
The back end part is what the user doesn’t experience and everything PHP and My SQL has been
used back end technology for developing the Rainbow Nepal Airlines Company which helps to
communicate the database with browser. PHP is also known as Hypertext preprocessor server side
programming language. It is a server scripting language, and a powerful tool for making dynamic

Microsoft Office User

32
 Web Development 2019

and interactive web pages. It is easy to learn and run efficiently on the server side.. It helps to create,
open, read, write, delete and close files on the server. Similarly, It can also sends and receives
cookies and collect form data. It can be used to control user-access and encrypt data. My SQL is
used to store databases, tables and data of a airlines company. Structure Query Language (SQL) is
used for storing, manipulating and retrieving data in database. It allows creating and maintaining
tables, updating and deleting them using various queries and constraints so it is widely used. It is
used for executing various queries against a database and retrieving essential data. Similarly, it can
insert and update records in a database. New database, tables, vies and stored procedure can be
created using SQL. The SQL server is powerful source for holding all the database records.

Conclusion
Here in part two, I talked about the capabilities and relationships between exist between front end
and back end technology and explained more about the relation of presentation and application
layers. I have discussed the differences between online website creation tools used with regards to
design flexibility, performance, functionality and user experience and interface.
After, that I have evaluated the range of tools and techniques which helps in design and develop a
custom build website like HTML, CSS, JavaScript, etc. Also I discussed differences between online
website creation tools and custom built sites with regards to design flexibility, performance,
functionality, User Experience (UX) and User Interface (UI). These days there are so many online
website design sites like [Link], [Link] and so on. I have also produced an appropriate
documentation that outlines the necessary stuffs as required for the completion of this task. I have
also evaluated a range of tools and techniques available to design and develop a custom build
website. And finally I justified the tools and technology that I used in designing and developing my
site.

Microsoft Office User

33
 Web Development 2019

PART 3
1. Create a design document for a branded, multipage website with medium fidelity
wireframes and full set of client and user requirements. In order to complete this task you can
use any graphics designing tools to design the wireframe for your website and you must
present the screenshots of your design.

2. Use your design document with appropriate principles, standards and guidelines to produce
a branded, multipage website supported with realistic content.

This task is referenced to the previous task where you have successfully designed the
wireframe for your website. Using any suitable web programming language you are required
to develop a complete website. The evidence for this task must be reproduced as guided by
your tutor.
3. Compare and contrast the multipage website created to the design document. This task is
referenced to your task done earlier in Part 3 of 1 and 2. In this task you are required to
compare your design with the actual implemented website. You may tabulate your contrasting
and different features in the form of table followed by some necessary explanations.
4. Critically evaluate the design and development process against your design document and
analyze any technical challenge. This task is reference to all above task of Part 3.

Introduction
In this part, I am going to design and develop a multi pages website named Rainbow Airlines. For
that initially I designed a wireframe of a website and on that same basis I developed a functional
website. During the design of a website I used different tools and techniques which I am going to
describe detailed in this part. Using that tools and techniques I completed the website and made it
work out. Also I will provide appropriate principles, standard and guidelines of multipage website. I
will document of compare and contrast of multiple page. I will evaluate how a design it is and how to
do for better design in a given scenario in this part.

P5 Create a design document for a branded, multipage website with medium fidelity
wireframes and full set of clients and users.
Introduction

Microsoft Office User

34
 Web Development 2019

Rainbow Nepal Airlines is one of the leading airline companies of Nepal with an objective of
providing quality and modern services to customers. The company invites anyone to join for the
ultimate experiences in a country that is rich in its nature as well as cultural diversity. The company
aims at providing sound travel services and tour facilities as well. As company hired as an IT
manager to collaborate with a developer to build a website for the company. The website must
include the facilities such as online booking, search flights, admin panel, dynamic contents, image
gallery etc. There should be couple of forms like online flight booking form, tour booking form, and
contact form with customer feedback. The form should be properly validated against the empty
fields, data types and other fields as per necessary. The website should be W3C compliant (XHTML
and CSS). For the better website design it is important to design a website before developing.

Wireframe:
Wireframes are simple, low fidelity layouts that outline the placement and rough size of specific
page elements, from conversion areas, to site features. Wireframes check that each page has a
purpose, achieves the goals set out in the client brief and define a logical navigation for your website.
It helps to create a basic outline of website as need of user. It take place n early phase that help in
designing website without its actual development. The main importance of wireframe is to develop
layout and structure. It creates an information hierarchy for designer and focus the need of clients. It
makes clear about the feature and component used in website and save time.

Wireframe for my website:

Technologies used in development of website:

Microsoft Office User

35
 Web Development 2019

The front end and back end technologies play a vital role smooth functioning of website. The front
end makes the beautiful structure of website and back end make easy interaction and dynamic web
page of website. There are various technologies used to develop a website are:-
 HTML:

HTML stand for Hyper Text Markup Language is used to create web pages as well as other types
of documents viewable in a web browser. It is a standard specified and maintained by world wide
web. It is a part of front end web pages of website. It is used to describe the structure of web
pages using markup language. The elements are building block of HTML pages that are
represented by tags. The markup language helps to convert the text into images, tables, links etc.
so, HTML provides the framework of web pages how it looks like. There are various tags used to
display content on web browser. Each tag has own specific function and makes web pages
attractive. There are various tag used in HTML pages such as headings, paragraphs, images, links
and so on. The tag name are written in angular bracket which may come in pair, which makes the
beginning and closing tag that frame a particular piece of code, text, or other tag.
 CSS:

Cascading Style Sheets is front end or client side part of web development. It is a language that is
used to describe the style of an HTML document. It saves a lot of work. It can control the layout
of multiple web pages all at once. It is used to define styles for your pages, including the design,
layout and variations in display for different devices and screen sizes. It is normally attached to
an HTML file by means of a link in the HTML file. The design which is made in the website can
be done with the help of CSS. It makes clear design as need of client and user.
 JavaScript:

JavaScript is the programming language of HTML and the web. It makes computers do what you
want to do. It can change HTML content, HTML attributes, HTML Styles. It also helps to
validate data. It is a language which is used for making the website more interactive. JavaScript
is also a multi tasker and run time language for the web browser. It can be used to manipulate the
web pages in response to events. It can also retrieve content from the web and provide true
dynamic nature of web page. The JavaScript is very fast to operate and is very simple to
understand. It gives the ability to code in functional programming style.
 PHP:

PHP is also known as Hypertext preprocessor server side programming language. It is a server
scripting language, and a powerful tool for making dynamic and interactive web pages. It is easy
to learn and run efficiently on the server side. It is compatible with all servers and runs on
various platforms like windows, Linux, Unix, Mac OS X etc. It helps to create, open, read, write,
delete and close files on the server. Similarly, It can also sends and receives cookies and collect
form data. It can be used to control user-access and encrypt data.
 My SQL:

My SQL is a relational database management system that supports a wide variety of transaction
processing, business intelligence and analytics applications in corporate IT environments.
Structure Query Language (SQL) is used for storing, manipulating and retrieving data in
database. It allows creating and maintaining tables, updating and deleting them using various
queries and constraints so it is widely used. It is used for executing various queries against a
database and retrieving essential data. Similarly, it can insert and update records in a database.

Microsoft Office User

36
 Web Development 2019

New database, tables, vies and stored procedure can be created using SQL. The SQL server is
powerful source for holding all the database records.

Application used in development of website:

The some common applications which are used in development of website are:-
 Sublime Text: It is a powerful and sophisticated text editor with a python API. Its interface is
friendly so it is easy to use, it has a very good number of keyboard shortcuts that allows me to
quickly access any program complement or perform any operation that I want, which is great
since for us the programmers, Sublime Text saves us a certain amount of time. The color scheme
that applies depending on the programming language you use is very helpful because it gives me
an incredible way to read the code documents because at a glance you can visualize all the
elements without even reading them. It has been used for writing HTML, CSS and JavaScript
codes. The feature of sublime text is multi-cursor input, multiple selection etc makes the coding
productive.
 Photoshop: Photoshop is popular in editing and manipulating the software. It provides the
various useful tools in web development. The most extended design and photo editing program
thanks to the ease of its software for graphic design work or we need to make assemblies or
photographic compositions from the simplest complicated ones and you do not need an internet
connection to work it. It allows improving images quality in a simple and effective way because
the interface is very friendly and having a multiple tools. It is very easy to use, so it is possible to
obtain good and immediate results.

P6 Use your design document with appropriate principles, standard and guidelines to produce
a branded, multipage website supported with realistic content.

Design of multipage website of Rainbow Airline.

So as I mentioned different tools and techniques used in development of a website. In this task I am
going to preset a fully functional, design document to Rainbow Airline.

Microsoft Office User

37
 Web Development 2019

Principle of design:
The principles of design describe the ways that designer use the elements of art in a work of art. I
have used the principles which help to develop the website of Rainbow Nepal Airlines Company.
The using of principle made easy to use best place for components in a website. The some principles
of design are as given below:
Purpose:
Good web design always caters to the needs of the user. each page of website needs to have a clear
purpose and to fulfill a specific need for our website users in the most effective way possible.
Communication:
People on the web tend to want information quickly, so it is important to communicate clearly, and
make information easy to read and digest. Some effective tactics to include in our web design
include: organizing information using headlines and sub headlines using bullet points instead of long
windy sentences.
Images:
A picture can speak a thousand words, and choosing the right images for our website can help with
brand positioning and connecting with our target [Link] we don’t have high quality professional
photos on hand, consider purchasing stock photos to lift the look of our website.
Balance:
Balance is the distribution of the visual weight of objects, colors, texture, and space. If the design
was a scale, these elements should be balanced to make a design feel stable. In symmetrical balance,
the elements used on one side of the design are similar to those on the other side; in asymmetrical
balance, the sides are different but still look balanced. In radial balance, the elements are arranged
around a central point and may be similar.
Emphasis:
Emphasis is the part of the design that catches the viewer’s attention. Usually the artist will make one
area stand out by contrasting it with other areas. The area could be different in size, color, texture,
shape, etc.
Movement:
Movement is the path the viewer’s eye takes through the work of art, often to focal areas. Such
movement can be directed along lines, edges, shape, and color within the work of art.
Pattern:
Pattern is the repeating of an object or symbol all over the work of art.

Microsoft Office User

38
 Web Development 2019

Repetition:
Repetition works with pattern to make the work of art seem active. The repetition of elements of
design creates unity within the work of art.
Proportion:
Proportion is the feeling of unity created when all parts (sizes, amounts, or number) relate well with
each other. When drawing the human figure, proportion can refer to the size of the head compared to
the rest of the body.
Rhythm:
Rhythm is created when one or more elements of design are used repeatedly to create a feeling of
organized movement. Rhythm creates a mood like music or dancing. To keep rhythm exciting and
active, variety is essential.
Variety:
Variety is the use of several elements of design to hold the viewer’s attention and to guide the
viewer’s eye through and around the work of art.
Unity:
Unity is the feeling of harmony between all parts of the work of art, which creates a sense of
completeness.

Guidelines of design:
I have spent a time to study the ins and outs of usability and user experience before design and
develop a website of Rainbow Nepal Airlines Company. I have put together the following list of
helpful guidelines to apply to our web design project. The some guidelines of design of multipage
are:-
Simplicity:
The visitors first look and feel of website whether it is simple or not. They are coming to site to
complete some action or to find some specific pieces of information. The unnecessary design
elements of website make confuse what to do and how to do. So, the simplicity should be used in
case of colors, interface and graphic.
Visual hierarchy:
The visitor first sees the arrangement and organizing of element in a website. The position, color or
size of certain elements should be arranged in such a way that visitors will be drawn to those
elements. The look of website should be made natural and enjoyable.
Navigability:

Microsoft Office User

39
 Web Development 2019

The having intuitive navigation on our site is crucial for ensuring visitors can find what they are
looking for. So, the structure of primary navigation should be simple.
Consistency:
The overall look and feel of site should be consistent across our site’s entire page. Backgrounds,
color schemes, typefaces, and even the tone of your writing are all areas where being consistent can
have a positive impact on usability and UX.
Accessibility:
The website should be made compatible with the different devices, operating systems and browser
in which the users can visit. The site should be responsive in which the user can use in any devices.

Design interaction:
The design interaction includes various designs of the website and their respective codes for building
of the website. I have done enough effort to produce an interactive and dynamic website cover all the
feature and functions. Below I have given design and its respective codes for development of
website.

Home Page:

Microsoft Office User

40
 Web Development 2019

Microsoft Office User

41
 Web Development 2019

HTML code used in Home page:

Microsoft Office User

42
 Web Development 2019

Microsoft Office User

43
 Web Development 2019

CSS code used in Home page:

Microsoft Office User

44
 Web Development 2019

Microsoft Office User

45
 Web Development 2019

Microsoft Office User

46
 Web Development 2019

About Us:

Microsoft Office User

47
 Web Development 2019

HTML code used in About Us page:

Microsoft Office User

48
 Web Development 2019

Microsoft Office User

49
 Web Development 2019

CSS code used in About Us page:

Microsoft Office User

50
 Web Development 2019

Microsoft Office User

51
 Web Development 2019

FAQ Page:

HTML code used in FAQ page:

Microsoft Office User

52
 Web Development 2019

Microsoft Office User

53
 Web Development 2019

CSS code used in FAQ page:

Microsoft Office User

54
 Web Development 2019

Microsoft Office User

55
 Web Development 2019

Gallery page:

Microsoft Office User

56
 Web Development 2019

HTML code used in Gallery page:

Microsoft Office User

57
 Web Development 2019

Microsoft Office User

58
 Web Development 2019

Microsoft Office User

59
 Web Development 2019

CSS code used in Gallery page:

Microsoft Office User

60
 Web Development 2019

Microsoft Office User

61
 Web Development 2019

Microsoft Office User

62
 Web Development 2019

Contact page:

HTML code used in Contact page:

Microsoft Office User

63
 Web Development 2019

Microsoft Office User

64
 Web Development 2019

CSS code used in Contact page:

Microsoft Office User

65
 Web Development 2019

Microsoft Office User

66
 Web Development 2019

Microsoft Office User

67
 Web Development 2019

Microsoft Office User

68
 Web Development 2019

PHP code used in Rainbow Airline Website:

JavaScript used in my website:

Microsoft Office User

69
 Web Development 2019

M4 Comparison between Design document and Multipage website:

Before the development of website it is very necessary to design web pages. For multi pages website
there should have knowledge of different web technologies to design and develop of Rainbow Nepal
Airlines website. The document design helps in knowing what are the requirements that are essential
in the implemented design. It is compulsory to compare both the design document and multipage
website to know the differences they have. The design document is a guide to the multipage website.
So, it is necessary to compare them after development of website. The comparisons between the
design document and multipage website are given below:
Design Document Built website
[Link] Page: [Link] Page:

Microsoft Office User

70
 Web Development 2019

Similarities and Differences:

There is a very much similar with the contents of design document and built website. There are some
differences in between both the landing page. In the multipage website, the contents are less more
than the design document. Booking form and destinations section added in the final built website
page and CSS style added in the design page to make website attractive.

[Link] Form:
[Link] Form:

Microsoft Office User

71
 Web Development 2019

Similarities and Differences:

There is a very much similar with the contents of design document and built website. But in the
developed booking form CSS code is added to give the attractive look on it.

3. Gallery page 3. Gallery page

Microsoft Office User

72
 Web Development 2019

Similarities and Differences:

There is a very much similar with the contents of design document and built website. There are
some differences in between both the landing page. In the multipage website, the contents are less
more than the design document. In built website, the gallery page is design and built with the help
of CSS which we can see in the screenshot.

Microsoft Office User

73
 Web Development 2019

4. Contact page: 4. Contact page:

Similarities and Differences:

There is a very much similar with the contents of design document and built website. There are
some differences in between both the landing page. In the multipage website, the contents are less
many than the design document. The contact form section and footer section design beautifully
using HTML and CSS code.

Microsoft Office User

74
 Web Development 2019

D2 Critically evaluates the design and development process against your design document and
analyze any technical challenge.

Design and development process:

Design and development are the crucial phase of the website design that helps in the efficient
development of website addressing the entire requirement. Design is the process of defining the
components, modules, interfaces, and data for a system to satisfy specified requirements.
Development is the process of creating or altering systems, along with the processes, practices,
models, and methodologies used to develop them. There are a number of steps involved when
building a new website. Every client has different requirements and because websites are a key
marketing tool for most businesses it is crucial that web developers understand all aspects of the
build before any work commences.
Step 1: Discovery
The first part of the website design & development process involves the completion of a brief so we
can assess each client’s requirements. An initial meeting is then set up to discuss the different aspects
of the project including establishment of milestones, timelines, deliverables, project scope and
expectations. Research is then undertaken around content, writing style, visual design and technical
aspects in order to analyze what can be achieved within the website budget.
Step 2: Design
A collage of visual ideas (or mood board) is sometimes created based on the original brief. This
incorporates design elements, branding and digital assets. After this has been presented to the client
we create a page layout or wireframe of the homepage layout/design. Once the homepage design has
been approved we can start work on the secondary or subpages. If the project requires ecommerce
capability there are a number of design considerations to be made. This info graphic gives a good
summary of what needs to be considered.
Step 3: Development
Once the design has been approved we can start building the website. This process involves
HTML/CSS/JavaScript development and is the most time consuming section of the project.
What is HTML/CSS/JavaScript development?
 HTML: It marks the content up into different structural types, like paragraphs, blocks, lists,
images, tables, forms and comments.
 CSS: It tells the browser how each type of element should be displayed. This may vary for
different media e.g. screen, print or handheld devices.

Microsoft Office User

75
 Web Development 2019

 JavaScript: It tells the browser how to change the web page in response to events that happen.
For example, clicking on a button or making an image slider move from left to right.

When the build is 80% complete we will host the website on our staging server for client review and
feedback. Once the client review is complete cross browser, mobile, tablet device and
performance/speed testing takes place. This is a very important part of the process because a great
website is about creating coherent experience across all devices.
Step 4: Deployment/Launch
At this point we would have established the domain name(s), website hosting and email set up. We
can then move a client’s website from the staging server to a live environment. Any last minute
changes and tweaks to the website before it goes live are made at this stage. At launch the website is
sent to search engines such as Google so that it can be indexed. If Search Engine Optimization (SEO)
is required it is at this point that an SEO Specialist is engaged.
Step 5: Post Launch
Training on how to use the content management system (CMS) is provided so that clients are self-
sufficient. Ongoing management of the website and technical support is also provided.
I have evaluated the process of design and development of the Website of Rainbow Nepal Airlines
Company. There are various factors to be considered to evaluate the design and developments of
airlines company are:-
 Client requirements: The client’s requirement enclose vision, mission and objectives what the
project to achieve. The airlines company has aim to provide quality and modern services to
customers. The some requirements of client in airlines company are:-
 The website look and feel must be natural and enjoyable.
 There has to be facilities such as booking, search flights and image gallery etc.
 The website should function properly.
 The website must be friendly and compatible with all browsers.
 Validation: Validation is a technique to check that user fill out forms in the correct format or not.
The validation comes to play if client make mistakes in filling the details. The server and client
validation have been fulfilled by proposed design of the airlines.
 Flexibility: it involves modification and changing the contents of the website without absolute
foundation. The website should be made flexible with front end and back end technologies.

Technical challenges in web development:

Microsoft Office User

76
 Web Development 2019

The various challenges that come with the design and development of the website of Rainbow Nepal
Airlines Company are:-
 Scalability:
Scalability is a difficult thing for web developers to manage. Scalability is load balancing
between the servers, hence when the load increases (i.e. more traffic on the page) additional
servers can be added to balance it. The entire load should not be thrown on a single server instead
of which the software should be designed in such a way that it can work on multiple servers.
Service oriented architecture helps developers in managing and improving scalability.
 UI/UX:
In the era of smart phones, web developers are expected to develop UI/UX that is responsive and
user-friendly. If the web applications frustrate users, then it is difficult to maintain the customer’s
loyalty on your website. Website navigation is another part often neglected by developers.
Intuitive navigation creates a better user experience for the website visitor.
 Performance:
Slow web applications are a failure and as a result, customers escape your website, thus
damaging your revenue as well as reputation. Some of the performance issues developers’ faces
are Poorly written code, Un-Optimized Databases, Unmanaged Growth of data, Traffic spikes,
Poor load distribution, Default configuration, Troublesome third party services, etc.
 Knowledge of Framework & Platforms:
Frameworks are boost performance, offer libraries of coding and extend capabilities, so
developers need not do hand-coding web applications from the ground up. Frameworks offer
features like models, APIs, snippets of code and other elements to develop dynamic web
applications.
 Security:
Security is something the web developers need to consider at every stage of SDLC (software
development life cycle). There are many things to consider when it comes to web application
security such as denial of service attacks, the safety of user data, database malfunctioning,
unauthorized access to restricted parts of the website, etc.
Conclusion:
In this way I have created a design document for a branded, multipage website with medium fidelity
wireframes and full set of client and user requirements. In order to complete this task I have used
graphics designing tools to design the wireframe for your website and I have presented the
screenshots of my design. I have used my design document with appropriate principles, standards

Microsoft Office User

77
 Web Development 2019

and guidelines to produce a branded, multipage website supported with realistic content. This task is
referenced to the previous task where I have successfully designed the wireframe for my website.
Using any suitable web programming languages. I have developed a complete website. I have
compared and contrast the multipage website created to the design document. This task is referenced
to my task done earlier in Part 3 of 1 and 2. In this task I have also compared my design with the
actual implemented website. I have also tabulated my contrasting and different features in the form
of table followed by some necessary explanations. Then I have critically evaluated the design and
development process against my design document and analyze my technical challenge.

Microsoft Office User

78
 Web Development 2019

PART 4
1. Create a suitable Test Plan identifying key performance area and use it to review the
functionality and performance of your website.

In order to complete this task you are required to prepare a log sheet that highlights what was
tested, the expected output, and the actual output, evidence against the test which would
suitably a screenshot of the test operation and remarks against your test.
2. Evaluate the Quality Assurance (QA) process and review how it was implemented during
your design and development stages.

In order to complete this task you are required to evaluate how have met the Quality for the
developed website.
3. Critically evaluate the results of your Test Plan and include a review of the overall success of
your multipage website; use this evaluation to explain any areas of success and provide
justified recommendations for areas that require improvement.

This task is reference to Part 4 tasks where you have made tests and evaluated the Quality
Assurance Process for your developed website.
In order to complete this task you are required to critically evaluate the results of your test
Plan which requires that you analyze your test plan considering its positive and negative aspect
along with suitable evidences. Once you have been able to do it then again you are required to
evaluate the areas of success. You are also required to point out the areas for improvements
and provide recommendations for improvements.

Microsoft Office User

79
 Web Development 2019

P7: Test Plan identifying key performance areas

Introduction:

Website testing:
Web testing is a software testing practice to test the websites or web applications for potential bugs.
It’s a complete testing of web-based applications before making live[ CITATION Sof17 \l 1033 ]. A
web-based system needs to be checked completely from end-to-end before it goes live for end users.
By performing website testing, an organization can make sure that the web-based system is
functioning properly and can be accepted by real-time users. The various merits of website testing
are:-
 The reliability and accuracy of website should increase.
 The customers are satisfied as it helps in fulfilling all the needs and requirement easily.
 The various areas of improvements can be made which helps to enhance the effectiveness and
performances of website

After designing website, it is very necessary to test if it is performing well or not. So here I am doing
to do testing on every steps of web pages. Website testing helps to make feel relief and confident to
the designer and the organization that the website works as intended. Testing the website helps to
catch the defect in it. Performing this kind of testing helps to test driven development, check the
validation of HTML and CSS code. Also, it helps to find out the performance and the functionality
of the website. The various test done to analyze the website are:
Integrated Testing:
“Upon completion of unit testing, the units or modules are to be integrated which gives raise to
integration testing. The purpose of integration testing is to verify the functional, performance,
and reliability between the modules that are integrated”[ CITATION Tut16 \l 1033 ]. Integration
tests verify that different modules or services used by your application work well together. For
example, it can be testing the interaction with the database or making sure that micro services
work together as expected. These types of tests are more expensive to run as they require
multiple parts of the application to be up and running.

Microsoft Office User

80
 Web Development 2019

S.N What was tested? Expected output Actual output Remarks

Navigation Links External and Internal All Links Working Site navigations
Links Function Well perfectly. works well but it
doesn’t mark the
tab where user
clicked

Analysis:
The integration testing showed positive result. There was testing done to know about the link
between the two pages. When the about link was clicked from the home page, the about page was
showed.
 Stress testing:
“Stress testing is the process of determining the ability of a computer, network, program or
device to maintain a certain level of effectiveness under unfavorable conditions. The process can
involve quantitative tests done in a lab, such as measuring the frequency of errors or
system crashes”[ CITATION Mar07 \l 1033 ]. The issues that would eventually come out as the
result of stress testing may include synchronization issues, memory leaks, race conditions, etc.
The purpose of stress testing is to ascertain the failure of the system and to monitor how the
system recovers back gracefully. The challenge here is to set up a controlled environment before
launching the test so that you can precisely capture the behavior of the system repeatedly under
the most unpredictable scenarios.

S.N What was tested? Expected output Actual output Remarks

Microsoft Office User

81
 Web Development 2019

Stress testing of The website should The contact page The stress testing
the website. work properly with no was operated of website was
flaws. properly with no tested successfully.
flaws.

Microsoft Office User

82
 Web Development 2019

Analysis:
The stress testing showed positive result. The contact page of website operated efficiently. All the
feature were correctly working with no any flaws in the website.

S.N What was tested? Expected output Actual output Remarks

Validations Form Validated. It does not allow to Forms are well

submit request unless validated in the
and unless all required
information’s are sections.
entered

 Performance testing:
Performance tests check the behaviors of the system when it is under significant load. These tests
are non-functional and can have the various forms to understand the reliability, stability, and
availability of the platform. For instance, it can be observing response times when executing a
high number of requests, or seeing how the system behaves with a significant of data.

Microsoft Office User

83
 Web Development 2019

Performance tests are by their nature quite costly to implement and run, but they can help you
understand if new changes are going to degrade your system.

S.N What was tested? Expected output Actual output Remarks

Performance of The website should play The website ran The

website. when large number of with the large performance of
customers used this number of customer website was
website.. used this website. tested
successfully

Microsoft Office User

84
 Web Development 2019

Analysis:
The performance testing showed positive results. The components of the website were displayed
immediately showed the good performance.

Microsoft Office User

85
 Web Development 2019

Critical Review
The website is not so much attractive of Rainbow Airlines because there is poor navigation, no
hypertext links, not using heading elements, improper design and misbalance of color which was
very difficult to use it by disable user and even basic user. This type of design will not attract and
motivate the visitors. If visitors are not attracted, then once visit is enough for next time.
Rainbow Airlines provide some information to other users or visitors but in my opinion that is not
enough to make the visitors satisfaction and attract. This type of website cannot help in upgrading
the business and cannot help in keeping the reputation of company.
The website should be more attractive and have to design needed contents which can provide all
sorts of clear information about Rainbow Airlines. There should be a proper design and designer has
to be design the website as compare the disable users. By which disable user also can access the
website easily as basic users. Designer must follow the rule of site analysis accessibility which helps
in improving the website and too better in upgrading the business. While upgrading it keep its
reputation of company.
New website of Rainbow Airlines according to my view and design:
This new website has proper design, internal and external links function well, site navigation is
working perfectly, jQuery slider works fine and JavaScript working well which can fulfill the
requirement, attract and motivate the users or visitors. This website is designed under using HTML
code, CSS, JavaScript and JQuery which help the run the website efficiently. This design of website
provides accurate and clear information about Rainbow Airlines and can attract and motivate the
visitors as well help in upgrading the business.
Conclusion
With the proper testing of the website helps to increase the interactivity of the visitors. Complete
testing of the website helps to assure an entire application. It helps on addressing issues like
increasing the readiness of web server for the traffic. Testing helps to give assurance of reliability
and stable work of the website developed.

Microsoft Office User

86
 Web Development 2019

M5: Evaluate the Quality Assurance (QA) it’s implemented during design and development
stages.

Introduction
Quality Assurance (QA) is defined as an activity to ensure that an organization is providing the best
possible product or service to customers. Quality Assurance (QA) ensures that end-users get a
functional user interface and the best user experience when using a web app or website. It examines a
website or web application to try and uncover any flaws that might have been overlooked during
design and development. Quality Assurance usually involves:

 Requirement testing

 Design evaluation

 Functionality testing

Requirement testing:

Requirement testing takes into account the requirements that were expressed by the client as well as
other client-approved design documents. Requirement testing is essential throughout the development
process to ensure that the project team meets all of their mission objectives.

Design evaluation:
Design testing looks at the appearance of the web app or website. The process of design testing is
multi-faceted and includes such activities as browser testing and mobile testing.

Functionality testing:
Functionality testing evaluates both the UI (User Interface) and UX (User Experience) of a web app
or website. It usually is the final step in Quality Assurance testing. It is a rigorous process that
ensures that each link, button, form and all the other features are operating as they should.

Implementation of Quality Assurance (QA) during design and development stages:

The main function of Quality Assurance (QA) is to examine the processes and make changes to the
processes which led to the end-product. QA is merely a step in the process between development and

Microsoft Office User

87
 Web Development 2019

testing. During the design and development stages of Rainbow Airlines website different tools and
techniques were used. QA involved getting a product design as well as trial and error data and its
evaluation. The documentation was distributed, checked and approved. QA created a funnel around
design changes, mitigate miscommunication, and plan around edge cases.

Quality Assurance process

Quality assurance has a defined cycle called PDCA cycle or Deming cycle. The phases of this cycle
are as follows:
 Plan
 Do
 Check
 Act
These above steps are repeated to ensure that processes followed in the airlines company are
evaluated and improved on a periodic basis. The above steps of quality assurance are discussed
below:-
 Plan - Organization should plan and establish the process related objectives and determine the
processes that are required to deliver a high-Quality end product.
 Do - Development and testing of Processes and also "do" changes in the processes
 Check - Monitoring of processes, modify the processes, and check whether it meets the
predetermined objectives
 Act - Implement actions that are necessary to achieve improvements in the processes

An airlines company must use Quality Assurance to ensure that the product is designed and
implemented with correct procedures. This helps reduce problems and errors, in the final product.
There are various testing carried out to improve the quality assurance in design and development
stages of Rainbow Nepal Airlines Company website are given below:-

Conclusion:
The QA team responsibility in this would be to help drive quality, testing on the feature level, and
coming together to run full regression when it gets to the integration level. Automation can be
separate from this, as long as they have their requirements
It ensures that your product delivers excellent usability, functionality, and performance. It’s thus
highly recommended that all web development agencies invest in a QA team that will work hand-in-
hand with project developers, designers, and clients in delivering high-quality product and solutions.

Microsoft Office User

88
 Web Development 2019

D3: Critically evaluates the results of your Test Plan and includes a review of the overall
success of your multipage website; use this evaluation to explain any areas of success and
provide justified recommendations for areas that require improvement.
Introduction
Testing is very essential before launching the website which helps in development of website. Each
page has to be test for improvement and developing the website as well as critical evaluation is also
necessary before launching it and this is the recommendations for improvement of the website.
Designer must evaluate the website because it provides suggestion towards the performance and
efficiency of the website. Mainly, evaluation helps to provide feedback or comment from the users
which are significance for the designer to make better efficiency, competence and development of
website.
Some Criteria for Evaluating Peaceful tours and travels Website:
Design and stability:
The newly website of Rainbow Airlines has well designed their design which makes exact flow of
contents. But as compare to older website of Rainbow Airlines, lacks design and stability. Older
Rainbow Airlines website cannot maintain their user accessibility, friendly and usefulness so the
numbers of visited user are few only. Newly website is properly designed its contents, and every
page is linked up with other pages so that navigation page has no errors Designer designed the
website as compare to basic as well as disables user and its usefulness, accessibility and friendly and
visited maximum number of users. The accurate design of newly designed Peaceful tours and travels
site map is shown below:

Microsoft Office User

89
 Web Development 2019

In this newly designed website, the designer gives most priority to stability its duration so that there
are no any problems like page loading error and have been made consistently available to all the
users. High resolution images have been used, using heading elements, using hypertext link so that
user can have clear view. All sorts of information have been designed by designer so that every user
can use it and have a clear perception about Rainbow Airlines.
Authority and Accuracy:
Website should have its authority to use it. Without authority the website cannot run and cannot give
efficiency result to compete in the market and as well as users are also not so friendly to use it or to
visit. Information included in Rainbow Airlines is verified by editions and is published in website
which assists users to judge the trustworthiness of the website.
The designer must think about accuracy while designing the website. Same Rainbow Airlines
website designer also designed the accurate information of it’s as contact information which provides

Microsoft Office User

90
 Web Development 2019

accurate information of office and visitors can visit its office. Accurate information helps to increase
the number visitors to its office by see the location of it. To make website accuracy, the company
should provide the clear identity in their website. Such as:

Recommendation:
To design Rainbow Airlines website, the designer has been used various advanced tools and
programming techniques. Though, it looks better than Rainbow Airlines previous website but its
lack attractiveness and efficiency towards the users and also lacks color combination and design.
Here, the use of JavaScript has made website more reliable and efficient with the uses of validation,
foreign exchange, and images.
To design better website than this the designer has to used HTML5 standard languages rather than
HTML. HTML5 is advance form of HTML. HTML5 used to develop mobile and web applications
that run in different browsers. Same as for tools, the designer has to used Sublime rather than
Dreamweaver. It works perfectly fine as faster, ease of use, capability and much more flexibility to
design the website as compare to Dreamweaver.
For further more recommendation, PHP or [Link] is good language to design the website. This
language helps to design the website easily that also within short period of time as compare to
HTML or HTML5. Both of this PHP or [Link] saves cost. So, Rainbow Airlines need to design
the website using PHP or [Link] for their better improvement of website.

Microsoft Office User

91
 Web Development 2019

Conclusion:
In this part I did different testing of the website design, development and functionality. With the
proper testing of the website helps to increase the interactivity of the visitors. Complete testing of the
website helps to assure an entire application. It helps on addressing issues like increasing the
readiness of web server for the traffic. Testing helps to give assurance of reliability and stable work
of the website developed. And I have created the documentation for the support and maintenance of
the website. I have evaluated the Quality Assurance (QA) process and reviewed how it was
implemented during your design and development stages. In order to complete this task I have
evaluated how have met the Quality for the developed website. I have critically evaluated the results
of my Test Plan and included a review of the overall success of my multipage website; used this
evaluation to explain any areas of success and provide justified recommendations for areas that
require improvement. This task is reference to Part 4 tasks where I have made tests and evaluated the
Quality Assurance Process for my developed website.

Microsoft Office User

92
 Web Development 2019

Bibliography

(2019). Retrieved from [Link]

dns-and-how-does-it-work/
Beal, V. (n.d.). Retrieved from [Link]
Burke, J. (n.d.). Retrieved from [Link]
system
Cloudflare. (n.d.). Retrieved from [Link]
side-vs-server-side/
Dharuna, K. (2015). Retrieved from [Link]
Fairhurst, G. (2011). Retrieved from [Link]
pages/[Link]
Guilizzoni, P. (n.d.). Retrieved from [Link]
wireframes/
Hoffman, C. (2017, July 3). Retrieved from [Link]
is-dns/
Imagine. (2010). Retrieved from [Link]
Interaction Design. (n.d.). Retrieved from [Link]
design
Interaction Design. (n.d.). Retrieved from [Link]
design
Mitchell, B. (2018, December 14). Retrieved from [Link]
networking-817380

Microsoft Office User

93
 Web Development 2019

Pinggera, A. (2017, October 27). Retrieved from [Link]

website-builder/
Rouse, M. (2007, June). Retrieved from
[Link]
Rouse, M. (2016, september). Retrieved from [Link]
system-OS
Rouse, M. (2018, January). Retrieved from
[Link]
skfdjskdfjs. (n.d.). sdfsdf. Retrieved 2014
Software Testing. (2017). Retrieved from [Link]
testing/
Software Testing. (2017). Retrieved from [Link]
Stewart, L. (2019, January 14). Retrieved from [Link]
development-vs-back-end-development-where-to-start
Techopedia. (2010). Retrieved from [Link]
world-wide-web
Techopedia. (2016). Retrieved from [Link]
protocol
TutorialsPoint. (2016). Retrieved from
[Link]
Walters, G. (2017, October 11). Retrieved from [Link]
development
xgxdfd. (n.d.). xxfdxd. Retrieved 2010

Microsoft Office User

94