Lecture 1 -HTTP
WWW vs Internet
1. World wide web: a global system of interconnected hypertext documents available via the
Internet.
2. Internet: interconnected computer networks that span the globe; communicating through a
common standard (TCP/IP)
3. Internet Engineering Task Force (IETF) leads to the development of the internet.
4. World Web Consortium (W3C) leads to development of the web.
Web is built on top of the Internet
Communication:
Client (always) initiates the communication, sending an HTTP request to the server
The server sends an HTTP response
HTTP is reliable; the data appears in order and undamaged.
HTTP is a plain text protocol and line-oriented.
HTTP proxies (part of Internet): devices that forward or process the HTTP requests
Network communication
OSI model: Open System Interconnection model
Network stack with the set of protocols
All these protocols together define how communication over the internet happens.
Physical layer
Works with bits that pass through the physical network that end in application layer.
Network protocols (3 of importance):
1. HTTP HyperText Transfer Protocol (top of stack)
2. TCP Transmission Control protocol (on top of IP)
3. IP Internet Protocol
Response to a request is structured into response header fields in the name:value format, and the
response body which contains the actual content.
,Polling: continuously sending HTTP request
Long polling: sending one request and only returning a result on new data
WebSockets enable bidirectional communication:
Client initiates a protocol upgrade by sending an HTTP request.
Domain Name System server – DNS
Entity responsible for translating a domain name into an IP address.
Status codes
1xx Informational
2xx Success
3xx Redirected
4xx Client error
5xx Server error
HTTP methods
GET Gets a document from the web server
HEAD Returns the header of a HTTP response only
POST Send data from the client to the server for processing
PUT Saves the body of the request on the server
TRACE Can be used to trace where a message passes through before arriving at the server
OPTIONS Helpful to determine what kind of methods a server supports
DELETE Can be used to remove documents from a web server
- GET requesting something
- HTTP.1.1 highest version HTTP
- User-Agent client
- HOST enables several domains to reside at the same IP address
- Etc.
HTTPS
All data sent to and by the server will be encrypted using certificates. Client and server negotiate
which protocol to use and then the most secure one that both support will be chosen. This
encryption is done using TLS.
,URL – Uniform Resource Locators
URLs offer a standardized way to point to any resource on the internet.
URLs generally consist of up to 9 parts:
1. <frag> Name of a piece of a resource (only used by the client)
2. <query> Parameters passed to gateway recourses (q=delft(google))
3. <params> Additional input parameters applications may require to access a resource
on the server correctly (startlocation = (maps))
4. <path> The local path to the resource (/pricewatch)
5. <port> The port on which the server is expecting request for the resource
6. <host> Domain name / IP address of server (tudelft.nl, facebook.com)
7. <user>:<password> Username/password
8. <scheme> Determines the protocol to use when connecting to the server (http/https)
Absolute URL: can retrieve a web resource without requiring any additional information.
Relative URL: require a base URL to enable their conversion into absolute URL.
Authentication
Any process by which the system verifies the identity of a user who wishes to access it.
Client IP tracking
Would mean that everyone in the household is seen as the same user. Since IP addresses are
only tied to a machine, not a person.
Fat URLs
Track users through the generation of a unique URL which is generated on the first visit.
Basic authentication
Explicitly ask for username and password before each request will be returned, so you can’t
even GET the site if you do not provide the correct password. The password is sent in
headers and base64 encoded (and encrypted if you use HTTPS).
, Lecture 2 - HTML, language of the web
Cross-platform applications
Web technologies also help you to create desktop apps or mobile apps. You can build cross-platform
desktop apps with HTML, JavaScript and CSS.
A cross-platform such as Electron has one major benefit, you only have to develop the application
once and can deploy on multiple platforms.
Downside: overhead of bundling a whole browser.
Web design basics
Basic rules that web applications should adhere to:
Don’t make me think
The user should not have to expend cognitive effort to understand what she can do.
The way websites work should be self-evident.
Minimize noise and clutter
Do not put as much as possible into a single page.
If you cannot make it self-evident make it self-explanatory
Self-explanatory sites require users to expend a small amount of cognitive effort,
that is the mental effort it takes to engage in a task.
Usability testing
Our expectations of web users are often not grounded in reality, that is why a web application should
be designed based on user reality.
Usability testing: important step to create a well-designed web application.
A typical usability setup has the following roles:
- Participant sits in front of the device
- Facilitator sits next to participant and guides her trough the test
- Observers watch the test and discuss the participants performance
Results of a test are translated (not issues) and assigned a priority.
Performance metrics
We also need to consider performance metrics – metrics that are user-centric.
Google considers the following three metrics to be core web vitals:
1. LCP – Largest contentful paint
Measures the time it takes to load a page’s main content.
2. FID – First input delay
Measures the time between a user first interacting with a page and the browser processing
corresponding event handlers.
3. CLS – Cumulative layout shift
Measures a page’s visual stability by aggregating to what extend visible elements shift in the
layout unexpectedly.
WWW vs Internet
1. World wide web: a global system of interconnected hypertext documents available via the
Internet.
2. Internet: interconnected computer networks that span the globe; communicating through a
common standard (TCP/IP)
3. Internet Engineering Task Force (IETF) leads to the development of the internet.
4. World Web Consortium (W3C) leads to development of the web.
Web is built on top of the Internet
Communication:
Client (always) initiates the communication, sending an HTTP request to the server
The server sends an HTTP response
HTTP is reliable; the data appears in order and undamaged.
HTTP is a plain text protocol and line-oriented.
HTTP proxies (part of Internet): devices that forward or process the HTTP requests
Network communication
OSI model: Open System Interconnection model
Network stack with the set of protocols
All these protocols together define how communication over the internet happens.
Physical layer
Works with bits that pass through the physical network that end in application layer.
Network protocols (3 of importance):
1. HTTP HyperText Transfer Protocol (top of stack)
2. TCP Transmission Control protocol (on top of IP)
3. IP Internet Protocol
Response to a request is structured into response header fields in the name:value format, and the
response body which contains the actual content.
,Polling: continuously sending HTTP request
Long polling: sending one request and only returning a result on new data
WebSockets enable bidirectional communication:
Client initiates a protocol upgrade by sending an HTTP request.
Domain Name System server – DNS
Entity responsible for translating a domain name into an IP address.
Status codes
1xx Informational
2xx Success
3xx Redirected
4xx Client error
5xx Server error
HTTP methods
GET Gets a document from the web server
HEAD Returns the header of a HTTP response only
POST Send data from the client to the server for processing
PUT Saves the body of the request on the server
TRACE Can be used to trace where a message passes through before arriving at the server
OPTIONS Helpful to determine what kind of methods a server supports
DELETE Can be used to remove documents from a web server
- GET requesting something
- HTTP.1.1 highest version HTTP
- User-Agent client
- HOST enables several domains to reside at the same IP address
- Etc.
HTTPS
All data sent to and by the server will be encrypted using certificates. Client and server negotiate
which protocol to use and then the most secure one that both support will be chosen. This
encryption is done using TLS.
,URL – Uniform Resource Locators
URLs offer a standardized way to point to any resource on the internet.
URLs generally consist of up to 9 parts:
1. <frag> Name of a piece of a resource (only used by the client)
2. <query> Parameters passed to gateway recourses (q=delft(google))
3. <params> Additional input parameters applications may require to access a resource
on the server correctly (startlocation = (maps))
4. <path> The local path to the resource (/pricewatch)
5. <port> The port on which the server is expecting request for the resource
6. <host> Domain name / IP address of server (tudelft.nl, facebook.com)
7. <user>:<password> Username/password
8. <scheme> Determines the protocol to use when connecting to the server (http/https)
Absolute URL: can retrieve a web resource without requiring any additional information.
Relative URL: require a base URL to enable their conversion into absolute URL.
Authentication
Any process by which the system verifies the identity of a user who wishes to access it.
Client IP tracking
Would mean that everyone in the household is seen as the same user. Since IP addresses are
only tied to a machine, not a person.
Fat URLs
Track users through the generation of a unique URL which is generated on the first visit.
Basic authentication
Explicitly ask for username and password before each request will be returned, so you can’t
even GET the site if you do not provide the correct password. The password is sent in
headers and base64 encoded (and encrypted if you use HTTPS).
, Lecture 2 - HTML, language of the web
Cross-platform applications
Web technologies also help you to create desktop apps or mobile apps. You can build cross-platform
desktop apps with HTML, JavaScript and CSS.
A cross-platform such as Electron has one major benefit, you only have to develop the application
once and can deploy on multiple platforms.
Downside: overhead of bundling a whole browser.
Web design basics
Basic rules that web applications should adhere to:
Don’t make me think
The user should not have to expend cognitive effort to understand what she can do.
The way websites work should be self-evident.
Minimize noise and clutter
Do not put as much as possible into a single page.
If you cannot make it self-evident make it self-explanatory
Self-explanatory sites require users to expend a small amount of cognitive effort,
that is the mental effort it takes to engage in a task.
Usability testing
Our expectations of web users are often not grounded in reality, that is why a web application should
be designed based on user reality.
Usability testing: important step to create a well-designed web application.
A typical usability setup has the following roles:
- Participant sits in front of the device
- Facilitator sits next to participant and guides her trough the test
- Observers watch the test and discuss the participants performance
Results of a test are translated (not issues) and assigned a priority.
Performance metrics
We also need to consider performance metrics – metrics that are user-centric.
Google considers the following three metrics to be core web vitals:
1. LCP – Largest contentful paint
Measures the time it takes to load a page’s main content.
2. FID – First input delay
Measures the time between a user first interacting with a page and the browser processing
corresponding event handlers.
3. CLS – Cumulative layout shift
Measures a page’s visual stability by aggregating to what extend visible elements shift in the
layout unexpectedly.
