Higher Nationals in Computing

Unit 10: Website Design and Development

ASSIGNMENT 1
Assessor name: PHAN MINH TAM

Learner’s name: Nguyễn Mạnh Tài

ID: GCS17579
Class: GCSRE9_1633_ppt
Subject code: 1633

Assignment due: April 2020 Assignment submitted: April 202

 ASSIGNMENT 1 FRONT SHEET
Qualification BTEC Level 5 HND Diploma in Computing

Unit number and title Unit 10: Website Design and Development

Submission date 17/4/2020 Date Received 1st submission 1/4/2020

Re-submission Date Date Received 2nd submission

Student Name Nguyễn Mạnh Tài Student ID GCS17579

Class GCSRE9_1633_ppt Assessor name Phan Minh Tam

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

Grading grid

P1 P2 P3 P4 M1 M2 M3 D1
❒ Summative Feedback: ❒ Resubmission Feedback:

Grade: Assessor Signature: Date:

Signature & Date:

 ASSIGNMENT 1 BRIEF
Qualification BTEC Level 5 HND Diploma in Computing

Unit number Unit 10: Website Design & Development

Assignment title Web Services Presentation and Guidebook

Academic Year 2021

Unit Tutor Phan Minh Tam

Issue date Submission date 17/4/2020

IV name and date Nguyễn Mạnh Tài

Submission Format
Format: Two ten-minute Microsoft® PowerPoint® style presentations to be presented to your
colleagues
Submission Students are compulsory to submit the assignment in due date and in a way requested by
the Tutors. The form of submission will be a soft copy posted on
http://cms.greenwich.edu.vn/
Note: The Assignment must be your own work, and not copied by or from another student or
from
books etc. If you use ideas, quotes or data (such as diagrams) from books, journals or other sources, you
must reference your sources, using the Harvard style. Make sure that you know how to reference
properly, and that understand the guidelines on plagiarism. If you do not, you definitely get failed

Unit Learning Outcomes

LO1 Explain server technologies and management services associated with hosting and managing websites.

LO2 Categorise website technologies, tools and software used to develop websites.
Assignment Brief and Guidance
You work as a full-stack web team leader for a leading creative web solutions and marketing company. Your
team is about to have a big contract to develop an online shopping mall.

One of the preparation tasks is to choose appropriate tools and techniques to realise a custom built website.

As part of your role, you have been asked to create an engaging presentation to help train junior staff
members on basic web technologies including hosting and website management as well as server
technologies. Your presentation should not only explain basic knowledge in the domain but also points out
the impact of these technologies to website design, functionality, management or performance.
You also need to present more technical presentation to senior staff members to discuss about front-end,
back-end technologies as well as other tools, techniques and softwares used to develop website from simple
(online website creation tools) to complicated (custom built). Your presentation will be used as guidance of
choosing suitable tools and techniques for the next project.

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, including explanations on how
domain names are organised and
managed.
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.
M1 Evaluate the impact of LO1 & 2
common web development
D1 Justify the tools and techniques
technologies and frameworks with
chosen to realise a custom built
regards to website design,
website.
functionality and management.
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.

LO2 Categorise website technologies, tools and software used to develop

websites

P3 Discuss the capabilities and M3 Evaluate a range of tools and

relationships between front-end and techniques available to design and
back-end website technologies and develop a custom built website.
explain how these relate to
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).
Table of Contents
P1- Identify the purpose and types of DNS, including explanations on how domain names are organised and
managed............................................................................................................................................................2
1. DNS (Domain Name System)......................................................................................................................2
1.1. What is DNS?.......................................................................................................................................2
1.2. What is the function of DNS?..............................................................................................................3
1.3. DNS Hierarchy.....................................................................................................................................3
2. Domain name..............................................................................................................................................3
2.1. What is Domain name?.......................................................................................................................3
2.2. Explain how to domain name are organized and managed...............................................................4
P2- Explain the purpose and relationships between communication protocols, server hardware, operating
systems and web server software with regards to designing, publishing and accessing a website....................5
1. Communication protocol............................................................................................................................5
2. Web Server.................................................................................................................................................6
3. Operating system:.......................................................................................................................................8
3.1. What Operating Systems do Servers Use?.............................................................................................8
4. Hardware server.........................................................................................................................................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.....................................................................10
1. What is front-end website technology?...................................................................................................10
2. What is back-end website technology?....................................................................................................11
3. Difference between Frontend and Backend.............................................................................................12
4. The relationships between front-end and back-end................................................................................13
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)...........................13
1. TEMPLATES (Online website creation tools)............................................................................................13
1.1. PROS/CONS OF USING TEMPLATES..................................................................................................14
2. CUSTOM BUILT WEBSITES........................................................................................................................14
2.1. PROS/CONS OF CUSTOM-BUILT WEBSITES......................................................................................15
3. The Definition of User Experience (UX)....................................................................................................16
4. Definition of a user interface (UI).............................................................................................................17
References.......................................................................................................................................................18

Page |1
P1- Identify the purpose and types of DNS, including explanations on how domain names are
organised and managed.

1. DNS (Domain Name System)

1.1. What is DNS?

_DNS (Domain Name System) meaning the domain name resolution system. In short, DNS is basically a
system that converts the website domain names we are using, in the form www.tenmien.com, into a
numeric IP address corresponding to that domain name and vice versa. DNS is also a directory of
crucial information about domain names, such as email servers (MX records) and sending verification
(DKIM, SPF, DMARC), TXT record verification of domain ownership, and even SSH fingerprints (SSHFP).
Intelligent DNS services can manipulate DNS responses, deciding which IP(s) are returned to ensure
the best performance and reliability for clients. The DNS is responsible for translating these domain
names to the IP addresses.
- Internet domain names are easier to remember than IP addresses such as 208.77.188.166
(IPv4) or 2001: db8: 1f70 :: 999: de8: 7648: 6 e8 (IPv6).

1.2. What is the function of DNS?

Page |2
_About the function of DNS is understood as "translator" and "convey information". DNS will do the
job of translating the domain name into an IP address of 4 different number groups. For example,
www.tenmien.com to 421.64.874.899 or vice versa translate an IP address into a domain name. When
"translated" like that, the browser will understand and log on. And when a user logs into a website,
instead of having to remember and enter a range of IP addresses, simply enter the website name and
the browser automatically recognizes it. However, the IP address is still used as a platform connected
by network devices. That's where DNS works to resolve domain names into IP addresses for network
devices to communicate with each other. At the same time, you can also download a website by
entering the IP address directly instead of entering the domain name of that website.
1.3. DNS Hierarchy

_The DNS hierarchy is comprised of the following elements:

1) Root Level

2) Top Level Domains

3) Second Level Domains

4) Sub-Domain

5) Host

2. Domain name

2.1. What is Domain name?

_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 routers navigate, an application also needs a
domain name to navigate to your website.

Page |3
_For example: Google.com, Facebook.com are the domain names of Internet companies. When a
company (or a person) buys a domain name, they can specify which server the domain name points
to.
_A website on the internet needs at least two components, a web server and a domain name, to
function properly.
_ A web server is a computer that contains the files and databases that make up your website. Then
send it out to the internet whenever someone accesses your site from their server.
_The domain name is the name people type on the browser, then because the domain name points to
the web server address, the browser can send requests to access that web server. Without a domain
name, people have to remember the exact IP address of the server each time they access it - this is
unlikely.
2.2. Explain how to domain name are organized and managed

_A domain name is like a home address because that's how people find you on the World Wide Web.
That's why we call the bar at the top of the web browser is the address bar - that's where you enter
the domain name to find a website. You are like a building. When you create a website, you put the
domain name to point to the server so that when people want to find your website, they can enter the
domain name and it will take them there. If no domain name exists, the visitor will have to enter the
server's IP address (example: 100.90.80.70).
_Most websites you visit use domain names. For example: When checking a domain name, you will
see that Google company has Google.com as their domain name. Facebook is the website name and
Facebook.com is the domain name.
_You can perform domain maintenance at the Domain Registrar that currently manages your domain
name. Currently managing your domain name. You can maintain the domain name for a minimum of 1
year, the maximum depending on the needs. If your domain name has not expired, you can still

Page |4
contact your Domain Registrar to continue the extension. When the domain name expires, you have
35 more days to make a renewal fee for the domain name. After this period, the domain name will be
revoked, you cannot pay the maintenance fee for the domain name anymore. If you do not pay the
maintenance fee, then after 35 days from the expiration date, the domain name will be put into the
status of ergonomics disposal. After reviewing, withdrawing domain names do not fall into cases of
violating regulations on domain name registration

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.

1. Communication protocol

_Communication protocols, inter-network protocols, interaction protocols, communication protocols-

so called protocols in information technology. Nevertheless, avoid confusion with other industries '
protocols-a set of standard rules for data representation, signaling, authentication, and data error
detection-that are essential for sending information. Through communication channels, whereby
computers (and devices) can connect and exchange information with each other. The communication
protocols for digital signal communication in computer networks have many features to ensure
reliable data exchange over an imperfect communication channel. Protocols can be implemented by
hardware, software or a combination of both.
_There are many protocols for the communication or transmission of information on the Internet,
here are some of the typical protocols:
+TCP (Transmission Control Protocol): establish a connection between computers to transfer data. It
breaks data down into packets and ensures successful data transmission.
+IP (Internet Protocol): Routes data packets when they are transmitted over the Internet, ensuring
data will arrive at the right place to receive.
+HTTP (Hyper Text Transfer Protocol): allows exchanging information (mainly in the form of hypertext)
via the Internet.
+FTP (File Transfer Protocol): allows file transfer over the Internet.
+SMTP (Simple Mail Transfer Protocol): allows sending electronic mail messages (e-mail) via the
Internet.
Page |5
+MIME (Multipurpose Internet Mail Extension): an extension of the SMTP protocol, allowing sending
of binary files, movies, music, ... by email.
+WAP (Wireless Application Protocol): allows information exchange between wireless devices, such as
mobile phones.

2. Web Server

_A web server is the server software or hardware dedicated to running the above software, which can
meet the requirements of the World Wide Web client. Generally, a web server can contain one or
more websites. A web server handles incoming network requests over HTTP and a number of other
related protocols.
_The main function of web hosting is hosting, processing and distributing web pages to customers. The
communication between the client and the server takes place using the Hypertext Transfer Protocol
(HTTP). The pages most often distributed are HTML documents, which may include images, style
sheets, and scripts in addition to textual content.
_"Web server" can be hardware or software, or both.
+On the hardware side, a web server is a computer that stores the component files of a website (e.g.
HTML documents, image files, CSS and JavaScript files) and can deliver them to the device. end-user. It
connects to the Internet and is accessible through a domain like mozilla.org.
+On the software side, a web server consists of several parts that control how web users access files
stored on an HTTP server (HTTP server). An HTTP server is software that understands URLs (web
addresses) and HTTP (the protocol your browser uses to view web pages).

Page |6
_Probably, you never think about what happens when you enter the URL into your computer browser
or click on the website found in search results. In fact, you might think that when web pages appear
on your computer screen, it's the result of some kind of technological magic. And for the most part,
this is fine if you're an ordinary Internet user who just loves to browse and search for the information
you care about.
_To retrieve a web page, as mentioned, your browser sends a request to the web server, which looks
for the requested file stored on its disk. When the file is found, the server reads it, processes it as
needed, and sends it to the browser.
_Firstly, a web server must host the website's files, which are HTML documents and resources related
to it, including images, CSS files, JavaScript files, fonts and videos.
_Secondly, a web server supports HTTP (Hypertext Transfer Protocol). As the name implies, HTTP is
the way to transfer hypertext (hypertext, for example, web documents) between two computers.
_In general, a server can serve both static or dynamic content. "Static" means "to be served intact"
(served as-is). Static websites are the easiest to set up, so we recommend that you create a static site
first.
=> The main purpose of web servers is to store website files and broadcast them over the internet so
that web visitors can see and understand.

Page |7
_In essence, a virtual server serves as a tool to store and transmit data over the internet. When
someone visits your site, their browser communicates with your web server, sending and receiving the
information they are ordered to appear on the visitor's computer screen.
_Without the web server or your website not uploading to the server, the content you have installed
or set up will not be visible to users / sent to users.

_So, when the website design is complete, the web design units will post your website on the web
server to make them widely accessible by many different users, in many parts of the world.

3. Operating system:

_An operating system (OS) is the program that, after being initially loaded into the computer by a boot
program, manages all of the other application programs in a computer. The application programs
make use of the operating system by making requests for services through a defined application
program interface (API). In addition, users can interact directly with the operating system through a
user interface such as a command line or a graphical user interface (GUI).

3.1. What Operating Systems do Servers Use?

_Servers usually run on either operating system, Linux or Microsoft Windows.

_The most popular operating system to run web servers is Linux, which is what most hosting
companies do.

Page |8
_However, you can find some web hosts that will host your website using the Windows operating
system.
_There are two different types of web servers to be aware of: hardware servers and software servers.

4. Hardware server

_A hardware server is the actual computer that stores your site data and provides site visitors when
they ask for it by clicking on your site.
_Data centers are based around the world. This makes it easier to distribute web content to an
international audience if your Website data is hosted on a server located near your target audience.
That is, the closer the web server is to site visitors who request to view your site, the faster it can
deliver that request.

_The physical server that holds the data on your website, such as HTML text, images, CSS stylesheets,
and JavaScript files, is what connects to the internet and supports data exchange between connected
devices. to the internet, like your computer.

Page |9
+An important aspect of providing high-performance distributed systems such as multimedia systems
are the combined use of hardware and software in end systems. System design techniques should
allow hardware / software co-design to integrate both implementations.
+The use of both software and hardware in implementing communications protocols appears to be a
major problem in high-performance networks. Some parts of communication systems are better
implemented in hardware to achieve higher speeds (e.g., MPEG video decoders), while other parts are
implemented better in software, thus providing greater flexibility than.
+In the design of such systems formal procedures play an important role. At first, the requirements of
a system can be built and varied. The abstract parameters can then be reconfirmed and later
confirmed using official test methods; Simulations or even skeletons to perform can be created
automatically.
5. Relationship between of them
_Since these languages definitely rely on the browser to for all intents and purposes make the
software executable, web applications mostly are normally written in browser-supported languages
like JavaScript and HTML, which for the most part is quite significant. Some of the applications literally
are very complex and need processing on the server in a very major way. Others basically are fully
static, requiring no server processing, which kind of is quite significant.
_A web application includes a web server to handle client requests, an application server to carry out
the tasks requested, and, in some cases, a database to store the data. From ASP.NET, ASP, and
ColdFusion to PHP and JSP, application server technology is diverse.
Here's what a typical web application flow looks like:
_User triggers a request to the web server over the Internet, either through a web browser or the
application's user interface
_Web server forwards this request to the appropriate web application server
_Web application server performs the requested task - such as querying the database or processing
the data - then generates the results of the requested data
_Web application server sends results to the web server with the requested information or processed
data
_Web server responds back to the client with the requested information that then appears on the
user's display
_All users access the same version, eliminating any compatibility issues
P a g e | 10
P3- Discuss the capabilities and relationships between front-end and back-end website technologies
and explain how these relate to presentation and application layers.

1. What is front-end website technology?

_The front-end of a website is what you see and interact with on your browser. Also referred to as
“client-side”, it includes everything the user experiences directly: from text and colors to buttons,
images, and navigation menus.

_You decide to start a business. You open a bakery for fast food lovers and need a professional
website to introduce your chain to customers and let them know where you are. Maybe you will
include some pictures and some information about your product. All you need is front-end
technologies to build your website. The front of the site is what you see and interact with in your
browser. Also known as Direct Direct, it includes everything that users experience directly: from text
and colors to buttons, images, and navigation menus.

2. What is back-end website technology?

_The back-end (or the server side) is part of the web page you don't see. It is responsible for storing
and organizing the data and ensuring everything on the client side actually works. The last part
communicates with the user interface, sending and receiving information that will be displayed as web
pages. Whenever you fill out a contact form, enter a web address or make a purchase (any user

P a g e | 11
interaction on the client side), your browser will send a request to the server, returning information.
as a browser front-end code that can explain and display.

_Your new website will need to have additional auxiliary components to turn it into a dynamic web
application - a website whose content may vary based on the content in its database and may
modified by user input. This is different from a static website, without a database request because its
content often stays the same.

_The core concern of back-end developers is to create applications that can find and distribute data to
the user interface.

3. Difference between Frontend and Backend

_Works based on what users can see while back-end developers build infrastructure that supports it.

_Both are essential components for a highly functional application or website.

_It is not uncommon for companies to be stumbled by the split of the front-end versus the back-end,
when trying to navigate the development of new software.

_After all, there are a large number of tools on the market that aim to help developers become more
stack-oriented, so it's easy for non-technicians to think no. There is a big difference between terminal
and back-end specialists.

P a g e | 12
_Front-end and back-end developers work in tandem to create the systems needed for an application
or website to function properly. However, they have opposite concerns.

_Cameron's front-to-back online term refers to the user interface, while the back-end, which means
the server, application, and database, works behind the scenes to provide information to people. use.

_The user enters a request through the interface.

_It then verified and contacted the server to retrieve the necessary data from the database and send it
back to the user.

4. The relationships between front-end and back-end

_The term “front-end” refers to the user interface, while “back-end” mostly means the server,
application and database that work behind the scenes to essentially deliver information to the user,
which literally is quite significant. Backend code particularly is built to generally be running on a server
and it's never running on the user's machine, or so they actually thought. Frontend

_The parts of really your web application which generally are intended to for the most part be used
directly by the user's browser, definitely contrary to popular belief. All of communication from the
user's side goes through their browser, which really is quite significant.

P a g e | 13
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).

1. TEMPLATES (Online website creation tools)

_The most common way to start a website would be to set up a WordPress site and apply a template
bought from Theme Forest, Template Monster, or Elegant Themes. These websites provide a broad range
of different types of website templates available for purchase. Not all of the themes/templates out there
are 100% responsive.

_There are also services like Wix or Squarespace that also provide a theme and allow you to edit within the
frame of the website. These can help you get a website up pretty fast and easily. However, there are
limitations on the options that are available for more complex features such as forms or e-commerce
functions.

_One thing to keep in mind is that templates and themes normally come with built-in features so that the
user can have more customizability but this ultimately weighs down the website in terms of load speed
and SEO performance. It’s very likely that you’ll have to put up with features, designs, and functions that
won’t necessarily fit your brand or business. You could pay a web development company to fix it, but that’s
like asking a certified ford mechanic to take a look at your Toyota since the site most likely wont be written
in the same code format. And even if the developer does fix the site to your liking… Once an update comes
out for WordPress or that theme itself, your website will run into some display issues because of a former
customization made by a developer.

1.1. PROS/CONS OF USING TEMPLATES

_Lots of other businesses can could be using the same template which means your site won’t stand out as
much.

P a g e | 14
_You are limited on how much you can customize the site. What you see is what you get.

_May not 100% work on all devices

_Some templates are not built to be search engine friendly. They need to be customized to fit your
business.

_Any custom or added technologies are not possible to be installed as templates run on a structured
system.

_Templates are great for low budget. There is a cheaper upfront cost.

_Templates have a shorter development time.

_Template sites will mostly likely not have as good of a support system as a custom built site.

2. CUSTOM BUILT WEBSITES

_Custom built websites involve a team behind your business. It starts with a creative process to
understand who is your target audience, who do you want to reach, how you want/need the website
to function and how do you want to look on the internet.

_SEO plays a big role in the success of any website. There are rules to follow when building a site and
not all themes are capable of abiding by these rules. This is why custom built websites are so much
more superior, the developer is able to optimize the site during creation to allow for google and other
search engines to read each page to give the end user a more relevant search result thus, giving
custom built sites naturally a better ranking on the system. This goes beyond keyword research.

_Custom built websites tend to take longer than themes, this is because everything is being built and
catered to a particular business. It will save time in the long run because when its built from the
ground up it’s a lot easier to customize the site to ensure your site does exactly what you want it to
do. Custom designs allow your site to be responsive across all devices (such as phones, tablets,
laptops, etc.) & browsers.

2.1. PROS/CONS OF CUSTOM-BUILT WEBSITES

P a g e | 15
_The website will have a completely unique design that will incorporate the company’s branding and
will be based around the needs of your business.

_A customized website is adaptable to your company’s needs

_The site is tested to work across all browsers.

_The site will be built to be search engine friendly.

_A customized website is more expensive than a template.

_The process to create a custom site takes longer than a template site.

_The site will grow with your business. If you know how you will need your site to operate in the
future, a professional web developer will install technologies that will work with those ideas.

_The company that built your site is there for support if you need it.

3. The Definition of User Experience (UX)

P a g e | 16
_The first requirement for an exemplary user experience is to meet the exact needs of the customer,
without fuss or bother. Next comes simplicity and elegance that produce products that are a joy to
own, a joy to use. True user experience goes far beyond giving customers what they say they want, or
providing checklist features. In order to achieve high-quality user experience in a company's offerings
there must be a seamless merging of the services of multiple disciplines, including engineering,
marketing, graphical and industrial design, and interface design.

_It's important to distinguish the total user experience from the user interface (UI), even though the
UI is obviously an extremely important part of the design. As an example, consider a website with
movie reviews. Even if the UI for finding a film is perfect, the UX will be poor for a user who wants
information about a small independent release if the underlying database only contains movies from
the major studios.

_We should also distinguish UX and usability: According to the definition of usability, it is a quality
attribute of the UI, covering whether the system is easy to learn, efficient to use, pleasant, and so
forth. Again, this is very important, and again total user experience is an even broader concept.

4. Definition of a user interface (UI)

P a g e | 17
_User interface (UI) is any method or means by which the end-user of a product interacts with, or
controls, a product, software or hardware device. User interface is designed to allow humans to
control machines effectively and efficiently, and good UI should make the interaction between the
user and the product as smooth, effortless and enjoyable as possible.

_These days, most software programs are controlled through a graphical interface, allowing users to
virtually control visual representations on a screen, using a mouse or a keyboard. Hardware UIs tend
to involve things like a remote control or a joystick.

_A user interface designer is responsible for ensuring that the interface looks and feels good, is simple
and intuitive to use, and it does what it needs to do effectively.

_A UI designer is different from a user experience (UX) designer, as UX design incorporates a far more
holistic approach, covering every aspect of a user’s interaction with the product, software or
hardware.

5. UX and UI Work Together in Web Design

_Both UX and UI are coherent design disciplines with a similar focus, which pave the way for a
fantastic end-product. It wouldn’t be wrong to state that UX and UI are complementary aspects of
web design, with one being incomplete without the other.

P a g e | 18
_When it comes to their differences, it’s important to project these disciplines as separate
organizational roles. While UX is more of a data-driven projection of how the customer is expected to
feel when on your website, UI takes the design patterns and even the minutest of details into
consideration.

_Plus, UI design is about making the layout delightful and enjoyable, whereas UX design concerns ease
of usage. UX is more of a concept or rather a feeling that promises seamlessness, responsiveness, and
the overall premise of the website. On the other hand, UI comprises elements, tools, technical tidbits,
and digital interfaces directly associated with the design process.

References

https://www.atilus.com/templates-vs-custom-built-websites/

https://airfocus.com/glossary/what-is-a-user-interface/

P a g e | 19
https://forgeandsmith.com/blog/ux-vs-ui-how-they-work-together-in-web-design/

P a g e | 20