ISTA 230

ISTA 230 - Introduction to Web Design

A Brief Overview of the Web

History

Course Info

October 4, 1957

ARPA

Course Info

Goal

1968

Course Info

The Mother of all Demos - December 9, 1968

Douglas Engelbart

1968

Course Info

The Mother of all Demos - December 9, 1968

While it wasn't clear at the time, many of the concepts introduced would change the landscape of computing forever:

Many joke that this group of researchers invented everything. All the stuff.

XKCD Comic in memoriam of Douglas Engelbart
Source: http://xkcd.com/1234/

ARPANet

Course Info

Communication between computers - October 29, 1969

Building on the work of Engelbart and his colleagues, researchers developed the ARPANet, establishing the first direct communication between two computers.

Networks

Course Info

Communication between computers - 1969+

First computer network

Networks

Course Info

Communication between computers - 1969+

First computer network

Networks

Course Info

Communication between computers - 1969+

First computer network

Networks

Course Info

Communication between computers - 1969+

First computer network

Building on the development of the ARPANet, many other networks were developed. These each used their own methods of communication and transferring data. Because of these differences, computers could only communicate with other computers on their same network. This was a problem...

Networks

Course Info

Communication between computers - 1969+

1974 - TCP/IP!!

To address the issue of inter-network (i.e., internet) communication, DARPA researchers developed TCP/IP, a set of communication protocols which masked the differences between the various networks and allowed computers to connect to other computers NOT on their same network.

Networks

Course Info

Communication between computers - 1974

First computer network

CERN

Course Info

CERN, Tim Berners-Lee,and the World Wide Web

It begins...

Based on some of his previous work, Tim Berners-Lee proposed a system that would utilize inter-network communication and hypertext. When no other researchers stepped up to take on Berners-Lee's proposal, he built the system himself.

Gopher

Course Info

At the same time that Tim Berners-Lee was creating the World Wide Web, the University of Minnesota created a similar system named 'Gopher' which provided campus-wide sharing of information.

Gopher

Course Info Gopher

Gopher was largely text-based. While not particularly pretty, Gopher provided very good organization and was relatively easy to use.

Gopher

Course Info

Gopher is dead, long live the WorldWideWeb

"Time to get paid!!"
~ U. of Minnesota, 1993
"Free web stuff, over here!"
~ Tim Berners-Lee / CERN, 1993

Gopher proved to be a popular alternative to the WorldWideWeb. However, the University of Minnesota announced that they were going to charge a licensing fee for the use of Gopher in 1993, raising concerns from Gopher users.

Shortly there after, CERN announced that it was releasing the source code for WorldWideWeb, allowing for independent implementations as well as allowing developers to create and improve upon existing web browsers.

Browsers

Course Info

Mosaic

A number of web browsers were available for navigating the World Wide Web. However, they were very rudimentary, were primarily text-based, and were only available for specific operating systems. That all changed in 1993.

Mosaic became very popular, very quickly. With its easy-to-use interface and relatively easy installation process, Mosaic received main-stream adoption and is often credited with making the World Wide Web accessible by the masses.

ISTA 230

ISTA 230 - Introduction to Web Design

How the Web Works

Communication

Internet Communication

Web Page Requests

http://www.arizona.edu/documents/words.txt
http://128.196.128.233/documents/words.txt

Client/Server Communication

Communication

Internet Communication

Web Page Requests

http://www.arizona.edu/documents/words.txt
http://128.196.128.233/documents/words.txt

Client/Server Communication

Each web page request begins with a computer (i.e., the client) sending out a request for a specific URL.

Communication

Internet Communication

Web Page Requests

http://www.arizona.edu/documents/words.txt
http://128.196.128.233/documents/words.txt

Client/Server Communication

In order to reach the specific computer where the web page is stored, the domain name must be converted into an IP address.

Communication

Internet Communication

IP Addresses

Instagram → 54.236.130.173
Facebook → 69.63.181.12
Yahoo → 72.30.2.43
Google → 74.125.73.106
YouTube → 74.125.224.76
Blogspot → 74.125.53.191

Every request for a specific domain name is transformed into a request to a specific IP address. Note: The details of how this transformation takes place is not relevant for the sake of this course.

Communication

Internet Communication

Web Page Requests

http://www.arizona.edu/documents/words.txt
http://128.196.128.233/documents/words.txt

Client/Server Communication

Communication

Internet Communication

Web Page Requests

http://www.arizona.edu/documents/words.txt
http://128.196.128.233/documents/words.txt

Client/Server Communication

URLs

Internet Communication

Uniform Resource Locator

http://www.arizona.edu/documents/words.txt

URLs

Internet Communication

Uniform Resource Locator - Scheme/Protocol

http://www.arizona.edu/documents/words.txt

The first section of the URL is known as the protocol. This specifies how the client wants to communicate with the server. The most common protocol used is HTTP.

URLs

Internet Communication

Uniform Resource Locator

http://www.arizona.edu/documents/words.txt

The section of the URL between the protocol and the domain name was originally specified by Tim Berners-Lee simply as a separator between the two parts. It holds no significant meaning and could have been any combination of letters, numbers, or symbols. That said, Tim Berners-Lee chose '://' so '://' is what we all use.

URLs

Internet Communication

Uniform Resource Locator - Domain Name

http://www.arizona.edu/documents/words.txt

The domain name specifies what server you want to send your web page request to. As previously mentioned, this is eventually converted into an IP address.

URLs

Internet Communication

Uniform Resource Locator - Port

http://www.arizona.edu:80/documents/words.txt

Occasionally, you will see a port number specified after the domain name. When specified, the format for the port number is always a colon, followed by a number.

If the port number isn't specified, the port number is provided automatically based on the protocol. For instance, the default port for HTTP requests is port 80.

URLs

Internet Communication

Uniform Resource Locator - Sub-directory / Path

http://www.arizona.edu/documents/words.txt

When the request is received by the server, the server looks at the portion of the URL after the domain name (and port, if specified). This portion of the URL maps directly to a folder on the server.

URLs

Internet Communication

Uniform Resource Locator - Filename

http://www.arizona.edu/documents/words.txt

The last portion of the URL specifies the name of a file on the web server. In order for the request to be successful, the file must exist and be located in the folder specified.

Communication

Internet Communication

Web Page Requests

http://www.arizona.edu/documents/words.txt
 

Client/Server Communication

Communication

Internet Communication

Web Page Requests

http://www.arizona.edu/documents/words.txt
 

Client/Server Communication

In the example URL above, the request is for the file named 'words.txt' located in the 'documents' folder on the web server.

Communication

Internet Communication

Web Page Requests

http://www.arizona.edu/documents/words.txt
http://www.arizona.edu/Documents/words.txt

Client/Server Communication

It is worth noting that capitalization matters when specifying file and folder names in a URL. For example, the server could have two folders, one named 'documents' and another named 'Documents'. These would require different URLs.

Communication

Internet Communication

Web Page Requests

http://www.arizona.edu/documents/words.txt

Client/Server Communication

Communication

Internet Communication

Web Page Requests

http://www.arizona.edu/documents/words.txt

Client/Server Communication

When a request is received, the server will send a response back to the client.

Communication

Internet Communication

Server Response

The first portion of the response will include an HTTP response code, also known as an HTTP status code. This code lets the client know the status of their request.

Communication

Internet Communication

HTTP Response Code

Ideally, the server will send a 200-level code to indicate that the request was successful. However, this is not always the case...

In some cases, a request will be made for a file whose URL has changed. In this instance, the server may send a 300-level code to let the browser know that the user should be redirected to another URL.

However, there are times when a user might request a file that doesn't exist or is restricted. In this case, the server will typically respond with a 400-level code. This is how the server lets the browser know that the user has made an invalid or incorrect request.

There are also instances when a server may malfunction for one reason or another. In this instance, the server will send a 500-level code. This is how the server lets the browser know that the user has made a seemingly valid request but that the server was unable to respond as expected.

Communication

Internet Communication

Server Response

In the instance that the requested file was found (i.e., a 200-level status code), the server will send some additional information in its response. This information typically includes the last modified time for the file, the size of the file, the content of the file, and the content type of the file (also known as the MIME-type).

Communication

Internet Communication

Content Types

Most modern browsers understand how to display a few content types, including plain text, HTML, and a few specific image types.

Communication

Internet Communication

Content Types - Plugins and Applications

Because the web is made up of lots of different types of content, browsers need to have a way to handle content types that they may not know how to handle.

One option is for the user to install plug-ins. Plug-ins provide a way for browsers to display a given content-type that they would otherwise not know how to handle. For example, many browsers don't natively know how to handle PDF files. A PDF plug-in allows PDF files to be viewed within the browser.

In the instance that a browser doesn't know how to handle a given content type (and no plug-in is available for the given content type), the browser will provide the user with the option to save the file or to open it with another program. A common example of this is any Microsoft Office documents, which typically cannot be opened within a browser.

Communication

Internet Communication

Web Page Requests

http://www.arizona.edu/documents/words.txt

Client/Server Communication

Communication

Internet Communication

Web Page Requests

http://www.arizona.edu/documents/words.txt

Client/Server Communication

Once a successful web page request is made, the server sends its response, including a copy of the file requested. That copy of the file now lives on the client machine, while the original remains on the server.

Communication

Internet Communication

Web Page Requests

http://www.arizona.edu/My documents/words.txt
http://www.arizona.edu/My%20documents/words.txt

Client/Server Communication

Communication

Internet Communication

Web Page Requests

http://www.arizona.edu/My documents/words.txt
http://www.arizona.edu/My%20documents/words.txt

Client/Server Communication

It is worth noting that spaces in a URL (as well as other 'special' characters) are converted into their hexidecimal character code. This makes for very unsightly URLs and should be avoided when possible.

URLs

Internet Communication

Folder and File Naming

URLs

Internet Communication

Folder and File Naming (cont.)

URLs

Internet Communication

Uniform Resource Locator - Index Page

http://ista230.com/

URLs

Internet Communication

Uniform Resource Locator - Index Page

http://ista230.com/
http://ista230.com/index.html

When no file name is specified at the end of a URL, the server automatically looks for a specific file. On the ISTA 230 server (and on many web servers), that file is named 'index.html'.

The two URLs above will result in the same response from the server.

URLs

Internet Communication

Uniform Resource Locator - Fragment Identifier

http://ista230.com/index.html#halfway

The format of a fragment identifier is a hash tag followed by text. Fragment identifiers are used to specify a specific portion of the page that the user should be taken to.

When the client receives the file, the browser then scans the content of the page, looking for the specified fragment identifier. If it finds it, it will scroll down the page until that section of the website is at the top of the screen. If the browser can't find the specified identifier, then it simply displays the page, starting at the top. If the port number isn't specified, the port number is provided automatically based on the protocol. For instance, the default port for HTTP requests is port 80.

Review

Internet Communication

Internet Communication

http://www.arizona.edu/phonebook/spargur.html

Review

Internet Communication

Internet Communication

http://example.com/

Review

Internet Communication

Internet Communication

ftp://www.example.com/free_stuff/music.mp3

Review

Internet Communication

Internet Communication

https://www.wikipedia.com/dictionary/#words_starting_with_L

Web Accounts

Internet Communication

Getting it online

http://demostudent.ista230.com/

In-class File Upload Demo