Weather Widget
su addgaget
Weather Widget è un display su sfondo nero e con testo in diversi colori, che si può inserire nel proprio sito, il quale espone in lingua inglese le condizioni metereologiche e, cliccato, rimanda ad una pagina con maggiori dettagli e accesso alle previsioni per i successivi 15 giorni, relative a qualunque località (comune) specifica prescelta, anche non capoluogo di provincia o di regione.
Nel formato 234 x 160 pxinforma circa temperatura (comprese le minime e le massime), condizioni generali, umidità, visibilità, pressione, vento, visibilità, nuvolosità in percentuale, precipitazioni in millimetri, orario alba e tramonto, durata del giorno, fase lunare, ed orari di visibilità della luna.
Nel formato 102 x 160 pxespone esclusivamente temperatura (comprese le minime e le massime) e condizioni generali del tempo
Il codice da inserire nel proprio sito si ottiene molto semplicemente come segue:
1. Input your LocationVa inserito il nome della località nella propria lingua, e occorre subito dopo cliccare il tasto "find", il riquadro successivo
"2. Select the Weather Location" esporrà ogni località con quella denominazione ed occorrerà selezionare quella corrispondente alla propria.
3. Select your sizePermette di scegliere uno fra i due formati disponibili
4. Select your Units PrefencePermette di scegliere le unità di misura
4. Select your Units PrefencePermette di scegliere le versioni HTML o XHTML nelle quali si desidera sia generato (su BF FF e FC si può usare quello di default)
Infine occorre spuntare l'accettazione dei termini e condizioni di uso
(mentre non è necessario compilare il form per l'invio di una e.mail di feedback nè di indicare il proprio indirizzo e.mail presente in fondo pagina: l'opzione è facoltativa):
si tratta di tre semplici punti
1) il fornitore si riserva facoltà di sospendere il servizio senza avviso in qualsiasi momento; 2) non deve essere alterato rimuovendo crediti, copyright e hyperlinks 3) il fornitore non assume alcuna responsabiltà per ipotetici danni ricevuti da terzi utilizzatori o consultatori.
L'operazione si conclude cliccando il pulsante
"Generate HTML code"e copiando ed incollando lo stesso nel luogo ove si desidera che compaia sul proprio sito/forum/blog.
Il codice che comparirà - ad esempio per il dipslay più completo - sarà simile al seguente:
HTML
<p style="display: block !important; width: 255px; text-align: center; font-family: sans-serif; font-size: 12px">
<a href="http://weathertemperature.com/forecast/?q=Rome,Lazio,Italy" title="Rome, Lazio, Italy Weather Forecast" onclick="this.target='_blank'">
<img src="http://widget.addgadgets.com/weather/v1/?q=Rome,Lazio,Italy&s=1&u=1" alt="Weather temperature in Rome, Lazio, Italy" width="250" height="350" style="border: 3px solid #03e802; border-radius: 18px" /></a>
<br><a href="http://weathertemperature.com/" title="Get latest Weather Forecast updates" style="font-family: sans-serif; font-size: 12px" onclick="this.target='_blank'">Weather Forecast</a></p>
Intervenendo sul
width="234" ed
height="160" sarà possibile apportare piccole variazioni alla dimensione standard per adattare meglio il display alla pagina:
infatti, come vedete nel codice usato come esempio, io ho variato in 250 x 350.
HTML
<img src="http://widget.addgadgets.com/weather/v1/?q=Rome,Lazio,Italy&s=1&u=1" alt="Weather temperature in Rome, Lazio, Italy"
width="250" height="350"
"color:#03C"><u><b>style="border: 3px solid #03e802; border-radius: 18px"</b></u> /></a>
<br><a href="http://weathertemperature.com/" title="Get latest Weather Forecast updates" style="font-family: sans-serif; font-size: 12px" onclick="this.target='_blank'">Weather Forecast</a></p>
(soprattutto in diminuzione, pena la
perdita della visibilità completa di parte della riga che indica le condizioni generali del tempo).
Se si decide di variare le dimensioni è consigliato intervenire anche sul valore del width presente nello style della prima riga di codice aumentandolo di 5px rispetto al valore scelto per il width del display (nella personalizzazione che ho usato ho dunque sostituito il valore presente con un 255px)
Infine
è possibile aggiungere una bordatura di cornice colorata al display per meglio integrarlo nella grafica del proprio spazio, inserendo un
bordo.
Per farlo è sufficiente aggiungere questa riga di codice nella posizione in cui - nel secondo frame di codice - ho evidenziato il medesimo:
ho aggiunto un bordo verde brillante con angoli arrotondati.
HTML
style="border: 3px solid #03e802; border-radius: 18px"
Potete variare dimensione, tipo e colore del bordo inserendo il codice esadecimale corrispondente al colore che preferite dopo il #.
Edited by Patrizia Mura - 6/6/2015, 18:51
, occorre solo una sbirciatina ai codici forniti perché alcune cose le ho molto contemplate ma non le ho usate e quindi magari non mi sono accorta se qualcosa non è compatibile inserito qui.
