Web Technologies and

Applications

RAJAD SHAKYA
 Course Objectives:
To introduce the key foundations of the Web,
essential technologies and knowledge needed
for web application development, and to
highlight the recent developments on the
dynamic area of the Web.
 Syllabus:
Chapter 1: Introduction (3 hours - 5 marks)

a. History
b. Internet and the Web
c. Client/server computing paradigm
 Syllabus:
Chapter 2: Web basics (5 hours - 9 marks)

a. Web documents and browsers

b. HTML, XHTML, forms, CSS
c. Crawling and information retrieval on the web
 Syllabus:
Chapter 3: Server-side programming
(7 hours - 12 marks)
a. Server-side scripting languages- PHP, JSP,
Java servlets, ASP.NET etc.
b. Backend database programming
c. Multi-tier architecture
 Syllabus:
Chapter 4: Client-side scripting
(4 hours - 7 marks)

a. JavaScript basics
b. JavaScript DOM
 Syllabus:
Chapter 5: Web applications
(6 hours - 11 marks)

a. Content management systems

b. Web application frameworks
c. Online information systems and solutions
 Syllabus:
Chapter 6: Web 2.0 (6 hours - 11 marks)

a. Introduction
b. Blogs, wikis, social networking and collective
intelligence
c. Tagging - folksonomies
d. AJAX
 Syllabus:
Chapter 7: Information representation and
sharing – XML (5 hours - 9 marks)

a. XML documents, DTD

b. Stylesheets and transformation - XSLT
c. Information syndication - RSS
 Syllabus:
Chapter 8: Web services (4 hours - 7 marks)

a. Service-oriented architecture
b. SOAP, WSDL, REST
 Syllabus:
Chapter 9: The Semantic Web
(5 hours - 9 marks)

a. Introduction
b. RDF and Ontologies
c. Linked Open Data
d. Applications and Web 3.0
 Chapter 1 :
Introduction

RAJAD SHAKYA
1.1 : History
The Internet

What is Internet ?
What is Internet ?
● Internet is a network of interconnected computers that is now
global

● The internet originated from a project called ARPANET

(Advanced Research Projects Agency Network), which was
funded by the U.S. Department of Defense in the late 1960s.

● ARPANET was connection of computers at UCLA, Stanford

Internet - 1970-80s
● In 1972, the first email was sent over ARPANET by Ray
Tomlinson, introducing a revolutionary way of electronic
communication.

● In 1970s, the development of TCP/IP protocols laid the

foundation for standardizing communication between networks

● In 1983, ARPANET officially adopted TCP/IP as its standard

protocol
Internet - 1980-90s
● In 1984 , Domain Name Server introduced

● 1991 - Tim Berners-Lee (computer programmer at CERN, a

physics lab in Europe ) releases World Wide Web!

● He developed the concept of hypertext documents and created

the first web browser, as well as HTML for structuring web
pages (before ASCII).
Internet - 1980-90s
● In 1984 , Domain Name Server introduced

● 1991 - Tim Berners-Lee (computer programmer at CERN, a

physics lab in Europe ) releases World Wide Web also first
point-and-click web browser Mosaic!

● He developed the concept of hypertext documents and created

the first web browser, as well as HTML for structuring web
pages.
Internet - 1990-2000s
● Mid-1990s: The introduction of web browsers like Netscape
Navigator and Internet Explorer made the web more
user-friendly and accessible.

● Early 2000s: The dot-com boom (video) and subsequent

dot-com bust witnessed a surge in internet-based businesses,
investments, and the growth of e-commerce.

● 2004: The emergence of Web 2.0, user-generated content and

interactive web applications, led to the rise of social media
platforms, blogs, and online collaboration tools.
Web Browsers
● Web browsers are the software we use to view web pages

● Mosaic (1993) was first point-and-click browse

● Netscape Navigator and Internet Explorer were most popular

● Now, Chrome, Mozilla etc

Web Pages & Websites
● A web page is a document which can display text, graphics,
audio, video and other elements through a web browser.

● A Website is typically a collection of related web pages with a

starting point or home page.

● Websites are hosted on web servers and accessible to users

over the internet
Web Server
● A web server is a computer or software that stores and delivers
web pages and other resources to users upon request.

● Web servers process HTTP requests and responses, which are

the standard communication protocol for the web.

● Web servers are responsible for hosting websites and making

them accessible to users over the internet.

● Popular web server software includes Apache, Nginx

Web address / URL
● The location of a website or web page on the internet.

● A web address can include the domain name, subdomain,

directory path, and page name.

● A URL is a specific type of web address that provides the precise

location of a web resource.
World Wide Web
● World Wide Web, which is also known as a Web, is a collection
of websites or web pages stored in web servers

● The building blocks of the Web are web pages which are
formatted in HTML and connected by links called hyperlinks
and accessed by HTTP.
Client – Server Computing
Client
● An application program that runs on the local computer

● Able to use the local computer for doing work

● When invoked by a user, it initiates communication with a

server

● Handles all the user interface issues

Servers
● Specialized program that typically provides only one service

● May handle multiple client requests simultaneously (or pseudo

simultaneously)

● Interacts with users in many sessions

● Waits for a request and then produces the reply

Client-Server Paradigm
● This is the model the Internet and WWW is based upon

● Cloud computing is based on this.

● Alternative - PEER-to-PEER Paradigm.

Important Questions for Exam
● Explain how the Internet and the Web work together.

● Write a brief account on the history of the Web.

● What is Client-Server Paradigm ?

● What is WWW. How is it related to internet ?

THANK YOU

Rajad Shakya
Chapter 2 :
Web basics

RAJAD SHAKYA
1.1 : HTML vs XHTML
HTML
(Hypertext Markup Language)

XHTML
(Extensible Hypertext Markup Language)
1.2 : History of HTML
● HTML was first introduced in 1991 by Tim Berners-Lee, the
inventor of the World Wide Web.
It included elements such as <TITLE>, <H1>, <P>, and <A>.

● HTML 2.0 was released in 1995, introducing new elements and

features like tables, image maps, and form inputs.
It included elements such as <TABLE>, <IMG>, and <FORM>.

● HTML 3.2 was released in 1997. It added support for tables,

frames, and multimedia content. It included elements such as
<FRAMESET>, <IFRAME>.
1.2 : History of HTML
● XHTML is a stricter and more standardized version of HTML,
based on XML syntax.

● XHTML 1.0 was released in 2000. It was a stricter version of

HTML that was based on XML. This meant that XHTML
documents had to be well-formed and valid XML.

● HTML 4.01 was released in 2001. It added new elements and

attributes, and it also made some changes to the way that HTML
was structured. It included elements such as <DIV>, <SPAN>.
1.2 : History of HTML
● HTML5 is the latest version of HTML. It was released in a
public-facing form in 2008, and it is still under development.

● HTML5 adds new elements and attributes, and it also makes

some changes to the way that HTML is structured. It includes
elements such as <video>, <audio>, and <canvas>.

● HTML5 has better semantic markup with new elements like

header, footer, nav, etc.
1.3 : XHTML
● XML-based syntax provides stricter rules for well-formedness
and conformity.

● Promotes cleaner and more standardized markup practices.

● Improved support for document structure and separation of

content and presentation.

● Steeper learning curve, especially for beginners.

● Limited adoption and support compared to HTML and HTML5.

HTML Basic Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
</head>
<body>
</body>
</html>
HTML Basic Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
</head>
<body>
</body>
</html>
DOCTYPE Statement
● Declares the specific version of HTML or XHTML being used on
the page

● Used by the browser to decide how to process the page

● Always first in file

● <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN“
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

● Using Strict encourages standards based coding

Tags in HTML
Html elements
● An html file is made of elements.

● An element is a collection of start tag, attributes, end tag,

content between them.

● Paragraph element example:

● Eg. <p> hello world!!! </p>

Html Heading
● A HTML heading or HTML h tag can be defined as a title or a
subtitle.
● There are six different HTML headings which are defined with
the <h1> to <h6> tags.
<h1>Heading no. 1</h1>
<h2>Heading no. 2</h2>
<h3>Heading no. 3</h3>
<h4>Heading no. 4</h4>
<h5>Heading no. 5</h5>
<h6>Heading no. 6</h6>
Html Anchor
● <a href=“/biology/notes.html”>Notes</a>

Relative links: means that it is relative to the current document.

● <a href=“http://www.w3.org/Consortium/mission”>
Mission statement</a>

Absolute links: defines the location of the document including

the protocol required to get the document, the server, the
directory and the name of the document.
HTML Image
● HTML img tag is used to display image on the web page.

● <img src="good_morning.jpg" alt="Good Morning Friends"/>

● Attributes:
- src
- alt
- width
- height
HTML Lists
● HTML Lists are used to specify lists of information.

a. Ordered List or Numbered List (ol)

b. Unordered List or Bulleted List (ul)

Ordered List or Numbered List
● HTML Lists are used to specify lists of information.

● Attributes:
a. Type "1" numbered with numbers.
b. Type "I" upper case roman numbers.
c. Type "i" lower case roman numbers.
d. Type "A"upper case letters.
e. Type "a"lower case letters.
Unordered List or Bulleted List
● HTML Lists are displays elements in bulleted format.

● Attributes:
a. Type "disc" marked with bullets.
b. Type "circle" marked with circles.
c. Type "square" marked with squares.
d. Type "none" not marked .
HTML Comments
● Comments are some text or code written in your code
to give an explanation about the code, and not visible
to the user.

● Comments are also part of the code, which gives an explanation

of the code.

● <! -- Write commented text here -->

● Shortcut => Ctrl/Cmd + /
Inline vs Block Elements
● Block elements: They consume the entire width
available irrespective of their
sufficiency.
Eg. p,h1, div

● Inline elements: Inline elements occupy only enough width

Eg. a,img, span
Div vs Span
● The HTML <div> tag is used to group the large section of HTML
elements together.
● HTML div is a block element.
● used to wrap large sections of elements.

● HTML <span> tag is used as a generic container of inline

elements.
● HTML span is an inline element
● HTML span element is used to wrap small portion of texts,
image etc.
HTML Input
● <input type=" ">

● Type attribute:

● text Defines a one-line text input field

● password Defines a one-line password input field
● submit Defines a submit button to submit the form
to server
● email Defines an input field for entering an
email address.
HTML Form
● HTML forms are required if you want to collect some data from
site visitor.

<form action="server url" method="get|post">

//input controls e.g. textfield, textarea, radiobutton, button
</form>
HTML Form
<form>
<label for="firstname">First Name: </label> <br/>
<input type="text" id="firstname" name="firstname"/>
<br/>

<label for="lastname">Last Name: </label>

<input type="text" id="lastname" name="lastname"/>
<br/>
</form>
HTML 5 Tags
There is a list of newly included tags in HTML 5.

● <article> This element is used to define an independent piece

of content in a document, that may be a blog, a magazine or a
newspaper article.
● <aside> It specifies that article is slightly related to the rest
of the whole page.
● <section> It defines a section in the document.
● <summary>It specifies a visible heading for <detailed> element.
HTML Ids & Classes
● The id attribute is used to specify the unique ID for an
element of the HTML document.
Eg. <tag id="value">

● HTML class attribute is used to specify a single or multiple

class names for an HTML element.
Eg. <tag class=”value"> content </tag>

● You can use multiple class names (more than one) with HTML
elements but not ids.
CSS (Cascading Style Sheet)
● used to design HTML tags.
● Selector : h1 (HTML element)

● Declaration Block: The

declaration block can contain
one or more declarations
separated by a semicolon.

● Property: A Property is a type of

attribute like color, border etc.
● Value: Values are assigned to
CSS properties.
CSS (Cascading Style Sheet)
How to add CSS?

1) Inline CSS:
<p style="color:blue">Hello CSS</p>

2) Internal CSS:
<style>
p{color:blue}
</style>
CSS (Cascading Style Sheet)
3) External CSS:
The link tag must be used inside head section of html.
<link rel="stylesheet" type="text/css" href="style.css">

style.css:
p{
color:blue;
}
CSS (Cascading Style Sheet)
1) CSS Element Selector:

The element selector selects the HTML element by name.

Eg: p{
text-align: center;
color: blue;
}
CSS (Cascading Style Sheet)
2) CSS Id Selector:
- The id selector selects the id attribute of an HTML element to
select a specific element.
- An id is always unique within the page.
- It is written with the hash character (#), followed by the id of the
element.
Eg: #para1 { <p id="para1">Hello</p>
text-align: center;
color: blue;
}
CSS (Cascading Style Sheet)
2) CSS Class Selector:

- The class selector selects HTML elements with a specific class

attribute.
- It is used with a period character . (full stop symbol) followed by
the class name.

Eg: .center { <h1 class="center">header </h1>

text-align: center;
color: blue;
}
CSS (Cascading Style Sheet)
3) CSS Universal Selector:

- The universal selector is used as a wildcard character.

It selects all the elements on the pages.

Eg: * {
color: green;
font-size: 20px;
}
CSS (Cascading Style Sheet)
4) CSS Group Selector:

- The grouping selector is used to select all the elements with the
same style definitions.
Commas are used to separate each selector in grouping.

Eg: h1,h2,p {
text-align: center;
color: blue;
}
CSS Properties
● CSS Border
CSS border properties are use to specify the style, color and size
of the border of an element.

● border-style:
specify the border type which you want to display
○ - none : It doesn't define any border.
○ - dotted : It is used to define a dotted border.
○ - dashed : It is used to define a dashed border.
○ - solid : It is used to define a solid border.
CSS Properties
● border-width:
Eg. border-width: 5px;

● border-color:
○ There are three methods to set the color of the border.
○ Name: color name. For example: "red".
○ RGB: RGB value of the color.
For example: "rgb(255,0,0)".
○ Hex: hex value of the color.
For example: "#ff0000".
CSS Properties
● CSS Border - Shorthand Property:
Eg. p {
border: 5px solid red;
};

● border-radius:
CSS property sets the rounded borders and provides the
rounded corners around an element, tags, or div.
Eg. border-radius: 35px
Controlling Layout
CSS Properties
● CSS Border - Shorthand Property:
Eg. p {
border: 5px solid red;
};

● border-radius:
CSS property sets the rounded borders and provides the
rounded corners around an element, tags, or div.
Eg. border-radius: 35px
Information retrieval:
● the process of finding and delivering relevant information from
a vast collection of data or documents.

● systematic techniques to locate specific data that matches a

user's query.

● It involves searching, retrieving, and presenting information to

users based on their queries.
Steps involved in information retrieval:
● Collection Building:
● Indexing:
● Query Formulation:
● Query Processing:
● Information Retrieval Models:
● Ranking and Scoring:
● Result Presentation:
● Query Refinement:
● Feedback and Relevance Evaluation:
Steps involved in information retrieval:
● Collection Building:

○ Gather and index a diverse collection of documents or data

that need to be searched.

○ Example: Building a database of news articles, blog posts,

and research papers on a specific topic.
Steps involved in information retrieval:
● Indexing:

○ Create a structured index of the collection, mapping terms

to their respective documents.

○ Example: In a book index, each term is associated with the

page number where it appears.
Steps involved in information retrieval:
● Query Formulation:

○ Users input their search queries, specifying the information

they want to retrieve.

○ Example: A user searches for "smartphone reviews" to find

articles or reviews about smartphones.
Steps involved in information retrieval:
● Query Processing:

○ Process the user's query and identify relevant terms to

search in the index.

○ Example: For the query "smartphone reviews," the system

identifies "smartphone" and "reviews" as search terms.
Steps involved in information retrieval:
● Information Retrieval Models:

○ Apply retrieval models (e.g., Boolean, Vector Space Model,

Probabilistic Model) to rank and score documents based on
their relevance to the query.

○ Example: Using the Vector Space Model to calculate the

similarity between the query and each document.
Steps involved in information retrieval:
● Ranking and Scoring:

○ Sort the documents based on their relevance scores to

present the most relevant results first.

○ Example: Displaying search results with the most relevant

and highly scored documents at the top.
Steps involved in information retrieval:
● Result Presentation:

○ Present the retrieved information to users in a readable and

user-friendly format.

○ Example: Displaying search results as a list of titles and

snippets for each document.
Steps involved in information retrieval:
● Query Refinement:

○ Allow users to refine their queries based on initial results

and receive more specific information.

○ Example: Providing options to filter search results by date,

location, or document type.
Steps involved in information retrieval:
● Feedback and Relevance Evaluation:

○ Analyze user interactions and search patterns to enhance

the effectiveness of the information retrieval system.

○ Example: Using user feedback and analytics to refine the

relevance ranking algorithms.
Crawling:
● process of systematically browsing the web to collect data from
web pages.

● involves automatically visiting URLs and extracting information

● Search engines, data aggregators, and web analytics tools utilize

web crawlers to gather and organize vast amounts of
information available on the internet.
Web Crawlers:
● are automated software programs that execute the crawling
process.

● designed to simulate human browsing behavior while accessing

websites and discovering new URLs to explore further.

● Eg. Scrapy, Googlebot, Screaming Frog

How Web Crawlers Work:
● Seed URL Selection

○ Crawling starts with selecting a seed URL, typically a

homepage or a list of starting points.

○ The seed URL serves as the initial entry point for the web
crawler to begin exploring the web.
How Web Crawlers Work:
● Sending HTTP Requests:

○ crawler sends HTTP requests to the seed URL and other

web pages it discovers during the crawling process.

○ retrieve the webpage's HTML content, which contains the

data to be extracted.
How Web Crawlers Work:
● Parsing Web Pages:

○ content is parsed to extract various components, such as

hyperlinks, text, images, and other resources.

○ allows the crawler to understand the structure and

contents of the webpage.
How Web Crawlers Work:
● Parsing Web Pages:

○ content is parsed to extract various components, such as

hyperlinks, text, images, and other resources.

○ allows the crawler to understand the structure and

contents of the webpage.
How Web Crawlers Work:
● Extracting URLs:

○ The crawler identifies and extracts hyperlinks (URLs)

present on the parsed web page.

○ These extracted URLs serve as the next set of web pages to

be visited and crawled.
How Web Crawlers Work:
● Managing the queue:

○ maintains a queue to manage the list of URLs waiting to be

crawled.

○ URLs are added to the queue as new pages are discovered,

and they are dequeued for crawling.
How Web Crawlers Work:
● Following Links:

○ crawler follows the extracted URLs from the frontier,

visiting each web page to repeat the crawling process.
How Web Crawlers Work:
● Storing and Indexing Data:

○ Crawled data, such as text content and metadata, is stored

in databases or indexes for further processing and retrieval.

○ Search engines use these databases to build their indexes

for fast and efficient search results.
 Chapter 4 :
Client Side Scripting

RAJAD SHAKYA
1.1 : JS Basics
● Variables & keywords
● Conditionals
● Looping
● Objects & Arrays
● Functions

● alert("message"); // message
● confirm("message"); // returns true or false
● prompt("message"); // returns user input string
1.2 : Javascript DOM
● Event handling

● document.querySelector

● document.querySelectorAll

● document.getElementById

● Validation using JS (input, radio, dropdown, textarea)

Cookies in JS
Cookies in JS
● A cookie is a small piece of data that is stored on the user's
computer.

● Cookies are created using the document.cookie property.

● document.cookie = "name=acem";

● Reading a Cookie:
var user = document.cookie.getItem("name");
Cookies in JS
● Cookies (oldest and most well-known mechanism)

● Session storage (similar to cookies, but the data is only stored

for the current session.)

● Local storage (most recent mechanism)

Cookies in JS
 Chapter 5 :
Web applications

RAJAD SHAKYA
5.1 : Content management systems
● Content management system refers to the system
and processes whereby information is created,
managed, published, and archived.

● CMS provides the necessary infrastructure for

multiple persons to effectively contribute content
and collaborate
Why cms ?
● Easy content creation and editing for non-technical
content contributors

● Access rights for security

● Structured workflow processes for content

approvals

● Templates for consistent output

CMS
● Founded in 1985, FileNet is considered to be the first
system that was a real content management system.
● Many enterprise CMSs began to appear including,
Interwoven (1995), Documentum (1996), FatWire
(1996), FutureTense (1996), Inso (1996), and
EPiServer (1997).
● Later WordPress gained popularity as an
open-source solution focusing on blog content
delivery.
Headless CMS
Advantages of CMS
● Decrease Costs (Content Creation, Content
Publishing, Content Management)

● Increase Revenues (Time Sensitive Opportunities,

Fresh Content Encourages Return Customers)/

● Maintain Consistency (Presentation Consistency,

Brand Integrity, )
Efficiently Manage Online Information
● Faster response to customer demands

● Improved content accessibility for employees

● No intervention by technical staff for content

creation and editing

● Navigation structures updated without technical

intervention
5.2 Web application frameworks
History

● The World Wide Web (often known as the web) was

created in 1990

● In the beginning the web was very static.

● To get rid of this manual work the Common Gateway

Interface (CGI) standard was created
5.2 Web application frameworks
● A framework is software development that is
designed to support the development of dynamic-
websites, web-applications and web-services.

● It is a set of prewritten code or libraries which

provide functionality common to a whole class of
applications.
Framework vs. libraries
Why do we need framework?
● Virtually all web applications have a common set of basic
requirements, such as user management e.g., secure user
login, password recovery), group management, and
access authorization.

● It includes all these functionalities, refined through

hundreds of production deployments, freeing developers
to focus on the needs of their specific application.

● It provide excellent support for developing application

having good traffic handling capacity
Examples
● Java based (hibernate, spring)

● PHP based (cakePHP, Zend, Drupal )

● JS based (Angular)

● Python based (Django)

MVC Framework Pattern
Advantages of MVC:
● Codes are easy to maintain and they can be extended easily.

● The components of MVC can be developed simultaneously.

● It reduces complexity by dividing an application into three

units.

● Search Engine Optimization (SEO) Friendly.

● It works well for Web apps that are supported by large teams
Disadvantages of MVC:
● It is difficult to read, change, test, and reuse this
model

● Increased complexity and Inefficiency of data

● It is not suitable for building small applications.

Disadvantage of using a framework
● To be able to use the framework at its best, it often requires
significant education and experience. (reading documentation)
● Performance might be suffering from common code that is built to
handle as much as possible, and is not optimized for a specific task.
● If a bug or a security risk in the framework is found it will be in all
applications using the framework Some framework are very stiff and
do not give the developer enough flexibility needed for some
applications.
● Building from scratch often gives a feeling of more productive which
can make the developer more peaceful and less feeling of being stuck
and thereby more creative and less bored.
5.3 Online information systems and solutions

● Knowing the potential impact of information systems

and having the ability to put this knowledge to work
can result in success in organizations reaching their
goals

● System users, business managers, and information

systems professionals must work together to build a
successful information system
What is an Information System?
● a set of interrelated components that collect,
manipulate, and disseminate data and information
and provide feedback to meet an objective

● an organized combination of people, hardware,

software, communication networks, data and
procedures that stores, retrieves, transforms, and
disseminate information in an organization.
Roles of Information Systems in Business
Categories of Information Systems
● Manual Information System
(Using filing cabinets in hospitals to store records of
patients is a manual information system )

● Computer-based Information System

(Using a school management system to register
university students and follow their progress
throughout each term would be an example of a
computerized information system)
Components of a Computer-Based IS
Components of a Computer-Based IS

● Hardware (Consists of computer equipment used to

perform input, processing, and output activities )

● Software ( Consists of the computer programs that

govern the operation of the computer )

● Database ( Organized collection of facts and

information, typically consisting of two or more
related data files )
Components of a Computer-Based IS

● Telecommunications networks (The electronic

transmission of signals for communications &
Internet)

● People ( The most important element in most

computer-based information systems )

● Procedures ( Include strategies, policies, methods,

and rules for using the CBIS )
IS at Different Levels of Management
● TPS (Transaction Processing Systems ) :
Keeps track of basic activities and transactions of
organization (e.g., sales, receipts, deposits, withdrawals,
payroll, flow of materials in a factory).
● MIS & DSS (Management Information Systems , Decision
Support Systems ):
Helps with decision making, and monitoring, controlling,
administrative activities
● ESS (Executive Support Systems):
Helps address term trends, both in firm and strategic
issues and long- in external environment.
Transaction Processing Systems
● Transaction - Any business-related exchange, such as
payments to employees and sales to customers
● TPS – Organized collection of people procedures,
software, databases, and devices used to record
completed business transactions
● Principal purpose is to answer routine questions and to
track the flow of transactions through the organization.
● Example: inventory questions, granting credit to
customer, performing deposits & withdrawals
Types of TPS:
● Batch TPS :
○ involves processing several transactions at the
same time, and the results are not immediately
available when the transaction is being entered.
○ There is a time delay.
○ Transactions are accumulated over a period and
processed in groups at a date in the future.

○ Eg. A customer pays for a subscription service at

the end of the month
Types of TPS:
● Online TPS (OLTP):
○ Processes data as soon as it becomes available.
○ There is no time delay.
○ It processes transactions in real time.
○ This is used for systems in which time is critical.

○ Eg. An e-commerce website might use a TPS to

process credit card transactions in real-time
Management Information Systems (MIS)
● Organized collection of people, procedures, software, databases, and
devices that provides routine information to managers and decision
makers
● Provide middle managers with reports on firm’s performance to
monitor firm and help predict future performance.
● Produces summaries and reports on basic operations using data
collected from a TPS.
● Not very flexibility system with with little analytic capability.
● Eg. customer relationship management systems (CRM), enterprise
resource planning systems (ERP)
Decision Support Systems (DSS)
● Used to support problem-specific decision making

● Used when problem is complex and information

needed to determine appropriate action is difficult to
obtain

● It does not make the final decision but will operate

more as a guide to managers

● Eg. Predictive Analysis Tools

Executive Support Systems (ESS)
● Serve senior managers information to make strategic
decisions
● handles non-routine informational problems.
● Provide generalized computing capacity that can be
applied to changing array of problems.
● Draw summarized (report)information from MIS, DSS,
and data from external events.
● Eg. Reporting Tools
Security, Privacy, and Ethical Issues in
Information Systems and the Internet :

● Personal data, including Social Security and credit

card numbers, can be lost or stolen

● threats to your privacy and data

● Raises work concerns, including job loss through

increased efficiency
IS in Sales and Marketing :

● Point of Sale Terminals in supermarkets

● Inventory systems for stock control

● Sales Ordering systems

● Marketing research system

IS in Accounting and Finance :

● Accounts Payable (Track money owned by firm)

● Budgeting (prepare short term budgets)

● Profit Planning (Prepare 5 year profit target)

IS in Human Resource :

● Training & Development

(track training, skills, and appraisals)

● Compensation Analysis
(Moniter Salaries & Benefits)

● HR Planning
(Plan for long term labour force needs)
Chapter 6 :
Web 2.0

RAJAD SHAKYA
Web 2.0
● The term “Web 2.0” was first used at O’Reilly Media Web
2.0 Conference (October 2004)

● Web 2.0 describes the changing trends in the use of Web

technology that aim to enhance creativity, secure
information sharing, collaboration and functionality of
the web.

● Web 2.0 concepts have evolution of web-based

communities and hosted services, such as social-network
sites, video sharing sites, wikis, blogs, and folksonomies
Web 2.0
● It’s a improved version of the first www,
characterized specifically by the change from static
to dynamic or user-generated content

● Eg. Video sharing sites (YouTube),

Hosted services (Google Maps),
social networking (Facebook),
Microblogging (Twitter)
Advantages of Web 2.0:
● User-friendly & Ease of Usage

● User-generated content & Increased user

engagement

● Enhanced collaboration & Social networking

● Accessible : Available at any time, any place

Key Features of Web 2.0:
● Tagging / Folksonomy

● Rich user experience

● Rich multimedia

● Personalization

● Cloud-based services
Web 1.0 vs 2.0 vs 3.0
Blogs:
● online platforms where people regularly post
articles, thoughts, or updates.
● include a comment section that allows readers to
engage in discussions
● enable easy creation and maintenance of blogs
without technical expertise.
● Bloggers can customize the appearance and layout of
their blogs to reflect their unique style or brand.
Blogs:
● serve as a medium for knowledge sharing,
storytelling, opinion sharing, and promoting products
or services.

● Blogs are primarily text but can also be the form of

photos or other images, sounds, or films.

● Eg. WordPress, Blogger, Medium, Gadgetbyte Nepal

Wikis:
● collaborative websites that allow multiple users to
contribute and edit content collectively.
● emphasized user-generated content, collaboration,
and open participation.
● most famous example of a wiki is Wikipedia
● easy-to-use, web-based editing interface that allows
users to add, modify, or delete content without
technical knowledge.
Wikis:
● promotes collective intelligence, ensuring that the
content's accuracy and quality are maintained

● wikis can also include images, sound recordings &

films.

● Promotes a culture of sharing and mutual

contribution, where users collectively build and
refine knowledge resources over time.
Social Networking:
● facilitate social interactions, communication, and
collaboration among users, blurring the lines
between creators and consumers of content.

● Users can create personal profiles, share updates,

and post various forms of media, such as photos and
videos.

● provide features for liking, commenting, and sharing

content, fostering engagement and interactivity.
Social Networking:
● facilitate social interactions, communication, and
collaboration among users, blurring the lines between
creators and consumers of content.

● Users can create personal profiles, share updates, and

post various forms of media, such as photos and videos.

● Groups and communities allow users to join discussions

● Eg. Facebook, Twitter

Collective Intelligence:
● the collective knowledge, expertise, and
problem-solving abilities of a group of individuals

● diverse perspectives and inputs contribute to better

outcomes

● gives smarter decision-making and problem-solving

than any individual could achieve alone.
Examples Collective Intelligence:
● Wikipedia

● Social media platforms: Twitter / Reddit

● Open-source software development

Challenges of collective intelligence
● Quality control

● Group dynamic

● Decision-making
Tagging – folksonomies
● the categorization and organization of information
by users in a collaborative and informal manner.

● Tagging is the process of assigning descriptive

keywords or "tags" to digital content, such as images,
articles, or blog posts.

● Folksonomies refer to the collective classification of

content based on user-generated tags, forming a
user-driven taxonomy.
Examples of Tagging and Folksonomies
● Social Media Platforms

● Blogging Platforms

● Video Sharing Platforms

Advantages of Tagging and Folksonomies

● User-Centric Organization

● Flexible and Dynamic

● Collaborative Knowledge
AJAX (Asynchronous Java Script and XML)

● technique for creating better, faster, and more

interactive web applications with the help of XML,
HTML, CSS, and Java Script.

● not a programming language or a tool, but a concept.

● client-side script that communicates to and from a

server/database without the need for a postback or a
complete page refresh
Benefits of Ajax:
● Callbacks

● Increased Speed

● Making Asynchronous Calls

● User-Friendly
Ajax:
● utilizes a combination of standards like JavaScript,
XMLHttpRequest (XHR), and XML or JSON for data
interchange.
Eg. https://www.w3schools.com/js/js_ajax_http.asp
Fetch (later)
● EG.
○ Form Validation
○ Infinite Scrolling
○ Weather Updates
 Chapter 7 :
Information representation and
sharing – XML

RAJAD SHAKYA
XML
● XML is a markup language designed to store and
transport data in a structured format.

● It uses tags to define data elements and attributes to

provide additional information about those elements.

● XML is a platform-independent and human-readable

format
HTML VS XML
Benefits of XML in Web:
● Simplicity

● No limitation of tags

● Highly readable

● Validation and Schema Support (DTD, XML Schemas)

● Data Transformation (XSLT)

Example:
<?xml version = "1.0">
<library>
<book>
<title>Introduction to Artificial Intelligence</title>
<author>John Smith</author>
<year>2022</year>
<genre>Computer Science</genre>
</book>
</library>
Rules to define XML elements:
● Element names:
○ Element names must start with a letter or an
underscore (_).

○ The subsequent characters in the name can

include letters, digits, hyphens (-), underscores (_),
and periods (.).
Rules to define XML elements:
● Each element must have an opening tag and a
corresponding closing tag.

● Elements can be nested inside one another to create

a hierarchical structure.

● Empty Elements are not allowed.

(e.g., <elementName />)
Rules to define XML elements:
● XML is case-sensitive
● Attributes are allowed in xml
<?xml version = "1.0" encoding = "UTF-8"
standalone = "yes" ?>
<book ISBN="1234567890">
<title>XML Basics</title>
<author>John Doe</author>
<publisher>ABC Publications</publisher>
<price currency="USD">29.99</price>
</book>
DTD (Document Type Definition):
● document that defines the structure of an
XML document.

● set of rules that govern the validity and syntax of the

XML content,

● It can be classified into two types namely internal

DTD and external DTD.
(Similar to CSS)
Advantages:
● We can define our own format for the XML files by
DTD.

● It helps in validation of XML file.

● It provides us with a proper documentation.

● It enables us to describe a XML document efficiently.

Disadvantages:
● DTDs are hard to read and maintain if they are large
in size.

● The documentation support is limited.

Internal DTD:
<?xml version = "1.0" encoding = "UTF-8" standalone = "yes" ?>
<!DOCTYPE address [
<!ELEMENT address (name,company,phone)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
]>
<address>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</address>
Where PCDATA = parsed character data
External DTD
<?xml version = "1.0" encoding = "UTF-8" standalone = "no" ?>
<!DOCTYPE address SYSTEM "address.dtd">
<address>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</address>
_______________________________________________________________________________
<!ELEMENT address (name,company,phone)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
Question:
- Write internal and external DTD to describe "mail" as
root element and "to" "from", "subject" and
"message" as the child elements.

- Design well-formed XML document for teacher.

Teacher should have data such as Name, Address,
Phone, Age and Email. Name should contain
FirstName and LastName.
Stylesheet and transformation – XSLT
● XSLT stands for Extensible Stylesheet Language
Transformation.

● used to transform XML document from one form to

another form.

● XSLT uses XML-based templates and rules to define

how the transformation should be applied to the
source XML document.
XML to HTML Conversion
<library>
<book>
<title>Introduction to Artificial Intelligence</title>
<author>John Smith</author>
</book>
<book>
<title>Data Science Essentials</title>
<author>Jane Doe</author>
</book>
</library>
XML to HTML Conversion
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>Book List</h2>
<ul>
<xsl:for-each select="library/book">
<li>
<xsl:value-of select="title"/> by <xsl:value-of select="author"/>
</li>
</xsl:for-each>
</ul>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
XML to HTML Conversion

<html>
<body>
<h2>Book List</h2>
<ul>
<li>Introduction to Artificial Intelligence by John
Smith</li>
<li>Data Science Essentials by Jane Doe</li>
</ul>
</body>
</html>
Information Syndication - RSS
(Really Simple Syndication)
● web-based technology that allows users to receive and
access updated content from multiple websites in a
standardized format.
● RSS feeds contain headlines, summaries, and links to full
articles, blogs etc
● RSS enables efficient content distribution, allowing both
publishers and consumers to benefit from streamlined
information syndication and real-time updates across
various online platforms.
Information Syndication - RSS
(Really Simple Syndication)

● Users can subscribe to RSS feeds using RSS readers

or aggregators.

● Aggregators collect and display content from

multiple feeds in one place, simplifying content
consumption.
Uses of RSS

● News Websites

● Blogs

● Weather Updates

● Job Listings