UNIT 13 WDD Assignment - .....

HND in Computing (ESOFT Metro Campus)

Scan to open on Studocu

 Higher Nationals
Internal veri 昀椀 cation of assessment decisions – BTEC (RQF)

INTERNAL VERIFICATION – ASSESSMENT DECISIONS

Programme title BTEC Higher National Diploma in Computing
Mrs. Darshani Karunarathne
Assessor Internal Veri 昀椀 er
Unit 13: Web Design and Development
Unit(s)
Malcolm Lismore Photographer’s Website
Assignment title
Student’s name
List which assessment Pass Merit Distinction
criteria the Assessor has
awarded.
INTERNAL VERIFIER CHECKLIST
Do the assessment criteria awarded match
those shown in the assignment brief? Y/N

Is the Pass/Merit/Distinction grade

awarded justi 昀椀 ed by the assessor’s Y/N
comments on the
student work?
Has the work been assessed
Y/N
accurately?
Is the feedback to the student:
Give details:

• Constructive?
Y/N
• Linked to relevant
assessment criteria? Y/N

• Identifying opportunities
for improved performance?
Y/N
• Agreeing actions? Y/N

Does the assessment decision

Y/N
need amending?
Assessor signature Date

Internal Veri 昀椀 er signature Date

Programme Leader signature
Date
(if required)

UNIT_13 - Web Design and Development

 Con 昀椀 rm action completed
Remedial action taken

Give details:

Assessor signature Date

Internal Veri 昀椀 er
Date
signature
Programme Leader
Date
signature (if
required)

UNIT_13 - Web Design and Development

Higher Nationals - Summative Assignment Feedback Form

Student Name/ID

Unit Title Unit 10: Website Design & Development

Assignment Number 1 Assessor

Date Received 1st
Submission Date
submission
Date Received 2nd
Re-submission Date
submission

Assessor Feedback:

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

Pass, Merit & Distinction P1 P2 M1 M2 D1

Descripts
LO2. Categorise website technologies, tools and software used to develop websites.

Pass, Merit & Distinction P3 P4 M3 D1

Descripts

LO3. Utilise website technologies, tools and techniques with good design principles to create a multipage website.
Pass, Merit & Distinction P5 P6 M4 D2
Descripts

LO4. Create and use a Test Plan to review the performance and design of a multipage website.
Pass, Merit & Distinction P7 M5 D3
Descripts

Grade: Assessor Signature: Date:

Resubmission Feedback:

Grade: Assessor Signature: Date:

Internal Veri 昀椀 er’s Comments:

Signature & Date:

* Please note that grade decisions are provisional. They are only con 昀椀 rmed once internal and external moderation has taken
place and grades decisions have been agreed at the assessment board.

UNIT_13 - Web Design and Development

Pearson
Higher Nationals
in Computing

Unit 10: Web Design and Development

General Guidelines

1. A Cover page or title page – You should always attach a title page to your assignment. Use previous page
as your cover sheet and make sure all the details are accurately 昀椀 lled.
2. Attach this brief as the 昀椀 rst section of your assignment.
3. All the assignments should be prepared using a word processing software.
4. All the assignments should be printed on A4 sized papers. Use single side printing.
5. Allow 1” for top, bottom , right margins and 1.25” for the left margin of each page.

Word Processing Rules

1. The font size should be 12 point, and should be in the style of Time New Roman.
2. Use 1.5 line spacing. Left justify all paragraphs.
3. Ensure that all the headings are consistent in terms of the font size and font style.
4. Use footer function in the word processor to insert Your Name, Subject, Assignment No, and Page
Number on each page. This is useful if individual sheets become detached for any reason.
5. Use word processing application spell check and grammar check function to help editing your assignment.

Important Points:

1. It is strictly prohibited to use textboxes to add texts in the assignments, except for the compulsory
information. eg: Figures, tables of comparison etc. Adding text boxes in the body except for the before
mentioned compulsory information will result in rejection of your work.
2. Carefully check the hand in date and the instructions given in the assignment. Late submissions will not be
accepted.
3. Ensure that you give yourself enough time to complete the assignment by the due date.
4. Excuses of any nature will not be accepted for failure to hand in the work on time.
5. You must take responsibility for managing your own time e 昀昀 ectively.
6. If you are unable to hand in your assignment on time and have valid reasons such as illness, you may apply
(in writing) for an extension.
7. Failure to achieve at least PASS criteria will result in a REFERRAL grade .
8. Non-submission of work without valid reasons will lead to an automatic RE FERRAL. You will then be asked
to complete an alternative assignment.
9. If you use other people’s work or ideas in your assignment, reference them properly using HARVARD
referencing system to avoid plagiarism. You have to provide both in-text citation and a reference list.
10. If you are proven to be guilty of plagiarism or any academic misconduct, your grade could be reduced to A
REFERRAL or at worst you could be expelled from the course

UNIT_13 - Web Design and Development

Student Declaration

I hereby, declare that I know what plagiarism entails, namely to use another’s work and to present it as my own
without attributing the sources in the correct way. I further understand what it means to copy another’s work.

1. I know that plagiarism is a punishable o 昀昀 ence because it constitutes theft.

2. I understand the plagiarism and copying policy of the Edexcel UK.
3. I know what the consequences will be if I plagiaries or copy another’s work in any of the assignments for
this program.
4. I declare therefore that all work presented by me for every aspects of my program, will be my own, and
where I have made use of another’s work, I will attribute the source in the correct way.
5. I acknowledge that the attachment of this document signed or not, constitutes a binding agreement
between myself and Edexcel UK.
6. I understand that my assignment will not be considered as submitted if this document is not attached to
the attached.

Student’s Signature: Date:

(Provide E-mail ID) (Provide Submission Date)

UNIT_13 - Web Design and Development

Student Name /ID Number

Unit Number and Title Unit 10- Web Design and Development

Academic Year 2023/2024

Unit Tutor

Assignment Title Malcolm Lismore Photographer’s Website

Issue Date

Submission Date

IV Name & Date

Submission Format:

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.

LO3 Utilise website technologies, tools and techniques with good design principles to create a multipage website.

LO4 Create and use a Test Plan to review the performance and design of a multipage website.

Assignment Brief and Guidance:

UNIT_13 - Web Design and Development

 Assignment Brief
Malcolm Lismore is a freelance photographer based on the North West coast of Scotland. His biggest passion in
photography is for the natural world. He sells many images of the rugged Scottish landscape, its natural wildlife and coastal
birds.
However, it’s not just landscape and wildlife photography he is interested in, like many photographers he can also be hired
for weddings, portraits, and special events.

Malcolm is looking for new ways to promote his business and has approached you to develop a website that will act as a
showcase of his photography skills and allow users to make enquires about hiring him for weddings and special occasions.
The website will need to provide the following features:
•A home page from which it is possible to navigate to the other resources in the website. The home page will need to
quickly communicate the purpose of the site, be visually engaging and provide clear navigation to the rest of the site.
•A page that provides basic information about Malcolm, his experiences and his passion for photography.
•A page that provides information about Malcolm’s prices.
•A series of pages (initially between three and six pages) that will act as a gallery and showcase of Malcolm’s
photography. This is a really important part of the website as it will be the main way in which the services of his business
will be promoted. You will need to think carefully about how to present the images and how to structure this part of the
site. Bear in mind that in the future Malcolm will want to add many additional photographs to this part of the site.
•An enquiry form. Malcolm would like to provide a way for customers to make enquiries about possible bookings. The user
will need to be able to enter details such their contact details, location and date of the wedding etc. into a HTML form.

Develop a web-based solution for the above scenario and produce a report covering the following tasks.

Task 1 - Server technologies and management services associated with hosting and managing websites (LO1)

1.1 Di 昀昀 erentiate the communication protocols, server hardware, operating systems and web server software with regards to
designing, publishing and accessing a website. De 昀椀 ne the types of DNS and the uses of it, with clari 昀椀 cations on how
domain names are structured.
1.2 Analyze the e 昀昀 ect of search engines on website performance. Provide evidence-based support for improving a site’s
index value and rank through search engine optimization. Identify and explain the common web development
technologies and frameworks. Explain the tools and techniques chosen to the web application and hence justify,
by giving reasons, why a web application is suitable for the given scenario.

Task 2 - Categories website technologies, tools and software used to develop websites (LO2)

2.1 De 昀椀 ne 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.2 Critically compare the di 昀昀 erent between online website creation tools and custom-built sites. Consider Followings:
design 昀氀 exibility, 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.

UNIT_13 - Web Design and Development

 Task 3 - Utilize website technologies, tools and techniques with good design principles to create a multipage website
(LO3)

3.1 Design a suitable web application solution for the given scenario. Provide evidences of the design, multipage
website supported with 昀椀 delity wireframes and a full set of client and user requirements. Use your design
document with appropriate principles, standards and guidelines to produce a branded, multipage website
supported with realistic content.
Note - Synthesize client and the server-side functionalities in the proposed design

3.2 Implement the designed system using PHP, JS and MySQL. Screenshots of important code lines with proper comments
and user interfaces 昀椀 lled with sample data must be attached to the documentation. Apply a database design for the
proposed system and provide the well normalized database design of the proposed system. Critically evaluate the
web design and development process against your design document and analyse any technical challenges you faced
in development.

Task 4 - Create and use a Test Plan to review the performance and design of a multipage website (LO4)

4.1 Analyse the Quality Assurance (QA) process and review how it was implemented during your design
and development stages.
QA process is expected to discover design issues and development errors while testing a product’s user interface (UI)
and gauging the user experience (UX).
4.2 Evaluate the results of your Test Plan and include a review of the overall success of your multipage website; use
this evaluation to explain any areas of success and provide justi 昀椀 ed recommendations for areas that require
improvement. Prepare a user documentation to properly guide the users of the implemented system.
Note: User documentation should be simple and understandable by anyone. Use screenshots and provide stepwise
guidance.

UNIT_13 - Web Design and Development

 Grading Rubric
Grading Criteria Achieved Feedback

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 organized 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 Analyse the impact of common web development technologies and frameworks
with regard to website design, functionality and management.

M2 Review the in 昀氀 uence of search engines on website performance and

provide evidence-based support for improving a site’s index value and rank
through search engine optimisation

D1 Justify the tools and techniques chosen to realize a custom built

website.

LO2 Categories website technologies, tools and

software used to develop websites

P3 Discuss the capabilities and relationships between front-end and back-end

website technologies and explain how these relate to presentation and application
layers.

P4 Discuss the di 昀昀 erences between online website creation tools and custom built
sites with regards to design 昀氀 exibility, performance, functionality, User Experience
(UX) and User Interface (UI).

M3 Analyse a range of tools and techniques available to design and develop a

custom-built website.
LO3 Utilize website technologies, tools and techniques

UNIT_13 - Web Design and Development

with good design principles to create a multipage
website

P5 Create a design document for a branded, multipage website supported with

medium 昀椀 delity wireframes and a full set of client and user
requirements.
P6 Use your design document with appropriate principles, standards and guidelines
to produce a branded, multipage website supported with realistic content.

M4 Justify the multipage website implementation decisions against the design

document.

D2 Evaluate the design and development process of the multipage website

against the design document including any technical challenges faced.

LO4 Create and use a Test Plan to review the

performance and design of a multipage website

P7 Create a suitable Test Plan identifying key performance areas and

use it to review the functionality and performance of your website.
M5 Analyse the Quality Assurance (QA) process and review how it was
implemented during the multipage website design and development stages.
D3 Evaluate the results of the Test Plan and the overall success of the multipage
website with recommendations for improvement.

UNIT_13 - Web Design and Development

 Observation Sheet

Activity Activity Learning Outcome Feedback

No (Pass/ Redo)
1 Explain server technologies and management LO1
services associated with
hosting and managing websites.
2 categorize website technologies, tools and LO2
software used to develop
websites.

3 Utilize website technologies, tools and LO3

techniques with good design
principles to create a multipage website.
4 Create and use a Test Plan to review the LO4
performance and design of a
multipage website.

Assessor Name :…………………………………………….

Date :…………………………………………….
Assessor Signature :
…………………………………………….

Comments:

UNIT_13 - Web Design and Development

Pearson Higher Nationals in
Computing

Faris Faizer
E185475

UNIT_13:
Web Design and Development

UNIT_13 - Web Design and Development

Acknowledgement
This assignment report was made from all the new knowledge and experiments that I have done in the past
semester; this would not have been possible without the unwavering support and strength given to us with
the bare hands of our lecturers. All the blessings, advice and hope they have shown us are unforgettable.
I would like to make this an opportunity to offer a very special thanks to Mrs. Darshani Karunarathne for
everything he has done to help us as a mentor, helping us grow knowledge, imagination, and creativity;
correcting us where we are wrong and inspiring us to experiment new things while working in this semester.
I offer my heartfelt gratitude towards everyone who supported my every step during the past semester. I’d
like to say a big thank you to the ESOFT organization for letting me write for this assignment.

Kind Regards,

Table of Contents

UNIT_13 - Web Design and Development

 Table of Figures............................................................................................................................................17
Task 1 - Server technologies and management services associated with hosting and managing
websites (LO1)............................................................................................................................................18
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...........................18
Communication Protocols........................................................................................................................18
Types of Communication Protocols.........................................................................................................19
Server Hardware.......................................................................................................................................19
Rack-mounted servers..............................................................................................................................19
Blade servers,............................................................................................................................................19
Tower servers,..........................................................................................................................................20
Micro servers............................................................................................................................................20
Mainframe servers....................................................................................................................................20
Operating Systems....................................................................................................................................20
Operating system Types...........................................................................................................................20
Web Server Software................................................................................................................................21
Types of Web Servers (tutorialspoint, n.d.)..............................................................................................21
Define the types of DNS and the uses of it, with clarifications on how domain names are structured....22
What is DNS?...........................................................................................................................................22
How does DNS work?..............................................................................................................................22
Domain name structure.............................................................................................................................23
1.2 Analyze the effect of search engines on website performance. Provide evidence-based support
for improving a site’s index value and rank through search engine optimization. Identify and
explain the common web development technologies and frameworks. Explain the tools and
techniques chosen to the web application and hence justify, by giving reasons, why a web
application is suitable for the given scenario...........................................................................................24
What is a Search Engine?.........................................................................................................................24
How does a search engine work?.............................................................................................................24
Impact of Technical SEO on Website's Performance...............................................................................25
Provide evidence-based support for improving a site’s index value and rank through search engine
optimization..............................................................................................................................................26
Identify and explain the common web development technologies and frameworks............................27
Web Development Technologies..............................................................................................................27
Web Development Programming Languages...........................................................................................28
What is a Framework?..............................................................................................................................29
Types of frameworks................................................................................................................................30

Explain the tools and techniques chosen to the web application and hence justify, by giving reasons,
why a web application is suitable for the given scenario.........................................................................31
Task 2 - Categories website technologies, tools and software used to develop websites (LO2)...........34
2.1 Define the relationships between front-end and back-end website technologies and explain how the
UNIT_13 - Web Design and Development
 front-end and the back-end relate to presentation and application layers................................................34
2.2 Critically compare the different 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...........................................................................................36
Online Website Creation Tools................................................................................................................36
Custom Built Sites....................................................................................................................................36
Select the most suitable tools, techniques and justify your selection with valid reasons.........................39
Task 3 - Utilize website technologies, tools and techniques with good design principles to create a
multipage website (LO3)............................................................................................................................40
3.1 Design a suitable web application solution for the given scenario. Provide evidences of the design,
multipage website supported with fidelity wireframes and a full set of client and user requirements.
Use your design document with appropriate principles, standards and guidelines to produce a branded,
multipage website supported with realistic content.................................................................................40
Home Page....................................................................................................................................................40
HTML code for Home Page.....................................................................................................................41
CSS for Home Page..................................................................................................................................42
JavaScript code for Navigation Sidebar...................................................................................................44
About Page...................................................................................................................................................45
HTML for About Page.............................................................................................................................46
Packages Page...............................................................................................................................................47
HTML for Packages Page.........................................................................................................................48
CSS for Packages Page.............................................................................................................................48
Contact Page.................................................................................................................................................49
HTML for Contact page...........................................................................................................................50
PHP code for Contact Page......................................................................................................................50
CSS for Contact Page...............................................................................................................................51
Gallery Page.................................................................................................................................................51
HTML for Gallery Page...........................................................................................................................53
CSS for Gallery Page................................................................................................................................53
Database design for the Contact Page......................................................................................................55
Critically evaluate the web design and development process against your design document and
analyse any technical challenges you faced in development...................................................................56

Homepage Design and Navigation:..........................................................................................................56

About Malcolm Page................................................................................................................................56
Pricing Information...................................................................................................................................57
Photography Gallery:................................................................................................................................57
Enquiry Form............................................................................................................................................57
Overall Evaluation:...................................................................................................................................57
4.1 Analyse the Quality Assurance (QA) process and review how it was implemented during your
UNIT_13 - Web Design and Development
 design and development stages..................................................................................................................58
QA process is expected to discover design issues and development errors while testing a product’s
user interface (UI) and gauging the user experience (UX).....................................................................58
Quality Assurance (QA)...........................................................................................................................58
Client requirements and expectations.......................................................................................................58
4.2 Evaluate the results of your Test Plan and include a review of the overall success of your
multipage website; use this evaluation to explain any areas of success and provide justified
recommendations for areas that require improvement. Prepare a user documentation to properly guide
the users of the implemented system........................................................................................................59
User Testing..............................................................................................................................................59
Lighthouse Test........................................................................................................................................61
Performance Testing.................................................................................................................................61
4.2 Evaluate the results of your Test Plan and include a review of the overall success of your
multipage website; use this evaluation to explain any areas of success and provide justified
recommendations for areas that require improvement. Prepare a user documentation to properly
guide the users of the implemented system..............................................................................................63
Summary of the Key Findings...................................................................................................................63
Test Case...................................................................................................................................................64
Overall Evaluation........................................................................................................................................66
Academic Experience...................................................................................................................................66
References.................................................................................................................................66

Table of Figures

Figure 1Domain Name Structure......................................................................................................................22

Figure 2 Search engine Crawlers......................................................................................................................24

UNIT_13 - Web Design and Development

Figure 3 VS Code.............................................................................................................................................31
Figure 4 Xampp Server.....................................................................................................................................31
Figure 5 Wireframe of Home Page................................................................................................................39
Figure 6 Home Page Design............................................................................................................................40
Figure 7 Coding of the Home Page................................................................................................................40
Figure 8 Home Page Style 1.............................................................................................................................41
Figure 9 Home Page Style 2.............................................................................................................................41
Figure 10 Navigation Side bar..........................................................................................................................42
Figure 11 Navigation Bar Styles......................................................................................................................42
Figure 12 JavaScript for the navigation slider..................................................................................................43
Figure 13 About Page.......................................................................................................................................44
Figure 14 Wireframe of About Page..............................................................................................................44
Figure 15 Code for About Page........................................................................................................................45
Figure 16 CSS for About Page.........................................................................................................................45
Figure 17 Wireframe for Packages Page..........................................................................................................46
Figure 18 Packages Page..................................................................................................................................46
Figure 19 Coding for Packages Page................................................................................................................47
Figure 20 CSS for Packages page.....................................................................................................................47
Figure 21 CSS for packages Page.....................................................................................................................48
Figure 22 Wireframe for Contact Us................................................................................................................48
Figure 23 HTML for Contact Page...................................................................................................................49
Figure 24 PHP code for Contact Page..............................................................................................................49
Figure 25 CSS for Contact page.......................................................................................................................50
Figure 26 Wireframe for Gallery Page.............................................................................................................50
Figure 27 Gallary page.....................................................................................................................................51
Figure 28 HTML for Gallery Page...................................................................................................................51
Figure 29 CSS for Gallery Page.......................................................................................................................52
Figure 30 CSS for Gallery Page.......................................................................................................................52
Figure 31 CSS for Gallery Page.......................................................................................................................53
Figure 32 CSS for Gallery Page.......................................................................................................................53
Figure 33 Overall Performance Test................................................................................................................57
Figure 34 Passed Audits on Accessibility test..................................................................................................57
Figure 35 Best Practices Results......................................................................................................................58

Task 1 - Server technologies and management services associated with hosting and
managing websites (LO1)

UNIT_13 - Web Design and Development

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.

In the realm of website design and access, there exist distinct differences among communication protocols,
server hardware, operating systems, and web server software. These differences are crucial to understand
as they collectively shape the functionality, performance, and accessibility of websites. Let's delve into
these disparities in simpler terms.

Communication Protocols

Internet Protocols are rules governing internet communication and data exchange. They ensure that both
the sender and receiver follow the same rules for effective data transmission. These protocols are akin
to the vocabulary and grammar of a language, necessary for communication.

The internet and other networks function by breaking data into small packets. Each protocol has its rules
for organizing these packets. Protocols are essential for managing data flow and access control, preventing
data loss due to differences in data transfer rates. They also determine which nodes can access the
communication channel at a given time.

An IP address, representing an Internet Protocol address, is a unique identifier for devices on a network. It
helps distinguish between different devices, routers, and websites on the internet, enabling efficient
communication between source and destination (geeksforgeeks, n.d.).

Types of Communication Protocols

▪ TCP/IP(Transmission Control Protocol/ Internet Protocol)

▪ SMTP(Simple Mail Transfer Protocol)
▪ PPP(Point-to-Point Protocol)
▪ FTP (File Transfer Protocol)
▪ SFTP(Secure File Transfer Protocol)
▪ HTTP(Hyper Text Transfer Protocol)
▪ HTTPS(HyperText Transfer Protocol Secure)
▪ TELNET(Terminal Network)
▪ POP3(Post Office Protocol 3)
▪ IPv4
▪ IPv6
▪ ICMP
▪ IMAP
▪ SSH

Server Hardware

Server hardware, part of a server system, is the physical component responsible for processing, managing,
and storing data, serving as a resource provider to other devices on a network. It is designed for high
processing power, reliability, and security to support critical business functions and multiple users and
applications simultaneously. Server hardware differs from standard computer hardware in its optimization

UNIT_13 - Web Design and Development

for concurrent use, offering greater processing power, memory capacity, and storage to accommodate
multiple users accessing the system concurrently ([Link], n.d.).

Rack-mounted servers - are compact and scalable solutions commonly used in data centers and server
rooms, making them suitable for growing businesses. They come in various sizes and hardware
configurations, making them a good choice for new business owners.

Blade servers, on the other hand, are high-density servers designed to fit within rack enclosures. They are
favored by organizations needing substantial computing power and flexibility. Blade servers have a smaller
form factor, consume less power, and support hot swapping, making them popular among businesses.

Tower servers, which are standalone servers for desks or floors, cater to small to medium-sized businesses'
daily operations. They offer scalability and reliability at a lower cost compared to rack-mounted or blade
servers.

Micro servers, designed for low power consumption, are suitable for small businesses with limited
resources. They are cost-effective and ideal for simpler applications.

Mainframe servers are large, powerful systems serving multiple users and applications simultaneously.
Typically used by large organizations or government agencies, they provide high computing power,
reliability, and security.

In summary, rack-mounted servers are versatile and suitable for web hosting and database management.
Blade servers excel in high-density computing, while tower servers serve well in applications like file and
email servers. Micro servers are compact and low-power, ideal for basic functions, and mainframe servers
are robust and reliable, suited for mission-critical tasks.

Operating Systems

Operating systems, often referred to as OS, are essential software that manage a computer's hardware and
provide a platform for running various software programs. They act as intermediaries between users,
applications, and the computer's physical components, allowing users to interact with the computer
effectively ([Link], n.d.).

Operating system Types

▪ Windows: Developed by Microsoft, Windows is widely used on personal computers and

servers, with versions such as Windows 10 and Windows Server.

UNIT_13 - Web Design and Development

 ▪ macOS: Created by Apple, macOS is the OS for Mac computers, known for its user-
friendly interface and seamless integration with other Apple devices.

▪ Linux: An open-source OS kernel used in various distributions (distros) like Ubuntu, CentOS,
and Debian, popular for servers and as an alternative to proprietary OSs.

▪ Unix: Unix, the precursor to Linux, serves as the foundation for various operating
systems, including macOS.

▪ Android: An OS based on the Linux kernel, Android is employed in smartphones and

tablets, developed by Google.

▪ iOS: Apple's mobile operating system used in iPhones and iPads.

Web Server Software

What Is a Web Server?

A web server is a computer responsible for storing and serving web pages, allowing them to be viewed on
the internet. When a user accesses a website, the web server retrieves the necessary files and sends them to
the user's web browser, enabling interaction with the site (hostinger, n.d.).

A web server works by receiving and processing requests from web browsers. When a user enters a
website's URL or clicks a link, the web server retrieves the requested resources, which can be static or
dynamically generated. It then constructs an HTTP response, including the requested content and response
headers, and sends it back to the browser. The browser receives and renders the web page for user
interaction. Further interactions trigger new requests to the web server, allowing users to access and
interact with websites and web applications on the internet.

Types of Web Servers (tutorialspoint, n.d.).

Apache HTTP Server

This is the most popular web server in the world developed by the Apache Software Foundation. Apache
web server is an open-source software and can be installed on almost all operating systems including
Linux, Unix, Windows, FreeBSD, Mac OS X and more. About 60% of the web server machines run the
Apache Web Server.

Lighttpd

The lighttpd, pronounced lighty is also a free web server that is distributed with the FreeBSD operating
system. This open-source web server is fast, secure and consumes much less CPU power. Lighttpd can also
run on Windows, Mac OS X, Linux, and Solaris operating systems.

UNIT_13 - Web Design and Development

Sun Java System Web Server

This web server from Sun Microsystems is suited for medium and large websites. Though the server is
free it is not open source. It, however, runs on Windows, Linux and Unix platforms. The Sun Java System
web server supports various languages, scripts and technologies required for Web 2.0 such as JSP, Java
Servlets, PHP, Perl, Python, Ruby on Rails, ASP and ColdFusion etc.

Jigsaw Server

Jigsaw (W3C's Server) comes from the World Wide Web Consortium. It is open source and free and can
run on various platforms like Linux, Unix, Windows, Mac OS X Free BSD etc. Jigsaw has been written in
Java and can run CGI scripts and PHP programs.

Define the types of DNS and the uses of it, with clarifications on how domain names are structured.

What is DNS?

The Domain Name System (DNS) serves as the internet's equivalent of a phonebook. While humans access
websites using domain names like [Link] or [Link], web browsers communicate with the
internet using numerical Internet Protocol (IP) addresses. DNS functions by translating these user-friendly
domain names into IP addresses, enabling browsers to retrieve internet resources (cloudflare, p. 2023).

Each internet-connected device possesses a unique IP address that allows other machines to locate it. DNS
servers perform this translation, sparing individuals from memorizing complex IP addresses, whether in the
traditional IPv4 format like [Link] or the newer alphanumeric IPv6 format like
[Link]. In essence, DNS simplifies internet navigation by associating memorable
domain names with numerical IP addresses.

How does DNS work?

DNS resolution is the process of converting a user-friendly hostname (e.g., [Link]) into a
computer-readable IP address (e.g., [Link]) to locate internet devices. Each device on the internet
has a unique IP address, similar to a street address for homes (cloudflare, n.d.).

When a user wants to access a webpage, a translation is needed between what the user types in their web
browser (e.g., [Link]) and the machine-friendly IP address to find the webpage. This translation
occurs automatically and doesn't require user intervention.

The DNS resolution process involves various hardware components that facilitate the translation, but from
the user's perspective, it happens "behind the scenes" without any additional user interaction beyond the
initial request.

Top-level domains.

UNIT_13 - Web Design and Development

Every domain name undergoes registration with the Internet Corporation for Assigned Names and
Numbers (ICANN), following which it receives an appended suffix denoting its top-level domain (TLD)
affiliation, also referred to as the "parent domain" or "domain extension." Several widely recognized
TLDs include (mailchimp, n.d.).

▪ ".gov" designates government websites (e.g., [Link]).

▪ ".mil" signifies military websites (e.g., [Link]).
▪ ".com" represents commercial businesses (e.g., [Link]).
▪ ".edu" denotes educational institutions (e.g., [Link]).
▪ ".ca" is indicative of Canadian websites (e.g., [Link]).
▪ ".org" is associated with organizations (e.g., [Link]).

In the United States, three-letter TLDs are commonly utilized, while other regions like the European Union
and Canada often employ two-letter TLDs.

Domain name structure

Domain names are structured hierarchically, with each part serving a specific purpose. Let's use the
example website "[Link]" to break down its structure:

1. Top-Level Domain (TLD): ".lk" - The rightmost part, ".lk," signifies the top-level domain and
indicates the geographical or organizational affiliation. In this case, ".lk" represents Sri Lanka.

2. Second-Level Domain (SLD) : "esoft" - The SLD is located to the left of the TLD and typically
represents the specific entity, organization, or brand. In this example, "esoft" likely stands for the entity
or organization associated with the website.

3. Subdomain: "www" - Subdomains are optional and can appear before the SLD. They further specify a
particular section or service within the domain. "www" is a commonly used subdomain that indicates
the World Wide Web.

So, in summary, the domain name "[Link]" is structured with the TLD ".lk" indicating Sri Lanka,
the SLD "esoft" representing the specific entity, and the subdomain "www" signifying the World Wide
Web section of the website. This hierarchical structure allows for organized and standardized naming on
the internet.

UNIT_13 - Web Design and Development

Figure 1Domain Name Structure
 1.2 Analyze the effect of search engines on website performance. Provide evidence-based
support for improving a site’s index value and rank through search engine
optimization. Identify and explain the common web development technologies and
frameworks. Explain the tools and techniques chosen to the web application and
hence justify, by giving reasons, why a web application is suitable for the given
scenario.

What is a Search Engine?

A search engine is internet software that retrieves information from a database based on a user's query,
providing a list of relevant results. Various search engines exist, each with unique features. Archie was
the first search engine, primarily used for FTP file searches, while Veronica was the first text-based
search engine. Google is the most popular search engine today, but others like AOL, [Link], Baidu,
Bing, DuckDuckGo, and Yahoo are also widely used.

How does a search engine work?

A search engine works by continuously crawling and indexing web pages across the internet. This
process involves automated bots, known as web crawlers or spiders, that follow links from one page to
another, collecting data about each page they encounter. Once crawled, the search engine indexes the
content, creating a vast database of information. When a user enters a query, the search engine's
algorithms analyze the indexed data to determine the most relevant results.

This relevance is determined based on various factors, including keyword matching, the quality and
authority of the web pages, user engagement metrics, and more. The search engine then ranks these
results and presents them to the user, typically in order of perceived relevance, allowing users to find
the most suitable web pages based on their search intent.

UNIT_13 - Web Design and Development

 Figure 2 Search engine Crawlers

Impact of Technical SEO on Website's Performance

Technical SEO encompasses critical factors that impact a website's search engine discoverability and
performance. Key components include optimizing website speed, ensuring mobile compatibility,
facilitating efficient crawling and indexing, implementing secure HTTPS, using structured data markup,
addressing canonicalization issues, optimizing media files, utilizing XML sitemaps, maintaining user-
friendly URLs, and enhancing overall page speed and performance (tutorialspoint, 2023).

Website Structure

The organization and layout of a website play a significant role in aiding search engine crawling and
comprehension. Proper use of headings (H1, H2, etc.) and subheadings (subh1, subh2, etc.) helps create a
coherent content structure.

URL Structures

The way a website's URLs are constructed is crucial as search engines use them to understand a site's
hierarchy and page relationships. A well-structured and consistent URL scheme improves search engines'
ability to interpret a page's content and its context within the website.

Meta Tags
Meta tags serve to inform search engines about a page's content. The title tag, which appears as the
clickable headline in search engine results, and the meta description, providing a summary of the page's
content, can boost a website's click-through rate (CTR) from search results when optimized correctly.

Mobile Friendliness - Ensuring a website is compatible with mobile devices has become increasingly
important with the surge in smartphone and tablet usage for web access. This involves making all content
and features accessible on mobile devices and employing responsive design to adapt to different screen
sizes.

Page Speed - The loading speed of a website significantly impacts its search engine rankings. A fast-
loading site not only enhances user experience but also positively affects its position in search engine
results.

Security - Major search engines are paying more attention to website security. Implementing HTTPS
(Hypertext Transfer Protocol Secure) encryption enhances data security between a browser and a website,
potentially leading to improved search engine rankings.

Accessibility - Search engines are giving preference to websites that prioritize accessibility
features, ensuring that people with various impairments can access and use the site effectively.

UNIT_13 - Web Design and Development

Provide evidence-based support for improving a site’s index value and rank through search engine
optimization.

SEO, which stands for "search engine optimization," can be explained simply as the practice of enhancing
your website to boost its prominence on search engines like Google and Microsoft Bing. This improvement
aims to make your site more visible whenever individuals conduct searches for specific topics or
information (searchengineland, n.d.), ([Link], n.d.).

Publishing Relevant, Authoritative Content

High-quality, authoritative content serves as the primary driver of search engine rankings, and no viable
substitute exists for exceptional content. This holds especially true in the context of SEO marketing.
Crafting top-notch content tailored to your target audience boosts website traffic, subsequently enhancing
your site's authority and relevance. Sharpen your web writing skills to establish yourself as an authority on
your chosen topic.

Keywords

Identify and target specific keyword phrases for each authoritative content page on your website. Consider
how your users might search for that particular page, using search terms like the examples provided. For
ranking well for multiple keyword phrases, it is imperative to create separate webpages for each targeted
phrase.

Keyword Placement

Strategically incorporate keywords in page URLs, titles, headings, and subheadings to improve search
engine rankings. However, maintain a natural and user-friendly approach to enhance readability and user
experience.

Content

Content quality profoundly influences search engine rankings. Repeatedly employ your chosen keyword
phrase within the page, ideally in opening and closing paragraphs and periodically throughout the content.
Maintain authority and credibility by linking to relevant sources and additional information within and
beyond your website.

Regular Content Updates

Continuously refreshed content is regarded as a significant indicator of a site's relevance by search

engines. Implement a regular content audit schedule and make necessary updates. Blogging can also boost
rankings by providing keyword-rich updates and interlinking with related webpages.

Metadata

UNIT_13 - Web Design and Development

Metadata, found between the <head> tags of each webpage, plays a critical role. Title metadata is
responsible for browser page titles and search engine headlines and is of utmost importance. Description
metadata serves as a concise, enticing description, while keyword metadata, although rarely used, can
include relevant phrases.

Link-Worthy Site:

Content-rich, authoritative, unbiased webpages that facilitate visitor learning are most likely to attract links
from other websites, thereby improving SEO. Enhance authority and credibility by adding relevant links
within text using descriptive anchor text.

Alt Tags

Always provide alt tags, or alternative text descriptions, for image and video media. These tags enable
search engines to locate your page, ensuring accessibility for text-only browsers and screen reader users.
In summary, adhering to these SEO practices enhances a website's potential for improved search engine
rankings and visibility. Quality content, keyword optimization, regular updates, metadata utilization, link-
worthiness, and alt tags are integral components of a successful SEO strategy.

Identify and explain the common web development technologies and frameworks.

Web Development Technologies

Web development technologies encompass a diverse array of tools, programming languages, frameworks,
libraries, and software employed by developers for the creation of websites and web applications. These
resources collectively support the design, development, and functionality of web-based projects.

Web Development Programming Languages

Web development programming languages are languages used by developers to create websites and web
applications. These languages are essential for building the frontend (client-side) and backend (server-side)
components of web-based projects.

Frontend Programming Languages

Frontend programming languages are the building blocks of the visual and interactive elements you see
and interact with on websites and web applications.

HTML (Hypertext Markup Language)

HTML is used to structure the content of web pages, defining elements like headings, paragraphs, links,
images, and forms.

CSS (Cascading Style Sheets)

CSS is employed for styling web pages, controlling layout, fonts, colors, and overall presentation.

UNIT_13 - Web Design and Development

JavaScript
JavaScript is a versatile scripting language used for adding interactivity and functionality to web pages. It
enables dynamic content, client-side validation, and AJAX requests.

TypeScript
TypeScript is a statically typed superset of JavaScript that enhances code quality and maintainability,
especially in large-scale projects.

Backend Programming Languages

Backend programming languages are the hidden heroes of web development. They power the server-side
of websites and web applications, handling data processing, storage, and server interactions.

Python
Python is known for its readability and versatility. It is used with frameworks like Django and Flask for
web application development.

JavaScript ([Link])
[Link] allows JavaScript to run on the server side, enabling full-stack JavaScript development.

Ruby
Ruby, often paired with the Ruby on Rails framework, is valued for its developer-friendly syntax and rapid
development capabilities.

PHP
PHP is a server-side scripting language primarily used for web development. It is compatible with various
web frameworks.

Java
Java's platform independence and strong ecosystem make it suitable for building enterprise-level web
applications.

C#
Developed by Microsoft, C# is used with [Link] for building web applications on the Windows
platform.

Database Query Languages

Database query languages are specialized languages used to interact with databases. They enable users and
applications to retrieve, manipulate, and manage data stored in a database.

SQL (Structured Query Language), which is used for relational databases. SQL allows you to perform
tasks like retrieving specific data, inserting new records, updating existing ones, and deleting data, making
it a fundamental tool for data management in various applications and industries.

UNIT_13 - Web Design and Development

What is a Framework?

A framework is a pre-established structure or set of tools and guidelines that provide a foundation for
developing software applications. It offers a reusable and organized framework for developers to build
upon, which can streamline the development process, improve code quality, and enhance overall
efficiency. Frameworks typically include libraries, APIs (Application Programming Interfaces), and a set
of conventions or best practices that help developers solve common problems and maintain consistency in
their applications (codecademy, n.d.).

Frameworks are structured tools used in software development that offer several key advantages. They
provide abstraction, simplifying complex functionalities and allowing developers to focus on application-
specific logic rather than low-level details.

Frameworks offer reusable code modules, reducing the need to start from scratch in every project. They
enforce structured architectures like the Model-View-Controller pattern, promoting a clear separation of
concerns within applications. Frameworks facilitate scalability, making it easier to expand and add new
features as projects evolve. They promote consistency in coding practices, aiding collaboration among
developers. Additionally, many frameworks come equipped with built-in security features to protect
against common vulnerabilities, enhancing the overall reliability of applications.

Types of frameworks

Web application frameworks

Ruby on Rails
A framework for building web applications using the Ruby programming language. Known for its
convention over configuration (CoC) and don't repeat yourself (DRY) principles.

Django
A high-level Python web framework that emphasizes rapid development and clean, pragmatic design.

Angular
A popular JavaScript framework by Google for building dynamic, single-page web applications.

React
A JavaScript library by Facebook for creating user interfaces in web applications.

[Link]
A progressive JavaScript framework for building user interfaces incrementally.

UNIT_13 - Web Design and Development

Mobile development frameworks

React Native
Allows developers to build mobile apps for iOS and Android using React and JavaScript.

Flutter
A Google UI toolkit for building natively compiled applications for mobile, web, and desktop from a single
codebase.

Xamarin
A Microsoft-owned framework for building cross-platform mobile apps using C# and .NET.

Backend and API Frameworks

[Link]
A minimal and flexible [Link] web application framework for building web and API servers.

Spring Boot
A Java-based framework for building microservices and web applications.

Laravel
A PHP framework for web application development with an elegant syntax.

Explain the tools and techniques chosen to the web application and hence justify, by giving reasons, why a
web application is suitable for the given scenario.

Web Applications

A web application is a software application that leverages web browsers and web-based technology to
execute functions via the Internet.

Web applications employ a blend of server-side scripts such as PHP and ASP to manage the storage and
retrieval of data, along with client-side scripts like JavaScript and HTML to display information to users.
This enables users to engage with the company through features like online forms, content management
systems, and shopping carts. Additionally, these applications empower employees to generate documents,

UNIT_13 - Web Design and Development

 share data, collaborate on projects, and work on shared documents without being constrained by location
or device.

The website aims to showcase Malcolm's photography skills and facilitate customer inquiries for hiring his
services. The chosen tools include Visual Studio Code (VS Code) for code development and
phpMyAdmin for database management.

The development of a web application for Malcolm Lismore's photography business presents a unique set
of requirements, including the need for an engaging interface, a gallery to showcase photography work,
and an inquiry form for potential clients. To meet these requirements, the following tools and techniques
have been chosen.

Tools

1. Visual Studio Code (VS Code)

Visual Studio Code, also commonly referred to as VS Code, is a source-code editor made by Microsoft
with the Electron Framework, for Windows, Linux and macOS. Features include support for debugging,
syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git.

Reason for use Figure 3 VS Code

Versatility

VS Code is an open-source code editor known for its versatility and adaptability. It provides a
robust platform for developing web applications while supporting various programming languages
and web technologies.
Ease to Use

VS Code's user-friendly interface and extensive library of extensions make it accessible to developers of
varying skill levels, ensuring efficient development.

2. XAMPP Server

XAMPP is a free and open-source cross-platform web server solution stack package developed by Apache
Friends, consisting mainly of the Apache HTTP Server, MariaDB database, and interpreters for scripts
written in the PHP and Perl programming languages.

UNIT_13 - Web Design and Development

 Figure 4 Xampp Server

Server-Side and Client-Side Scripts

The use of server-side scripts (e.g., PHP) for handling inquiries and client-side scripts (e.g., JavaScript and
HTML) for presenting photography portfolios aligns with industry best practices. Server-side scripts ensure
secure data handling, while client-side scripts enable dynamic and visually engaging user interfaces.

Database Integration

The inclusion of a robust database management tool like phpMyAdmin is vital for creating and managing
the database required to store client inquiry data securely. This facilitates the capture and efficient
management of customer information, ensuring seamless communication between the photographer and
potential clients.

The selection of PHP, JavaScript, HTML, and CSS for web application development is justified by their
unique roles and capabilities. PHP serves as a robust server-side scripting language, essential for data
processing and database integration. JavaScript, a client-side scripting language, enhances interactivity and
responsiveness, enriching the user experience. HTML forms the structural backbone of web content,
offering semantic markup for accessibility and SEO benefits. CSS complements HTML by enabling precise
styling and layout control, ensuring consistent and visually appealing designs.

The chosen tools and techniques, Visual Studio Code (VS Code) for code development and phpMyAdmin
for database management, are well-suited for the development of Malcolm Lismore's photography business
website. VS Code offers a versatile, user-friendly, and cross-platform development environment, while
phpMyAdmin provides essential database management capabilities.

In the ever-evolving digital landscape, the use of such tools and techniques not only facilitates web
development but also contributes to the success and growth of businesses, enabling them to adapt to
changing customer needs and market dynamics. Malcolm Lismore's decision to leverage these tools for his
photography business is strategic, positioning him to thrive in the competitive world of online promotion
and customer engagement.

UNIT_13 - Web Design and Development

By combining the power of VS Code for coding and phpMyAdmin for database management, Malcolm's
website will effectively showcase his photography skills, promote his services, and streamline customer
inquiries, ensuring a robust and engaging online presence for his photography business.

Task 2 - Categories website technologies, tools and software used to develop websites (LO2)

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.

We have discussed, what are the tools and techniques we used to develop a website. Let’s look over how
the front-end and the back-end relate to presentation and application layers.

In contemporary web development, the seamless functioning of web applications is contingent upon the
intricate relationship between front-end and back-end website technologies. These two distinct facets of
web development collaboratively contribute to the presentation and application layers, each playing a
pivotal role in user interaction and data management (geeksforgeeks, n.d.).

Front-end development, often known as client-side development, encompasses a variety of technologies,

languages, and methodologies used to create the user interfaces and presentation layers of websites and
web applications. It involves the manipulation and rendering of content within web browsers, catering to
user interactions and visual aesthetics.

The presentation layer of a web application serves as the entry point for users. Front-end development
plays a pivotal role in shaping this layer through:

User Interface Creation

Front-end developers are responsible for designing and implementing visually appealing and user-friendly
user interfaces to ensure an intuitive user experience.

Responsive Design

They ensure that web applications seamlessly adapt to different screen sizes and devices, ensuring a
consistent user experience across platforms.

Performance Optimization

Front-end optimization techniques, such as compressing images and minimizing code, are employed to
enhance the speed and efficiency of web pages.

Accessibility

UNIT_13 - Web Design and Development

 Front-end developers prioritize accessibility by adhering to web standards, making web content accessible
to all users, including those with disabilities, to facilitate seamless interaction.

front-end development involves various tools and techniques to craft engaging user interfaces and ensure
that the presentation layer of web applications is both aesthetically pleasing and functional.

The presentation layer of a web application serves as the entry point for users, and front-end development
plays a pivotal role in shaping this layer through several key aspects-

User Interface Creation

Front-end developers are responsible for designing and implementing user interfaces that are not only
visually appealing but also user-friendly, ensuring an intuitive and engaging experience for website visitors.

Responsive Design

They ensure that web applications seamlessly adapt to various screen sizes and devices, guaranteeing a
consistent and responsive user experience, regardless of the device or platform used.

Performance Enhancement

Front-end developers employ optimization techniques such as image compression and code minification to
improve the speed and efficiency of web pages, ensuring faster loading times and a smoother browsing
experience.

Accessibility Focus

Front-end developers prioritize accessibility by adhering to established web standards. This commitment
ensures that all users, including those with disabilities, can easily access and interact with web content,
promoting inclusivity and usability.

Front-end development holds a critical role in web development as it acts as a crucial link between design
and user experience. It is responsible for molding the presentation layer of web applications, guaranteeing
content accessibility, visual attractiveness, and interactivity. Front-end developers utilize a wide range of
tools and technologies to create user interfaces that captivate and actively engage users, thereby making a
substantial contribution to the achievements of web applications in the contemporary digital environment.

UNIT_13 - Web Design and Development

2.2 Critically compare the different 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.

Online Website Creation Tools

Online website creation tools, often referred to as website builders, are web-based platforms or software
applications that allow individuals and businesses to create websites without the need for in-depth coding
or web development skills. These tools are designed to simplify the process of website creation and make
it accessible to a broader audience.

Custom Built Sites

Custom-built websites, also known as bespoke or tailor-made websites, are websites that are designed and
developed from the ground up to meet the specific and unique needs of a particular individual, business,
organization, or project. These websites are not based on pre-made templates or generic designs but are
instead crafted to cater to the precise requirements, goals, and branding of the client.

These two are different according to design flexibility, performance, functionality, User Experience (UX)
and User Interface (UI).

Design Flexibility

Pros Cons
Website builders offer a range of
templates that provide a starting point Design customization is limited by the
for design. capabilities of the chosen template
Online Website
Creation Tools Users can customize templates by Advanced or highly unique designs may
changing colors, fonts, and layouts. not be achievable without coding skills.
Drag-and-drop interfaces make it easy
to rearrange elements on the page.
Unlimited design flexibility; you can
Requires a higher budget and more time
create a unique design tailored to your
for design and development.
brand
Design changes and updates may also
Custom-Built Design choices are not constrained by
require coding skills or professional
Websites pre-made templates.
assistance.
A professional web designer can create
a design aligned with specific
objectives
Performance

UNIT_13 - Web Design and Development

 Pros Cons

Hosting is often optimized for Performance may not be as finely tuned as

performance by the website builder custom-built sites for specific needs.
platform.
Online Website
Creation Tools
Basic performance optimizations are Limited control over server infrastructure
usually handled by the platform. and backend optimization.

Performance can be finely tuned for Requires technical expertise to optimize and
specific requirements. maintain performance.
Custom-Built Developers have full control over server May involve higher ongoing maintenance
Websites infrastructure and optimizations. costs.

Functionality

Pros Cons

Many website builders offer a range of

Limited in terms of highly custom or
built-in features and integrations.
specialized functionality.
Online Website
Creation Tools Easier to add common features like May not support all third-party
contact forms, galleries, and e- integrations.
commerce.

Can incorporate any custom functionality

Development time and costs can be
required for a specific project.
significantly higher for complex features.
Custom-Built
Websites Fully adaptable to unique business Maintenance and updates may require
processes and needs. ongoing development work.

UNIT_13 - Web Design and Development

 User Experience (UX)

Pros Cons
Typically offer responsive design Limited control over user experience, especially
templates for good mobile UX. for highly unique or complex projects.
Online Website User-friendly interfaces make it May not support advanced UX optimization
Creation Tools easier to create an intuitive UX. techniques.

Full control over crafting a unique

Requires expertise in UX design and development.
and optimized user experience.
Custom-Built Can implement advanced UX design
Development and testing may take longer.
Websites and interaction elements.

User Interface (UI)

Pros Cons

Templates often come with pre-designed UI UI customization is limited to the

elements. capabilities of the chosen template.
Online Website
Creation Tools UI design can be customized within the May not accommodate highly unique or
template's constraints. unconventional UI designs.

Complete control over UI design, allowing Requires a skilled UI designer to create a

for highly customized interfaces. customized interface.
Custom-Built UI can be tailored to the specific needs and Design and development may take longer
Websites branding of the project. due to the custom nature.

Select the most suitable tools, techniques and justify your selection with valid reasons.

UNIT_13 - Web Design and Development

The choice to use PHP, JavaScript, HTML, and CSS in web application development is justified due to
their distinct roles and capabilities. PHP is a strong server-side scripting language, crucial for data
processing and integrating databases. JavaScript, a client-side scripting language, boosts interactivity and
responsiveness, enhancing the user experience. HTML provides the foundational structure for web content,

UNIT_13 - Web Design and Development

offering semantic markup for accessibility and SEO benefits. CSS complements HTML by allowing
precise control over styling and layout, ensuring consistent and visually appealing designs.

The selected tools and techniques, Visual Studio Code (VS Code) for coding and phpMyAdmin for
database management, are well-suited for developing Malcolm Lismore's photography business website.
VS Code offers a versatile, user-friendly, and cross-platform development environment, while
phpMyAdmin provides essential database management capabilities.

In the constantly evolving digital landscape, these tools and techniques not only simplify web development
but also contribute to the success and growth of businesses by enabling them to adapt to changing customer
needs and market dynamics. Malcolm Lismore's decision to utilize these tools for his photography business
is strategic, positioning him for success in the competitive world of online promotion and customer
engagement.

By harnessing the power of VS Code for coding and phpMyAdmin for database management, Malcolm's
website will effectively display his photography skills, promote his services, and streamline customer
inquiries, ensuring a robust and engaging online presence for his photography business.

Task 3 - Utilize website technologies, tools and techniques with good design principles to
create a multipage website (LO3)

3.1 Design a suitable web application solution for the given scenario. Provide evidences of the design,
multipage website supported with fidelity wireframes and a full set of client and user requirements. Use
your design document with appropriate principles, standards and guidelines to produce a branded,
multipage website supported with realistic content.

Exploring the website design and functionalities.

Content

✓ Home Page
✓ About Page
✓ Packages
✓ Contact
✓ Gallery

Home Page

Commonly most designers focus on the home page design because client’s first impression on the website
should be attractive.

UNIT_13 - Web Design and Development

 Figure 5 Wireframe of Home Page
o I have used to design the home page as simple and at the same time should be attractive.
o On the top right corner, I have designed a navigation side bar so It can serve as a navigation
point, directing visitors to other relevant sections or pages of the website, such as contact
information, About, or Gallery.

Figure 6 Home Page Design

UNIT_13 - Web Design and Development

HTML code for Home Page

Figure 7 Coding of the Home Page

CSS for Home Page

Figure 8 Home Page Style 1

UNIT_13 - Web Design and Development

 Figure 9 Home Page Style 2

Figure 10 Navigation Side bar

UNIT_13 - Web Design and Development

 Figure 11 Navigation Bar Styles

JavaScript code for Navigation Sidebar

Above mentioned figure 11 Figure 12 JavaScript for the navigation slider

shows the coding for navigation
bar slider. The navigation bar displayed as hidden and when we click on the button it will open moving
into right.

The navigation bar, often referred to as a navbar or menu bar, is a fundamental element in web design and
user interface (UI) development. Its importance lies in several key aspects that enhance the usability,
accessibility, and overall user experience of a website.

UNIT_13 - Web Design and Development

About Page

I this about page we can explore the photographer’s motive and working style and more information’s
about the photography.

Figure 13 Wireframe of About Page

UNIT_13 - Web Design and Development

HTML for About Page

Figure 15 Code for About Page

Figure 16 CSS for About Page

UNIT_13 - Web Design and Development

Packages Page

To offer clear and transparent pricing information to potential customers, helping them understand the cost
of products or services.

Figure 17 Wireframe for Packages Page

Figure 18 Packages Page

UNIT_13 - Web Design and Development

HTML for Packages Page

Figure 19 Coding for Packages Page

CSS for Packages Page

Figure 20 CSS for Packages page

UNIT_13 - Web Design and Development

 Figure 21 CSS for packages Page

Contact Page

A contact us form is a web form that allows visitors to your website to contact you with their questions,
comments, or requests. It is a valuable tool for businesses of all sizes, as it allows you to connect with your
customers and prospects directly.

Figure 22 Wireframe for Contact Us

UNIT_13 - Web Design and Development

HTML for Contact page

Figure 23 HTML for Contact Page

PHP code for Contact Page

Figure 24 PHP code for Contact Page

UNIT_13 - Web Design and Development

CSS for Contact Page

Figure 25 CSS for Contact page

Gallery Page

The primary purpose of a gallery is to display the photographer's portfolio of work. It provides a visually
appealing way for visitors to view and appreciate the photographer's photographs, showcasing their
skills and style.

Figure 26 Wireframe for Gallery Page

UNIT_13 - Web Design and Development

HTML for Gallery Page

Figure 27 Gallary
page

Figure 28 HTML for Gallery Page

CSS for Gallery Page

Figure 29 CSS for Gallery Page

UNIT_13 - Web Design and Development

 Figure 30 CSS for Gallery Page

Figure 31 CSS for Gallery Page

UNIT_13 - Web Design and Development

 Figure 32 CSS for Gallery Page

"team" section with profile pictures, including hover and focus effects to reveal additional information and
darken the images.

It also incorporates background images, gradients, and transitions to create visually appealing profiles that
come to life when interacted with, giving the website a modern and immersive feel. Additionally, it
implements responsive design techniques, ensuring the content adjusts well to different screen sizes.

Database design for the Contact Page

A contact us form is a web form that allows visitors to your website to contact you with their questions,
comments, or requests.

phpMyAdmin provides an intuitive user interface to export database(s).

When a client enters their request, it allows database to store the data also we can export if needed.

UNIT_13 - Web Design and Development

 Figure 33 PhpMyAdmin

Critically evaluate the

web design Figure 34 PhpMyAdmin and
development process against your design document and analyse any technical challenges you
faced in development.

Homepage Design and Navigation:

Evaluation: The homepage effectively communicates the website's purpose and is visually engaging with
clear navigation.

Technical Challenges: No significant technical challenges were encountered in implementing the

homepage.

About Malcolm Page:

Evaluation: The "About Malcolm" page provides insightful information about the photographer's
experiences and passion for photography.

Technical Challenges: There were no notable technical challenges in creating this content-rich page.

Pricing Information:

Evaluation: The pricing page effectively presents pricing details for different photography services.

UNIT_13 - Web Design and Development

Technical Challenges: No significant technical issues were encountered while structuring and presenting
the pricing information.

Photography Gallery:

Evaluation: The gallery successfully showcases Malcolm's photography, providing an engaging user
experience.

Technical Challenges: Challenges were faced when designing the gallery to accommodate future additions.
Ensuring scalability and maintaining load times for large image collections required careful optimization.

Enquiry Form:

Evaluation: The HTML enquiry form enables customers to inquire about bookings by entering essential
details.

Technical Challenges: Implementing the form and ensuring data capture was straightforward; however,
setting up a secure and efficient data storage and retrieval system for inquiries was a crucial but
manageable task.

Overall Evaluation:

The web design and development process largely aligns with the design document, meeting the defined
requirements and expectations.

The technical challenges encountered were generally manageable and did not significantly impact the
project's progress or final outcome.

The scalability aspect of the photography gallery was addressed successfully, ensuring that the website can
accommodate future additions without compromising performance.

4.1 Analyse the Quality Assurance (QA) process and review how it was
implemented during your design and development stages.
QA process is expected to discover design issues and development errors while testing a
product’s user interface (UI) and gauging the user experience (UX).

Quality Assurance (QA)

Quality Assurance (QA) holds significant importance in the software development lifecycle, with its
primary aim being the verification that the end product adheres to predetermined quality benchmarks and

UNIT_13 - Web Design and Development

operates as intended. This entails the methodical execution of testing, validation, and evaluation
procedures spanning across the design and development phases. The objective is to pinpoint and rectify
any flaws or concerns that may arise during the project.

QA plays a pivotal role in delivering high-quality products or services that meet customer expectations.

It helps in identifying and mitigating defects, errors, and issues early in the development process, reducing
costly rework.

QA contributes to building trust with customers and users by delivering reliable and consistent outcomes.
It supports compliance with industry standards, regulatory requirements, and best practices.

Validate the Client requirements and expectations

Requirements

Requirements refer to the specific functionalities and features that the website must have to meet Malcolm
Lismore's needs and objectives. These are the essential elements and capabilities that the website should
provide.

Expectations

Expectations encompass the broader goals and desired outcomes of the website project. They represent
what Malcolm hopes to achieve with the website in terms of business promotion, user engagement,
and overall success.

4.2 Evaluate the results of your Test Plan and include a review of the overall success of your
multipage website; use this evaluation to explain any areas of success and provide justified
recommendations for areas that require improvement. Prepare a user documentation to properly guide
the users of the implemented system.

User Testing

Involve users in testing to gather feedback on UI/UX and identify areas for improvement.

UNIT_13 - Web Design and Development

Lighthouse Test

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run
it against any web page, public or requiring authentication. It has audits for performance,
accessibility, progressive web apps, SEO, and more.

Performance Testing

Assess website performance under varying loads to ensure it can handle traffic.

Figure 35 Overall Performance Test

Figure 36 Passed Audits on Accessibility test.

UNIT_13 - Web Design and Development

 Figure 37 Best Practices Results

4.2 Evaluate the results of your Test Plan and include a review of the overall success
of your multipage website; use this evaluation to explain any areas of success and
provide justified recommendations for areas that require improvement. Prepare a user
documentation to properly guide the users of the implemented system.

Summary of the Key Findings

Usability and User Experience

I. Usability testing revealed that the website is user-friendly, with intuitive navigation and
clear content presentation.

II. Users found it easy to access different sections of the website, including the gallery and
pricing pages.
III. The website effectively engages visitors, providing an immersive experience to
showcase Malcolm's photography skills.

UNIT_13 - Web Design and Development

Content and Information

I. The "About Malcolm" page offers valuable insights into the photographer's experiences and
passion for photography.

II. Pricing information is presented in a clear and organized manner, aiding potential clients
in understanding the cost structure.

III. The photography gallery is visually appealing and successfully showcases Malcolm's
work, enhancing the overall quality of the website.

Scalability and Performance

I. The website demonstrates scalability, accommodating an initial set of photographs while

being prepared for future additions.

II. Performance testing indicates that the website maintains responsive load times even with
large image collections, ensuring a seamless user experience.

Inquiry Management

I. The HTML enquiry form effectively captures customer inquiries, including contact details,
event location, and dates.

II. Inquiries are collected and stored securely, allowing for efficient communication between
Malcolm and potential clients.

Technical Stability

I. The website exhibits technical stability, with no critical errors, broken links identified
during testing.

II. All functional elements, including navigation menus, contact forms, and image galleries,
operate smoothly.

Test Case

Test
Test Case Data (Input) Expected output Actual Output
Case ID
Insert Client inquiry to the Your Request has been sent, Successfully - if Entered
1 database the data entered Successfully

UNIT_13 - Web Design and Development

The testing results confirm that the website meets the defined requirements and expectations, offering
a high-quality user experience. The positive feedback from users indicates that the website effectively
promotes Malcolm's photography business and showcases his talents. To sustain this quality, regular
updates and maintenance are recommended to address future needs and challenges.

Areas Requiring Improvement

Gallery User Experience

Recommendation
Enhance the gallery user experience by implementing features like image captions, filters, and a search
function to help users explore the photography collection more efficiently.

Mobile Responsiveness

Recommendation
Ensure that the website is fully responsive on various mobile devices, optimizing the layout and content
presentation for smaller screens.
SEO and Online Visibility

Recommendation
Implement search engine optimization (SEO) strategies to improve the website's visibility in search engine
results pages (SERPs) and attract organic traffic.

Regular Content Updates

Recommendation
Maintain the website's freshness by regularly adding new photographs and updating content to keep
visitors engaged.

Security Measures

Recommendation: Strengthen security measures to protect customer data and website assets, including
implementing HTTPS, regular security audits, and data backup protocols.

Overall Evaluation

The multipage website for Malcolm Lismore has achieved several successes, primarily in terms of
usability, content presentation, scalability, and technical stability. However, there is room for
improvement in enhancing the gallery user experience, optimizing mobile responsiveness, boosting online
visibility through SEO, and implementing robust security measures. By addressing these areas, the website
can continue to effectively promote Malcolm's photography business and provide an excellent user
experience. Regular updates and ongoing maintenance are essential to sustaining and improving the
website's overall success.

UNIT_13 - Web Design and Development

 Academic Experience

Throughout the project of developing Malcolm Lismore's photography website, I gained valuable
experience and insights into web design and development.

The project also highlighted the significance of continuous learning and adaptability in the ever-evolving
field of web development. Staying up to date with the latest design trends, mobile responsiveness best
practices, and security measures were essential to delivering a high-quality product. It emphasized the need
for ongoing improvement and optimization to ensure the website remains relevant and competitive.

In conclusion, the project to develop Malcolm Lismore's photography website was a valuable learning
experience.

References
cloudflare, n.d. what-is-dns. s.l.:s.n.

codecademy, n.d. what-is-a-framework/. s.l.:s.n.

[Link], n.d. understanding-operating-systems. s.l.:s.n.

geeksforgeeks, n.d. frontend-vs-backend. s.l.:s.n.

geeksforgeeks, n.d. types-of-internet-protocols. s.l.:s.n.

hostinger, n.d. what-is-a-web-server. s.l.:s.n.

mailchimp, n.d. domain-name. s.l.:s.n.

[Link], n.d. Improve your Site's Ranking (SEO). s.l.:s.n.

[Link], n.d. server-hardware. s.l.:s.n.

searchengineland, n.d. what-is-seo. s.l.:s.n.

UNIT_13 - Web Design and Development

tutorialspoint, 2023. the-impact-of-technical-seo-on-your-website-s-performance. s.l.:s.n.

tutorialspoint, n.d. web_server_types. s.l.:s.n.

UNIT_13 - Web Design and Development