Website Design and

Development
Assignment 1. Web Services Presentation and guidebook
Nguyen Tat Trung – GCS190231 – GCS0804A
Assessor name: Vo Thi Thanh Van
Content
• 1. Doman name system
• 2. Web server
• 3. Front-end and back-end website technologies
• 4. Online website creation tools and custom built sites
• 5. References

2
1. Domain Name System

• Domain name system (DNS) is one of

the most important components of
Internet infrastructure. Especially, it’s
very popular in recently life. If DNS is
unavailable, you’ll have difficulty
finding resources on the Internet and,
likewise, others will be unable to find
you.

3
 4

• The process of DNS resolution involves converting a

hostname (such as www.example.com) into a computer-
friendly IP address (such as 192.168.1.1). An IP address is
given to each device on the Internet, and that address is
necessary to find the appropriate Internet device - like a
street address is used to find a particular home. When a
user wants to load a webpage, a translation must occur
between what a user types into their web browser
(example.com) and the machine-friendly address necessary
to locate the example.com webpage. In order to
understand the process behind the DNS resolution, it’s
important to learn about the different hardware
components a DNS query must pass between. For the web
browser, the DNS lookup occurs “behind the scenes” and
requires no interaction from the user’s computer apart
from the initial request.
 • Top level domains (TLD) has known as domain name
extensions and represent the highest level in the
Domain Name System hierarchy.

5
 • Country code top level domain (ccTLD) was established
and became associated with countries or geographical
locations and became to be limited to that countries
which is residents, however, certain countries have let
outside parties register domain names using their
country code.

6
 Stage 1 Requesting website information

Stage 2 Contact the recursive DNS servers

The stages of
DNS in a Stage 3 Query the authoritative DNS servers

discovery
Stage 4 Access the DNS record

Stage 5 Final DNS step

7
 8

• Recursive query Provides a hostname, and the

DNS Resolver must provide an answer. It
responds with either a relevant resource record,
or an error message if it can’t be found. The
resolver starts a recursive query process, starting
from the DNS Root server, until it finds the
authoritative name server that holds the IP
address and other information for the requested
hostname.
 9

• Iterative query: Provides a hostname, and the

DNS Resolver returns the best answer it can. If
the DNS resolver has the relevant DNS records in
its cache, it returns them. If not, it refers the DNS
client to the Root Server, or another Authoritative
Name Server which is nearest to the required
DNS zone. The DNS client must then repeat the
query directly against the DNS server it was
referred to.
 10

• Non-recursive query is a query in which the DNS

Resolver already knows the answer. It either
immediately returns a DNS record because it
already stores it in local cache, or queries a DNS
Name Server which is authoritative for the
record, meaning it definitely holds the correct IP
for that hostname. In both cases, there is no
need for additional rounds of queries. Rather, a
response is immediately returned to the client.
 • Web server is a computer that runs
websites. It's a computer program
that distributes web pages as they
are requisitioned.
Web server

11
 12

• The basic objectives of web server is to store,

process and deliver web pages to the users. This
intercommunication is done using Hypertext
Transfer Protocol (HTTP). These web pages are
mostly static content that includes HTML
documents, images, style sheets, test etc. Server-
based computing represents an important part of
the way people access data services, including
shared file storage, website hosting and databases.
Although a server is similar to a desktop PC in many
respects, its main objective is to provide information
to a group instead of an individual. Because servers
send data through networks, the growth of the
Internet has fueled their use and popularity.
 13

• Community protocols articulate community-

determined values, procedures, and priorities.
They set out rights and responsibilities under
customary, state, and international law as the
basis for engaging with external actors such as
governments, companies, academics, and NGOs.
They can be used as catalysts for constructive and
proactive responses to threats and opportunities
posed by land and resource development,
conservation, research, and other legal and policy
frameworks.
 14

• Server hardware are computers designed to wait

for any requests from users or other computers
and then act on that request. Their main purpose
is to be there for you, to share data and perform
tasks to keep your workflow smooth and
productivity elevated. We can’t refuse that the
benefits bring for us. So, in the develop country,
server hardware has shown us clearly and
restricts a lot of risks.
 15

• Server software is a type of software that is

designed to be used, operated and managed on a
computing server. It provides and facilitates the
harnessing of underlying server computing power
for use with an array of high-end computing
services and functions.
 16

• The operating system is the most important

software that runs on a computer. It manages the
computer's memory and processes, as well as all of
its software and hardware. It also allows you
to communicate with the computer without
knowing how to speak the computer's
language. Without an operating system, a computer
is useless. Operating systems usually come pre-
loaded on any computer you buy. Most people use
the operating system that comes with their
computer, but it's possible to upgrade or even
change operating systems. The three most common
operating systems for personal computers
are Microsoft Windows, macOS, Linux, so on…
• The relationship between communication
protocols, server hardware, operating
systems and web server software with
regards to designing, publishing and
accessing a website: We will send a HTTP
request to web server. The web server will
compile on the server hardware or
operating system. And finally, it will give the
HTTP response for the client web.

17
 3. Website
technologies

18
 19

• A static website contains Web page with fixed content. Each

page is coded in HTML and displays the same information to
every visitor. Static sites are the most basic type of website and
are the easiest to create. Unlike dynamic websites, they do not
require any Web programming or database design.
 20

• A dynamic web page is a web page that displays

different content each time it's viewed. For example, the
page may change with the time of day, the user that
accesses the webpage, or the type of user interaction.
There are two types of dynamic web pages.
 21

• Front-end technologies deals with setting up the

UI elements along with the functionality of a
website. All the interaction that a user has with
the website is set up by a frontend developer.
Following are the various technologies which a
front-end developer interacts with while
executing these tasks.
 22

• HTML (HyperText Markup Language) is the

standard markup language for web pages.
 23

• Css (Cascading Style Sheets) describes how HTML elements are

to be displayed on screen, paper, or in other media. CSS saves
a lot of work. It can control the layout of multiple web pages all
at once. External stylesheets are stored in CSS files.
• Javascript is the
Programming Language for
the web. It’s can update and
change both HTML and CSS.
Besides, JS can calculate,
manipulate and validate
data.

24
• And the minimum things to get started
front-end development. We will do
following steps:
• Set up your work environment
• Learn about these theories
• Get started with these languages
• Host your work

25
• Back-end Development
refers to the server-side
development. It is the term
used for the behind-the-
scenes activities that happen
when performing any action
on a website. It can be
logging in to your account or
purchasing a watch from an
online store. Backend
developer focuses on
databases, scripting, and the
architecture of websites.
Code written by back-end
developers helps to
communicate the database
information to the browser.

26
• The capabilities and the
relationship between front-end
and back-end: The term “front-
end” refers to the user interface,
while “back-end” means the
server, application and
database that work behind the
scenes to deliver information to
the user. The user enters a
request through the interface.

27
4. Online website
creation tools and
custom built sites

28
• Examples of online creation tools: WIX.com;
Soapbox; Stencil; Canva; Gliffy; Giphy;
Bitmoji; PicMonkey

29
• Website creation tools: With the design of most templates, what you see is what you get.
You can change the colors and maybe the font but the layout is pretty set. If you really love
the layout and design and do not have a desire to change it, a template could work in your
favor. Start-up companies and DIYers often need a website up rather quickly and on a low
budget. Website templates and platforms like WordPress, Squarespace and Wix are often
plug and play.

30
• Custom built website 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.

31
 Comparison table:

Online creation tools Custom built website

Design flexibility Highly flexible Less flexible

Performance High performance and allow to perform load
and stress testing on any internet application by
generating load from the cloud and on-premises
machines.
Custom websites are designed keeping in mind your
objectives, needs and goals. They are developed
offline using codes and are consequently made online.
While customizing the website, aspects such as user
interface and user experience are looked into
thoroughly to increase effectiveness.

Functionality Generate a website Generate a website, but you can creation with you
own.

UX Make that transition happen effortlessly. developed into its own unique and equally important
entity.

UI Allows you to create responsive, elegant HTML5 design that deals with the controls people use to
content with minimal coding skills required. interact with a website or app, including button
displays and gesture controls.

32
• Online Website is a
collection of publicly
accessible, interlinked Web
pages that share a single
domain name. Websites can
be created and maintained
by an individual, group,
business or organization to
serve a variety of purposes.
Together, all publicly
accessible websites
constitute the World Wide
Web.

33
• Using templates: The most common way to
start a website would be to set up
a WordPress site and apply a template
bought from ThemeForest, Template
Monster, or Elegant Themes. These
websites provide a broad range of different
types of website templates available for
purchase.

34
• UX (User Experience) design is the
process design teams use to create
products that provide meaningful
and relevant experiences to users.
This involves the design of the
entire process of acquiring and
integrating the product, including
aspects of branding, design,
usability and function.

35
• UI (User Interface) is the graphical layout of an application. It consists
of the button users click on, the text they read, the images, sliders,
text entry fields, and all the rest of the items the user interacts with.
This includes screen layout, transitions, interface animations and
every single micro-interaction. Any sort of visual element, interaction,
or animation must all be designed. UX designers are also concerned
with an application’s user interface, and this is the reason people get
confused about the difference between the two. But whereas UI
designers are tasked with deciding how the user interface will look,
UX designers are in charge of determining how the user interface
operates.

36
 • Saffroninteractive.com/ UI design. [online] Available at:<
https://saffroninteractive.com/7-magnificent-web-and-app-uiux-design-tools/>
[Accessed August 11, 2020].
• Creativeclickmedia.com/ UX design. [online] Available at:<
https://creativeclickmedia.com/ux-design-better-user-experience/> [Accessed
August 11, 2020].
• 99designs.com/ Web design development. [online] Available at:<
https://99designs.com/blog/web-digital/web-design-development-ui-ux-difference/
> [Accessed August 11, 2020].
• Softwaretestinghelp.com/ performance testing tools load. [online] Available at:<

References https://www.softwaretestinghelp.com/performance-testing-tools-load-testing-tools
/
> [Accessed August 11, 2020].
• Doteasy.com/ dynamic web. [online] Available at:<
https://www.doteasy.com/web-hosting-articles/what-is-a-dynamic-web-page.cfm>
[Accessed August 11, 2020].
• Techopodia.com/ server software. [online] Available at:<
https://www.techopedia.com/definition/23735/server-software> [Accessed August
11, 2020].
• Techterms.com/ static website. [online] Available at:<
https://techterms.com/definition/staticwebsite#:~:text=A%20static%20website%20
contains%20Web,Web%20programming%20or%20database%20design.
> [Accessed August 11, 2020].

37
Thank you for watching
and hearing

38