EspertoWeb::Che Tempo Che Fa (Weather Google API in azione)

Home » Webzine

Che Tempo Che Fa (Weather Google API in azione)

L'altro giorno stavo mostrando ad un cliente la prima bozza del sito web per il suo albergo. Mentre descrivevo le varie parti e le soluzioni visive adottate, notavo che non mi stava seguendo, ma fissava l'angolo in basso a destra del mio browser, un bel Firefox su Mac OSX.

In quell'angolo era visualizzato l'add-on Forecastbar Enhaced che mostrava le previsioni del tempo della mia città. Mi sono interrotto e ho commentato: "eh sì, domani piove". Lui fa: "Bello! Bravo, hai messo anche le previsioni del tempo, ottimo!" e continua: "spesso i miei clienti quando mi chiamano per confermare la prenotazione mi chiedono il tempo che fa ed è giusto farlo vedere direttamente sul mio sito web. Bravissimo!". Stava confondendo il plug-in del browser con il contenuto della sua pagina web. Ma quel che è peggio è che di tutto ciò che gli stavo presentando, l'unica cosa che lo entusiasmava era proprio quella che non avevo fatto io e che non c'entrava niente col suo sito! :(

A quel punto fui preso da un dilemma etico. Dire al mio cliente entusiasta la verità, e cioè che si trattava di un accessorio esterno del browser dell'utente � che non è detto che tutti abbiano � e che si sarebbe visto anche guardando il sito del Corriere della Sera, o incassare il complimento, magari aggiungendo che è stata dura realizzare quella funzione per il suo sito. Il dilemma ovviamente è stato risolto nel giro di un centesimo di secondo perché, da buon professionista, gli ho spiegato come stessero effettivamente le cose. Ma lui ha insistito: "ah, bravo, bravo, allora lascialo qui, nell'angolo a destra, si può cambiare il colore dello sfondo?". Non c'era niente da fare, ormai mi ero fatto del male da solo e avrei dovuto scervellarmi per trovare un sistema che consenta di ottenere le previsioni del tempo di una città per visualizzarle all'interno di una pagina web.

In realtà non è stato così difficile realizzare la funzione, grazie al web 2.0 e affini. Il sistema l'ho trovato, adattato e impacchettato. Ecco la pagina di esempio. Mi è piaciuto talmente tanto che ho creduto potesse interessare anche voi. Non è forse utile infatti aggiungere sul proprio sito, di una scuola, di una istituzione, di un'azienda, anche il "che tempo che fa"? Così chi dovesse venire a trovarvi potrà decidere come vestirsi e se portare l'ombrello. Ho visto tanti siti che riportano la data e l'ora (informazioni inutili e superflue, a meno di non ricevere visite da altri fusi orari), perché non mettere un'informazione che può rivelarsi davvero utile?

Ecco dunque come fare. Innanzitutto sinceratevi di avere a disposizione un hosting con PHP versione 5 in poi. Se sul vostro server sta girando una versione inferiore del PHP, lasciate perdere, questa soluzione non fa per voi.

Procedete ora con lo scaricarvi il mio codice per PHP5, (se usate PHP4, scaricate invece questa versione). Se vi interessa integrarlo in Joomla o Wordpress, in fondo all'articolo trovate il link per scaricarne il rispettivo modulo/plugin.

Nel file zip trovate tre file:

previsioni.php
previsioni.css
esempio.php

Aprite il file esempio.php per rendervi conto di come includere il codice su una vostra qualsiasi pagina php.

Come vedete tutto quello che bisogna fare è includere il file previsioni.php:

<?php require "previsioni.php"; ?>

richiamare il foglio di stile previsioni.css:

@import "previsioni.css";

</style>

e poi subito dopo il tag <body> inserire il richiamo della funzione che disegna il riquadro con le previsioni del tempo, indicando come argomento della funzione il nome della città interessata:

<?php cheTempoCheFa("Andria") ?>

Tutto qua. Il resto del codice può essere quello che normalmente compone la vostra pagina.

Se volete cambiare il colore dello sfondo, la posizione del rettangolo, il font del carattere, le dimensioni, etc. non dovete fare altro che agire sulle rispettive proprietà di stile contenute in previsioni.css. Ovviamente dovete avere un minimo di rudimenti di CSS.

Nota Bene: non ci pensate neanche ad aprire questa pagina con Internet Explorer 6. Funziona solo con Internet Explorer da 7 in poi. Oltre naturalmente a Firefox, Opera, etc. Ma poi mi chiedo, che diamine continuate ancora ad usare Internet Explorer 6? Sapete che persino Microsoft ne ha dismesso l'assistenza e sviluppo, consigliando ai propri utenti l'aggiornamento almeno alla 7?

Vi starete chiedendo da dove vengano i dati sulle previsioni del tempo. E' un servizio gratuito offerto da Google, si chiama: "Google Weather" ed è accessibile tramite le sue API (Application Program Interface). Lo si richiama al seguente indirizzo:

http://www.google.com/ig/api?weather=Andria,italy&hl=it

ottenendo tutti i dati sulle previsioni del tempo in formato XML.

La classe PHP che ho scritto, di fatto richiama quel servizio e analizza i dati XML restituiti, inserendoli nella struttura XHTML e CSS che definisce la pagina web.

Vi sembra complicato? Ma è perché non avete ancora seguito un corso online di EspertoWeb su PHP, xHTML e CSS. Che aspettate?! :)

PS: ecco la stessa funzione disponibile come modulo per Joomla!: [versione PHP4] [versione PHP5]
e come plug-in per WordPress: [versione PHP4] [versione PHP5]. Per WordPress, dopo aver attivato il plug-in, appare nella colonna sinistra un link che vi permette di configurare il plugin inserendo la città che vi interessa, come indicato da questa immagine di esempio:
.

comments powered by Disqus

I commenti precedenti

maria garrido - 21/11/2011 23:28:17

ciao di nuovo,
ho capito il significato: per trasformare in gradi centigradi.

ma adesso vorrei sapere l'uso di \n per favore?

grazie!

Risposta da fleo: serve per andare a capo, su una nuova riga.

maria garrido - 21/11/2011 23:07:50

Ciao! vorrei sapere per cosa serve questa riga:
temp_f['data']*1-32)*5/9)
grazie

Carlo - 04/11/2010 16:09:42

Ciao, interessante questo plugin,
potresti accennare su come modificarlo per inserire come città di partenza una geolocalizzazione dell'indirizzo IP del visitatore?

Chiedo troppo è? :-)

Giovanni Viglianti (Gianni) - 09/04/2010 16:31:21

Ciao Fleo :)
Chi non muore...
Da sempre ho apprezzato il tuo lavoro e con piacere ho potuto utilizzare questo modulo, con tanto di citazione:
http://www.1circolo.priverno.lt.it/index.php?option=com_content&view=article&id=48

A presto, gio :0)

orazio rubino - 04/04/2010 22:35:01

Lo strumento sembra quello che cercavo per Wordpress. Ho solo un piccolo problema (dovuto al mio analfabetismo wordpressiano).

Una volta installato e configurato il plug-in come faccio a richiamare il widget nel sito? Nell'elenco dei widget non mi compare nulla...

Help me! :)

Giuseppe - 25/10/2009 00:24:04

Non finisci mai di stupire!!!!!
Ciao a tutti

Giancarlo Lucioli - 19/10/2009 21:54:40

Sempre allerta per il nostro divertimento!
Ottimo e grazie dei tuoi consigli e suggerimenti.

Mauro Levrini - 19/10/2009 12:40:06

Applicazione molto interessante, complimenti!
E' possibile inserire una serie di citta, una sotto l'altra, oppure farle scegliere da un elenco?

Grazie
Risposta di fleo: si', non e' molto complicato estendere la funzione come da te ipotizzato. Sarebbe pero' un'altra applicazione che al limite lascerei come "compito per casa" :)

Mauro Levrini: Per la visualizzazione multipla di più città, ho risolto banalmente eliminando le impostazioni del box dal css e inserendo i tag <?php cheTempoCheFa("xxx") ?> in celle di una tabella.
Non inorridite, ci vuole un attimo e c'è meno codice da scrivere! ;-)
Per curiosità ho installato anche l'estensione per firefox Forecastbar (impostata su Torino) e i dati variano leggermente... ma si sa, le previsioni non sono una scienza esatta!
Comunque il risultato finale si può vedere al link:http://www.ml-grafica.it/previsioni/esempio.php
Risposta di fleo: ben fatto! La tabella forse si poteva evitare, ma non e' questo il caso in cui da' fastidio. Invece e' opportuno correggere un errore semantico nel codice. Essendoci piu' occorrenze di div con id="chetempochefa", non e' piu' possibile usare l'id per definirne lo stile. Nella struttura di codice, infatti, l'id deve essere un elemento unico, non ci possono essere elementi con lo stesso id. E' sufficiente modificare l'id in class: <div class="chetempochefa">.
Nel foglio di stile si dovra' modificare di conseguenza:
#chetempochefa in .chetempochefa. L'errore comunque e' solo logico. La pagina infatti continua a funzionare perche' i browser sono di bocca buona e si bloccano solo quando davvero non sanno piu' che pesci pigliare nell'interpretazione del codice.

Mauro Levrini: Nel css che ho modificato rimane soltanto la definizione di chetempochefa h1, avendo eliminato quella che definisce posizione e dimensione del box.
Se modifico quella come indicato, non mi definisce più correttamente la dimensione dell'intestazione (città).
Ora proverò a pasticciare con il posizionamento dinamico su un tag <select> per gestire un solo box alla volta, a scelta. Purtroppo lavoro piuttosto da autodidatta e su alcune cose mi servirebbe un corso articolato. Probabilmente prima o poi deciderò di seguirne uno di quelli proposti :-)
Grazie comunque per i consigli.

Danilo - 19/10/2009 09:18:16

Ottimo come sempre; piuttosto come faccio ad inserirlo in un blog wordpress? Ciao e grazie
Risposta di fleo: ho aggiunto in coda all'articolo anche il link per il download del plugin della stessa funzione per WordPress. La configurazione (cioe' l'impostazione della citta' di cui visualizzare le previsioni del tempo) al momento e' manuale, nel senso che dopo l'attivazione del plug-in dovrai cliccare su Edit per andare a modificare nel codice il nome della citta'. Ma e' un'operazione abbastanza semplice. Quando posso magari completo con un pannello di configurazione come si deve.
Aggiornamento: nel frattempo ho migliorato il plug-in aggiungendo la funzione di configurazione. Non e' piu' necessario editare a mano il codice.

Danilo:
Ho provato ma nisba.....ho copiato la cartella "previsioni" nella cartella "plugins" di Wordpress ma non lo visualizzo........
Risposta di fleo: controlla che la cartella si trovi in "wp-content/plugins". Dal pannello di amministrazione di Wordpress dovresti vederlo sotto la sezione "Plugins", come indicato da questa immagine di esempio:
.
Nell'immagine vedi il plugin gia' attivato (basta cliccare su "Activate").

Danilo:
Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /membri/contusu/wp-content/plugins/previsioni/previsioni.php on line 15
Ora riesco a vedere il plugin ma non si attiva (vedi sopra)..................
Risposta di fleo: evidentemente sul tuo server non sta girando PHP 5 o superiore.

Danilo:
Il mio blog risiede su Altervista quindi gira PHP5 :-( vabbeh pazienza, grazie lo stesso
Risposta di fleo: ne sei sicuro? L'errore che riporti di fatto significa che il tuo server non comprende la sintassi del PHP 5. Per accertarti della versione di PHP che sta girando sul tuo spazio, prova a caricare un file che puoi chiamare ad esempio "info.php" in cui c'e' solo questa riga di codice:
<?php phpinfo(); ?>
punta questo file sul tuo browser e vedi che ti dice.

Danilo:
http://contusu.altervista.org/info.php

Hai ragione....

ida taci - 18/10/2009 15:57:24

simpaticissimo Francesco, anche io come Rosa aspetto il corso di php avanzato
ida

Rosa Santarelli - 18/10/2009 13:02:17

Condivido quanto già scritto da Giusi, anche per me i tuoi corsi sono tra i miei ricordi più belli, perciò aspetto con ansia PHP avanzato.

Antonietta santarelli - 18/10/2009 11:27:00

simpatico, lo metterò nel sito, se ci riesco

Gian Piero Imarisio - 17/10/2009 20:53:49

Mi associo incondizionatamente. Ciao fleo.

Giusi Landi - 17/10/2009 19:32:07

Fantastico: anche le cose più complesse con EspertoWeb diventano semplici... I corsi che ho seguito con te sono tra i ricordi più belli a livello porfessionale e umano. Grazie!