Mash-up ovvero l`arte (postmoderna) del

Transcript

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
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 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.
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, userscalable=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);
}
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>
•  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>&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-unacappa-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 ovvero l`arte (postmoderna) del

Transcript

Documenti analoghi

ILPAGE RANK EISUOIANTENATI

immagine

Sala Italia Università Cattolica del Sacro Cuore Policlinico A. Gemelli

UMORISMO e la Chiesa in Italia - in preparazione

Google traduttore online

Cenni su ECMAscript/Javascript

LICEO SCIENTIFICO STATALE "LEONARDO DA VINCI"

servizio fotografico

Corsa a 4 per la nuova sede di Google in Italia

Google Maps https://maps.google.it/ 1 di 2 07/03/2014 19.31

Il complemento di materia