web technologies (1/12): world wide web – architectural aspects
TRANSCRIPT
![Page 1: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/1.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/Web Technologies
☸major concepts & vision
![Page 2: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/2.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
“From a certain point onward, there is no longer any turning back.
That is the point that must be reached.”
Franz Kafka
![Page 3: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/3.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
What the Web means?
![Page 4: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/4.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
world wide web
an Internet service
WWW Internet
![Page 5: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/5.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
world wide web
Idea (Sir Tim Berners-Lee @ CERN – 1989)
integrating distinct information systems in an unitary manner,
without differences between data sources
![Page 6: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/6.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
world wide web
Idea (Sir Tim Berners-Lee @ CERN – 1989)
integrating distinct information systemsin an unitary manner,
without differences between data sources
![Page 7: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/7.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
world wide web
Idea (Sir Tim Berners-Lee @ CERN – 1989)
integrating distinct information systems in an unitary manner,
without differences between data sources
![Page 8: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/8.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
world wide web
Idea (Sir Tim Berners-Lee @ CERN – 1989)
integrating distinct information systems in an unitary manner,
without differences between data sources
anything can link to anything
![Page 9: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/9.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
world wide web
“a common information space in whichwe communicate by sharing information”
Sir Tim Berners-Lee (2013)
also, study S. Buraga, 25 de ani de Web (2014) [RO]http://www.slideshare.net/busaco/25-de-ani-de-web
![Page 10: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/10.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
world wide web
based on client/server approach
Web server
Web client
(browser)
request
response
![Page 11: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/11.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
…and on hypertext (hypermedia)
![Page 12: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/12.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
world wide web
Main intents:
device independencesoftware independence
scalabilityubiquity
![Page 13: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/13.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
world wide web
Main intents:
device independencesoftware independence
scalabilityubiquity
open standards
![Page 14: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/14.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
world wide web
Operates according to the recommendations of World Wide Web Consortium – W3C
MIT, ERCIM, Keio University etc.
Apple, BBC, CERN, HP, IBM, Intel, OpenCar, Microsoft,Mozilla Foundation, Samsung, Syncro Soft, Wiley,…
www.w3.org
![Page 15: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/15.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Web architecture
Resources are identified by their address
URI – Uniform Resource Identifier
http://slideshare.net/busaco/presentations
![Page 16: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/16.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Web architecture
Access to the Web resources’ content – resource representation –
is achieved by using a protocol
HTTP – HyperText Transfer Protocol
![Page 17: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/17.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Web architecture
data encodingUnicode
Internet domain names
DNS
InternetprotocolsTCP/IP
Web addressesURI = URL + URN
Web protocolsHTTP, HTTPS
![Page 18: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/18.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
resources – documents – include <markups />
Web pages
![Page 19: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/19.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Anca
Bogdan
knowsowns
hasName
album
photo
twitter.com/pinkfloyd
tagfollows
owns
sameComposer
markups themselves include URIshypertext (hypermedia)
![Page 20: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/20.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Relations between a Web resource, its address (URI) and a structured representation of the resource
weather forecasting about Iași
<section id="meteo">
<div class="weather">
<p lang="ro">Iași</p>
<span>city</span>
<p lang="en">Temp.
<span id="today">
is <strong>…</strong>
°C</span>
</p>
</div>
</section>
representation
addressability via URI
Web resource
identifies
represents
HTML5 format(typically, human users)
http://world.info/europe/romania/iasi/weather?today
![Page 21: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/21.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Relations between a Web resource, its address (URI) and a structured representation of the resource
weather forecasting about Iași
addressability via URI
Web resource
identifies
represents
XML format(software processable)
http://world.info/europe/romania/iasi/weather?today
<weather><point lat="..." long="…">
<name lang="ro">Iași
</name><type>city</type>…
</point><temperature when="…">
<value>…</value> </temperature>
</weather>
representation
![Page 22: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/22.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Relations between a Web resource, its address (URI) and a structured representation of the resource
weather forecasting about Iași
addressability via URI
Web resource
identifies
represents
JSON format(software processable)
http://world.info/europe/romania/iasi/weather?today
{ "point" : {"geo" : { "lat" : "…",
"long" : "…" },"name" : "Iași", "type" : "city"
},"temperature" : {
"when" : "…","value" : "…"
}}
representation
![Page 23: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/23.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Relations between a Web resource, its address (URI) and a structured representation of the resource
weather forecasting about Iași
addressability via URI
Web resource
identifies
represents
http://world.info/europe/romania/iasi/weather?today
<section id="meteo">
<div class="weather">
<p lang="ro">Iași</p>
<span>(city)</span>
<p lang="en">Temp.
<span class="today">
is <strong>…</strong>
°C</span>
</p>
</div>
</section>
representation
{ …"temperature" : {
"when" : "…","value" : "…"
}…
}
representation
representation – denoted by an open format (e.g., HTML, XML, JSON, RDF,…) – includes data itself + meta-data
![Page 24: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/24.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
What hypertext means?
![Page 25: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/25.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
hypertext: definition
Written or graphical data, interconnected in a complex manner,
which conventionally can not be represented on paper
Ted Nelson, 1965
![Page 26: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/26.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Non-linear text
hypertext: definition
![Page 27: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/27.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Non-linear text
versus
hypertext: definition
![Page 28: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/28.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
A form of an electronic document
hypertext: definition
![Page 29: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/29.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
A form of an electronic document
open formats for content representation:DocBook
HTML (HyperText Markup Language)ODF (Open Document Format)
PDF (Portable Document Format)…
hypertext: definition
![Page 30: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/30.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
hypertext: history
Vannevar Bush – As We May Think, 1945
MEMEX (MEMory EXtended)
![Page 31: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/31.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
“Consider a future device for individual use, which is a sort of mechanized private file and library. […] It affords an immediate step,
however, to associative indexing, the basic idea of which is a provision whereby any item may be caused at will to select
immediately and automatically another. […] The process of tying two items together is the important thing.”
![Page 32: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/32.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
hypertext: history
Douglas Engelbart
Augment (1968)
mouse, graphical user-interface, text processing,
e-mail, scripting, windows on a screen, etc.
The Mother of All Demos (1968)https://www.youtube.com/watch?v=yJDv-zdhzMY
![Page 33: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/33.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
hypertext: history
Ted NelsonXanadu – prototype, 1991
coined the “hypertext” term
![Page 34: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/34.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
hypertext: history
Hypermedia = hypertext + multimedia
Multimedia = medium
![Page 35: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/35.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
hypertext: history
Hypermedia = hypertext + multimedia
Multimedia = medium
communication media:continuous (audio, video) and/or discrete (text)
![Page 36: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/36.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
hypertext: ingredients
Hypertextul as a (di)graph
nodes = concepts
edges = relations
![Page 37: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/37.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
hypertext: ingredients
Nodes interconnected by links (edges)
source node = reference (anchor)
destination node = referent (anchor)
![Page 38: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/38.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
hypertext: links
referential (non-hierarchical)organizational (hierarchical, structural)
![Page 39: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/39.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
hypertext: links
static (indicated by the author of a document) versusdynamic – generated by software
![Page 40: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/40.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
hypertext: documents
Contentmedia type: text, image, audio, video,…
Organizationnodes + structural (hyper-)links
Presentation(non-)interactive textual, graphical,
multimedia, 3D, mixed
![Page 41: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/41.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
(instead of) break
http://digitalsynopsis.com/design/web-designer-developer-jokes-humour-funny/
![Page 42: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/42.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
How the Web resources are identified (addressed)?
![Page 43: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/43.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
URI
Each Web resource is denoted by a standard identifier
Uniform Resource Identifier
RFC 2396, 3986https://www.rfc-editor.org/rfc/rfc3986.txt
![Page 44: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/44.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
URI: definitions
Resource“thing” having an identity
![Page 45: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/45.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
URI: definitions
Resource“thing” having an identity
note, CV, photo, presentation, melody, program,person, database, arbitrary concept, etc.
![Page 46: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/46.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
URI: definitions
Identifierobject that can denote a resource
![Page 47: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/47.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
URI: definitions
Identifierobject that can denote a resource
a character sequence (string) conforming to a given syntax
![Page 48: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/48.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
URI: definitions
Uniformityheterogeneous resources can be denoted
by using the same syntactic conventions and semantically interpreted in an uniform manner
![Page 49: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/49.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
URI = URL + URN
Uniform Resource Locator
identifies resources by using a location on a computer network + a retrieval convention:
network address, symbolic Internet domain
RFC 2717, 2718
![Page 50: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/50.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
URI = URL + URN
Uniform Resource Locator
http://profs.info.uaic.ro/~busaco/teach/
mailto:[email protected]
ftp://ftp.funet.fi/pub/README.txt
data:image/png;base64,iVBORw0KGgoAA…YII=
tel:+40232201090
geo:47.16667,27.60000
![Page 51: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/51.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
URI = URL + URN
Uniform Resource Name
identifies resources by name, in a persistent way, even if the resource is an abstract one
RFC 2141
![Page 52: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/52.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/URI = URL + URN
urn:mimetypes
urn:ISBN:973-681-988-4
urn:ietf:rfc:7700
urn:mozilla:install-manifest
![Page 53: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/53.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/URI = URL + URN
urn:mimetypes
urn:ISBN:973-681-988-4
urn:ietf:rfc:7700
urn:mozilla:install-manifest
MIME data types
book uniquely identified by
ISBN
specification(standard)
software component
![Page 54: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/54.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
schema://authority/path?query
http://www.penguin.info/prog/search?id=Tux
![Page 55: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/55.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
schema://authority/path?query
http://www.penguin.info/prog/search?id=Tux
schema represents a standardized addressing schema(recognized by the client – e.g., Web browser)
about file ftp geo http https im imap ipp ldap mailto
news nfs sip sms stun tel turn tv urn ws xmpp etc.
www.iana.org/assignments/uri-schemes/uri-schemes.xhtml
![Page 56: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/56.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
schema://authority/path?query
http://www.penguin.info/prog/search?id=Tux
authority can include user authentication information(name:password – specified in plain text!)
+data about the Internet domain/address,
optionally the port number
![Page 57: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/57.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
schema://authority/path?query
http://www.penguin.info/prog/search?id=Tux
path refers a (virtual) path towards a resource name –considered as a file name, optionally having an extension
![Page 58: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/58.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
schema://authority/path?query
http://www.penguin.info/prog/search?id=Tux
query specifies input datausually, pairs key=value delimited by „&”
![Page 59: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/59.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
URI
Reserved characters; / ? : @ & = + $ ,
encoded in base 16, prefixed by %
URL encoding
![Page 60: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/60.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
URI
Reserved characters; / ? : @ & = + $ ,
encoded in base 16, prefixed by %
example: space will become %20
why?
![Page 61: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/61.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
URI
Absolute URIs
http://www.info.uaic.ro/~busaco/cv.html
schema and authority components are mandatory specified
![Page 62: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/62.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
URI
Relative URIs
../../web.css
only the constructs regarding the path– and, optionally, query – are indicated
![Page 63: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/63.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
URI
“Fragments” of a given content can be referred by URIref
(references, fragment identifiers)
URI#URIref
![Page 64: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/64.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
URI
“Fragments” of a given content can be referred by URIref
(references, fragment identifiers)
URI#URIref
web-biblio.html#web
https://drive.google.com/#my-drive
![Page 65: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/65.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/URI
URIs must be considered opaque
don’t “guess” the content type by inspecting the URI indicating a resource
advanced
![Page 66: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/66.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/URI
URIs must be considered opaque
don’t “guess” the content type by inspecting the URI indicating a resource
resource type is not given by the extension – e.g., .html –,but the MIME type indicated by the server
advanced
![Page 67: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/67.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/URI
URIs must be considered opaque
don’t “guess” the content type by inspecting the URI indicating a resource
the resource state/content can change in time, but not its URI
“Cool URIs don’t change” – www.w3.org/Provider/Style/URI.html
advanced
![Page 68: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/68.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/IRI
Internationalized Resource Identifier
permits the use of Unicode characters
see also IDN (Internationalized Domain Name)
examples: http://thefreedictionary.com/rosé
http://www.köpabåt.eu/motorbat/
http://www.以食為天.tw/
![Page 69: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/69.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
What kind of Web applications can we develop?
![Page 70: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/70.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Web site
a system running a Web server, hosting a set of related pages (resources)
regarding an organization, company or person(s)
![Page 71: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/71.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Web application
a collection of interconnected Web pages having the content dynamically generated,
in order to offer a specific functionally to its users
![Page 72: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/72.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Web application
the interaction between application and users is facilitated by a Web interface
![Page 73: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/73.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Web application
the interaction between application and users is facilitated by a Web interface
usually, Web site ≡ Web application
![Page 74: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/74.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Web application
examples:Amazon, DevDocs, eMAG, Flickr, fiddles.io, GitHub, InfoQ, info.uaic.ro, Last.fm, Koding, Medium, OverLeaf, Reddit, Quora, SlideShare, Vimeo, UXPin, webmin, WordPress
…and many, many, many others
![Page 75: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/75.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Document-centricInteractiveTransactionalCollaborativePortal-orientedUbiquitousSocial WebSemantic Web
evolution of complexity
categories of web applications
![Page 76: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/76.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Document-centric
static content/page(s): Web sites regarding organizations, companies, persons
![Page 77: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/77.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
![Page 78: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/78.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Interactive
virtual expositionsnews Web sitese-travel systems
info kiosksonline participation
…
![Page 79: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/79.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
![Page 80: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/80.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Transactional
online bankingB2B (business-to-business) solutions
B2C (business-to-consumer) applicationsC2C (consumer-to-consumer) systems
Web workflows
![Page 81: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/81.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
![Page 82: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/82.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Collaborative
Web tele-conferenceswiki applications
e-learning servicespeer-to-peer Web applications
![Page 83: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/83.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
![Page 84: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/84.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Portal-oriented
providing specific – technical, business, governmental –information of interest
species: citizenship Web
![Page 85: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/85.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
![Page 86: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/86.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Ubiquitous
user location-based mobile services, available on multiple platforms:
desktop, mobile device, tablet, game console,…
mobile Web
![Page 87: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/87.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
![Page 88: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/88.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Social Web
content syndicationcollaborative filtering via tagging
virtual workplacesdigital entertainment
social (game) computing
![Page 89: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/89.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
object of
interest
multiplemental
associa-tions
(concepts)
tt
tt
tagging
tagging represents a specific technique of digital content annotation concerning Web resources
![Page 90: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/90.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
object of
interest
multiplemental
associa-tions
(concepts)
tt
tt
tagging
tag = simple (meta-)data – an arbitrary term –
externally associated to an object (a resource)
in order to identify, classify, aggregate, etc. that resource
![Page 91: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/91.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
![Page 92: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/92.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Semantic Web(Web of Data – the Web of linked data)
knowledge modelling to be “understood” by computers
datainformationknowledge
advanced
![Page 93: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/93.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
advanced
![Page 94: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/94.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
How about the generic architecture of a Web application?
![Page 95: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/95.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/Web client Web server
staticcontent
dynamiccontent
staticcontent
dynamiccontent
localdata
JavaScript app servers, frameworks
HTTP
async
via a Web interface, the user interacts with the front-endand launch actions – e.g., (a)synchronous HTTP requests –to be performed by various components implemented by
the back-end, in order to obtain desired data
☁remote data(Web service)
front-end back-end
![Page 96: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/96.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Web app. = Interface + Content (Data) + Program
![Page 97: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/97.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Web app. = Interface + Content (Data) + Program
myth 1: the most important thing is the interfacemyth 2: the most important thing is the program
myth 3: the most important thing is the data
open standards: HTML, CSS, Ajax, SVG, WebGL,…
![Page 98: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/98.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Web app. = Interface + Content (Data) + Program
myth 1: the most important thing is the interfacemyth 2: the most important thing is the program
myth 3: the most important thing is the data
server: C#, Java, JavaScript, PHP, Ruby,…; client: JavaScript
![Page 99: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/99.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Web app. = Interface + Content (Data) + Program
myth 1: the most important thing is the interfacemyth 2: the most important thing is the program
myth 3: the most important thing is the data
relational model (SQL), graph (NoSQL), JSON, XML, RDF
![Page 100: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/100.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Web app. = Interface + Content (Data) + Program
myth 1: the most important thing is the interfacemyth 2: the most important thing is the program
myth 3: the most important thing is the data
fact: all of them are important!
![Page 101: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/101.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/“conclusion”
☸terminology, client/server model, hypertext,
URI, Web site vs. application, Web apps. categories
![Page 102: Web Technologies (1/12): World Wide Web – Architectural Aspects](https://reader031.vdocuments.site/reader031/viewer/2022030317/5a652ee07f8b9a8c388b46af/html5/thumbnails/102.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
next episode: Web programmingfrom HTTP to cookies and Web sessions
http://httpstatusdogs.com/