ASSIGNMENT 1 BRIEF

Qualification BTEC Level 5 HND Diploma in Computing

Unit number 10: Website Design & Development

Assignment title Web Services Presentation and Guidebook

Academic Year 2018 – 2019

Unit Tutor

Submission
Issue date
date

IV name and
date

Submission Format:

Format: Two ten-minute Microsoft® PowerPoint® style presentations to be presented to your

colleagues
Submission Students are compulsory to submit the assignment in due date and in a way requested by
the Tutors. The form of submission will be a soft copy posted on
http://cms.greenwich.edu.vn/
Note: The Assignment must be your own work, and not copied by or from another student or
from books etc. If you use ideas, quotes or data (such as diagrams) from books, journals or other sources,
you must reference your sources, using the Harvard style. Make sure that you know how to reference
properly, and that understand the guidelines on plagiarism. If you do not, you definitely get failed

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.

Assignment Brief and Guidance:

Page 1
 You work as a full-stack web team leader for a leading creative web solutions and marketing company.
Your team is about to have a big contract to develop an online shopping mall.

One of the preparation tasks is to choose appropriate tools and techniques to realise a custom built
website.

As part of your role, you have been asked to create an engaging presentation to help train junior staff
members on basic web technologies including hosting and website management as well as server
technologies. Your presentation should not only explain basic knowledge in the domain but also points out
the impact of these technologies to website design, functionality, management or performance.

You also need to present more technical presentation to senior staff members to discuss about
frontend, back-end technologies as well as other tools, techniques and softwares used to develop website
from simple (online website creation tools) to complicated (custom built). Your presentation will be used
as guidance of choosing suitable tools and techniques for the next project.

Page 2
 Learning Outcomes and Assessment Criteria

Pass Merit Distinction

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 organised and
managed.
M1 Evaluate the impact of
common web development
technologies and frameworks
with regards to website design,
functionality and management.
LO1 & 2
D1 Justify the tools and
techniques chosen to realise a
custom built website.

P2 Explain the purpose and M2 Review the influence of

relationships between
communication protocols, server
hardware, operating systems and
web server software with regards
to designing, publishing and
accessing a website.
search engines on website
performance and provide
evidence-based support for
improving a site’s index value
and rank through search engine
optimisation.

LO2 Categorise website technologies, tools and software used

to develop websites

Page 3
 P3 Discuss the capabilities M3 Evaluate a range of
and relationships between tools and techniques available
frontend and back-end website to design and develop a custom
technologies and explain how built website.
these relate to presentation and
application layers.

P4 Discuss the differences

between online website creation
tools and custom built sites with
regards to design flexibility,
performance, functionality, User
Experience (UX) and User
Interface (UI).

Contents
P1. Identify the purpose and types of DNS, including explanations on how domain names are organised
and managed ............................................................................................................................................... 6
1. What is DNS: .................................................................................................................................. 6
2. Purposes and types of DNS: ........................................................................................................... 6
2.1. Purposes of DNS: ..................................................................................................................... 6
2.2. Types of DNS: .......................................................................................................................... 6
3. How domains name are organized: ................................................................................................ 8
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 ................ 9
1.Communication protocol: ............................................................................................................... 9
1.1. Definition: ............................................................................................................................... 9
1.2. Types of protocol web: ............................................................................................................ 9
2. Server hardware: ......................................................................................................................... 11
2.1. Definition: ............................................................................................................................. 11
2.2. Types of server hardware: ..................................................................................................... 12
2.3. Hardware Requirements for Web and Database Servers: ...................................................... 12
3.1. Definition: ............................................................................................................................. 13
3.2. Server operating system: ....................................................................................................... 13
3.3. Web server: ........................................................................................................................... 14
P3. Discuss the capabilities and relationships between front-end and back-end website technologies and
explain how these relate to presentation and application layers ................................................................ 15

Page 4
 1. Static web: ................................................................................................................................... 15
2. Dynamic web: .............................................................................................................................. 16
3. Front-end and back-end technologies: ......................................................................................... 16
3.1. Front-end technologies: ......................................................................................................... 16
3.2. Back-end technologies: .......................................................................................................... 17
4. Relationship between front-end and back-end:............................................................................ 17
5. Open Systems Interconnection (OSI) model: ................................................................................ 18
5.1. Presentation Layer: ................................................................................................................ 18
5.2. Application Layer: .................................................................................................................. 19
P4. Discuss the differences between online website creation tools and custom built sites with regards to
design flexibility, performance, functionality, User Experience (UX) and User Interface (UI) ....................... 21
1. WIX.COM: .................................................................................................................................... 21
2. Comparison table: ........................................................................................................................ 24
4.1. Definition: .................................................................................. Error! Bookmark not defined.
4.2. Capabilities: ................................................................................ Error! Bookmark not defined.
M1. Evaluate the impact of common web development technologies and frameworks with regards to
website design, functionality and management ......................................................................................... 25
1. Framework: .................................................................................................................................. 25
2. Types of framework: .................................................................................................................... 25
3. Classification of Framework Architectures: .................................................................................. 25
3.1. Model View Controller: .......................................................................................................... 25
3.2. Model-View-ViewModel (MVVM): ......................................................................................... 25
3.3. Push-based vs Pull-based: ...................................................................................................... 26
3.4. Three-tier organization: ......................................................................................................... 26
4. Some popular Web Frameworks: ................................................................................................. 26
design, functionality and management: .................................................................................................. 26
M2. Review the influence of search engines on website performance and provide evidence-based support
for improving a site’s index value and rank through search engine optimisation ........................................ 29
1. Definition of Search engines:........................................................................................................ 29
2. Search engines concepts: ............................................................................................................. 29
2.1. Relevance: ............................................................................................................................. 29
2.2. Importance: ........................................................................................................................... 29
2.3. Popularity: ............................................................................................................................. 30
3. Search engines Optimization (SEO): ............................................................................................. 30
3.1. On Page SEO: ......................................................................................................................... 30
3.2. Off page optimization: ........................................................................................................... 30

Page 5
M3. Evaluate a range of tools and techniques available to design and develop a custom built website. .... 33
D1. Justify the tools and techniques chosen to realise a custom built website . Error! Bookmark not defined.
Reference ................................................................................................................................................... 38

4. The impact of common web development technologies and framework with regards to website

P1. Identify the purpose and types of DNS, including explanations on how domain names are
organised and managed.
1. What is DNS:
The Domain Name System (DNS) is a hierarchical and egalitarian naming system for devices, utilities, or
other resources linked to the Internet or a private network. It connects different pieces of information to
domain names assigned to each of the participants. Most notably, it converts domain names into numerical
IP addresses, which are used for locating and identifying computing services and devices using the
underlying network protocols. Since 1985, the Domain Name System has become a vital component of the
Internet's functionality by offering a national, distributed directory service.
Through designating authoritative name servers for each domain, the Domain Name System assigns
the task of assigning domain names and mapping those names to Internet services. Other name servers can
be granted jurisdiction over sub-domains of a network administrator's assigned name space. This
mechanism was developed to prevent a single broad central database and offers distributed and
faulttolerant service.
The technical capability of the database service at its heart is also defined by the Domain Name
System. As part of the Internet Protocol Suite, it specifies the DNS protocol, which is a comprehensive
specification of the data mechanisms and data transmission exchanges used in the DNS.
2. Purposes and types of DNS:
2.1. Purposes of DNS:
The process of DNS resolution involves converting a hostname (such as www.example.com) into a
computer-friendly IP address (such as 192.168.1.1). An IP address is given to each device on the Internet,
and that address is necessary to find the appropriate Internet device - like a street address is used to find a
particular home. When a user wants to load a webpage, a translation must occur between what a user
types into their web browser (example.com) and the machine-friendly address necessary to locate the
example.com webpage.
In order to understand the process behind the DNS resolution, it’s important to learn about the
different hardware components a DNS query must pass between. For the web browser, the DNS lookup
occurs “ behind the scenes” and requires no interaction from the user’s computer apart from the initial
request.
2.2. Types of DNS:
DNS Query Types:

Page 6
 Figure 1: DNS Resolution

Recursive Query: In a recursive query, a DNS client provides a hostname, and the DNS Resolver “must”
provide an answer—it responds with either a relevant resource record, or an error message if it can't be
found. The resolver starts a recursive query process, starting from the DNS Root Server, until it finds the
Authoritative Name Server (for more on Authoritative Name Servers see DNS Server Types below) that
holds the IP address and other information for the requested hostname.
Iterative Query: In an iterative query, a DNS client provides a hostname, and the DNS Resolver returns
the best answer it can. If the DNS resolver has the relevant DNS records in its cache, it returns them. If not,
it refers the DNS client to the Root Server, or another Authoritative Name Server which is nearest to the
required DNS zone. The DNS client must then repeat the query directly against the DNS server it was
referred to.
Non-Recursive Query: A non-recursive query is a query in which the DNS Resolver already knows the
answer. It either immediately returns a DNS record because it already stores it in local cache, or queries a
DNS Name Server which is authoritative for the record, meaning it definitely holds the correct IP for that
hostname. In both cases, there is no need for additional rounds of queries (like in recursive or iterative
queries). Rather, a response is immediately returned to the client. DNS Servers Root DNS server:
The Root DNS servers are the ones who have the addresses of all the TLD domain servers. A request
first encounters the Root DNS servers while on its journey to obtain the IP address from the hostname.
There are 13 root domain name servers across the world as of 2016. This does not mean that there are
only 13 machines handling the load of the requests coming from all over the world — there are multiple
servers at ground level handling the load.
Different organizations manage the Root DNS servers:

Page 7
 Figure 2: List of root servers

TLD domain server:

These are the ones classified according to the Top-Level Domain. They are usually the next ones which
the iterative query hits after the Root DNS server. They store the TLD specific records for the hostname.
Let’s say if we are requesting an IP address of medium.com , then the TLD domain servers for “.com”
TLD are queried. The TLD domain servers return the address of the Authoritative DNS servers to the
Resolver.

Figure 3: TLD Name servers pointing to the Authoritative Name servers

Authoritative DNS server:

These are queried iteratively in the end by the Resolver. They store the actual records for type A, NS,
CNAME, TXT, etc.
Thus, they return the IP address of the hostname if available. If it is not available even in the
Authoritative DNS server, then they throw an error with the particular message and the process of
searching IP addresses across the Nameserver ends.
3. How domains name are organized:
Domains are managed by using a worldwide system of domain registrars and databases. The Domain
Name System (DNS) provides a mapping between human-readable computer hostnames and the IP
addresses used by networking equipment. An understanding of DNS and domain registrar basics will help
Account Administrators manage domains for SaaS applications and services, including Google Apps for

Page 8
Business and Microsoft Office 365 for professionals and small businesses. It’s helpful to have a basic
understanding of DNS and the difference between domain registrars and domain hosting services.
Understanding these terms to understand how to register and manage domains. Domain names are used in
URLs and email addresses. Domain names are constructed in levels. For example, mail.contoso.com is a
domain name with the following three levels:
• .com is the top-level domain.
• contoso is the second-level domain.
• mail is the third-level domain.

Figure 4: Structure of a Domain Name

Every domain consists of at least two parts: the actual domain name and the TLD or Top Level Domain.
In our domain.me example, “.ME” is the TLD of Montenegro and the “domain” part is a domain name or
domain label we chose for our site. Some other top-level domains like .COM, .NET, .ORG, .INFO, .US etc.
Domains are under the jurisdiction of ICANN, the Internet Corporation for Assigned Names and Numbers
which is responsible for creating new and maintaining current top-level domains.
Domain name consists of an actual name and the TLD suffix. There is also something called a
subdomain, which is the third-level of a domain.
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.
1.Communication protocol:
1.1. Definition:
Communication protocols are formal descriptions of digital message formats and rules.
Communications protocols can cover authentication, error detection and correction, and signaling.
They can also describe the syntax, semantics, and synchronization of analog and digital communications.
They are implemented in hardware and software. There are thousands of communications protocols that
are used everywhere in analog and digital communications. Computer networks cannot exist without them.
In networking, a communications protocol or network protocol is the specification of a set of rules for
a particular type of communication.
Communication protocols assist varied network devices to converse with each other by transmitting
the analog signals, digital signals, different files & process the data from one device to other devices. These
types of protocols are applicable in telecommunication & computer networks where suitable rules are
executed to transmit information from source to destination. The most vital protocols within networking
are TCP (Transmission Control Protocol) & User datagram protocol (UDP).
1.2. Types of protocol web:
Popular protocols include: File Transfer Protocol (FTP), TCP/IP, User Datagram Protocol (UDP),

Page 9
Hypertext Transfer Protocol (HTTP), Post Office Protocol (POP3), Internet Message Access Protocol (IMAP),
Simple Mail Transfer Protocol (SMTP),…

Page 10
 TCP/IP:
The Internet protocol suite is the conceptual model and set of communications protocols used in the
Internet and similar computer networks. It is commonly known as TCP/IP because the foundational
protocols in the suite are the Transmission Control Protocol (TCP) and the Internet Protocol (IP). During its
development, versions of it were known as the Department of Defense (DoD) model because the
development of the networking method was funded by the United States Department of Defense through
DARPA. Its implementation is a protocol stack.
The Internet protocol suite provides end-to-end data communication specifying how data should be
packetized, addressed, transmitted, routed, and received. This functionality is organized into four
abstraction layers, which classify all related protocols according to the scope of networking involved. From
lowest to highest, the layers are the link layer, containing communication methods for data that remains
within a single network segment; the internet layer, providing internetworking between independent
networks; the transport layer, handling host-to-host communication; and the application layer, providing
process-to-process data exchange for applications.
HTTP:
Hypertext Transfer Protocol (HTTP) is an application-layer protocol for transmitting hypermedia
documents, such as HTML. It was designed for communication between web browsers and web servers,
but it can also be used for other purposes. HTTP follows a classical client-server model, with a client
opening a connection to make a request, then waiting until it receives a response. HTTP is a stateless
protocol, meaning that the server does not keep any data (state) between two requests. Though often
based on a TCP/IP layer, it can be used on any reliable transport layer, that is, a protocol that doesn't lose
messages silently like UDP does. RUDP — the reliable update of UDP — is a suitable alternative.
HTTPS:
Hypertext Transfer Protocol Secure (HTTPS) is an extension of the Hypertext Transfer Protocol (HTTP).
It is used for secure communication over a computer network, and is widely used on the Internet. In HTTPS,
the communication protocol is encrypted using Transport Layer Security (TLS) or, formerly, Secure Sockets
Layer (SSL). The protocol is therefore also referred to as HTTP over TLS, or HTTP over SSL.
The principal motivations for HTTPS are authentication of the accessed website, and protection of the
privacy and integrity of the exchanged data while in transit. It protects against man-in-the-middle attacks,
and the bidirectional encryption of communications between a client and server protects the
communications against eavesdropping and tampering. The authentication aspect of HTTPS requires a
trusted third party to sign server-side digital certificates. HTTPS is now used more often by web users than
the original non-secure HTTP, primarily to protect page authenticity on all types of websites; secure
accounts; and to keep user communications, identity, and web browsing private.
FTP:
The File Transfer Protocol (FTP) is a standard communication protocol used for the transfer of
computer files from a server to a client on a computer network. FTP is built on a client-server model
architecture using separate control and data connections between the client and the server.[1] FTP users
may authenticate themselves with a clear-text sign-in protocol, normally in the form of a username and
password, but can connect anonymously if the server is configured to allow it. For secure transmission that
protects the username and password, and encrypts the content, FTP is often secured with SSL/TLS (FTPS) or
replaced with SSH File Transfer Protocol (SFTP).
2. Server hardware:
2.1. Definition:
Server hardware is a special computer designed for technical or scientific applications, provides
functionality for other programs or devices called "clients”. A single server can serve multiple clients, and a

Page 11
single client can use multiple servers. A client process may run on the same device or may connect over a
network to a server on a different device. Hardware can be defined as the physical components that a
computer system needs to function, including:
• Motherboard
• Central Processing Unit (CPU)
• Power Supply
• Random Access Memory (RAM)
• Hard Disk Drive (HDD)
• Video Card
• …
2.2. Types of server hardware:
Tower servers
Towers look very similar to desktop PCs.
A tower server is intended for use as a server and is built in an upright standalone cabinet. The cabinet
called a tower is similar in dimensions to the cabinet of a tower-style desktop computer. Tower servers are
different from rack servers or blade servers, which are generally rack-mounted. Tower servers are good as
they provide easier cooling as the overall component density is comparatively low. The disadvantages
include the fact that a set of tower servers is bulkier and weigh more than a blade server or set of rack
servers. Also, the cabling for a big set of tower servers can be difficult and time-consuming. Finally, many
air-cooled tower servers all placed in the same location can be noisy since each tower needs a dedicated
fan.
Rack servers
Racks are designed to accommodate multiple servers, and are specially constructed to fit into small
spaces. They are usually stacked right on top of one other, which makes cooling the devices difficult but is a
big plus point when it comes to scalability. Also the stacked model helps in consolidating network resources
and minimizing the floor space requirements.
In order to understand the hardware structure a bit better we need to understand what it consists of
and how it is installed. A rack server, also known as rack-mounted server, is essentially a computer used as
a server and is designed to be installed in a framework called a rack. The rack constitutes of multiple
mounting slots known as bays, which are designed to secure a hardware unit held in place with screws.
Unlike the tower server, the rack server configuration simplifies cabling among network components.
In an equipment rack filled with servers, a special cooling system is necessary to prevent excessive heat
build-up that would otherwise occur when many power-dissipating components are confined in a small
space.
Blade servers
Although blade servers are similar to rack servers in design, they are thinner, and also cost more than
the latter. A blade server is a server chassis which houses multiple thin, modular EC boards, known as
server blades. Each blade is actually a server, often dedicated to a single application. The server blades are
literally servers on a card that contain processors, memory, integrated network controllers, and other
input/output (IO) ports.

2.3. Hardware Requirements for Web and Database Servers:

Item Web server Web server Combined Web & Combined Web &
(minimal) (recommended) Database Server Database Server
(minimal) (recommended)

Page 12
 Processor 1,6 GHz CPU 2 x 1,6 GHz CPU 2 x 1,6 GHz CPU 4 x 1,6 GHz CPU
RAM 1,75 GB RAM 3,5 GB RAM 3,5 GB RAM 7 GB RAM
HDD 1x 40 GB of free space or more is recommended for the webshop data (non-system
drive is preferred)
1x 40 GB of free space or more is recommended for the software that is listed in
the software requirements (system drive)
Recommended
Microsoft Azure
Basic Small VM Basic Medium VM Basic Medium VM Basic Large VM
Virtual Machine
Configuration
Table 1: Hardware requirement for web and database server

3. Server software:
3.1. Definition:
Server software is a type of software that is designed to be used, operated and managed on a
computing server. It provides and facilitates the harnessing of underlying server computing power for use
with an array of high-end computing services and functions.
Server software is primarily built to interact with a server’s hardware infrastructure, including the
processor, memory, storage, input/output (I/O) and other communication ports. Depending on the type or
usage of the server, server software may be classified into various forms, such as the following: Web
server software
• Application server software
• Database server software
• Cloud computing server software
• File server software
Each of the above types of server software utilizes the server for different functions and services, but
all focus their primary objective on using inherent computer capacity and resources. Moreover, server
software may be for a physical or virtual/cloud server built on a physical server.
3.2. Server operating system:

Figure 5: Operating system server

A server operating system, also called a server OS, is an operating system specifically designed to run
on servers, which are specialized computers that operate within a client/server architecture to serve the
requests of client computers on the network.
The server operating system, or server OS, is the software layer on top of which other software
programs, or applications, can run on the server hardware. Server operating systems help enable and
facilitate typical server roles such as Web server, mail server, file server, database server, application server
and print server.

Page 13
 MOST POPULAR SERVER OPERATING SYSTEMS
Windows Server: A series of server operating systems developed by Microsoft Corporation. Windows
servers are more powerful versions of their desktop operating system counterparts and are designed to
more efficiently handle corporate networking, Internet/intranet hosting, databases, enterprise-scale
messaging and similar functions.
Linux Server: A Linux server is a high-powered variant of the Linux open source operating system that’s
designed to handle the more demanding needs of business applications such as network and system
administration, database management and Web services.
Linux servers are frequently selected over other server operating systems for their stability, security
and flexibility advantages. Leading Linux server operating systems include CentOS, Debian, Ubuntu Server,
Slackware and Gentoo. MAC OS X Server:
A server operating system version of the Mac OS X operating system for Apple computers. Mac OS X
Server, also known simply as OS X Server, is available as a $19.99 add-on for the OS X Mountain Lion (v10.8)
and Mavericks (v10.9) operating systems. The OS X Server add-on can be purchased through the Mac App
Store.
Mac OS X Server adds specialized server features to the regular OS X operating system such as file
sharing via the SMB2 protocol, mail and messages server capabilities, a Profile Manager for configuring and
managing client Mac computers and iOS devices, an Xcode Server tool for software development, a caching
server, backup server features for preserving data on client computers, a Wiki server for group
collaboration and communication, and more.
3.3. Web server:
Definition:
A web server is server software, or a system of one or more computers dedicated to running this
software, that can satisfy client HTTP requests on the public World Wide Web or also on private LANs and
WANs.
On the software side, a web server includes several parts that control how web users access hosted
files. At a minimum, this is an HTTP server. An HTTP server is software that understands URLs (web
addresses) and HTTP (the protocol the browser uses to view webpages). An HTTP server can be accessed
through the domain names of the websites it stores, and it delivers the content of these hosted websites to
the end user's device.
At the most basic level, whenever a browser needs a file that is hosted on a web server, the browser
requests the file via HTTP. When the request reaches the correct (hardware) web server, the (software)
HTTP server accepts the request, finds the requested document, and sends it back to the browser, also
through HTTP. (If the server doesn't find the requested document, it returns a 404 response instead.)

Figure 6: Web server

Page 14
 Every Website sits on a computer known as a Web server. This server is always connected to the
internet. Every Web server that is connected to the Internet is given a unique address made up of a series
of four numbers between 0 and 255 separated by periods. For example, 68.178.157.132 or 68.122.35.127.
When register a web address, also known as a domain name, such as example.com, developer have to
specify the IP address of the Web server that will host the site. They can load up with Dedicated Servers
that can support their web-based operations.
There are four leading web servers − Apache, IIS, lighttpd and Jagsaw.
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.
Internet Information Services (IIS):
The Internet Information Server (IIS) is a high performance Web Server from Microsoft. This web
server runs on Windows NT/2000 and 2003 platforms (and may be on upcoming new Windows version
also). IIS comes bundled with Windows NT/2000 and 2003; Because IIS is tightly integrated with the
operating system so it is relatively easy to administer it. 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.
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.

P3. Discuss the capabilities and relationships between front-end and back-end website
technologies and explain how these relate to presentation and application layers.
1. Static web:
A static web page (sometimes called a flat page or a stationary page) is a web page that is delivered to
the user's web browser exactly as stored, in contrast to dynamic web pages which are generated by a web
application. It contains Web pages with fixed content. Each page is coded in HTML and displays the same
information to every visitor. Static sites are the most basic type of website and are the easiest to create.
Unlike dynamic websites, they do not require any Web programming or database design. A static site can
be built by simply creating a few HTML pages and publishing them to a Web server.
Since static Web pages contain fixed code, the content of each page does not change unless it is
manually updated by the webmaster. This works well for small websites, but it can make large sites with
hundreds or thousands of pages difficult to maintain. Therefore, larger websites typically use dynamic
pages, which can be updated by simply modifying a database record. Static sites that contain a lot of pages
are often designed using templates. This makes it possible to update several pages at once, and also helps
provide a consistent layout throughout the site.

Page 15
 2. Dynamic web:
Dynamic websites contain Web pages that are generated in real-time. These pages include Web
scripting code, such as PHP or ASP. When a dynamic page is accessed, the code within the page is parsed
on the Web server and the resulting HTML is sent to the client's Web browser.
A dynamic website or dynamic web page contains information that changes, depending on the viewer,
the time of the day, the time zone, the viewer's native language, and other factors. It displays different
types of content every time a user views it. This display changes depending on a number of factors like
viewer demographics, time of day, location, language settings, and so on.
Most large websites are dynamic since they are easier to maintain than static websites. This is because
static pages each contain unique content, meaning they must be manually opened, edited, and published
whenever a change is made. Dynamic pages, on the other hand, access information from a database.
Therefore, to alter the content of a dynamic page, the webmaster may only need to update a database
record. This is especially helpful for large sites that contain hundreds or thousands of pages. It also makes it
possible for multiple users to update the content of a website without editing the layout of the pages.
3. Front-end and back-end technologies:
In the world of software development, what’s built falls into two categories: everything that’s seen by
the user and the processes happening in the background. What we see and interact with as the visitors of a
website, or as the end user of a mobile app, is considered front-end technology. All the behind-the-scenes
activity that deliver the data and the speed with which that data is delivered falls into back end technology.
3.1. Front-end technologies:
The front end stack is made up of many different languages and libraries. While these vary from
application to application, there are only a few generic languages understood by all web browsers. These
three main front-end coding languages are HTML, CSS and JavaScript.
Together, they create the underlying scaffolding that web browsers use to render the web pages that
we interact with every day. All other libraries and front-end engineering are built upon these three main
languages, which makes them must-have skills for any front-end developer.
Consider developing a website as build a housem, the initial UX design is the blueprint; HTML is the
basic structure; the CSS is the paint, fixtures, and other aesthetic decisions that make the house look
attractive; JavaScript is the inner workings of the house (lights, heating, water). a. HTML:
HTML is the first layer of any website and creates the code version of a wireframe on a webpage.
These wireframes exist for the styles in CSS and all the bells and whistles in JavaScript.
The letters in HTML stand for Hypertext Markup Language. The markup piece of the name is the most
important to remember, as markups are the proper name for HTML elements, which are also called HTML
tags. HTML as a whole is the markup that creates the basic elements we view on a website.
However, it’s important to remember that HTML isn’t particularly intelligent. It doesn’t make decisions
or capture information on its own. It simply renders the scaffolding of the web pages. b. CSS:
Cascading Style Sheets, or CSS, is what gives our HTML visual appeal and draws in the user. To put it
simply, style sheets dictate the presentation of HTML elements on a page. c. Javascript:
JavaScript is a runtime language for web browsers. This means that when user open a web page, the
page will load both the foundational JavaScript that is standard with the page and any new JavaScript
added to a page. The new JavaScript will load in parallel with it and can perform actions and make
decisions.
JavaScript differentiates from back-end languages such as Java or Ruby in that it’s visible to the user
and is not compiled ahead of time to run secretly behind the curtain. It’s the true programming language of
front-end engineering and the underlying language that ties everything together.

Page 16
 3.2. Back-end technologies:
Back end development refers to the server side of an application and everything that communicates
between the database and the browser.
Back end Development refers to the server side of development where developer are primarily
focused on how the site works. Making updates and changes in addition to monitoring functionality of the
site will be primary responsibility. This type of web development usually consists of three parts: a server, an
application, and a database. Code written by back end developers is what communicates the database
information to the browser. Anything can’t see easily with the eye such as databases and servers is the
work of a back end developer. Back end developer positions are often called programmers or web
developers.
Many back end developers know front end languages such as HTML and CSS but need to use languages
such as Java, PHP, Ruby on Rails, Python, and .Net to get the back end job done. Back end developers are
most focused on a site’s responsiveness and speed. These languages are used to create dynamic sites
which are different from static sites in that these types of websites store database information. Content on
the site is constantly changing and updating. Examples of dynamic sites include Facebook, Twitter, and
Google Maps. Back-end Tools
The core concern of back-end developers is creating applications that can find and deliver data to the
front end.
Many of them use reliable enterprise-level databases like Oracle, Teradata, Microsoft SQL Server, IBM
DB2, EnterpriseDB and SAP Sybase ASE.
There’s also a number of other popular databases including MySQL, NoSQL and PostgreSQL.
There are a wide variety of frameworks and languages used to code the application, such as Ruby on
Rails, Java, C++/C/C#, Python and PHP.
4. Relationship between front-end and back-end:
The term “front-end” refers to the user interface, while “back-end” means the server, application and
database that work behind the scenes to deliver information to the user. The user enters a request through
the interface. It’s then verified and communicated to the server, which pulls the necessary data from the
database and sends it back to the user.
Frontend and backend development are quite different from each other, but still, they are two aspects
of the same situation. The frontend is what users see and interact with and the backend is how everything
works.
The frontend is the part of the website users can see and interact with such as the graphical user
interface (GUI) and the command line including the design, navigating menus, texts, images, videos, etc.
Backend, on the contrary, is the part of the website users cannot see and interact with.
The visual aspects of the website that can be seen and experienced by users are frontend. On the other
hand, everything that happens in the background can be attributed to the backend.
Languages used for the front end are HTML, CSS, JavaScript while those used for the backend include
Java, Ruby, Python, .Net.

Page 17
 Figure 7: Difference of front-end and back-end

5. Open Systems Interconnection (OSI) model:

The OSI Model (Open Systems Interconnection Model) is a conceptual framework used to describe the
functions of a networking system. The OSI model characterizes computing functions into a universal set of
rules and requirements in order to support interoperability between different products and software. In
the OSI reference model, the communications between a computing system are split into seven different
abstraction layers: Physical, Data Link, Network, Transport, Session, Presentation, and Application.
Created at a time when network computing was in its infancy, the OSI was published in 1984 by the
International Organization for Standardization (ISO). Though it does not always map directly to specific
systems, the OSI Model is still used today as a means to describe Network Architecture.
5.1. Presentation Layer:
The presentation layer (data presentation layer, data provision level) sets the system-dependent
representation of the data (for example, ASCII, EBCDIC) into an independent form, enabling the
syntactically correct data exchange between different systems. Also, functions such as data compression
and encryption are guaranteed that data to be sent by the application layer of a system that can be read by
the application layer of another system to the layer 6. The presentation layer. If necessary, the
presentation layer acts as a translator between different data formats, by making an understandable for
both systems data format, the ASN.1 (Abstract Syntax Notation One) used.
Services:
• Data conversion

Page 18
 • Character code translation
• Compression
• Encryption and Decryption Sublayers:
The Presentation OSI Layer is usually composed of 2 sublayers that are:

Table 2: Presentation sublayers:

5.2. Application Layer:

An application layer is an abstraction layer that specifies the shared protocols and interface methods
used by hosts in a communications network. The application layer abstraction is used in both of the
standard models of computer networking; the Internet Protocol Suite (TCP/IP) and the Open Systems
Interconnection model (OSI model).
Although both models use the same term for their respective highest level layer, the detailed
definitions and purposes are different.
In the OSI model, the definition of the application layer is narrower in scope. The OSI model defines
the application layer as the user interface responsible for displaying received information to the user. In
contrast, the Internet Protocol model does not concern itself with such detail. OSI also explicitly
distinguishes additional functionality below the application layer, but above the transport layer at two
additional levels; the session layer and the presentation layer. OSI specifies a strict modular separation of
functionality at these layers and provides protocol implementations for each layer.
Popular Application Layer Protocols:
9P Plan 9 from Bell Labs distributed file system protocol
AFP Apple Filing Protocol

Page 19
APPC Advanced Program-to-Program Communication
AMQP Advanced Message Queuing Protocol
Atom Publishing Protocol
BEEP Block Extensible Exchange Protocol
Bitcoin Digital currency
BitTorrent peer-to-peer file sharing
Figure 8: Application Layer Protocols:

Page 20
P4. Discuss the differences between online website creation tools and custom built sites with
regards to design flexibility, performance, functionality, User Experience (UX) and User Interface
(UI).
1. Custom website creation tools:
The most common way to start a website would be to set up a WordPress site and apply a template
bought from ThemeForest, Template Monster, or Elegant Themes. These websites provide a broad range
of different types of website templates available for purchase. Not all of the themes/templates out there
are 100% responsive.
There are also services like Wix or Squarespace that also provide a theme and allow you to edit within
the frame of the website. These can help you get a website up pretty fast and easily. However, there are
limitations on the options that are available for more complex features such as forms or e-commerce
functions.
One thing to keep in mind is that templates and themes normally come with built-in features so that
the user can have more customizability but this ultimately weighs down the website in terms of load speed
and SEO performance. It’s very likely that you’ll have to put up with features, designs, and functions that
wont necessarily fit your brand or business. You could pay a web development company to fix it, but that’s
like asking a certified ford mechanic to take a look at your Toyota since the site most likely wont be written
in the same code format. And even if the developer does fix the site to your liking… Once an update comes
out for wordpress or that theme itself, your website will run into some display issues because of a former
customization made by a developer.
With the design of most templates, what you see is what you get. You can change the colors and
maybe the fonts but the layout is pretty set. If you really love the layout and design and do not have a
desire to change it, a template could work in your favor. Start-up companies and DIYers often need a
website up rather quickly and on a low budget. Website templates and platforms like WordPress,
Squarespace and Wix are often plug and play.
THE PROS AND CONS OF TEMPLATE SITES
A template site is often a great option if the project is simple – for example, a website that’s basically
an online brochure. Advantages of templates include:
Template sites are significantly less expensive than custom sites. Using a template means that most of
the website coding is in place without your developer lifting a finger. That’s why template sites are much
more affordable than custom sites, although your developer will still have to spend time customizing the
template and implementing the content.
Template sites are quite fast to implement. Again, this is because much of the coding is done. A
template site can generally be launched in a matter of weeks, if the content is pretty much ready to go
(this is, however, often not the case — and is often a significant barrier to getting a site launched) and your
developer’s schedule is clear. Depending on the complexity of what you want, a custom site will take
significantly longer.
Templates are getting more sophisticated. The best templates are well-designed, robust, and allow for
a reasonable amount of customization.
There can be significant disadvantages to using templates, especially if your developer isn’t particularly
skilled. These can include:
Your site may look like everyone else’s. Skilled designers can minimize this problem with creative use
of graphics and customization within the template, but the most popular themes have been downloaded
thousands of times.
You’re limited in your graphics design and navigation capability. A significant degree of customization
is possible in templates, especially the more expensive ones, but you are largely stuck with the parameters
Page 21
of the template for your graphics design and navigation. This can be simple design parameters, like limited
choices in icons, or more serious issues like the inability to have a functionality you want in the way that
you’d like it to work.
Some templates aren’t especially well-made or maintained. This can’t be emphasized enough —
template sites are only as good as the template itself! Virtually all templates nowadays (as of May 2017)
are designed to be responsive — that is, they respond to the device used to view them and automatically
optimize to that device’s screen size. However, WordPress is updated frequently to stay on top of security
concerns — major updates occur a few times a year, and security patches can come out as often as
needed. Unfortunately, not all template developers update their templates to keep up with the changes. If
your template isn’t updated regularly, your template might break when you or your developer install a
WordPress update. That puts you in the position of having to run an older version of WordPress, which can
make your site more vulnerable to hacking. Down the road this can also lead to problems hosting your site,
as quality website hosting plans are not willing to host sites that are running severely out-of-date versions
of WordPress. Also, certain external tie-ins that may be featured on your site, such as PayPal integration,
will update automatically and may cease to work with older versions of WordPress. Fortunately, more
expensive, better-designed templates are less likely to develop this problem — to minimize the risk, you
should carefully check reviews and history of both the template and its developer before making a choice.
Functionality can be limited in template sites. Adding e-commerce and other kinds of custom
applications is difficult or impossible in template sites.
Security can be an issue. People who enjoy writing malicious code find template websites especially
tempting, because they represent the opportunity to hack multiple sites at once. Developers will
sometimes customize a template site using plug-ins (a plug-in is a bit of code that adds a particular
functionality) in an attempt to improve WordPress security in particular, but unless your developer really
knows what he/she is doing, this can actually make the problem worse. In addition, if you choose a
template that isn’t regularly updated to keep up with WordPress, your site will become more vulnerable to
hackers.
2. Custom built sites:
Custom built sites allow you to be creative in every aspect of creating your website. It allows you to
create your own personalization and show your companies personality and culture through the design of
the website. Website creation tools has more of a set template. While you can choose the design and
layout of the website, it definitely takes some of the creativity out of it. I suggest using the website twik for
all things personalization.
Custom built websites involve a team behind your business. It starts with a creative process to
understand who is your target audience, who do you want to reach, how you want/need the website to
function and how do you want to look on the internet.
SEO plays a big role in the success of any website. There are rules to follow when building a site and
not all themes are capable of abiding by these rules. This is why custom built websites are so much more
superior, the developer is able to optimize the site during creation to allow for google and other search
engines to read each page to give the end user a more relevant search result thus, giving custom built sites
naturally a better ranking on the system. This goes beyond keyword research.
Custom built websites tend to take longer than themes, this is because everything is being built and
catered to a particular business. It will save time in the long run because when its built from the ground up
it’s a lot easier to customize the site to ensure your site does exactly what you want it to do. Custom
designs allow your site to be responsive across all devices (such as phones, tablets, laptops, etc.) &
browsers.
Advantages:

Page 22
 There are no limitations on graphics and functionality. If you can imagine it, a custom site can be
programmed to do it.
Custom-built sites are flexible and can grow with you. Down the road you might need significant
changes to not only the design, but also the functionality of your site. If you’re working with a template
site, you may have to start over in the event of major changes. It’s much easier to add new features to a
custom site.
Custom-built sites are easier to update as WordPress is updated. Your developer will be able to fix any
problems that might occur as WordPress is updated, because they can change the coding of the site. If a
WordPress update breaks a template site that hasn’t been maintained by the template developer, you’re
out of luck and are stuck running an older version of WordPress. This makes your site more vulnerable to
hackers.
Search engine optimization is better in custom-built sites. Web developers who build sites from
scratch have the technical knowledge to make sure your site is optimized for search engines. This is a key
part of your digital promotion, especially if you are targeting a specific geographic area or service/product
segment.
Custom-built sites are necessary for e-commerce. If you want an online store that’s more than just a
couple of items, a template site is inadequate.

Page 23
3. Comparison table:

Page 24
 Online creation tools Custom built website

Design flexibility ✓
Performance ✓
Functionality ✓ ✓
UX ✓ ✓
UI ✓ ✓
Price ✓
Security ✓
Development time ✓

M1. Evaluate the impact of common web development technologies and frameworks with
regards to website design, functionality and management.
1. Framework:
A web framework (WF) or web application framework (WAF) is a software framework that is designed
to support the development of web applications including web services, web resources, and web APIs. Web
frameworks provide a standard way to build and deploy web applications on the World Wide Web. Web
frameworks aim to automate the overhead associated with common activities performed in web
development. For example, many web frameworks provide libraries for database access, templating
frameworks, and session management, and they often promote code reuse. Although they often target
development of dynamic web sites, they are also applicable to static websites.
A web development framework can be built upon a pre-defined infrastructure such as the Linux,
Apache, MySQL and PHP (LAMP) stack.Once defined and implemented the core CMS features and functions
can be difficult to modify.
2. Types of framework:
3. Classification of Framework Architectures:
The architecture of a framework defines the relation between the different components of the
framework. The architecture decides how the various layers will interact with each other. It is important to
use a well-understood architecture as it largely defines how application functions.
There is generally the View layer, which deals with the visual elements of a site and the Model layer
which holds the application logic and data. Some common architectures that are used by web application
frameworks are the MVC and MVVM.
3.1. Model View Controller:
Many frameworks for web apps work on Model View Controller (MVC) models. To split data models
with business standards from the user interface, most of the frameworks adopt the MVC architecture. It is
a good practice as it usually fosters code reuse, modularized code, and permits various interfaces.
The model allows varied views to be exhibited in web applications, namely, web service interfaces for
remote applications and web pages for individuals.
3.2. Model-View-ViewModel (MVVM):
Frameworks, such as KnockoutJS and VueJS use the Model-View-ViewModel or the Model-View-Binder
architecture model. In this architecture, the view layer acts as a controller and converts the data objects
from the Model layer into manageable components. Since the View layer handles all the user requests
directly, the data binding is much more straightforward.

Page 25
 3.3. Push-based vs Pull-based:
Generally, MVC frameworks observe a push-based architecture, also known as ‘action-based.’ These
types of frameworks adopt actions that do the necessary processing and then accordingly ‘push’ the data
to a view layer to furnish the outcome. Some examples of frameworks are Spring MVC, Symfony, Ruby on
Rails, Sails.js, Django, CodeIgniter, and Diamond.
Another option to this architecture is ‘pull-based,’ also termed as ‘component-based.’ This is a kind of
framework that starts with the view layer, which in turn can ‘pull’ outcomes from diverse controllers as
required. Some examples of pull-based architectures are JBoss, Tapestry, Lift, Wicket, Micro, and JavaServer
Faces.
Web development frameworks like Struts, ZK, Play, and RIFE use both push-based and pull-based
application controller calls.
3.4. Three-tier organization:
The three-tier organization applications are well-regulated in three physical tiers: application,
database, and client-side. This database is usually a relational database.
The application possesses business logic that runs on a server and corresponds with the client utilizing
HTTP. The client uses a web browser that runs the HTML code developed by the application layer.
4. Some popular Web Frameworks:

Figure 9: Popular web framework

5. The impact of common web development technologies and framework with regards to website
design, functionality and management:
While the owner don’t have to be an expert in these systems to manage the website project properly,
it is a good idea to familiarize with the basics of the available technologies and their pros and cons in order
to understand the long-term impact they will have on their website.
Aa framework is a group of libraries of optimized and field-tested code that provide building blocks can
be used to construct a website. They allow reusing code from common functions without “reinventing the
wheel”. Chances are, web developer has a framework or platform that they use most often. Most modern

Page 26
complex websites rely on frameworks since they make web development more time- and cost-effective.
They routinely have pre-written solutions for most of the functions and features commonly used on
websites.
While using a hosted website-builder service may provide premade templates and the ability to build a
website to those who are unfamiliar with web design and web development, they are also extremely
limiting when it comes to creating a unique and one-of-a-kind website layout for an online presence for
business and branding. While web development time is decreased it is very difficult to control things like
SEO and site analytics on these types of websites.
As time passes, new trends arrive. This is not only true for those who have an avid interest in the
fashion industry, but for all industries, including web development. Designing websites requires the ability
to brainstorm creatively, work with color theory, and appeal to users based on their wants, needs, and
personal preferences.
Having the ability to monitor and track the latest trends in design, applications, functionality and the
internet is essential when developing websites. Without the ability to keep up on the latest design trends,
the website may quickly become outdated and no longer relevant to its intended audience.
Changes in technology like screen sizes or the influences of applications has a profound effect on what
users expect when they navigate a website. Web development that is not forward-thinking can leave some
of the audience to think that they do not care about their needs or bother to keep up with expectations.
Web frameworks are used to reduce time and cost of software development since codes are basically
re-used. This mainly refers to basic features such as database connections, website templates, caching
methods, and security features that are provided by frameworks as prefabricated code modules. Thus, the
development effort is limited to the specific program code of a new web application. Since most web
frameworks are offered as free software, there are usually no purchase costs.
In addition, frameworks promote the generation of clean source codes, since developers can rely on
tried and tested building blocks for standard features. The program components provided by frameworks
usually go through numerous development cycles and are continuously optimized. Those in the community
act as testers and co-developers. This way, security gaps in new components are quickly found in large
projects and rectified. Users and developers converse in forums dedicated to the project with some of
these being moderated by support teams.
Disadvantages:
The web contains an almost unmanageable number of frameworks for web development. These differ
in basic design principles as well as in the features they offer. Different software projects may therefore
require the use of different web frameworks. Developers are faced with the problem of selecting the
appropriate framework for the intended project. There are quick-fix compromises, in which the intended
software project is adapted to the framework’s limits. Since frameworks are designed as universal
solutions, developers rarely use all the features of a given structure. Depending on the scope of the
framework, an application may contain more code than necessary.
In addition, the dependency in the respective web framework is seen as disadvantageous by the
developer. In individual cases, using a framework is linked to specific license terms, which can be
problematic when any further development of the framework is stopped. Since developers have to
familiarize themselves with the structure of the respective program framework and the usage possibilities,
they need time to adapt. Luckily ready-made features and code snippets save some time. Critics
acknowledge that there’s the risk of basic knowledge becoming lost. Users who only program on the basis
of frameworks may deal less frequently with programming languages.

Page 27
 Since the source code of most web frameworks is freely accessible, everyone has the opportunity to
get acquainted with it. If applications are developed for company use based on publicly available code
components, they may be more transparent to hackers than apps whose source code isn’t public.

Page 28
M2. Review the influence of search engines on website performance and provide evidencebased
support for improving a site’s index value and rank through search engine optimisation.
1. Definition of Search engines:
A search engine is a software system that is designed to carry out web searches (Internet searches),
which means to search the World Wide Web in a systematic way for particular information specified in a
textual web search query. The search results are generally presented in a line of results, often referred to
as search engine results pages (SERPs) The information may be a mix of links to web pages, images, videos,
infographics, articles, research papers, and other types of files. Some search engines also mine data
available in databases or open directories. Unlike web directories, which are maintained only by human
editors, search engines also maintain real-time information by running an algorithm on a web crawler.
Internet content that is not capable of being searched by a web search engine is generally described as the
deep web.
A search engine maintains the following processes in near real time:
• Web crawling
• Indexing
• Searching
2. Search engines concepts:
2.1. Relevance:
This is the basic first question that a search engine has to deal with when looking at any web page.
What’s it about? Search engines want to know this because it helps them respond to user search queries
with pages that are relevant to that query.
There are many signals that can be used to determine the relevance of a given page. Some of these
include:
• The title tag of the web page. The title for any document should be a leading indicator its
contents.
• Semantic analysis of the content. This is not tied as much as it used to be to specific
keyword phrases, but the general relevance of a page is analyzed based on the words and
phrases used.
• Anchor text used in links to the page. The text to click on in a link also acts as a label for
what user would expect to find once get to that page.
• Topic matter of third party web pages containing links to the page.
• Topic matter of the site on which the page resides.
• How users respond to the content in the search engine results pages (SERPs).
2.2. Importance:
Search engines also try to determine how important each of the pages relevant to a particular search
query are. This is how they determine which page should rank first, which one to rank second, and so forth.
Historically, the main driver of this factor has been inbound links. There are many who believe that
social signals are a big player here, but I’m not one of them. Personally, I think that links remain the
primary driver of importance calculations. Impact of Importance
Creating great products or great content is incredibly valuable for many reasons. For one thing, people
with web sites may choose the website if they believe it to be important.
However, it isn’t easy to create fantastic stuff. Basic PR and content marketing techniques are very
valuable in getting the word out, and can lead to people engaging with and sharing the content.

Page 29
 2.3. Popularity:
For certain types of queries, importance isn’t as interesting to determine as popularity. For example,
for a search query such as [hottest movies], it’s a clear request for something that is the most popular.
Popularity is also be a powerful factor for trending topics, such as breaking news. This is a place where
social media signals could be an important factor, as lots of social shares of a particular news article is
something that the search engines might pick up on and use.
As with relevance, user SERP behavior could be a strong indicator as well. A search engine could try
ranking news articles in a particular order and based on user click patterns adjust that order.
Impact of Popularity
There are many things that can cause something to become popular, but one of the best ways to do
this is to develop content that will create an emotional reaction in the viewer.
If you can create images that “tell a story,” that by itself can help make a page on your site more
popular. Videos can also be quite effective.
Creating popular content is an art form, so you will need to have a strong creative bent to succeed at
this, and even then, you will need to test many different things and evolve over time to find a winning
formula.
3. Search engines Optimization (SEO):
Search engine optimization (SEO) is the process of improving the quality and quantity of website traffic
to a website or a web page from search engines. SEO targets unpaid traffic (known as "natural" or
"organic" results) rather than direct traffic or paid traffic. Unpaid traffic may originate from different kinds
of searches, including image search, video search, academic search, news search, and industry-specific
vertical search engines.
As an Internet marketing strategy, SEO considers how search engines work, the computerprogrammed
algorithms that dictate search engine behavior, what people search for, the actual search terms or
keywords typed into search engines, and which search engines are preferred by their targeted audience.
SEO is performed because a website will receive more visitors from a search engine when websites rank
higher on the search engine results page (SERP). These visitors can then potentially be converted into
customers.
Classification of SEO
The process of SEO is broadly classified into two broad categories.
On Page SEO
Off Page SEO
3.1. On Page SEO:
On Page SEO states the process of optimizing the content on your web site pages, by making suitable
modifications as per the algorithms of the Search Engines so that the search engine gets convinced about
the relevancy of your website for a particular theme.
On Page SEO involves practices to give right markups to the website's content while stressing on the
primary keywords and the theme of the website. Markups states that the documents should be properly
formatted along with the HTML tags like Meta tags, header tags, bold, italics, ordered lists etc.
3.2. Off page optimization:
Just as On page optimization, Off page optimization techniques also have the same objective of
increasing the traffic influx rate of the website. However, these techniques are not practised directly on the
page or .html file. Mentioned below are the most popular and efficient Off page SEO Techniques. Article
Marketing
• Link building

Page 30
 • Directory Submissions
• Forum Posting
• Press Release
• Blogging
4. Technical solution to improve website index based on SEO:
4.1. Publish Relevant Content:
Quality content is the number one driver of your search engine rankings and there is no substitute for
great content. Quality content created specifically for your intended user increases site traffic, which
improves your site's authority and relevance. Fine-tune your web writing skills. Keywords
Identify and target a specific keyword phrase for each page on your website. Think about how your
reader might search for that specific page with search terms like: masters in engineering
management what is biomedical engineering?
• title IX resources
• northern lights
• how to apply for scholarships?
• application deadline Multiple Keyword Phrases
It is very difficult for a webpage to achieve search engine rankings for multiple keyword phrases—
unless those phrases are very similar. A single page may be able to rank for both "biomedical engineering
jobs" and "biomedical engineering careers". Ranking for "student affairs" and "dean of students" or
"gender discrimination" and "violence reporting procedures" with a single page is unlikely.
If you want to rank for multiple keywords phrases with your website, you will need to make a separate
webpage for each keyword phrase you are targeting.
Placing Keywords
Once your keyword phrase is chosen for a given page, consider these questions:
• Can I use part or all of the keyword phrase in the page URL (by using keywords in folders)?
• Can I use part or all of the keyword phrase in the page title?
• Can I use part or all of the keyword phrase in page headings and subheadings?
Answering yes to these questions can improve your search engine ranking. Be natural and userfriendly,
though. For instance, you do not want the word "engineering" to show up three or more times in the URL
or have the phrase Northern Lights repeated in the page title and every heading. Readability and usability
still trump search engine optimization.
Content
Beyond page URL, title, and headings, content is most influential on search engine rankings. Repeat
your keyword phrase several times throughout the page—once or twice in the opening and closing
paragraphs, and two to four more times throughout the remaining content.
Don't forget to use bold, italics, heading tags (especially an H1), and other emphasis tags to highlight
these keyword phrases—but don't overdo it. You still want your language and writing style to read
naturally. Never sacrifice good writing for SEO. The best pages are written for the user, not for the search
engine.
4.2. Update Your Content Regularly:
You've probably noticed that we feel pretty strongly about content. Search engines do, too. Regularly
updated content is viewed as one of the best indicators of a site's relevancy, so be sure to keep it fresh.
Audit your content on a set schedule (semesterly for example) and make updates as needed.
4.3. Metadata:

Page 31
 When designing your website, each page contains a space between the <head> tags to insert
metadata, or information about the contents of your page. If you have a CMS site originally produced by
the UMC web team will have pre-populated this data for you. However, it is important for you to review
and update Metadata as your site changes over time.
Title Metadata
Title metadata is responsible for the page titles displayed at the top of a browser window and as the
headline within search engine results. It is the most important metadata on your page.
For those with a CMS website, the web team has developed an automated system for creating the
meta title for each webpage based on your page title. This adds to the importance of using well-thoughtout
page titles rich with keyword phrases.
Description Metadata
Description metadata is the textual description that a browser may use in your page search return.
Think of it as your site's window display—a concise and appealing description of what is contained within,
with the goal of encouraging people to enter. A good meta description will typically contain two full
sentences. Search engines may not always use your meta description, but it is important to give them the
option.
Keyword Metadata
Keyword metadata is rarely if ever used to tabulate search engine rankings. However, you should
already know your keyword phrases, so it doesn't hurt to add them into your keyword metadata. You'll
want to include a variety of phrases. As a general rule, try to keep it to about 3-7 phrases with each phrase
consisting of 1-4 words. A great example would be "computer science degree."
4.4. Have a link-worthy site:
Focus on creating relevant links within the text. Instead of having "click here" links, try writing out the
name of the destination. "Click here" has no search engine value beyond the attached URL, whereas
“Michigan Tech Enterprise Program” is rich with keywords and will improve your search engine rankings as
well as the ranking of the page you are linking to. Always use descriptive links by linking keywords—it not
only improves search engine optimization, but also adds value to your readers, including those with
disabilities or who are using screen readers.
4.5. Use alt tags:
Alt tags provide a text alternative for an image for search engines and those using screen readers to
access a web page. The original purpose and use of alt text was to help make images accessible to the blind
and those with impaired sight.
Quite simply, they are a text description for each image that clearly describes what it shows.
Alt text is the descriptive content that sits within the alt attribute given to an image tag. Alt text can
help improve your site's SEO performance by adding further relevancy signals to a web page and help
Google better understand the contents of an image and help it rank.
Crafting descriptive alt tags doesn't need to be difficult. It is best not to overthink it too much and be
led by the content of the image. Often, writing great alt text means using common sense to describe what
the image shows. We can break this down to just three best-practice rules you should follow. THE 3
RULES OF ALT TAGS
1. Be Descript and Specific
Alt text should always describe the contents of an image in as much detail as possible.
The more specific you can be when describing an image, the better, as this will help it rank on Google
Image Search and give context as to how it relates to your page's content.

Page 32
 2. Be Relevant
Alt tags aren't a place to spam exact-match keywords and should be used to describe exactly what an
image shows.
Alt tags should absolutely be relevant.
Try and write alt text that describes images in a way that relates to the topic of the page that it is on,
especially when an image is more generic in nature and isn't as specific as others.
3. Be Unique
Don't use your page's main target keyword as the alt tag for every image on the page.

Always be sure to write unique alt text that describes the specific contents of the image, rather than
repeating the contents of another.

Figure 10: Importance of each factor in SEO (2013)

M3. Evaluate a range of tools and techniques available to design and develop a custom built
website.
1. Tools:
As consumers access websites from a growing variety of devices, responsive Web design becomes
increasingly important. Responsive web design is about building a Web presence that scales and functions
well on desktop, tablet and mobile devices. The viewing size of each device is different, which creates

Page 33
challenges for Web designers, not only because of the designs themselves but also due to the need to
manage website components as they scale from one device to another.
One example is how to display images. What looks good on a desktop probably won't work on a
mobile device, so Web developers must consider issues such as proportions, text, image sizes and
compression. Another factor is how various components of a Web page will be organized on a smaller
screen with different dimensions.
1.1. Adobe Dreamweaver:
Adobe Dreamweaver CS6 has the capability to build fluid layouts. This lets you create three layouts—
for the Web, tablets and mobile devices—all at the same time. Add Media Queries to these fluid layouts
and you can easily control the appearance of your pages. Media queries let designers target different
styles to different devices; one example would be a group of styles that only take effect when the screen
size is larger than 800 pixels.
Dreamweaver lets you build both mobile apps and websites. The chief difference is that some mobile
sites can be designed to display on all mobile devices. In contrast, mobile apps can offer more
functionality, but they have to be custom built one each device. This can quickly get expensive. You can
learn more about the differences and costs involved with each approach from the New Media Campaigns
blog. Recent Dreamweaver updates include enhancements to Fluid Grid layouts and Web font integration.
All Fluid Grid elements have been placed within the Structure category under the Insert menu. New
options include Ordered, Unordered and List. Options for DIV elements such as duplicate, lock and swap
now appear when you select an element. You can nest fluid elements as well. Fluid Grid elements will work
with Web apps as well as mobile sites.
In addition, it's now possible to add from the library of Adobe Edge Web Fonts in your layouts. When
you do, a script tag is added. This tag references a JavaScript file that downloads the font from the Creative
Cloud server, where it's stored in the browser's cache. Edge Web Fonts are powered by Typekit by Adobe,
so they can be integrated with Adobe Edge tools.
1.2. Adobe Edge Reflow:
Edge Reflow, in development by Adobe, uses a grid (or box) system that scales with your design.
When you reduce the size of your layout, the interface can adjust the positioning of site element and
the boxes of the design can move one below the other as the layout changes.
Edge Reflow lets you build either a desktop or mobile site first. It also contains a toggle so you can
easily switch between layouts, if necessary. Depending on whether you create pixel-based or percentage-
based boxes, these elements will either scale with the layout or remain at a fixed size.
Let's say you have several horizontal boxes on the screen, each at a fixed size. As you decrease the
width of the workspace, the box on the right will begin to move to the edge of the layout. If you keep
reducing the width, the box will eventually drop below the box on the left. This is a time-saving feature
when scaling a design.
Edge Reflow gives designers a way to test their ideas visually. The Edge Reflow interface makes it
simple to toggle back and forth between the mobile and desktop layouts, so it's easy for a designer to see
what's happening. Once the designer has a layout she likes, she can extract the CSS for further
development.
Edge Reflow is part of the Adobe Cloud membership, which is free.
1.3. TopStyle 5:
TopStyle 5 Pro is an HTML5 and CSS3 editor for Windows with several useful features, including
gradient and text shadow creating tools and a framework for building websites and apps for Apple devices.

Page 34
 Because the CSS3 specification hasn't been finalized, you need to use CSS vendor prefixes to make
sure there aren't any conflicts among browsers. It can be difficult to remember what settings to use, but
Prefixr takes care of that for you by adding vendor prefixes to your code.
CSS3 also offers the capability to create gradients. However, this can be time-consuming when
working with code. TopStyle has created a tool that lets you quickly specify gradients for your layouts and
edit those settings later.
Meanwhile, the Text Shadow Generator makes it easy to create text shadow effects without having to
spend a lot of time editing code.
Finally, TopStyle 5 includes iWebKit 5, a framework designed to help you create your own iPhone, iPod
Touch and iPad compatible website or Web application.
1.4. WinkSite:
WinkSite is a free mobile service that helps you monetize your site with Google AdSense and
determine the best place to put ads. You can also create in-house ads for your sponsors. Winksite is free
for up to five sites.
Winksite users can build a community and invite others to join. You can also create an ezine or
guestbook and post surveys. You also have the capability to create custom ads from various sponsors,
choose the pages they appear on and determine the frequency and placement of display. Supported file
types include YouTube, DailyMotion, MetaCafe, Blip.TV video and FLV files.
1.5.Volusion:
Volusion is an all-in-one ecommerce tool that lets you build a shopping cart and add it to your website.
It will display on desktop, tablet and mobile versions of your site.
Volusion is an all-in-one shopping cart system with a Website integrated into the layout. If you were to
use a different approach, you would have to first build your website and then obtain, customize and add a
shopping cart to your site after the fact. You can also list thousands of products on both the desktop and
mobile versions of your site.
Volusion offers a free trial to get you up to speed, but you should know that the free trial goes only so
far. If you want to test out the mobile aspect of the service, then you'll need to pay. When you sign up for
an account, you can choose to build a site yourself or work with a sales representative on the design
process. It's also worth noting that the service is proprietary—it runs on Volusion servers only and can't be
used with your own hosting.
1.6. GoMobi:
The GoMobi content management system lets you build mobile websites that can be viewed on more
than 6,000 mobile devices. You can also add code to the desktop version of your site so that a user on a
mobile device who visits the desktop site is seamlessly redirected to the mobile interface.
GoMobi offers an easy-to-use interface with the complex programming happening behind the scenes.
For example, to add your GPS coordinates, just enter the address, add that section to the mobile site and
save your changes; the GPS feature appears automatically on the mobile interface and is ready to use. For
designers who want more options, the interface can be customized through the use of templates. In
addition, you can add custom CSS, HTML and JavaScript programming by linking those pages to the
GoMobi interface. You can upload your own icons as well.
While GoMobi offers a numerous display options, it doesn't support tables or JavaScript. One way
around this is to use Dreamweaver to create custom mobile pages that plug into the GoMobi interface;
this way, you can use JavaScript, tables and custom CSS in your mobile website. You can also host these
custom pages wherever you want; this is worth knowing because GoMobi, like Volution, is proprietary and
runs only on GoMobi servers.

Page 35
 1.7. Mofuse:
With Mofuse you can build a mobile version of your website yourself, hire Mofuse to do it or become a
reseller of its services.
The look and feel of Mofuse resembles GoMobi and therefore makes it easy to understand and build a
mobile site. Depending on the needs of your business, this could take as little as 20 minutes. Enter some
basic information, launch a default template and start to build with it.
The Mofuse interface allows you to quickly enter information into the CMS that you can then add to
the interface, making it easy for a designer to quickly build a mobile site.
The next step is the Mobile Site Menu. Here you add elements to the site, then edit the order of
appearance, the look and feel, CSS attributes, colors, monetization, analytics, social media integration and
more.
As with other mobile programs, you can create code after the fact and insert it into the desktop site. If
someone comes to your desktop site from a mobile device, the code detects that and seamlessly redirects
the user to the mobile interface.
2. Techniques:
2.1. Prototyping:
Prototyping helps to share your ideas with the stakeholders. Capture helpful comments and feedback.
Use software that simplifies the creation of prototypes. Learn from mistakes. It’s cheaper to fail sooner. It
helps to notice what works and what doesn’t. This decreases the risk of failure in the long run.
You may apply InVision. This is popular tool with these features:
1) creating high-fidelity very fast,
2) opportunities to make interactive prototype with motion,
3) layout options for developing good hierarchy.
UXpin pays strong attention to the user flows. It fits mobile and desktop products. You can apply UI
libraries as well.
Marvel allows designing your ideas here or upload your work from Sketch or Photoshop. It helps to
grab comments and sync your prototype from cloud storage.
Webflow is helpful for those who want to skip code writing. It helps to develop the design around CSS
and styling.
Mockup Builder is also prototyping solution. You may easily download your image files to Marvel.
Then, supplement gestures and transitions. This prototyping platform offers features such as image
resizing, background color changes, and various device templates. It may turn your sketches into
prototypes as well.
Vectr is a free solution for prototypes on apps for Mac and Window. Share prototypes simply and
collaborate. This tool also offers offline desktop apps, clickable mockups and so on.
Boyle’s Law teaches never join a meeting without a prototype. It boosts internal communication.
Prototyping allows making a connection between designers and programmers.
2.2. Keep it simple:
Be focused on only the things critical to users. Exclude anything that is outside. Delete unimportant
elements from the page. You need to be strategic about what to keep and what to eliminate.
Focus on the website usability and utility. Krug’s law teaches that relevant web design technique
needs to be intuitive. Eliminate all possible questions that visitors might have. Great web design interacts
with them without overdoing things.
Apply the KISS principle. It stands for keeping it simple, stupid. People are overwhelmed in the fast-
paced environment. They want to capture data quickly. KISS principle helps them easily find what they look
for.
Page 36
 Keep in mind Jakob Nielsen’s guidelines. For instance, customers too often apply some functions by
mistake. Simplify shifting for them.
Make options and objects visible. Key pages need to be visually obvious as well. This helps users faster
reach their purposes. This is important for the website usability.
Mobile users compose the biggest percentage of traffic for many platforms. So, take the “mobile first”
approach. To achieve this goal, you need:
1) Design for the smallest screen.
2) Develop the mobile wireframe, then apply it as the pattern for larger screens.
3) Apply progressive enhancement. It means put more important stuff foot forward.
4) Try it on a real mobile device.
3. Call to action buttons:
In Eleken, we believe that it’s important to pay attention to the call-to-action buttons. They will lead
users to purchase the product. Place them strategically for maximum effectiveness.
Dropbox implements common design and open space. So, bright call to action button captures users’
attention. Now, this button and the logo are the same color. It simplifies understanding of the action you
want clients to take.
Humboldt County’s website impresses users with engaging video. Call-to-action button located in the
center. Users are invited to explore a website with words “Follow the Magic.” It makes this button more
effective and interesting.
Booking.com applies scarcity to motivate clients. They tell you how many other users are viewing that
hotel. This encourages you into action.
The color of the button will identify your audience. It influences who clicks and how many times. Men
prefer blue, green and black, females like the colors purple, green and blue.

Unique style and typography

Express your brand through special typography. It helps users to recognize your company from
competitors.
Quality typography came from the knowledge what other designers have done. Provide decisions
based on this understanding. There is always a need for something which feels different. For instance, a
website Sons of Gallipoli with unusual presentation.
Each interface involves a set of choices the user can make. Your type needs to maintain that decision-
making process. Relevant typography leads the reader to the content. Great typography is “transparent” to
the user. Also, select a typeface that works well in different sizes.
Keep in mind that too creative style may confuse a user. Stick with common forms.
Effective web design techniques make users’ experience more pleasant. Relevant call-to-action
buttons and unique typography will lead visitors’ attention in the right direction.

Page 37
 Reference
1. Cloudflare (2019). Cloudflare. [online] Cloudflare. Available at:
https://www.cloudflare.com/learning/dns/what-is-dns/.
2. Wikipedia Contributors (2019). Domain Name System. [online] Wikipedia. Available at:
https://en.wikipedia.org/wiki/Domain_Name_System.
3. admin (2019). What are the Types of DNS Servers – The Geek Diary. [online] Thegeekdiary.com.
Available at: https://www.thegeekdiary.com/what-are-the-types-of-dns-servers/.
4. Wikipedia Contributors (2019). File Transfer Protocol. [online] Wikipedia. Available at:
https://en.wikipedia.org/wiki/File_Transfer_Protocol.
5. Wikipedia Contributors (2018). HTTPS. [online] Wikipedia. Available at:
https://en.wikipedia.org/wiki/HTTPS.
6. MDN Web Docs. (2019). HTTP. [online] Available at:
https://developer.mozilla.org/enUS/docs/Web/HTTP.
7. Wikipedia Contributors (2019). Internet protocol suite. [online] Wikipedia. Available at:
https://en.wikipedia.org/wiki/Internet_Protocol_Suite.
8. Dealna. (2019). Three Types of Server Hardware | Dealna. [online] Available at:
https://dealna.com/en/Article/Post/1391/Three-Types-of-Server-Hardware.
9. Techopedia.com. (n.d.). What is Server Software? - Definition from Techopedia. [online] Available
at: https://www.techopedia.com/definition/23735/server-software.
10. Wikipedia Contributors (2019). Web server. [online] Wikipedia. Available at:
https://en.wikipedia.org/wiki/Web_server.

Page 38