CS511 HANDOUTS

LESSON# 1 – INTRODUCTION
LESSON# 2 – ECOSYSTEM OF WEB
A Complicated Ecosystem

As visualized in following figure , web development can also be understood as an ecosystem,

one that builds on existing technologies (URL, DNS, and Internet), and contributes new
protocols and standards (HTTP, HTML, and JavaScript) that facilitate client-server interactions.
As this ecosystem matures, new client and server technologies, frameworks, and platforms
continue to be developed in support of the web (PHP, jQuery, Bootstrap, etc.).

The model shows web-development as a three-storey building. Each floor depicts several aspects
of web development with an illustration. Ground floor shows Servers, Configuration, Networks,
and Protocols which are the basic building blocks. Middle floor shows different languages which
are a part of web development, like CSS, HTML, PHP, Javascript, databases, APIs, and
Tools. Top level shows advanced concepts like Design, Search, Integration, Frameworks, and
Security.

A Short History of the Internet

• Telephone Network

..Telephone networks provides the basic infrastructure.

• Packet Networks
• ARPANET (Advanced research projects agency networks ) (1969)

..This early ARPANET network was funded and controlled by the United States
government, and was used exclusively for academic and scientific purposes. The early network
started small, with just a handful of connected university campuses and research institutions and
companies in 1969.

• X.25 (1974)

..At the same time, alternative networks were created like X.25 in 1974, which allowed
(and encouraged) business use.

• USENET (1979)

..USENET, built in 1979, had fewer restrictions still, and as a result grew quickly to 550
connected machines by 1981. It focuses on unrestricted access.

• TCP/IP (1983)  INTERNET

..To promote the growth and unification of the disparate networks, a suite of protocols
was invented to unify the networks. A protocol is the name given to a formal set of publicly
available rules that manage data exchange between two points. Communications protocols allow
any two computers to talk to one another, so long as they implement the protocol. By 1981,
protocols for the Internet were published and ready for use. New networks built in the United
States began to adopt the TCP/IP (Transmission Control Protocol/Internet Protocol)
communication model.

Internet vs. (World Wide) Web

“Internet is the hardware part - it is a collection of computer networks connected through
either copper wires, fiber-optic cables or wireless connections whereas, the World Wide
Web can be termed as the software part – it is a collection of web pages connected through
hyperlinks and URLs. In short, the World Wide Web is one of the services provided by the
Internet. Other services over the Internet include e-mail, chat and file transfer services. All
of these services can be provided to consumers for use by businesses or government or by
individuals creating their own networks or platforms.”

…[https://www.diffen.com/difference/Internet_vs_World_Wide_Web]

The Birth of the Web (1990)

The British Tim Berners-Lee (now Sir Tim Berners-Lee), who, along with the Belgian Robert
Cailliau, published a proposal in 1990 for a hypertext system while both were working at CERN
(European Organization for Nuclear Research) in Switzerland. Shortly thereafter Berners-Lee
developed the main features of the web. This early web incorporated the following essential
elements that are still the core features of the web today:

A Uniform Resource Locator (URL) to uniquely identify a resource on the WWW. The Hypertext
Transfer Protocol (HTTP) to describe how requests and responses operate. A software program
(later called web server software) that can respond to HTTP requests. Hypertext Markup Language
(HTML) to publish documents. A program (later called a browser) that can make HTTP requests
to URLs and that can display the HTML it receives.

Growth of Internet

Number of Internet Hosts increases tremendously between 2000 to 2015 for a figure of 1 billion
hosts.

LESSON# 3 – STATIC VS DYNAMIC WEBSITE

Static website

Static website consists only of HTML pages that look identical for all users at all times. A
publisher would publish web pages and periodically update them. Users could read the pages but
could not provide feedback. Following figure illustrates a simplified representation of the
interaction between a user and a static website.

The illustration shows user at a desktop monitor saying, “I want to see vacation.html”. An arrow
points from the user to a server machine which has its hard drive open. Server has second step
defined as, “Server retrieves files from its hard drive”. Two files labeled “vacation.html” and
“picture.jpg” are shown next to the hard drive. This leads to third step, depicting two files being
transferred from server to the user's machine. This step is labeled as, “Server 'sends' HTML and
then later the image to browser”. This leads to final and fourth step, which shows a webpage
consisting a picture and text. Picture and text depicted on webpage is same as depicted on
“vacation.html”, and “picture.jpg” files. This step is labeled as “Browser displays files”.

Traditional or server-side) Dynamic Websites

Within a few years of the invention of the web, sites began to get more complicated as more and
more sites began to use programs running on web servers to generate content dynamically. These
server-based programs would read content from databases, interface with existing enterprise
computer systems, communicate with financial institutions, and then output HTML that would
be sent back to the users' browsers. This type of website is called a dynamic server-side website
because the page content is being created at run time by a program created by a programmer; this
page content can vary from user to user. Following figure illustrates a very simplified
representation of the interaction between a user and a dynamic website.

The illustration shows six steps of the interaction as follows:

1. User at a terminal says, “I want to see vacation.php"”

2. Server recognizes that it must run a dynamic script that is on its hard drive (an arrow points
from the user terminal to the Server, with an open hard drive).

3. Server executes or interprets the script. (an arrow points from the server to a page titled
“vacation.php”

4. Scripts “outputs” HTML (an arrow points from vacation.php to a html script.

5. Server “sends” generated HTML and the image file to user. (an arrow points from html file to
user terminal).

6. Browser displays files (An assembled webpage is displayed on the user's terminal).

Modern) Dynamic Websites

Dynamic Websites of modern era (Web 2.0) refer to an interactive experience where users could
contribute and consume web content, thus creating a more user-driven web experience.

For software developers, (Web 2.0 ) require more programming logic, which previously existed
only on the server, began to migrate to the browser (see following figure ).

This required learning JavaScript, a rather tricky programming language that runs in the browser,
as well as mastering the rather difficult programming techniques involved in asynchronous
communication.

The illustration shows six steps of interaction between an user and a dynamic website depicted
as:

1. User at a terminal says, “I want to see vacation.php”

2. Server recognizes that it must run a dynamic script that is on its hard drive (an arrow points
from the user terminal to the Server, with an open hard drive).

3. Server executes or interprets the script. (an arrow points from the server to a page titled
“vacation.php”).
4. Scripts “outputs” HTML (an arrow points from vacation.php to an html script).

5. Server “sends” generated HTML and the image file to user. (an arrow points from html file to
user terminal).

6. Browser executes the Javascript. (An arrow points back to the user's terminal).

7. Javascript may make additional requests (back and forth arrows between the user terminal and
the server).

8. Browser displays HTML as modified by the Javascript (An assembled webpage is displayed
on the user's terminal).

Textbook

Web Apps vs. Desktop Apps

• Advantages
• Accessible from any Internet-enabled computer
 • Cross platform and browser compatibility
• Easier to roll out program updates
• Fewer security concerns about local storage
• Disadvantages
• Requires internet
• Security concerns about sensitive private data being transmitted over the Internet
• Concerns over the storage, licensing, and use of uploaded data
• Problems with certain websites not having an identical appearance across all
browsers
• Restrictions on access to operating system resources
• May need plugins for functioning

LESSON# 4 – BRIEF HISTORY OF WEB

Web 1.0

In the earliest days of the web, a webmaster (the term popular in the 1990s for the person who
was responsible for creating and supporting a website) would publish web pages and periodically
update them.

Users could read the pages but could not provide feedback.

• Contents generated by publishers

• Company generated companies

Web 1.0 include both type:

• Static websites
• Dynamic websites

Web 2.0

Web 2.0 is mainly characterized by:

• User Generated Contents (UGC)

• Dynamic websites

In the mid-2000s, a new buzzword entered the computer lexicon: Web 2.0.

This term had two meanings, one for users and one for developers. For the users, Web 2.0
referred to an interactive experience where users could contribute and consume web content, thus
creating a more user-driven web experience. Some of the most popular websites today fall into
this category: Facebook, YouTube, and Wikipedia. This shift to allow feedback from the user,
such as comments on a story, threads in a message board, or a profile on a social networking site
has revolutionized what it means to use a web application.

For software developers, Web 2.0 also referred to a change in the paradigm of how dynamic
websites are created. Programming logic, which previously existed only on the server, began to
migrate to the browser. This required learning JavaScript, a rather tricky programming language
that runs in the browser, as well as mastering the rather difficult programming techniques
involved in asynchronous communication.

Web 3.0

There is no standard consensus over Web 3.0 but some people have, however, argued that Web
3.0 will be something called the semantic web. It is mainly characterized by:

• Machine understandable contents

• Semantic web

Semantic is a word from linguistics that means, quite literally, “meaning.” The semantic web
thus adds context and meaning to web pages in the form of special markup. These semantic
elements would allow search engines and other data-mining agents to make sense of the content.
The goal of the semantic web is to make it easier to figure out those meanings, thereby
dramatically improving the nature of search on the web.

Web Science

• Interdisciplinary study of sociotechnical integration of the world wide web.

Web Science, as it is known, studies the sociotechnical systems that apply the web in areas as
diverse as finance, politics, activism, romance, and hate speech. If you look at each interaction
on the web as more than just a technical exchange using protocols and file transmission, you can
see there is often an underlying social need motivating each exchange. The technical system
facilitates a social interaction and social interactions span nearly the entire human experience, so
there is now an entire area of study looking at the web as a sociotechnical system. This is just
another example of how the web can facilitate entirely new areas of study.
LESSON # 5 – CLIENT SERVER MODEL
Client server model

The web is sometimes referred to as a client server model of communications. In the client-
server model, there are two types of actors: clients and servers. The server is a computer agent
that is normally active 24/7, listening for requests from clients. A client is a computer agent that
makes requests and receives responses from the server.

The request-response Loop

The diagram shows a laptop labelled as “client”. An arrow, labelled as “Request”, is pointing
from the laptop to a server machine, depicted with a blue globe next to it. This server machine is
labelled as “server”. Another arrow from the server machine to the laptop is labelled as
“Response”.

Server Types

Most real-world websites are typically not served from a single server machine, but by many
server machines. It is common to split the functionality of a website between several different
types of server, as shown in following figure. These include the following:

Web servers

A web server is a computer servicing HTTP requests. This typically refers to a computer running
web server software, such as Apache or Microsoft IIS (Internet Information Services).

Application servers

An application server is a computer that hosts and executes web applications, which may be
created in PHP, ASP.NET, Ruby on Rails, or some other web development technology.

Database servers

A database server is a computer that is devoted to running a Database Management System

(DBMS), such as MySQL, Oracle, or MongoDB, that is being used by web applications.

Mail servers

A mail server is a computer creating and satisfying mail requests, typically using the Simple
Mail Transfer Protocol (SMTP).

Media servers
A media server (also called a streaming server) is a special type of server dedicated to servicing
requests for images and videos. It may run special software that allows video content to be
streamed to clients.

Authentication servers

An authentication server handles the most common security needs of web applications. This may
involve interacting with local networking resources, such as LDAP (Lightweight Directory
Access Protocol) or Active Directory.

In smaller sites, these specialty servers are often the same machine as the web server.

Server Farms

A single web server that is also acting as an application or database server will be hard-pressed
to handle more than a few hundred requests a second. A busy site can receive thousands or even
tens of thousands of requests a second; globally popular sites such as Facebook receive millions
of requests a second.

The usual strategy for busier sites is to use a server farm. The goal behind server farms is to
distribute incoming requests between clusters of machines so that any given web or data server is
not excessively overloaded, as shown in following figure. Special devices called load balancers
distribute incoming requests to available machines.
Server Racks

In a server farm, the computers do not look like the ones in your house. Instead, these computers
are more like the plates stacked in your kitchen cabinets. That is, a farm will have its servers and
hard drives stacked on top of each other in server racks. A typical server farm will consist of
many server racks, each containing many servers, as shown in following figure.
Data Centers

Server farms are typically housed in special facilities called data centers. A data center will
contain more than just computers and hard drives; sophisticated air conditioning systems,
redundancy power systems using batteries and generators, specialized fire suppression systems,
and security personnel are all part of a typical data center, as shown in following figure.