Assignment 1

Tạ Nguyễn Minh Tuân – GCS18864

Class: GCS0802A
 ASSIGNMENT 1 BRIEF

Qualification BTEC Level 5 HND Diploma in Computing

Unit number 10: Website Design & Development

Assignment title Web Services Presentation and Guidebook

Academic Year 2020 – 2021

Unit Tutor Hồ Nguyễn Phú Bảo

Issue date Submission date 10/04/2020

IV name and date Tạ Nguyễn Minh Tuân – GCS18864

 Learning Outcomes and Assessment Criteria
Pass Merit Distinction
LO1 Explain server technologies and management services associated with hosting
and managing websites
P1 Identify the purpose and types of DNS, M1 Evaluate the impact of common web LO1 & 2
including explanations on how domain names are development technologies and frameworks with D1 Justify the tools and techniques chosen
organised and managed. regards to website design, functionality and
to realise a custom built website.
management.
P2 Explain the purpose and relationships between
communication protocols, server hardware, M2 Review the influence of search engines on
operating systems and web server software with website performance and provide evidence-
regards to designing, publishing and accessing a based support for improving a site’s index value
website. and rank through search engine optimisation.

LO2 Categorise website technologies, tools and software used to develop websites
P3 Discuss the capabilities and relationships M3 Evaluate a range of tools and techniques
between front-end and back-end website available to design and develop a custom built
technologies and explain how these relate to website.
presentation and application layers.

P4 Discuss the differences between online

website creation tools and custom built sites with
regards to design flexibility, performance,
functionality, User Experience (UX) and User
Interface (UI).
 ASSIGNMENT 1 FRONT SHEET

Grading grid

Qualification BTEC Level 5 HND Diploma in Computing

Unit number and title 10: Website Design & Development

Submission date 10/04/2020 Date Received 1st submission

Date Received 2nd
Re-submission Date
submission
Student Name Tạ Nguyễn Minh Tuân Student ID GCS18864

Class GCS0802A Assessor name Hồ Nguyễn Phú Bảo

Student declaration

I certify that the assignment submission is entirely my own work and I fully understand the consequences of plagiarism. I
understand that making a false declaration is a form of malpractice.

Student’s signature

P1 P2 P3 P4 M1 M2 M3 D1
 Content
LO1 Explain server technologies and management services associated with hosting and managing websites
• Introduction of web mechanism…………………………………………………………………………………………………………Slide 7
• Server technologies………………………………………………………………………………………………………………………Slide 10
• Management services associated with hosting…………………………………………………………………………………………Slide 11

P1 Identify the purpose and types of DNS, including explanations on how domain names are organised an
d managed.

• DNS…………………………………………………………………………………………………………………………………………Slide 13
• Advantages and disadvantages……………………………………………………………………………………………………………Slide 15
• DNS Protection…………………………………………………………………………………………………………………………….Slide 16
P2 Explain the purpose and relationships between communication protocols, server hardware, operating systems and
web server software with regards to designing, publishing and accessing a website.

• Communication protocol………………………………………………………………………………………………………………….Slide 17
• Kind of Server Hardware…………………………………………………………………………………………………………………Slide 19
• Web Server Software………………………………………………………………………………………………………………………Slide 20
• Operating Systems for Web Servers …………………………………………………………………………………………………….Slide 21
P3 Discuss the capabilities and relationships between front-end and back-end website technologies and
explain how these relate to presentation and application layers.

• The front-end and Back-end……………………………………………………………………………………………………………Slide 22

• HTML……………………………………………………………………………………………………………………………………Slide 24
• CSS, java script………………………………………………………………………………………………………………………….Slide 25
• Responsive Design……………………………………………………………………………………………………………………….Slide 26
• Relationship front-end and back-end…………………………………………………………………………………………………..Slide 27

P4 Discuss the differences between online website creation tools and custom built sites with regards to design flexibilit
y, performance, functionality, User Experience (UX) and User Interface (UI).

• Examples of online creation tool (WIX.com) ………………………………………………………………………………………….Slide 28

• Online website creation tool ……………………………………………………………………………………………………………Slide 32
• The Value of custom-built sites………………………………………………………………………………………………………….Slide 32
• Different between Online creation tools and custom built website……………………………………………………………………Slide 33
• UX design and UI design…………………………………………………………………………………………………………………Slide 35
LO1 Explain server technologies and management services associated with hosting and
managing websites

Introduction of web mechanism

• Web consists of billions of clients and server connected through wires and wireless networks. The web clients make
requests to web server. The web server receives the request, finds the resources and return the response to the client.
When a server answers a request, it usually sends some type of content to the client. The client uses web browser to s
end request to the server. The server often sends response to the browser with a set of instructions written in HTML
(HyperText Markup Language). All browsers know how to display HTML page to the client.
 Explain server technologies

Server Definition
A server is a computer equipped with specific programs and/or hardware that enables it to offer services to other computers (clients) on its netwo
rk. There are different types and capabilities of servers. Think about transportation. We can think of transportation as anything that can move so
mething or someone from one location to the other. A bicycle can move one person, a car can move four people, a bus can move 50 people, and a
plane can move 500 people. They are all modes of transport, but each has a different capacity. The same applies to servers.

Web Server
A web server is an HTTP server to support websites to meet customer requirements. on your browser as a customer you can request a website hos
ted on a server with a domain called the home page. In order to perform the server request, the system r locator is required for you.

An Application Server
An application server stores and manages all applications between an organization's users and its databases or backend business applications.
 Management services associated with hosting

• Managed hosting is an IT provisioning model in which a service provider leases dedicated servers and associated hardware to a single c
ustomer and manages those systems on the customer's behalf. In managed hosting, customers can rent equipment such as dedicated serv
er, storage and network hardware; operating systems; and system software. The leased equipment serves only that single customer -- o
r "tenant" as customers are referred to single-tenancy architecture. The customer usually has administrative access to the leased systems
yet rarely uses it, instead opting to interact with the system through a web-based interface.

• Management services are a key aspect to what differentiates managed hosting from other dedicated hosting services. Typically, managed
hosting providers are responsible for hardware and software setup and configuration, technical support, patch management, system maint
enance, monitoring and updates. Managed hosting providers, however, may offer a menu of add-on services and/or packages that range f
rom basic service offerings to pricier bundles of more advanced services. In most cases, managed hosting services can be customized to f
it a customer's specific business requirements. Among the services that customers can expect from managed hosting providers include: b
ackups and disaster recovery; load balancing; security services, such as vulnerability scans, intrusion detection, and distributed denial- of-
service prevention and mitigation; physical security measures for safeguarding data centers; server configuration, maintenance and moni
toring; application support; and support for resolving technical issues. Some managed hosting companies have partnered with Amazon W
eb Services, Microsoft Azure and other cloud providers to expand their portfolios of management service offerings. Managed hosting pla
ns frequently come with a service-level agreement, which outlines the services the customer is paying for and service standards that the
hosting provider is required to meet.
 Management services associated with hosting

o Back up your website. Should your site happen to crash without warning, it would be disastrous to lose all of the data and coding that you’ve w
orked hard to put together. Backing up your website will allow you to restore the most recent version of the site. Back up the site at least once
a month, or whenever edits to the page are made. Even if the company which hosts your site regularly backs up your site, it’s still smart to back
up the site yourself, too. To ensure that you don’t lose website data, you could keep a copy backed up on your computer and another copy save
d to a removable disk or external hard drive.

o Download a program that notifies you if your website is down. To ensure that you find out as soon as your site goes down, download a progra
m like SiteUp. SiteUp is a piece of freeware which runs in the background on your computer. SiteUp and freeware like it will monitor your sit
e and inform you if it a server crashes or the site becomes otherwise unreachable.If the site is down for long, you risk losing or confusing pote
ntial clients or turning away curious internet browsers. Once you’ve been informed that your site is down, you can get the site back up and run
ning as soon as possible.

o Click through your own website. Web developers and programmers can become so close to the websites they create that obvious mistakes can
go unnoticed. Look at every page with a detailed eye to confirm that content displays correctly. Click through every link on the site to ensure t
hat: All links work. All links direct the user to the correct page. All images load correctly. Images load correctly on mobile devices. The website
looks good and functions when viewed on very large or very small monitors.
P1: Identify the purpose and types of DNS, including explanations on how domain
names are organised and managed.

DNS

• The purpose of DNS is an acronym in English of the Domain Name System, which is a name resolution system invented in 1984 for the In
ternet, only a system that allows the corresponding setting between IP address and domain name. Domain Name System (DNS) is a syste
m of naming order for computers, services, or any resources involved in the Internet. It links a variety of information to domain names assi
gned to participants. Most importantly, it translates meaningful domain names for people into identifiers (binary), linked to network equip
ment for the purposes of locating and addressing devices around the world.

• Function of DNS Each website has a different domain name and IP address. When opening the web browser and entering the web name,
we will access the website without an IP address. DNS helps the server translate IP addresses into "names" and vice versa.

• DNS is the phonebook of the Internet. Humans access information online through domain names, like nytimes.com or espn.com. Web brows
ers interact through Internet Protocol (IP) addresses. DNS translates domain names to IP addresses so browsers can load Internet resources.
 DNS
o DNS Resolver
A DNS resolver (recursive resolver), is designed to receive DNS queries, which include a human-readable hostname such as “www.abc.com”, and
is responsible for tracking the IP address for that hostname.

o DNS Root Server

The root server is the first step in the journey from hostname to IP address. The DNS Root Server extracts the Top Level Domain (TLD) from the u
ser’s query — for example, www.abc.com — and provides details for the .com TLD Name Server. In turn, that server will provide details for doma
ins with the .com DNS zone, including “abc.com”.

o Authoritative DNS Server

Higher level servers in the DNS hierarchy define which DNS server is the “authoritative” name server for a specific hostname, meaning that it hol
ds the up-to-date information for that hostname.
The Authoritative Name Server is the last stop in the name server query—it takes the hostname and returns the correct IP address to the DNS Reso
lver.

o Domain names
Domain name is the name of a website operating on the internet, acting as a physical address. It's like a home address or zip code to help satellite r
outers navigate, an application also needs a domain name to navigate to your website.

For example, Hostinger.ph, Google.com, Facebook.com are domain names of Internet companies. When a company (or a person) buys a domain n
ame, they can specify which server the domain name points to.
 Advantages and disadvantages
Advantages
An obvious benefit of such a move is the control. You ar
e the administrator and you can set values and change p
arameters, making changes is easier and faster than outs
ourcing it to another company.
You can have more option in your interface in compariso
n with a managed DNS of another company. If you have
enough knowledge this can be very useful but, in anothe
r hand, if you are not so familiar with managing servers,
it can be confusing
Disadvantages
One apparent problem is the additional administrative work. You
must make sure the servers work correctly and to be updating
your knowledge regularly on how to protect it from new
vulnerabilities. This extra activity is very time- consuming.
You need to be checking all the time for DNS attacks and prevent
them. You don’t want your servers to be down.
And now let’s see why you could be more interested in using
managed DNS servers.
 DNS Protection

• DNS Protection is the concept of protecting the DNS service as a whole, sometimes with an emphasis on security. DNS protection can be split i
nto roughly two categories: protection of the DNS service itself, and protection of the security posture overall. DNS Protection is not an i
ndustry standard term; depending on the context, it may mean different things to different people.
1. Protect DNS Service
In this context, DNS Protection refers to protecting the integrity and availability of the DNS service itself, making it highly available to end users.
This could include employing technologies such as anycast, load balancing, and other high availability and redundancy techniques to achieve and
maintain the availability of the DNS service.

2. Protect Security Posture

In this context, DNS Protection refers to the protection of other resources through the means of DNS. One of the most basic examples is the use o
f Response Policy Zones (RPZ) in recursive name servers. RPZ alters the behavior of recursive name servers, to stop answering queries for known
“bad” domain names: perhaps it is associated with ransomware, or it is operating a known phishing scheme, or just has a bad online reputation. Th
is does not protect the DNS service itself, but it protects the end clients who use DNS.
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

Kind of Server Hardware

• Rack servers: You can store multiple drives and hardware into one tower.
You can expand the space and limit the tower server.

• Blade servers : racks can contain multiple servers that can be stacked and
save floor space and expand resources.

• Tower servers: A tower server is a computer intended for use as a server an

d built in an upright cabinet that stands alone. The cabinet, called a tower,
is similar in size and shape to the cabinet for a tower-style personal compu
ter. This is in contrast to rack server s or blade server s, which are designe
d to be rack-mounted.
 Web Server Software

• This section describes the most popular Web server programs in

use today: Apache HTTP Server, Microsoft Internet Information
Server (IIS), and Sun Java System Web Server (JSWS) (often c
alled by its former names, Sun ONE, iPlanet Enterprise Server,
and Netscape Enterprise Server). These popularity rankings wer
e accumulated through surveys done by Netcraft, a networking
consulting company in Bath, England, known throughout the
world for its Web server survey.
 Operating Systems for Web Servers

Most Web servers run on computers that use one of the following operating systems: Microsoft Windows NT Server, Microsoft
Windows 2000 or 2003 Server products, Linux, or one of several UNIX-based operating systems, such as Solaris or FreeBSD.
Many companies believe that Microsoft server products are simpler for their information systems staff to learn and use than U
NIX-based systems. Other companies worry about the security weaknesses caused by the tight integration between application s
oftware and the operating system in Microsoft products. UNIX based Web servers are more popular, and many users believe t
hat UNIX is a more secure operating system on which to run a Web server.
 Communication protocol

• The Web Communication Protocols most of the time people browse the internet using a web browser. A web browser is an application that a
ccesses information resources defined by URL identifiers. The web browser can provide you with the information you request as accurately as
possible.

• In telecommunication, a communication protocol is a system of rules that allow two or more entities of a communications system to transmit i
nformation via any kind of variation of a physical quantity. The protocol defines the rules, syntax, semantics and synchronization of communica
tion and possible error recovery methods. Protocols may be implemented by hardware, software, or a combination of both.

• Communicating systems use well-defined formats for exchanging various messages. Each message has an exact meaning intended to elicit a res
ponse from a range of possible responses pre-determined for that particular situation. The specified behavior is typically independent of how it i
s to be implemented.
 Communication Protocol

• Communication protocols have to be agreed upon by the parties involved. To reach an agreement, a protocol may be devel
oped into a technical standard. A programming language describes the same for computations, so there is a close analogy
between protocols and programming languages: protocols are to communication what programming languages are to com
putations. An alternate formulation states that protocols are to communication what algorithms are to computation.

• Multiple protocols often describe different aspects of a single communication. A group of protocols designed to work toge
ther is known as a protocol suite; when implemented in software they are a protocol stack
P3: Discuss the capabilities and relationships between front-end and back-end website
technologies and explain how these relate to presentation and application layers.

The front-end and Back-end

• When you are accessing a website, you are not accessing everything of it but you are entering an interface whichever the websit
e designers and front-end developers want it to look like instead.

• And front-end developers are the one who is responsible for the look of the website (the colors, the layout, and the design of it,
etc.), which should follow the web designers’ design (or they can be web designers themselves). In short, the front-end is the clie
nt-side. You might want to take a look at an amazing, stunning view of Designveloper‘s website. Front-end developers play an act
ive role in increasing users’ interests, observing whether they feel comfortable or attracted to what they see or not.
• Back-end elements, on the other hand, are at the server-side and responsible for what is actually happening when users interact with a site. In
other words, users are not really interacting with things they see but are sending requests to the server and the database which contains data.
Back-end components are responsible for users’ experience, whether they want to stay within the site or just close the site because of the
lagging, delaying or latency, etc.
In summary, the front-end is the “front” of a site which is client-side, it is what people see the website, front-end developers care about how their
site looks and try to make it as amazing as possible. The back-end is the “back” of a site, back-end developers care about the speed of the data
flow, everything in the database of the server needs to be neat and well-organized.
 HTML

HTML gives browsers the instructions for how to display content, every developer needs to learn it.There’s no way around it. A frontend devel
oper without thorough knowledge of HTML is like an architect who can’t read blueprints. Read our complete guide to learn more about the dif
ferences between HTML and HTML5.
 CSS, java script

Equally important is CSS, which builds upon the basic instructio

ns provided by HTML to create visually appealing user interface
s. CSS is becoming more and more powerful and design options
available through the use of CSS are growing. Fortunately, CSS
precompilers like Sass and LESS can greatly simplify the code w
riting process for frontend developers. Another extremely import
ant tool for frontend developers to become familiar with is JavaS
cript. JavaScript allows for the creation of interactive and dynami
c content by telling the user’s computer how to behave after the
page has been loaded. Therefore, JavaScript is vital to playing vi
deo files, assessing input values for web forms, tracking user be
havior for analytical purposes and anything else that involves ma
king changes to content dynamically. Although the newest updat
e of HTML, HTML5, supports some of these features, budding
developers would be doing themselves a disservice by overlooki
ng JavaScript. Frameworks such as Backbone, React, Angular, a
nd Ember allow for faster JavaScript development. If during you
r research into JavaScript you also came across Java, just note th
at these two languages have no connection to one another. Learn
more about the difference between Java and JavaScript.
 Responsive Design
According to study done by Similar Web in 2015, 56% of traffic leading to the top US websites is from mobile devices such as smartphones and t
ablets rather than traditional desktops. This trend has created challenges for developers who try so hard to ensure that all visitors have the same e
xperience when visiting their website, which is why responsive design, or optimizing websites to adjust to different screen sizes, is more importa
nt than ever. Similarly, delivering responsive images is also an important aspect of responsive design and since different devices prefer different b
rowsers, cross-browser development is equally important.

A well-designed frontend usually isn’t as useful without proper backend support. No matter how beautiful a page looks at first glance, users will
quickly turn away if the website doesn’t function properly. When an application runs slowly, regularly crashes or encounters frequent errors, a ke
y contributor to that is commonly due to backend problems. The backend of an application handles all of the calculations and database interactio
ns needed to ensure a consistent performance. The majority of actual coding is done on the backend, and all backend code runs on the server-side
rather than the client-side.
 Relationship front-end and back-end

• Relationship between them is really close. If you want to develop good product, you have to have harmonious team. Cooperation between
those 2 types of developers is important at the beginning of project. They has to establish some data schema and authorization type for p
roject.

• Front-end and back-end are terms for the beginning and end stages of a process. This concept is often used in the field of software develop
ment. In software design, the front-end is a part of the software system, interacting directly with the user. Specifically, that is the system of
user interfaces (GUIs) and user-side programming. The back-end (the programming on the server) consists of components for processing i
nformation from the front-end. Usually refers to the interaction with the DBMS (data management system).
P4 Discuss the differences between online website creation tools and custom built sites with regards to design
flexibility, performance, functionality, User Experience (UX) and User Interface (UI).

Examples of online creation tool (WIX.com)

KeyP
KLAÜSING
Bikinis POLY
 Fanstereo Sasha Nassar

Shea Brand
estúdio greta Undercover

Woodpecker
Online website creation tool :

• Online website builders typically require customers to sign up with the web hosting company. Some companies provide examples of fully fun
ctional websites made with their website builder. The range of services varies anywhere between creating basic personal web pages or social n
etwork content to making complete business and e-commerce websites, either template based or, on the more flexible platforms, totally design
free.
• The main advantage of an online website builder is that it is quick and easy to use, and often does not require prior experience. Often, a website
can be built and be up and running live on the Internet quickly. Technical support is usually provided, as are how-to video and help files. Thou
gh there are many general websites builders you can easily find an online website builder created especially for a specific niche (dating, medic
al etc.) with features needed for this niche.

The Value of custom-built sites

Your branding will be much stronger when a site is designed to fit you, rather than trying to get a template to fit your brand. So the single most i
mportant point about a custom-built website is that your site is designed and built to specifically to support your established brand in a consiste
nt way. Your branding will be much stronger when a site is designed to fit you, rather than trying to get a template to fit your brand.
 Different between Online creation tools and custom built website
Online creation tools
• PROS OF USING WEBSITE TEMPLATES:
1. Templates are ideal if your budget is small.
2. Websites can be built in a shorter amount of time.
3. You don’t need to have any coding experience to create a
website, if you go the template route.
• CONS OF USING WEBSITE TEMPLATES:
1. You might be using the same template as many other businesses
or even similar competition. This doesn’t help your site stand
out in the already saturated market.
2. There is a limit on how much you can customize on a template
website.
3. Users may encounter display issues based on their device.
4. Template websites may need to be customized to be search
engine friendly, as they don’t have that built-in feature, which is
an important part of gaining traction and reach.
5. Template websites usually don’t offer the same level of support
as customized websites.
Custom built website
• PROS OF USING A CUSTOM-BUILT WEBSITE:
1. Your website will be uniquely yours, with every feature and design
customized to suit your brand and business. This helps it to make it
more memorable and original, in comparison to other sites.
2. Custom-built websites tend to be more search engine friendly than
template websites.
3. Custom-built means that your site is tested to work on all devices
and browsers, ideal for audience reach.
4. A custom-built website has the ability to grow with your business.
This means things can be added on at a later stage that won’t
compromise on features already installed.
5. With content management system (CMS) built into your website,
you’ll be able to update it from anywhere.
• CONS OF USING A CUSTOM-BUILT WEBSITE
1. Custom-built websites usually take longer than templates because
everything needs to be designed from scratch, and involves a
complex process. However, as all your site needs will be addressed
from the start, you won’t have to worry about add-ons and fixing
functions that don’t suit your business at a later stage.
2. Custom-built websites can cost slightly more than their template
 Online creation tools
Custom built website

• CONS OF USING WEBSITE TEMPLATES: • CONS OF USING A CUSTOM-BUILT WEBSITE:

1. You might be using the same template as many other businesses
or even similar competition. This doesn’t help your site stand out
in the already saturated market.
2. There is a limit on how much you can customize on a template
website.
3. Users may encounter display issues based on their device.
4. Template websites may need to be customized to be search
engine friendly, as they don’t have that built-in feature, which is
an important part of gaining traction and reach.
1. Custom-built websites usually take longer than templates because
everything needs to be designed from scratch, and involves a complex
process. However, as all your site needs will be addressed from the
start, you won’t have to worry about add-ons and fixing functions that
don’t suit your business at a later stage.
2. Custom-built websites can cost slightly more than their template
alternative, but you will have a one-of-a-kind unique website that no
one else has.

5. Template websites usually don’t offer the same level of support

as customized websites.
 UX design and UI design
UX UI

• User interface design is a purely digital practice. It considers all the

• User experience design is the process of developing and improvi
visual, interactive elements of a product interface—including buttons,
ng the quality of interaction between a user and all facets of a co
mpany. icons, spacing, typography, color schemes, and responsive design.
• User experience design is, in theory, a non-digital (cognitive scie • The goal of UI design is to visually guide the user through a product’s
interface. It’s all about creating an intuitive experience that doesn’t
nce) practice, but used and defined predominantly by digital indu
require the user to think too much!
stries.
• UI design transfers the brand’s strengths and visual assets to a product’s
• UX design is NOT about visuals; it focuses on the overall feel of
interface, making sure the design is consistent, coherent, and
the experience.
aestheticaly pleasing.

• UX design is all about identifying and solving user problems

• UI design is all about creating intuitive, aesthetically-pleasing,
• UX design usually comes first in the product development proces
interactive interfaces.
s, followed by UI.
• The UX designer maps out the bare bones of the user journey; the UI
• UX can apply to any kind of product, service, or experience.
designer then fills it in with visual and interactive elements.
• UI is specific to digital products and experiences.
References:

https://www.coursehero.com/file/p1belnpt/Explain-server-technologies-and-management-services-associated-with
-hosting-and
/
https://www.primedesignsolutions.com/learning-center/difference-template-custom-built-websites/
https://careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a-laymans-guide/#
1-whats-the-difference-between-ux-and-ui-design
https://www.wix.com/blog/ecommerce/2018/10/ecommerce-website-design-examples
https://www.pluralsight.com/blog/film-games/whats-difference-front-end-back-end
Thank you
For
Watching