Come organizzare i file sul server ~ Cerca Soluzione 3

Anche se può sembrare una cosa di poca importanza, organizzare i file di un sito in maniera logica fin dall'inizio può fare la differenza fra passare una giornata intera su un lavoro, controllando che nel fare le modifiche non si sia compromesso nulla sulle altre pagine del sito, e riuscire ad eseguire gli aggiornamenti richiesti in poche ore.

I siti crescono e vanno mantenuti

Non importa quanto sia piccolo un sito, inizialmente. Anche solo in fase di testing, capita spessissimo che al cliente vengano in mente nuove funzionalità e pagine da poter aggiungere. Di fatto, raramente si trovano situazioni dove tutto è identico anche a pochi mesi prima, soprattutto quando il sito è già avviato da tempo e ha una certa affluenza di visitatori.

Durante il suo sviluppo, quindi, è necessario prendere una serie di accorgimenti in modo da preparare il tutto per eventuali ampliamenti futuri, e rendere tale processo il più semplice possibile. Per comprendere meglio, immaginiamoci di avere un sito di 8 pagine (chiaramente questo è solo un esempio; prendiamo in considerazione solo 6 pagine per comodità, in realtà un vero sito può averne anche 50 fin dal primo giorno di vita).

La cartella WWW

Di default, molti server hanno una cartella, solitamente chiamata WWW. Un programmatore inesperto butterà tutti i file HTML qui dentro, e le creerà un altra cartella, "images", dove inserirà le immagini che appaiono sul sito (almeno si spera che faccia almeno quello).

Le sezioni sono: home, chi siamo, prodotti, servizi, contatti (pagina ringraziamento contatti, pagina errore form contatti), servizi, come raggiungerci.

Quindi:

chi siamo.html
come raggiungerci.html
contatti.html
contatti_errore.html
contatti_ok.html
home.html
prodotti.html
servizi.html

I file sono solo 8, quindi la situazione è piuttosto facile da amministrare. Il programmatore, contento, pubblica il sito.

Passano 2 mesi. L'azienda vi richiama dicendo che, come primo passo verso l'ampliamento del numero dei clienti che vogliono raggiungere, vogliono aggiungere una versione in inglese del sito.

Il programmatore riapre la cartella, ed aggiunge le pagine:

chi siamo.html
chi siamo_eng.html
come raggiungerci.html
come raggiungerci_eng.html
contatti.html
contatti_eng.html
contatti_errore.html
contatti_errore_eng.html
contatti_ok.html
contatti_ok_eng.html
home.html
prodotti.html
prodotti_eng.html
servizi.html
servizi_eng.html

Anche se qualcuno potrebbe già spaventarsi vedendo la quantità e i nomi di tutti questi file, rendiamo situazione più palese: mettiamo che il cliente voglia, grazie all'aumento di visitatori, far vedere meglio i prodotti, aggiungendo una gallery di 6 pagine con le foto dei vari oggetti:

chi siamo.html
chi siamo_eng.html
come raggiungerci.html
come raggiungerci_eng.html
contatti.html
contatti_eng.html
contatti_errore.html
contatti_errore_eng.html
contatti_ok.html
contatti_ok_eng.html
home.html
prodotti.html
prodotti_eng.html
prodotti_gallery_1.html
prodotti_gallery_1_eng.html
prodotti_gallery_2.html
prodotti_gallery_2_eng.html
prodotti_gallery_3.html
prodotti_gallery_3_eng.html
prodotti_gallery_4.html
prodotti_gallery_4_eng.html
prodotti_gallery_5.html
prodotti_gallery_5_eng.html
prodotti_gallery_6.html
prodotti_gallery_6_eng.html
servizi.html
servizi_eng.html

Adesso la situazione comincia a diventare ingestibile. Notate come i nomi dei file debbano diventare delle vere e proprio frasi: prodotti_gallery_4_eng.html, per indicare la gallery dei prodotti in lingua inglese. Questo può diventare un problema in quanto nomi come questo sono difficili da ricordare e possono creare errori di battitura e conseguenti link morti.

La cartella delle immagini

Con le immagini il problema si complica ancora, dato che su una pagina si possono essere anche 5 o 6 immagini (a dir poco). Considerando il sito in questione, la cartella "images" potrebbe contenere varie centinaia di file! I problemi principali sono due: dover creare nomi unici per i file (dato che non possono coesistere due file con lo stesso nome in una directory) e capire in quali immagini vengono ancora utilizzate e in quale pagina. Il primo problema è ovvio: ipotizziamo che ci sia un header diverso per ogni categoria: il nome più logico sarebbe header.gif.

Le categorie sono però 6, e non è possibile avere un file con lo stesso nome, quindi avremo:

header_chi siamo.gif
header_come raggiungerci.gif
header_contatti.gif
header_home.gif
header_prodotti.gif
header_servizi.gif

L'header contiene il titolo della categoria, quindi occorrono nuove immagini per la versione in inglese:

header_chi siamo.gif
header_chi siamo_eng.gif
header_come raggiungerci.gif
header_come raggiungerci_eng.gif
header_contatti.gif
header_contatti_eng.gif
header_home.gif
header_home_eng.gif
header_prodotti.gif
header_prodotti_eng.gif
header_servizi_eng.gif
header_servizi_eng.gif

La necessità di dover creare nomi unici ci costringe ad avere immagini concettualmente analoghe con nomi diversi. Se le immagini diventano più numerose dei nomi sensati che ci vengono in mente, inoltre, è facile trovarsi con file del tipo img_header_02_destra.gif.

Il secondo problema è meno ovvio per chi ha poca esperienza. Comunque, nella vita di un sito capita di dover cambiare il layout, o più semplicemente sostituire un'immagine non più necessaria. E' buona abitudine cancellare i file dal server se non vengono più utilizzati, anche solo per non consumare storage inutilmente.

Se la nostra immagine è in una cartella che contiene altri 300 file, però, sarà difficile stabilire quali immagini poter cancellare. Dovremmo andare a riguardarci il codice, per essere sicuri, e segnarci il nome esatto. La confusione è però talmente tanta che per la paura di cancellare il file sbagliato rompendo altre pagine, in situazioni del genere di solito uno lascia perdere e lascia il file dove è. Questo porta, nei vari mesi o anni di vita di un sito, ad avere centinaia e centinaia di immagini inutilizzate sul server.

Chiaramente più passa il tempo e più la situazione peggiora. A un certo punto può diventare così critica e ingestibile (ricordatevi che abbiamo usato come esempio un sito di 6 pagine, il vostro obbiettivo come programmatori deve essere di poter realizzare portali con centinaia di pagine), che l'unica soluzione sembra essere buttar via tutto e rifare il sito da capo (almeno per quanto riguarda le immagini).

Considerate il seguente screenshot, che mostra la directory di un sito realmente esistente, che ho (con grande stress derivato da come era organizzato) dovuto personalmente aggiornare per un cliente. Il sito era solamente 7 pagine, ma guardate la cartella delle immagini: è stato un incubo lavorarci!

Come fare quindi ad evitare questo casino?

Organizzazione è la parola d'ordine

Avere un modo di organizzare i file sul server secondo un metodo ben preciso, seguendo una certa logica che resta coerente in tutti i vostri progetti, vi farà risparmiare un sacco di tempo. Lo sforzo iniziale è irrisorio, trattandosi semplicemente di pianificare un minimo il tutto.

innanzitutto, per organizzare i file supponiamo che voi abbiate già diviso i contenuti in sezioni. Per semplificare la cosa continuiamo a prendere come esempio lo stesso sito. Le sezioni sono: home, chi siamo, prodotti, servizi, contatti, pagina ringraziamento contatti, pagina errore form contatti, servizi, come raggiungerci.

Separare le tecnologie

Per fare un bel lavoro, è necessario separare i file che compongono il sito a seconda della tecnologia. Questo è utile per un motivo di organizzazione logica, e diventa indispensabile nel caso in cui ci sia più di una persona a lavorare sul sito.

Capita spesso di avere un programmatore per l'HTML, uno per i CSS, e un grafico che pensi alle immagini. Separare i file sul server è utile perché riduce al minimo il pericolo che i vari sviluppatori creino problemi mettendo le mani fra file che non sono di loro competenza.

Quindi, creiamo la cartella "html", quella "css", e la cartella "images".

html
css
images

I file HTML

Il metodo per organizzare i file nella cartella HTML è abbastanza intuitivo: basta creare una cartella per ogni sezione e sottosezione del sito, e salvare li le nostre pagine HTML. L'unico dubbio può essere se creare o no una cartella superiore per future versioni in una o più lingue diverse. Questo dipende dal tipo di sito, in realtà. Se supponiamo che il sito possa in futuro beneficiare di una seconda lingua, possiamo inserire le nostre cartelle in una cartella superiore che chiameremo "ita" già dall'inizio.

Quindi:

index.html (homepage introduttiva)
html

home

index.html

chi-siamo

index.html

prodotti

index.html

servizi

index.html

come raggiungerci

index.html

contatti

index.html (pagina contatti principale)
grazie.html (pagina ringraziamento contatti)
errore.html (errore form contatti)

css
images

come vedete i file adesso sono organizzati in modo logico. L'indirizzo della pagina dei contatti nella versione italiana è adesso "ita/contatti/", anziché "contatti_errore.html". Come avrete notato, ho omesso "index.html" dal nuovo indirizzo della pagina. Questo mi permette di introdurre un nuovo concetto:

file index.html

i server sono settati in modo che file col nome index.html siano associati automaticamente con la cartella che li contiene. E' quindi sufficiente scrivere "nome_cartella/" per accedere a "nome_cartella/index.html".

Questa caratteristica dei server va sempre considerata nel decidere la nostra struttura. Nella pagina contatti, per esempio, il nome della categoria descrive già i contenuti della pagina. Sarebbe inutile scrivere "contatti/contatti.html". Scegliere index.html permette di avere un indirizzo che si ricorda facilmente. A volte questo è molto importante.

Pensate ad un portale, che contiene info su viaggi, games, e casino. Uno potrà promuovere la sezione games come www.nomeportale.com/games/. I percorso è facile da ricordare, dato che sappiamo il nome del portale e quello che stiamo cercando. Questo è utile per promozione e per le visite successive.

Proviamo a riorganizzare il sito nell'esempio di prima, ovvero con una seconda lingua e la gallery (che inseriremo in una cartella a parte dato il numero di pagine):

index.html (homepage introduttiva)
html

home

index.html

chi-siamo

index.html

prodotti

index.html
gallery

01.html
02.html
03.html
04.html
05.html
06.html

servizi

index.html

come raggiungerci

index.html

contatti

index.html (pagina contatti principale)
grazie.html (pagina ringraziamento contatti)
errore.html (errore form contatti)

home

index.html

chi-siamo

index.html

prodotti

index.html
gallery

01.html
02.html
03.html
04.html
05.html
06.html

servizi

index.html

come raggiungerci

index.html

contatti

index.html (pagina contatti principale)
grazie.html (pagina ringraziamento contatti)
errore.html (errore form contatti)

css
images

l'intero sito è adesso perfettamente organizzato. Nonostante il sito sia circa 30 pagine, la maggior parte delle cartelle contiene meno di due file. Guardando i nomi delle cartelle del percorso possiamo intuire il contenuto della pagina, anche dovessero essere passati mesi dall'ultima volta che abbiamo messo le mani sul sito.

Mettiamo di voler linkare alla 3a pagina della gallery prodotti nella versione inglese. Non devo ricordarmi il nome esatto del file: è in inglese, quindi "eng/" + è in prodotti, quindi "eng/prodotti/", + è nella gallery: "eng/prodotti/gallery/", ed è la quarta pagina: "eng/gallery/prodotti/04.html".

Questo sistema ci permette di tenere sotto controllo siti con centinaia e centinaia di pagine.

La cartella images

Anche il metodo da utilizzare per organizzare i file di immagini è semplice.

Basta creare un sistema gerarchico simile a quello utilizzato per i file HTML. Invece dei vari file HTML, metteremo le immagini che appaiono su quella categoria. Se una pagina contiene molte immagini, possiamo tranquillamente creare una sottocartella apposita.

Quindi, un'immagine che compare sulla pagina contatti:

www/html/ita/contatti/errore.html

verrà salvata nella cartella:

www/images/contatti

le immagini per la gallery, ad esempio:

www/images/prodotti/gallery/

se ogni pagina della gallery contiene decine di immagini, oppure immagini e thumbnail, per non fare confusione possiamo creare una sottocartella per ogni pagina:

www/images/prodotti/gallery/04/

come avrete notato, nella cartella images non si distingue fra versione in italiano e versione in inglese. Questo perché le immagini restano le stesse, e non avrebbe senso averne due copie. Nel caso di un header che contiene del testo da tradurre, dato che il numero di ... immagini in ogni cartella sarà basso, possiamo semplicemente avere due file, header_ita.gif e header_eng.gif nella stessa cartella.

Immagini condivise

Introduciamo adesso il caso in cui ci dovessero essere immagini che appaiono costantemente su tutte le pagine. Per esempio, un logo dentro l'header o il footer. La soluzione è creare una cartella chiamata shared, che conterrà tutte le immagini condivise da tutte le pagine sul sito.

Ricapitolando, la nostra cartella images sarà così:

images

home

... immagini in home

chi-siamo

... immagini in chi siamo

prodotti

... immagini in prodotti
gallery

... immagini in gallery 01
... immagini in gallery 02
... immagini in gallery 03
... immagini in gallery 04
... immagini in gallery 05
... immagini in gallery 06

servizi

... immagini in servizi

come raggiungerci

... immagini in come raggiungerci

contatti

... immagini in contatti

shared

immagini condivise attraverso il sito

Cartella CSS

la directory per i fogli di stile può essere organizzata con la stessa logica. Personalmente penso che un sito fatto bene possa tranquillamente avere un solo foglio di stile, che può essere chiamato "shared.css". In caso ci siano più file, la regola da seguire è la stessa: dare nomi inerenti alla funzione del file, non avere 100 file in una cartella.

Conclusione

Creare delle cartelle dove accogliere i file secondo un criterio logico durante la progettazione del sito e prendere alcuni semplici accorgimenti fin dall'inizio, per quanto sia semplice questa operazione, può far risparmiare un sacco di tempo ogni volta che il sito deve essere modificato o ampliato.

L'obbiettivo è rendere intuitiva l'identificazione del tipo di tecnologia utilizzata nel file (es. immagine, HTML, CSS) e della parte del sito dove viene utilizzato.

I vantaggi sono principalmente legati al fatto che i file sono organizzati secondo un criterio logico: minor sforzo nel mantenere ed ampliare il sito, maggior facilità di collaborazione fra diversi sviluppatori che lavorano al progetto allo stesso tempo.

In generale, consegnare un prodotto di qualità anche rispetto all'organizzazione di file farà capire ai vostri clienti che tenete al progetto e che sviluppate siti solidi sotto tutti gli aspetti, non solo nella programmazione.

Se dovesse capitare che il cliente assuma un altro programmatore per eseguire alcune modifiche, aver adottato questo sistema faciliterà enormemente il suo lavoro, e la vostra reputazione ne gioverà. Un parere positivo dato da un terzo è sempre una conferma per un cliente, che sicuramente parlerà di voi come professionisti che si impegnano in quello che fanno.