HND Computing Unit 10: Website Design and Development Project

Desklib provides past papers and solved assignments for students. This project details website design and development.

ICON College of Technology and Management BTEC HND in
Computing
Unit 10: Website Design and Development (L4)
Session: September 2018
Student ID:
Student Name:

Contents
LO1 Explain server technologies and management services associated with hosting and
managing websites.....................................................................................................................5
P1 Identify the purpose and types of DNS, including explanations on how domain names
are organised and managed....................................................................................................5
P2 Explain the purpose and relationships between communication protocols, server
hardware, operating systems and web server software with regards to designing, publishing
and accessing a website..........................................................................................................7
M1 Evaluate the impact of common web development technologies and frameworks with
regards to website design, functionality and management.....................................................7
M2 Review the influence of search engines on website performance and provide evidence-
based support for improving a site’s index value and rank through search engine
optimisation............................................................................................................................8
LO2 Categorise website technologies, tools and software used to develop website.................9
P3 Discuss the capabilities and relationships between front-end and back-end website
technologies and explain how these relate to presentation and application layers................9
Website Technologies-...........................................................................................................9
P4 Discuss the differences between online website creation tools and custom-built sites
with regards to design flexibility, performance, functionality, User experience.................10
Online Web Creation Tools Vs Custom Built Sites-...........................................................10
M3 Evaluate a range of tools and techniques available to design and develop a custom-
built website.........................................................................................................................11
Tools & Techniques Available To Design a website-.........................................................11
LO3 Utilise website technologies, tools and techniques with good design principles to create
a multipage website..................................................................................................................12
P5 Create a design document for a branded, multipage website supported with medium
fidelity wireframes and a full set of client and user requirements.......................................12
P6 Use your design document with appropriate principles, standards and guidelines to
produce a branded, multipage website supported with realistic content..............................15
M4 Compare and contrast the multipage website created to the design document.............17

LO4 Create and use a Test Plan to review the performance and design of a multipage website.
..................................................................................................................................................18
P7 Create a suitable test plan identifying key performance area and use it to review the
functionality and performance of your website...................................................................18
M5 Evaluate the Quality Assurance (QA) process and review how it was implemented
during your design and development stages........................................................................19
References................................................................................................................................20
Appendix..................................................................................................................................21

List of figures
Figure 1: Wireframe of the home page....................................................................................12
Figure 2: Wireframe of the menu page....................................................................................13
Figure 3: Wireframe of the gallery page..................................................................................13
Figure 4: Wireframe of the contact page..................................................................................14
Figure 5: Actual design- menu page........................................................................................15
Figure 6: Actual design- Contact page.....................................................................................15
Figure 7: Menu page................................................................................................................16
Figure 8: Menu page - Order section.......................................................................................16

LO1 Explain server technologies and management services associated with
hosting and managing websites
Let us begin by understanding what it is all about domain name system or the DNS. The
domain name system is a method by which domain names are located on the internet. After
they are found and located, they are translated into IP addresses. The computer gets to know
the exact location of the website we want to access by the IP address which is fetched by the
domain name system. We can browse the websites we want to access just by punching in the
domain names in the address bar, but our browser actually needs to know the IP address to
redirect us properly.
P1 Identify the purpose and types of DNS, including explanations on how domain
names are organised and managed.
The process: In order to fetch the internet protocol address of the web application or the
website we are trying to reach, the client sends a request to the DNS system first of all. A
domain name system contains the IP addresses of websites with their matching urls, just like
a phonebook. It matches the requested url with an IP address and then goes to the recursive
nameserver. A recursive nameserver is typically offered by the ISP i.e. the internet service
provider but publically available servers managed by organizations such as Google can also
be used. The recursive nameserver will respond back if it has the IP address of the requested
website but if it doesn’t it goes to one of the thirteen top level root servers. These thirteen
servers manage large traffic for domain extensions like .org or .com. It is not like there are
only thirteen servers to manage all the traffic; they actually use redundant hardware all over
the globe to efficiently handle all the incoming requests. The client request is sent to the
respective nameserver, .org for example if Wikipedia.org is being tried to access. These top
level domain name servers send the request to authoritative name servers which will have a
genuine list of internet protocol addresses and their respective matching urls. These lists are
updated every time when a domain is bought and registered. After the IP is fetched, it is sent
back to recursive nameserver and further to the client browser. In order to complete this
process of retrieving IP addresses quicker next time, both the computer and the recursive
nameserver save the DNS entries, this is also called ‘caching’. Now the next time
Wikipedia.org is requested, the client machine would already have the address or the
recursive server will be able to provide it directly.

There are mainly four categories of DNS servers which are: Recursive resolvers, TLD name
servers, authoritative name servers and root name servers. When no caching is in play, the
four DNS servers work together to finish the task of fetching the IP address for a particular
domain to the client.
DNS Recursive resolver: The DNS recurs or servers as a middleman between a DNS name
server and a client. When it receives any DNS query, the resolver responds either with cached
data or requests the root name server. This is shadowed by another request to a TLD name
server and the last one to an authoritative name server. When a response from the
authoritative name server with the IP address is received, it is the job of the resolver to send
that response to the client.
DNS Root name server: The thirteen DNS root name servers are the first places a recursive
resolver comes to when it is searching for DNS records. The root server responds to the
recursive resolver’s query by responding with a redirection to a TLD name server which is
identified by the extension of the domain i.e. .com, .net etc.
TLD name server: All the information for the domains sharing a common extension is
maintained by the TLD name server. It is already stated above that in a DNS recursive
resolver’s query; a request to the TLD name server is also made. A .com TLD name server
would contain all the information for all the domains with .com as their extension.
Authoritative name server: The last request made by the recursive resolver is the one made
to an authoritative name server. It contains the information particular to the domain it is
serving. It can also provide the IP address of the server to the recursive resolver. (Cloudflare,
2019)

P2 Explain the purpose and relationships between communication protocols,
server hardware, operating systems and web server software with regards to
designing, publishing and accessing a website.
Web Hosting-
Web hosting is a service by the use of which individuals or organizations upload their
websites to the internet. A web hosting provider provides these organizations the services
needed to manage the webpages they upload on the internet. These hosting providers also
allow the users to buy and manage web domains by different tools. Email accounts, FTP
access, Word press support, SEO capabilities are some of the services offered by these
hosting providers.
The host providers offer different kind of host servers with different specifications and
features for different kind of users. Some of the different web host servers are : shared web
host servers, cloud based servers, virtual private servers, dedicated web servers, managed
word press hosting and many more. These servers run either on linux or Microsoft windows
with linux being the popular choice as it is free.
These servers also provide tools required to manage and build websites. Most host servers
provide cPanel which makes managing websites super easy. Website builder tools such as
Word press are also offered by the use of which custom websites can be built without the
requirement of any programming. Similarly, ecommerce tools and website analyser tools are
also available.
M1 Evaluate the impact of common web development technologies and
frameworks with regards to website design, functionality and management.
Web Development Technologies & Frameworks-
For the scripting and programming of web applications there are two main categories:
Client Side scripting: This part of the code is interpreted by the browsers itself and thus
handled on the client side itself. The client side code can also be viewed by all the users and
no sensitive information is included in its code. The technologies used for this are HTML,
CSS, JavaScript, Ajax etc.

Server side scripting: The logical programming of the project is called as the server side
scripting. This code usually serves as the backend of the web application and is not visible to
the visitor. It is interpreted by the server and no processing of this code is done on the client
side. Technologies used for server side scripting are PHP, Java, Python, Ruby on Rails, Perl
etc.
Web application frameworks: These are sets of pre-built code which can be directly used
by programmers to add features or functionalities to their applications. Frameworks make
developing a web application a lot easier as the programmer does not need to waste time into
creating that piece of code again and can directly make use of it. It allows the creation of
dynamic and robust websites quickly. Bootstrap, Bulma are some of the frontend
frameworks, similarly language specific frameworks such as Spring for Java, Laravel for
PHP and Rails for Ruby are some of the backend web application frameworks.
M2 Review the influence of search engines on website performance and provide
evidence-based support for improving a site’s index value and rank through
search engine optimisation.
A well designed and maintained website can help gain tremendous benefits as it will be easily
found by the users. More traffic can be redirected towards the website leading to better
business. Search engines have a way of ranking the websites on the pages, better ranking
leads to better results. Let us see how this ranking is done.
 Relevant links- The search engines look for relevant links on the website to determine
how much useful content is available on the website. Emphasis should be laid on
strong link building while developing a website.
 Optimized content- The well-built links must also have valid and optimized content
which would be actually helpful to the users. Keywords, meta descriptions, heading
tags, urls, hyperlinks are some of the parts which should be properly organized such
that it increases the readability by the search engines.
 User experience- UX also plays a great role in determining the website rankings and
since it depends on many factors and is quite difficult to measure. However some
basics of improving the UX are loading time, improving site architecture, better
content availability, high dwell time and CTR. (Search Engine Journal, 2019)

LO2 Categorise website technologies, tools and software used to develop
website
P3 Discuss the capabilities and relationships between front-end and back-end
website technologies and explain how these relate to presentation and application
layers.
Website Technologies-
Most of the web applications and websites are based on the three tier architecture system. It is
a client-server architecture model in which different parts of the application are developed
individually without hindrance to other tiers or layers of the system.
The three layers include:
The Presentation layer is defined as top level layer that seems to be responsible for
information display on the browser. We can also say that client side scripting is done in this
layer; the code is processed on the client side itself and is visible to the user. HTML, CSS,
JavaScript are some client side scripting languages which come under the presentation layer.
The Application layer is the middle tier of the system which handles the logical part of the
system. Server side scripting is done in this layer and it controls the application functionality.
Processing of the business logic for the system occurs under this layer and displayed on the
presentation layer. The technologies used for server side scripting are Java, PHP, Python etc.
The code under this layer is not visible to the user and this code is also responsible for
communicating with the other layers of the system and making the application dynamic in
nature.
The Data layer of the system contains the database required for the web application. The
information is stored and retrieved from this layer and is independent of other layers.
MySQL, Oracle, Mongo are some of the technologies used in this layer. (JReport, 2019)

P4 Discuss the differences between online website creation tools and custom-built
sites with regards to design flexibility, performance, functionality, User
experience.
Online Web Creation Tools Vs Custom Built Sites-
Creating a website these days has become much easier due to the website builder tools such
as Word press, Wix and Square space. These tools are basically WYSIWYG (what-you-see-
is-what-you-get) HTML editors. Building a website with contemporary look without having
to put in hours of time is now possible with such tools. Let’s see how websites built with
these tools and custom built websites with code differ:
 Website builder tools are similar to a guided tour, they have an easy to use interface
with clear instructions on what to do and how to do. Prior programming skills are not
required to use these tools and you do not need to build the website from the scratch.
Whereas, coding the website all by our own would require a great understanding of
front end and back end languages in order execute what has been planned and this
might also take more time.
 Pre-built themes and plugins are available to use on the web builder platforms which
can be directly used and implemented to the website. Features can be added and the
look can be customized with the help of these plugins and themes. But not all the
themes and plugins are free to use and no matter they allow customizability without
having to code, they cannot be as flexible as the code from scratch would be.
 The plugins and themes are built by different organizations and nobody monitors what
is being uploaded. This increases the chances of malware attacks with these plugins.
Organizations might trick the users into installing plugins by making them look
genuine but in reality they might be pieces of malicious codes, stealing user data.
With custom code, a chance of such attacks is eliminated and the logical part of the
application can be coded just as wanted.
 Building websites with these tools enables the users to create a responsive design
right away. They automatically get a website usable on all kinds of devices and for
users with no experience in programming, doing this all by themselves is a big plus
point. With custom code, frameworks need to be used to make the design responsive.
Using these frameworks again requires prior experience on building websites and it
can be a difficult task which is not possible for everyone.

 The codes generated by the web builder tools are easy to read for search engines plus
they also provide SEO tools to increase the ranking of website. Each page can be
optimized with these tools leading to a better overall ranking. Manually coding would
require the knowledge of SEO to be implemented in code which is not everyone’s cup
of tea.
 If the website is coded by your own, porting it across hosting platforms is also much
easier as compared to the ones built with online website builder tools.
M3 Evaluate a range of tools and techniques available to design and develop a
custom-built website.
Tools & Techniques Available To Design a website-
There are various tools and platforms that we can choose from if we want to build a website.
It is not always required to hire a professional to get a custom built website created, it can
now also be done by the individual himself using the various web builder tools and a lot of
help is available online as well. It is all upon the choice now.
After setting the goals for the website and buying the domain and hosting plan for it we can
start thinking upon the tools that we will be using to make it possible.
1. Website builders- These are software’s which make the designing and constructions
of websites easier by providing an easy to use user interface. No prior programming
knowledge is required to use these tools and anyone can easily build and deploy a
custom built website with these tools. They provide themes and plugins which
provide different customizability options, the users can choose from hundreds of
options and use them to achieve what they want. Word press, Wix, Square space are
some of the online web builder tools.
2. Coding from scratch- For those who have experience in building websites can start
building it from the scratch. Front end languages like HTML, CSS and JavaScript can
be used to create exactly what is required. There are a lot of languages available to
choose from to develop the logical part of the web application. PHP, Java, Python,
Ruby on rails are some of the most popular choices among these. Websites built
using these languages can be developed under the MVC architecture which allows
efficient building of websites.

LO3 Utilise website technologies, tools and techniques with good design
principles to create a multipage website.
P5 Create a design document for a branded, multipage website supported with
medium fidelity wireframes and a full set of client and user requirements
The first phase of designing an application or a website is creating the basic layout for it. A
graphical presentation using lines and boxes is done in order to have a rough view of what is
going to be designed. It is similar to the blueprint of a building and it specifies the details at
the initial design process. Wireframes for the website have been created. (Experience UX,
2019)
Figure 1: Wireframe of the home page