Google fornisce un ottimo servizio GRATUITO di informazioni meteo e rende queste informazioni disponibili a tutti in un file XML consultabile gratuitamente e aggiornato di ora in ora.
Dato che esistono molti servizi che forniscono plugin o iframe da aggiungere a siti web ma la maggior parte sono a pagamento, se non vogliamo spendere un euro e divertirci a scriptare, per avere sul nostro bel sito informazioni sulle condizioni meteo della nostra località, dobbiamo fare un PARSER del file XML fornito da google e farlo scrivere ad una pagina ASP. Il risultato lo potete vedere su questo sito www.carbonifera.it
I servizi che offrivano le previsioni sono stati chiusi ma puoi prendere spunto su come funziona il parsing per fartene uno tutto tuo o provare ad utilizzare Open Weather Map.
Tutto l’articolo che segue è da leggera a solo scopo didattico o per prendere spunto. gli esempi che seguono non funzioneranno.
Adesso proverò a spiegare come ho fatto, non sono operazioni per principianti ma ho cercato di commetare i codici il più possile e se uno persona principiante è dotata di tanta pazienza e una buona predisposizione alla ricerca in google potrà sicuramente ottenere il risultato atteso.
Presupponiamo che voglia integrare informazioni meteo riguardanti Roma sul proprio sito in ASP, dovro utilizzare il seguente link che punta al famoso file XML fornito da Google.
http://www.google.com/ig/api?weather=Roma,italy&hl=it
Se notate bene, all’interno della stringa è riportata la città, esso funziona con tutte le località italiane, basterà sostituire nella stringa weather=Roma,italy con weather=TUACITTA,italy
Analizziamo il file XML di Google
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<weather module_id="0" tab_id="0" mobile_row="0" mobile_zipped="1" row="0" section="0"> <!--informazioni sulla località e la data di aggiornamento del file--> <forecast_information> <city data="Rome, Lazio"/> <postal_code data="Roma,italy"/> <latitude_e6 data=""/> <longitude_e6 data=""/> <forecast_date data="2011-01-27"/> <current_date_time data="2011-01-27 15:15:00 +0000"/> <unit_system data="SI"/> </forecast_information> <!--informazioni condizioni attuali--> <current_conditions> <condition data="Per lo più nuvoloso"/> <!--descrizione meteorologica--> <temp_f data="52"/> <!--temperarura in gradi Fahrenheit--> <temp_c data="11"/> <!--temperatura in gradi Celsius --> <humidity data="Umidità: 54%"/> <!--umidita'--> <icon data="/ig/images/weather/mostly_cloudy.gif"/><!--icona gif meteorlogica--> <wind_condition data="Vento: N a 6 km/h"/> <!--vento direzione e velocita'--> </current_conditions> <!--informazioni generali giorno attuale--> <forecast_conditions> <day_of_week data="gio"/> <!--iniziale giorno della settimana--> <low data="1"/> <!--temperatura minima in celsisus--> <high data="12"/> <!--temperatura massima in celsisus--> <icon data="/ig/images/weather/mostly_sunny.gif"/> <!--icona gif meteorlogica--> <condition data="Parzialmente soleggiato"/> <!--descrizione meteorologica--> </forecast_conditions> <!--informazioni primo giorno successivo all'attuale--> <forecast_conditions> <day_of_week data="ven"/> <low data="4"/> <high data="12"/> <icon data="/ig/images/weather/chance_of_rain.gif"/> <condition data="Possibilità di pioggia"/> </forecast_conditions> <!--informazioni secondo giorno successivo all'attuale--> <forecast_conditions> <day_of_week data="sab"/> <low data="5"/> <high data="13"/> <icon data="/ig/images/weather/mostly_sunny.gif"/> <condition data="Parzialmente soleggiato"/> </forecast_conditions> <!--informazioni terzo giorno successivo all'attuale--> <forecast_conditions> <day_of_week data="dom"/> <low data="1"/> <high data="12"/> <icon data="/ig/images/weather/chance_of_rain.gif"/> <condition data="Possibilità di pioggia"/> </forecast_conditions> </weather> </xml_api_reply> |
Scriviamo il file ASP che parserà i dati XML
Dopo aver analizzato l’XML e come Goggole invia le informazioni incomiciamo a scrivere il file in ASP
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<% ' Inizializzazione Set objXML = Server.CreateObject("Microsoft.XMLDOM") objXML.setProperty "ServerHTTPRequest", true objXML.async = False ' Preleva e Carica il file XML strFile= "http://www.google.com/ig/api?weather=Roma,italy&hl=it" objXML.Load (strFile) ' Scrive il giorno attuale ' apro un paragrafo e recupero da google l'icona meteo Response.Write("<p><img src='http://www.google.com/ig/images/weather/" & objXML.selectSingleNode("//current_conditions/icon").Attributes.GetNamedItem("data").Text & "' alt='" & objXML.selectSingleNode("//current_conditions/icon").Attributes.GetNamedItem("data").Text & "' />") ' scrivo condizioni attuali da "current_conditions" dell'XML prendo il nodo "condition" Response.Write("<METEO Condizioni attuali") Response.Write("<br/>" & objXML.selectSingleNode("//current_conditions/condition").Attributes.GetNamedItem("data").Text & "") ' scrivo la temperatura da "current_conditions" dell'XML prendo il nodo "temp_c" Response.Write("<br/>Temperatura: " & objXML.selectSingleNode("//current_conditions/temp_c").Attributes.GetNamedItem("data").Text & "°C") ' scrivo umidita' da "current_conditions" dell'XML prendo il nodo "humidity" Response.Write("<br/>" & objXML.selectSingleNode("//current_conditions/humidity").Attributes.GetNamedItem("data").Text & "") ' scrivo condizioni del vento da "current_conditions" dell'XML prendo il nodo "wind_condition" Response.Write("<br/>" & objXML.selectSingleNode("//current_conditions/wind_condition").Attributes.GetNamedItem("data").Text & "</p>") 'chiudo il paragrafo ' Cicla e Scrive gli altri giorni della settimana 'imposto il ciclo su TUTTI i nodi "forecast_conditions" che riguuardano i giorni successivi Set AllItems = objXML.selectNodes("//forecast_conditions") For v = 0 to (AllItems.Length - 1) Set Giorno = AllItems(v).selectNodes("day_of_week") ' imposto tutti i day_of_week come Giorno Set Cond = AllItems(v).selectNodes("condition") ' imposto tutti i condition come Cond Set Icon = AllItems(v).selectNodes("icon") ' imposto tutti i icon come Icon Set Low = AllItems(v).selectNodes("low") ' imposto tutti i low temperatura minima come Low Set High = AllItems(v).selectNodes("high") ' imposto tutti i high temperatura massima come High For u = 0 To Giorno.length - 1 'apro un paragrafo e recupero da google l'icona meteo Response.Write("<p><img src='http://www.google.com/ig/images/weather/" & Icon(u).GetAttribute("data") & "' alt='" & Icon(u).GetAttribute("data") & "' />") Response.Write("<strong>METEO</strong><br/>") ' dato che l'xml di google fornisce solo le inizali dei giorni della settimana ' ma al sottoscritto piace avere il giorno scritto per intero creo una select case che ' al dato valore corrispondente all'iniziale del giorno in questione scrivo "Previsione di GIORNO_TALE" select case Giorno(u).GetAttribute("data") case "lun" Response.Write("Previsione di lunedi'<br/>") case "mar" Response.Write("Previsione di martedi'<br/>") case "mer" Response.Write("Previsione di mercoledi'<br/>") case "gio" Response.Write("Previsione di giovedi'<br/>") case "ven" Response.Write("Previsione di venerdi'<br/>") case "sab" Response.Write("Previsione di sabato<br/>") case "dom" Response.Write("Previsione di domenica<br/>") end select ' scrivo le condizioni attuali Response.Write("<br/>" & Cond(u).GetAttribute("data") & "<br/>") ' scrivo la temperatura minima Response.Write("<br/>Temperatura min: " & Low(u).GetAttribute("data") & "°C") ' scrivo la temperatura massima Response.Write("<br/>Temperatura MAX: " & High(u).GetAttribute("data") & "°C") Response.Write("</p>") ' chiudo il paragrafo 'cicla per tutti gli altri nodi di forecast_conditions next Set Giorno = nothing Set Cond = nothing Set Icon = nothing Set Low = nothing Set High = nothing Next Set AllItems = nothing %> |
Aggiungiamo un effetto cool al nostro parser
Dato che così come è il file ASP scrive una serie di paragrafi uno sotto l’altro tipo lista, aggiungiamo un effetto rotativo ai nostri dati parsati.
Per aggiungere tale effetto rotante possiamo usare jQuery Cycle Plugin una fantastica libreria jQuery che crea degli effetti nei tag HTML (DIV, PARAGRAFI, etc.) che hanno determinati class o id
Nel mio caso ho inserito un div prima del codice ASP con classe pippo (class=”pippo”)
Ho inserito il seguente sjavascript nel body a monte del codice ASP e del DIV
0 1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript"> $(document).ready(function() { $('.pippo').cycle({ /*con . è la class con # è un id del tag html a cui volete applicare l'effetto*/ fx: 'turnDown', /*tipo di effetto, guardare la documentazione del plugin*/ speed: 1500, /*velocità di rotazione*/ timeout: 10000, /*tempo di ritardo*/ }); }); </script> |
Un esempio visibile è disponibile su questo sito: www.carbonifera.it
Spero che tutto ciò vi sia utile.
Buone previsioni a tutti!!!
I commenti sono chiusi.