web 01 arhitectura web
DESCRIPTION
Web courseTRANSCRIPT
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Tehnologii Web
concepte primare i viziune
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
De la un anumit punct ncolo,nu mai exist cale de ntoarcere.
Acela este punctul ce trebuie atins.
Franz Kafka
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Ce este Web-ul?
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
world wide web
Web
WWW
pnz de pianjen mondial
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
world wide web
Serviciu Internet
WWW Internet
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
world wide web
Idee (Sir Tim Berners-Lee la CERN 1989)
integrarea unor sisteme informaionaledisparate ntr-un mod unitar,
fr diferene ntre sursele de date
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
world wide web
Idee (Sir Tim Berners-Lee la CERN 1989)
integrarea unor sisteme informaionaledisparate ntr-un mod unitar,
fr diferene ntre sursele de date
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
world wide web
Idee (Sir Tim Berners-Lee la CERN 1989)
integrarea unor sisteme informaionaledisparate ntr-un mod unitar,
fr diferene ntre sursele de date
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
world wide web
Idee (Sir Tim Berners-Lee la CERN 1989)
integrarea unor sisteme informaionaledisparate ntr-un mod unitar,
fr diferene ntre sursele de date
anything can link to anything
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
world wide web
a common information space in whichwe communicate by sharing information
Sir Tim Berners-Lee (2013)
vezi prezentarea 25 de ani de Webhttp://www.slideshare.net/busaco/25-de-ani-de-web
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
world wide web
Bazat pe modelul client/server
serverWeb
client Web
(browser)
cerere
rspuns
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
i pe hipertext
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
world wide web
Scopuri principale:
independena de dispozitivindependena de software
scalabilitateaubicuitatea
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
world wide web
Scopuri principale:
independena de dispozitivindependena de software
scalabilitateaubicuitatea
caracter deschisopen standards
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
world wide web
Funcioneaz conform reglementrilorConsoriului Web
MIT, ERCIM, Keio University etc.Apple, BBC, HP, IBM, Intel, OpenCar, Microsoft, Twitter,
www.w3.org
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
arhitectura Web-ului
Resursele sunt identificate prin adresa lor
identificator uniform de resurseURI Uniform Resource Identifier
http://slideshare.net/busaco/presentations
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
arhitectura Web-ului
Accesul la coninutul reprezentarea resurselor Web
se realizeaz printr-un protocol
HTTP HyperText Transfer Protocol
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
arhitectura Web-ului
codificarea datelor
Unicode
nume de domenii
DNS
protocoaleleInternetTCP/IP
adrese WebURI = URL + URN
protocoale WebHTTP, HTTPS, SPDY
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
resursele documentele includ
pagini Web
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
marcajele conin la rndul lor URI-urihipertext
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Relaiile dintre o resurs Web, adresa ei (URI) ireprezentarea structurat a resursei
informaii meteo
despre Iai
http://world.info/europe/romania/iasi/weather?today
Iasi
city
reprezentare
adresabilitate via URI
resurs Web
identific
reprezint
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Relaiile dintre o resurs Web, adresa ei (URI) ireprezentarea structurat a resursei
informaii meteo
despre Iai
http://world.info/europe/romania/iasi/weather?today
Iasi
city
reprezentare
adresabilitate via URI
resurs Web
identific
reprezint
reprezentarea ntr-un format deschis (e.g., HTML, XML, JSON, RDF,) include date propriu-zise + meta-date
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Ce nseamn hipertextul?
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
hipertext: definire
Material scris sau grafic interconectatntr-o manier complex care n mod convenional
nu poate fi reprezentat pe hrtie.
Ted Nelson, 1965
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
hipertext: definire
Text non-liniar
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
hipertext: definire
Text non-liniar
versus
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
hipertext: definire
Form de document electronic
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
hipertext: definire
Form de document electronic
formate de reprezentare a coninutuluiDocBook
HTML (HyperText Markup Language)ODF (Open Document Format)
PDF (Portable Document Format)
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
hipertext: istoric
Vannevar Bush As We May Think, 1945
MEMEX (MEMory EXtended)
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
hipertext: istoric
Douglas Engelbart
Augment (1968)
mouse, interfee grafice, procesoare de text,
pot electronic, script-uri, ferestre pe ecran etc.
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
hipertext: istoric
Ted NelsonXanadu prototip, 1991
termenul hipertext
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
hipertext: istoric
Hipermedia = hipertext + multimedia
Multimedia = medii
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
hipertext: istoric
Hipermedia = hipertext + multimedia
Multimedia = medii
medii de comunicare:continue (audio, video) i/sau discrete (text)
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
hipertext: ingrediente
Hipertextul ca (di)graf
noduri = concepte
legturi = relaii
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
hipertext: ingrediente
Noduri interconectate prin legturi
nod surs = referin (ancor)
nod destinaie = referent (ancor)
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
hipertext: legturi
refereniale (non-ierarhice)organizaionale (ierarhice, structurale)
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
hipertext: legturi
refereniale (non-ierarhice)organizaionale (ierarhice, structurale)
statice versus dinamice
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
hipertext: documente
Coninuttipuri de medii: text, imagini, sunete, animaii,
Organizarenoduri + legturi structurale
Prezentaretextual, grafic, multimedia, 3D, mixt
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Cum identificm (adresm) resursele Web?
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
URI
Fiecare resurs Web este desemnat de identificatori uniformi de resurse
URI Uniform Resource Identifiers
RFC 2396, 3986
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
URI: definiii
Resurslucru care posed o identitate
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
URI: definiii
Resurslucru care posed o identitate
nsemnare, CV, fotografie, prezentare, melodie, program,persoan, baz de date, concept arbitrar etc.
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
URI: definiii
Identificatorobiect care poate juca rolul unei resurse
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
URI: definiii
Identificatorobiect care poate juca rolul unei resurse
secven de caractere avnd o sintax precis
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
URI: definiii
Uniformitateresurse eterogene pot fi desemnate
pe baza acelorai convenii sintactice,fiind interpretate semantic n mod uniform
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
URI = URL + URN
Uniform Resource Locator
identific resursele prin intermediul mecanismuluide accesare: adres de reea, domeniu simbolic
RFC 2717, 2718
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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,iVBORw0KGgoAAYII=
tel:+40232201090
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
URI = URL + URN
Uniform Resource Name
identific resursele prin nume, n mod persistent, chiar dac resursa este una abstract
RFC 2141
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
URI = URL + URN
urn:mimetypes
urn:ISBN:973-681-988-4
urn:ietf:rfc:2401
urn:mozilla:install-manifest
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
URI = URL + URN
urn:mimetypes
urn:ISBN:973-681-988-4
urn:ietf:rfc:2401
urn:mozilla:install-manifest
tipuri de date MIME
carte identificat
unic prin ISBN
specificaie(standard)
componentsoftware
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
schema://authority/path?query
http://www.pinguin.info/prog/cauta?id=Tux
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
schema://authority/path?query
http://www.pinguin.info/prog/cauta?id=Tux
schema reprezint o schem de adresare standardizat(recunoscut de client e.g., browser Web)
about file geo http https im mailto news sip
sms tel tv urn ws xmpp etc.
www.iana.org/assignments/uri-schemes/uri-schemes.xhtml
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
schema://authority/path?query
http://www.pinguin.info/prog/cauta?id=Tux
authority poate include informaii de autentificare a utilizatorului (nume:parola specificate n clar!)
+date privind domeniul/adresa Internet,
eventual portul de acces
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
schema://authority/path?query
http://www.pinguin.info/prog/cauta?id=Tux
path refer o cale (virtual) de directoare spre un nume de resurs interpretabil ca nume de fiier,
eventual avnd o extensie
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
schema://authority/path?query
http://www.pinguin.info/prog/cauta?id=Tux
query specific date de intrareuzual, perechi cheie=valoare delimitate de &
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
URI
Caractere rezervate; / ? : @ & = + $ ,
se codific n baza 16, precedate de %
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
URI
Caractere rezervate; / ? : @ & = + $ ,
se codific n baza 16, precedate de %
exemplu: spaiul va deveni %20
de ce?
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
URI
URL-uri absolute
http://www.info.uaic.ro/~busaco/cv.html
apar obligatoriu componentele schema i authority
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
URI
URL-uri relative
../../web.css
apar doar construcii referitoare la componenta pathi, eventual, query
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
URI
Fragmente dintr-un coninutpot fi referite prin URIref
(referine, fragment identifiers)
URI#URIref
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
URI
Fragmente dintr-un coninutpot fi referite prin URIref
(referine, fragment identifiers)
URI#URIref
web-biblio.html#web
https://drive.google.com/#my-drive
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
URI
URI-urile trebuie considerate opace
nu trebuie ghicit tipul coninutuluiinspectnd URI-ul asociat resursei
avansat
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
URI
URI-urile trebuie considerate opace
nu trebuie ghicit tipul coninutuluiinspectnd URI-ul asociat resursei
tipul unei resurse nu este dat de extensie e.g., .html ,ci de tipul MIME transmis de server
avansat
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
URI
URI-urile trebuie considerate opace
nu trebuie ghicit tipul coninutuluiinspectnd URI-ul asociat resursei
starea/coninutul resursei poate evolua n timp,dar URI-ul asociat ei nu
cool URIs dont changewww.w3.org/Provider/Style/URI.html
avansat
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
IRI
Internationalized Resource Identifiercomplementar URI-ului (RFC 3987)
permite folosirea caracterelor Unicode
a se vedea i IDN (Internationalized Domain Name)
exemplificri: http://thefreedictionary.com/ros
http://www.kpabt.eu/motorbat/
http://www..tw/
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Ce tipuri de aplicaii Web exist?
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Sit Web
sistem pe care ruleaz un server Webgzduind o serie de pagini (resurse) nrudite
ale unei organizaii, companii sau persoane
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Aplicaie Web
colecie interconectat de pagini Webcu coninut generat dinamic, menit a oferi
utilizatorilor o funcionalitate specific
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Aplicaie Web
interaciunea dintre aplicaie i utilizatoriare loc via o interfa Web
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Aplicaie Web
interaciunea dintre aplicaie i utilizatoriare loc via o interfa Web
uzual, sit Web = aplicaie Web
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Aplicaie Web
exemple:Amazon, Codepen, Coursera, Dropbox, Expedia, Flickr,
InfoQ, info.uaic.ro, Koding, PHPMyAdmin, Reddit, Quora, SlideShare, Snapchat, Vimeo, webmin, WordPress
i multe, multe, multe altele
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Centrate pe documenteInteractiveTranzacionaleColaborativeOrientate spre portaluriDe tip ubicuuWeb socialWeb semantic
evoluia n timpa complexitii
tipuri de aplicaii web
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Centrate pe documente document centric
coninut/pagini static(e): situri de companii, personale
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Interactive
expoziii virtualesituri de tiri
sisteme de facilitare a cltoriilor (e-travel)chiocuri informative
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Tranzacionale
online bankingsoluii B2B (business-to-business)
fluxuri de activiti (workflow-uri)
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Colaborative
tele-conferine Webaplicaii Web de tip wiki
servicii e-learningaplicaii Web peer-to-peer
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Orientate spre portaluri
localizare unitar a informaiilortehnice, de afaceri, guvernamentale,
specie: Web-ul cetenesc
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
De tip ubicuu
servicii mobile bazate pe locaia utilizatorului, disponibile pe mai multe plaforme:
desktop, dispozitive mobile, tablet,
Web-ul mobil
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Web social
mediatizare (syndication)filtrare colaborativ pe baza tagging-ului
spaii de lucru virtualedivertisment social
social (game) computing
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Obiectde
interes
Asocierimentalemultiple
(concepte)
tt
tt
tagging
tagging-ul reprezint o modalitate particular de adnotarea resurselor electronice digital content annotation
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
tag = (meta)dat simpl termen arbitrar ales
asociat extern unui obiect (unei resurse)
cu scopul de a identifica, sorta, agrega etc. acea resurs
Obiectde
interes
Asocierimentalemultiple
(concepte)
tt
tt
tagging
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Web semantic (Web of Data)
modelarea cunotinelorpentru a fi nelese de calculatoare
dateinformaiicunotine
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Care-i arhitectura unei aplicaii Web?
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Arhitectura generic a unei aplicaii Web
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Aplicaie Web = Interfa + Coninut (Date) + Program
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Aplicaie Web = Interfa + Coninut (Date) + Program
mitul 1: cea mai important este interfaamitul 2: cel mai important este programulmitul 3: cele mai importante sunt datele
standarde deschise: HTML, CSS, Ajax, SVG, WebGL,
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Aplicaie Web = Interfa + Coninut (Date) + Program
mitul 1: cea mai important este interfaamitul 2: cel mai important este programulmitul 3: cele mai importante sunt datele
server: C#, Java, JavaScript, PHP, Ruby,; client: JavaScript
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Aplicaie Web = Interfa + Coninut (Date) + Program
mitul 1: cea mai important este interfaamitul 2: cel mai important este programulmitul 3: cele mai importante sunt datele
relaionale (SQL), grafuri (NoSQL), JSON, XML, RDF
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Aplicaie Web = Interfa + Coninut (Date) + Program
mitul 1: cea mai important este interfaamitul 2: cel mai important este programulmitul 3: cele mai importante sunt datele
fapt: sunt importante toate!
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacorezumat
terminologie, modelul client/server, hipertextul,
URI, sit vs. aplicaie, tipuri de aplicaii Web
-
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
episodul viitor: programare Webprotocolul HTTP
via @girlie_mac