STRUMENTI DI LAVORO
Torna alla lista webmaster

Dopo aver scaricato il tema nell’articolo precedente, passiamo agli strumenti che ci servono per lavorare sulle pagine web dei siti, strumenti che possono essere molti ma che al momento sono essenzialmente due: 1) il primo è un programma per ritoccare i disegni e le immagini, per il momento può andar bene anche Paint che trovate in Windows poi semmai in futuro potremo usarne altri più professionali e sempre gratuiti come ad esempio Gimp; 2) il secondo è un “editor” cioè un software che permette di leggere e modificare i vari aspetti (grafici, testuali, ecc…) del sito.

Avendo già nel nostro pc un programma come Paint procediamo ora a scaricare solo il secondo strumento, ci sarebbero moltissimi editor adatti allo scopo ma noi in questa rubrica ne sceglieremo uno di tipo particolare, che come ora vi spiegherò facilita molto l’apprendimento iniziale e poi se in futuro vorrete sostituirlo con un altro più professionale potrete sempre farlo.

Per chi legge queste righe ed è proprio agli inizi, va spiegato brevemente che le pagine di un sito web sono costituite essenzialmente da codice, cioè da un linguaggio informatico particolare o meglio da alcuni di questi linguaggi e un esempio di come appare questo codice è rappresentato nella figura n. 1. Tali linguaggi costruiscono e assemblano le varie parti delle pagine: il menù, il logo, le varie immagini, i testi, i pulsanti, i collegamenti e via dicendo. Tutto insomma è costituito da codice, in particolare da codice HTML e CSS ma anche Javascript, PHP e altro ancora.

Figura 1

Di solito gli editor che permettono di creare e/o gestire pagine web si limitano a visualizzare il codice da modificare, ma questo presuppone che si debba avere una seppur minima conoscenza di tale codice altrimenti non si riuscirebbe a far nulla, per fortuna ci sono anche editor particolari che facilitano la comprensione di come siano strutturate le pagine web affiancando al codice anche la visione grafica del codice stesso, permettendo in tal modo al praticante (webmaster) di capire meglio e in tempo reale cosa succede quando si modifica il codice, risparmiando così inizialmente parecchio tempo se non si conosce il codice e se si devono fare modifiche non particolarmente difficili o sofisticate.

L’editor che useremo a tale scopo si chiama BlueGriffon, è gratuito nella sua versione base che andrà benissimo per i nostri scopi ed è di tipo “WYSIWYG” , che sta per What You See Is What You Get (più o meno "quello che vedi è quello che è"). Significa che appartiene a quella categoria particolare di editor di cui accennavamo prima e che permette di poter avere una doppia visione sullo schermo durante il lavoro: a sinistra si può visualizzare la pagina web del sito in anteprima, a destra invece il codice HTML corrispondente. Questi editor hanno vantaggi e svantaggi (come anche gli altri editor “normali” e non “WYSIWYG” ) ma sono estremamente adatti soprattutto per chi inizia e per capire come funziona il tutto, facilitando la comprensione della struttura del sito anche a chi non conosce nulla o quasi nulla di codice.

Procediamo quindi a scaricare gratuitamente BlueGriffon andando al sito ufficiale: http://www.bluegriffon.org/ (il sito è solo in inglese ma il programma è anche in italiano), cliccate in alto sulla voce di menù “Download” e vi ritroverete nella pagina della figura n.2, scaricate la versione per Windows come indicato e va bene sia l’installer che il formato zip:

Figura 2

Potrete poi sempre tornare, successivamente, sul sito di BlueGriffon per leggere la documentazione e approfondire i tanti aspetti di questo editor. Per chi non conosce l’inglese basterà installare un’estensione del browser (Firefox o Chrome o altri) che permetta di tradurre in italiano l’intera pagina e l’intero sito, di tali estensioni ce ne sono ormai tantissime e tutte gratuite.

Una volta che BlueGriffon sarà stato scaricato sul vostro computer lanciatelo e allargate la pagina a tutto schermo. Poi andate alla voce di menù “File” e cliccate su “Apri file…”. A questo punto cercate il file “index.html” nella cartella del tema che avete scaricato in precedenza, come illustrato nella figura n.3, e fateci doppio click sopra per aprirlo all'interno di BlueGriffon:

Figura 3

Verrà quindi aperta, all’interno di BlueGriffon come da figura n.4 più sotto, la pagina “index” o anche pagina “Home”, cioè la pagina iniziale di un sito che ora possiamo vedere come se la stessimo guardando mentre navighiamo in internet. Per il momento non c’è traccia del codice HTML o CSS e quindi vediamo ora come visualizzare anche quello. Sotto alla pagina appena aperta, in basso nella scheda sottostante di BlueGriffon, noterete alcuni pulsanti e dovrete cliccare su “Dual View”, apparirà a destra dello schermo una finestra con il codice HTML corrispondente alla pagina che sta invece ora a sinistra.

Come anticipato all’inizio di questo articolo, BlueGriffon è uno dei pochi editor che permette di osservare contemporaneamente i due aspetti (grafica e codice) di una pagina web che si vuole modificare: a sinistra abbiamo l’aspetto grafico così come appare anche su internet a chi visita quella pagina, a destra abbiamo invece il codice che crea immagini e testi e pulsanti e tutto il resto di quella pagina. Il tutto è illustrato nella figura n. 4:

Figura 4

Sin dal prossimo articolo potremo modificare a nostro piacimento ogni pagina che apriremo e potremo farlo agendo direttamente sulla parte grafica a sinistra, osservando contemporaneamente a destra come si modificherà il codice di conseguenza. In tal modo impareremo più facilmente a conoscere sia la struttura di un sito che il codice man mano che progrediremo con la pratica, ed anche senza una conoscenza approfondita dell’HTML potremo comunque fare molte modifiche e costruirci il sito come vorremo o quasi.

In futuro starà poi a noi decidere se accontentarci delle modifiche fatte o se vorremo farne di altre, magari più sofisticate, approfondendo in quel caso non solo il codice HTML che ora vedete a destra ma anche il codice CSS che potrete richiamare sempre all’interno di BlueGriffon o altri codici ancora. Per adesso ci fermiamo qui e nel prossimo articolo inizieremo finalmente a lavorare nella pratica con le prime modifiche.