Sei sulla pagina 1di 26

Mash-up " ovvero lʼarte (postmoderna) del riciclaggio !

Vincenzo Della Mea!

(PWLS 6.14, 6.15)

Mash-up!

(mash: purè, poltiglia) !

Applicazione web che include informazioni provenienti da (diversi) altri siti o applicazioni web !

tramite web services ( !

o tramite AJAX, !

tramite feed RSS, !

!

corso di Tecnologie Web Avanzate), !

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 all’esercizio 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. !

!

Complementi di Tecnologie Web –M. Franceschet, V.Della Mea e I.Scagnetto - 4!
Complementi di Tecnologie Web –M. Franceschet, V.Della Mea e I.Scagnetto - 4!

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 dell’utente 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 l’API 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 l’oggetto map per mezzo dell’evento 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 specificata tramite percentuali (%) e non è presente un foglio di stile, non usare la direttiva DOCTYPE! ! La mappa infatti non verrà visualizzata in presenza dell’elemento DOCTYPE perché il browser non riuscirà a determinare le dimensioni dell’elemento 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 fiscale, centrata su Udine. ! Definiamo 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 l’attributo onblur di comune e provincia!

Preparazione!

Duplicare i file 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 file: !

In cf_config2.php modificare la linea 4 in $xajax = new xajax

("cf_ajax_server2.php");

In cf_ajax_server2.php e codicefiscale2.php aggiornare i require del file di configurazione in require("cf_config2.php");

Tutto il lavoro che faremo per la prima parte dell’esercizio è lato client: usiamo i server AJAX di Google. !

Codicefiscale2.php/1 ! <meta name="viewport" content="initial-scale=1.0, user- scalable=no" />

Codicefiscale2.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);

}

Codicefiscale2.php/2 ! function posiziona (results, status) { if ( status == google.maps.GeocoderStatus.OK ) {

Codicefiscale2.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>

Codicefiscale2.php/3 ! •   Nell’HTML: ! <body onload="inizializza()" > …(parte del codice

Codicefiscale2.php/3!

Nell’HTML: ! <body onload="inizializza()"> …(parte del codice fiscale) ! 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&amp;ned=it&amp;hl=it</link>

<language>it</language><webMaster>news-feedback@google.com</webMaster> <copyright>&amp;copy;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, verificandoli 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 specifica 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 dell’HTML 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 è l’elenco degli item in un file RSS; ! $xml->channel->item[2] è il terzo degli item; ! $xml->channel->item[2]->title è il suo titolo. !

!

Complementi di Tecnologie Web –M. Franceschet, V.Della Mea e I.Scagnetto - 23!

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;

}

Modifica in cf_config.php!

Basta aggiungere in fondo la registrazione della nuova funzione: !

!

$xajax->register(XAJAX_FUNCTION,"Notizie");

Modifiche in codicefiscale2.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>