L01 Server technologies and management services associated with hosting and

managing websites

1.1 Differentiate the communication protocols, server hardware, operating systems and
web server software with regards to designing, publishing and accessing a website. Define
the types of DNS and the uses of it, with clarifications on how domain names are
structured.

1.1.1 communication protocols (Definition and the types)

HTTP (Hypertext Transfer protocol)

- the main protocol used to transport material on the internet, including web pages. It
outlines how browsers, or clients, ask servers for online pages and how those servers
reply.

HTTPS (Hypertext transfer protocol security)

- an encrypted variant of HTTP that protects data sent between the client and server using
SSL/TLS certificates. Sensitive data transfer and safe online transactions depend on this.

FTP (File transfer Protocol)

- used to move files over a network between machines. Uploading website files to a web
server is a common usage for it.

SMTP (Simple mail transfer protocol)

- For email correspondence. SMTP is frequently used by web servers to send emails for
alerts, contact forms, etc.

(Source – Authors work)

1.1.2 Sever Hardware

 Physical server - A standalone computer dedicated to hosting websites and other
applications.
  Virtual Privert server - A virtualized server that shares resources with other VPSs on a
physical server. Offers more control and flexibility than shared hosting.
 Cloud server - a server that is flexible and scalable that is controlled and deployed
online.
 Web Hosting Control panel - software that makes file administration, database
configuration, and website creation easier on servers. Plesk, WHM, and cPanel are
popular choices.

(Source – Authors work)

1.1.3 Operating system

 Linux - Because of its open-source nature, dependability, and security, it is the most
widely used operating system for web servers. Popular distributions consist of Debian,
Ubuntu, and CentOS.
 Windows server - Also used for web hosting, especially for .NET applications.
 macOS - Less common for web hosting but can be used for smaller websites or personal
projects.

(Source – Authors work)

1.1.4 Web server software

 Apache - The most popular web server software, renowned for its efficiency and
adaptability.
 Microsoft IIS - Windows Server's default web server.
 Lightspeed - A high-performance web server with a focus on speed and resource
efficiency.

1.1.5 DNS Domain name system

Types of DNS

- Authoritative DNS Server: Stores the actual IP address of a domain name.

- Recursive DNS Resolver: Queries authoritative servers to find the IP address of a
domain name.

Domain name structure

 - A domain name consists of multiple labels separated by dots. For example,
www.example.com has three labels: www, example, and com. The com is the top-level
domain (TLD), indicating the type of domain (e.g., .com, .net, .org).

How domain names Work - Your browser makes a query to a recursive DNS resolver when you
input a domain name. To determine the IP address linked to that domain name, the resolver
contacts authoritative DNS servers. The browser connects to the web server at that IP address
and requests the website content after locating the IP address.

Importance of DNS –

 instructs the Internet to be easy to use DNS makes it possible for consumers to utilize
simple domain names rather than complicated IP addresses.
 Website access: DNS is necessary to gain access to a website and other online resources.
 Redundancy: DNS will withstand failures since it is spread across thousands of servers.
 Allows load balancing: DNS can divide traffic among several web servers.

1.1.6 Domain name & Stretcher

Because it acts as a mediator between a host's numerical IP address and its recognizable name,
the domain name is the address that is used to identify a website or other online resource.
Starting with the top-level domain, a domain name comprises a series of labels, one for each
level.

1.2.1 Components Of Domain Name

TOP Level Domain: This is the most negligible level of a domain name, like .com, .net, .org, or.
Edu. Top Level Domain refers to naming for the categorization or general category or naming for
purpose designation. Examples include .com, which is normally utilized by a commercial
website, while .org is usually used by non-profit organizations.

Second-Level Domain: This is the part of the domain name that comes before the TLD. It
usually consists of the major name of the domain representing the identity or brand of the
website. For example, in www.thamseer.com, Thamseer is the SLD.
Subdomain: This is an optional component that can be placed before the SLD. It's used to
designate specific sections or services within a website. For instance, www is a common
subdomain that often refers to the main website.

1.2.2 Importance of Domain Name

Usability: Domain names are a lot easier to remember and type than IP addresses; therefore, it's
much easier to get to websites for users.

Branding: A domain name, if chosen appropriately, could make a web page solid in terms of its
brand and easily rememberable.

SEO: A relevant domain name would therefore boost the site's search engine ranking by
providing clues about the website's content and relevance to search queries.

1.1.7 Definition of search engines (Impact on websites traffic, impact on user engagement
and conversion speed and performance)
The internet's digital gatekeepers, search engines direct consumers to the information they need.
They have a significant impact on user engagement, website performance, and internet visibility.

Driving Web site Traffic

For many websites, search engines are the main source of organic traffic. The search engine
ranks websites according to several criteria and displays a list of pertinent results when users
type in a search query. Potential customers are more likely to click on and visit websites that rank
higher in these search engine results pages (SERPs). The traffic and reach of a website can be
greatly expanded by this enhanced visibility.

Enhancing User Engagement

Search engines prioritize websites that provide a positive user experience. When users find a
website that is easy to navigate, loads quickly, and offers relevant content, they are more likely to
stay engaged and explore further. This can lead to increased time spent on the site, higher page
views, and ultimately, improved user satisfaction.

Boosting Conversion Rates

A well-optimized website that ranks high in search engine results can directly impact conversion
rates. When users find a website that meets their needs and provides a seamless experience, they
are more likely to act, such as making a purchase, signing up for a newsletter, or contacting the
business.

1.1.8 Search engine optimization

SEO stands for Search Engine Optimization and refers to methods to enhance the ranking and
appearance of a given website in search engine results. The main idea of SEO is to raise organic
traffic by optimizing different aspects of the website to reach more potential customers through
RPs like Google, Bing, and Yahoo.

Key SEO

Key Word Research

It's critical to determine the pertinent terms and phrases that prospective clients are using when
searching. You can find appropriate keywords with the aid of tools such as Google Keyword
Planner.

On Page Optimization

This involves optimizing elements within your website's content and structure. Key areas
including:

 Meta Tags
 Heading
 Content Quality
 Image optimization

Techno optimization

Ensuring your website is technically sound to avoid search engine penalties. This includes:

 Mobile Friendliness
 Page speed
 Site structure
 XML Sitemap
OFF Page SEO

Building quality backlinks from other reputable websites. This can be achieved through:

 Guest Posting
 Link Building
 Social media Marketing

1.1.9 Common Web development Technology

Using a variety of computer languages, frameworks, and tools, web development include
designing and constructing websites. Front-end and back-end development are the two primary
categories into which it may be generally divided.

Figure I Front end back end

(Source- Eluminoustechnologies.com, 2024,)

Front End Development

The goal of front-end development is to create interactive and visible elements of a website that
people can see and use. It entails creating the functionality, layout, and user interface. Typical
front-end technologies consist of:

 HTML
 CSS
 JavaScript
 Front End Frameworks - Libraries of pre-written code that streamline front-end
development and provide reusable components. Popular frameworks include React,
Angular, and Vue.js.
  CSS Processors - Languages like Sass and Less that extend CSS with features like
variables, nesting, and mixings, making it easier to write and maintain stylesheets.

Back End Development

The server-side logic and functionality of a website are the focus of back-end development. Data
handling, database interactions, and server-side processing are all part of it. Typical back-end
technologies consist of:

 Programing Language (Python, PHP, Jave, etc.)

 Web Framework
 Database

Full stack Development

Developers who are proficient in both front-end and back-end technologies are often referred to
as full-stack developers. They have a well-rounded understanding of the entire web development
process, allowing them to work on various aspects of a project.

1.1.10 Web Development framework

Web development frameworks are collections of pre-written code that streamline the
development process by providing reusable components and conventions. They offer a structured
approach to building web applications, saving developers time and effort.

Fron end framework

The primary concern of frontend frameworks is the user interface and client-side logic of a web
application. They provide a ground for constructing an interactive dynamic web page. Some
popular frontend frameworks include:

 React is a JavaScript library developed by Facebook for declaratively building user

interfaces. It is very well known for its performance and flexibility and is a component-
based architecture system.
 Angular is a complete Google JavaScript framework that provides an answer to almost
anything the developer would want to do in building large-scale web applications. It
features a component-based architecture, dependency injection, and two-way
databinding.
 Vue.js: A progressive JavaScript framework, it provides a flexible and incrementally
adoptable architecture to develop a web application. It is well-liked due to its simplicity
and ease of learning.
 Ember.js is a mature JavaScript framework that follows the philosophy of convention
over configuration; it's highly structured and opinionated.
 Backbone.js is a lightweight JavaScript framework that provides the structure to keep
client-side applications organized and maintainable.
Back End Framework

It provides a basis on which the server-side logic for a web application is written, and that would
include database interactions, routing, and API development. Popular back-end frameworks
include the following:

 Django is a Python-based web framework aimed at rapid development and clean design.
It is called a batteries-included framework since it comes with quite a lot of built-in
functionality.
 Ruby on Rails: A web framework for the programming language Ruby, which is based on
convention over configuration to facilitate agile development and maintainability.
 Laravel: A PHP web framework that offers a variety of features like routing,
authentication, and database interactions. It's known for its elegant syntax and community
support.
 Express.js is basically a web framework for Node.js that helps in making web
applications with a minimalistic approach. It has gained popularity because of its
performance and scalability.
 ASP.NET Core is an open-source, cross-platform web framework developed by
Microsoft, used for building web applications using C#.

1.1.11 Tools and techniques Chosen for the web Application

A vast array of tools and methods are used in web development to design, develop, construct,
and manage websites. Here is a thorough summary:

Code editor & IDEs

Basic tools used in writing and maintaining code include code editors and integrated
development environments. Some of the most popular options include:

 Sublime Text is a lightweight and customizable code editor.

 Visual Studio Code: a free code editor from Microsoft with an open-source license.
 IntelliJ IDEA: Leading IDE with many features included, but also code completion and
debugging. Version Control Systems
Version control systems monitor changes in code over time. They allow several developers to
work on the same codebase and permit reverting back when errors occur. Currently, Git is the
most widely applied version control system, supported by all online hosting solutions, such as
GitHub or GitLab.

Task Runner & Build Tool

Task runners and build tools are the ones that automate repetitive tasks like minification,
compilation, and testing. Some popular:

 Gulp: A powerful task runner that bases its functionality on using declarative syntax.
 Grunt: Also, a famous task runner works similarly to Gulp.
 Webpack: Module bundler - it bundles JavaScript modules and other assets into one
single file efficiently.

Testing Tools

Testing is the process meant to ensure the quality and reliability of a web application. Common
testing tools:

 Unit Test Frameworks: Jest, Mocha, and Jasmine form the popular frameworks that are
used in testing individual components of the web app.
 End-to-End Testing Frameworks: These are tools used for the testing of the whole user
flow on a web application: Selenium WebDriver, Cypress.

Debugging Tools

Debuggers are utilities assisting a developer in tracing and fixing bugs in their code. Developers
use either browser developer tools or debugging extensions for code editors and IDEs.

Deployment Tools

Deployment Tools Deployment tools deploy a web application to a production server. Popular
ones are

FTP Clients: FileZilla and Cyberdeck are some popularly used FTP clients to transfer files to
web servers. Automation in Deployment Tools: Tools such as Capistrano and Ansible implement
automation in deployment.
1.1.12 Web functional management
Websites are interactive online platforms that can be used for a number of things, such as
allowing communication and commerce or offering information and services. They are made up
of linked pages that may be viewed with a web browser.

Key functionalities of websites:

Websites can deliver text, images, videos, and other multimedia content to their users. They
allow users to interact with the content through forms, buttons, and links. Many of them keep
and manage data, such as user information, catalogs of products, or website analytics. They can
enable online shopping and transactions, facilitate communication through email, contact forms,
and online chat, create social communities and enable user interaction and collaboration, and be
optimized for search engines.

Managing Websites

Website management refers to keeping track of the creation, development, and enhancement of a
website. It involves:

 Content Creation and Management: Creation and updating of the website's content will
comprise text, images, and videos.
 Design and Layout: Ensuring that the website has an appealing and user-friendly design.
 Technical Maintenance: Keeping the website's software and hardware up to date,
troubleshooting technical problems.
 Security entailing protection from cyber threats, assurance of data privacy to the website.
 SEO Optimization: Implementing strategies to improve the website's ranking in search
engines. Analytics: Tracking website performance and user behavior to make data-driven
decisions.
1.1.13 Justification of Tools and Techniques for Custom-Built Websites
There are a lot of factors that determine the choice of tools and techniques that would work in a
bespoke website, including, but not limited to, project needs, team experience, and scaling. The
justification for why web applications would be fitting in a bespoke website is detailed in the
points that follow.

Flexibility and Customization

Out-of-the-box websites are more flexible than using website templates or CMS platforms. They
could be tailored to specific business needs and requirements, considering unique features,
branding elements, and user experiences that meet organizational goals.

Scalability

Custom-built websites will also be easier to scale for growth and increased traffic. They can be
designed to handle larger workloads, and future scaling should pose no issue. This further helps
in optimizing performance, where one can fine-tune or scale at will.

Control and Ownership

You have full control over a custom-built website's codebase and the technology upon which it's
built. This option then affords you greater flexibility and independence. For owning the code,
maintenance updates, and customization can be made throughout without depending on third-
party platforms.

Security

A custom-built website can be designed with strong security measures put in place for the
organization. This allows for better control over security updates, patches, and management of
vulnerabilities.

Connectivity

to Other Systems Within a company, custom-built websites can be easily connected with other
apps and services. Workflow automation and effective data interchange are made possible by
this.
Cost-Effectiveness

Over Time A custom-built website may have greater initial development costs, but it may end up
being more economical in the long run. You get away from the ongoing costs connected to pre-
made platforms or templates. Custom-built websites eliminate the need for regular redesigns or
platform migrations by adapting to shifting industry trends and company needs.

Proof
Custom-built websites have been used by many prosperous businesses to accomplish their
objectives. E-commerce behemoths like Amazon and eBay, for instance, have systems that are
specifically designed to meet their needs and grow to accommodate high traffic volumes. In
order to manage billions of users and provide individualized experiences, social media sites like
Facebook and Twitter also depend on specially designed infrastructure.
L02 Categories web site technologies, tools and software used to develop
website

2.1 Define the relationships between front-end and back-end website technologies and
explain how the front-end and the back end relate to presentation and application layers.

2.1.1 Introduction to front end and back end relate to presentation and application layers

Two crucial elements of web development are front-end and back-end technologies, each of
which has a specific function. They have distinct jobs and responsibilities even if they
collaborate to build a comprehensive website.

Frontend Technologies

This will include the responsibility of the visible and interactive components of the website by
front-end technologies. They work upon the presentation layer, which actually means the design,
layout, and user interface of the website.

Key front-end technologies:

 HTML: Defines the structure and content of web pages.

 CSS Cascading Style Sheets: would be styling the web pages by controlling colors, fonts,
layout, among others.
 JavaScript: It allows the webpage to become interactive, functioning through form
validation, creating animations, and sending AJAX requests.
 Front-end frameworks: React, Angular, Vue.js, etc., provide pre-built components and
streamline front-end development.

Back-End Technologies

Back-end technologies deal with server-side logics and functionalities of a website. They deal
with the application layer that incorporates the processing of data, database interactions, and
various server-side operations.
Key back-end technologies:

 Regular programming languages are Python, Ruby, PHP, Java, and Node.js for back-end
development.
 Web frameworks: Django, Ruby on Rails, Laravel, Express.js, etc., provide a structured
way of developing the back end.
 Databases: MySQL, PostgreSQL, MongoDB, Oracle - used for data storage and
administration.
 Server technologies: Apache, Nginx, and Microsoft IIS are used to serve web pages to the
users.

1.2.2 Relationship Between Front-End and Back-End

Front-end and back-end technologies work together to compose a full web application. The
front-end is responsible for the presentation layer, and the back end handles the application layer;
both talk to each other through APIs, exchanging data and functionality.

Front-end forwards the request for data or an action to the back end. Back-end processing of
requests: It performs the back-end processing, interacts with the database, and returns data or an
action that is requested. The front end is used to display results: It gets the data from the back
end and displays it to the user.

 Front-end request: The front-end asks the back end to provide some data, do a query on a
database, perform a computation, or process user input.
 Requests are processed by the backend, which also communicates with the database
when necessary and returns the necessary data or performs the requested action after
receiving requests from the frontend.
 It sends the data or results that must be displayed to the user to the front end after
receiving responses from the back end.
 To present information or additional intended actions, the frontend dynamically refreshes
the user interface after receiving data or results from the backend.
1.2.3 Connection to presentation layer and Application layer
A comprehensive web application is created by combining front-end and back-end technologies,
each of which is essential to the process. While the back end (application layer) manages the
underlying logic and data processing, the front-end (presentation layer) oversees what the user
sees and interacts with.

The Connection
Application Programming Interfaces (APIs) provide data and functionality exchange between the
front-end and back-end levels. This enables the back end to handle requests and provide the
required data or outcomes, while the front-end can request data or actions from the back end.

The relationship is broken down as follows:

 User Interaction: The interaction of the user with the front-end is done through the
clicking of buttons, forms, and navigation on the website.
 Front-End Request: The front-end sends a request to the back end, specifying the desired
action or data.
 Back-end Processing: The back end will receive the request, process it, and interact with
the database or any other operation deemed necessary. Processing or data fetching: Here,
the backend fetches the data requested or executes the action required.
 Back-End Response: A response is returned to the front-end from the back end containing
the data or results.
 Frontend Display: The backend feeds either the information or the results to the frontend,
which dynamically updates the UI to display the information or the desired action.
2.2 Critically compare the difference between online website creation tools and custom-
built sites. Consider Followings: design flexibility, performance, functionality, User
Experience (UX) and User Interface (UI). Compare and contrast the tools and techniques
available to design and develop a custom-built web application for Malcome and Lismore.
Select the most suitable tools, techniques and justify your selection with valid reasons.

2.2.1 Introduction to online website creation and custom-built site and the comparison
based on
When creating a website, there are two primary approaches: using online website creation tools
and building a custom-built site.

Tools for Creating Websites Online

Because of their user-friendly interface, online website building tools enable people to construct
websites without requiring a lot of coding expertise. They frequently provide drag-and-drop
capabilities, pre-made themes, and integrated services like blogging and e-commerce. Weebly,
Squarespace, and Wix are a few examples.

A customized website offers far more flexibility and control, opening up even more opportunities
to guarantee a high-performance, customized experience, even while internet website building
tools offer that simple, open access to constructing a website. Naturally, the requirements and
objectives of the specific project at hand will determine which is ideal.

2.2.2 Tools and techniques Available to develop custom build web application for Malcolm
Lismore
The following resources and methods could be taken into consideration in order to develop a
unique website for freelance photographer Malcolm Lismore:

Technologies Used in Front-End Application:

HTML5: It is an essential markup language to develop the structure of a web page, to define its
content and layout.

CSS3: A pre-defined style sheet language applied for web pages and controlling the design
aspects like colors, fonts and layout of the page.
JavaScript: It enhances the scope of web pages by enabling features such as image galleries,
contact forms, or animations. It makes web pages interactive and dynamic

Front-end frameworks: Instead of starting from scratch, one can use platforms such as React,
Angular or Vue.js to speed up the process of development, as it will come with components that
are ready for use.

Technologies Used in Back End Application:

Programming language: The development and backend languages used can be based on project
needs or the expertise of the team, for instance, Python, Ruby, PHP, or Node.js.

Web framework: A back-end framework like Django, Laravel, Ruby on Rails, or Express.js can
help organize the development structure of the back end.

Database: It requires the existence of a Database such as MySQL, PostgreSQL or MongoDB to

facilitate information storage and management, which may include image genes or user avatars.

Server: Likewise, a web server such as Apache or Nginx is necessary to serve the content of the
web site to the end user.

Development Tools:

Code editor or IDE: A tool such as Visual Studio Code, Sublime Text or IntelliJ IDEA is used for
coding or modifying the code.

Version control system: Git is a version control system used to manage code history and source
collaboration.

Task runner: A task runner such as Gulp or Grunt used to simplify lengthy processes such as
minification and compilation of files.

Package manager: npm or yarn for dependency management and package installation.

Design Software:

Adobe Photoshop or Illustrator: These are applications used for developing design artworks and
layouts.
Figma: A design software which is based in the cloud to create wireframes and prototypes as well
as user interface designs.

Deployment Tools:

FTP Client: Application such as FileZilla or Cyberdeck is used for uploading files on the web
host server.

Deployment management tools: Capistrano and Ansible help to ease the deployment of
applications on servers.

The requirements of the project, the team's experience, and the desired degree of customization
will all influence the tools and methods selected. Malcolm Lismore can build a stunning and
useful website to display his photos and draw in customers by carefully choosing the appropriate
tools and methods.

2.2.3 Comparison for Malcom Lismore

Feature Online web site creation Tool Custom Build sites
Desing Flexibility restricted, frequently using vast, enabling customized
templates that have already been and distinctive layouts
created.
Performance Due to shared infrastructure, can be carefully coded and
there can be certain restrictions. tuned to maximize
performance.
Functionality Range of built-in features but Can be customized to
may be limited in customization include any desired
functionality
User Experience May have a generic or Can be designed to provide
(UX) standardized UX a highly tailored and
engaging UX
User Interface Pre-designed UI elements Total command over UI
(UI) components and design
 Coast usually less expensive up front, Greater initial expenditures
however there can be ongoing but possibly reduced
charges. ongoing expenses
Development Quicker development, longer development
Time particularly for simple websites. duration, particularly for
intricate websites.
Technical Very little technological Very little technological
Expertise expertise is needed. expertise is needed.
Scalability may not be able to scale to Easily scalable to meet
accommodate high traffic expansion needs.
volumes.
Ownership and restricted authority over the total control and ownership
Control infrastructure and programming of the website
of the website
Table 1 Comparison for Malcom Lismore

For Malcolm Lismore, not only a readymade website can be an option however a custom-built
one would be the best option because.

 Design Control: He does not just need any website; 1he requires a beautiful, designed
website that speaks to his love for photography.
 Performance: The high-performance website is mandatory for promoting his photography
and keeping the visitors.
 Features: There are other general features that he may need such as image galleries,
contact forms, social media connections, etc.
 User Experience (UX): A customized UX would improve the visitor's experience and
elevate the odds of him/her looking through the portfolio.
 User Interface (UI): A custom-built site would have pleasing and functional graphics
design that goes hand in hand with his photography.

Whilst custom sites take more of an initial investment and skills to develop, they will provide
one with more options, better management control and possible longevity.
L03 Utilize website technologies, tools and techniques with good design
principles to create a multipage website

3.1.1 Project scope and Objectives

The end results desired from the Project

To design a well-organized, several page websites for Malcolm Lismore, a photographer, in

which he presents his works and makes it easier for people to make bookings.

Project objectives

 Show the Art of Photography: To exhibit Malcolm’s photographer expertise and talent, an
elaborate online portfolio of photographs is to be prepared.
 Lead Generation: Better still, the possibility of potential customers requesting for and
contacting Malcolm over barriers must be operated.
 Build Professional Image: Create an attractive and professional website with irrefutable
elements of Malcolm’s brand design.
 Search Engine Optimization: Integrate all the required elements and practices in order to
enhance the website and its content even more in relation to search engines ranking
purposes.
 Ensuring Positive User Interaction: Strive to make the website user friendly, aesthetically
pleasing and accessible across various devices including mobile phones.

Target audience

 People and companies looking for photography services for various occasions of interest,
weddings, portraits, etc.
 People who appreciate and collect artistic work, even including photography done by
Malcolm.

Website sections:

 Homepage: Visually arresting homepage highlighting the best works of Malcolm along
with easy navigation to the other sections of the website.
  About page: Background information about Malcolm, his qualifications and love for the
art of photography.
 Portfolio: A section with a collection of photographs taken by Malcolm by different types
(including but not limited to: nature, animal, wedding photos).
 Price Page: Pricing and packages for the different photography services clearly stated.
 Contact Us Page: A page where potential customers can fill out booking requests and ask
to be provided with additional information.
 Blog: A blog content section where ‘Photo People’ can write helpful articles, experiences
or any updates relevant to the business.

3.1.2 Requirements