Web 01 Ar Hitec Tura Web

concepte primare i viziune
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/
Tehnologii Web
Franz Kafka
De la un anumit punct ncolo,

nu mai exist cale de ntoarcere.
Acela este punctul ce trebuie atins.
Ce este Web-ul?
Web
WWW
pnz de pianjen mondial
world wide web
Serviciu Internet
WWW Internet
world wide web
Idee (Sir Tim Berners-Lee la CERN 1989)

integrarea unor sisteme informaionale
disparate ntr-un mod unitar,
fr diferene ntre sursele de date
world wide web

world wide web

world wide web

anything can link to anything
world wide web
a common information space in which

we communicate by sharing information
Sir Tim Berners-Lee (2013)
world wide web
de studiat prezentarea S. Buraga, 25 de ani de Web (2014)

http://www.slideshare.net/busaco/25-de-ani-de-web
Bazat pe modelul client/server
client
Web
(browser)
cerere
rspuns
server
Web
world wide web
i pe
hipertext
(hipermedia)
Scopuri principale:
independena de dispozitiv
independena de software
scalabilitatea
ubicuitatea
world wide web
Scopuri principale:
independena de dispozitiv
independena de software
scalabilitatea
ubicuitatea
caracter deschisopen standards
world wide web
Funcioneaz conform reglementrilor

Consoriului Web
MIT, ERCIM, Keio University etc.
Apple, BBC, CERN, HP, IBM, Intel, OpenCar, Microsoft,
Mozilla Foundation, Samsung, Syncro Soft, Wiley,
www.w3.org
world wide web
Resursele sunt identificate prin adresa lor

identificator uniform de resurse
URI Uniform Resource Identifier
http://slideshare.net/busaco/presentations
arhitectura Web-ului
Accesul la coninutul reprezentarea

resurselor Web
se realizeaz printr-un protocol
HTTP HyperText Transfer Protocol
adrese Web
URI = URL + URN
codificarea
datelor
Unicode
protocoale Web
HTTP, HTTPS
nume de
domenii
DNS
protocoalele
Internet
TCP/IP
pagini Web
resursele documentele includ <marcaje />
marcajele conin la rndul lor URI-urihipertext
adresabilitate via URI

http://world.info/europe/romania/iasi/weather?today
identific
informaii
meteo
despre Iai
resurs Web
reprezint
reprezentare
<section id="meteo">
<div class="weather">
<p lang="ro">Iai</p>
<span>city</span>
<p lang="en">Temp.
<span id="today">
is <strong></strong>
°C</span>
</p>
</div>
</section>
Relaiile dintre o resurs Web, adresa ei (URI) i

reprezentarea structurat a resursei
formatul HTML5
(utilizatori umani, uzual)

identific
informaii
meteo
despre Iai
resurs Web
reprezint
reprezentare
<weather>
<point lat="..." long="">
<name lang="ro">
Iai
</name>
<type>city</type>
</point>
<temperature when="">
<value></value>
</temperature>
</weather>

formatul XML
(procesat de software)

identific
informaii
meteo
despre Iai
reprezentare
{
reprezint
resurs Web
}
"point" : {
"geo" : { "lat" : "",
"long" : "" },
"name" : "Iai",
"type" : "city"
},
"temperature" : {
"when" : "",
"value" : ""
}

formatul JSON
(procesat de software)

identific
informaii
meteo
despre Iai
resurs Web
reprezint
reprezentare

<section id="meteo">
<div class="weather">
<p lang="ro">Iai</p>
reprezentare
<span>(city)</span>
{
<p lang="en">Temp.
<span
class="today">
{
"temperature"
:{
is
<strong></strong>
"point" : {"when" : "",
°C</span>
"geo" : "value"
{
: ""
} :, "long" :
</p> "lat"
}
</div>
}
}
</section>
reprezentarea ntr-un format deschis (e.g., HTML, XML,

JSON, RDF,) include date propriu-zise + meta-date
Ce nseamn hipertextul?
Material scris sau grafic interconectat

ntr-o manier complex care n mod convenional
nu poate fi reprezentat pe hrtie.
Ted Nelson, 1965
hipertext: definire
Text non-liniar
hipertext: definire
Text non-liniar
versus
hipertext: definire
Form de document electronic
hipertext: definire
Form de document electronic

formate de reprezentare a coninutului
DocBook
HTML (HyperText Markup Language)
ODF (Open Document Format)
PDF (Portable Document Format)
hipertext: definire
Vannevar Bush As We May Think, 1945

MEMEX (MEMory EXtended)
hipertext: istoric
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.
Douglas Engelbart
Augment (1968)
mouse, interfee grafice, procesoare de text,
pot electronic, script-uri, ferestre pe ecran etc.
The Mother of All Demos (1968)
https://www.youtube.com/watch?v=yJDv-zdhzMY
hipertext: istoric
Ted Nelson
Xanadu prototip, 1991
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: istoric
Hipertextul ca (di)graf
noduri = concepte
legturi = relaii
hipertext: ingrediente
Noduri interconectate prin legturi

nod surs = referin (ancor)
nod destinaie = referent (ancor)
hipertext: ingrediente
refereniale (non-ierarhice)
organizaionale (ierarhice, structurale)
hipertext: legturi
statice stabilite de autorul documentului

versus
dinamice generate de un program
hipertext: legturi
Coninut
tipuri de medii: text, imagine, audio, video,
Organizare
noduri + legturi structurale
Prezentare
textual, grafic, multimedia, 3D, mixt (ne)interactiv
hipertext: documente
Cum identificm (adresm) resursele Web?
Fiecare resurs Web este desemnat de

identificatori uniformi de resurse
URI Uniform Resource Identifiers
RFC 2396, 3986
https://www.rfc-editor.org/rfc/rfc3986.txt
URI
Resurs
lucru care posed o identitate
URI: definiii
Resurs
lucru care posed o identitate
nsemnare, CV, fotografie, prezentare, melodie, program,

persoan, baz de date, concept arbitrar etc.
URI: definiii
Identificator
obiect care poate juca rolul unei resurse
URI: definiii
Identificator
obiect care poate juca rolul unei resurse
secven de caractere avnd o sintax precis
URI: definiii
Uniformitate
resurse eterogene pot fi desemnate
pe baza acelorai convenii sintactice,
fiind interpretate semantic n mod uniform
URI: definiii
Uniform Resource Locator

identific resursele prin intermediul mecanismului
de accesare: adres de reea, 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,iVBORw0KGgoAAYII=
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
carte
identificat
unic prin ISBN
urn:mimetypes
tipuri de date
MIME
urn:ISBN:973-681-988-4
component
software
urn:ietf:rfc:7700
urn:mozilla:install-manifest
specificaie
(standard)
URI = URL + URN
http://www.pinguin.info/prog/cauta?id=Tux
schema://authority/path?query
schema reprezint o schem de adresare standardizat

(recunoscut de client e.g., navigatorul Web)
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 poate include informaii 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 fiier,
eventual avnd o extensie
query specific date de intrare

uzual, perechi cheie=valoare delimitate de &
Caractere rezervate
;/?:@&=+$,
se codific n baza 16, precedate de %
URI
Caractere rezervate
;/?:@&=+$,
se codific n baza 16, precedate de %
exemplu: spaiul va deveni %20
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
apar doar construcii referitoare la componenta path

i, eventual, query
URI
Fragmente dintr-un coninut

pot fi referite prin URIref
(referine, fragment identifiers)
URI#URIref
URI
Fragmente dintr-un coninut

pot fi referite prin URIref
(referine, fragment identifiers)
URI#URIref
web-biblio.html#web
https://drive.google.com/#my-drive
URI
URI
URI-urile trebuie considerate opace
nu trebuie ghicit tipul coninutului
inspectnd 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/coninutul resursei poate evolua n timp,
dar URI-ul asociat ei nu
Cool URIs dont change www.w3.org/Provider/Style/URI.html
avansat
Internationalized Resource Identifier

permite folosirea caracterelor Unicode n URI
a se vedea i IDN (Internationalized Domain Name)
exemplificri:
http://thefreedictionary.com/ros
http://www.kpabt.eu/motorbat/
http://www..tw/
IRI
(n loc de) pauz
http://digitalsynopsis.com/design/web-designer-developer-jokes-humour-funny/
Ce tipuri de aplicaii Web exist?
sistem pe care ruleaz un server Web

gzduind o serie de pagini (resurse) nrudite
ale unei organizaii, companii sau persoane
Sit Web
colecie interconectat de pagini Web

cu coninut generat dinamic, menit a oferi
utilizatorilor o funcionalitate specific
Aplicaie Web
interaciunea dintre aplicaie i utilizatori

are loc via o interfa Web
Aplicaie Web
interaciunea dintre aplicaie i utilizatori

are loc via o interfa Web
uzual, sit Web aplicaie Web
Aplicaie Web
exemplificri:
Amazon, DevDocs, eMAG, Flickr, fiddles.io, GitHub, InfoQ,
info.uaic.ro, Last.fm, Koding, Medium, OverLeaf, Reddit,
Quora, SlideShare, Vimeo, UXPin, webmin, WordPress
i multe, multe, multe altele
Aplicaie Web
Centrate pe documente
Interactive
Tranzacionale
Colaborative
Orientate spre portaluri
De tip ubicuu
Web social
Web semantic
evoluia n timp
a complexitii
tipuri de aplicaii web
coninut/pagini static(e):
situri de organizaii, companii, referitoare la persoane
Centrate pe documente document centric
expoziii virtuale
situri de tiri
sisteme de facilitare a cltoriilor (e-travel)
chiocuri informative
participare la evenimente online
Interactive
online banking
soluii B2B (business-to-business)
fluxuri de activiti (workflow-uri)
Tranzacionale
tele-conferine Web
aplicaii Web de tip wiki
servicii e-learning
aplicaii Web peer-to-peer
Colaborative
localizare unitar a informaiilor

tehnice, de afaceri, guvernamentale,
specie: Web-ul cetenesc
Orientate spre portaluri
servicii mobile bazate pe locaia utilizatorului,

disponibile pe mai multe plaforme:
desktop, dispozitive mobile, tablet, consol de jocuri,
Web-ul mobil
De tip ubicuu
mediatizare (syndication)
filtrare colaborativ pe baza tagging-ului
spaii de lucru virtuale
divertisment social
social (game) computing
Web social
tagging
Asocieri
mentale
multiple
(concepte)
Obiect
de
interes
tagging-ul reprezint o modalitate particular de adnotare

a resurselor electronice digital content annotation
tagging
tag = (meta)dat simpl termen arbitrar ales

asociat extern unui obiect (unei resurse)
cu scopul de a identifica, sorta, agrega etc. acea resurs
Asocieri
mentale
multiple
(concepte)
Obiect
de
interes
Web semantic
(Web of Data Web-ul datelor interconectate)
modelarea cunotinelor
pentru a fi nelese de calculatoare
dateinformaiicunotine
avansat
avansat
Care este arhitectura unei aplicaii Web?
Arhitectura generic a unei aplicaii Web
Aplicaie Web = Interfa + Coninut (Date) + Program
mitul 1: cea mai important este interfaa

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, Ruby,; client: JavaScript

relaionale (SQL), grafuri (NoSQL), JSON, XML, RDF

fapt: sunt importante toate!

terminologie, modelul client/server, hipertextul,
URI, sit vs. aplicaie, tipuri de aplicaii Web
rezumat
episodul viitor: programare Web

protocolul HTTP
http://httpstatusdogs.com/

Web 01 Ar Hitec Tura Web

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Web 01 Ar Hitec Tura Web

Încărcat de

Drepturi de autor:

Formate disponibile

concepte primare i viziune

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

De la un anumit punct ncolo,

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

pnz de pianjen mondial

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

world wide web

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

world wide web

Idee (Sir Tim Berners-Lee la CERN 1989)

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

world wide web

Idee (Sir Tim Berners-Lee la CERN 1989)

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

world wide web

Idee (Sir Tim Berners-Lee la CERN 1989)

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

world wide web

Idee (Sir Tim Berners-Lee la CERN 1989)

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

world wide web

a common information space in which

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

world wide web

de studiat prezentarea S. Buraga, 25 de ani de Web (2014)

Bazat pe modelul client/server

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

world wide web

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

world wide web

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

world wide web

Funcioneaz conform reglementrilor

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

world wide web

Resursele sunt identificate prin adresa lor

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Accesul la coninutul reprezentarea

HTTP HyperText Transfer Protocol

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

resursele documentele includ <marcaje />

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

marcajele conin la rndul lor URI-urihipertext

adresabilitate via URI

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Relaiile dintre o resurs Web, adresa ei (URI) i

adresabilitate via URI

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Relaiile dintre o resurs Web, adresa ei (URI) i

adresabilitate via URI

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Relaiile dintre o resurs Web, adresa ei (URI) i

adresabilitate via URI

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Relaiile dintre o resurs Web, adresa ei (URI) i

reprezentarea ntr-un format deschis (e.g., HTML, XML,

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Material scris sau grafic interconectat

Ted Nelson, 1965

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/