Web Technologies

Instructor: Humaira Waqas

Content

• Web Terminologies
• Hypertext Transfer Protocol (HTTP)
• Uniform Resource Locator (URL)
• World Wide Web (WWW)
• World Wide Web (W3C) Consortium
• Evolution of Web
 • Internet
• A global computer network, consisting of
interconnected networks using
standardized communication protocols.
• IP Address
• Internet Protocol (IP) Unique address that
identifies a device on the internet or a
local network.
• World Wide Web
• The World Wide Web (WWW) is a system
Web of interlinked hypertext documents
accessed via the Internet. It is
Terminologies an information space where documents
and other web resources are identified
by Uniform Resource Locators (URLs).
• Hyperlink
• In computing, a hyperlink, or simply a link,
is a reference to data that the reader can
directly follow by clicking.
 • HTML
• Short for Hypertext Markup Language,
the authoring language used to create
documents on the World Wide Web.
• Markup Language is like a blueprint or
layout for the processing and
appearance of text documents. In
HTML, tags are used to specify the
layout or the way to subsequent line
must appear.
• Web page
• A document on the WWW. Every web
page is identified by a unique URL.
• Website
• A website is a collection of related web
pages, including multimedia content,
Web typically identified with a
common domain name. Each site is
Terminologies owned and managed by an individual,
company or organization.
Web Terminologies
• Home page
• The main page of a Web site. Typically, the home page serves as an
index or table of contents to other documents stored at the site.
• Browser
• Short for Web browser, a software application used to locate and
display Web sites.
• Web server
• A computer that runs websites.
• A computer which has a program install in it that distributes web
pages as they are requested.
• HTTP
• Short for Hyper Text Transfer Protocol, the underlying protocol used by
the WWW.
• HTTP defines how messages are formatted and transmitted, and what
actions Web servers and browsers take in response to various
commands.
Client Server Communication
Http Request
Message
HTTP
• Http Header
• HTTP headers are the code that transfers data between
a Web server and a client.
• HTTP headers are the name or value pairs that are
displayed in the request and response messages of
message headers for Hypertext Transfer Protocol (HTTP)
• Usually, the header name and the value are separated
by a single colon.
• HTTP headers are an integral part of HTTP requests and
responses.
HTTP
• Http Request Header
• Whenever you type a URL into the address bar and try
to access it, your browser sends an HTTP request to the
server.
• The HTTP request header contains information in a
form, e.g.
• Type, capabilities and version of the browser that generates the
request
• Operating system used by the client
• Page that was requested
• Various types of outputs accepted by the browser
HTTP
• Http General Header
• These headers contain directives that need to be
followed, for both the requester and receiver.
• This can include information regarding:
• Caching directives.
• Specified connection options.
• The date
• Upgrade (for if the protocols need to be switched) etc
HTTP
• Http Entity Header
• These headers include information regarding:
• Allow (methods supported by the identified resource)
• Content Encoding.
• Content Language.
• Content Location.
• Content Length.
• MD-5 (for checking the integrity of the message upon
receipt).
• Content Range.
• Content Type.
• When it Expires.
• When it was last modified.
 HTTP

• Body is optional.
• Contains data associated with the request like content of an HTML form.
• Body can be divided into two categories:
• Single resource bodies.
• Consist of one single file and is defined by two headers i.e., content-type
and content-length
• Multiple resource bodies.
• Consist of multipart body, each containing different information. This is
typically associated with HTML Forms.
HTTP
• Http Response Header
• Upon receiving the request header, the Web server will
send an HTTP response header back to the client.
• An HTTP response header includes information in a text-
record form that a Web server transmits back to the
client's browser.
• The response header contains particulars such as:
• Type, date and size of the file sent back by the server, as well as
information regarding the server.
 Request/ Response Example
• HTTP request to fetch t.html page that does not exist on the web server running on tutorialspoint.com.
• Request Message
• GET /t.html HTTP/1.1
• User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)
• Host: www.tutorialspoint.com
• Accept-Language: en-us
• Accept-Encoding: gzip, deflate
• Response Message
• HTTP/1.1 404 Not Found
• Date: Sun, 18 Oct 2012 10:36:20 GMT
• Server: Apache/2.2.14 (Win32)
• Content-Length: 230
• Content-Type: text/html;
• Connection: Closed

<html>
<head>
<title>404 Not Found</title>
</head>
<body>
<h1>Not Found</h1>
<p>The requested URL /t.html was not found on this server.</p>
</body> </html>
Http Response Message
• HTTP/1.1 200 OK
• Date: Mon, 27 Jul 2009 12:28:53 GMT
• Server: Apache/2.2.14 (Win32)
• Content-Type: text/html
• Connection: Closed
• (blank line)
• <html>
• <body>
• <h1>Hello, World!</h1>
• </body>
• </html>
 • HTTP is a transaction-oriented client/server
protocol.
HTTP • HTTP is a stateless protocol and creates a TCP
Overview connection for each transaction (e.g., download a
page).
• A stateless protocol is a communications protocol
that treats each request as an independent
transaction that is unrelated to any previous
request.
• Each transaction is treated separately so that the
communication consists of independent pairs of
requests and responses.
• An HTTP server has no knowledge of which web
pages (if any) a client has accessed previously.
• If a web server needs to store a client's state, it can
store cookies in the client’s web browser (cookies
are not part of http).
 Web Terminologies
• URI:
• URI stands for Uniform Resource
Identifier and it uniquely identifies a
resource over the Web. • URN:
• URL: URN stands for Uniform Resource Name
• URL stands for Uniform Resource and it identifies a resource by name in a
Locator and it defines the network
location of a specific resource. A given namespace. A namespace refers a
resource, or a web resource refers to group of names or identifiers.
anything ranging from documents,
files, images, web pages, etc. that
can be part of the web architecture.
 Web Applications
• Web applications
• A software system that is a combination of Web standards + Web
technologies
• Web Standards
• Produced by the World Wide Web Consortium W3C
• W3C
• An international community that develops standards to ensure
long-term growth of the web.
• A body which provide the standards, specifications, guidelines,
software's and tools to lead the web
 • British engineer and computer scientist Tim Berners-Lee, now
Director of the W3C has invented WWW in 1989.
• WWW was unstructured in the beginning.
• HTML 1.0 published in 1991
• HTML 4.01 published in 1999
• not strict, no error generations
• XHTML 1.0, and XHTML 2.0 published in 2000
• Strictly requires to comply by the standards and rejects
web pages otherwise.
• XHTML was rejected by the web developing community
and was abandoned in 2009.
• HTML 5.0 published in 2012
• Often termed as semantic HTML.
• <email>humaira.@abc.com</email>, <nav>link1</nav>
• A way from unstructured data to structure the data to
History facilitate:
of • Search engines to retrieve relevant documents
WWW against keywords.
• Web pages can index appropriately
• Minimization of use of 3rd party audio video players.
• Instead of using 3rd party software's, games,
interactive graphs or drawing tools can be made
using canvas and JavaScript.
 Evolution of Web
• Web 1.0
• The era was all about read-only content and static HTML websites.
• Fixed content and primarily informational.
• Limited user interaction (view information).
• Typically, it had simple forms for submitting data
• Web 2.0
• This is about user-generated content and the read-write web.
• Foster two-way communication between users and websites.
• People are consuming as well as contributing information through blogs or sites like
Flickr, YouTube, Digg, etc.
• Web 3.0
• This is about semantic web (or the meaning of data), intelligent search and behavioral
advertising among other things & most of all collective intelligence.
• Data integration and interoperability, allowing different applications to exchange and
interpret data.
• Personalization and context aware experiences, making easier to find relevant
information.
• Use AI and machine learning to facilitate tasks NLP and Knowledge reasoning.
Tiered Architecture
API
• API stands for Application Programming Interface.
An API is a software intermediary that allows two
applications to talk to each other.
• An API is like a waiter in a restaurant. The waiter
takes your order and sends it to the kitchen. The
kitchen then prepares the food and sends it back to
the waiter. The waiter then brings the food to you.
API
 FAST API
• FastAPI is a high-performing web framework for
building APIs with Python 3.7+ based on standard
Python type hints.
• It helps developers build applications quickly and
efficiently.
• FastAPI is built on top of the Starlette web server and
includes features that make building web applications
easier, such as:
• automatic data validation
• error handling
• interactive API docs.
 FAST API
Features:
• Performance: On par with NodeJS and the Go
language.
• Speed: Increase the development speed 2-3X.
• Easy: Great editor support. Completion everywhere.
Easy to learn and use.
• Robust: Production-ready code with automatic
interactive documentation.
• OpenAPI based: Fully compatible with OpenAPI and
JSON Schema.
FAST API
• Installing FastAPI
 FAST API
Creating a simple API
 FAST API
uvicorn main:app --reload
FAST API
 FASTAPI - Route
• A route is a URL pattern used to direct requests to their
appropriate handlers.
• In web frameworks, a route is typically associated with a
function or method that executes some action, returns
information, or processes data based on the HTTP request.
• Route = path + method
• Path = URI
• Methods:
• POST: to create data.
• GET: to read data.
• PUT: to update data.
• DELETE: to delete data.
• And a few other advanced ones
• FastAPI supports all of the http methods.
 FASTAPI

• The @app.get("/") tells FastAPI that the function right below

is in charge of handling requests that go to the path / using a
get operation.
• This is a decorator related to a path operation, or a path
operation decorator.
• To refresh async concept you can read the following article on it.
FASTAPI
path operation
• @app.post()
• @app.put()
• @app.delete()
• @app.options()
• @app.head()
• @app.patch()
• @app.trace()
 FASTAPI: Path Parameters

• The value of the path parameter item_id will be passed

to your function as the argument item_id
FAST API
 FASTAPI: Path Parameters with types

• In this case, item_id is declared to be an int

• The value of the path parameter item_id will be passed
to your function as the argument item_id
FASTAPI: data validation
 FAST API: put fixed paths first
• When creating path
operations, you may find
situations where you have a
fixed path, like /users/me
• also have the path
/users/{user_id} to get data
about a specific user by
some user ID
Router
• Router is a crucial component responsible for
directing incoming HTTP requests to the
appropriate handlers based on the request's URL
path and method.
• Purpose of Router:
• Routing Requests
• Organizing Code
• Middleware Integration
• Error Handling
• Enhancing Performance
 FASTAPI

• APIRouter is used to create a new router.

• The read_item function is attached to this router.
• The router is then included in the main FastAPI instance.
 Categories of Web Application
• Transactional applications
• Workflow based applications
• Project management systems
• Human resource management systems
• Business process management
• Health care management systems
• Collaborative/groupware applications
• Social web applications
• Portal oriented web applications
• Ubiquitous web applications:
• Applications that integrate seamlessly into our daily life.
• There characteristics: context awareness, multi-device support, scalable,
seamless integration etc.
• Examples: Health and fitness app, context-aware social media app, smart
home system, location based services etc
 • Web application with respect to usage.
Characteristics of • Usage is heterogenous
Web Applications • Social context
• Web application should be available
24/7
• Web applications may be developed for
known or unknown groups.
• Unknown groups might be disable,
have different customs,
preferences, interests etc.
• Technical context
• Network quality
• Multiplatform delivery
Characteristics of • Web application from development
perspective
Web Applications • Cross-platform compatibility
• Client-server architecture
• Statelessness handling
• Scalability
• Security
• Data management
• Performance optimization
• Testing and debugging
• Continuous Integration and
Continuous Deployment pipeline
automation
References
• https://flatworldbusiness.wordpress.com/flat-
education/previously/web-1-0-vs-web-2-0-vs-web-3-0-a-bird-eye-
on-the-definition/
• https://www.business2community.com/tech-gadgets/eras-of-the-
web-web-0-0-through-web-5-0-02239654
• https://www.researchgate.net/publication/321366810_Concept_
and_Dimensions_of_Web_40
• https://www.w3.org/
• https://www.w3.org/WAI/fundamentals/accessibility-intro/