Level 4 Report: Website Design and Development - Unit 10 Details

This report provides a comprehensive overview of website design and development, covering various aspects such as DNS servers, communication protocols, front-end and back-end development, and essential tools and techniques. It delves into the purpose and types of DNS servers, explains communication protocols like TCP/IP, FTP, and HTTP, and differentiates between front-end and back-end development, highlighting required technical skills. The report also discusses the advantages and disadvantages of using website templates versus custom-built websites, explores JavaScript libraries and front-end frameworks, and addresses website testing methodologies with practical test cases. The student document is available on Desklib, a platform offering study tools and resources for students.

UNIT 10: WEBSITE DESIGN
AND DEVELOPMENT (L4)
Website Design and Development

Table of Contents
LO1.............................................................................................................................................................3
P1............................................................................................................................................................3
Purpose................................................................................................................................................3
Types of DNS......................................................................................................................................3
P2............................................................................................................................................................4
M1...........................................................................................................................................................5
M2...........................................................................................................................................................6
LO2.............................................................................................................................................................7
P3............................................................................................................................................................7
P4............................................................................................................................................................8
M3...........................................................................................................................................................9
D1..........................................................................................................................................................10
LO3...........................................................................................................................................................11
P5..........................................................................................................................................................11
P6..........................................................................................................................................................12
M4.........................................................................................................................................................20
LO4...........................................................................................................................................................21
P7..........................................................................................................................................................21
Test Plan 1: Contact Form Validation...............................................................................................21
Test Case 2: Graphics of a website....................................................................................................22
Test Case 3: Effective Navigation.....................................................................................................23
M5.........................................................................................................................................................23
D3..........................................................................................................................................................23
Conclusion.................................................................................................................................................24
References.................................................................................................................................................25
1

List of Figures
Figure 1- Design Principles.......................................................................................................................12
Figure 2- Home.........................................................................................................................................13
Figure 3- About.........................................................................................................................................14
Figure 4- Course........................................................................................................................................15
Figure 5- Course (Weeks)..........................................................................................................................16
Figure 6- Admission..................................................................................................................................17
Figure 7- Affiliation..................................................................................................................................18
Figure 8- Contact Us.................................................................................................................................18
Figure 9- Test Case 1.................................................................................................................................21
Figure 10- Test Case 1 Result....................................................................................................................22
Figure 11- Test Case 2...............................................................................................................................22
2

LO1
Facilitating a site essentially implies that it offers authorization to an association and a person to post a
site or site page upon the web. A site facilitating supply advances and administrations that will be taken
being used to see the site or website page on the web. The individual who has an entrance of web can
without much of a stretch visit your site by simply giving your site address. Their PC will get associated
with the server every one of the pages of your site will be given to them through the program. The most
essential web facilitating is of little scale record facilitating where documents can be transferred by means
of FTP or web interface. The association take being used PC as a site host to give the points of interest of
the merchandise and ventures and accommodated online requests.
P1
Purpose
The DNS is an important part of the internet as the internet is not going to survive without it. The DNS’s
main goal is to translating domain names to the IP’s. Every website has its domain and its IP address.
Through these IP addresses, internet find the website. IP address is a numeric data which is not easy to
keep in mind that is the reason why DNS has been created. DNS is a worldwide network that manages the
database of domain names and IP address.
Types of DNS
1. Primary Master DNS Server: It does the reading for the domain zone facilitated from a domain
file situated on the hosting account’s web server. The DNS is assigned to each domain to make
administration easy in comparison to using one server.
2. Secondary DNS Server: It also called a slave and it’s task is receiving input from the primary
server.
3

P2
Communication protocols are the explanation of the rules and formats of digital message. They are
needed to exchange messages between the computing Systems and are needed in telecommunications.
Communication protocol handles error detection, authentication, and correction. Through this protocol,
we can describe the semantics, syntax, and synchronization of the communication signals.
Communication protocols are embedded in both, hardware as well as software. Computer networks will
not be able to survive without communication protocol (TCP/IP, FTP, HTTP, UDP, POP, IMAP etc.).
Communication protocol defines the rule for sending block of data.
Web-Server: It refers to a program which uses HTTP to display the files from WWW for users. This
process is the example of client-server model. Web-Server is just like a larger package of internet.
Communication Protocol: Communication Protocol is just like a description of digital message formats.
Communication Protocol refers to error detection and correction and many others. Communication
Protocols are implemented in hardware & Software (Guru99.com, 2018).
Operating System: An Operating System (OS) allows a user to run application on computer devices. The
OS manages a computer’s hardware resources including:
 Input Device
 Output Device
 Network Device
 Storage Device
4

M1
Website development is a term of the work engaged with developing a site for the web or internet. Web
development can begin from developing the least demanding static single page of plain content for the
most active online web applications, business and interpersonal organization administrations. Web
development alludes to the non-outlining part while making a site. Web advancement is the programming
that approve elements of site according to the demand of the owner.
1. PHP: PHP refers to Hypertext Pre-processor. It is a server-side scripting language design for the
web development and can be implemented into HTML. PHP can be integrated with popular
databases, like MySQL, Oracle and etc.
USE OF PHP:
 We can generate dynamic pages and files.
 We can collect information from a web from such as user information, email and much more
info.
 We can send the emails to the user from our websites.
 We can encrypt data for safe transmission of the data.
2. JavaScript: JavaScript is a dynamic computer programming language, and it is an interpreted
programming language with object-oriented capabilities.
USE OF JAVASCRIPT:
 Less server interaction.
 Immediate feedback to the visitors.
 Richer Interface.
3. Java: Java is a platform-sceptical programming language, and it is a high-level general-purpose
programming language developed by Sun Microsystem. The java language was originally called
OAK.
5

4. ASP.NET: It is an open source framework which is based on server-side scripting proposed for
web application development, i.e., to develop web pages. ASP.Net applications can also be
written in a variety of .Net languages, including C#, VB.Net, and J#.
M2
Google consider a lot of factor to find how to provide rank to the Search-Engine results. The factors are
either linked to the content provided in the web page itself or calculation of the authentication of the
website itself. Search engines will not be able to provide the index the pages if the page contains fancy
scripts and images.
HOW SEARCH ENGINE WORKS: -
Search engine have four functions:
 Index Building
 Crawling
 Relevancy and Ranking Calculation
 Result Recording
These four functions analysis our websites for each page, and check relevancy of one page to another
page. Search engine create database by performing periodic crawls of the internet.
6

LO2
Websites is a main functionality for your business. In the digital era, the internet is the place that needs
regular updating of software. And the websites developers also need to improve their knowledge to
survive in the highly digital word. They should learn the best and new technologies in all over the world
and have to adopt that different kind of technologies.
There are many kinds of web development tools which we used to create the websites.
 JavaScript Libraries.
 Front-End-Frameworks.
 Frameworks for Web Applications.
 Programming Languages.
 Databases.
 CSS
 ICONS
P3
These two terms front-end and back-end are quite confusing. These are the terms which is used to
describe functionality of web industry. Front-end is often called as the client side and sometimes
considered as a ‘Web-Design’. Frontend and backend development work to create a website/application
user.
Front-End: Front-End is that kind of application that the user sees and experience. The front-end website
technology required a good frontend developer. This is the less code application and basically based on
how a user will interpret the interface into an experience. Frontend development is used to create visual
display. The frontend development includes CSS, HTML, JavaScript that is used to create web-pages,
buttons, menu and everything which is visible to the users (Technet.microsoft.com, 2018).
7

The Technical Skills required to be Front-End Developer:
 HTML
 CSS
 JavaScript
Back-End: The backend includes a web server that is used to host an application which relates with a
database. The backend serves the information of frontend development. The backend developer works to
build applications that can efficiently deliver data. Backend code is run on the server. The backend
developers should have the knowledge of server architecture as well (Chris, 2018).
The drawback of backend development is sometimes application can be slow and throw an error to users
it’s because of backend problems.
The Technical Skills required to be Back-End Developer:
 Ruby
 MongoDB
 SQL
 Python
P4
Most websites today are developed with templates (Online websites creation tools), which allows to make
easy and quick websites. This online website creations tools are also known as Constant Management
System (CMS). Now a days, the most popular is WordPress and CMS.
8

Some Advantages of Templates:
 A template site is often a great option of the project is simple.
 Template sites are less expensive than custom sites.
 Templates sites are fast to implement (Differencebetween.info, 2018).
Some Disadvantages of Templates:
 Your site may look like common sites.
 In templates, you can make limited changes in your graphic design.
 Some templates are not well made and not well manages.
 The main issue in templates is security issues.
UX Design / UI Design:
UX design refers to the terms “User Experience Design” and UI design refers to the terms “User Interface
Design”. Both UI and UX are difficult to work together. UI and UX is the most confusing terms in
technical fields. Both are different but both UI-UX and UX-UI are related to each other as well:
 UX makes interface useful
 UX helps Users Accomplish Goals
 UX design is done first
M3
In websites development, there are many kinds of development tools which we can used to develop a
custom-built website. These all development tools help us to make our websites more relevant and used to
make impressive web-design and user-friendly interface.
JavaScript Libraries: JavaScript is the most highly used computer language. There are some commonly
used libraries in JavaScript.
9

 jQuery: jQuery features full JavaScript Libraries.
 Moment.js: Manipulate and validate in JavaScript.
 React This Facebook’s JS libraries used for creating UI.
 jQuery Mobile: This is used to create responsive websites (Inc, 2018).
Front-End-Frameworks: Front-end-frameworks include many kinds of folders and files like – CSS, JS,
Images, HTML. There are some commonly used libraries in front-end-frameworks.
 Bootstrap: HTML, CSS, JS is used to building responsive websites and mobile and tablets
project.
 Uikit: A front-end frameworks for creating fast and powerful interface.
 Foundation: Foundation is a group of responsive front-end frameworks and used to make
websites very responsive and make user interface designs (Thumar and Thumar, 2018).
Programming Languages: Programming Languages specifies a set of instructions that is used to deliver
different kinds of output.
 PHP: PHP is a scripting language used in web development.
 Python: Python gives the fast component and work and combine systems to work faster.
 HTML5: HTML5 is a mark-up language and have a link with xhtml and html.
Databases: Database is a group of information that can be managed, retrieved, updated.
MariaDB: This is open source database and now becoming very highly used database in IT world.
MySQL: This is commonly used database and leading open source databases (Medium, 2018).
D1
The frontend tools which are used to build a custom website are HTML, CSS, JavaScript, and Bootstrap.
These have been used for website creation because there is an extensive support for these languages. They
10

are perfectly compatible with almost every web browser. The backend technology that can be used are
PHP, jQuery etc. The database language used can be MySQL because this scripting language is
compatible with databases (Job, 2018).
11