Heavy Weather Publisher

By Orso Polare

Indice

SCOPO

Intento di questa guida passo passo, è quello di mettere in grado persone con poca esperienza in fatto di siti WEB, a realizzarne uno molto semplice con l’ausilio del programma HeavyWeatherPublisher.

CHE COSA E' E COSA FA' HEAVY WEATHER PUBLISHER

HeavyWeatherPublisher nella versione 1.0, è un pacchetto software che troviamo nel CD-ROM in dotazione alle stazioni meteorologiche LaCrosse. Nello stesso disco troveremo anche HeavyWeather che è l’altro software necessario ad acquisire i dati dai sensori inviati dalla nostra stazione meteorologica attraverso un collegamento informatico verso il nostro P.C., di solito seriale. HeavyWeatherPublisher, di seguito per brevità chiamato HWP, è un software che si occupa in modo molto semplice,di pubblicare i nostri dati meteo sul nostro sito in rete, in parole povere sarà il nostro primo strumento per avere un nostro piccolo e semplice sito su Internet con i dati meteorologici della nostra stazione LaCrosse.

PREMESSA

Premessa. Per avere un riscontro alle prove che andremo a fare durante l’esercizio, dovremo disporre di un sito WEB, consiglio di iniziare con un sito gratuito che possiamo ottenere su Altervista che ci concederà uno spazio di 200MB con un traffico di 2GB mensili, risorse di tutto rispetto per un uso anche abbastanza intenso, non dimentichiamoci che è gratuito senza nessun obbligo di inserire alcuna pubblicità. Ipotizziamo di averne ottenuto uno con nome “meteomio” per cui il dominio sarà http://meteomio.altervista.org Altra cosa importante prima di iniziare, è quella di aver interfacciato la nostra stazione al PC e di ricevere e visualizzare regolarmente i dati dei vari sensori attraverso HeavyWeather che necessariamente dovrà essere in funzione.

INIZIAMO

Una volta installato, avremo di fronte una pagina con un modello già preimpostato, anzi a ben guardare i modelli o Templates disponibili sono tre con nome rispettivamente di “Example 1” “Example 2” e “Example 3” Potremo vedere l’aspetto grafico di questi tre modelli selezionando il rispettivo nome che compare nella colonna “name” della schermata di HWP che abbiamo davanti.

Per incominciare a prendere confidenza con il programma, potremmo utilizzare uno dei tre modelli a disposizione, una volta acquisita una certa pratica, potremo divertirci a cambiare l’aspetto grafico personalizzandolo secondo i nostri gusti e anche dandogli un’impronta del luogo del nostro sito con una foto significativa che potrà fare da sfondo al nostro modello.

Iniziamo con il voler sostituire l’attuale immagine gialla, quella con le nuvolette del Template “example 1” Questa immagine originale quadrata ha una dimensione di 400*400 pixel per cui anche la nuova immagine che andrà a sostituire la vecchia, dovrà avere stesse dimensioni, cosa non difficile da ottenere con l’aiuto di un programma di grafica, quasi tutti sono in grado di fare un “resize” di immagini. La vecchia immagine dello sfondo ha nome “weather_bg01.jpg” ed è presente nella directory “C:\HeavyWeather\HWP\data” sempre se non abbiamo fatto una installazione personalizzata. Una volta scelta e ridimensionata a 400*400 pixel la nostra nuova foto di sfondo, andremo a metterla nella Directory C:\HeavyWeather\HWP\data” rinominandola “weather_bg01.jpg” che di fatto eliminerà il vecchio sfondo che sarà sostituito dal nuovo.

Molto probabilmente le scritte che prima erano adeguate al vecchio sfondo, ora appariranno inadatte per cui provvederemo ad armonizzarle con il nuovo sfondo. Per prima cosa, probabilmente vorremo mettere al centro della nostra schermata, il nome del nostro sito “Meteo Mio” Per fare questo andate sul terzo menu in alto “Elements” e scegliete la voce di menu “Text” In basso a sinistra verrà un rettangolo tratteggiato con al suo interno la parola “Text...” vedremo anche sul lato destro che nel campo “Value” è contenuta la stessa parola “Text...” Dentro a questo campo digitiamo “Meteo Mio” al posto dell'attuale scritta ( o il nome della nostra stazione) e quest’ultima scritta prenderà il posto del vecchio “Text...” nel campo tratteggiato a sinistra. Ora posizioniamo la scritta ottenuta nel posto in cui desideriamo vederla, la afferriamo con il mouse che assume una forma di croce con 4 frecce e la trasciniamo dove desideriamo averla.

PERSONALIZZIAMO IL NOSTRO MODELLO

Probabilmente la scritta ottenuta non ha gli attributi che desideriamo ma facendo le adeguate scelte nella sezione “Text Style” nella parte destra otterremo colori, dimensioni e tipo di carattere come desideriamo noi. Per ottenere le modifiche desiderate è chiaro che il rettangolo con la scritta da variare deve essere selezionato per cui tratteggiato, se non lo è basterà farci un click sopra.

Possiamo anche variare la posizione del testo all’interno del suo rettangolo tratteggiato variando opportunamente i parametri all’interno della sezione “Text Position”. Invece nella sezione “Background” sarà possibile variare il colore di sfondo del testo immesso, se vogliamo metterci un bordo al suo contorno e di che spessore e colore sarà lo stesso. Se dopo aver scelto gli attributi voluti, la scritta esce dal bordo tratteggiato o lo stesso deve comunque essere ridimensionato, basterà afferrare tra i diversi presenti, l’appropriato rettangolino distribuito sul perimetro del tratteggio per ridimensionare lo stesso come desiderato.

Adesso passiamo a vedere come inserire i dati che ci giungono dai sensori accompagnandoli da adeguate scritte che ne identificano la funzione.

Iniziamo posizionando il valore della temperatura esterna. Sempre dal Menu “Elements” scegliamo “Weather Data” Dal campo “Value” scegliamo tra le diverse possibilità “Temperature Outdoor” che è la quarta voce nel menu a tendina che compare, sempre in questo campo potremo scegliere per una visualizzazione in gradi Celsius o Fahrenheit , noi sceglieremo C°. Come precedentemente visto per il nome, potremo fare molte variazioni utilizzando le varie sezioni “Text Style”, “Text Position”, “Position / Size” e “Background”. Una volta definito il campo che conterrà il valore della temperatura esterna, trascineremo il rettangolo tratteggiato che contiene tale parametro, nella posizione desiderata. Alla sinistra o dove desiderate, sarà bene inserire una scritta di testo che indichi che il valore mostrato è riferito alla temperatura esterna per cui andiamo sul menu “Elements” e selezioniamo “Text” Nel campo a destra e nella sezione “Value” sostituiamo alla solita scritta “Text..” le parole “Temperatura esterna” possiamo come al solito fare tutte le variazioni al testo tramite le varie sezioni menzionate prima e questa è una cosa applicabile anche a tutte le altre scritte o definizione dei parametri meteo che sceglieremo in seguito per cui non ripeteremo più queste indicazioni che rimangono le stesse. Adesso afferriamo con il mouse la nuova scritta “Temperatura esterna” e trasciniamola accanto al precedente “C°”,

Quanto descritto precedentemente potremo applicarlo anche ad altri parametri meteo come, ad esempio, la Pressione atmosferica, la Pioggia, la velocità e direzione del Vento, insomma a tutte le grandezze selezionabili nel campo “Data Type” della sezione “Value”.

Alla schermata che abbiamo costruito, è anche possibile aggiungere Immagini e linee per abbellirla o mettere in evidenza alcune scritte.

C’è anche la possibilità di inserire icone e relative scritte associate a quella che è la tendenza del tempo nelle prossime ore. Sconsiglio di dedicare del tempo a questo aspetto che è molto evanescente e poco attendibile, aspetteremo di avere un sito più maturo per inserire delle previsioni che alcuni siti specializzati in previsione mettono a disposizione gratuitamente e magari personalizzati per il nostro Comune.

METTIAMO ON-LINE I DATI DELLA NOSTRA STAZIONE

Adesso che abbiamo costruito la nostra “paginetta” con i dati messi secondo il nostro gusto, passiamo alla seconda parte, quella della pubblicazione della stessa pagina sul nostro sito. Per prima cosa e prima di parlare di FTP e accessi remoti, facciamo una semplice prova che ci confermerà l’invio in remoto della pagina ora realizzata.

Fino ad ora abbiamo sempre lavorato sul folder “Properties” che è la”linguetta” nella parte destra in alto della schermata usata finora. Ora facciamo un click sul folder “Export” che è accanto a “Properties” Nella schermata che ci si presenta possiamo vedere molti parametri che saranno da configurare successivamente. Per ora ignoriamoli tutti e premiamo il bottone “Test” che vediamo in basso a destra. Quest’azione provocherà l’invio su un server di prova di “LaCrosse HWP” della nostra pagina che sarà visualizzata attraverso un Browser che si aprirà automaticamente. Questo significa che anche il collegamento del nostro PC in rete funziona regolarmente.

COSTRUIAMO UNA PAGINA HTML

Arrivati con successo a questo punto, è necessario .... abbandonare HWP per dedicarci alla costruzione della nostra pagina, ma questa volta in codice HTML che a sua volta accoglierà la pagina appena creata con HWP ma prima facciamo un bel “salva con nome” dal menu “File” e diamo il nome “prova.xml” al lavoro fino a qui svolto.

Una conoscenza seppur minima di HTML è necessaria, ma per superare questo passo, e mi rivolgo a persone con nessuna esperienza di HTML, è possibile usare per questo scopo didattico una pagina già preparata con del codice che trovate qui sotto.

IL NOSTRO CODICE HTML

Inizio codice HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

New York

<div style="text-align: center;"><img><img src="prova.jpg" border="1" height="400" width="400">

 POSIZIONE
 
 
Anche nota come Nuova York, sua denominazione progettuale iniziale, 
 
si trova in U.S.A
a sud del Grande Raccordo Anulare, da cui dista meno di 1 km, ed è delimitata 
 
a nord e ad ovest da Route 66, a est dalla via Gran Canyon.

Il vero e proprio sito è posto in una zona poco urbanizzata al bordo di un parco
 
denominato "Central Park"

Il mare dista circa 1Km e il vento giunge libero da tutte le direzioni essendo il 
 
sito situato su di una piccola collina con solo un settore a Nord Est coperto da un
 
edificio che comunque è ad oltre 60mt, per il resto l'orizzonte è completamente aperto fino al mare.

UBICAZIONE della Stazione:

Località: New York
 
Latidutine: 10° 10'  N
 
Longitudine: 10° 10' E
 
Altitudine: 65mt s.l.m.

INSTALLAZIONE della Stazione:

Altezza della stazione dal piano stradale: 22mt
 
Altezza del sensore Termo Igrometrico: 73mt s.l.m.
 
Schermatura sensore Termo Igrometro: Passivo autocostruito
 
Tipologia: Urbana
 
Il sole è presente dall'alba al tramonto

</div>
</body>
</html>

Fine codice HTML

LAVORIAMO SUL NOSTRO CODICE HTML

Essendo un codice con delle scritte di fantasia, consiglio di editarle per adattarle al proprio sito. Già che parliamo di Editing, vorrei consigliare di munirsi di alcuni programmi gratuiti che ci aiuteranno a creare e gestire il nostro sito, vedrete che prima o poi sentirete la necessità di averli…. Il primo che consiglio è di procurarsi Filezilla su questo link la versione che ci serve è quella Client . E’ un programma che ci permetterà di trasferire file dal nostro PC al nostro sito remoto attraverso una modalità chiamata FTP (File Transfer Protocol) termine che sul WEB ricorre spesso. Altro programma da procurarsi è un editor HTML anche ad oggetti con possibilità di visualizzare anteprime dello stesso codice HTML, questo programma che consiglio si chiama NVU e lo potete scaricare da questo sito. Altro programma molto utile è un Editor “anche” di codice HTML il cui nome è Notepad++ scaricabile da questo link. Per aspetti di Editing di solo codice HTML lo trovo molto più potente e versatile di NVU, diciamo un utile complemento a quest’ultimo. Allora, per l’editing del codice sopra, consiglio di usare Notepad++ Una volta ottenuto e controllato il risultato desiderato, provvederemo tramite Filezilla a trasferire questo codice HTML che sarà contenuto in un file di nome index.html nella radice del nostro sito. Fate molta attenzione al fatto che questo file deve necessariamente chiamarsi “index.html” (senza gli apici) In pratica appena entrati in possesso del nostro sito, vedrai che già esiste nella radice del sito stesso un file con lo stesso nome index.html. Quello che ci trasferisci o con Filezilla o con altri metodi, deve sovrascrivere quello esistente e prendere il suo posto, insomma alla fine sul sito dobbiamo avere il file index.html che contiene il nostro codice precedentemente editato.

Se hai fatto caso al contenuto del nostro codice HTML durante il precedente editing, dovresti ricordare che su una riga era nominato un file di nome “prova.jpg” la riga interessata conteneva esattamente questo codice:

<div style="text-align: center;"><img><img src="prova.jpg" border="1"

Ecco... quel file di nome “prova.jpg” è la pagina che contiene tutti nostri dati meteo, quella che abbiamo creato con HWP, ora dobbiamo fare in modo che HWP quando spedisce con il suo FTP quella paginetta, questa abbia obbligatoriamente questo nome “prova.jpg” Per fare questo torniamo dentro a HWP, facciamo un “Load” dal menu “File” e selezioniamo “prova.xml” che poi è il nostro file precedentemente salvato. Adesso selezioniamo il Folder “Export” che avevamo visto prima. Già che ci siamo faremo anche i giusti settagli affinché HWP sia in grado di usare correttamente il suo FTP verso il nostro server remoto. Per evitare confusione con i modelli, assicuriamoci di eliminare Example 2 ed Example 3 dalla lista in alto, per realizzare ciò, selezionate e fate diventare blu tutta la riga che contiene il suo nome Example 2 e dal menu “Image” selezionate “Delete” Fate la stessa cosa anche per Example 3 e alla fine rimarrete sono con il nostro Example 1

CONFIGURIAMO HWP PER FARGLI INVIARE I DATI SUL NOSTRO SITO

Ammesso che disponiamo di collegamento ADSL piuttosto che di un Dial-Up e che il nostro sito si chiami “Meteomio” raggiungibile alla URL http://meteomio.altervista.org dovremo configurare HWP con questi parametri: Sezione “Internet Connection” mettiamo la spunta su “Direct Connection” Sezione “Type and Intervall” mettiamo la spunta su “FTP” ed eventualmente mettiamo data e ora desiderata di inizio invio oppure lasciamo quello che ci propone. Nel campo “Export Intervall” mettiamo il tempo in minuti della frequenza con cui verranno inviati i nostri dati che poi è la nostra paginetta creata, per ora consiglio di mettere 5 Nella sezione “FTP Server” e nel campo “Server name” mettiamo meteomio.altervista.org Nel campo “Username” mettiamo meteomio mentre nel campo “Password” mettiamo la password che abbiamo ricevuto al momento della registrazione del sito su Altervista oppure quella che abbiamo successivamente cambiato. Nel campo “Target” devi metterci dove si troverà la pagina "index.html" sul nostro sito. Io per queste prove consiglio di mettere tutte quelle poche cose necessarie al nostro sito nella radice (è lo stesso concetto di un Hard disk..) per cui il “File Path vale "/" (senza apici) Nel campo “File Name” devi mettere il nome della nostra paginetta per cui "prova.jpg" (non dimenticare l'estensione jpg..)

Attenzione che la configurazione sopra esposta e riferita alla sezione “FTP Server”, è adatta ai siti che realizziamo su Altervista, ma ogni provider ha bisogno della propria configurazione. A titolo di esempio riportiamo anche la configurazione da fare sui siti di Aruba essendo un Hosting molto difffuso. Nella sezione “FTP Server” e nel campo “Server name” mettiamo meteomio.it o il dominio che abbiamo per cui .com .org ecc.. ecc.. Nel campo “Username” mettiamo la user name che Aruba ci ha fornito per il sevizio FTP che potrebbe essere simile a..... 1234567@Aruba.it mentre nel campo “Password” mettiamo la password che abbiamo ricevuto al momento della registrazione del sito su Aruba oppure quella che abbiamo successivamente cambiato. Nel campo “Target” devi metterci dove si troverà la pagina "index.html" sul nostro sito. Io per queste prove consiglio di mettere tutte quelle poche cose necessarie al nostro sito nella radice (è lo stesso concetto di un Hard disk..) per cui il “File Path vale "/miosito.com" (senza apici) Nel campo “File Name” devi mettere il nome della nostra paginetta per cui "prova.jpg" (non dimenticare l'estensione jpg..)

Per ultima cosa su HWP, metti il segno di spunta nel campo "Active" che trovi in alto a sinistra.....ora dovrebbe iniziare il trsferimento su Altervista ( o su Aruba) della nostra pagina.

Se tutto è OK, vedrai sotto "Last Status" la scritta "Success" ed un altalenarsi di "Waiting " e Queued" sotto a "Status"

Dato che nel codice HTML del nostro file index.html è contenuta una riga che usa un file per creare uno sfondo alla pagina visibile sul nostro sito, consiglio di trasferire con Filezilla anche questo file di nome “nuvolesfondo.jpg” che darà un piccolo tono alla nostra per ora non molto ricca “paginetta”

CONCLUSIONI

Il lavoro svolto sino a quì vuole dare la soddisfazione e la possibilità di avere i nostri dati meteorologici pubblicati su di un nostro sito anche senza essere esperti di WEB. Questo è solamente un punto di partenza e non certo di arrivo... in molti, me compreso, siamo partiti con HWP per avere un piccolo sito e successivamente, avendo acquisito una maggiore esperienza, siamo passati ad altri software più completi che oltre a gestire i valori meteo, compilavano grafici, statistiche e rapporti che hanno successivamente arrichito il sito originale.

Heavy Weather Publisher

Indice

SCOPO

CHE COSA E' E COSA FA' HEAVY WEATHER PUBLISHER

PREMESSA

INIZIAMO

PERSONALIZZIAMO IL NOSTRO MODELLO

METTIAMO ON-LINE I DATI DELLA NOSTRA STAZIONE

COSTRUIAMO UNA PAGINA HTML

IL NOSTRO CODICE HTML

LAVORIAMO SUL NOSTRO CODICE HTML

CONFIGURIAMO HWP PER FARGLI INVIARE I DATI SUL NOSTRO SITO

CONCLUSIONI

Menu di navigazione

Strumenti personali

Namespace

Varianti

Visite

Altro

Ricerca

Navigazione

Strumenti