Higher Nationals in Computing: Unit 10: Website Design and Development Assignment 1
Higher Nationals in Computing: Unit 10: Website Design and Development Assignment 1
Unit number and title Unit 10: Website Design and Development
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:
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
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
P1 Identify the purpose and types of M1 Evaluate the impact of LO1 & 2
DNS, including explanations on how common web development
D1 Justify the tools and techniques
domain names are organised and technologies and frameworks with
chosen to realise a custom built
managed. regards to website design,
website.
functionality and management.
P2 Explain the purpose and
relationships between M2 Review the influence of search
communication protocols, server engines on website performance
hardware, operating systems and and provide evidence-based
web server software with regards to support for improving a site’s index
designing, publishing and accessing a value and rank through search
website. engine optimisation.
P age |1
P1 Identify the purpose and types of DNS, including explanations on how domain
names are organised and managed
1. DNS (Domain Name System)
The Domain Name System (DNS) is a directory of names that matches with numbers, the numbers are
the IP addresses which computers use to communicate with each other. The DNS is a protocol which
uses the TCP/IP protocol set. It helps convert URLs into IP addresses that computers use to identify
each other on a network, it is a system that matches names with numbers like a phonebook does.
With a DNS you do not need to have the IP address of everyone, you connect to a Domain name
server, which holds a large database of domain names and translates them to IP addresses 1. So, when
you type in a website like www.bbc.co.uk for example, your internet service provider will request the
DNS linked with the domain name and then translates it into an IP address that a computer
understands then will direct you to the correct website. If you have previously visited the website, the
computer will first check the cache to see if it has already visited the website before, if not it will do a
DNS query to find the website.
A component called a DNS Resolver is responsible for checking if the hostname is available in local
cache, and if not, contacts a series of DNS Name Servers, until eventually it receives the IP of the
service the user is trying to reach, and returns it to the browser or application. This usually takes less
than a second.
3. DNS Hierarchy
_The DNS hierarchy is comprised of the following elements:
1) Root Level
4) Sub-Domain
5) Host
4. Domain name
Domain name is the address of your website that people type in the browser URL bar to visit your
website.
In simple terms, if your website was a house, then your domain name will be its address.
A more detailed explanation: The Internet is a giant network of computers connected to each other
through a global network of cables. Each computer on this network can communicate with other
computers.
P age |3
5. How Domain Names Actually Work?
To understand how domain names actually work, we will take a look at what happens when you enter
it in your browser.
When you enter a domain name in your web browser, it first sends a request to a global network of
servers that form the Domain Name System (DNS).
These servers then look up for the name servers associated with the domain and forward the request
to those name servers.
These name servers are computers managed by your hosting company. Your hosting company will
forward your request to the computer where your website is stored.
This computer is called a web server. It has special software installed (Apache, Nginx are two popular
web server software). The web server now fetches the web page and pieces of information associated
with it.
P age |4
Domains are under the jurisdiction of ICANN, the Internet Corporation for Assigned Names and
Numbers which is responsible for creating new and maintaining current top-level domains.
On the other hand, you can choose your domain name and register it with a domain name registry. So,
if you want to register this-is.me, go right ahead!
Now you know that a domain name consists of an actual name and the TLD suffix. There is also
something called a subdomain, which is the third-level of a domain. If you own john.this-is.me domain,
“.ME” is top-level domain, “this-is” is the level 2 domain name and “john” is the subdomain of “this-is”
domain. It’s really not that complicated; just follow the hierarchy from right to left.
A web browser allows your computer to communicate with web servers around the world, with just a
few clicks away, giving you the correct information. Different web browsers have different ways of
retrieving information, but the web communication protocols are one thing they have in common.
P age |5
Web communication protocols are technology used to transfer information across the internet. For
example, a web browser uses these protocols to request information from a web server, which is then
displayed on the browser screen in the form of text and images. The degree to which users can
interact with that information depends on the protocol.
There are many protocols for the communication or transmission of information on the Internet, here
are some of the typical protocols:
HyperText Transfer Protocol (HTTP) is the most widely used web communications protocol. If you
look in the Address field of your web browser right now, it's likely you'll see "http:/" at the front.
HTTP is a classic "client-server" protocol. Users click a link on their web browser (the client), and the
browser sends a request over the internet to a web server that houses the site the user requested.
The server sends back the content of the site, such as text and images, which display in users ' web
browsers. HTTP is an unsecure communications protocol because the data it sends back and forth
between a browser and a server is unencrypted and can be intercepted by third parties.
Telnet is one of the oldest communication protocols. Like HTTP, a Telnet client is used to access
remote servers. However, unlike HTTP, where you only request specific files, Telnet is used to actually
log on to the remote server and perform functions as if you were sitting in front of the server terminal.
P age |6
Telnet is rarely used now since it is an unsecure protocol that does not encrypt data sent between
remote computers.
File Transfer Protocol (FTP) As the name implies, the File Transfer Protocol (FTP) is primarily used to
transfer files such as documents, images, music, etc., between remote computers. Users have to log
on to an FTP server either through a command line interface or through one of the many FTP graphical
client programs available. Once logged on, users can navigate through the remote server's file
structure, moving, renaming,
Hypertext Transfer Protocol Secure (HTTPS) is similar to HTTP, but different in that it combines with a
security protocol called SSL / TLS to provide secure client-server communications over unsecure
networks such as the internet. You're most likely to see HTTPS protocols on ecommerce websites that
ask for personal financial information like credit card numbers. You know a website is using HTTPS
protocols when you see the "https:/" in the web address displayed in your browser's Address field.
IP Security (IPSec) protocols encrypt packets of data and send them between two computers that
share the same cryptographic keys. In other words, the IPSec protocol is like a hallway with no doors
linking two rooms. The only place the data can go is between those two rooms. IPSec protocols are
used in Virtual Private Networks, which allow employees of a company to log on to their company's
secure network through a public network (e.g. from home or a coffee shop.)
2. Server hardware
P age |7
To design an online shopping mall website that works well we need a good sever hardware. The
hardware specifications will change under the influence of various factors that should be taken into
account. To make the best estimate of the hardware specifications for the web and database server,
where data of online shopping mall website will be hosting the following questions should be
answered:
• Product portfolio size and complexity (product number, product portfolio, attributes)
• Database size
3. Operating systems
The operating system is (generally) the only code on a computer that can access the computer
hardware directly.
P age |8
One of the operating system's core functions is to allow and control access of other applications to the
CPU and memory. Applications can use these resources as they are provided by the OS. Control of the
resources is done through the OS calls. Direct control is not allowed.
Direct access to and management of other hardware is generally done by other software, called
drivers. The operating system controls the loading and execution of these drivers however. Control of
these other hardware resources is also done through OS calls. Direct control is not allowed.
The operating system is a simple model which is a layer between the hardware and the applications. It
acts as an intermediary to provide controlled access to hardware to enable applications to use it, but
prevents the applications from misuse accidentally or deliberately.
This model is excepted by simple computer systems. Usually these are dedicated systems which can
allow direct access to the hardware. These don't often have a distinct division between the OS and the
“applications” I think that all the major platforms (Linux with tens of different options, OS X, Windows
10) are fine for web development. Linux seems to be among developers' favorites but I don't have any
experience with Linux.What I do know is, that Windows 10 is perfectly fine for web development. If
you would like to change to Linux you will have to look if all your programs are available for Linux (no
problem for web development).
And with the selected operating systems for your web sever, below this is some example:
* Microsoft server products are simpler for information system traffic staff to learn and use than
UNIX-based on operating systems.
*UNIX based Web server are most popular, and many user believe that UNIX is a more secure
operating systems.
Since these languages depend on the browser to make the software executable, web applications are
typically written in a browser-supported language like JavaScript or HTML. Any of the programs are
complex and need processing on the server. Others are fully static, requiring no server processing.
A web application includes a web server to handle client requests, an application server to carry out
P a g e | 10
the tasks required, and, in some cases, a database to store the data. From ASP.NET, ASP, and
ColdFusion through PHP and JSP, application server technology is diverse.
Front-end programmers are responsible for the look and feel of a website and the architecture of the
user experience. To accomplish these goals, front-end developers must master three main languages:
HTML, CSS, and JavaScript. In addition to mastering those languages, front-end developers need to be
familiar with the frameworks such as Bootstrap, Foundation, Backbone, AngularJS, and EmberJS, to
ensure that content is always displayed well across all devices. , and libraries such as jQuery and LESS,
enclose code in a more time-saving and useful way. Much of the work for front-end developers also
requires experience with Ajax, a technique widely used by JavaScript to allow pages to load
automatically by loading server data at the background part This job involves a lot of responsibility,
P a g e | 11
but it is worth doing. In general, a front-end programmer is responsible for the interior design of a
home that was built by a back-end programmer. The taste and decorating style are decided by the
host.
2. Back-End
But what makes the front-end of a website work? Where will all the data be stored? That's part of the
back end. The back end of a website includes a server, an application, and a database. A back-end
programmer builds and maintains a technology where the power of those components, which allows
the user interface part of the site to survive.
To make the server, application, and database interoperable, back-end developers use server-side
languages such as PHP, Ruby, Python, Java, and.Net to Build an application, and tools like MySQL,
Oracle, and SQL Server to search, store, or change data and serve back to the user in the front-end.
The recruiting process of back-end programmers also requires experience in PHP frameworks such as
Zend, Symfony, and CakePHP; Experienced with version management software such as SVN, CVS, or
Git; and experience with Linux in developing and deploying the system.
Back-end programmers use these tools to create or contribute to web applications with clean code,
portable, and thoughtful documentation. But before coding, they need to work with business
stakeholders to understand specific needs, then translate them into technical requirements and
P a g e | 12
deliver the most effective solutions for architectural technology.
3. The relationship between font-end and back-end website technologies that relates to
presentation and application layer.
• Presentation Tier- The presentation tier is the front end layer in the 3-tier system and consists
of the user interface. This user interface is often a graphical one accessible through a web browser or
web-based application and which displays content and information useful to an end user. This tier is
often built on web technologies such as HTML5, JavaScript, CSS, or through other popular web
development frameworks, and communicates with others layers through API calls.
• Application Tier- The application tier contains the functional business logic which drives an
application’s core capabilities. It’s often written in Java, .NET, C#, Python, C++, etc.
• Data Tier- The data tier comprises of the database/data storage system and data access layer.
Examples of such systems are MySQL, Oracle, PostgreSQL, Microsoft SQL Server, MongoDB, etc. Data
is accessed by the application layer via API calls.
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).
P a g e | 13
1. Online website creation tools
There are several reasons behind the popularity of website builder tools. These tools allow you to
develop a website, even if you do not know how to code. These are generally offered by website
hosting companies as proprietary tools. These tools include an editor, several themes and easy drag
and drop various elements like images, text, headers, etc. to build a site.
You do not need any special skill to build a website using such website builder tools. While such ready-
made templates are easy and quick to use, and offer built-in features for a fair amount of
customization, these sites become heavy and are often slow to load.
This in turn can affect the SEO performance of the site. Also, most of these tools are flash-based,
making them difficult to read by Google. Also, these tools are DIY and hence do not offer support to
maintain your website.
P a g e | 14
2. Custom Built Sites
Your site reflects your brand voice. Hence, it’s important that it stands out from the rest and is
bespoke. If you have the budget and time, a custom-built site would be ideal for your business.
Building a site from scratch required you to hire the right team that takes time to understand your
business needs. Such sites are more cost-effective in the long run as they can be easily customized to
adapt to the growth in your business
While these tools are cost and time effective, they fall short in certain aspects. Here we have compiled
a list of some advantages that custom built websites offer when compared to online website building
tools
P a g e | 15
3.1 Unique Customization of Website:
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.
Also, your business can be highlighted distinctively and uniquely from others. In contrast, online
website building tools are limited in terms of templates and layout. Using them may result in a similar
looking website to that of your competitors
The primary purpose to take business online is to boost its visibility to people. For this purpose, SEO
(Search Engine Optimization) helps your page rank higher on Google or other search engines. Being
ranked (or listed) higher in the search results leads to increase in traffic on your website.
To make your website optimized, website designers use planning, keyword research, sitemap creation
and a variety of other tools. On the contrary, online website builders have limited SEO tools which
may deprive you off these benefits
While using website builders you may come across terminologies like DNS (Domain Name System), TLS
(Transport Layer Security) etc. These can be confusing at times.
Hiring a website designer or a custom PHP development company can relieve you of this confusion as
all these technicalities are looked after by them. This also ensures time saving
Once a visitor is on your website, you need to ensure that he stays on it. For this, page speed plays an
important role. Also, Google considers your page speed while ranking.
In addition to providing relevant content through best SEO strategies, custom websites offer better
Page speed. Website designers help in decreasing loading time through coding
Most of the small businesses require tools such as CRM (Customer Relationship Manager), contact
P a g e | 16
management tools, appointment schedulers etc. While online builders allow these e-commerce
features, they rely on third party applications for the purpose.
Creating your website through online building tools does not give you its ownership. Instead, the
ownership remains with the online building platform since you use their domain name. Whereas in a
custom website, you are required to purchase a domain name and creating designs from scratch
which gives you the ownership of your website.
4. What is UX Design?
User Experience (UX) Design is the process of making products, websites, apps, and services enjoyable
and easy to use. Every product we interact with has a user experience that accompanies it. A UX
Designer’s job is to make sure that user experience is a good one. What qualifies as a good user
experience? It’s pretty simple— a good user experience will have a mix of desirability, usability, and
usefulness. A talented UX Designer will possess traits like empathy and creativity to put themselves in
the shoes of the user. They’ll also be an excellent critical thinker. The day-to-day tasks of a UX
P a g e | 17
Designer can include:
Information architecture
Prototyping
User testing
5. What is UI Design?
User Interface (UI) Design is the process of designing user interfaces. User interfaces are the point of
interaction a person has with a digital device, app, or website. UI Design is a strictly digital practice,
meant to visually lead a person through a device or app’s interface. UI Designers work to make user
interfaces enjoyable and easy to interact with through the use of aesthetics. These creatives will work
to ensure a person has a positive and intuitive interaction with a website, app, or device’s interface. A
career in UI Design is perfect for those who are imaginative, empathetic people with strong
communication skills. The responsibilities of a UI Designer often include:
P a g e | 18
Competitive analysis on look & feel
UX is the “feel” of a product, app, or website, while, UI is the “look” of a product, app, or website. UX
and UI Designers work together (usually on the same team) in the product design process. Often,
companies will hire one person to do all of the UX/UI work so it’s important to understand both
disciplines. This is also why the terms tend to get confused or used interchangeably. UX Planet’s
Lakshman Sharma compared the 2 fields to the experience of riding a horse. He said, “UI is the saddle,
the stirrups, and the reins. UX is the feeling you get being able to ride the horse.”
A UI Designer focuses on the visual elements and how pleasurable and functional they are for the
person using them. Meanwhile, the User Experience Designer focuses on the broader experience a
P a g e | 19
person has with the product, app, or website. User interface design is often compared to graphic
design as it prioritizes the visuals (though it is not exactly the same as graphic design either).
The disciplines work together to create an intuitive digital experience that’s aesthetically pleasing and
easy to use. Typically a UX Designer will start a project off, working on some of the tasks we
mentioned above like user research and information architecture. Then, they’ll hand it off to the UI
Designer who will complete the more granular, visual elements of the project. UI/UX Designer Jesse
Showalter put it beautifully when he said, “A UX Designer is going to pass off the skeleton and a UI
Designer is going to put on the skin and the clothes and dress that thing.”
Another major difference between user experience and user interface is that UI Design is a digital-
specific discipline. User interface refers to the point of contact between a user and a digital product or
device. Whereas UX is part of any product or service a human would interact with, even beyond the
digital world. You can have a user experience using a coffee mug, for example. Is the mug designed to
keep your coffee hot? Does it burn your hands? Is the handle easy to use? Those are all questions a UX
Designer would ask when creating the mug to ensure people have a good experience using it.
UI vs Web Design
User Interface programming, or UI design, is the visual or graphical side of design. Any UX
programmers will also work on the user interface, while others will only do testing and wireframes.
P a g e | 20
There's a course dedicated to UI design in the OpenClassrooms UX designer direction, whether you
want to do it yourself or work better with UI designers.
Established user interface designers would have a deep understanding of graphic design, typography,
color theory, picture direction, vector processing, (possibly) motion graphics, and, at a senior level, be
able to act as an art or artistic director with a simple, visual vision for the product or brand.
P a g e | 21
References
Wpbeginner.com. 2021. [online] Available at: <https://www.wpbeginner.com/beginners-
guide/beginners-guide-what-is-a-domain-name-and-how-do-domains-work/> [Accessed 30 March
2021].
Prime Design Solutions. 2021. The difference between template and custom-built websites. [online]
Available at: <https://www.primedesignsolutions.com/learning-center/difference-template-custom-
built-websites/> [Accessed 30 March 2021].
Cafedev.vn. 2021. Giới thiệu toàn tập về Frontend, Backend, Fullstack trong lập trình » Cafedev.vn.
[online] Available at: <https://cafedev.vn/gioi-thieu-toan-tap-ve-frontend-backend-fullstack-trong-lap-
trinh/> [Accessed 30 March 2021].
Netleaf Software. 2021. How many are the latest software available for web designers? - Netleaf
Software. [online] Available at: <https://www.netleafinfosoft.com/our-blog/2019/11/13/how-many-
are-the-latest-software-available-for-web-designers/> [Accessed 30 March 2021].
The Interaction Design Foundation. 2021. The 7 Factors that Influence User Experience. [online]
Available at: <https://www.interaction-design.org/literature/article/the-7-factors-that-influence-user-
experience> [Accessed 30 March 2021].
Kenzie Academy. 2021. What’s the Difference Between UX and UI Design? - Kenzie Academy. [online]
Available at: <https://www.kenzie.academy/blog/whats-the-difference-between-ux-and-ui-design/>
[Accessed 30 March 2021].
Le, T., Sorenson, J., Boucher, P., Jangid, R., Sander, R., Pipkin, K., Lane, N., Marsh, M. and Le, T.,
2021. Custom Vs. Templated Websites: What’s The Difference | Boostability. [online] Blog. Available
at: <https://www.boostability.com/content/whats-the-difference-between-custom-and-templated-
websites> [Accessed 30 March 2021].
Media, M., 2021. The difference between a custom-built website and a template website. [online]
Makeitseen.com. Available at: <https://www.makeitseen.com/blog/the-difference-between-a-
custom-built-website-and-a-template-website> [Accessed 30 March 2021].
P a g e | 22