Website Design and Development Project: A Comprehensive Guide

Desklib provides solved assignments and past papers to help students succeed.

WEBSITE DESIGN AND DEVELOPMENT

Contents
INTRODUCTION...........................................................................................................................................0
LO1.............................................................................................................................................................0
DOMAIN NAMES......................................................................................................................................0
DOMAIN NAME SYSTEM..........................................................................................................................2
IMPORTANCE OF DNS..............................................................................................................................2
TYPES OF DOMAIN NAME SYSTEMS........................................................................................................3
WEB HOSTING......................................................................................................................................4
DIFFERENT TYPES OF WEB HOSTING SERVICES.......................................................................................4
M1 IMPACT OF COMMON WEB DEVELOPMENT TECHNOLOGIES AND FRAMEWORKS...........................5
P2.............................................................................................................................................................6
M2...........................................................................................................................................................7
INFLUENCE OF SEARCH ENGINES ON WEBSITE PERFORMANCE..............................................................7
LO 2.............................................................................................................................................................8
P3 FRONTEND AND BACKEND WEBSITE TECHNOLOGIES........................................................................8
DIFFERENCE BETWEEN ONLINE WEBSITE CREATION TOOLS AND CUSTOM BUILT SITES.........................9
TOOLS AND TECHNIQUE AVAILABLE TO DESIGN AND DEVELOP A CUSTOM BUILT SITE........................10
LO3...........................................................................................................................................................12
DESIGN DOCUMENT FOR A BRANDED WEBSITE....................................................................................12
CLIENT AND USER REQUIREMENT...............................................................................................14
COMPARISION OF MULTIPAGE WEBSITE TO THE DESIGN DOCUMENT..............................15
DESIGN AND DEVELOPMENT OF WEBSITE.............................................................................................16
.................................................................................................................................................................. 18
LO4............................................................................................................................................................21
TEST PLAN FOR THE WEBSITE................................................................................................................21
QUALITY ASSURANCE PROCESS...................................................................................................22
CONCLUSION.............................................................................................................................................23
REFERENCES................................................................................................................................................0

INTRODUCTION
In today’s internet era every business wants to adopt technology in their business. Businesses are
using the website to promote their products and services. Business can hire a website developer
for developing a website. There are two ways to create a website. The website can be created by
using an online website building tool. A web hosting company like Godaddy offers its own
website builder tool. The other method of creating a website is to create a custom website. A
website developer can create a custom website. The custom made a website is much better than
the website created from the online tool. After creating a site it has to be hosted so that people
can use it. For developing a good website planning such as understanding its use, how people
will access the website, hosting platform etc. need to be analyzed first (Law and Buhalis, 2010).
There are many tools for developing a website. Knowledge of website development is required
for creating a website. All the major tools and techniques of website design and development are
discussed.
LO1
DOMAIN NAMES
A domain name is required for hosting a website on the internet. A domain name is a set of string
characters that gives a unique identity to a website. A domain name is used for identifying a
computer on the internet. Each computer on the internet can be identified by its IP address. An IP
address is a set of numerical digits. It is very difficult to remember a string of digits. To
overcome this problem concept of domain names was developed. Now domain names are used
for identifying a website instead of an IP address. In simple terms, the website name is referred
to as a domain name. For e.g. in www.facebook.com, Facebook is the domain name. A domain
name can be purchased from a hosting service provider.

Figure 1: Domain Name
Source: webhostingsecrectrevealed
A domain name consists of three parts.
Top level domain (TLD): The last part of a domain name is called top-level domain. There are
two types of TLDs;
 Generic Type TLD: .com, .org, .net, .gov, .biz and .edu are example of generic TLD.
 Country Specific TLD: .jp, .ca, .mx, .br, .eu, .fr, .cl, .uk are country specific TLD.
Domain and Sub-Domain
To understand domain and subdomain let us take an example of mail.yahoo.com. In this
yahoo.com is the domain and mail.yahoo.com is a subdomain.
Website Domain Name Sub Domain TLD ccTLD
yahoo.com Yahoo - com -
mail.yahoo.com Yahoo mail com -
google.com Google - com -
google.co.in Google - co.jp

DOMAIN NAME SYSTEM
Domain Name System is a distributed database. It resolves the domain names into the IP address.
A computer only understands numbers, it cannot understand domain names. Domain Name
System converts the human-readable hostname into a machine-readable format like
50.19.82.104. DNS stores important data about the domain name. It stores information such as
email server verification, TXT record verification of domain ownership and SSH fingerprint.
IMPORTANCE OF DNS
The most important function of DNS is to map the hostname to its IP address. It works like a
phone book for the internet. When a user types a domain name in a browser for e.g.
www.twitter.com the user’s computer uses DNS service for retrieving the IP address of
twitter.com. Without DNS the user has to type the complete IP address of twitter in into his
browser in order to retrieve twitter website (Archibald et al. , 2011). Let suppose 50.82.10.104 is
twitter IP address, then to visit the twitter.com website the user needs to visit IP address directly,
such as http://50.82.10.104
Figure 2: DNS SYSTEM
Source: dyn.com

TYPES OF DOMAIN NAME SYSTEMS
The World Wide Web is a collection of web pages. These pages are stored on web servers. There
are many servers over the internet. There are 13 root DNS servers. These root DNS servers
contain the global database of the webpage on the internet. There are two types of DNS servers
they are known as primary and secondary DNS server.
Primary Server: Primary server finds and reads from the domain zone file A records available
on the web server. The Primary server sends the A record data to the secondary server. The
server administrator has the responsibility of writing the zone information. Transfer of
information from the primary server to the secondary server is called zone transfer or zone
relocation. Two DNS server is configured for every domain. It is done to provide security and
also create a backup. When a zone data is copied and transferred there is no need for backup
because of the primary server copies all data to the secondary server every time (Rand et al.,
2013).
Secondary DNS server: The main task of a secondary server is to capture information for the
primary server. Secondary server provides backup functionality. One of the primary functions of
the secondary server is data management. It shares the load on the primary server. If the primary
server goes down due to load shedding, overloading or hacker attack then the secondary server
will be used for delivering web contents. Therefore it can be said that a secondary server
provides security.

WEB HOSTING
Figure 3: Web Hosting
Source: Smart eDesigners
DIFFERENT TYPES OF WEB HOSTING SERVICES
The four major types of web hosting servers are Shared Hosting Server, Virtual Private Hosting,
Dedicated Hosting Server and Cloud Hosting Server. All the servers are used for serving
websites on the internet. They differ by their storage capacity, security, server speed, technical
skill requirement and reliability. The four types of hosting server are;
Shared Hosting: Multiple websites are hosted on the same server. The entire pool of websites
shares server resources such as RAM and CPU. Cost of shared hosting is low therefore most of
the websites with moderate traffic are hosted on shared hosting service.
Virtual Private Server Hosting: In Virtual Private Server each server is divided into virtual
servers. Each website is hosted on a dedicated server virtual server. In reality, the websites are
sharing the same server. The virtual division of servers provides a secured hosting environment.
VPS hosting is used for hosting websites that need security and control but are not interested in
investing in expensive servers.

Dedicated Hosting: In a dedicated hosting server the website is hosted on a dedicated server. An
entire server is used for hosting the website. Dedicated Servers are very expensive. It is used by
websites that need greater control and performance (Ravichandran et al., 2014).
Cloud Hosting: Cloud hosting is used for hosting very high traffic websites.
M1 IMPACT OF COMMON WEB DEVELOPMENT TECHNOLOGIES AND
FRAMEWORKS
There are various techniques and frameworks that are used for web development. The main aim
of this technology and frameworks is to ease the process of web development. The major web
development technology and frameworks are discussed here. Browser is a software application
used for accessing information on the Internet. The browser is used for accessing a web page on
the internet. There are many browsers available in the market. Google Chrome is a cross-
platform web browser. It was developed by Google, the Safari web browser is developed by
Apple. Apple computers use the Safari web browser. Firefox is developed by Mozilla
Foundation and it is an open-source web browser. Hypertext Markup Language is a markup
language used for creating web pages. It is one of the most popular languages for web page
development. The language was developed by Tim Berners-Lee in 1991. HTML is a tag-based
programming language. HTML5 is the latest version of Hypertext Markup Language. The
HTML tag is a root element of the HTML page. Html tag is used for specifying that the
document is an HTML document. head tag contains elements like title, metadata, stylesheet etc.
title tag is used to give a title to the web page. The title is visible on the web browser tabs. body
tag contains the main contains the body of HTML document. CSS stands for cascading style
sheet. It is used for styling the HTML elements. It is used for describing the presentation of a
web page (Banos, and Manolopoulos, 2016). CSS can be used to give a presentable look to a
web page. The current version of CSS is CSS3. CSS can be used to change colour, fonts,
animation and transition on the web page. The computer understands numbers only. A
programming language helps in communicating with the computer system. The programming
language is used for giving instruction to the computer. Some of the popular programming
languages are; Java, PHP, JavaScript, C#, Python, Ruby, Objective C etc. A web Frameworks is
a software development tool that helps to ease the process of web development. Some of the

most popular web frameworks are Meteor, Node.js, Bootstrap, Ionic, PhoneGap, Wordpress,
Angular and ReactJS.
P2
HTTP (Hyper Text Transfer Protocol) is a communication protocol responsible for serving web
pages. The HTTP protocol defines how the message will be transmitted, formatted and served to
a client computer system. FTP (File Transfer Protocol) is used for moving a local file to a remote
file system. FTP client software is used for transferring webpage to a web hosting server. Web
server is a computer program that serves webpage on user request. A web server uses HTTP
protocol for transferring web page over the internet. Some of the popular web servers are
Apache, Apache Tomcat, Microsoft’s Internet Information Server (IIS) and Novell’s Web Server
etc. Server hardware and operating system: Web server is a computer system that is used for
serving a web page. A web server has the hardware, operating system, and TCP/IP protocol
management software. Server operating systems are operating systems that run on servers. Web
hosting is an internet hosting service that allows people to post their website on the World Wide
Web or the internet (Aghaei et al., 2012). A web hosting service is needed for hosting the
website on the internet. Websites are stored on high-performance computers called servers.
When a user wants to view a website they have to type the domain name into their browser.
Through an internet connection, their computer will connect to the hosting server and the website
will be served to them through their browser. Every website is recognized by its domain name.
The hosting company will need a domain name for hosting a website. The hosting company also
sell domain names. Website owners can purchase domain names from the hosting service
provider. A web hosting service provides special equipment, support, expensive servers,
networking equipment and dedicated network access.

M2
INFLUENCE OF SEARCH ENGINES ON WEBSITE PERFORMANCE
Websites are hosted on web servers when user request resource on the internet the web servers
fetch the requested resource and show it to the user. Since there is a lot of website that is
showing the same content a search engine has to decide which webpage will be shown to the
user. A search engine uses various algorithms to select the most relevant web page. Various
algorithms are used by search engines. If we want our website to show on the first page of the
search engine we have to optimize our website through SEO (Kumar and Saini, 2011). Search
engine optimization is the process by which we can increase website traffic, website visibility,
search engine rankings etc.
Ways through which website ranking can be improved
Publishing relevant content: content on a website is important factors that can decide the website
rankings. A website should produce quality contents. Quality content on a website increase
traffic to the side. A search engine such as Google index webpage and rank them according to
their relevancy. Good content will always attract readers. Search engines understand that lot of
people are searching a webpage hence it will assign high index ranking to that webpage. Search
engine optimization should be done to increase website ranking. Content should be updated
regularly. Updated content is more relevant. Search engines give high index ranking to updated
content. Metadata should be used properly (Tanjung, and Dhewanto, 2014.). Metadata is data
about data. Metadata is written between the in head tags. It tells important information about a
website. Title metadata is used for displaying the title of the webpage. A title is displayed on the
browser tab. Title metadata is important because the title is shown as a headline in search engine
results. Description metadata is used for providing a description to a web page. It displayed in
search results. Therefore description metadata is important for website rankings. Keyword
metadata are used to specify the keywords for the website. Website links play an important
ranking and its index value. The website contains links to other pages. Links within a webpage
should be descriptive links for e.g. instead of writing click here we should use descriptive links.
Resources such as an image, video, audio must include alt tags. Alt tag helps search engine in
locating a web page (IJCSEIT, 2012).

LO 2
P3 FRONTEND AND BACKEND WEBSITE TECHNOLOGIES
Figure 4: Frontend and Backend web technologies
The frontend of a website is the part that is visible to the user. The frontend is everything that a
user can interact with. The frontend is also referred to as client side. Frontend includes web
elements like font text, colour, buttons navigation etc. Major Frontend Development Languages
are;
HTML: HTML is a fundamental web development language that is used for creating and
organizes web content.
CSS: Cascading Style Sheet is used for giving style to the website. It makes web page
presentable.
JavaScript: JavaScript is a programming language that can be used to provide interactivity to a
webpage. Elements such as model, dropdowns, and contact forms can be made by using
JavaScript.
A static website is a simple website and generally used for showing content. Its content does not
change dynamically. All code of a static website is a frontend code. HTML, CSS and JavaScript
language is used in frontend development. For building a dynamic site backend web technology
has to be used.

Backend is also referred to as server side. The backend code runs on the server. A backend of a
website is used for storing and organizing data. Backend communicates with frontend and sends
and receives data that is shown on the client side. Knowledge of Server side programming
language is required for developing the backend of a website. The major backend development
programming languages are Java, PHP, ASP.Net, Python, Ruby etc (Smith, 2012).
Frontend Backend
The client side of an application is called
frontend
The server side of an application is called
backend
User can see and interact with the frontend of a
website
User cannot see the backend of an application.
Frontend includes the visible and interactive
elements like buttons, forms, navigation bar,
images and videos
The backend consists of a web server and
database.
Frontend technology include HTML,CSS,JS Backend development technology includes
Python, PHP, Ruby etc.
Front end can be touched and experienced A backend is like the brain of the web
application. It cannot be touched.
P4
DIFFERENCE BETWEEN ONLINE WEBSITE CREATION TOOLS AND CUSTOM
BUILT SITES
Many people do not have knowledge of website development. Web hosting companies provide
online tools through which the user can create their website. We can also create custom built
websites. Online website creation tools are also called website builder. User can create a website
without anyone assistance. A website builder provides a platform and interface through which a
website can be created without code knowledge. The interface contains drag and drops
functionality. Online creation tool does not offer a lot of functionality. The web hosting provider
decides its own set of functionality (Kleinschmidt et al.,2016). There are lots of templates that
are provided by the web hosting company but it is not necessary that it will be as good as we
want for our website. Online website creation tools are helpful when the user does not want to