WWಎ

the World Wide Web

What was often difficult for people to understand about the design was that there was nothing else beyond URIs (URLs), HTTP, and HTML. There was no central computer controlling the Web no single network on which these protocols worked, not even an organization anywhere that ran the Web. The Web was not a physical thing that existed in a certain place, it was a space in which information could exist.

Tim Berners-Lee (from Weaving the Web)


The Web is an open and globally decentralized document and application distribution platform. Documents (ie. web pages) and software (ie. web apps), written in HTML, CSS, JavaScript and other languages, are stored on computers (connected to the Internet) all around the world running applications called servers, which wait for HTTP requests (small packets of data asking for specific files or resources) coming from other applications known as "clients" or "agents" (which are typically web browsers or web crawlers).

Anyone can create a website or web app and host their files on their own server running on their own computer connected to the Internet, and anyone else can use any number of web clients to request (ie. access) that website or web app over the Internet. As a platform, the Web has no central server, it's a collection of servers running on computers all over the world, which is what we mean when we say that the web is a "decentralized" platform. You don't need to ask anyone for permission or approval to run a server on the Web, all you need is a computer with an Internet connection, this is why we say the Web is an "open" platform.

While no one owns and operates the Web (the platform) itself, the protocols (like HTTP), core languages (HTML and CSS) and JavaScript APIs are designed and maintained by an internatoinal organization called the W3C, or the World Wide Web Consortium which consists of businesses, nonprofit organizations, universities, governmental entities, and individuals (anyone can join). The W3C don't own or control the Web (again, it's an open and decentralized platform), instead they're in charge of describing how it should work. These descriptions take the form of documents known as "specifications" (or "specs" for short) which are used as blue-prints for anyone interested in writing their own web server or web client software, as well as anyone interested in creating their own websites or web apps. If you don't follow the spec, then your client, server, site or app won't be compatible with the platform (ie. it won't work).

a simple website, an HTML file (index.html) a CSS file (/css/styles.css) and a few images; opened in the Pulsar editor




"hσstiŋg" a ẅebsite or ฬeb app

A web "host" is a service running their own web servers on their own computers that you can use to host the websites or apps you create. While it's totally possible to host your site/app at home by running your own web server on your own computer, it isn't always practical (unless you've got lots of bandwidth, great upload Internet speeds and a computer you don't mind leaving on/connected running your server 24/7). For this reason there exist all sorts of different services for hosting your websites/app s on someone else's computer (aka on "the cloud"). Most of these servers will rent you space on their computers/data centers for a monthly fee, but there are also some "free" hosting providers out there. For example, we'll be using GitHub not only to collaborate on a shared/versioned code base, but also as our app's web host (via their GitHub Pages feature).


Internet Archive Servers

a few of the the Internet Archive's servers; from a short documentary about the Archive




runηing a local server

When your working on a simple web page or web app you can test and see what it looks like by simply opening up your HTML file a web browser, without the need for a web server. When you view a "local" (ie. on your computer) HTML file in your browser you'll notice that the address bar has a file:/// protocol followed by the local path to your HTML file (ie. it's location on your hard drive). That said, in some instances, for security purposes (specifically when your project contains JavaScript code which loads data from other files), your browser will refuse to execute your code. In these circumstances it's necessary to run your own web server locally on your computer for testing. Then, rather than opening your file directly in your browser, you can send an HTTP request (locally on your comptuer, rather than over the Internet) to your server which in tern returns the requested files/resources to your browser. This time the browser will execute the code, because it came from a server (made clear by the http:// protocol in the address bar).

There are a number of different servers you can use to host your files locally (you can even write your own). Below I've got instructions for a couple of common severs as well as a simple one I made for these purposes. Feel free to use any of these (or any other) servers while locally working and testing your contributions to the class project.

simple server python server php server

Simple Server

I've written a simple web server (in JavaScript) which you can download for Mac, Windows and Linux. When you unzip the download you'll find 3 differnt foldrs for the three differnt versions, choose the one that reflects your system and double-click (or drag+drop into your terminal) the server file. It should open in your terminal (or command prompt) with a message that reads: Enter the path to the folder you want to serve:, type the path to the paintArtware1.0 project folder (or drag+drop your folder into your terminal, it should paste-in that folder's path automatically) and then press Enter.

Assuming you've entered a valid file path in the step above, the next message should read: What port would you like to run this server on: enter the port number 80 (or any other unused port number you'd like). Assuming you entered a valid (and unused) port number, you should see a message displaying your computer's local IP address as well as the port the server is running on and the path to the folder being served. The terminal message will also list a few different URLs you can type into your browser to access the web app.

Python Server

Python is a popular programming language which comes with a simple web server module. Most Mac and Linux systems come with the python runtime (the language's command line interpreter) pre-installed (Windows users may need to manually install it). To check which version of the python runtime you have installed (if any) open a terminal (or command prompt) and run: python --version

Assuming you have python installed, the first step is to change your terminal's current directory to the directory you want to serve (ie. your local paintArtware1.0 folder). You can do this by typing cd (the "change directory" command) followed by space and then the path to the project folder (if you drag+drop a folder into your terminal it should paste-in that folder's path)

cd /path/to/folder

After you've navigated your terminal into the directory (ie. folder) you want to serve you can run the python web server, this command looks different depending on which version of python you have installed.

for python version 2, run: python -m SimpleHTTPServer

for python version 3, run: python -m http.server

You should then see a message that says something like "Serving HTTP on 0.0.0.0 port 8000 ...". When you want to quit running your server press Ctrl + C in your terminal.

php server

php was, for most of the Web's history, the most popular server side programming language. Like python, it also comes with a simple built-in server we can run from our terminals. Just like with our python server, the first thing you'll need to do is change your terminal's current directory to the directory you want to serve (ie. your local paintArtware1.0 folder). You can do this by typing cd (the "change directory" command) followed by space and then the path to the project folder (if you drag+drop a folder into your terminal it should paste-in that folder's path)

cd /path/to/folder

After that, assuming you've got php installed on your computer, you can run the following command:

php -S localhost:8000

You should then see a message that says something like "Listening on http://localhost:8000 ... Press Ctrl-C to quit."

sending HTTP requests to your local server

1. A server && a client running on the same computer

...

2. A client (FireFox) sends an HTTP request to the local server http://localhost (without specifying a port number the default is http://localhost:80), this is the same as writing http://0.0.0.0:80 or the local IP address, which in this particular case is http://192.168.0.15:80.

The server receives the HTTP request from the client and because no specific path was specified, it assumes the root directory /. When a directory is requested (rather than a specific HTML file) it assumes index.html.

⬅⬅⬅

3. the server copies the /index.html file and sends it back to the client as an HTTP response.

➡➡➡

4. the index.html page contains HTML code with paths to other resources, a CSS file as well as a couple of image files. The client (FireFox) makes new HTTP requests for these resources and sends them to the server.

⬅⬅⬅

5. the server sends the requested resources as HTTP responses, when the client (FireFox) receives them it finishes rendering the page.

➡➡➡

In an extreme view, the world can be seen as only connections, nothing else. We think of a dictionary as the repository of meaning, but it defines words only in terms of other words. I like the idea that a piece of information is really defined only by what it's related to, and how it's related. There really is little else to meaning. The structure is everything.

Tim Berners-Lee (from Weaving the Web)