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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/Web Technologies

☸major concepts & vision

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

What the Web means?

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

world wide web

an Internet service

WWW Internet

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

world wide web


integrating distinct information systemsin an unitary manner,


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

world wide web




Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

world wide web




anything can link to anything

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

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

…and on hypertext (hypermedia)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

world wide web

Main intents:

device independencesoftware independence

scalabilityubiquity

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

world wide web

Main intents:

device independencesoftware independence

scalabilityubiquity

open standards

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

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

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

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

resources – documents – include <markups />

Web pages

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)

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/




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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/




Web resource

identifies

represents

JSON format(software processable)


{ "point" : {"geo" : { "lat" : "…",

"long" : "…" },"name" : "Iași", "type" : "city"

},"temperature" : {

"when" : "…","value" : "…"

}}

representation

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/




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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

What hypertext means?

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Non-linear text


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Non-linear text

versus


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

A form of an electronic document


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)…


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)

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

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

hypertext: history

Ted NelsonXanadu – prototype, 1991

coined the “hypertext” term

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

hypertext: history

Hypermedia = hypertext + multimedia

Multimedia = medium

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)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

hypertext: ingredients

Hypertextul as a (di)graph

nodes = concepts

edges = relations

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)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

hypertext: links

referential (non-hierarchical)organizational (hierarchical, structural)

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

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

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/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

How the Web resources are identified (addressed)?

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

URI: definitions

Resource“thing” having an identity

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.

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

URI: definitions

Identifierobject that can denote a resource

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

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

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

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

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

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

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

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



authority can include user authentication information(name:password – specified in plain text!)

+data about the Internet domain/address,

optionally the port number

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

URI

Reserved characters; / ? : @ & = + $ ,

encoded in base 16, prefixed by %

URL encoding

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?

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

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

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

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

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/URI



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

advanced

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/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

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/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

What kind of Web applications can we develop?

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)

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

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

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

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

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

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Interactive

virtual expositionsnews Web sitese-travel systems

info kiosksonline participation

…

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

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

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

advanced

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

How about the generic architecture of a Web application?

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


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,…

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/




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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/




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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/




fact: all of them are important!

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

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/

Date post:	22-Jan-2018
Category:	Technology
Upload:	sabin-buraga
View:	375 times
Download:	2 times

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

Technology