distributed architectures introduction to internet · distributed architectures http and other...
TRANSCRIPT
![Page 1: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/1.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Introduction to InternetApplications
Internet Applications, ID1354
1 / 52
![Page 2: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/2.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Contents
Distributed Architectures
HTTP and Other Protocols
Tools
User Interface Design
2 / 52
![Page 3: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/3.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Section
Distributed Architectures
HTTP and Other Protocols
Tools
User Interface Design
3 / 52
![Page 4: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/4.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Local Application
I We are familiar with anarchitecture where the entireapplication resides on the samecomputer.
4 / 52
![Page 5: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/5.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Introducing a Server
I Now, the application willbe split on two tiers(computers).
I A client that has theview and a server thathas controller andmodel.
I The view is displayed ina web browser.
This architecture is not good, we also needlayers for communication
.
5 / 52
![Page 6: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/6.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Introducing a Server
II Now, the application willbe split on two tiers(computers).
I A client that has theview and a server thathas controller andmodel.
I The view is displayed ina web browser.
This architecture is not good, we also needlayers for communication
.
5 / 52
![Page 7: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/7.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Introducing a Server
II Now, the application willbe split on two tiers(computers).
I A client that has theview and a server thathas controller andmodel.
I The view is displayed ina web browser.
This architecture is not good, we also needlayers for communication.
5 / 52
![Page 8: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/8.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Introducing a Server
II Now, the application willbe split on two tiers(computers).
I A client that has theview and a server thathas controller andmodel.
I The view is displayed ina web browser.
This architecture is not good, we also needlayers for communication.
5 / 52
![Page 9: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/9.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Server-Side CommunicationII First, we add a server layer,
normally called view (a bitconfusing).
I However, the server sideview layer performs taskstypical of a view:
I Creates views (HTML),which are sent to the client.
I Interprets user gestures, aclick in a web page creates arequest to the server.
It might seem that we need yet a layer, fornetwork handling. There is such a layer, but it isin the web server. We don’t write it ourselves.
6 / 52
![Page 10: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/10.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Server-Side CommunicationI First, we add a server layer,
normally called view (a bitconfusing).
I However, the server sideview layer performs taskstypical of a view:
I Creates views (HTML),which are sent to the client.
I Interprets user gestures, aclick in a web page creates arequest to the server.
It might seem that we need yet a layer, fornetwork handling. There is such a layer, but it isin the web server. We don’t write it ourselves.
6 / 52
![Page 11: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/11.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Server-Side CommunicationI First, we add a server layer,
normally called view (a bitconfusing).
I However, the server sideview layer performs taskstypical of a view:
I Creates views (HTML),which are sent to the client.
I Interprets user gestures, aclick in a web page creates arequest to the server.
It might seem that we need yet a layer, fornetwork handling. There is such a layer, but it isin the web server. We don’t write it ourselves.
6 / 52
![Page 12: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/12.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Server-Side CommunicationI First, we add a server layer,
normally called view (a bitconfusing).
I However, the server sideview layer performs taskstypical of a view:
I Creates views (HTML),which are sent to the client.
I Interprets user gestures, aclick in a web page creates arequest to the server.
It might seem that we need yet a layer, fornetwork handling. There is such a layer, but it isin the web server. We don’t write it ourselves.
6 / 52
![Page 13: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/13.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Server-Side CommunicationI First, we add a server layer,
normally called view (a bitconfusing).
I However, the server sideview layer performs taskstypical of a view:
I Creates views (HTML),which are sent to the client.
I Interprets user gestures, aclick in a web page creates arequest to the server.
It might seem that we need yet a layer, fornetwork handling. There is such a layer, but it isin the web server. We don’t write it ourselves.
6 / 52
![Page 14: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/14.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Client-Side Communication
I Next, we add a clientlayer for communication,the net layer.
I Actually, the browserhandles most of thecommunication.
I The small network codewritten by us is normallyconsidered part of theclient-side view, the netlayer is omitted.
I This is a traditional web application.
7 / 52
![Page 15: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/15.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Client-Side Communication
I Next, we add a clientlayer for communication,the net layer.
I Actually, the browserhandles most of thecommunication.
I The small network codewritten by us is normallyconsidered part of theclient-side view, the netlayer is omitted.
I This is a traditional web application.
7 / 52
![Page 16: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/16.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Client-Side Communication
I Next, we add a clientlayer for communication,the net layer.
I Actually, the browserhandles most of thecommunication.
I The small network codewritten by us is normallyconsidered part of theclient-side view, the netlayer is omitted.
I This is a traditional web application.
7 / 52
![Page 17: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/17.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
The MVVM PatternI The trend is that data is
stored also on the client,therefore we get aclient-side model.
I This reduces the networkcommunication, since wedo not need to resendthe entire view each timethe user does something.
I Thereby, the applicationbecomes faster.
I This is referred to as the MVVM,model-view-viewmodel pattern.
8 / 52
![Page 18: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/18.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
The MVVM PatternI The trend is that data is
stored also on the client,therefore we get aclient-side model.
I This reduces the networkcommunication, since wedo not need to resendthe entire view each timethe user does something.
I Thereby, the applicationbecomes faster.
I This is referred to as the MVVM,model-view-viewmodel pattern.
8 / 52
![Page 19: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/19.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
The MVVM PatternI The trend is that data is
stored also on the client,therefore we get aclient-side model.
I This reduces the networkcommunication, since wedo not need to resendthe entire view each timethe user does something.
I Thereby, the applicationbecomes faster.
I This is referred to as the MVVM,model-view-viewmodel pattern.
8 / 52
![Page 20: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/20.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
The MVVM PatternI The trend is that data is
stored also on the client,therefore we get aclient-side model.
I This reduces the networkcommunication, since wedo not need to resendthe entire view each timethe user does something.
I Thereby, the applicationbecomes faster.
I This is referred to as the MVVM,model-view-viewmodel pattern.
8 / 52
![Page 21: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/21.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Programming Languages
I This is the architecturewe will normally useduring the course.
I The view is programmedin HTML and CSS, clientside behavior isprogrammed inJavaScript and the entireserver side code iswritten in PHP.
9 / 52
![Page 22: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/22.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Programming Languages
I This is the architecturewe will normally useduring the course.
I The view is programmedin HTML and CSS, clientside behavior isprogrammed inJavaScript and the entireserver side code iswritten in PHP.
9 / 52
![Page 23: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/23.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Three-Tier Architecture
I Of course, we also needto store data. That isdone in the data layer,which is often adatabase.
I We also introduce theintegration layer, tohandle the databasecalls.
10 / 52
![Page 24: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/24.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Three-Tier Architecture
I Of course, we also needto store data. That isdone in the data layer,which is often adatabase.
I We also introduce theintegration layer, tohandle the databasecalls.
10 / 52
![Page 25: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/25.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Three-Tier Architecture (Cont’d)
I In a bigger application, we would most likelyplace the database in a separate node.
I This is called three-tier architecture and is,since long time, the dominating architecturefor web applications.
11 / 52
![Page 26: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/26.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Three-Tier Architecture (Cont’d)
I In a bigger application, we would most likelyplace the database in a separate node.
I This is called three-tier architecture and is,since long time, the dominating architecturefor web applications.
11 / 52
![Page 27: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/27.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Event-Driven Architecture
I In the latest year, there is a growing tendency tomove business logic to the client, perhapscompletely remove the server-side model.
I This is made possible with web sockets, whichenable full duplex browser-server communication.
I The motive is to reduce communication latency. Thebrowser informs the server about user actions, butdoes not wait for response before updating the view.
12 / 52
![Page 28: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/28.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Event-Driven Architecture
I In the latest year, there is a growing tendency tomove business logic to the client, perhapscompletely remove the server-side model.
I This is made possible with web sockets, whichenable full duplex browser-server communication.
I The motive is to reduce communication latency. Thebrowser informs the server about user actions, butdoes not wait for response before updating the view.
12 / 52
![Page 29: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/29.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Event-Driven Architecture
I In the latest year, there is a growing tendency tomove business logic to the client, perhapscompletely remove the server-side model.
I This is made possible with web sockets, whichenable full duplex browser-server communication.
I The motive is to reduce communication latency. Thebrowser informs the server about user actions, butdoes not wait for response before updating the view.
12 / 52
![Page 30: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/30.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Section
Distributed Architectures
HTTP and Other Protocols
Tools
User Interface Design
13 / 52
![Page 31: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/31.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
The IP ProtocolI All Internet communication is based on the
Internet Protocol (IP).I IP provides basic functionality for sending
and receiving data.
I Data is sent in chunks, called packages. Apackage is like an envelope for a letter. Ithas sender and a receiver addresses and acontent, which is the data beingtransmitted.
I A node (computer) receiving a packet canaccept it, ignore it or retransmit it.
I A node dedicated to retransmitting packetsacross subnet borders is called a router.
14 / 52
![Page 32: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/32.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
The IP ProtocolI All Internet communication is based on the
Internet Protocol (IP).I IP provides basic functionality for sending
and receiving data.I Data is sent in chunks, called packages. A
package is like an envelope for a letter. Ithas sender and a receiver addresses and acontent, which is the data beingtransmitted.
I A node (computer) receiving a packet canaccept it, ignore it or retransmit it.
I A node dedicated to retransmitting packetsacross subnet borders is called a router.
14 / 52
![Page 33: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/33.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
The IP ProtocolI All Internet communication is based on the
Internet Protocol (IP).I IP provides basic functionality for sending
and receiving data.I Data is sent in chunks, called packages. A
package is like an envelope for a letter. Ithas sender and a receiver addresses and acontent, which is the data beingtransmitted.
I A node (computer) receiving a packet canaccept it, ignore it or retransmit it.
I A node dedicated to retransmitting packetsacross subnet borders is called a router.
14 / 52
![Page 34: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/34.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
The IP ProtocolI All Internet communication is based on the
Internet Protocol (IP).I IP provides basic functionality for sending
and receiving data.I Data is sent in chunks, called packages. A
package is like an envelope for a letter. Ithas sender and a receiver addresses and acontent, which is the data beingtransmitted.
I A node (computer) receiving a packet canaccept it, ignore it or retransmit it.
I A node dedicated to retransmitting packetsacross subnet borders is called a router.
14 / 52
![Page 35: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/35.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
The IP ProtocolI All Internet communication is based on the
Internet Protocol (IP).I IP provides basic functionality for sending
and receiving data.I Data is sent in chunks, called packages. A
package is like an envelope for a letter. Ithas sender and a receiver addresses and acontent, which is the data beingtransmitted.
I A node (computer) receiving a packet canaccept it, ignore it or retransmit it.
I A node dedicated to retransmitting packetsacross subnet borders is called a router.
14 / 52
![Page 36: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/36.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
IP AddressI An internet (version 4) address has 32 bits
divided into four bytes,[0-255].[0-255].[0-255].[0-255]. Each nodeconnected to the internet has one or moreaddresses.
I Normally, an IP address must be unique,assigned only to one node.
I Some addresses, like 192.168.X.X arededicated to private networks and can beused freely. Such an address is nottransmitted on the public internet. Instead, itis translated to a public address by a router.
15 / 52
![Page 37: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/37.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
IP AddressI An internet (version 4) address has 32 bits
divided into four bytes,[0-255].[0-255].[0-255].[0-255]. Each nodeconnected to the internet has one or moreaddresses.
I Normally, an IP address must be unique,assigned only to one node.
I Some addresses, like 192.168.X.X arededicated to private networks and can beused freely. Such an address is nottransmitted on the public internet. Instead, itis translated to a public address by a router.
15 / 52
![Page 38: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/38.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
IP AddressI An internet (version 4) address has 32 bits
divided into four bytes,[0-255].[0-255].[0-255].[0-255]. Each nodeconnected to the internet has one or moreaddresses.
I Normally, an IP address must be unique,assigned only to one node.
I Some addresses, like 192.168.X.X arededicated to private networks and can beused freely. Such an address is nottransmitted on the public internet. Instead, itis translated to a public address by a router.
15 / 52
![Page 39: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/39.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
The TCP Protocol
I TCP, Transmission Control Protocol, is usedon top of the IP protocol.
I TCP adds transport guarantees, forexample the following.
I Packets are delivered to the receiver in thesame order they are sent by the sender.
I Delivered packets have the same content assent packets.
I There are no lost packets.
16 / 52
![Page 40: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/40.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
The TCP Protocol
I TCP, Transmission Control Protocol, is usedon top of the IP protocol.
I TCP adds transport guarantees, forexample the following.
I Packets are delivered to the receiver in thesame order they are sent by the sender.
I Delivered packets have the same content assent packets.
I There are no lost packets.
16 / 52
![Page 41: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/41.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
The TCP Protocol
I TCP, Transmission Control Protocol, is usedon top of the IP protocol.
I TCP adds transport guarantees, forexample the following.
I Packets are delivered to the receiver in thesame order they are sent by the sender.
I Delivered packets have the same content assent packets.
I There are no lost packets.
16 / 52
![Page 42: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/42.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
The TCP Protocol
I TCP, Transmission Control Protocol, is usedon top of the IP protocol.
I TCP adds transport guarantees, forexample the following.
I Packets are delivered to the receiver in thesame order they are sent by the sender.
I Delivered packets have the same content assent packets.
I There are no lost packets.
16 / 52
![Page 43: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/43.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
The TCP Protocol
I TCP, Transmission Control Protocol, is usedon top of the IP protocol.
I TCP adds transport guarantees, forexample the following.
I Packets are delivered to the receiver in thesame order they are sent by the sender.
I Delivered packets have the same content assent packets.
I There are no lost packets.
16 / 52
![Page 44: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/44.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
The TCP Protocol (Cont’d)
I TCP is connection-oriented, think of atelephone line as opposed to sending aletter. To establish a TCP connection is aslow operation.
I TCP handles ports, which makes it possibleto have multiple connections with the sameIP address open simultaneously. A port isidentified by a number. An endpoint of aTCP connection has an IP address and aport number.
17 / 52
![Page 45: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/45.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
The TCP Protocol (Cont’d)
I TCP is connection-oriented, think of atelephone line as opposed to sending aletter. To establish a TCP connection is aslow operation.
I TCP handles ports, which makes it possibleto have multiple connections with the sameIP address open simultaneously. A port isidentified by a number. An endpoint of aTCP connection has an IP address and aport number.
17 / 52
![Page 46: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/46.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
DNS
I IP addresses are normally translated tonames (instead of numbers). Such a nameis called domain name.
I Domain names are divided intosubdomains, divided by dots (.)
I The address www.ict.kth.se consists ofthe subdomain www, which is part of thesubdomain ict, which is part of kth, whichis part of se, which is part of the root, .
I The translation between numbers andnames is managed by DNS, Domain NameSystem.
18 / 52
![Page 47: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/47.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
DNS
I IP addresses are normally translated tonames (instead of numbers). Such a nameis called domain name.
I Domain names are divided intosubdomains, divided by dots (.)
I The address www.ict.kth.se consists ofthe subdomain www, which is part of thesubdomain ict, which is part of kth, whichis part of se, which is part of the root, .
I The translation between numbers andnames is managed by DNS, Domain NameSystem.
18 / 52
![Page 48: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/48.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
DNS
I IP addresses are normally translated tonames (instead of numbers). Such a nameis called domain name.
I Domain names are divided intosubdomains, divided by dots (.)
I The address www.ict.kth.se consists ofthe subdomain www, which is part of thesubdomain ict, which is part of kth, whichis part of se, which is part of the root, .
I The translation between numbers andnames is managed by DNS, Domain NameSystem.
18 / 52
![Page 49: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/49.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
URL
I A Uniform Resource Locator, URL definesa resource’s location on the internet.
I A URL consists of four parts.1. A protocol, e.g., http
2. A host (IP address or name),http://www.kth.se
3. A port number (optional). The default HTTPport number is 80.http://www.kth.se:8080
4. A path, which identifies the resource’s locationon the server.http://www.kth.se:8080/abc/index.html
19 / 52
![Page 50: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/50.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
URL
I A Uniform Resource Locator, URL definesa resource’s location on the internet.
I A URL consists of four parts.1. A protocol, e.g., http2. A host (IP address or name),
http://www.kth.se
3. A port number (optional). The default HTTPport number is 80.http://www.kth.se:8080
4. A path, which identifies the resource’s locationon the server.http://www.kth.se:8080/abc/index.html
19 / 52
![Page 51: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/51.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
URL
I A Uniform Resource Locator, URL definesa resource’s location on the internet.
I A URL consists of four parts.1. A protocol, e.g., http2. A host (IP address or name),
http://www.kth.se3. A port number (optional). The default HTTP
port number is 80.http://www.kth.se:8080
4. A path, which identifies the resource’s locationon the server.http://www.kth.se:8080/abc/index.html
19 / 52
![Page 52: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/52.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
URL
I A Uniform Resource Locator, URL definesa resource’s location on the internet.
I A URL consists of four parts.1. A protocol, e.g., http2. A host (IP address or name),
http://www.kth.se3. A port number (optional). The default HTTP
port number is 80.http://www.kth.se:8080
4. A path, which identifies the resource’s locationon the server.http://www.kth.se:8080/abc/index.html
19 / 52
![Page 53: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/53.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
URL
I A Uniform Resource Locator, URL definesa resource’s location on the internet.
I A URL consists of four parts.1. A protocol, e.g., http2. A host (IP address or name),
http://www.kth.se3. A port number (optional). The default HTTP
port number is 80.http://www.kth.se:8080
4. A path, which identifies the resource’s locationon the server.http://www.kth.se:8080/abc/index.html
19 / 52
![Page 54: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/54.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
URN and URI
I A Uniform Resource Name, URN is aresource identifier without host name andport number. A typical example is a isbnidentifying a book.
I A Uniform Resource Identifier, URI is eithera URL or URN.
20 / 52
![Page 55: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/55.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
URN and URI
I A Uniform Resource Name, URN is aresource identifier without host name andport number. A typical example is a isbnidentifying a book.
I A Uniform Resource Identifier, URI is eithera URL or URN.
20 / 52
![Page 56: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/56.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP
I HyperText Transfer Protocol, HTTP is usedfor communication between web browsersand web servers.
I HTTP is based on TCP, which means aTCP connection is established for eachbrowser-server communication.
21 / 52
![Page 57: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/57.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP
I HyperText Transfer Protocol, HTTP is usedfor communication between web browsersand web servers.
I HTTP is based on TCP, which means aTCP connection is established for eachbrowser-server communication.
21 / 52
![Page 58: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/58.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
The Request-Response Cycle
A HTTP communication typically proceeds as follows.
1. The client opens a TCP connection to the server.
2. The client sends a request for a resource on theserver. The request consists of a HTTP header, anddata if the user submitted data to the server.
3. The server sends a response to the client. Also theresponse consists of HTTP headers, and data if theresponse required data.
4. The server closes the TCP connection.
22 / 52
![Page 59: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/59.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
The Request-Response Cycle
A HTTP communication typically proceeds as follows.
1. The client opens a TCP connection to the server.
2. The client sends a request for a resource on theserver. The request consists of a HTTP header, anddata if the user submitted data to the server.
3. The server sends a response to the client. Also theresponse consists of HTTP headers, and data if theresponse required data.
4. The server closes the TCP connection.
22 / 52
![Page 60: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/60.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
The Request-Response Cycle
A HTTP communication typically proceeds as follows.
1. The client opens a TCP connection to the server.
2. The client sends a request for a resource on theserver. The request consists of a HTTP header, anddata if the user submitted data to the server.
3. The server sends a response to the client. Also theresponse consists of HTTP headers, and data if theresponse required data.
4. The server closes the TCP connection.22 / 52
![Page 61: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/61.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
The Request-Response Cycle
A HTTP communication typically proceeds as follows.
1. The client opens a TCP connection to the server.
2. The client sends a request for a resource on theserver. The request consists of a HTTP header, anddata if the user submitted data to the server.
3. The server sends a response to the client. Also theresponse consists of HTTP headers, and data if theresponse required data.
4. The server closes the TCP connection.22 / 52
![Page 62: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/62.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
The Request-Response Cycle(Cont’d)
I HTTP is stateless. Neither server norbrowser remembers anything aboutprevious request-response cycles. Sessionhandling must be added in server-sidecode.
I To establish a TCP connection isexpensive. Therefore, TCP connectionsmight be kept alive and reused for multiplerequest-response cycles. This is specifiedwith the keep-alive HTTP header, sebelow.
23 / 52
![Page 63: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/63.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
The Request-Response Cycle(Cont’d)
I HTTP is stateless. Neither server norbrowser remembers anything aboutprevious request-response cycles. Sessionhandling must be added in server-sidecode.
I To establish a TCP connection isexpensive. Therefore, TCP connectionsmight be kept alive and reused for multiplerequest-response cycles. This is specifiedwith the keep-alive HTTP header, sebelow.
23 / 52
![Page 64: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/64.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Cookies
I A cookie is a piece of data that is stored onthe client.
I The cookie is tagged with the server’sdomain name and included in every requestto that server.
I This enables the server to associate datawith a specific client.
I Cookies can be used to store the user’ssettings, for example display language.
24 / 52
![Page 65: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/65.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Cookies
I A cookie is a piece of data that is stored onthe client.
I The cookie is tagged with the server’sdomain name and included in every requestto that server.
I This enables the server to associate datawith a specific client.
I Cookies can be used to store the user’ssettings, for example display language.
24 / 52
![Page 66: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/66.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Cookies
I A cookie is a piece of data that is stored onthe client.
I The cookie is tagged with the server’sdomain name and included in every requestto that server.
I This enables the server to associate datawith a specific client.
I Cookies can be used to store the user’ssettings, for example display language.
24 / 52
![Page 67: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/67.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Cookies
I A cookie is a piece of data that is stored onthe client.
I The cookie is tagged with the server’sdomain name and included in every requestto that server.
I This enables the server to associate datawith a specific client.
I Cookies can be used to store the user’ssettings, for example display language.
24 / 52
![Page 68: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/68.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP SessionsI As mentioned above, HTTP is stateless.I Still, the server must be able to recognize
which calls originate from the same client.Otherwise for example log in is impossible.
I One commonly used method to solve thisproblem is to use cookies.
I If a request has a cookie with a sessionidentifier, it identifies the user. If there is nosuch cookie, the user does not have arunning session.
I On the server, the session id can beassociated with any amount of data relatedto the user with that session. This is calledconversational state.
25 / 52
![Page 69: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/69.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP SessionsI As mentioned above, HTTP is stateless.I Still, the server must be able to recognize
which calls originate from the same client.Otherwise for example log in is impossible.
I One commonly used method to solve thisproblem is to use cookies.
I If a request has a cookie with a sessionidentifier, it identifies the user. If there is nosuch cookie, the user does not have arunning session.
I On the server, the session id can beassociated with any amount of data relatedto the user with that session. This is calledconversational state.
25 / 52
![Page 70: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/70.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP SessionsI As mentioned above, HTTP is stateless.I Still, the server must be able to recognize
which calls originate from the same client.Otherwise for example log in is impossible.
I One commonly used method to solve thisproblem is to use cookies.
I If a request has a cookie with a sessionidentifier, it identifies the user. If there is nosuch cookie, the user does not have arunning session.
I On the server, the session id can beassociated with any amount of data relatedto the user with that session. This is calledconversational state.
25 / 52
![Page 71: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/71.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP SessionsI As mentioned above, HTTP is stateless.I Still, the server must be able to recognize
which calls originate from the same client.Otherwise for example log in is impossible.
I One commonly used method to solve thisproblem is to use cookies.
I If a request has a cookie with a sessionidentifier, it identifies the user. If there is nosuch cookie, the user does not have arunning session.
I On the server, the session id can beassociated with any amount of data relatedto the user with that session. This is calledconversational state. 25 / 52
![Page 72: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/72.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP SessionsI As mentioned above, HTTP is stateless.I Still, the server must be able to recognize
which calls originate from the same client.Otherwise for example log in is impossible.
I One commonly used method to solve thisproblem is to use cookies.
I If a request has a cookie with a sessionidentifier, it identifies the user. If there is nosuch cookie, the user does not have arunning session.
I On the server, the session id can beassociated with any amount of data relatedto the user with that session. This is calledconversational state. 25 / 52
![Page 73: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/73.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP Message Format
I A HTTP message has start-line,headers and body.
I The request start-line consists ofHTTP method (se left), URL pathand HTTP version, e.g., GET/page1.html HTTP/1.1
I The response start-line consists ofHTTP version, status code andreason, e.g.,HTTP/1.1 200 OK
I Sample request (top) andresponse (bottom) messages aredepicted to the left.
26 / 52
![Page 74: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/74.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP Message Format
I A HTTP message has start-line,headers and body.
I The request start-line consists ofHTTP method (se left), URL pathand HTTP version, e.g., GET/page1.html HTTP/1.1
I The response start-line consists ofHTTP version, status code andreason, e.g.,HTTP/1.1 200 OK
I Sample request (top) andresponse (bottom) messages aredepicted to the left.
26 / 52
![Page 75: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/75.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP Message Format
I A HTTP message has start-line,headers and body.
I The request start-line consists ofHTTP method (se left), URL pathand HTTP version, e.g., GET/page1.html HTTP/1.1
I The response start-line consists ofHTTP version, status code andreason, e.g.,HTTP/1.1 200 OK
I Sample request (top) andresponse (bottom) messages aredepicted to the left.
26 / 52
![Page 76: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/76.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP Message Format
I A HTTP message has start-line,headers and body.
I The request start-line consists ofHTTP method (se left), URL pathand HTTP version, e.g., GET/page1.html HTTP/1.1
I The response start-line consists ofHTTP version, status code andreason, e.g.,HTTP/1.1 200 OK
I Sample request (top) andresponse (bottom) messages aredepicted to the left.
26 / 52
![Page 77: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/77.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Status Codes
I A HTTP response contains a status code toindicate the outcome of the request. Thereare five different categories of status codes.
1xx Reply contains information, forexample 101, Switch Protocol.
2xx Success, for example 200, OK.
3xx Redirection, for example 301, MovedPermanently.
4xx Client error, for example 404, NotFound.
5xx Server error, for example 500, InternalServer Error
27 / 52
![Page 78: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/78.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Status Codes
I A HTTP response contains a status code toindicate the outcome of the request. Thereare five different categories of status codes.
1xx Reply contains information, forexample 101, Switch Protocol.
2xx Success, for example 200, OK.3xx Redirection, for example 301, Moved
Permanently.
4xx Client error, for example 404, NotFound.
5xx Server error, for example 500, InternalServer Error
27 / 52
![Page 79: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/79.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Status Codes
I A HTTP response contains a status code toindicate the outcome of the request. Thereare five different categories of status codes.
1xx Reply contains information, forexample 101, Switch Protocol.
2xx Success, for example 200, OK.3xx Redirection, for example 301, Moved
Permanently.4xx Client error, for example 404, Not
Found.
5xx Server error, for example 500, InternalServer Error
27 / 52
![Page 80: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/80.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Status Codes
I A HTTP response contains a status code toindicate the outcome of the request. Thereare five different categories of status codes.
1xx Reply contains information, forexample 101, Switch Protocol.
2xx Success, for example 200, OK.3xx Redirection, for example 301, Moved
Permanently.4xx Client error, for example 404, Not
Found.5xx Server error, for example 500, Internal
Server Error
27 / 52
![Page 81: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/81.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Status Codes
I A HTTP response contains a status code toindicate the outcome of the request. Thereare five different categories of status codes.
1xx Reply contains information, forexample 101, Switch Protocol.
2xx Success, for example 200, OK.3xx Redirection, for example 301, Moved
Permanently.4xx Client error, for example 404, Not
Found.5xx Server error, for example 500, Internal
Server Error
27 / 52
![Page 82: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/82.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP MethodsI HTTP 1.1 has eight different methods that
requires the following server actions.GET Deliver resource identified by the
specified URL.POST Accept message body and deliver it to
the resource at the specified URL.
PUT Accept message body and store it as aresource with the specified URL.
DELETE Delete the resource at the given URL.HEAD Like GET, but only deliver headers.
TRACE Return the request message.OPTIONS Tell which HTTP methods can be used
with the specified URL.CONNECT Connect to another host.
I GET and POST are the most common methods andthe only ones we will use in this course.
28 / 52
![Page 83: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/83.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP MethodsI HTTP 1.1 has eight different methods that
requires the following server actions.GET Deliver resource identified by the
specified URL.POST Accept message body and deliver it to
the resource at the specified URL.PUT Accept message body and store it as a
resource with the specified URL.
DELETE Delete the resource at the given URL.HEAD Like GET, but only deliver headers.
TRACE Return the request message.OPTIONS Tell which HTTP methods can be used
with the specified URL.CONNECT Connect to another host.
I GET and POST are the most common methods andthe only ones we will use in this course.
28 / 52
![Page 84: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/84.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP MethodsI HTTP 1.1 has eight different methods that
requires the following server actions.GET Deliver resource identified by the
specified URL.POST Accept message body and deliver it to
the resource at the specified URL.PUT Accept message body and store it as a
resource with the specified URL.DELETE Delete the resource at the given URL.
HEAD Like GET, but only deliver headers.TRACE Return the request message.
OPTIONS Tell which HTTP methods can be usedwith the specified URL.
CONNECT Connect to another host.I GET and POST are the most common methods and
the only ones we will use in this course.
28 / 52
![Page 85: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/85.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP MethodsI HTTP 1.1 has eight different methods that
requires the following server actions.GET Deliver resource identified by the
specified URL.POST Accept message body and deliver it to
the resource at the specified URL.PUT Accept message body and store it as a
resource with the specified URL.DELETE Delete the resource at the given URL.
HEAD Like GET, but only deliver headers.
TRACE Return the request message.OPTIONS Tell which HTTP methods can be used
with the specified URL.CONNECT Connect to another host.
I GET and POST are the most common methods andthe only ones we will use in this course.
28 / 52
![Page 86: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/86.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP MethodsI HTTP 1.1 has eight different methods that
requires the following server actions.GET Deliver resource identified by the
specified URL.POST Accept message body and deliver it to
the resource at the specified URL.PUT Accept message body and store it as a
resource with the specified URL.DELETE Delete the resource at the given URL.
HEAD Like GET, but only deliver headers.TRACE Return the request message.
OPTIONS Tell which HTTP methods can be usedwith the specified URL.
CONNECT Connect to another host.I GET and POST are the most common methods and
the only ones we will use in this course.
28 / 52
![Page 87: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/87.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP MethodsI HTTP 1.1 has eight different methods that
requires the following server actions.GET Deliver resource identified by the
specified URL.POST Accept message body and deliver it to
the resource at the specified URL.PUT Accept message body and store it as a
resource with the specified URL.DELETE Delete the resource at the given URL.
HEAD Like GET, but only deliver headers.TRACE Return the request message.
OPTIONS Tell which HTTP methods can be usedwith the specified URL.
CONNECT Connect to another host.I GET and POST are the most common methods and
the only ones we will use in this course.
28 / 52
![Page 88: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/88.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP MethodsI HTTP 1.1 has eight different methods that
requires the following server actions.GET Deliver resource identified by the
specified URL.POST Accept message body and deliver it to
the resource at the specified URL.PUT Accept message body and store it as a
resource with the specified URL.DELETE Delete the resource at the given URL.
HEAD Like GET, but only deliver headers.TRACE Return the request message.
OPTIONS Tell which HTTP methods can be usedwith the specified URL.
CONNECT Connect to another host.
I GET and POST are the most common methods andthe only ones we will use in this course.
28 / 52
![Page 89: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/89.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP MethodsI HTTP 1.1 has eight different methods that
requires the following server actions.GET Deliver resource identified by the
specified URL.POST Accept message body and deliver it to
the resource at the specified URL.PUT Accept message body and store it as a
resource with the specified URL.DELETE Delete the resource at the given URL.
HEAD Like GET, but only deliver headers.TRACE Return the request message.
OPTIONS Tell which HTTP methods can be usedwith the specified URL.
CONNECT Connect to another host.I GET and POST are the most common methods and
the only ones we will use in this course.28 / 52
![Page 90: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/90.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP MethodsI HTTP 1.1 has eight different methods that
requires the following server actions.GET Deliver resource identified by the
specified URL.POST Accept message body and deliver it to
the resource at the specified URL.PUT Accept message body and store it as a
resource with the specified URL.DELETE Delete the resource at the given URL.
HEAD Like GET, but only deliver headers.TRACE Return the request message.
OPTIONS Tell which HTTP methods can be usedwith the specified URL.
CONNECT Connect to another host.I GET and POST are the most common methods and
the only ones we will use in this course.28 / 52
![Page 91: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/91.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Safe and Idempotent MethodsI GET and HEAD are safe methods, which
means they should not take any actionother than to retrieve the specifiedresource.
I GET, HEAD, PUT, DELETE, OPTIONSand TRACE are idempotent methods,which means the same request can be sentmultiple times without any side-effects onthe server.
I POST is not idempotent. If you submit thesame purchase order multiple times in aweb shop you will probably by multipleitems. The purchase is typically a POSTrequest.
29 / 52
![Page 92: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/92.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Safe and Idempotent MethodsI GET and HEAD are safe methods, which
means they should not take any actionother than to retrieve the specifiedresource.
I GET, HEAD, PUT, DELETE, OPTIONSand TRACE are idempotent methods,which means the same request can be sentmultiple times without any side-effects onthe server.
I POST is not idempotent. If you submit thesame purchase order multiple times in aweb shop you will probably by multipleitems. The purchase is typically a POSTrequest. 29 / 52
![Page 93: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/93.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Safe and Idempotent MethodsI GET and HEAD are safe methods, which
means they should not take any actionother than to retrieve the specifiedresource.
I GET, HEAD, PUT, DELETE, OPTIONSand TRACE are idempotent methods,which means the same request can be sentmultiple times without any side-effects onthe server.
I POST is not idempotent. If you submit thesame purchase order multiple times in aweb shop you will probably by multipleitems. The purchase is typically a POSTrequest. 29 / 52
![Page 94: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/94.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
When to Use GET
I Use GET whenI The only desired action is to retrieve the
specified resource.I If it shall be possible to bookmark the link.
I The URL is shorter than 255 bytes. Note thata GET URL is longer than a POST URL sincedata is included in the URL which GET, but isin the message body with POST (see below).
I You want to be able to write the entire request,including data, in the browser. This is usefulwhen debugging.
30 / 52
![Page 95: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/95.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
When to Use GET
I Use GET whenI The only desired action is to retrieve the
specified resource.I If it shall be possible to bookmark the link.I The URL is shorter than 255 bytes. Note that
a GET URL is longer than a POST URL sincedata is included in the URL which GET, but isin the message body with POST (see below).
I You want to be able to write the entire request,including data, in the browser. This is usefulwhen debugging.
30 / 52
![Page 96: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/96.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
When to Use GET
I Use GET whenI The only desired action is to retrieve the
specified resource.I If it shall be possible to bookmark the link.I The URL is shorter than 255 bytes. Note that
a GET URL is longer than a POST URL sincedata is included in the URL which GET, but isin the message body with POST (see below).
I You want to be able to write the entire request,including data, in the browser. This is usefulwhen debugging.
30 / 52
![Page 97: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/97.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
When to Use GET
I Use GET whenI The only desired action is to retrieve the
specified resource.I If it shall be possible to bookmark the link.I The URL is shorter than 255 bytes. Note that
a GET URL is longer than a POST URL sincedata is included in the URL which GET, but isin the message body with POST (see below).
I You want to be able to write the entire request,including data, in the browser. This is usefulwhen debugging.
30 / 52
![Page 98: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/98.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
When to Use POST
I Use POST whenI The required action updates server state, for
example saves something in a database.I The data does not fit within the 255 byte limit
for URLs.
I The data shall not appear in the URL. Notethat this is not a matter of security, data is sentin clear text also when using POST.
31 / 52
![Page 99: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/99.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
When to Use POST
I Use POST whenI The required action updates server state, for
example saves something in a database.I The data does not fit within the 255 byte limit
for URLs.I The data shall not appear in the URL. Note
that this is not a matter of security, data is sentin clear text also when using POST.
31 / 52
![Page 100: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/100.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
When to Use POST
I Use POST whenI The required action updates server state, for
example saves something in a database.I The data does not fit within the 255 byte limit
for URLs.I The data shall not appear in the URL. Note
that this is not a matter of security, data is sentin clear text also when using POST.
31 / 52
![Page 101: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/101.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP Parameters
I HTTP parameters are data included in arequest to a web server.
I A typical example is when the user hasentered data in a HTML form.
I When using the GET method, parametersare appended to the URL as a query string,http://some.domain/some/path?city=stockholm&country=sweden
I When using the POST method, parametersare included in the message body.
32 / 52
![Page 102: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/102.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP ParametersI HTTP parameters are data included in a
request to a web server.I A typical example is when the user has
entered data in a HTML form.
I When using the GET method, parametersare appended to the URL as a query string,http://some.domain/some/path?city=stockholm&country=sweden
I When using the POST method, parametersare included in the message body.
32 / 52
![Page 103: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/103.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP ParametersI HTTP parameters are data included in a
request to a web server.I A typical example is when the user has
entered data in a HTML form.
I When using the GET method, parametersare appended to the URL as a query string,http://some.domain/some/path?city=stockholm&country=sweden
I When using the POST method, parametersare included in the message body.
32 / 52
![Page 104: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/104.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP Parameters
I HTTP parameters are data included in arequest to a web server.
I A typical example is when the user hasentered data in a HTML form.
I When using the GET method, parametersare appended to the URL as a query string,http://some.domain/some/path?city=stockholm&country=sweden
I When using the POST method, parametersare included in the message body.
32 / 52
![Page 105: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/105.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP HeadersI HTTP headers have the syntaxname: value
I There are several predefined headers, andit is also allowed to add new headers.
I Sample request headers are:
Host The receiver address or domain name.User-Agent Identifies the sender browser and
operating system.Content-Length Message body length in bytes.Connection Keep connection open future requests.
I Sample response headers are:
Content-Length Message body length in bytes.Content-Type Media Type (see below) of response.
33 / 52
![Page 106: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/106.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP HeadersI HTTP headers have the syntaxname: value
I There are several predefined headers, andit is also allowed to add new headers.
I Sample request headers are:
Host The receiver address or domain name.User-Agent Identifies the sender browser and
operating system.Content-Length Message body length in bytes.Connection Keep connection open future requests.
I Sample response headers are:
Content-Length Message body length in bytes.Content-Type Media Type (see below) of response.
33 / 52
![Page 107: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/107.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP HeadersI HTTP headers have the syntaxname: value
I There are several predefined headers, andit is also allowed to add new headers.
I Sample request headers are:Host The receiver address or domain name.
User-Agent Identifies the sender browser andoperating system.
Content-Length Message body length in bytes.Connection Keep connection open future requests.
I Sample response headers are:
Content-Length Message body length in bytes.Content-Type Media Type (see below) of response.
33 / 52
![Page 108: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/108.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP HeadersI HTTP headers have the syntaxname: value
I There are several predefined headers, andit is also allowed to add new headers.
I Sample request headers are:Host The receiver address or domain name.
User-Agent Identifies the sender browser andoperating system.
Content-Length Message body length in bytes.Connection Keep connection open future requests.
I Sample response headers are:
Content-Length Message body length in bytes.Content-Type Media Type (see below) of response.
33 / 52
![Page 109: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/109.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP HeadersI HTTP headers have the syntaxname: value
I There are several predefined headers, andit is also allowed to add new headers.
I Sample request headers are:Host The receiver address or domain name.
User-Agent Identifies the sender browser andoperating system.
Content-Length Message body length in bytes.
Connection Keep connection open future requests.I Sample response headers are:
Content-Length Message body length in bytes.Content-Type Media Type (see below) of response.
33 / 52
![Page 110: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/110.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP HeadersI HTTP headers have the syntaxname: value
I There are several predefined headers, andit is also allowed to add new headers.
I Sample request headers are:Host The receiver address or domain name.
User-Agent Identifies the sender browser andoperating system.
Content-Length Message body length in bytes.Connection Keep connection open future requests.
I Sample response headers are:
Content-Length Message body length in bytes.Content-Type Media Type (see below) of response.
33 / 52
![Page 111: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/111.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP HeadersI HTTP headers have the syntaxname: value
I There are several predefined headers, andit is also allowed to add new headers.
I Sample request headers are:Host The receiver address or domain name.
User-Agent Identifies the sender browser andoperating system.
Content-Length Message body length in bytes.Connection Keep connection open future requests.
I Sample response headers are:
Content-Length Message body length in bytes.Content-Type Media Type (see below) of response.
33 / 52
![Page 112: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/112.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP HeadersI HTTP headers have the syntaxname: value
I There are several predefined headers, andit is also allowed to add new headers.
I Sample request headers are:Host The receiver address or domain name.
User-Agent Identifies the sender browser andoperating system.
Content-Length Message body length in bytes.Connection Keep connection open future requests.
I Sample response headers are:Content-Length Message body length in bytes.
Content-Type Media Type (see below) of response.
33 / 52
![Page 113: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/113.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP HeadersI HTTP headers have the syntaxname: value
I There are several predefined headers, andit is also allowed to add new headers.
I Sample request headers are:Host The receiver address or domain name.
User-Agent Identifies the sender browser andoperating system.
Content-Length Message body length in bytes.Connection Keep connection open future requests.
I Sample response headers are:Content-Length Message body length in bytes.Content-Type Media Type (see below) of response.
33 / 52
![Page 114: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/114.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
HTTP HeadersI HTTP headers have the syntaxname: value
I There are several predefined headers, andit is also allowed to add new headers.
I Sample request headers are:Host The receiver address or domain name.
User-Agent Identifies the sender browser andoperating system.
Content-Length Message body length in bytes.Connection Keep connection open future requests.
I Sample response headers are:Content-Length Message body length in bytes.Content-Type Media Type (see below) of response.
33 / 52
![Page 115: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/115.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Media Type
I Media Type (or MIME Type) definesmessage content. This tells the receiverhow to interpret the data.
I Some media types are:text/html HTML markuptext/plain Plain text
image/png A png imagevideo/ogg A ogg video.
34 / 52
![Page 116: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/116.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Media Type
I Media Type (or MIME Type) definesmessage content. This tells the receiverhow to interpret the data.
I Some media types are:text/html HTML markuptext/plain Plain text
image/png A png imagevideo/ogg A ogg video.
34 / 52
![Page 117: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/117.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Web Browsers
I It is important to test the web applicationwith all different browsers that shall be ableto display it.
I Browsers behave differently, and youshould expect that some breakspecifications.
35 / 52
![Page 118: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/118.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Web Browsers
I It is important to test the web applicationwith all different browsers that shall be ableto display it.
I Browsers behave differently, and youshould expect that some breakspecifications.
35 / 52
![Page 119: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/119.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Web Servers
I The web server can deliverstatic content and also callserver-side programs, likePHP, Java or .NET programs.
I The most commonly usedweb server is apache,https://httpd.apache.org/
I Other common web serversare nginx,http://wiki.nginx.org/Main
and Microsoft IIS.
36 / 52
![Page 120: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/120.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Web Servers
I The web server can deliverstatic content and also callserver-side programs, likePHP, Java or .NET programs.
I The most commonly usedweb server is apache,https://httpd.apache.org/
I Other common web serversare nginx,http://wiki.nginx.org/Main
and Microsoft IIS.
36 / 52
![Page 121: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/121.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Web Servers
I The web server can deliverstatic content and also callserver-side programs, likePHP, Java or .NET programs.
I The most commonly usedweb server is apache,https://httpd.apache.org/
I Other common web serversare nginx,http://wiki.nginx.org/Main
and Microsoft IIS.
36 / 52
![Page 122: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/122.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Web Servers (Cont’d)
I You need to install a web server on yourlaptop. All labs will be reported on your ownlaptop, there is no web server in ICT schoolwhere you can run all the labs.
I It might take time to get the web serverrunning. You are advised to start installingthe web server now.
37 / 52
![Page 123: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/123.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Web Servers (Cont’d)
I You need to install a web server on yourlaptop. All labs will be reported on your ownlaptop, there is no web server in ICT schoolwhere you can run all the labs.
I It might take time to get the web serverrunning. You are advised to start installingthe web server now.
37 / 52
![Page 124: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/124.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Section
Distributed Architectures
HTTP and Other Protocols
Tools
User Interface Design
38 / 52
![Page 125: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/125.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Web Development Tools
I There are many tools that facilitatesdeveloping web applications.
I Browser support varies between tools, mostexamples will be using Firefox.
I You are strongly advised to start usingsome of the following tools, they will helpyou a lot.
39 / 52
![Page 126: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/126.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Web Development Tools
I There are many tools that facilitatesdeveloping web applications.
I Browser support varies between tools, mostexamples will be using Firefox.
I You are strongly advised to start usingsome of the following tools, they will helpyou a lot.
39 / 52
![Page 127: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/127.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Web Development Tools
I There are many tools that facilitatesdeveloping web applications.
I Browser support varies between tools, mostexamples will be using Firefox.
I You are strongly advised to start usingsome of the following tools, they will helpyou a lot.
39 / 52
![Page 128: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/128.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Browser Web ConsoleI Most browsers have a
built-in console.
I The console logsinformation associatedwith the web page, forexample errors andwarnings related toJavaScript, CSS andnetwork requests.
I It enables you to runJavaScript expressionsin the web page.
I It also lets you choose elements from the web pageand have their HTML and CSS displayed.
40 / 52
![Page 129: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/129.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Browser Web ConsoleI Most browsers have a
built-in console.
I The console logsinformation associatedwith the web page, forexample errors andwarnings related toJavaScript, CSS andnetwork requests.
I It enables you to runJavaScript expressionsin the web page.
I It also lets you choose elements from the web pageand have their HTML and CSS displayed.
40 / 52
![Page 130: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/130.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Browser Web ConsoleI Most browsers have a
built-in console.
I The console logsinformation associatedwith the web page, forexample errors andwarnings related toJavaScript, CSS andnetwork requests.
I It enables you to runJavaScript expressionsin the web page.
I It also lets you choose elements from the web pageand have their HTML and CSS displayed.
40 / 52
![Page 131: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/131.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Browser Web ConsoleI Most browsers have a
built-in console.
I The console logsinformation associatedwith the web page, forexample errors andwarnings related toJavaScript, CSS andnetwork requests.
I It enables you to runJavaScript expressionsin the web page.
I It also lets you choose elements from the web pageand have their HTML and CSS displayed.
40 / 52
![Page 132: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/132.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Browser Web Console (Cont’d)
I The console is opened withCtrl-Shift-K in Firefox andCtrl-Shift-J in Chrome.
41 / 52
![Page 133: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/133.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Firebug
I Firebug is a powerful plug-in to Firefox.I In addition to console features, you can for
example debug JavaScript, mark HTMLelements, edit CSS and log network traffic.
I There are also many plug-ins to Firebug.I There is a cross-browser version of
Firebug, written in JavaScript, that offers asubset of the functionality for most otherbrowsers.
42 / 52
![Page 134: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/134.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Firebug
I Firebug is a powerful plug-in to Firefox.I In addition to console features, you can for
example debug JavaScript, mark HTMLelements, edit CSS and log network traffic.
I There are also many plug-ins to Firebug.
I There is a cross-browser version ofFirebug, written in JavaScript, that offers asubset of the functionality for most otherbrowsers.
42 / 52
![Page 135: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/135.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Firebug
I Firebug is a powerful plug-in to Firefox.I In addition to console features, you can for
example debug JavaScript, mark HTMLelements, edit CSS and log network traffic.
I There are also many plug-ins to Firebug.I There is a cross-browser version of
Firebug, written in JavaScript, that offers asubset of the functionality for most otherbrowsers. 42 / 52
![Page 136: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/136.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Firebug
I Firebug is a powerful plug-in to Firefox.I In addition to console features, you can for
example debug JavaScript, mark HTMLelements, edit CSS and log network traffic.
I There are also many plug-ins to Firebug.I There is a cross-browser version of
Firebug, written in JavaScript, that offers asubset of the functionality for most otherbrowsers. 42 / 52
![Page 137: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/137.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Web DeveloperI Web Developer is a powerful
plug-in to Firefox, whichallows you to:
I edit HTML and CSS.
I See the area coveredby a chosen element.
I See the page indifferent screenresolutions.
I Edit cookies.I Validate HTML and
CSS.
I Web Developer has beenported to Chrome.
43 / 52
![Page 138: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/138.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Web DeveloperI Web Developer is a powerful
plug-in to Firefox, whichallows you to:
I edit HTML and CSS.I See the area covered
by a chosen element.
I See the page indifferent screenresolutions.
I Edit cookies.I Validate HTML and
CSS.
I Web Developer has beenported to Chrome.
43 / 52
![Page 139: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/139.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Web DeveloperI Web Developer is a powerful
plug-in to Firefox, whichallows you to:
I edit HTML and CSS.I See the area covered
by a chosen element.I See the page in
different screenresolutions.
I Edit cookies.I Validate HTML and
CSS.
I Web Developer has beenported to Chrome.
43 / 52
![Page 140: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/140.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Web DeveloperI Web Developer is a powerful
plug-in to Firefox, whichallows you to:
I edit HTML and CSS.I See the area covered
by a chosen element.I See the page in
different screenresolutions.
I Edit cookies.
I Validate HTML andCSS.
I Web Developer has beenported to Chrome.
43 / 52
![Page 141: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/141.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Web DeveloperI Web Developer is a powerful
plug-in to Firefox, whichallows you to:
I edit HTML and CSS.I See the area covered
by a chosen element.I See the page in
different screenresolutions.
I Edit cookies.I Validate HTML and
CSS.
I Web Developer has beenported to Chrome.
43 / 52
![Page 142: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/142.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Web DeveloperI Web Developer is a powerful
plug-in to Firefox, whichallows you to:
I edit HTML and CSS.I See the area covered
by a chosen element.I See the page in
different screenresolutions.
I Edit cookies.I Validate HTML and
CSS.
I Web Developer has beenported to Chrome.
43 / 52
![Page 143: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/143.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Web DeveloperI Web Developer is a powerful
plug-in to Firefox, whichallows you to:
I edit HTML and CSS.I See the area covered
by a chosen element.I See the page in
different screenresolutions.
I Edit cookies.I Validate HTML and
CSS.
I Web Developer has beenported to Chrome.
43 / 52
![Page 144: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/144.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Validators
I There are online validators for both HTMLand CSS. Links can be found on the courseweb site.
I Remember to always validate your HTMLand CSS code.
44 / 52
![Page 145: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/145.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Validators
I There are online validators for both HTMLand CSS. Links can be found on the courseweb site.
I Remember to always validate your HTMLand CSS code.
44 / 52
![Page 146: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/146.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
NetBeans
I There are many different IDEs for webdevelopment, all have their pros and cons.
I NetBeans will be used for examples duringthe course. Make sure to download the Allversion, see image above.
I Most important is that you actually use anIDE, do not program in a text editor unlessyou are really sure it is what you prefer.
45 / 52
![Page 147: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/147.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
NetBeans
I There are many different IDEs for webdevelopment, all have their pros and cons.
I NetBeans will be used for examples duringthe course. Make sure to download the Allversion, see image above.
I Most important is that you actually use anIDE, do not program in a text editor unlessyou are really sure it is what you prefer. 45 / 52
![Page 148: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/148.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
NetBeans
I There are many different IDEs for webdevelopment, all have their pros and cons.
I NetBeans will be used for examples duringthe course. Make sure to download the Allversion, see image above.
I Most important is that you actually use anIDE, do not program in a text editor unlessyou are really sure it is what you prefer. 45 / 52
![Page 149: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/149.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
JSFiddle and JSLint
I JSFiddle is an online editor where you cantest HTML, CSS and JavaScript.
I JSLint is an online tool for testingJavaScript code quality.
46 / 52
![Page 150: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/150.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
JSFiddle and JSLint
I JSFiddle is an online editor where you cantest HTML, CSS and JavaScript.
I JSLint is an online tool for testingJavaScript code quality.
46 / 52
![Page 151: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/151.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
W3Schools Try It Yourself
I w3schools.com has excellent tutorialsfor all languages covered in the course.
I All examples are presented with an onlineeditor where you can experiment with yourcode.
47 / 52
![Page 152: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/152.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
W3Schools Try It Yourself
I w3schools.com has excellent tutorialsfor all languages covered in the course.
I All examples are presented with an onlineeditor where you can experiment with yourcode.
47 / 52
![Page 153: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/153.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Section
Distributed Architectures
HTTP and Other Protocols
Tools
User Interface Design
48 / 52
![Page 154: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/154.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Use UI Guidelines!I This is not a course in human-computer
interaction. Still, it is mandatory to considerbasic heuristics for user interface design.
I There are some short introductory texts onuser interface design available at NielsenNorman Group, such as:
I 10 Usability Heuristics for User InterfaceDesign,http://www.nngroup.com/articles/ten-usability-heuristics/
I Top 10 Mistakes in Web Design,http://www.nngroup.com/articles/top-10-mistakes-web-design/
I Other lists linked from the latter.I Here follows the 10 usability heuristics
mentioned above.
49 / 52
![Page 155: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/155.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Use UI Guidelines!I This is not a course in human-computer
interaction. Still, it is mandatory to considerbasic heuristics for user interface design.
I There are some short introductory texts onuser interface design available at NielsenNorman Group, such as:
I 10 Usability Heuristics for User InterfaceDesign,http://www.nngroup.com/articles/ten-usability-heuristics/
I Top 10 Mistakes in Web Design,http://www.nngroup.com/articles/top-10-mistakes-web-design/
I Other lists linked from the latter.I Here follows the 10 usability heuristics
mentioned above.
49 / 52
![Page 156: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/156.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Use UI Guidelines!I This is not a course in human-computer
interaction. Still, it is mandatory to considerbasic heuristics for user interface design.
I There are some short introductory texts onuser interface design available at NielsenNorman Group, such as:
I 10 Usability Heuristics for User InterfaceDesign,http://www.nngroup.com/articles/ten-usability-heuristics/
I Top 10 Mistakes in Web Design,http://www.nngroup.com/articles/top-10-mistakes-web-design/
I Other lists linked from the latter.I Here follows the 10 usability heuristics
mentioned above.
49 / 52
![Page 157: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/157.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Use UI Guidelines!I This is not a course in human-computer
interaction. Still, it is mandatory to considerbasic heuristics for user interface design.
I There are some short introductory texts onuser interface design available at NielsenNorman Group, such as:
I 10 Usability Heuristics for User InterfaceDesign,http://www.nngroup.com/articles/ten-usability-heuristics/
I Top 10 Mistakes in Web Design,http://www.nngroup.com/articles/top-10-mistakes-web-design/
I Other lists linked from the latter.
I Here follows the 10 usability heuristicsmentioned above.
49 / 52
![Page 158: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/158.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Use UI Guidelines!I This is not a course in human-computer
interaction. Still, it is mandatory to considerbasic heuristics for user interface design.
I There are some short introductory texts onuser interface design available at NielsenNorman Group, such as:
I 10 Usability Heuristics for User InterfaceDesign,http://www.nngroup.com/articles/ten-usability-heuristics/
I Top 10 Mistakes in Web Design,http://www.nngroup.com/articles/top-10-mistakes-web-design/
I Other lists linked from the latter.I Here follows the 10 usability heuristics
mentioned above. 49 / 52
![Page 159: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/159.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
Use UI Guidelines!I This is not a course in human-computer
interaction. Still, it is mandatory to considerbasic heuristics for user interface design.
I There are some short introductory texts onuser interface design available at NielsenNorman Group, such as:
I 10 Usability Heuristics for User InterfaceDesign,http://www.nngroup.com/articles/ten-usability-heuristics/
I Top 10 Mistakes in Web Design,http://www.nngroup.com/articles/top-10-mistakes-web-design/
I Other lists linked from the latter.I Here follows the 10 usability heuristics
mentioned above. 49 / 52
![Page 160: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/160.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
J. Nielsen’s UI Design Principles
1. The system should always keep usersinformed about what is going on.
2. Use words, phrases and concepts familiarto the user, rather than system-orientedterms.
3. Implement undo and redo.4. Follow platform conventions, users should
not have to wonder whether different words,situations, or actions mean the same thing.
50 / 52
![Page 161: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/161.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
J. Nielsen’s UI Design Principles
1. The system should always keep usersinformed about what is going on.
2. Use words, phrases and concepts familiarto the user, rather than system-orientedterms.
3. Implement undo and redo.
4. Follow platform conventions, users shouldnot have to wonder whether different words,situations, or actions mean the same thing.
50 / 52
![Page 162: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/162.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
J. Nielsen’s UI Design Principles
1. The system should always keep usersinformed about what is going on.
2. Use words, phrases and concepts familiarto the user, rather than system-orientedterms.
3. Implement undo and redo.4. Follow platform conventions, users should
not have to wonder whether different words,situations, or actions mean the same thing.
50 / 52
![Page 163: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/163.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
J. Nielsen’s UI Design Principles
1. The system should always keep usersinformed about what is going on.
2. Use words, phrases and concepts familiarto the user, rather than system-orientedterms.
3. Implement undo and redo.4. Follow platform conventions, users should
not have to wonder whether different words,situations, or actions mean the same thing.
50 / 52
![Page 164: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/164.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
J. Nielsen’s UI Design Principles
5. Eliminate error-prone conditions or checkfor them and ask users to confirm beforethey commit to the action.
6. Minimize the user’s memory load by makingobjects, options, etc visible. The usershould not have to remember information.
7. Use accelerators to speed up interaction forexpert users.
8. Remove irrelevant information.
51 / 52
![Page 165: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/165.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
J. Nielsen’s UI Design Principles
5. Eliminate error-prone conditions or checkfor them and ask users to confirm beforethey commit to the action.
6. Minimize the user’s memory load by makingobjects, options, etc visible. The usershould not have to remember information.
7. Use accelerators to speed up interaction forexpert users.
8. Remove irrelevant information.
51 / 52
![Page 166: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/166.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
J. Nielsen’s UI Design Principles
5. Eliminate error-prone conditions or checkfor them and ask users to confirm beforethey commit to the action.
6. Minimize the user’s memory load by makingobjects, options, etc visible. The usershould not have to remember information.
7. Use accelerators to speed up interaction forexpert users.
8. Remove irrelevant information.
51 / 52
![Page 167: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/167.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
J. Nielsen’s UI Design Principles
5. Eliminate error-prone conditions or checkfor them and ask users to confirm beforethey commit to the action.
6. Minimize the user’s memory load by makingobjects, options, etc visible. The usershould not have to remember information.
7. Use accelerators to speed up interaction forexpert users.
8. Remove irrelevant information.
51 / 52
![Page 168: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/168.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
J. Nielsen’s UI Design Principles
9. Error messages should be expressed inplain language, precisely indicate theproblem, and suggest a solution.
10. If necessary, provide help anddocumentation. The help should be easy tosearch, focused on the user’s task, and listconcrete steps to be carried out.
52 / 52
![Page 169: Distributed Architectures Introduction to Internet · Distributed Architectures HTTP and Other Protocols Tools User Interface Design Introduction to Internet Applications Internet](https://reader035.vdocument.in/reader035/viewer/2022062920/5f028cde7e708231d404d217/html5/thumbnails/169.jpg)
Introduction
DistributedArchitectures
HTTP and OtherProtocols
Tools
User InterfaceDesign
J. Nielsen’s UI Design Principles
9. Error messages should be expressed inplain language, precisely indicate theproblem, and suggest a solution.
10. If necessary, provide help anddocumentation. The help should be easy tosearch, focused on the user’s task, and listconcrete steps to be carried out.
52 / 52