Mashup

Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.
Scagnetto - 1
Mash-up
ovvero larte (postmoderna)
del riciclaggio
Vincenzo Della Mea
(PWLS 6.14, 6.15)
Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto - 2
Mash-up
(mash: pur, poltiglia)
Applicazione web che include informazioni provenienti da
(diversi) altri siti o applicazioni web
tramite web services (! corso di Tecnologie Web Avanzate),
o tramite AJAX,
tramite feed RSS,

Non un insieme preciso di tecnologie,
si fa come si vuole!
anche se ci sono degli strumenti che aiutano lo sviluppatore, es.
http://pipes.yahoo.com/
Un esercizio
Aggiungiamo allesercizio AJAX due
componenti che lo trasformano in un mash-
up:
una mappa che mostra il comune di nascita,
usando la API AJAX di GoogleMaps;
una lista di notizie relative a quel comune,
usando il feed RSS personalizzato di GoogleNews.

GoogleMaps API
Google mette a disposizione una serie di funzioni
Javascript per inserire mappe dinamiche sui propri siti
web
per un utilizzo che non risenta dei limiti dellutente anonimo,
tocca registrarsi per ottenere una API key
ma quella che ho fatto io dovrebbe valere per tutto
latoserver
Ci sono alcuni limiti, soprattutto nel geocoding
Usiamo la V3 (http://code.google.com/apis/maps/
documentation/javascript/)
GoogleMaps: le classi principali
Map: la mappa vera e propria, inserita in un
elemento HTML (<div>)
getCenter, SetCenter, PanTo,
Marker: il classico segnalino che troviamo sulla
mappa: possiamo aggiungerli e decorarli
Geocoder: servizio di conversione tra indirizzi e
coordinate (e viceversa)
Geocode(address,...),
LatLng: oggetto che rappresenta un punto nello
spazio (latitudine, longitudine)
Passi da eseguire (1)
1. Dichiarare la pagina come applicazione HTML5 (usando la
dichiarazione <!DOCTYPE html>).
2. Includere lAPI Javascript delle mappe con un tag script.
3. Creare un elemento div con un proprio id per contenere la
mappa.
4. Predisporre degli object literal Javascript per tener traccia
delle propriet della mappa.
5. Predisporre una funzione Javascript per creare un oggetto
"map".
6. Inizializzare loggetto map per mezzo dellevento onload del tag
body.
Passi da eseguire (2)
1. <!DOCTYPE html>
2. <script type="text/javascript" src="http://maps.googleapis.com/
maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
3. <div id="map_canvas" style="width:100%; height:100%"></div>
4. var my_options = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
5. <script type="text/javascript">
function initialize() {
...
var map = new google.maps.Map(document.getElementById
("map_canvas"), myOptions);
}
</script>
6. <body onload="initialize()">
Caveat
Se invece di utilizzare i pixel (px) la dimensione del canvas viene
specicata tramite percentuali (%) e non presente un foglio di
stile, non usare la direttiva DOCTYPE!
La mappa infatti non verr visualizzata in presenza dellelemento
DOCTYPE perch il browser non riuscir a determinare le
dimensioni dellelemento div contenente il canvas (una
percentuale di un elemento indeterminato indeterminata a sua
volta).
Quindi per usare le percentuali:
includere un foglio di stile e usare DOCTYPE;
non usare DOCTYPE.
Altrimenti utilizzare i pixel.
GoogleMaps nel nostro esercizio
Predisponiamo una mappa sotto il codice
scale, centrata su Udine.
Deniamo una coppia di funzioni che
riposizionano il centro della mappa in
corrispondenza del comune selezionato
se comune e provincia sono diversi da ""
chiamiamo il posizionamento con lattributo
onblur di comune e provincia
Preparazione
Duplicare i le cf_config.php, cf_ajax_server.php e
codicefiscale.php, chiamandoli: cf_config2.php,
cf_ajax_server2.php e codicefiscale2.php
Aggiornare i riferimenti nei vari le:
In cf_config2.php modicare la linea 4 in $xajax = new xajax
("cf_ajax_server2.php");
In cf_ajax_server2.php e codicefiscale2.php aggiornare i
require del le di congurazione in require("cf_config2.php");
Tutto il lavoro che faremo per la prima parte dellesercizio lato
client: usiamo i server AJAX di Google.
Codicescale2.php/1
<meta name="viewport" content="initial-scale=1.0, user-
scalable=no" />
<script type="text/javascript" src="http://
maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript>
var geocoder;
var map;
function inizializza() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng
(46.064656,13.21106);
var opzioni = { zoom: 10, center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById
("mappa"), opzioni);
}
Codicescale2.php/2
function posiziona(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var opzioni={map: map, position: results
[0].geometry.location, title: document.getElementById
("comune").value};
var marker = new google.maps.Marker(opzioni);
} }

function coordinate() {
var comune= document.getElementById("comune").value;
var provincia=document.getElementById("provincia").value;
if(comune!="" && provincia!="") {
var indirizzo= comune+", "+provincia + ", Italia";
if (geocoder) {
geocoder.geocode( { 'address': indirizzo}, posiziona);
}
} }
</script>
Codicescale2.php/3
NellHTML:
<body onload="inizializza()">
(parte del codice scale)
Comune: <input type="text" name="comune" id="comune" size="20"
onBlur="xajax_CalcolaComune(document.getElementById
('comune').value, document.getElementById
('provincia').value);coordinate();" />
Provincia: <input type="text" name="provincia" id="provincia"
size="20" onBlur="xajax_CalcolaComune(document.getElementById
('comune').value, document.getElementById
('provincia').value);coordinate();" />
<p..>
<h2>Ubicazione del comune</h2>
<div id="mappa" style="width:500px; height:300px"></div>
</body>
</html>
Mappa: commenti
inizializza() predispone una mappa di Google
dentro un <div> con id mappa,
centrandola sulle coordinate di Udine ed impostando uno
zoom
coordinate() sposta la mappa alle coordinate
corrispondenti al comune indicato,
ottenute tramite geocoder
posiziona() implementa la chiamata asincrona al
geocoder
e predispone anche un marker
Parte 2 : feed RSS
RSS
RDF Site Summary / Really Simple Syndication
Linguaggio di descrizione del contenuto di un
sito web:
orientato a siti che variano in continuazione, es.
news, o blog;
esiste sia in sintassi XML che RDF;
costituisce il cosiddetto "feed" dei siti Web.
Esiste software che preleva le descrizioni RSS
di pi siti e le aggrega in una visione unica:
news reader;
"news aggregator", sia stand-alone che web.
RSS - vocabolario
Channel, title, description, items, link,
image, item, ecc.
pi elementi presi dal Dublin Core (es. Date)
"channel" il sito o la parte del sito di cui si
descrive il contenuto per mezzo di title,
description, link, items ( una sequenza);
ogni item pu essere descritto poi
separatamente.
Un esempio
<rss version="2.0">
<channel>
<generator>NFE/1.0</generator>
<title>udine - Google News</title>
<link>http://news.google.it?pz=1&ned=it&hl=it</link>
<language>it</language><webMaster>news-feedback@google.com</webMaster>
<copyright>©2010 Google</copyright>
<pubDate>Mon, 18 Jan 2010 11:58:53 GMT+00:00</pubDate>
<item>
<title>Imola - Udine, le opinioni degli allenatori - Basketnet.it</title>
<link>http://www.basketnet.it/news_120031</link>
<pubDate>Sun, 17 Jan 2010 20:04:17 GMT+00:00</pubDate>
<description>descrizione del link</description></item>
<item>
<title>Bello abitare a Udine, sotto una cappa di smog. 35 sforamenti
dei ... </title>
<link>http://www.ilgiornaledelfriuli.net/bello-abitare-a-udine-sotto-una-
cappa-di-smog-35-sforamenti-dei-valori-per-polveri-sottili</link>
<pubDate>Mon, 18 Jan 2010 10:20:27 GMT+00:00</pubDate>
<description></description>
</item>
<description>Google News</description>
</channel>
</rss>
Utilit
Aggregazione:
pi fonti di notizie possono venire aggregate per argomento;
es.: quel che fa news.google.it;
l'aggregazione pu avere luogo in modi molto interessanti, per
esempio come succede su Technorati (www.technorati.com)
(concetto di tag, parole chiave).
Newsreader:
software che permette di sottoscrivere i canali RSS di pi siti
di interesse, vericandoli regolarmente, e mostrando gli ultimi
elementi pubblicati (al di fuori del browser web).
Notizie di Google
News.google.it
Una volta che abbiamo effettuato una
ricerca, possiamo ottenere anche un feed
RSS per quella specica query
Es.
http://news.google.it/news?
pz=1&cf=all&ned=it&hl=it&output=rss&q=udine
e noi useremo dinamicamente questa
possibilit
Esercizio: preparazione
Due parti:
sul lato server (cf_ajax_server2.php),
la funzione Notizie($comune) legge il
feed, ne estrae il necessario con SimpleXML
e costruisce dellHTML dinamico;
nel client si chiama la funzione
xajax_Notizie();
registreremo anche la funzione Notizie()
in cf_config2.php.
La libreria SimpleXML
Trasforma un documento XML (non troppo
complesso) in una gerarchia di oggetti PHP:
quando un elemento risulta ripetuto, allora diventa
un array;
es.: $xml->channel->item lelenco degli item
in un le RSS;
$xml->channel->item[2] il terzo degli
item;
$xml->channel->item[2]->title il suo
titolo.

La funzione Notizie (in cf_ajax_server.php)
function Notizie($cosa) {
$url="http://news.google.it/news?
pz=1&cf=all&ned=it&hl=it&output=rss&q=".$cosa;
$xml = simplexml_load_file($url);
$risultato="";
foreach ($xml->channel->item as $notizia) $risultato .=
"<p><a href='" . $notizia->link . "'>" . $notizia-
>title .
" (<em>". $notizia->pubDate. "</em>)</p>\n";
$risposta = new xajaxResponse();
$risposta->assign("news", "innerHTML", $risultato);
return $risposta;
}
Modica in cf_cong.php
Basta aggiungere in fondo la registrazione della nuova funzione:

$xajax->register(XAJAX_FUNCTION,"Notizie");
Modiche in codicescale2.php
Nel tag relativo al comune:
Comune: <input type="text" name="comune" id="comune"
size="20" onBlur="xajax_CalcolaComune
(document.getElementById('comune').value,
document.getElementById('provincia').value);coordinate
(); xajax_Notizie(this.value);" />
Dopo la mappa:
<h2>Notizie sul comune</h2>
<div id="news">--</div>
</body>

Mashup

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Mashup

Caricato da

Copyright:

Formati disponibili

Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.

Potrebbero piacerti anche