WDD-IN0719A22H-Nishant Shah-Assignment 1

You might also like

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 29

STUDENT ASSESSMENT SUBMISSION AND

DECLARATION
When submitting evidence for assessment, each student must sign a declaration confirming that the
work is their own.

Student name: NISHANT SHAH Assessor name: Jeyashreee Rajkumar

Issue date: 3 Jul 2019 Submission date: 26 Aug 19 Submitted on: 26 Aug 19

Programme: Pearson BTEC Level 5 HND in Application Development

Unit: 4 Web Design and Development

Assignment number and title: 1 of 2: Development of website for a Training Organization – Part 1

Plagiarism
Plagiarism is a particular form of cheating. Plagiarism must be avoided at all costs and students who
break the rules, however innocently, may be penalised. It is your responsibility to ensure that you
understand correct referencing practices. As a university level student, you are expected to use
appropriate references throughout and keep carefully detailed notes of all your sources of materials
for material you have used in your work, including any material downloaded from the Internet. Please
consult the relevant unit lecturer or your course tutor if you need any further advice.

Student Declaration
Student declaration
I certify that the assignment submission is entirely my own work and I fully understand the
consequences of plagiarism. I understand that making a false declaration is a form of malpractice.

Student signature: Date: 26 Aug 19

Pearson Education 2018


Higher Education Qualifications
Development of website for a Training Organization – Part 1

Contents

1. Configure the DNS and provide evidences in a Presentation.........................3

2. Provide Information Protocols, Ports, Hardware, Operating System and


Server Software..........................................................................................................8

3. A research on search landscape and associated SEO Strategy in word


format.........................................................................................................................10

4. Briefly tabulate the Effect of technologies in Website Design Architecture,


Functionality & Management in word format........................................................13

5. Differentiate between the Front End & Back End technologies and their
features in word format............................................................................................15

6. A brief note along with screen capture of features you will use for
development in your IDE in PowerPoint slides.....................................................17

7. Summarize the difference between online website creation tools and


custom built website in Word format.....................................................................24

Bibliography..............................................................................................................27

<IN0719A22H> <NISHANT SHAH> Page | 2


Development of website for a Training Organization – Part 1

1. Configure the DNS and provide evidences in a Presentation


A–
 DNS: It is also known as “Domain Name System”. It helps us open internet
addresses without a hustle. Web browsers interact through Internet Protocol (IP)
addresses. DNS translates domain names to IP addresses so browsers can load
Internet resources.

 Different Types of DNS Server are:

1) Zone Master Server: The zone master server is the “Authoritative server”. It will
have a database of all the data associated with a particular zone. This data is
available on two servers, namely the primary master server, and the secondary
master server.

a. Primary Master Server: The primary master server has the master copy of the
domain data, and this master data is loaded onto the disk when its operation
starts. In case there is excessive load on the primary master server, data is
shared on the secondary server, and authority is delegated to it by the primary
server.

b. Secondary Master Server: In case there is a breakdown or failure of the master


server, the secondary master server provides the relevant information. If the
master server has delegated authority to the secondary server, customers can
directly contact these servers, instead of the master servers.

2) Cache-only Server: The cache - only server stores results of the queries that are
made. The next time this information is needed, the server fetches it immediately
instead of waiting. These servers are not authorized for any domains, and they only
perform queries. This information is stored in the cache, and reused whenever
needed. These servers cannot perform zone transfers.

3) Root Server: DNS servers that are authoritative for the root domain are root domain
servers. These servers are needed to be used for DNS namespace, i.e., the entire
DNS domain structure. They are the first step in translating host names like
buzzle.com to IP addresses that are used for communication between network
hosts. This process of converting to an IP address is known as resolving. These root
servers publish the contents of root zone files onto the Internet. The ISPs download
copies of the root tables, so as to complete the resolving process locally.

4) Forwarding Server: The forwarding servers are also known as proxy, client, or
remote servers. These servers forward all requests to other DNS servers, and cache
the results. They are mostly used in off-site locations, where all the off-site queries
reach this server first, and it then forwards the queries to other DNS servers. Such
an arrangement reduces the external access of the local servers, and thus, speeds

<IN0719A22H> <NISHANT SHAH> Page | 3


Development of website for a Training Organization – Part 1
up responses. These servers act as a single point management for the entire server
network.[ CITATION Bin191 \l 16393 ]

 Purpose of using DNS: Domain names serve as an ‘easy-to-remember’ name for


websites and other services on the Internet. However, computers access Internet
devices by their IP addresses. DNS translates domain names into IP addresses,
allowing us to access an Internet location by its domain name. It is because of DNS
we can visit a website by just typing the domain name rather than the full IP address.
 Steps to register and configure at No-ip.com:

Step 1: Go to https://www.noip.com
Step 2: Create an account at No-ip.com.

To create an account with No-IP simply click the Sign Up link at the top of the page.

Step 3: Fill all the details.

Fill in the required fields on the new account form.

Step 4: Verify your email address.

Once you have submitted your account information into the sign-up form, we will
send a confirmation email to the address you provided. You will need to check that

<IN0719A22H> <NISHANT SHAH> Page | 4


Development of website for a Training Organization – Part 1
account and look for an email from No-IP. The email contains a link you must click in
order to confirm your account.

Step 5: Log In to your Account.

Now that you have confirmed your account, you can Log In.

Step 6: Add a Host or Domain to your Account.

When you register for a No-IP account a hostname should have been created
automatically. You will use this to connect to your server. If you would like you can
create another hostname using the steps below.

For example, if you were to run a web server, and you wanted to connect to your
server using a web browser, you would put http://hostname.domain.com in the
address bar.

In order to add a host to your account, select the “No-IP Hostnames” link from the
“Dynamic DNS” menu. This will bring up the Create Hostname page.

<IN0719A22H> <NISHANT SHAH> Page | 5


Development of website for a Training Organization – Part 1

Step 7: Select domain type [Ex. ddns.net] and click on Add Hostname.

Step 8: Modify your IP address by clicking on Modify button.

<IN0719A22H> <NISHANT SHAH> Page | 6


Development of website for a Training Organization – Part 1

Step 9: Find out our hosting server and change it with the default IP address.
(202.73.44.87)
Step 10: Configure your domain server such as: <hostname>.ddns.net
Step 11: To test and verify your website, it is accessible using your domain name
i.e. <xxx.ddns.net>/<path to your file>

Step 12: If you have completed the step above received a successful result from the
Port.[ CITATION Noi19 \l 16393 ]

 Why ddns.net is used: DDNS stands for dynamic DNS, or more specifically,
dynamic Domain Name System. DDNS serves a similar purpose to the internet's
Domain Name System (DNS) in that DDNS lets anyone hosting a web or FTP server
advertise a public name to prospective users. However, unlike DNS which only
works with static IP addresses, DDNS is designed to also support dynamic
(changing) IP addresses, such as those assigned by a DHCP server. That makes

<IN0719A22H> <NISHANT SHAH> Page | 7


Development of website for a Training Organization – Part 1
DDNS a good fit for home networks, which normally receive dynamic public IP
addresses from their internet service provider.[ CITATION Bra99 \l 16393 ]

2. Provide Information Protocols, Ports, Hardware, Operating System and Server


Software.
A - A protocol is a standard set of rules that allow electronic devices to communicate
with each other. These rules include what type of data may be transmitted, what
commands are used to send and receive data, and how data transfers are
confirmed.
 There are different protocols used in Internet that are known as:
 IP (Internet Protocol)
 FTP (File Transfer Protocol)
 HTTP (Hypertext Transfer Protocol)

1. IP: Internet Protocol is also working with TCP. It is an addressing Protocol. IP


addresses packets route them and show different nodes and network Unless it
reaches its right destination. The IP protocol is developed in 1970.

2. FTP: FTP stands for “File Transfer Protocol.” It’s also one of the oldest protocols in
use today, and is a convenient way to move files around. An FTP server offers
access to a directory, with sub-directories. Users connect to these servers with an
FTP client, a piece of software that lets you download files from the server, as well
as upload files to it.[ CITATION Jon19 \l 16393 ]

3. HTTP: HTTP stands for “Hypertext transfer Protocol”. This protocol is used to


transfer data over the web. It is part of the Internet protocol suite and defines
commands and services used for transmitting webpage data.

 Port number of IP used: 202.73.44.87


 Port number of FTP used: 20,21
 Port number of HTTP used: Apache: 80

 Server Hardware Required:

 Processor: Intel Core i3 / Intel Core i5


 Ram: 8 GB / 16 GB / 32 GB
 Rom: 500 GB / 1 TB / 2 TB
 System type: 64 – bit Operating system, x64 – based processor

 Operating System Required:

OS: Windows XP, 7, 8, 10


Mac Os: 10.12, 10.13, 10.14, 10.15

<IN0719A22H> <NISHANT SHAH> Page | 8


Development of website for a Training Organization – Part 1

 Web Server Software used:

a. For Designing:
i. Adobe Dreamweaver
ii. Notepad++
iii. Creately
iv. Mockflow
v. Sublime Text 3

b. For Publishing:
i. XAMPP – Apache

ii. FileZilla

c. For Accessing:
i. Chrome Browser
ii. Microsoft Edge

<IN0719A22H> <NISHANT SHAH> Page | 9


Development of website for a Training Organization – Part 1

3. A research on search landscape and associated SEO Strategy in word format.


A-
 SEO: SEO is short for Search Engine Optimization. Search engine optimization is a
methodology of strategies, techniques and tactics used to increase the number of
visitors to a website by obtaining a high-ranking placement in the search results
page of a search engine (SERP) — including Google, Bing, Yahoo and other search
engines. SEO helps to ensure that a site is accessible to a search engine and
improves the chances that the site will be found by the search engine. It is typically a
set of "white hat" best practices that webmasters and Web content producers follow
to help them achieve a better ranking in search engine results.[ CITATION Van19 \l
16393 ]

 Methodologies that can be used are:

a. Optimize for Mobile

b. Social Media: Promote your website on different social media platforms.

c. Update Content Regularly: Regularly updated content is viewed as one of the best
indicators of a site's relevancy.

d. Meta data: When designing your website, each page contains a space between the
<head> tags to insert metadata, or information about the contents of your page.

e. Use alt tags: Always describe your visual and video media using alt tags, or
alternative text descriptions. They allow search engines to locate your page, which
is crucial—especially for those who use text-only browsers or screen readers.

 Search Engines that can be used are:

a. Google
b. Bing
c. Yahoo
d. Ask.com
e. Baidu

 Keywords/Phrases that can be used for searching website:

1. Learning center
2. Contact
3. Courses
4. Java at abc learning center
5. Html at abc learning center

 Phrases that are used for searching website with evidence are mentioned
below:
1. abc learning center

<IN0719A22H> <NISHANT SHAH> Page | 10


Development of website for a Training Organization – Part 1
2. IT degree courses
3. programming in java
S. Page Page Meta Meta Keyword Google
No. URL Title Description result
position

https:// Computer Find 4034 Shiksha, education, colleges, universities, 4


www.s IT & Computer IT institutes, career, career options, career
1 hiksha. Software & Software prospects, engineering, mba, medical,
com/it- Courses Courses, mbbs, study abroad, foreign education,
softwar and Certifications college, university, institute, courses,
e/colle Certificati and Colleges coaching, technical education, higher
ges/col on in India. education, forum, community, education
leges- Colleges Compare career experts, ask experts, admissions,
india in India Ranking, results, events, scholarships
Fees,
Courses,
Placements,
Cut off and
Admission
process at
Shiksha.com

https:// Quality Quality Software Testing Institute in Thane, Airoli, 11


quality software Software Ghatkopar, Bhandup, Kalyan,
2 softech technolog Technologies Dombiovali, Java Institute in Thane,
.com/ ies is one of the Software Testing Course in Thane,
best Java Software Testing Training Center in
Courses in Thane, Manual Testing & Automation
Thane and Testing Course in Thane, Selenium
Software Course in Thane, Selenium Training in
Testing Thane, ISTQB Examination Center in
Course in Thane, ISTQB training in Thane,
Thane for Software Testing Institute in Mumbai,
Manual Software Testing Course in Mumbai,
Testing, Software Testing Training Center in
Automation Mumbai, Manual Testing & Automation
Testing. Testing Course in Mumbai, Selenium
Course in Mumbai, Selenium Training in
Mumbai, ISTQB Examination Center in
Mumbai, ISTQB training in Mumbai,
Software Testing Company In Mumbai,
Software Testing Institute in Kalyan,
Software Testing Courses in Kalyan, Call
for Free Demo, Manual Testing &
Automation Testing Course in Kalyan,

<IN0719A22H> <NISHANT SHAH> Page | 11


Development of website for a Training Organization – Part 1
Software Testing Training Center in
Kalyan, Selenium Course in Kalyan,
Selenium Training in Kalyan, ISTQB
Examination Center in Kalyan, ISTQB
training in Kalyan, Software Testing
Institute in Dombivali, Software Testing
Course in Dombivali, Manual Testing &
Automation Testing Course in Dombivali,
Software Testing Training Center in
Dombivali. Best software testing training,
institute, classes, courses in Thane,
Airoli, Dombivali, Kalyan, Mulund,
Ghatkopar, Kurla, Vashi

https:// ABC ABC Early Child Care Centers, After School 9


www.a Early Learning Programs, Early Learning Center, After
3 bcearly Training Center is a School Care, State-Certified, After School
learnin Center state-certified Activities, Southfield, MI
gcente business with
r.net/ more than 15
years of
childcare
experience.
Located in
Southfield,
MI, call us
today at (248)
355-3276.

 Strategy that can be used to get a better ranking:


a.Create Unique Content: Writing fresh or unique content attract new visitors, also it
encourages people to share your content.

b.Keyword Research: Keyword research is one of the most important, and beneficial
activity in the Search Engine Marketing field. Ranking for the appropriate keywords
can make or break your website.

c.Meta Tags: Proper use of relevant Title, Meta-tags, Meta-Description – On-Page


Optimization has some important components such as relevant Title, Meta-tags or
Meta-Description. Make sure every page on your site has a title stated in the <title>
tag.

d.Manage Social Media: Social media outlets like Facebook, Twitter, LinkedIn,
Google Plus etc. are now become an important tool in SEO and is being used
appropriately by businesses to gain more traffic to their websites, generate
business leads and enhance business reputation.[ CITATION Gou19 \l 16393 ]

<IN0719A22H> <NISHANT SHAH> Page | 12


Development of website for a Training Organization – Part 1

4. Briefly tabulate the Effect of technologies in Website Design Architecture,


Functionality & Management in word format.
A–
1) HTML: HTML is short for Hypertext Markup Language. HTML is a type of markup
language. It encapsulates, or “marks up” data within HTML tags, which define the
data and describe its purpose on the webpage. The web browser then reads the
HTML, which tells it things like which parts are headings, which parts are
paragraphs, which parts are links, etc. The HTML describes the data to the browser,
and the browser then displays the data accordingly.

2) CSS: Cascading Style Sheet (CSS) is used to set the style in web pages which
contain HTML elements. When a browser displays a document, it must combine the
document's content with its style information.
It processes the document in two stages:
a. The browser converts HTML and CSS into the DOM (Document Object Model). The
DOM represents the document in the computer's memory. It combines the
document's content with its style.
b. The browser displays the contents of the DOM.

There are three types of CSS which are given below:


 CSS - Inline CSS contains the CSS property in the body section attached with
element is known as inline CSS. This kind of style is specified within an HTML tag
using style attribute.

 Internal or Embedded CSS - This can be used when a single HTML document
must be styled uniquely. The CSS rule set should be within the HTML file in the head
section i.e. the CSS is embedded within the HTML file.

 External CSS - External CSS contains separate CSS file which contains only style
property with the help of tag attributes (For example class, id, heading, … etc). CSS
property written in a separate file with “.css” extension and should be linked to the
HTML document using link tag.

3) JAVASCRIPT: JavaScript (JS) is a scripting language commonly used in web


development. JavaScript is most commonly used as a client-side scripting language.
This means that JavaScript code is written into an HTML page. When a user
requests an HTML page with JavaScript in it, the script is sent to the browser and it's
up to the browser to do something with it. This means JavaScript scripts are read,
interpreted and executed in the client, which is your Web browser. By comparison,

<IN0719A22H> <NISHANT SHAH> Page | 13


Development of website for a Training Organization – Part 1
"server-side" programming languages run on a remote computer, such as a server
hosting a website.

4) jQUERY: JavaScript is the programming language used to add interactivity to


websites. jQuery is a library of pre-built JavaScript functions that handle tasks
commonly managed with JavaScript. In essence, jQuery makes it easier and
faster to use JavaScript. jQuery is a library of commands that make it easy to
locate, select, and manipulate HTML elements on a webpage in response to
visitor activity. The strength of jQuery is in its ability to easily locate and select
HTML elements without requiring that any additional attributes be applied to the
HTML element.[ CITATION Jon07 \l 16393 ]
5) AJAX: Ajax is an acronym for Asynchronous JavaScript and XML. It is used to
communicate with the server without refreshing the web page and thus increasing
the user experience and better performance. It is a new technique for creating better,
faster, and more interactive web applications with the help of XML, HTML, CSS, and
Java Script. Ajax uses XHTML for content, CSS for presentation, along with
Document Object Model and JavaScript for dynamic content display

 Differentiate the impact with respect to the following table:

Aspect/Technologie HTML Website Ajax Website


s

Website Design a. HTML website is coded using


/Architecture web technologies like HTML, a. Ajax website is coded using
CSS, JavaScript. HTML web technologies like HTML,
websites don’t need servers CSS, JavaScript, jQuery and
with PHP or MySQL installed Ajax. They need servers like
on them. XAMPP or FileZilla installed
for them.

Website b. HTML is defined by the ease


Functionality with which a viewer can b. Ajax is a technique for
navigate the website and creating fast and dynamic
obtain information they are web pages. Ajax allows web
seeking. Whenever the user pages to be updated
reloads the page every time asynchronously by
the content gets refreshed. exchanging small amounts of
data with the server behind
the scenes.

Management c. HTML websites uses client-


(Deployment/ side scripting languages. No c. Ajax websites uses server-
Integration) webserver is required. side scripting languages.
Web server is required.

<IN0719A22H> <NISHANT SHAH> Page | 14


Development of website for a Training Organization – Part 1

5. Differentiate between the Front End & Back End technologies and their
features in word format.
A–
 Front-end web technology: Front-end is a term that involves the building of
webpages and user interfaces for web-applications. It implements the structure,
design, behavior, and animation of everything you see on the screen when you open
up websites, web applications, or mobile apps. The core 3 technologies that all
modern front-end web developers work to master are HTML5, CSS, and
JavaScript.[ CITATION glo19 \l 16393 ]

 Back-end web technology: The back-end (or “server-side”) is the portion of the
website you don’t see. It’s responsible for storing and organizing data, and ensuring
everything on the client-side actually works. The back-end communicates with the
front-end, sending and receiving information to be displayed as a web page.
Whenever you fill out a contact form, type in a web address, or make a purchase
(any user interaction on the client-side), your browser sends a request to the server-
side, which returns information in the form of frontend code that the browser can
interpret and display.[ CITATION Nic18 \l 16393 ]

<IN0719A22H> <NISHANT SHAH> Page | 15


Development of website for a Training Organization – Part 1

 Difference between front-end and back-end website technologies:

Front – end web technology Back – end web technology

1) Front – end refers to the client –


1) Back – end refers to the server –
side of the application.
side of the application.

2) It is the part of the website users


2) It constitutes everything that
can see and interact with.
happens behind the scenes.

3) It typically includes everything


that attributes to the visual 3) It generally includes a web server
that communicates with a database
aspects of websites.
to server requests that the front –
end presents.

4) It forms the basis of what users


can touch and experience on their 4) It is the brain of the website that is
never visible to the end users.
web browsers.

5) The essentials of front – end web


development include HTML, CSS 5) The essentials of back – end web
development include Ruby, Python,
and JavaScript.
Java, .Net, etc.

 OSI: OSI (Open Systems Interconnection) is a reference model for how applications


communicate over a network.

 Presentation Layer: The primary goal of this layer is to take care of the syntax and
semantics of the information exchanged between two communicating systems.
Presentation layer takes care that the data is sent in such a way that the receiver will
understand the information(data) and will be able to use the data

 Application Layer: The Application Layer contains a variety of protocols that are
commonly needed by users. One widely-used application protocol is HTTP
(Hypertext Transfer Protocol), which is the basis for the World Wide Web. When a
browser wants a web page, it sends the name of the page it wants to the server
using HTTP. The server then sends the page back.[ CITATION stu13 \l 16393 ]

 How Front-end and back-end relate to presentation and application layer:


Front-end refers to all the actions/elements that execute/appear on a client-side
browser program. The tools/languages used are HTML, JavaScript, CSS and various
libraries of JS like Ajax, jQuery.
Back-end refers to the languages/programs which will be executed in the server.
Back-end is used to bring personalisation and flexibility in web applications.

<IN0719A22H> <NISHANT SHAH> Page | 16


Development of website for a Training Organization – Part 1
Languages used are Php, JavaScript (node.js to work with server) [ CITATION Aru19 \l
16393 ]

<IN0719A22H> <NISHANT SHAH> Page | 17


Development of website for a Training Organization – Part 1

6. A brief note along with screen capture of features you will use for development
in your IDE in PowerPoint slides.

A – Web Authoring: Web authoring is the practice of creating web documents using
modern web authoring software and tools. Web authoring software is a type of
desktop publishing tool that allows users to navigate the tricky environment of HTML
and web coding by offering a different kind of graphical user interface. With web
authoring tools, the end user can see a visual result that is a lot like the final project
after it is built. Web authoring tools are similar to HTML editors in that they typically
allow toggling between an HTML code view and a visual design. There are many
different tools available for web authoring that help translate HTML coding for those
who do not have as much experience with web code syntax.[ CITATION tec19 \l
16393 ] Adobe Dreamweaver is the example of authoring tools.

 Adobe Dreamweaver: Adobe Dreamweaver is a commercial application for web


development that’s available for the Mac and Windows operating systems. Its
featured-packed suite of tools and options include: syntax highlighting and very
smart Code Hinting, a built-in FTP client, project management and workflow options
that make team work effortless, and Live View – which shows you a preview of your
source code. Dreamweaver tightly integrates with other popular Adobe products
such as Photoshop, allowing you to share Smart Objects for quick and easy updating
and editing of graphics components.

 IDE: IDE is an acronym that stands for Integrated Development Environment. It is


a software application that combines all of the features and tools needed by a
software developer. It is graphical in nature, meaning that it uses windows and
controls like buttons to display information and accept input from the user.
[ CITATION stu19 \l 16393 ]

 For example, tools can include:

 Amethyst 2: Amethyst 2 is an IDE developed by Sapphire Steel Software.

 Anjuta DevStudio: Anjuta DevStudio is a GNOME integrated development


environment with versatile functionality including project management, source
control and version control, debugging, and more in a simple, intuitive user
interface.

 Aptana Studio 3: Aptana Studio 3 is a powerful, open-source IDE harnessing the


power of Eclipse to provide a fast and seamless environment for developing and
testing complete web applications from a single environment.

 Atom: A free, open-source, futuristic text editor, Atom is “hackable to the core,”
meaning you can customize it to do just about anything you want it to.

<IN0719A22H> <NISHANT SHAH> Page | 18


Development of website for a Training Organization – Part 1

 List of various tools to design and develop a website:

1. Sublime Text 3

2. Visual Studio Code

3. Atom

4. Creately

5. SmartDraw

6. Mockflow

7. Invision

8. Adobe Photoshop

9. Adobe Dreamweaver

10. Wix

 List of various web technologies used in a website:

1. HTML

2. CSS

3. JavaScript

4. Bootstrap

5. Python

6. XML

7. Json

8. jQuery

9. Ajax

10. PHP

 Some common features of IDE used to code a custom – build website:

<IN0719A22H> <NISHANT SHAH> Page | 19


Development of website for a Training Organization – Part 1
i. An IDE typically contains a code editor, a compiler or interpreter, and a debugger,
accessed through a single graphical user interface (GUI). The user writes and edits
source code in the code editor. The compiler translates the source code into a
readable language that is executable for a computer. And the debugger tests the
software to solve any issues or bugs.

ii. An IDE can also contain features such as programmable editors, object and data
modeling, unit testing, a source code library and build automation tools.

iii. An IDE's toolbar looks much like a word processor's toolbar. The toolbar facilitates
color-based organization, source-code formatting, error diagnostics and reporting,
and intelligent code completion.

iv. Through an IDE's interface, a developer or team of developers can compile and
execute code incrementally and manage changes to source code in a uniform
manner.

 Some features of Atom text editor: Atom is a text editor that's modern,
approachable, yet hackable to the core—a tool you can customize to do anything but
also use productively without ever touching a config file. An IDE normally consists of
a source code editor, build automation tools and a debugger. The latter two are not
provided by the Atom, hence it’s an advanced text editor.

 Tools and techniques used to build a custom – built website:

A. Tools used for website creation:

a.Sublime Text 3: It is a cross-platform source code editor.

b.Visual Studio Code: It includes support for debugging, syntax highlighting,


intelligent code completion, snippets, and code refactoring.

c.Creately: Creately is a dynamic diagramming tool that can be deployed from the
cloud or on the desktop.

d.MockFlow: MockFlow is an online wireframe software for designers planning,


building and sharing work.  

e.PowerPoint Presentation: It is also used to create offline wireframe, information


architecture and storyboard etc.

f. Wix: It is used to create our own logo for free.

B. Web Technologies used:

<IN0719A22H> <NISHANT SHAH> Page | 20


Development of website for a Training Organization – Part 1
a.HTML:
 HTML makes up the layout and structure for your website.
 This language is dynamic and allows you to create a beautiful website using less
code.
 HTML is used to create a starting point for the website and is what most of your
static pages start from.
 Markup tags are keywords surrounded by brackets and when used, they create a
specific output in the browser window.
b. CSS:

 The style sheet language describes how your website is presented and its layout.
 CSS is used hand with HTML to add colors, backgrounds, layouts, font sizes, and
more.
 CSS a core technology web developers use to design websites.
 This method of styling a page is incredibly useful because it allows a website
developer to change all of the same HTML elements on a page without the need to
change each one individually.

c. JavaScript:

 JavaScript is used in many aspects of web development


 Web developers use this language to add interactive elements to their websites.
 User engagement is important to your business, and your web developer should be
incorporating JavaScript elements in your design.
 The scripting language uses function calls and supports object-oriented elements.

d. Ajax:

 Ajax stands for Asynchronous JavaScript XML which is a technique to make fast
dynamic web pages.
 It can be understood to be a part of JavaScript, running on JavaScript.
 It can be seen as a way to replace data using a server, and update web page
sections but does not reload the entire page.
 Because a page postback is being eliminated, Ajax enabled applications will always
be more responsive, faster and more user-friendly.

e. PHP:

 PHP is an acronym for "PHP: Hypertext Preprocessor".


 PHP is often used on data-heavy websites or for app development.
 This is an open-source language that can be easily modified to meet the needs of
your business or website.

<IN0719A22H> <NISHANT SHAH> Page | 21


Development of website for a Training Organization – Part 1
 It is a fast prototyping language.

f. jQuery:

 jQuery is the most popular JavaScript library in use today.


 jQuery enables JavaScript developers to achieve sophisticated functionality in less
time and with fewer lines of code.
 jQuery synthesizes all problems in JavaScript into a library.
 Takes a lot a common tasks that require many lines of JavaScript code to
accomplish, and wraps them into methods that can call with a single line of code

 Evidence of web technologies used to create a cutom-built website:

a) HTML:

The above screenshot illustrates the technology used in all projects. HTML is the
most important part of the website. It is used with tags and elements.

<IN0719A22H> <NISHANT SHAH> Page | 22


Development of website for a Training Organization – Part 1

b) CSS:

The above screenshot illustrates the technology used in all projects. To style the
every part of the HTML, CSS is there to style in every aspect of styling.

c) JAVASCRIPT:

The above screenshot illustrates the technology used in all projects. The script is
always being written in script tag. It can be written internally in the HTML or by
externally linking in the head tag with the extension of “.js”

d) AJAX:

<IN0719A22H> <NISHANT SHAH> Page | 23


Development of website for a Training Organization – Part 1

The above screenshot illustrates the technique used in project 3. Ajax is used to help
web browsers retrieve more data without causing a web page to refresh.
e) PHP:

The above screenshot illustrates the technology used in mini project 3. It is used to
load the pages fast by using the filr extension of “.php”

<IN0719A22H> <NISHANT SHAH> Page | 24


Development of website for a Training Organization – Part 1

7. Summarize the difference between online website


creation tools and custom built website in Word
format.
A–
 Online website creation tools: Online website builders are web-based and run on
the provider’s service. Unlike offline website builders, you don’t need to download or
install the software on your computer – all you need is a web browser (i.e. Chrome,
Firefox or Internet Explorer) and an Internet connection. This allows you to work on
your website from anywhere and any device. Another benefit is that the website
builder comes with web hosting services so you don’t need to purchase it and/or set
it up separately. Many online website builders are designed for people with little or
no coding experience. Online website builders are designed to be very easy to use,
allowing anyone – beginners or experienced designers – to create an entire website
within minutes using a drag-and- drop editor. Users build a website simply by
dragging elements and dropping them to the desired location. [ CITATION web19 \l
16393 ]
 WordPress.com is an example of online website tool.

 WordPress: Offline website builders come as software programs that you download
and install on your computer. You will build your website and save your files on your
computer, and when your website is ready, all you need to do is upload all your
website files to a web host. One advantage of such website builders is that the
software is running on your computer so you can work on your website even if you
are offline. But because you will need to upload your files to a web host, you will
need to have at least some technical skills or experience. You will also need to

<IN0719A22H> <NISHANT SHAH> Page | 25


Development of website for a Training Organization – Part 1
purchase a web hosting account in additional to the
website builder software.

 Custom-built sites: Offline website builders come


as software programs that you download and install
on your computer. You will build your website and
save your files on your computer, and when your
website is ready, all you need to do is upload all
your website files to a web host. One advantage of
such website builders is that the software is running
on your computer so you can work on your website
even if you are offline. But because you will need to
upload your files to a web host, you will need to
have at least some technical skills or experience.
You will also need to purchase a web hosting account in additional to the website
builder software.[ CITATION web19 \l 16393 ]
 Adobe Dreamweaver is an example of custom-built tool.

 Adobe Dreamweaver: Adobe Dreamweaver CC is a popular visual development


tool for designing, publishing and managing websites. It offers a lot of power and
flexibility for both designers and developers. Dreamweaver's many features make it
intimidating for beginners, but Adobe's onboarding experience is designed to help
people new to the program get started. The software's advanced features make it
possible to go from beginning web designer to professional in a short period.
Because Dreamweaver is WYSIWYG (what you see is what you get) software, you
can opt to design visually or with code. You can use it to write HTML, CSS, JSP,
XML, PHP, JavaScript, and other coding languages. It can read WordPress, Joomla,
and Drupal templates, and it includes a grid system to do grid-based responsive
layouts for three device sizes at once, which is an enormous timesaver for
developers who work on sites for desktop, tablet, and cell phone browsers.

 Difference between Online website creation tools and custom-built tool:

Online creation tool Custom-built tool

a. A template-based website is a. Custom design is a unique design in


generally built using a pre-made which every element of the website is
website template package that has designed to fit your needs. Your
most of the common pages already strategy and content come first and the
designed. Website templates are design is built around it. A custom
created using a present background, design allows you to wrap the website
banners, main navigation links, and around your marketing strategy.
masthead areas. In theory, you just
you need to add content and your

<IN0719A22H> <NISHANT SHAH> Page | 26


Development of website for a Training Organization – Part 1
website is ready.
b. The first casualty is page load speed, b. By prioritizing performance and making
because you’re asking the browser it part of our workflow and process,
to read more code which naturally designers can help to make
takes a longer time. The second performance an essential design
issue is SEO. Search engines like a feature. We must shift to emphasize
websites codebase to be as clean as performance, instead of tacking it on at
possible, websites with lots of the end.
redundant code are penalised in
search engine rankings.

c. The limitations of website templates c. With a custom website, the only


extend to functionality as well. For limitations are only ever based on the
starters, not all templates are limits of the platform itself. If the trade-
designed to be fully responsive (i.e. off is increased project cost and
to work as well as on mobile devices lengthened timelines – an obvious
as they do on a desktop). result of advanced functionality
Considering that mobile traffic possibilities.
accounts for more than half of all
internet use these days,
responsiveness is no longer an
optional feature.
d. UX process must get the user input d. UX Design suffers from a fragmented
as much as possible at each phase reality. Web professionals and
where you will be able to incorporate employers all have a different idea as
user feedback in to your product to what it is and what skills are
design. expected.
e. Template sites usually have limited e. User Interface (UI) design is the
and fixed options for UI. They are process of making interfaces in
made up of common user interface software or computerized devices with
elements such as buttons and a focus on looks or style. Designers
navigation. They typically include aim to create designs users will find
core elements like icons, typography, easy to use and pleasurable. UI design
colors, and sometimes complex UI typically refers to graphical user
patterns like grids, cards, and interfaces but also includes others,
navigation. They are used to create such as voice-controlled ones.
mockup’s or prototypes of product
solutions.

 A simple WordPress application example:

<IN0719A22H> <NISHANT SHAH> Page | 27


Development of website for a Training Organization – Part 1

Bibliography

Beal, V., 2019. SEO - search engine optimization. [Online]


Available at: https://www.webopedia.com/TERM/S/SEO.html
[Accessed 5 August 2019].
Ferguson, N., 2018. What's The Difference Between Frontend And Backend Web
Development?. [Online]
Available at: https://careerfoundry.com/en/blog/web-development/whats-the-
difference-between-frontend-and-backend/
[Accessed 17 August 2019].
glossarytech, 2019. Front-end Technologies. [Online]
Available at: https://glossarytech.com/terms/front_end-technologies
[Accessed 17 August 2019].
Jaiswal, A., 2019. How front end and back end relate to presentation and. [Online]
Available at: https://www.coursehero.com/file/p52e11ns/How-front-end-and-back-
end-relate-to-presentation-and-application-layer-Front/
[Accessed 20 August 2019].
Martindale, J., 2019. What is FTP?. [Online]
Available at: https://www.digitaltrends.com/computing/what-is-ftp-and-how-do-i-use-
it/
[Accessed 5 August 2019].
Mitchell, B., 1999. What Does Dynamic DNS Mean?. [Online]
Available at: https://www.lifewire.com/definition-of-dynamic-dns-816294
[Accessed 5 August 2019].

<IN0719A22H> <NISHANT SHAH> Page | 28


Development of website for a Training Organization – Part 1
Noip, 1999-2019. No-ip. [Online]
Available at: https://www.noip.com
[Accessed 4 August 2019].
Penland, J., 2007. How To Get Started with jQuery: Make JavaScript Programming
Easier. [Online]
Available at: https://www.whoishostingthis.com/resources/jquery/
[Accessed 17 August 2019].
samaliya, G., 2019. Top 4 strategies by 100 SEO experts to rank your website.
[Online]
Available at: https://yourstory.com/mystory/3391545047-top-4-strategies-by-10
[Accessed 7 August 2019].
study.com, 2003-2019. IDE in Software: Definition & Examples. [Online]
Available at: https://study.com/academy/lesson/ide-in-software-definition-
examples.html
[Accessed 22 August 2019].

studytonight, 2013. Application Layer - OSI Model. [Online]


Available at: studytonight.com/computer-networks/osi-model-application-layer
[Accessed 20 August 2019].
swetha, B., 2019. Types of DNS Servers. [Online]
Available at: https://techspirited.com/types-of-dns-servers
[Accessed 4 August 2019].
technopedia, 2019. Web Authoring. [Online]
Available at: https://www.techopedia.com/definition/4926/web-authoring
[Accessed 21 August 2019].
website.com, 2004-2019. What is website builder? How does website builder work?.
[Online]
Available at: https://www.website.com/website-builder-and-web-design/what-is-
website-builder-how-does-website-builder-work
[Accessed 16 August 2019].

<IN0719A22H> <NISHANT SHAH> Page | 29

You might also like