Web Technologies (1/12): World Wide Web – Architectural Aspects

Dr.SabinBuragaprofs.info.uaic.ro/~busaco/
Web Technologies
☸
major concepts & vision

“From a certain point onward,
there is no longer any turning back.
That is the point that must be reached.”
Franz Kafka

What the Web means?

world wide web
an Internet service
WWW  Internet

world wide web
Idea (Sir Tim Berners-Lee @ CERN – 1989)
integrating distinct information systems
in an unitary manner,
without differences between data sources

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

world wide web
“a common information space in which
we 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

world wide web
based on client/server approach
Web
server
Web
client
(browser)
request
response

…and on hypertext (hypermedia)

world wide web
Main intents:
device independence
software independence
scalability
ubiquity

world wide web
Main intents:
device independence
software independence
scalability
ubiquity
open standards

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

Web architecture
Resources are identified by their address
URI – Uniform Resource Identifier
http://slideshare.net/busaco/presentations

Web architecture
Access to the Web resources’ content
– resource representation –
is achieved by using a protocol
HTTP – HyperText Transfer Protocol

Web architecture
data
encoding
Unicode
Internet
domain names
DNS
Internet
protocols
TCP/IP
Web addresses
URI = URL + URN
Web protocols
HTTP, HTTPS

resources – documents – include <markups />
Web pages

Anca
Bogdan
knows
owns
hasName
album
photo
twitter.com/pinkfloyd
tag
follows
owns
sameComposer
markups themselves include
URIshypertext (hypermedia)

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

weather
forecasting
about Iași
Web resource
identifies
represents
XML format
(software processable)
<weather>
<point lat="..." long="…">
<name lang="ro">
Iași
</name>
<type>city</type>
…
</point>
<temperature when="…">
<value>…</value>
</temperature>
</weather>
representation

weather
forecasting
about Iași
Web resource
identifies
represents
JSON format
(software processable)
{
"point" : {
"geo" : { "lat" : "…",
"long" : "…" },
"name" : "Iași",
"type" : "city"
},
"temperature" : {
"when" : "…",
"value" : "…"
}
}
representation

weather
forecasting
about Iași
Web resource
identifies
represents
<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

What hypertext means?

hypertext: definition
Written or graphical data,
interconnected in a complex manner,
which conventionally can not be represented on paper
Ted Nelson, 1965

Non-linear text

Non-linear text
 versus

A form of an electronic document

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: history
Vannevar Bush – As We May Think, 1945
MEMEX (MEMory EXtended)

“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.”

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

hypertext: history
Ted Nelson
Xanadu – prototype, 1991
coined the “hypertext” term

hypertext: history
Hypermedia = hypertext + multimedia
Multimedia =  medium

hypertext: history
Hypermedia = hypertext + multimedia
Multimedia =  medium
communication media:
continuous (audio, video) and/or discrete (text)

hypertext: ingredients
Hypertextul as a (di)graph
nodes = concepts
edges = relations

hypertext: ingredients
Nodes interconnected by links (edges)
source node = reference (anchor)
destination node = referent (anchor)

hypertext: links
referential (non-hierarchical)
organizational (hierarchical, structural)

hypertext: links
static (indicated by the author of a document) versus
dynamic – generated by software

hypertext: documents
Content
media type: text, image, audio, video,…
Organization
nodes + structural (hyper-)links
Presentation
(non-)interactive textual, graphical,
multimedia, 3D, mixed

(instead of) break
http://digitalsynopsis.com/design/web-designer-developer-jokes-humour-funny/

How the Web resources
are identified (addressed)?

URI
Each Web resource
is denoted by a standard identifier
Uniform Resource Identifier
RFC 2396, 3986
https://www.rfc-editor.org/rfc/rfc3986.txt

URI: definitions
Resource
“thing” having an identity

URI: definitions
Resource
“thing” having an identity
note, CV, photo, presentation, melody, program,
person, database, arbitrary concept, etc.

URI: definitions
Identifier
object that can denote a resource

URI: definitions
Identifier
object that can denote a resource
a character sequence (string)
conforming to a given syntax

URI: definitions
Uniformity
heterogeneous resources can be denoted
by using the same syntactic conventions and
semantically interpreted in an uniform manner

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

URI = URL + URN
Uniform Resource Locator
http://profs.info.uaic.ro/~busaco/teach/
mailto:tux@penguin.info
ftp://ftp.funet.fi/pub/README.txt
data:image/png;base64,iVBORw0KGgoAA…YII=
tel:+40232201090
geo:47.16667,27.60000

URI = URL + URN
Uniform Resource Name
identifies resources by name, in a persistent way,
even if the resource is an abstract one
RFC 2141

URI = URL + URN
urn:mimetypes
urn:ISBN:973-681-988-4
urn:ietf:rfc:7700
urn:mozilla:install-manifest

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

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

authority can include user authentication information
(name:password – specified in plain text!)
+
data about the Internet domain/address,
optionally the port number

path refers a (virtual) path towards a resource name –
considered as a file name, optionally having an extension

query specifies input data
usually, pairs key=value delimited by „&”

URI
Reserved characters
; / ? : @ & = + $ ,
encoded in base 16, prefixed by %
URL
encoding

URI
Reserved characters
; / ? : @ & = + $ ,
encoded in base 16, prefixed by %
example: space will become %20
why?

URI
Absolute URIs
http://www.info.uaic.ro/~busaco/cv.html
schema and authority components are mandatory specified

URI
Relative URIs
../../web.css
only the constructs regarding the path
– and, optionally, query – are indicated

URI
“Fragments” of a given content
can be referred by URIref
(references, fragment identifiers)
URI#URIref

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

URI
URIs must be considered opaque
don’t “guess” the content type
by inspecting the URI indicating a resource
advanced

URI
resource type is not given by the extension – e.g., .html –,
but the MIME type indicated by the server
advanced

URI
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

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/

What kind of Web applications
can we develop?

Web site
a system running a Web server, hosting a set of
related pages (resources)
regarding an organization, company or person(s)

Web application
a collection of interconnected Web pages having
the content dynamically generated,
in order to offer a specific functionally to its users

Web application
the interaction between application and users
is facilitated by a Web interface

Web application
the interaction between application and users
is facilitated by a Web interface
usually, Web site ≡ Web application

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

Document-centric
Interactive
Transactional
Collaborative
Portal-oriented
Ubiquitous
Social Web
Semantic Web
evolution of
complexity
categories of web applications

Document-centric
static content/page(s):
Web sites regarding organizations, companies, persons

Interactive
virtual expositions
news Web sites
e-travel systems
info kiosks
online participation
…

Transactional
online banking
B2B (business-to-business) solutions
B2C (business-to-consumer) applications
C2C (consumer-to-consumer) systems
Web workflows

Collaborative
Web tele-conferences
wiki applications
e-learning services
peer-to-peer Web applications

Portal-oriented
providing specific – technical, business, governmental –
information of interest
species: citizenship Web

Ubiquitous
user location-based mobile services,
available on multiple platforms:
desktop, mobile device, tablet, game console,…
mobile Web

Social Web
content syndication
collaborative filtering via tagging
virtual workplaces
digital entertainment
social (game) computing

object
of
interest
multiple
mental
associa-
tions
(concepts)
t
t
t
t
tagging
tagging represents a specific technique of digital content
annotation concerning Web resources

object
of
interest
multiple
mental
associa-
tions
(concepts)
t
t
t
t
tagging
tag = simple (meta-)data – an arbitrary term –
externally associated to an object (a resource)
in order to identify, classify, aggregate, etc. that resource

Semantic Web
(Web of Data – the Web of linked data)
knowledge modelling to be “understood” by computers
datainformationknowledge
advanced

advanced

How about the generic architecture
of a Web application?

Web client Web server
static
content
dynamic
content
static
content
dynamic
content
local
data
JavaScript app servers, frameworks
HTTP
async
via a Web interface, the user interacts with the front-end
and 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

Web app. = Interface + Content (Data) + Program

myth 1: the most important thing is the interface
myth 2: the most important thing is the program
myth 3: the most important thing is the data
open standards: HTML, CSS, Ajax, SVG, WebGL,…

server: C#, Java, JavaScript, PHP, Ruby,…; client: JavaScript

relational model (SQL), graph (NoSQL), JSON, XML, RDF

fact: all of them are important!

“conclusion”
☸terminology, client/server model, hypertext,
URI, Web site vs. application, Web apps. categories

next episode: Web programming
from HTTP to cookies and Web sessions
http://httpstatusdogs.com/

Web Technologies (1/12): World Wide Web – Architectural Aspects

More Related Content

What's hot (9)

Viewers also liked (6)

Similar to Web Technologies (1/12): World Wide Web – Architectural Aspects (20)

More from Sabin Buraga (20)

Recently uploaded (20)

Web Technologies (1/12): World Wide Web – Architectural Aspects