knowledge-kitchen

The World-Wide Web - What Is It, Where Does It Come From, What Went Wrong?

What Is It, Where Does It Come From, What Went Wrong?

  1. The Internet
  2. The World Wide Web
  3. Phases of The Web
  4. Clients and Servers
  5. Layered Architecture
  6. Hypertext Transfer Protocol
  7. Front-End Technologies
  8. HTML in 4 slides
  9. CSS in 3 slides
  10. Back-End Technologies
  11. Databases
  12. Monolithic vs Microservices Architectures
  13. Conclusions

The Internet

Definition

The Internet is the global interconnected network of computers that communicate via a set of standardized protocols.

Network of networks

Connective tissue

Copper wires and radio signals account for a smaller fraction of the total distance traveled by data on the Internet.

The vast expanses of the Internet’s reach are today enabled primarily by fiber optic cables that run locally, regionally, and across ocean floors to connect continents - see a map of submarine cables.

Submarine internet cable map

Origins

The Internet evolved over decades, funded primarily by the US Department of Defense

Ownership

The “backbone” of networking equipment that fuels the Internet belongs to a patchwork of different interests:

Cooperation

Given the patchwork of operators controlling different parts, cooperation is key.

Control

The Internet, for better or worse, has been much touted as a disruptive force in society.

The World Wide Web

Definition

The World Wide Web is one use of the Internet to publish and browse hypertext documents.

Hypertext

“Hypertext” means documents which reference and link to one-another.

Origin

The World Wide Web was invented in 1989-1990 by a British researcher at CERN named Tim Berners-Lee.

Definition (revisited)

In the past, it was simple to define the World Wide Web.

Definition (revisited)

Today, the situation is a bit more blurry.

Phases of The Web

Web 1.0

In the early days of The Web, pages contained primarily static content with limited interactivity.

Web 2.0

Later, at around the start of the millenium, many web pages began to solicit user-generated content, provide social networking features, and the massive data collection of user behavior began.

Web3

As the ill effects of the centralized architecture of The Web became clear, interest in alternative, decentralized, privacy-supporting architectures increased. Especially after the inventions of Bitcoin, Ethereum, the InterPlanetary File System (IPFS), Mastodon and others in the 2010’s, the vision of a decentralized open Web seemed to be within reach.

Clients and servers

Definitions

Requests

A client makes a request to a server.

Client server request

Responses

The server responds to the client.

Client server response

Centralized topology

A single server typically handles requests from many clients.

Client server multiplicity

Peer-to-peer

In peer-to-peer networks, such as BitTorrent and Bitcoin, any machines on the network may simultaneously act as a client in one exchange while playing the role of a server in another.

Peer-to-peer networks

Layered Architecture

Overview

Diagram of layers

The Internet's layered architecture

Hypertext Transfer Protocol

Standardized requests and responses

The HTTP specification indicates

Plain text

HTTP request and response commands are sent as plain text over the network, following a specific format.

Request types

The two most widely used request types allowed by the HTTP specification

Response codes

Web server responses include a status code, indicating the success or failure of the client’s request.

Example of a web client GET request

GET /some_document.html HTTP/1.1
User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)
Host: knowledge.kitchen
Accept-Language: en-us
Accept-Encoding: gzip, deflate

Example of a web client POST request

POST /some_document.html HTTP/1.1
User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)
Host: knowledge.kitchen
Content-Type: application/x-www-form-urlencoded
Content-Length: 40
Accept-Language: en-us
Accept-Encoding: gzip, deflate

name=Foo+Barstein&topic=web+architecture

Example of a successsful web server response

HTTP/1.1 200 OK
Date: Mon, 27 Jul 2022 12:28:53 GMT
Server: Apache/2.2.14 (Win32)
Last-Modified: Wed, 22 Jul 2009 19:15:56 GMT
Content-Length: 88
Content-Type: text/html
Connection: Closed

<html>
    <body>
        <h1>Hello, World!</h1>
        <p>How are you?</p>
    </body>
</html>

Front-End Technologies

Overview

Front-end technologies are those languages or programs which are interpreted and executed by the client, typically a web browser.

Separation of concerns

Any web browser understands the three core front-end web technologies:

HTML

Used to indicate the content and semantic meaning of the content on a web page.

<article>
  <h1>Jaberwocky</h1>
  <p id="p1">
    Twas brillig and the slithy toves did gyre and gimble in the wabe:
  </p>
  <a id="more" href="#">click to see more</a>
  <p id="p2">All mimsy were the borogoves, and the mome raths outgrabe.</p>
</article>

CSS

Used to indicate the style and presentation of a web page.

/* styles for the second paragraph */
#p2 {
  display: none; /* hide the second stanza by default */
}

/* styles for the link */
#more {
  color: red; /* make the text red */
  text-decoration: none; /* remove the default underline from the link */
}

Javascript

Used to indicate interactive behaviors of a web page.

// when the link is clicked...
$("#more").click(function () {
  $("#p2").show() // make the second stanza appear
})

It’s up to a client’s interpretation

A web browser client receives the HTML, CSS, and Javascript code from the server, and then interprets it.

Client server responsibilities

Frameworks

Front-end frameworks attempt to simplify and streamline the process of creating front-end interfaces.

HTML In 4 Slides

Semantic markup

For any given web page, HTML code indicates the type of content to show as well as each piece of content’s purpose, or semantic meaning.

<article>
  <h1>Puppies For Sale</h1>
  <img src="images/lonely_puppy.jpg" />
  <p>
    Buy now while supplies last!
    <a href="puppies.html">Learn more</a>
  </p>
</article>

Try it

Markup structure

Many web sites see the same basic content structures repeated across multiple pages, or repeated within a single page. Try it!

<section>
  <!-- the first article -->
  <article>
    <h1>Puppies For Sale</h1>
    <img src="images/lonely_puppy.jpg" />
    <p>
      Buy now while supplies last!
      <a href="puppies.html">Learn more</a>
    </p>
  </article>
  <!-- the second article... notice its structural similarity to the first -->
  <article>
    <h1>Kittens For Sale</h1>
    <img src="images/sad_kitten.jpg" />
    <p>
      Get 'em while they're hot!
      <a href="kittens.html">Learn more</a>
    </p>
  </article>
</section>

Forms

HTML allows web visitors to enter data into forms - there are a variety of different user interface components specific to forms. For example:

<form action="/send" method="POST">
  <label for="fname">Your name:</label>
  <input type="text" name="fname" />
  <!-- a one-line text field for their email address -->
  <label for="femail">Your email:</label>
  <input type="email" name="femail" />
  <!-- a multi-line input for their comment -->
  <label for="fmessage">Your comment:</label>
  &lt;textarea name="fmessage" &gt;&lt;/textarea&gt;
  <!-- submit button with the words, 'Send to us!' on it -->
  <input type="submit" value="Send to us!" />
</form>

Forms (continued)

Some important and required form tag attributes:

<form action="/send" method="POST">...</form>

That’s it.

What you just learned is how to code for content that will be displayed in the body of a web page - the part of an HTML document that represents the visible content.

CSS

Adding style

For any given web page, CSS code indicates the style to use for the content indicated by the HTML.

article {
  border: 10px dotted pink;
  font-family: georgia;
  font-weight: bold;
  padding: 20px;
}

Try it!

Selecting one or more elements

Let’s say you had four paragraphs, and wanted to style only two of them the same. Mark them with a class attribute in the HTML. If you want to uniquely style only one, mark it with an id attribute:

<p>Lorem ipsum dolor sit amet.</p>
<p class="my_favorite_paragraphs">Ipsum dolor sit amet lorem.</p>
<p id="a_really_special_paragraph">Dolor sit amet lorem ipsum.</p>
<p class="my_favorite_paragraphs">Ipsum dolor sit amet lorem.</p>

And select only the paragraphs that match these attributes in the CSS:

p.my_favorite_paragraphs {
  box-shadow: 5px 5px 10px; /* a drop shadow */
}
p#a_really_special_paragraph {
  font-size: 24px; /* relatively big */
}

Try it!

Positioning elements and creating layouts

That’s almost it. But there is one very important part of CSS code that we will not address here is how you place elements onto the web page in the location where you want them to go.

There are a variety of ways… the latest greatest is to CSS Flexbox - see a simple example - flexbox is how layouts should be done with React.

Back-End Technologies

Overview

Back-end technologies are those languages or programs used to control the behavior of the server and how it responds to various kinds of client requests.

Servers control what the client receives

The server can be programmed to modify the HTML, CSS, and Javascript code that is sent to the client in response to the request.

Client server responsibilities

Examples

For example, back-end programming on the server-side might allow a web server to…

Just about any high-level programaming language of note can be used to control how a web server responds to requests.

Frameworks

The choice of frameworks to simplify the process of writing server-side code depends on which server-side programming language is being used.

Example

This example, written in Python with flask and pymongo modules, would save data submitted by an HTML form into a MongoDB database document.

@app.route('/save', methods=['POST'])
def save_message():
    name = request.form['fname'] # retrieve the data the user entered into the fname field
    name = request.form['femail'] # retrieve the data the user entered into the femail field
    message = request.form['fmessage'] # retrieve the data the user entered into the fmessage field

    # create a new document with the data the user entered, plus the current date & time
    doc_to_insert = {
        "name": name,
        "email": email,
        "message": message,
        "created_at": datetime.datetime.utcnow() # the time right now, in UTC time
    }
    collection = app.db["exampleapp"] # select the collection where we want to save this document
    mongoid = collection.insert_one(doc_to_insert) # insert a new document, store the new document's _id value

    return render_template('show.html', mongoid=mongoid, doc=doc_to_insert) # render an HTML page with the new post displayed

Databases

Overview

As you undoubtedly know, a database is any technology used to store data

Data flow

The server-side code usually communicates with the database to save new data sent from the client, or to retrieve existing data and use it to determine how to respond.

Client-server-database

Relational databases based on the SQL language have traditionally dominated since the 1970’s.

However NoSQL databases are now surging, due to the changing expectations of web and mobile app developers and those using cloud-based infrastructure.

Serverless databases

A growing market is the “serverless database”, where the server provides the initial front-end code to the client, but further data is sent/received by front-end Javascript directly to/from the database.

Serverless databases

Front-end data storage for web apps

There are some limited data storage capabilities of web browsers, where data used by a web site is stored locally on the client machine.

Monolithic vs Microservices Architectures

Monolithic architecture

What we have been discussing until now is termed a monolithic architecture

Microservices architecture

A growing trend for scalable apps is the microservices architecture.

Microservices

Microservices architecture

Conclusions