Date post: | 14-Apr-2018 |
Category: |
Documents |
Upload: | alexcojocaru72 |
View: | 222 times |
Download: | 0 times |
of 84
7/29/2019 Web12InteractiuneWeb Ajax Mashups
1/84
Dr.Sabin
Buraga
www.purl.org/net/busa
co
Interactiune Web
Suita de tehnologii Ajax
Aplicatii de tip RIA si hibride (mash-ups)
detalii in[NW, 1-28]
[PW2, 133-141, 183-242] [TX, 299-327]
7/29/2019 Web12InteractiuneWeb Ajax Mashups
2/84
Dr.Sabin
Buraga
www.purl.org/net/busa
co
Modul in care dam face mai mult
dect ceea ce dam.
Pierre Corneille
7/29/2019 Web12InteractiuneWeb Ajax Mashups
3/84
Dr.Sabin
Buraga
www.purl.org/net/busaco
Care e modalitatea de a transfera asincron
date intre client(i) si server(e) Web?
7/29/2019 Web12InteractiuneWeb Ajax Mashups
4/84
Dr.Sabin
Buraga
www.purl.org/net/busaco
interactiune web: ajax
Asynchronous JavaScript And XML
(Jeese James Garrett)
7/29/2019 Web12InteractiuneWeb Ajax Mashups
5/84
Dr.Sabin
Buraga
www.
purl.org/net/busaco
interactiune web: ajax
Asynchronous JavaScript And XML
(Jeese James Garrett)
ofera premisele asigurarii unei interactiuni bogate
cu utilizatorul (RIA Rich Internet Application)
in cadrul unei aplicatii Web
7/29/2019 Web12InteractiuneWeb Ajax Mashups
6/84
Dr.Sabin
Buraga
www.
purl.org/net/busaco
interactiune web: ajax
O suita de tehnologii deschise:
limbaje standardizate de structurare e.g., (X)HTML si de prezentare a datelor: CSS
7/29/2019 Web12InteractiuneWeb Ajax Mashups
7/84
Dr.Sabin
Buraga
www.
purl.org/net/busaco
interactiune web: ajax
O suita de tehnologii deschise:
redare + interactiune la nivel de client (navigator) Webvia standardul DOM
7/29/2019 Web12InteractiuneWeb Ajax Mashups
8/84
Dr.Sabin
Buraga
www.
purl.org/net/busaco
interactiune web: ajax
O suita de tehnologii deschise:
interschimb + manipulare de date reprezentate prindiverse dialecte XML,
JSON (JavaScript Object Notation)
sau HTML
7/29/2019 Web12InteractiuneWeb Ajax Mashups
9/84
Dr.Sabin
Buraga
www.
purl.org/net/busaco
interactiune web: ajax
O suita de tehnologii deschise:
transfer (a)sincron de datefacilitat de obiectul XMLHttpRequest
7/29/2019 Web12InteractiuneWeb Ajax Mashups
10/84
Dr.Sabin
Buraga
www.
purl.org/net/busaco
interactiune web: ajax
O suita de tehnologii deschise:
transfer (a)sincron de datefacilitat de obiectul XMLHttpRequest
disponibil la nivelulnavigatorului Web
7/29/2019 Web12InteractiuneWeb Ajax Mashups
11/84
Dr.Sabin
Buraga
www.purl.org/net/busaco
interactiune web: ajax
O suita de tehnologii deschise:
procesare folosind limbajul JavaScript(ECMAScript)
7/29/2019 Web12InteractiuneWeb Ajax Mashups
12/84
Dr.Sabin
Buraga
www.purl.org/net/busaco
interactiune web: ajax
Componenta de baza: obiectul XMLHttpRequest
disponibil la nivel de navigator Web via JavaScript
in curs de standardizare la Consortiul Web
7/29/2019 Web12InteractiuneWeb Ajax Mashups
13/84
Dr.Sabin
Buraga
www.purl.org/net/busaco
interactiune web: ajax
Componenta de baza: obiectul XMLHttpRequest
nivelul 1 (implementat in premiera de MSIE 5.5)http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html
nivelul 2 (W3C working draft, 2012)
http://www.w3.org/TR/XMLHttpRequest/
7/29/2019 Web12InteractiuneWeb Ajax Mashups
14/84
Dr.Sabin
Buraga
www.purl.org/net/busaco
interactiune web: ajax
Componenta de baza: obiectul XMLHttpRequest
permite realizarea de cereri HTTP e.g., GET, POST, dintr-un program ruland la nivel de client (browser)
spre o aplicatie/un serviciu Web existent(a) pe server,
in mod asincronsausincron
7/29/2019 Web12InteractiuneWeb Ajax Mashups
15/84
Dr.Sabin
Buraga
www.purl.org/net/busaco
interactiune web: ajax
Componenta de baza: obiectul XMLHttpRequest
datele vehiculate intre programele client si serverpot avea orice format
uzual, modelate in XML (e.g., Atom, RSS, KML,),
HTML si/sau JSON
7/29/2019 Web12InteractiuneWeb Ajax Mashups
16/84
Dr.Sabin
Buraga
www.purl.org/net/busaco
interactiune web: ajax
Componenta de baza: obiectul XMLHttpRequest
paginile Web nu mai trebuie reincarcate complet,continutul lor XHTML fiind manipulat prin DOM
in cadrul browser-ului
in conformitate cu datele receptionate de la server
7/29/2019 Web12InteractiuneWeb Ajax Mashups
17/84
Dr.Sabin
Buraga
www.purl.org/net/busaco
Client
(browser)Server
Web
XMLHttpRequest Server de aplicatii
open ("GET")
open ("POST")send (...)
DOM
fereastra navigatorului datele XML (pe server)
interactiune web: ajaxexemplu
verificarea existentei unui cont pe server
i t f XMLHtt R t XMLHtt R tE tT t {
7/29/2019 Web12InteractiuneWeb Ajax Mashups
18/84
Dr.SabinBuraga
www.purl.org/net/busaco
interface XMLHttpRequest: XMLHttpRequestEventTarget {attribute Function? onreadystatechange;
// functia de tratare a evenimentului de schimbare a starii transferuluireadonly attribute unsigned short readyState;// starea transferului
// realizarea unei cereri HTTPvoid open (DOMString metoda, DOMString url, optional boolean asinc = true,
optional DOMString? cont, optional DOMString? parola);// deschide conex.void setRequestHeader(DOMString campAntet, DOMString valoare);
// stabileste antetul HTTP
void send (optional data = null);// trimite date spre serverul Webvoid abort (); // abandoneaza transferul
// receptarea raspunsului de la serverul Webreadonly attribute unsigned short status;// codul de stare HTTP: 200, 303, 400,
readonly attribute DOMString statusText;// textul asociat codului de stareDOMString? getResponseHeader(DOMString antet);// preia antetul HTTPDOMString getAllResponseHeaders ();// preia toate campurile raspunsuluireadonly attribute any response; // contine raspunsul propriu-zisreadonly attribute DOMString responseText; // contine raspunsul: format textreadonly attribute Document? responseXML;// contine raspunsul: date XML
};
interface XMLHttpReq estE entTarget E entTarget {
7/29/2019 Web12InteractiuneWeb Ajax Mashups
19/84
Dr.SabinBuraga
www.purl.org/net/busaco
interface XMLHttpRequestEventTarget : EventTarget {// functii de tratare a evenimentelor asociate transferului asincronattribute Function? onloadstart;// transferul a inceputattribute Function? onprogress;// se realizeaza transferul datelorattribute Function? onabort; // s-a abandonat transferul de date
attribute Function? onerror; // a aparut o eroare de transmisieattribute Function? onload; // datele au fost receptionate de clientattribute Function? ontimeout; // a aparut o intarziere de transferattribute Function? onloadend; // transferul s-a terminat
};
// constante ce specifica starea transferului (vezi proprietatea readyState)const unsigned short UNSENT = 0; // inca n-au fost efectuate transferuriconst unsigned short OPENED = 1; // s-a deschis conexiunea cu serverulconst unsigned short HEADERS_RECEIVED = 2; // primire campuri-antet HTTP
const unsigned short LOADING = 3; // datele se incarcaconst unsigned short DONE = 4; // gata! (transfer efectuat complet)
specificatie WebIDLvezi cursul
despre DOM
7/29/2019 Web12InteractiuneWeb Ajax Mashups
20/84
Dr.SabinBuraga
www.purl.org/net/busaco
interactiune web: ajax
Metode importante oferite de XMLHttpRequest
open ( )
initiaza deschide o conexiune HTTP cu serverul,
emitand o cerere GET ori POST
7/29/2019 Web12InteractiuneWeb Ajax Mashups
21/84
Dr.SabinBuraga
www.purl.org/net/busaco
interactiune web: ajax
Metode importante oferite de XMLHttpRequest
send ( )
transmite (asincron) date e.g., XML, JSON etc. ,
spre aplicatia/serviciul ce ruleaza pe server
orice listener(asociat evenimentelor onload, ontimeout,
onabort,) trebuie stabilit inainte de a trimite date
7/29/2019 Web12InteractiuneWeb Ajax Mashups
22/84
Dr.SabinBuraga
www.purl.org/net/busaco
interactiune web: ajax
Metode importante oferite de XMLHttpRequest
abort ( )
abandoneaza transferul curent
7/29/2019 Web12InteractiuneWeb Ajax Mashups
23/84
Dr.SabinBuraga
www.purl.org/net/busaco
interactiune web: ajax
Metode importante oferite de XMLHttpRequest
setRequestHeader ( )
specifica anumite campuri de antet HTTP
exemple: Cookie, Keep-Alive, User-Agent,
7/29/2019 Web12InteractiuneWeb Ajax Mashups
24/84
Dr.SabinBuraga
www.purl.org/net/busaco
interactiune web: ajax
Metode importante oferite de XMLHttpRequest
getResponseHeader ( )
furnizeaza un anumit camp prezent
in antetul mesajului de raspuns HTTP trimis de server
7/29/2019 Web12InteractiuneWeb Ajax Mashups
25/84
Dr.SabinBuraga
www.purl.org/net/busaco
interactiune web: ajax
Proprietati de baza ale XMLHttpRequest
readyState
furnizeaza codul de stare a transferului:
0 UNSENT, 1 OPENED,
2 HEADERS_RECEIVED, 3 LOADING, 4 DONE
7/29/2019 Web12InteractiuneWeb Ajax Mashups
26/84
Dr.SabinBuraga
www.purl.org/net/bus
aco
interactiune web: ajax
Proprietati de baza ale XMLHttpRequest
status
desemneaza codul de stare HTTP intors de serverul Web
200 (Ok)
404 (Not Found)500 (Server Internal Error)
etc.
7/29/2019 Web12InteractiuneWeb Ajax Mashups
27/84
Dr.SabinBuraga
www.purl.org/net/bus
aco
interactiune web: ajax
Proprietati de baza ale XMLHttpRequest
statusText
contine mesajul corespunzator codului de stare HTTP
7/29/2019 Web12InteractiuneWeb Ajax Mashups
28/84
Dr.SabinBuraga
www.purl.org/net/bus
aco
interactiune web: ajax
Proprietati de baza ale XMLHttpRequest
responseTextresponseXML
includ raspunsul (datele) obtinut(e) de la server
7/29/2019 Web12InteractiuneWeb Ajax Mashups
29/84
Dr.SabinBuraga
www.purl.org/net/bus
aco
interactiune web: ajax
Proprietati de baza ale XMLHttpRequest
onreadystatechange
specifica functia ce va fi invocata la modificarile de stare
privind transferul de date intre server si client
handlerde tratare a
evenimentelor de transfer
7/29/2019 Web12InteractiuneWeb Ajax Mashups
30/84
Dr.SabinBuraga
www.purl.org/net/bus
aco
interactiune web: ajax
Exceptii specifice care pot fi emise
SECURITY_ERRNETWORK_ERRABORT_ERR
conform DOM 3
7/29/2019 Web12InteractiuneWeb Ajax Mashups
31/84
Dr.SabinBuraga
www.purl.org/net/bus
aco
interactiune web: ajax utilizari
Indicarea virstei (modificarii) informatiei afisate
Yellow Fade Technique, FAT (Fade Anything Technique)
Reimprospatarea periodica a continutului
e.g., stiri receptionate in formate ca Atom sau RSS
Anticiparea download-urilor(pre-incarcarea datelor ce vor fi solicitate)
7/29/2019 Web12InteractiuneWeb Ajax Mashups
32/84
Dr.SabinBuraga
www.purl.org/net/bus
aco
interactiune web: ajax utilizari
Auto-completarea datelor (completion, suggest)
Validarea in timp-real a datelor introduse de utilizator
Dezvoltarea de componente de interfata Web (widgets),
interactionand pe baza evenimentelor survenite
si multe altele
avansat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
33/84
Dr.SabinBuraga
www.purl.org/net/bus
aco
interactiune web: ajax aspecte
Evitarea incarcarii intregului document Web
avantaj:se pot modifica doar fragmente de document
dezavantaj:
bookmarking-ul poate fi compromis(nu exista un URL unic
desemnand reprezentarea resursei curente)
avansat
avansat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
34/84
Dr.SabinBuraga
www
.purl.org/net/bus
aco
interactiune web: ajax aspecte
Oferirea de alternative la Ajax,
atunci cand suportul pentru acesta
nu este implementat/activat
graceful degradation
progressive enhancement
avansat
avansat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
35/84
Dr.SabinBuraga
www
.purl.org/net/bus
aco
interactiune web: ajax aspecte
Minimizarea traficului dintre browsersi server
transferul de date poate fi monitorizat (+interceptat)
via instrumente dedicate
WireShark
Firebug, Fiddler, TamperData, Live HTTP Headers
avansat
avansat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
36/84
Dr.SabinBuraga
www
.purl.org/net/bus
aco
interactiune web: ajax aspecte
Adoptarea Ajax pentru cresterea utilizabilitatii,
nu doar de dragul tehnologiei
exemple negative:
distragerea utilizatorului,supradimensionarea arborelui DOM
avansat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
37/84
Dr.Sabi
nBuraga
www
.purl.org/net/bus
aco
interactiune web: ajax programare
La nivel de client(biblioteci JavaScript)
Dojo: dojotoolkit.orgjQuery:jquery.com
Prototype: prototypejs.orgRico:openrico.org
Script.aculo.us: script.aculo.usYUI: developer.yahoo.net/yui/
7/29/2019 Web12InteractiuneWeb Ajax Mashups
38/84
Dr.Sabi
nBuraga
www
.purl.org/net/bus
aco
interactiune web: ajax programare
La nivel de client(biblioteci JavaScript)
Dojo: dojotoolkit.orgjQuery:jquery.com
Prototype: prototypejs.orgRico:openrico.org
Script.aculo.us: script.aculo.usYUI: developer.yahoo.net/yui/
alte detalii in cadrul cursului optional
Dezvoltarea aplicatiilor Web la nivel de client (anul 3, semestrul I)
7/29/2019 Web12InteractiuneWeb Ajax Mashups
39/84
Dr.Sabi
nBuraga
www
.purl.org/net/bus
aco
interactiune web: ajax programare
La nivel de server
AJAXASP.NET (C#), CPAINT, DWR (Java),
HTML::AJAX (PHP),jMaki(Java), Mason (Perl),
Ruby on Rails (Ruby), Sajax, Symphony (PHP),
SWATO (Java), Taconite(Java),
7/29/2019 Web12InteractiuneWeb Ajax Mashups
40/84
Dr.Sabi
nBuraga
www
.purl.org/net/bus
aco
interactiune web: ajax programare
API-uri specializate
exemplificari:Bing Maps AJAX Control
http://msdn.microsoft.com/en-us/library/ee692181.aspxGoogle Libraries API
https://code.google.com/apis/libraries/Yahoo! Maps Web Services via AJAX
http://developer.yahoo.com/maps/ajax/
7/29/2019 Web12InteractiuneWeb Ajax Mashups
41/84
Dr.Sabi
nBuraga
www
.purl.org/net/bus
aco
interactiune web: ajax
Ajax ofera premisele invocarii asincrone
de servicii Web in stilul REST
folosind ca reprezentari ale datelor transferate:
POX (Plain Old XML)
JSON (JavaScript Object Notation)AHAH (Asynchronous HTML and HTTP)
text neformatat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
42/84
Dr.Sabi
nBuraga
www
.purl.org/net/bus
aco
interactiune web: ajax studiu de caz
Verificarea existentei unui nume de utilizator
in vederea crearii unui cont de autentificarein cadrul unei aplicatii Web
7/29/2019 Web12InteractiuneWeb Ajax Mashups
43/84
Dr.Sabi
nBuraga
www
.purl.org/net/bus
aco
interactiune web: ajax studiu de caz
Verificarea existentei unui nume de utilizator
in vederea crearii unui cont de autentificarein cadrul unei aplicatii Web
tratand evenimentul onblur, putem verifica
interogand asincron un serviciu Web daca numelede cont introdus de utilizator intr-un formular Web
deja a fost folosit de altcineva
7/29/2019 Web12InteractiuneWeb Ajax Mashups
44/84
Dr.Sabi
nBuraga
www
.purl.org/net/bus
aco
interactiune web: ajax studiu de caz
Verificarea existentei unui nume de utilizator
in vederea crearii unui cont de autentificarein cadrul unei aplicatii Web
serviciul Web dezvoltat in stilul REST va oferi
un document XML modeland raspunsul la interogareaexista deja un utilizator avand un nume dat?
var cerere;// incapsuleaza cererea HTTP catre serverul Web
7/29/2019 Web12InteractiuneWeb Ajax Mashups
45/84
Dr.Sabi
nBuraga
www
.purl.org/net/bus
aco
; p
function incarcaXML (url) {// incarca un document XML desemnat de 'url'// verificam existenta obiectului XMLHttpRequestif (window.XMLHttpRequest) {
// exista suport nativ (Gecko: Firefox; WebKit: Safari, Chrome)cerere = new XMLHttpRequest ();} else
if (window.ActiveXObject) {// se poate folosi obiectul ActiveX din MSIEcerere = new ActiveXObject ("Microsoft.XMLHTTP");
}if (cerere) {
// stabilim functia de tratare a starii incarcariicerere.onreadystatechange = trateazaRaspunsCerere;// preluam documentul prin metoda GET
cerere.open ("GET", url, true);cerere.send (null); // nu trimitem nimic serviciului Web} else {
// nu exista suport pentru Ajax :(}
}
// functia de tratare a schimbarii de stare a cereriif ti t t R C () {
7/29/2019 Web12InteractiuneWeb Ajax Mashups
46/84
Dr.Sabi
nBuraga
www
.purl.org/net/bus
aco
function trateazaRaspunsCerere () {// verificam daca incarcarea s-a terminat cu succesif (cerere.readyState == 4) {
// verificam daca am obtinut codul de stare '200 Ok'
if (cerere.status == 200) {// procesam datele receptionate prin DOM// (preluam elementul radacina al documentului XML)var raspuns = cerere.responseXML.documentElement;var rezultat = raspuns.getElementsByTagName
('rezultat')[0].firstChild.data;// apelam o functie ce va modifica arborele DOM al paginii Web// conform raspunsului transmis de serviciul invocat
}// eventual, se pot trata si alte coduri de stare (404, 500 etc.)
else {alert ("A aparut o problema la transferul datelor XML:\n" +cerere.statusText);
}} vezi exemplul
din arhiva
7/29/2019 Web12InteractiuneWeb Ajax Mashups
47/84
Dr.SabinBuraga
www
.purl.org/net/bus
aco
utilizatorul introduce un nume de cont; via Ajax, i se va semnala ca
deja exista, conform raspunsului XML trimis de catre serviciul Web
cerere HTTP via URL-ul http://adresa.info/verifica.php?nume=martaraspuns XML de forma 1
0 = nu exista
7/29/2019 Web12InteractiuneWeb Ajax Mashups
48/84
Dr.SabinBuraga
www
.purl.org/net/bus
aco
interactiune web: ajax studiu de caz
Obtinerea fotografiilor publice stocate pe situl
Flickr pe baza serviciului Web REST oferit
7/29/2019 Web12InteractiuneWeb Ajax Mashups
49/84
Dr.SabinBuraga
www
.purl.org/net/busaco
interactiune web: ajax studiu de caz
Obtinerea fotografiilor publice stocate pe situl
Flickr pe baza serviciului Web REST oferit
utilizam URL-ul
http://api.flickr.com/services/feeds/photos_public.gne
pentru a obtine informatii despre imagini(formate disponibile: Atom, CSV, JSON, XML,)
vezi http://www.flickr.com/services/feeds/docs/photos_public/
Forma generala a raspunsului JSON transmis de Flickr:
7/29/2019 Web12InteractiuneWeb Ajax Mashups
50/84
Dr.SabinBuraga
www
.purl.org/net/busaco
interactiune web: ajax studiu de caz
g p J{
"title" : "Recent Uploads","link" : "http://www.flickr.com/photos/",
"modified" : "2012-05-26T13:49:08Z","generator" : "http://www.flickr.com/","items" : [ {
"title" : "...",
"link" : "http://www.flickr.com/photos/.../4204222/","media" : { "m": "https://farm.staticflickr.com/...jpg" },"date_taken" : "2012-05-20T17:23:43-08:00","description": "...","published" : "2012-05-26T13:49:08Z",
"author" : "...","author_id" : "...","tags" : "iasi romania informatica FII ..."
} ]
}
tip de data
XML Schema
//
7/29/2019 Web12InteractiuneWeb Ajax Mashups
51/84
Dr.SabinBuraga
www
.purl.org/net/busaco
interactiune web: ajax studiu de caz// preluam asincron imagini disponibile pe FlickrjQuery.getJSON
("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",{ // datele de intrare transmise serviciului Web
tags: "iasi, romania, informatica", format: "json"},// functia anonima ce va procesa datele JSON trimise asincron de Flickrfunction (data) {
// iteram fiecare informatie obtinuta de la serviciul Web$.each(data.items, function (numar, foto) {// cream un element avand ca valoare a atributului "src"// adresa Web inclusa in datele JSON obtinute;// acest va fi adaugat la elementul cu id="imagini" din pagina
$ ("").attr ("src", foto.media.m).attr ("title", foto.title).appendTo ("#imagini");});
});
cod JavaScript ce recurge la biblioteca jQuery
pentru a transfera asincron datele JSON
obtinute de la serviciul Web REST oferit de Flickr
7/29/2019 Web12InteractiuneWeb Ajax Mashups
52/84
Dr.SabinBuraga
www
.purl.org/net/busaco
un posibil rezultat obtinut (inclusiv trasarea pas-cu-pas
a executiei codului JavaScript via extensia Firebug)
avansat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
53/84
Dr.SabinBuraga
www
.purl.org/net/busaco
experimentarea API-urilor publice oferite de Google
invocabile asincron via Ajax
https://code.google.com/apis/ajax/playground/
interactiune web: ajax studiu de caz
7/29/2019 Web12InteractiuneWeb Ajax Mashups
54/84
Dr.SabinBuraga
www
.purl.org/net/busaco
ajax: demo
avansat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
55/84
Dr.SabinBuraga
www
.purl.org/net/busaco
interactiune web: comet
Comet
(Alex Russel)
permite ca datele sa fie impinse (push) de catre server
spre aplicatia client, utilizand conexiuni HTTP
persistente (long-lived) in vederea reducerii latentei
avansat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
56/84
Dr.SabinBuraga
www
.purl.org/net/busaco
interactiune web: comet
Complementar Ajax
long pollingHTTP server push
Reverse Ajax
http://ajaxpatterns.org/HTTP_Streaming
avansat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
57/84
Dr.SabinBuraga
www
.purl.org/net/busaco
interactiune web: comet
Sablon de proiectare a aplicatiilor Web
care necesita realizarea de conexiuni persistente,
in stilulpeer-to-peer
utilizat de aplicatiile Web intensiv interactive,
eventual colaborative
exemple: Google Docs, GMail, Meebo
avansat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
58/84
Dr.SabinBuraga
www
.purl.org/net/busaco
interactiune web: comet
Solutii de implementare exemplificari:
Atmosphere, DWR, Ice Faces, Jetty, Orbited
pentru detalii, a se vizitacometdaily.com
7/29/2019 Web12InteractiuneWeb Ajax Mashups
59/84
Dr.SabinBuraga
www
.purl.org/net/busaco
mash-ups
Ajax/Comet ofera suport pentru dezvoltarea de
aplicatii Web hibridemash-ups
combinarea la nivel de client si/sau server
a coninutului ce provine din surse (situri)
multiple, oferind o funcionalitate/experien nou
7/29/2019 Web12InteractiuneWeb Ajax Mashups
60/84
Dr.SabinBuraga
www
.purl.org/net/busaco
mash-ups
http://www.last.fm/api/rest
http://vimeo.com/api
7/29/2019 Web12InteractiuneWeb Ajax Mashups
61/84
Dr.SabinBuraga
www
.purl.org/net/busaco
mash-ups
+ LaVio aplicaie Web hibrid
http://www.last.fm/api/rest
http://vimeo.com/apivideoclip-uri & stiri
despre formatii muzicale
7/29/2019 Web12InteractiuneWeb Ajax Mashups
62/84
Dr.SabinBuraga
www
.purl.org/net/busaco
mash-ups
Se bazeaza pe fluxuri RSS/Atom,
servicii Web, API-uri publice,
curentul SaaS (Software As A Service)
7/29/2019 Web12InteractiuneWeb Ajax Mashups
63/84
Dr.SabinBuraga
www
.purl.org/net/busaco
mash-ups
Caracteristici:
combinare
vizualizare
agregare
7/29/2019 Web12InteractiuneWeb Ajax Mashups
64/84
Dr.SabinBuraga
www
.purl.org/net/busaco
mash-ups
Combinare
utilizarea de surse de date multiple
poate avea caracter multidimensional:
subiect de interes + locatie geografica + moment de timp
Yahoo! music search + Google Maps + Eventful
7/29/2019 Web12InteractiuneWeb Ajax Mashups
65/84
Dr.SabinBuraga
www
.purl.org/net/busaco
7/29/2019 Web12InteractiuneWeb Ajax Mashups
66/84
Dr.Sab
inBuraga
www
.purl.org/net/busaco
mash-ups
Vizualizare
pot fi adoptate diverse tehnici de vizualizare (prezentare)
a datelor:
cartografica,
tag cloud-uri,
tridimensionala,
7/29/2019 Web12InteractiuneWeb Ajax Mashups
67/84
Dr.Sab
inBuraga
www
.purl.org/net/busaco
Twitter + Google EarthTwittEarth
avansat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
68/84
Dr.Sab
inBuraga
www
.purl.org/net/busaco
mash-ups
Agregare
gruparea datelor provenite din mai multe surse si
analizarea lor: statistici, clasificari, predictii,
e.g., folosind data mining se pot releva
aspecte ascunse ale datelor procesate
7/29/2019 Web12InteractiuneWeb Ajax Mashups
69/84
Dr.Sab
inBuraga
www
.purl.org/net/busaco
recomandare inteligent de resurse via Zemanta
avansat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
70/84
Dr.Sab
inBuraga
www
.purl.org/net/busaco
instrumente
(GUI tools)biblioteci de dezvoltare
(libraries)
interfete de programare
(API-uri)
surse de date (data feeds)
platforme
avansat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
71/84
Dr.Sab
inBuraga
www
.purl.org/net/busaco
instrumente
(GUI tools)biblioteci de dezvoltare
(libraries)
interfete de programare
(API-uri)
surse de date (data feeds)
platforme
RSS, geoRSS,
microformate,RDFa,
avansat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
72/84
Dr.Sab
inBuraga
www
.purl.org/net/bu
saco
instrumente
(GUI tools)biblioteci de dezvoltare
(libraries)
interfete de programare
(API-uri)
surse de date (data feeds)
platforme
privind
fluxurile
RSS/Atom
specifice
serviciilor
publice
avansat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
73/84
Dr.Sab
inBuraga
www
.purl.org/net/bu
saco
instrumente
(GUI tools)biblioteci de dezvoltare
(libraries)
interfete de programare
(API-uri)
surse de date (data feeds)
platforme
framework-uri
Web oferite deorganizatii
avansat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
74/84
Dr.Sab
inBuraga
www
.purl.org/net/bu
saco
instrumente
(GUI tools)biblioteci de dezvoltare
(libraries)
interfete de programare
(API-uri)
surse de date (data feeds)
platformemedii de
dezvoltare
Web
avansat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
75/84
Dr.Sab
inBuraga
www
.purl.org/net/bu
saco
instrumente
(GUI tools)biblioteci de dezvoltare
(libraries)
interfete de programare
(API-uri)
surse de date (data feeds)
platforme
Facebook,
Google App Engine,
avansat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
76/84
Dr.Sab
inBuraga
www
.purl.org/net/bu
saco
mash-ups: aspecte de interes
performan: scalabilitatea & latena
limite ale API-urilor + existena versiunilor multipledrepturi de autor asupra datelor & liceniere
securitate: abuz, confidenialitate, ncredere etc.
monetizare
lipsa unei interoperabiliti realentre platforme
avansat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
77/84
Dr.Sab
inBuraga
www
.purl.org/net/bu
saco
mash-ups: probleme
Same-Origin Security Policy
restrictioneaza ca un program JavaScript sa acceseze
doar datele provenite din acelasi domeniu Internet
cu cel al script-ului JavaScript
avansat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
78/84
Dr.Sab
inBuraga
www
.purl.org/net/bu
saco
mash-ups: probleme
Same-Origin Security Policy
restrictioneaza ca un program JavaScript sa acceseze
doar datele provenite din acelasi domeniu Internet
cu cel al script-ului JavaScript
se permit transferuri vizand reprezentari de resurse
referitoare la imagini, fisiere CSS
si alte programe JavaScript
avansat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
79/84
Dr.Sab
inBuraga
www
.purl.org/net/bu
saco
mash-ups: probleme
Same-Origin Security Policy
initiativa CORS (Cross-Origin Resource Sharing)
mecanism ce permite partajarea la nivel de client
a resurselor provenind din domenii Internet diferite
specificatie in lucru la Consortiul Web (aprilie 2012)
http://www.w3.org/TR/cors/
avansat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
80/84
Dr.Sab
inBuraga
www
.purl.org/net/bu
saco
mash-ups: probleme
Alternativ, mash-up-urile pot fi implementate
la nivelul serverului Web
avansat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
81/84
Dr.Sab
inBuraga
www
.purl.org/net/bu
saco
avansat
7/29/2019 Web12InteractiuneWeb Ajax Mashups
82/84
Dr.Sab
inBuraga
www
.purl.org/net/bu
saco
mash-ups
Pentru dezvoltare,
a se vizita ProgrammableWeb.com
detalii in [PW2, 183-242]
7/29/2019 Web12InteractiuneWeb Ajax Mashups
83/84
Dr.Sab
inBuraga
www
.purl.org/net/bu
sacorezumat
Transfer asincron al datelorRIA, Ajax si mash-up-uri Web
7/29/2019 Web12InteractiuneWeb Ajax Mashups
84/84
Dr.Sab
inBuraga
www
.purl.org/net/bu
saco
?