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:
- WWW
- 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:
- WWW
- 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:
- WWW
- 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".
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:
- WWW
- index.html (homepage introduttiva)
- html
- ita
- home
- chi-siamo
- prodotti
- servizi
- come raggiungerci
- 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):
- WWW
- index.html (homepage introduttiva)
- html
- ita
- home
- chi-siamo
- prodotti
- index.html
- gallery
- 01.html
- 02.html
- 03.html
- 04.html
- 05.html
- 06.html
- servizi
- come raggiungerci
- contatti
- index.html (pagina contatti principale)
- grazie.html (pagina ringraziamento contatti)
- errore.html (errore form contatti)
- eng
- home
- chi-siamo
- prodotti
- index.html
- gallery
- 01.html
- 02.html
- 03.html
- 04.html
- 05.html
- 06.html
- servizi
- come raggiungerci
- 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
- 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
- come raggiungerci
- ... immagini in come raggiungerci
- 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.
CercaSoluzione3
Postato sotto: 
