Mash-up - Dipartimento di Matematica e Informaticaivan.scagnetto/lato_server/... · 2012-07-06 ·...

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

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 (è 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 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.


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" /> <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) { 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 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&ned=it&hl=it</link> <language>it</language><webMaster>[email protected]</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, 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.


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>

Mash-up - Dipartimento di Matematica e Informaticaivan.scagnetto/lato_server/... · 2012-07-06 ·...

Documents

Transcript of Mash-up - Dipartimento di Matematica e Informaticaivan.scagnetto/lato_server/... · 2012-07-06 ·...