Page 1
SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1
Nov
embe
r <W
eb />
200
5N
ovem
ber <
Web
/> 2
005
•• ww
w.in
foia
si.ro
ww
w.in
foia
si.ro
/~w
eb/~
web
ReReîîntoarcerentoarcere îînn viitorviitor: AJAX: AJAX
Sabin-Corneliu BuragaFacultatea de Informatică,
Universitatea “A. I. Cuza” din Iaşihttp://www.infoiasi.ro/~busaco/
Page 2
SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2
Nov
embe
r <W
eb />
200
5N
ovem
ber <
Web
/> 2
005
•• ww
w.in
foia
si.ro
ww
w.in
foia
si.ro
/~w
eb/~
web
“Un om nu atinge cunoaşterea
decât cu ajutorul celor care o posedă.”
P.D. Uspensky
Page 3
SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3
Nov
embe
r <W
eb />
200
5N
ovem
ber <
Web
/> 2
005
•• ww
w.in
foia
si.ro
ww
w.in
foia
si.ro
/~w
eb/~
web cuprinscuprins
• Preliminarii:de la Web 1.0 la Data Web (Web 2.0)
• “Tehnologia” AJAX (Asynchronous JavaScript And XML)
• Utilizări şi exemple demonstrative
• Concluzii: de la Data Web la Semantic Web
Page 4
SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4
Nov
embe
r <W
eb />
200
5N
ovem
ber <
Web
/> 2
005
•• ww
w.in
foia
si.ro
ww
w.in
foia
si.ro
/~w
eb/~
web preliminariipreliminarii
• De la Web 1.0 la Data Web (Web 2.0)– Web 1.0 (n. 1990 – m. 2002?)
– Spaţiul WWW văzut ca o platformă, în care utilizatorul îşi controlează propriile date
– Servicii (nu pachete software), participare, scalabilitate, transformări ale datelor, software rulat oriunde, inteligenţă colectivă
• Vezi “Design Patterns and Business Models for the Next generation of Software”(Tim O’Reilly) – www.oreilly.com
Page 5
SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
5
Nov
embe
r <W
eb />
200
5N
ovem
ber <
Web
/> 2
005
•• ww
w.in
foia
si.ro
ww
w.in
foia
si.ro
/~w
eb/~
web preliminariipreliminarii
• De la Web 1.0 la Data Web (Web 2.0)–Marcaje (adnotări) definite de utilizator
• Vezi “Folksonomies – Cooperative Classification and Communication through Shared Metadata” (Adam Mathes)
• Adnotarea (tagging) continutuluidel.icio.us, flickr.com
• Folksonomy = folk + taxonomy
Page 6
SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
6
Nov
embe
r <W
eb />
200
5N
ovem
ber <
Web
/> 2
005
•• ww
w.in
foia
si.ro
ww
w.in
foia
si.ro
/~w
eb/~
web preliminariipreliminarii
• De la Web 1.0 la Data Web (Web 2.0)–Participare, nu doar publicare a datelor
• Fenomenul blogging• Tehnologia RSS/Atom pentru mediatizarea
(syndication) conţinutului siturilor Web• Relaţii între blog-uri via permalinks• Blogosfera = social network
în stilul peer-to-peervezi Friendster, LinkedIn, Orkut,...
• Utilizatorii adaugă valoare resurselor Web
Page 7
SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
7
Nov
embe
r <W
eb />
200
5N
ovem
ber <
Web
/> 2
005
•• ww
w.in
foia
si.ro
ww
w.in
foia
si.ro
/~w
eb/~
web preliminariipreliminarii
• De la Web 1.0 la Data Web (Web 2.0)–Descentralizare radicală
• Fenomenul BitTorent• Un serviciu devine automat mai bun
cu cît mai mulţi oameni îl utilizează
–Încredere radicală• Fenomenul wiki – vezi Wikipedia.org• “With enough eyeballs, all bugs are shallow”
(Eric Raymond)
Page 8
SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
8
Nov
embe
r <W
eb />
200
5N
ovem
ber <
Web
/> 2
005
•• ww
w.in
foia
si.ro
ww
w.in
foia
si.ro
/~w
eb/~
web preliminariipreliminarii
• De la Web 1.0 la Data Web (Web 2.0)–Interacţiune bogată cu utilizatorul
• Interactivitate Web similară interactivităţii convenţionale cu utilizatorul
• Avantajele Web-ului (ubicuitate, date distribuite via hipertext, posibilităţi de căutare etc.) + interacţiune sofisticată + utilizabilitate
• Pioneri: Gmail, Google Maps, Writely
Page 9
SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
9
Nov
embe
r <W
eb />
200
5N
ovem
ber <
Web
/> 2
005
•• ww
w.in
foia
si.ro
ww
w.in
foia
si.ro
/~w
eb/~
web AJAXAJAX
• Cine/ce este AJAX?– Erou mitologic implicat în războiul troian
(Encarta Reference Library)– Asynchronous JavaScript And XML
(Jeese James Garrett)
Page 10
SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
10
Nov
embe
r <W
eb />
200
5N
ovem
ber <
Web
/> 2
005
•• ww
w.in
foia
si.ro
ww
w.in
foia
si.ro
/~w
eb/~
web AJAXAJAX
• AJAX nu este o tehnologie, ci reprezintă o suită de tehnologii deschise, incorporând:– Limbaje standardizate de prezentare a datelor
(XHTML, CSS)– Redare & interactiune via standardul DOM
(Document Object Model)– Interschimb & manipulare de date
prin XML si/sau XSLT– Transfer asincron de date via XMLHttpRequest– Procesare prin ECMAScript (JavaScript)
Page 11
SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
11
Nov
embe
r <W
eb />
200
5N
ovem
ber <
Web
/> 2
005
•• ww
w.in
foia
si.ro
ww
w.in
foia
si.ro
/~w
eb/~
web AJAXAJAX
• Componenta de bază este obiectul XMLHttpRequest– Permite realizarea de cereri HTTP (e.g., GET şi
POST) dintr-un program rulând la nivel de client (browser) spre o aplicaţie de pe server, într-un mod asincron
– Nu necesită reîncărcarea paginilor Web– Uzual, datele vehiculate între programele client şi server sunt marcate în XML (ExtensibleMarkup Language)
Page 12
SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
12
Nov
embe
r <W
eb />
200
5N
ovem
ber <
Web
/> 2
005
•• ww
w.in
foia
si.ro
ww
w.in
foia
si.ro
/~w
eb/~
web AJAXAJAX
Client Client ((browserbrowser))
Server Server WebWeb
XMLHttpRequestXMLHttpRequest Server Server aplicatiiaplicatii
open (“GET”)
open (“POST”)send (...)
DOMDOM
Fereastra navigatorului Documentul XML
Page 13
SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
13
Nov
embe
r <W
eb />
200
5N
ovem
ber <
Web
/> 2
005
•• ww
w.in
foia
si.ro
ww
w.in
foia
si.ro
/~w
eb/~
web AJAXAJAX
• Aspecte importante:– Evitarea încărcării întregii pagini
• Pro: cu XMLHttpRequest şi DOM se pot modifica doar fragmente de document
• Contra: bookmarking-ul poate fi compromis
– Distincţia dintre aplicaţie Web şi sit Web• Trebuie să primeze aşteptările (expectations)
utilizatorului – vezi Human Interface Guidelines
– Oferirea de alternative la AJAX, când suportul pentru el nu există implementat
– Eliminarea paginilor de confirmare
Page 14
SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
14
Nov
embe
r <W
eb />
200
5N
ovem
ber <
Web
/> 2
005
•• ww
w.in
foia
si.ro
ww
w.in
foia
si.ro
/~w
eb/~
web AJAXAJAX
• Principii de proiectare:– Minimizarea traficului dintre browser si server– Stabilirea unui mod de interacţiune clar
(interacţiune HTML versus AJAX versus aplicaţie convenţională)
– Evitarea confuziilor, prin adoptarea convenţiilor de interacţiune Web/clasică
– Eliminarea distragerii utilizatorului (e.g., folosirea de animaţii gratuite)
– Adoptarea AJAX pentru creşterea utilizabilităţii, nu doar de dragul tehnologiei
Page 15
SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
15
Nov
embe
r <W
eb />
200
5N
ovem
ber <
Web
/> 2
005
•• ww
w.in
foia
si.ro
ww
w.in
foia
si.ro
/~w
eb/~
web AJAXAJAX
• Câteva şabloane arhitecturale (Michael Mahemoff)– Tratarea evenimentelor la nivel local– Reîmprospătarea periodică a conţinutului– Anticiparea download-urilor
(pre-încărcarea datelor ce vor fi solicitate)– Transmiterea explicită a datelor spre server– Oferirea de posibilităţi de bookmarking
– Detalii la AJAXPatterns.org
Page 16
SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
16
Nov
embe
r <W
eb />
200
5N
ovem
ber <
Web
/> 2
005
•• ww
w.in
foia
si.ro
ww
w.in
foia
si.ro
/~w
eb/~
web AJAXAJAX
• O serie de şabloane de prezentare a datelor:– Folosirea proprietăţilor CSS
– Adoptarea principiilor de utilizabilitate
– Indicarea “vârstei” informaţiei afişate
– Oferirea de indicii privind ce date au fost deja transmise serverului şi ce date se află în aşteptare (pending) pentru a fi transmise
Page 17
SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
17
Nov
embe
r <W
eb />
200
5N
ovem
ber <
Web
/> 2
005
•• ww
w.in
foia
si.ro
ww
w.in
foia
si.ro
/~w
eb/~
web AJAXAJAX
• Şabloane de interacţiune– Similare celor disponibile
in cazul aplicaţiilor clasice:
• Drag & drop
• Popup data input
• Popup information
• Highlighting
• Auto-completion
• ...
Page 18
SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
18
Nov
embe
r <W
eb />
200
5N
ovem
ber <
Web
/> 2
005
•• ww
w.in
foia
si.ro
ww
w.in
foia
si.ro
/~w
eb/~
web concluziiconcluzii
• AJAX este una dintre componentele-cheie a aplicaţiilor Web 2.0– A9.com, EpiphanyRadio, Flickr,
Google Maps, Google Suggest, Orkut,...• Se poate considera că – via AJAX – se pot
implementa servicii Web asincrone, în stilul REST (REpresentational State Transfer)– Vezi “Building Web Services the REST Way”
(Roger Costello) – Vezi “REST and the Real World”
(Paul Prescod)
Page 19
SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
19
Nov
embe
r <W
eb />
200
5N
ovem
ber <
Web
/> 2
005
•• ww
w.in
foia
si.ro
ww
w.in
foia
si.ro
/~w
eb/~
web concluziiconcluzii
• AJAX poate fi unul dintre elementele de construcţie a Web-ului social (Social Web)– Hiperlegături între persoane şi organizaţii,
nu doar între maşini şi documente– Legături persistente independente la schimbări– Rezolvarea problemelor legate de intimitate
personală (privacy) şi încredere (trust)– Solutia: constituirea identificatorilor XRI
(Extensible Resource Identifiers)– Vezi “The Social Web: Creating an Open Social
Network with XDI” (Drummond Reed et al.)
Page 20
SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
20
Nov
embe
r <W
eb />
200
5N
ovem
ber <
Web
/> 2
005
•• ww
w.in
foia
si.ro
ww
w.in
foia
si.ro
/~w
eb/~
web concluziiconcluzii
• AJAX & Web-ul de date (Data Web)– Data Web ≡ soluţie simplificatoare pentru
interschimb de date, bazată pe principiile arhitecturale ale Web-ului şi pe conceptele de bază ale serviciilor Web şi Web-ului semantic
– Datele şi ofertanţii de date vor fi identificate via XRI, reprezentarea şi “legarea” datelor se vor face printr-o schemă XDI (XRI Data Interchange), iar interschimbul de date se va realiza graţie serviciilor XDI (extensii ale serviciilor Web actuale)
– Vezi şi “The Dataweb” (Drummond Reed)
Page 21
SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
21
Nov
embe
r <W
eb />
200
5N
ovem
ber <
Web
/> 2
005
•• ww
w.in
foia
si.ro
ww
w.in
foia
si.ro
/~w
eb/~
web concluziiconcluzii
• Aplicaţii ale Web-ului social şi de date– Porţi (portaluri) de acces la contacte personale– Filtre de încredere (trust filters)– Managementul inteligent al e-mail-ului– Calendare de evenimente & semne de carte
generate automat– Auto-registration, auto-login,
auto-personalization– Protecţia furtului identităţii digitale– Social search– Reţele de reputaţie (reputation networks)
Page 22
SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
22
Nov
embe
r <W
eb />
200
5N
ovem
ber <
Web
/> 2
005
•• ww
w.in
foia
si.ro
ww
w.in
foia
si.ro
/~w
eb/~
web concluziiconcluzii
• Actualele/viitoarele aplicaţii vor trebui să integreze servicii oferite de dispozitive mobile, calculatoare personale, servere etc.
• Când dispozitivele & programele sunt conectate la Internet, aplicaţiile nu mai constituie artefacte software, ci devin servicii – the perpetual beta
• “Useful software written above the levelof the single device will command highmargins for a long time to come”(Dave Stutz)
Page 23
SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
23
Nov
embe
r <W
eb />
200
5N
ovem
ber <
Web
/> 2
005
•• ww
w.in
foia
si.ro
ww
w.in
foia
si.ro
/~w
eb/~
web rezumatrezumat
• Preliminarii:de la Web 1.0 la Data Web (Web 2.0)
• “Tehnologia” AJAX (Asynchronous JavaScript And XML)
• Utilizări şi exemple demonstrative
• Concluzii: de la Data Web la Semantic Web
Page 24
SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
24
Nov
embe
r <W
eb />
200
5N
ovem
ber <
Web
/> 2
005
•• ww
w.in
foia
si.ro
ww
w.in
foia
si.ro
/~w
eb/~
web
ReReîîntoarcerentoarcere îînn viitorviitor: AJAX: AJAX
Întrebări?