ECT 270Client-side Web Application Development

Professor Robin Burke

2

Outline

NetworkingInternetProtocolsAddressing

Web ProtocolHistory

3

Late policy

You can turn in homework up to 3 days late10% per day

Due time = class timedo not skip class to work on

homework!

4

What is the Internet

The Internet is an interconnected network of thousands of networks and computers. ( “inter-network”)

Began in the 1960s as a Department of Defense project

The World Wide Web is just one of the services that run on the Internet.

5

What is a network?

Computer system that links two or more computers - To share data, info, hardware, software

Local Area Network (LAN) A collection of computers that share

hardware, software and data over a small geographical area (home, office, school lab)

Wide Area Network (WAN) It spans a wider area (offices, schools, cities,

countries) Connects different LANs

6

Networking

7

Network layers

9

Packet-switched Network

11

Protocols

Because networks use a wide variety of hardware and software, protocols are needed to coordinate communication and data transmission.

A protocol is a set of rules for the exchange of data across communication lines.

12

Need for Protocol

Client programs must know how to state requests

Server must know how to interpret The protocol is the agreement Important

A weak or inflexible protocol limits what can be done

A complex protocol may be difficult to implement

15

Addressing

The IP protocol has to know where to send its packets“Routing”

To route a packet we need its address“IP Address”

16

IP Addresses

A host on the Internet must have an IP address 32-bit number divided in four 8-bit numbers

Written with a dot in between 14.192.1.100

Each number ranges from 0-255 Some addresses have a special

interpretation 127.0.0.1

17

IP Addresses, cont’d

In general the farther to the right in the address the closer to a particular host

14.192.1.100 all of the machines with 14.192.1 addresses

• are probably in a LAN all of the machines with 14.192 addresses

• might be owned by the same organization

18

Problem #1

can we run out? 2^32 addresses

Answer yes

Solution IPv6 = 128 bit addresses starting to be available now

19

Problem #2

How to keep track of lots of 32-bit numbers

Would you rather type207.171.183.16 oramazon.com

Solutiondomain naming system

20

Domain Name Server

A Domain Name Server (DNS) is responsible for the mapping between domain names and IP addresses.

bach.cs.depaul.edu

Org. type (top level domain)

Organization name

Organization name

Host name

IP address: 140.192.32.50

.com

.org

.gov

.mil

.net

.it

.museum

.biz

21

DNS

One of the few centralized services in a distributed InternetEverybody must agree on what name

matches what number Site creator must go through a domain

registration processclaim a nameassociate it with an address

22

Client/server interaction

A lot of Internet applications work under the client/server model

Serverknows something, orcan do something

Clientwants to know something, orwants to do something

23

Client/server cont’d

Client sends request

Server sends response

Example: Email A central computer stores and forwards

electronic mail Client computers contact the server to get

email for a particular user

24

Protocols for client/server internet applications Simple Mail Transfer Protocol (SMTP):

transferring email messages from one machine to another

File Transfer Protocol (FTP): transferring files between local and remote machines.

Telnet: a terminal emulation protocol used to login in remotely.

Telnet now superceded by ssh increased security

25

HyperText Transfer Protocol

HTTP is the protocol responsible for transferring and displaying web pages.

HTTP uses the client/server model of computing.The client is the user’s web browser

(I.E, Netscape)The server is the web server where

the page resides. (www.nyt.com)

26

Client/Server Web Interaction

27

HTTP Protocol

Request“I want something”

Response“Here it is”or “Not found”

Headers Body

A Typical HTTP Exchange

Client: Please open a connectionto ‘www.nytimes.com’ and send methe default file. I am located at IP Address 140.192.1.6.

Netscape’s URL Window

NY TimesWeb Server

Server: Let me check…. Okay, the default file at this site is of type HTML. It is 1749 bytes in size. Thedate is 3/28/2004 at 23:42:33.

NY Times Web Page

29

HTTP Response Example

30

Uniform resource locator

• The Web uses a naming conventioncalled the uniform resource locator (URL).

• A URL consists of at least two and as many asfour parts.

• A simple two part URL contains the protocolused to access the resource followed by thelocation of the resource.Example: http://www.cs.depaul.edu/

• A more complex URL may have a file nameand a path where the file can be found.

31

http://josquin.cs.depaul.edu/~rburke/courses/s04/index.html

domainThe protocol

used path that identifieslocation of

document uniquelydocument

name

A Web URL deconstructed

The user is a directory in the system

32

Note

Path may not correspond to files/foldersThe web server is free to interpret the

path however it likes 80% of the time

the path indicates a location in a file system where a file is stored

33

FTP URL ftp://rburke4@condor.depaul.edu/

• Access my files on condor using File Transfer Protocol

Email URL mailto:rburke@cs.depaul.edu

• mailto scheme for electronic mail addresses Newsgroup URL

news:dpu.general• news scheme for USENET news groups and

articles

Other URLs

34

Prehistory of the Web

In the 1960s Douglas Englebart, created the first experimental hypertext system: Augment

1984: Apple releases the HyperCard program as part of its graphical user interface operating system Macintosh.

Introducing hypertext as a widely-available commercial product.

35

Hypertext Documents

Hypertext refers to a document that its connected with other documents in many ways

Hypertext systems have been around for a long time1960s

Why was the web an innovation?keep this question in mind

36

CERN and hypertext

In 1990 CERN, a lab for particle Physics in Geneva, had been connected to the Internet for 2 years. Scientists were looking for better ways to circulate their scientific papers and data.

Tim Berners-Lee proposed an hypertext development project.

37

The birth of the Web

In the next two years Berners-Lee developed the code for an hypertext server program and made it available on the Internet.

He envisioned the set of links to and from computers worldwide as a spider web, hence the name World Wide Web.

The CERN is considered the birth place of the WWW.

38

What did Berners-Lee invent?

HTTPThe protocol for distributing web

pages HTML

The language for describing web pages

39

HTML Documents

Most web pages are HTML documents

HTMLHyperText Markup Language

A language for describing the contents of a hypertext page

40

Web browser history

A web browser is a user interface that allows users to read (browse) HTML documents. It acts as a web client.

The first browsers were text based. In 1993 Andreessen developed the first browser with a

graphical user interface, named Mosaic. In 1994 Andreessen developed Netscape In 1995 Microsoft released free Internet Explorer starting

the “Browser Wars”. In 1998, Netscape was clearly losing. Launched mozilla.org

Made a browser based on Netscape code open-source

41

Web Page with Interesting Fonts, Graphics, and Layout

This figure shows a Web page is not only a source of information, it can also be a work of art.

links

graphic image

The Web designer has a great deal of control over the format of the page.

interesting fonts

42

Terminology

Web browser a client program that can render (display) web pages

• and other media wide variety: text, graphical, cell phone, etc.

Web server a server program that responds to web requests and

delivers web pages• and other media

Proxy / gateway / cache / firewall / load balancer Special programs or devices that are "middlemen" in

the communication between browser and server Improve efficiency, security, etc.

43

More terminology

web pagean HTML document that can be

viewed in a web browser hyperlink

a special notation in an HTML document that points to an Internet resource

44

More terminology

client-side processing that takes place within or

associated with the web client, or browser server-side

processing that takes place within or associated with the web server

web application any software application whose mode of

delivery is the WWW

45

The name of this class

Client-side Web Application Development

We will be developing web applicationsthat make use of the browser

46

Why the Web?

The protocols that made linking possible were open

The concept of linking extended to an open-ended set of Internet protocols

The concept of inclusion of images by a mechanism similar to linking

The use of one-way links with minimal bookkeeping requirements

47

Open protocols

The web protocol (HTTP) is open Meaning

anyone can write a web server anyone can write a web browser anyone can author web pages there is a well-defined public mechanism for

revising and extending the standard Not true of earlier hypertext technologies

48

Monday

Begin HTML Chapters 2 and 3 Homework due before class