Mash-up ovvero l arte (postmoderna) del riciclaggio

Transcript

1 Mash-up ovvero l arte (postmoderna) del riciclaggio Vincenzo Della Mea (PWLS 6.14, 6.15) Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto - 1

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. Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto - 2

3 Un esercizio Aggiungiamo all esercizio AJAX due componenti che lo trasformano in un mashup: 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 - 3

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

5 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 ( documentation/javascript/) Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto - 5

6 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) Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto - 6

7 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. Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto - 7

8 Passi da eseguire (2) 1. <!DOCTYPE html> 2. <script type="text/javascript" src=" 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()"> Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto - 8

9 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. Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto - 9

10 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 Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto - 10

11 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. Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto - 11

12 Codicefiscale2.php/1 <meta name="viewport" content="initial-scale=1.0, userscalable=no" /> <script type="text/javascript" src=" 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 ( , ); var opzioni = { zoom: 10, center: latlng, maptypeid: google.maps.maptypeid.roadmap } map = new google.maps.map(document.getelementbyid ("mappa"), opzioni); } Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto - 12

13 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> Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto - 13

14 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> Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto - 14

15 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 Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto - 15

16 Parte 2 : feed RSS Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto - 16

17 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. Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto - 17

18 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. Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto - 18

19 Un esempio <rss version="2.0"> <channel> <generator>nfe/1.0</generator> <title>udine - Google News</title> <link> <language>it</language><webmaster>news-feedback@google.com</webmaster> <copyright>©2010 Google</copyright> <pubdate>mon, 18 Jan :58:53 GMT+00:00</pubDate> <item> <title>imola - Udine, le opinioni degli allenatori - Basketnet.it</title> <link> <pubdate>sun, 17 Jan :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> <pubdate>mon, 18 Jan :20:27 GMT+00:00</pubDate> <description> </description> </item> <description>google News</description> </channel> </rss> Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto - 19

20 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 ( (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). Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto - 20

21 Notizie di Google News.google.it Una volta che abbiamo effettuato una ricerca, possiamo ottenere anche un feed RSS per quella specifica query Es. pz=1&cf=all&ned=it&hl=it&output=rss&q=udine e noi useremo dinamicamente questa possibilità Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto - 21

22 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. Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto - 22

23 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

24 La funzione Notizie (in cf_ajax_server.php) function Notizie($cosa) { $url=" 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; } Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto - 24

25 Modifica in cf_config.php Basta aggiungere in fondo la registrazione della nuova funzione: $xajax->register(xajax_function,"notizie"); Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto - 25

26 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> Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto - 26