Comprehensive Report on Website Design and Development

This report provides a detailed overview of website design and development, covering essential aspects such as domain name systems (DNS), communication protocols, and various programming languages like PHP, JavaScript, Ruby, and Java. It delves into front-end and back-end development, highlighting the necessary technical skills for each. The report also discusses the importance of UX/UI design, website templates, and development tools like JavaScript libraries and front-end frameworks. Furthermore, it emphasizes the significance of content quality, server architecture, security, and design principles in creating effective and user-friendly websites. Desklib provides access to similar solved assignments and resources for students.

Website Design & Development

Contents
LO1..............................................................................................................................................................4
P1.............................................................................................................................................................4
P2.............................................................................................................................................................5
M1...........................................................................................................................................................5
M2...........................................................................................................................................................6
LO2..............................................................................................................................................................8
P3.............................................................................................................................................................8
The Technical Skills required to be Front-End Developer:.......................................................................8
 HTML...............................................................................................................................................8
 CSS...................................................................................................................................................8
 JavaScript.........................................................................................................................................8
The Technical Skills required to be Back-End Developer:........................................................................9
 Ruby.................................................................................................................................................9
 MongoDB.........................................................................................................................................9
 SQL...................................................................................................................................................9
 Python.............................................................................................................................................9
P4...........................................................................................................................................................10
UX Design / UI Design:...........................................................................................................................10
M3.........................................................................................................................................................10
LO3............................................................................................................................................................12
P5...........................................................................................................................................................12
The Reason of Quality of content used in website :..............................................................................14
1. User Satisfaction............................................................................................................................14
2. Improved search ranking...............................................................................................................14
3. Mobile Users..................................................................................................................................15
4. Responsive.....................................................................................................................................15
M4.........................................................................................................................................................15
LO4............................................................................................................................................................16
P7...........................................................................................................................................................16

M5.........................................................................................................................................................18
References:................................................................................................................................................19

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
The DNS is an important part of the internet as the internet is not going to survive without it. The
DNS stands for domain name system .The main goal of DNS is to translate domain names to the
IP addresses .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 (Mahjoub and Mathew, 2017).
Types of DNS:
1. Primary Master DNS Server: Primary Master DNS Server reads for the web domain from a file
located on the server of the website hosting portal. The DNS Server assign to each domain to make
administrator easier and provide more security than just a single server.
2. Secondary DNS Server: Secondary server also called a slave; it receives data from the primary
server automatically after starting the server.

P2
Communication protocols are the explanation of the rules and formats of digital message. They
are needed to transfer messages between the computer Systems and are needed in telecomm-
services.
Communication protocol handles accessibility, error finder and correction. Through
communication protocol, we can describe the syntax, of digital communications. Communication
protocols are embedded in hardware and software. Compter networks will not be able to survive
without communication protocol. File Transfer Protocol, TCP/IP, User Datagram Protocol,
Hypertext Transfer Protocol, Post Office Protocol, Internet Message Access Protocol.
Communication protocol defines the rule for sending block of data from one node in a network to
another node.
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.
PHP: Hypertext pre-processor is a server side scripting language design for the web development.
PHP is widely used open source scripting language that is developed for 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.

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.
Ruby: Ruby is a dynamic, reflective, object-oriented programming language. The first version of
ruby was 0.95 and released in 1995 and in 2011 version 1.9.3 was released. Ruby is a flexible
language because it allows for programmer to make modification to various parts of the language.
Java: Java is a platform-sceptical programming language, and it is a general purpose high-level
programming language developed by Sun Microsystem. The java language was originally called
OAK.
Today Java is a commonly used foundation for developing content on web. Application and
program using java will not work unless java is installed on your device.
ASP.NET: ASP.NET is an open source server side web application framework designed for web
application framework designed for web development to develop web pages. ASP.Net
applications can also be written in variety of.Net languages, including c#, VB.Net and J# (Ewer,
2015).
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
genuinity of the website itself. Search engines will not be able to provide the index the pages if
the page contains fancy scripts and images. So we need to check that the content of our page is a
plain text. A search result for a resource having a limited time related to resources having

higher load can be promoted in a presentation order, and search results for the resources having
higher load can be demoted. Search engines can be compared to an online reception.

LO2
Website is a main functionality for your business, In the digital era, the internet is the place that
needs regular updating of software. And the website developers also need to improve their
knowledge to survive in the highly digital world. They should learn the best and new technologies
in all over the world and have to adopt those different kinds of technologies (Palacios, Soto-
Acosta, and Merigó, 2015).
There are many kinds of web development tools which we used to create the websites.
1. JavaScript Libraries.
2. Front-End-Frameworks.
3. Frameworks for Web Applications.
4. Programming Languages.
5. Databases
6. CSS
7. ICONS
P3
These two terms front-end and back-end are quite confusing. These are the terms which are used to
explain functionality of web Organization. Front-end is often called as the clien- side and sometimes
considered as ‘web-design’. Frontend and backend development work to create a website/application for
users.
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, and JavaScript that is used to create web-pages,
buttons, menu and everything which is visible to the users.
The Technical Skills required to be Front-End Developer:
 HTML
 CSS
 JavaScript
Back-End: The backend include 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 (Casado, Ingram,, Amidon,
Balland, Koponen, Pfaff,, Pettit, Gross IV,. and Wendlandt, 2015).

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 website creation tools), which allows
to make easy and quick websites. This online website creations tool are also known as Constant
Management System (CMS). Now a days the most popular is WordPress and CMS.
Some Advantages of Templates :
A template site is often a great option if the project is simple.
Template sites are less expensive than custom sites.
Templates sites are fast to implement.
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 managed.
The main issue in Templates will be security issue (Prime Design Solutions, 2014).
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 & 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 website development, there are many kinds of development tools which we can used to develop
a custom built websites. 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…
 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.
 Front-end-Frameworks: Front-end-frameworks include many kind 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 (Ostraining,
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 more faster.
 HTML5: HTML5 is a markup language and have a link with xhtml and html
 Databases: Database is 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 database.

LO3
Web Design and applications are used for building web pages. And include HTML, CSS, Device
API, JavaScript and other kind of technologies for web applications. To create multipage website
their should be a link of all the pages and folder contains the basic need for the websites like
images, CSS script, JavaScript and other things.
Tools & Techniques which we used to create multipage websites.
 HTML and CSS
 JavaScript Web API’s
 Graphics
 Mobile Web
 Privacy
 Accessibility
P5
After doing the project and creating an analysis document, you define the requirements of your
web content system in a design document. The design document refers what content you will be
needed for your website.
The some attribute are as follows:
1. Server Architecture
2. Security archiecture
3. Information Archiecture
4. Design Archiecture
5. Content Archiecture
The Basic Design Principle:
 Communications -: Web offers important information which makes communication
between users and organization.

 Typefaces -: Website contains is read in Arial and Verdana with 3 point Sizes, 16px and
3 typefaces for easy reading.
P6
I have created this website with website principal and according to website design. The basic
need and purpose of this website is to make it multipage.
Web-Pages:

The Reason of Quality of content used in website :
1. User Satisfaction
2. Improved search ranking
3. Mobile Users
4. Responsive

M4
Multipage websites are closely same as their single-pages websites. The scenario of all the pages
are same but the contents are different according to the pages. Suppose we have a website on
ecommerce company and the headers are as follows: (HOME, ABOUT US, CONTACT).
In all the pages (HOME, ABOUT US, CONTACT) the UI will be same but the content will be
different. In HOME there will be information of the era of the company and in ABOUT US there
will be information of the company and in CONTACT there will be information of the contact
and will given the address and email id.
So we have all different content in all the multiple pages, but the UI will be same from top to
bottom.
Design Document: The Design document is the starting point work for our assignments. In many
cases, we have to do design document before doing any of the actual work. Design document is
like a module where we used to plan that how we going to make our website. This is the step by
step process of our website development.

LO4
P7
Test Plan 1: Map between home and contact page
EXPECTED RESULT:- There should be a proper link between home and contact page.
OUTCOME RESULT:- The user can go home to contact page and contact page to home page.
REMARK:- Successful.
Test Plan 2: Responsive Website
EXPECTED RESULT:- The website open on mobile phone platform.
OUTCOME RESULT :- Website open on the mobile phone platform
REMARK :- Successful

M5
Management Review: - Management review is also known as Quality Assurance (QA).The
main aim of the QA is to focus on software process rather than the software work product.
Quality Assurance makes sure the test manager is doing the right things or not.
Audit:- Audit is the final process in this process we examine the work product and relevant
information to check whether the standard process was followed or not.
Why Do We Need QA process
Quality Assurance process checks all the phase of the project. To make our website error free
and more relevant we have to do the QA process.
QA include many process like Riks analysis, estimation, planning, organization, issue, and
report.
QA: Process

References:
 Casado, M., Ingram, P., Amidon, K.E., Balland III, P.J., Koponen, T., Pfaff, B.L., Pettit,
J., Gross IV, J.E. and Wendlandt, D.J., NICIRA Inc, 2015. Method and apparatus for
implementing and managing distributed virtual switches in several hosts and physical
forwarding elements. U.S. Patent 8,966,035.
 Mahjoub, D. and Mathew, T.M.,2017. Domain classification based on domain name
system (dns) traffic. U.S. Patent Application 15/226,250.
 Palacios-Marqués, D., Soto-Acosta, P. and Merigó, J.M., 2015. Analysing the effects of
technological, organizational and competition factors on Web knowledge exchange in
SMEs. Telematics and Informatics, 32(1), pp.23-32.
 Ewer, T. (2015). Single Page or Multiple Page Design – What's Better For Your
WordPress Website? | Kriesi.at - Premium WordPress Themes. [online] Kriesi.at.
Available at: https://kriesi.at/archives/single-page-or-multiple-page-design-whats-better-
for-your-wordpress-website [Accessed 2 Jun. 2018].
 Prime Design Solutions. (2014). The difference between template and custom-built
websites. [online] Available at:
https://www.primedesignsolutions.com/learning-center/difference-template-custom-built-
websites/ [Accessed 2 Jun. 2018].
 Ostraining.(2018). [online] Available at:
https://www.ostraining.com/blog/webdesign/frameworks/ [Accessed 2 Jun. 2018].