Web 2020 01/12: World Wide Web – aspecte arhitecturale

Dr.SabinBuragaprofs.info.uaic.ro/~busaco/
Tehnologii Web
concepte primare
și viziune
Dr. Sabin Corneliu Buraga – profs.info.uaic.ro/~busaco/

„De la un anumit punct încolo,
nu mai există cale de întoarcere.
Acela este punctul ce trebuie atins.”
Franz Kafka

Ce este Web-ul?

world wide web
Serviciu Internet
WWW  Internet

world wide web
Spațiu informațional comun în care comunicăm
prin interconectarea și partajarea unor elemente
de interes denumite resurse
inventat de Sir Tim Berners-Lee în 1989

Sir Tim Berners-Lee – lauriat al premiului Turing
cea mai importantă distincție în domeniul informaticii

world wide web
Idee (Sir Tim Berners-Lee la CERN – 1989)
integrarea unor sisteme informaționale
disparate într-un mod unitar,
fără diferențe între sursele de date

world wide web
Idee (Sir Tim Berners-Lee la CERN – 1989)
integrarea unor sisteme informaționale
disparate într-un mod unitar,
fără diferențe între sursele de date
anything can link to anything

world wide web
Bazat pe modelul client/server
server
Web
client
Web
(browser)
cerere
răspuns

…și pe hipertext (hipermedia)

world wide web
Scopuri (intenții) principale:
independența de dispozitiv
independența de software
scalabilitatea
ubicuitatea

world wide web
Bazat pe principii și standarde deschise
stipulate de Consorțiul Web
Web for all & on everything
Web for rich interaction
Web of data & services
Web of trust
www.w3.org/Consortium/mission

arhitectura Web-ului
Resursele sunt identificate prin adresa lor
identificator uniform de resurse
URI – Uniform Resource Identifier
https://slideshare.net/busaco/presentations

arhitectura Web-ului
Accesul la conținutul – reprezentarea –
resurselor Web
se realizează printr-un protocol
HTTP – HyperText Transfer Protocol

codificarea
datelor
Unicode
nume de
domenii
DNS
protocoalele
Internet
TCP/IP
adrese Web
URI = URL + URN
protocoale Web
HTTP, HTTPS,…
a b c … z
ș б ө Ϟ ঢ় ល ꑸ
⠳ ⵙ ⋇ ⚉ 𝔜
.com .org .io .ro
.uaic.ro
.info.uaic.ro
TCP / UDP
IP, ICMP,…
acces la mediu

codificarea
datelor
Unicode
nume de
domenii
DNS
protocoalele
Internet
TCP/IP
adrese Web
URI = URL + URN
protocoale Web
HTTP, HTTPS,…
a b c … z
ș б ө Ϟ ঢ় ល ꑸ
⠳ ⵙ ⋇ ⚉ 𝔜
.com .org .io .ro
.uaic.ro
.info.uaic.ro
TCP / UDP
IP, ICMP,…
acces la mediu
TCP = control al transmiterii datelor (Transmission Control Protocol)
IP = protocol de interconectare a rețelelor (Internet Protocol)
DNS = adresă IP↔domeniu simbolic – e.g., 85.122.23.20↔profs.info.uaic.ro
identificator
uniform de resursă
protocol HTTP
„securizat”

resursele – documentele – includ <marcaje />
pagini Web

Anca
Bogdan
album
photo
twitter.com/pinkfloyd
marcajele conțin la rândul lor
URI-urihipertext (hipermedia)

Relațiile dintre o resursă Web, adresa ei (URI) și
reprezentarea structurată a resursei
informații
meteo
despre 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>
reprezentare
adresabilitate via URI
resursă Web
identifică
reprezintă
formatul HTML5
(utilizatori umani, uzual)
http://world.info/europe/romania/iasi/weather?today

informații
meteo
despre Iași
<weather>
<point lat="..." long="…">
<name lang="ro">
Iași
</name>
<type>city</type>
…
</point>
<temperature when="…">
<value>…</value>
</temperature>
</weather>
reprezentare
resursă Web
identifică
reprezintă
formatul XML
(procesat de software)

informații
meteo
despre Iași
{
"point" : {
"geo" : { "lat" : "…",
"long" : "…" },
"name" : "Iași",
"type" : "city"
},
"temperature" : {
"when" : "…",
"value" : "…"
}
}
reprezentare
resursă Web
identifică
reprezintă
formatul JSON
(procesat de software)

informații
meteo
despre Iași
resursă Web
identifică
reprezintă
{
"point" : {
"geo" : {
"lat" :…, "long" :…
}
}
reprezentarea – într-un format deschis (e.g., HTML, XML,
JSON, RDF,…) – include date propriu-zise + meta-date
<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>
reprezentare
{
…
"temperature" : {
"when" : "…",
"value" : "…"
}
…
}
reprezentare

Ce înseamnă hipertextul?

hipertext: definire
„Material scris sau grafic interconectat
într-o manieră complexă care în mod convențional
nu poate fi reprezentat pe hârtie.”
Ted Nelson, 1965

hipertext: definire
Text non-liniar

hipertext: definire
Text non-liniar
versus

hipertext: definire
O formă de document electronic

hipertext: definire
O formă de document electronic
formate deschise de reprezentare a conținutului:
DocBook
HTML (HyperText Markup Language)
ODF (Open Document Format)
PDF (Portable Document Format)
…

hipertext: istoric
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.”

hipertext: istoric
Douglas Engelbart
Augment (1968)
mouse, interfețe grafice, procesare a textului,
poștă electronică, script-uri, ferestre pe ecran etc.
The Mother of All Demos (1968)
www.youtube.com/watch?v=yJDv-zdhzMY

hipertext: istoric
Ted Nelson
Xanadu – prototip, 1991
propune termenul „hipertext”

hipertext: istoric
Hipermedia = hipertext + multimedia
Multimedia =  medii

hipertext: istoric
Hipermedia = hipertext + multimedia
Multimedia =  medii
medii de comunicare:
continue (audio, video) și/sau discrete (text)

hipertext: ingrediente
Hipertextul ca (di)graf
noduri = concepte
legături = relații

hipertext: ingrediente
Noduri interconectate prin legături
nod sursă = referință (ancoră)
nod destinație = referent (ancoră)

hipertext: legături
referențiale (non-ierarhice)
organizaționale (ierarhice, structurale)

hipertext: legături
statice (indicate de autorul unui document) versus
dinamice – generate de un program

hipertext: documente
Conținut
tipuri de medii: text, imagine, audio, video,…
Organizare
noduri + legături structurale
Prezentare
textuală, grafică, multimedia, 3D, mixtă – (ne)interactivă

(în loc de) pauză
digitalsynopsis.com/design/web-designer-developer-jokes-humour-funny/

Cum identificăm (adresăm) resursele Web?

URI
Fiecare resursă Web este desemnată de
identificatori uniformi de resurse
Uniform Resource Identifier
RFC 2396, 3986
www.rfc-editor.org/rfc/rfc3986.txt

URI: definiții
Resursă
„lucru” care posedă o identitate

URI: definiții
Resursă
„lucru” care posedă o identitate
însemnare, CV, fotografie, prezentare, melodie, program,
persoană, bază de date, concept arbitrar etc.

URI: definiții
Identificator
obiect care poate juca rolul unei resurse

URI: definiții
Identificator
obiect care poate juca rolul unei resurse
secvență (șir) de caractere având o sintaxă precisă

URI: definiții
Uniformitate
resurse eterogene pot fi desemnate
pe baza acelorași convenții sintactice,
fiind interpretate semantic în mod uniform

URI = URL + URN
Uniform Resource Locator
identifică resursele prin intermediul mecanismului
de accesare: adresă de rețea, domeniu simbolic
RFC 2717, 2718

URI = URL + URN
Uniform Resource Locator
http://profs.info.uaic.ro/~busaco/teach/
mailto:tux@pinguin.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
identifică resursele prin nume, în mod persistent,
chiar dacă resursa este una abstractă
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
tipuri de date MIME
(Media Types)
carte
identificată
unic prin ISBN
specificație
(standard)
componentă
software

schema://authority/path?query
http://www.pinguin.info/prog/cauta?id=Tux

schema reprezintă o schemă de adresare standardizată
(recunoscută de client – e.g., navigatorul Web)
about data file ftp geo http https im imap ipp ldap mailto
nfs sip sms stun tel turn tv urn ws xmpp etc.
www.iana.org/assignments/uri-schemes/uri-schemes.xhtml

authority poate include informații de autentificare
a utilizatorului (nume:parola – specificate „în clar”!)
+
date privind domeniul/adresa Internet,
eventual portul de acces

path referă o cale (virtuală) de directoare
spre un nume de resursă – interpretabil ca nume de fișier,
eventual având o extensie

query specifică date de intrare
uzual, perechi cheie=valoare delimitate de „&”

URI
Caractere rezervate
; / ? : @ & = + $ ,
se codifică în baza 16, precedate de %
URL
encoding

URI
Caractere rezervate
; / ? : @ & = + $ ,
se codifică în baza 16, precedate de %
exemple:
spațiul va deveni %20
https://emojipedia.org/emoji/%F0%9F%96%A4/
de ce?

URI
URL-uri absolute
http://www.info.uaic.ro/~busaco/cv.html
apar obligatoriu componentele schema și authority

URI
URL-uri relative
../../web.css
se indică doar construcții referitoare la
componenta path și, eventual, query

URI
„Fragmente” dintr-un conținut
pot fi referite prin URIref
(referințe, fragment identifiers)
URI#URIref

URI
„Fragmente” dintr-un conținut
pot fi referite prin URIref
(referințe, fragment identifiers)
URI#URIref
web-biblio.html#web
https://drive.google.com/#my-drive

URI
URI-urile trebuie considerate opace
nu trebuie „ghicit” tipul conținutului
inspectând URI-ul asociat resursei
avansat

URI
tipul unei resurse nu este dat de extensie – e.g., .html –,
ci de tipul MIME transmis de server
avansat

URI
starea/conținutul resursei poate evolua în timp,
dar URI-ul asociat ei nu
“Cool URIs don’t change” – www.w3.org/Provider/Style/URI.html
avansat

IRI
Internationalized Resource Identifier
permite folosirea caracterelor Unicode în URI
a se vedea și IDN (Internationalized Domain Name)
exemplificări:
http://thefreedictionary.com/rosé
http://www.köpabåt.eu/motorbat/
http://www.以食為天.tw/

Ce categorii de aplicații Web putem dezvolta?

Sit Web
sistem pe care rulează un server Web
găzduind o serie de pagini (resurse) înrudite
ale unei organizații, companii sau persoane

Aplicație Web
colecție interconectată de pagini Web
cu conținut generat dinamic, menită a oferi
utilizatorilor o funcționalitate specifică
de studiat S. Buraga, „Dezvoltator Web?!” (2019)
www.slideshare.net/busaco/sabin-buraga-dezvoltator-web-2019

Aplicație Web
interacțiunea dintre aplicație și utilizatori
are loc via o interfață Web

Aplicație Web
interacțiunea dintre aplicație și utilizatori
are loc via o interfață Web
uzual, sit Web ≡ aplicație Web

Aplicație Web
exemplificări:
Cloud9, Coursera, Devdocs.io, Dropbox, GitHub,
info.uaic.ro, Instagram, JSBin, Medium, OpenStreetMap,
Pocket, Reddit, Quora, SlideShare, TED.com, Tumblr,
Vimeo, Wikipedia, WordPress
…și multe, multe, multe altele

Centrate pe documente
Interactive
Tranzacționale
Colaborative
Orientate spre portaluri
Web social
Web semantic
De tip ubicuu
evoluția
complexității
categorii de aplicații web

Centrate pe documente – document centric
conținut/pagini static(e):
situri de organizații, companii, referitoare la persoane

Interactive
expoziții virtuale
situri de știri
sisteme de facilitare a călătoriilor (e-travel)
chioșcuri informative
participare la evenimente online
…

Tranzacționale
online banking
soluții B2B (business-to-business)
aplicații B2C (business-to-consumer)
sisteme C2C (consumer-to-consumer)
fluxuri de activități (Web workflow-uri)

Colaborative
tele-conferințe Web
aplicații Web de tip wiki
servicii e-learning
aplicații Web peer-to-peer

Orientate spre portaluri
localizare unitară a informațiilor
tehnice, de afaceri, guvernamentale,…
specie: Web-ul cetățenesc

Web social
platforma în care utilizatorul își controlează propriile date
așa-numitul Web 2.0, conform Tim O’Reilly, 2005

Web social
mediatizare (syndication)
filtrare colaborativă pe baza adnotărilor
efectuate de utilizatori – (hash)tagging
spații de lucru virtuale
divertisment social
social (game) computing

Obiect
de
interes
Asocieri
mentale
multiple
(concepte)
t
t
t
t
tagging
tagging-ul reprezintă o modalitate particulară de adnotare
a resurselor electronice – digital content annotation

tag = (meta)dată simplă – termen arbitrar ales –
asociată extern unui obiect (unei resurse)
cu scopul de a identifica, sorta, agrega etc. acea resursă
Obiect
de
interes
Asocieri
mentale
multiple
(concepte)
t
t
t
t
tagging

Web semantic
(Web of Data – Web-ul datelor interconectate)
modelarea cunoștințelor
pentru a fi „înțelese” de calculatoare
dateinformațiicunoștințe
avansat

interogări asupra DBpedia
(varianta procesabilă de către mașină a enciclopediei Wikipedia)
PersonWithOccupation
ComputerPioneers
FinnishComputerProgrammers
FreeSoftwareProgrammers
LinuxKernelHackers
LivingPeople
PeopleInInformationTechnology
Golfer
diverse URL-uri
desemnând concepte
(things, not strings)
Cine este Linus Torvalds?
avansat

De tip ubicuu
aplicații/servicii mobile bazate pe locația utilizatorului,
disponibile pe mai multe plaforme:
desktop, dispozitiv mobil, tabletă,
consolă de jocuri, aparat casnic,…
Web-ul mobil
cloud computing
InternetWeb of Things – WoT
avansat

avansat
Web of Things Architecture (în lucru la W3C, 13 feb. 2020)
w3c.github.io/wot-architecture/

Care este arhitectura unei aplicații Web?

client Web server Web
conținut
static
conținut
dinamic
conținut
static
conținut
dinamic
date
locale
JavaScript server de aplic., framework
HTTP
transfer
asincron
via o interfață Web, utilizatorul interacționează cu clientul
(front-end) și inițiază acțiuni – e.g., cereri HTTP (a)sincrone
– ce vor fi executate pe diverse componente implementate
la nivel de server (back-end), pentru a obține date
☁
date externe
(serviciu Web)
front-end back-end

Aplicație Web = Interfață + Program + Conținut (Date)

mitul 1: cea mai importantă este interfața
mitul 2: cel mai important este programul
mitul 3: cele mai importante sunt datele
standarde deschise: HTML, CSS, Ajax, SVG, WebGL,…

server: C#, Java, JavaScript, PHP, Python, Ruby, Scala,…
client: JavaScript, WebAssembly (WASM)

relaționale (SQL), grafuri (NoSQL), JSON, XML, RDF etc.

fapt: sunt importante toate!

Internet
(Web)
⚙
⚙
Client
interfață cu
utilizatorul
Server
sit/aplicație Web
Date
stocate
persistent
⚙

rezumat
☸terminologie, modelul client/server, hipertext,
URI, sit vs. aplicație, tipuri de aplicații Web

episodul viitor:
programare Web
de la HTTP la cookie-uri
și sesiuni Web
httpstatusdogs.com
@girlie_mac

Web 2020 01/12: World Wide Web – aspecte arhitecturale

More Related Content

What's hot (20)

Similar to Web 2020 01/12: World Wide Web – aspecte arhitecturale (20)

More from Sabin Buraga (20)

Web 2020 01/12: World Wide Web – aspecte arhitecturale