Gestire i file

Un sito web è composto da molti file: contenuti testuali, codice, fogli di stile, contenuti multimediali e molto altro. Quando crei un sito web, devi assemblare questi files nel tuo computer in maniera strutturata,  facendo si che essi possano dialogare tra di loro e facendo in modo che tutto il contenuto appaia correttamente, prima di (eventualmente) caricarli su un server. Questa pagina esamina alcune problematiche che dovresti conoscere, così da saper impostare una struttura  corretta dei files necessari al tuo sito web.

Dove andrebbe collocato il tuo sito web all'interno del tuo computer?

Quando stai lavorando a un sito web localmente sul tuo computer, dovresti tenere tutti i file in una singola cartella che rispecchi la struttura di file all'interno del tuo server. Questa cartella può essere creata ovunque tu voglia, ma dovresti posizionarla in una directory dove tu possa facilmente trovarla, magari sul tuo Desktop, nella tua cartella di Home, o nella root del tuo hard drive.

  1. Seleziona un posto dove archiviare i tuoi progetti web. Qui, crea una nuova cartella chiamata progetti-web (o qualcosa di simile). Ecco dove vivrà il tuo intero sito web.
  2. Dentro questa prima cartella, crea un'altra cartella per archiviare al suo interno il tuo primo sito web. Chiamala sito-test (o qualcosa di più fantasioso).

Un chiarimento riguardo gli spazi e la distinzione tra maiuscole e minuscole

Forse hai notato che, nel corso di questo articolo, i nomi delle cartelle e dei file sono sempre in minuscolo e senza spazi. Questo perchè:

  1. Tanti computer, particolarmente i server web, fanno una distinzione tra lettere maiuscole e minuscole. Ad esempio: se crei un'immagine nella cartella test-site e le assegni il nome MyImage.jpg, ma successivamente provi ad aprirla usando myimage.jpg, potrebbe non funzionare.
  2. Browsers, server web e linguaggi di programmazione non gestiscono gli spazi tutti allo stesso modo. Per esempio, se usi gli spazi nella denominazione di un file, alcuni sistemi li tratteranno come se fossero più nomi. Alcuni server sostituiscono lo spazio con "%20" (il codice carattere che viene usato al posto degli  spazi nei URL), rendendo impossibile aprire  tutti i tuoi link. È  meglio quindi separare con dei trattini o con delle sottolineature, ad esempio: my-file.html o my_file.html.

In ogni caso dovresti usare il trattino per separare le parole. Google considera i trattini come separatori delle parole, ma non tratta le sottilineature allo stesso modo. Per queste ragioni è buona abitudine scrivere il nome dei file e delle cartelle in minuscolo senza spazi e separando le parole con trattini, almeno fino a quando sai cosa stai facendo. In questo modo non cadrai in errori comuni nel futuro.

Quale struttura dovrebbe avere il tuo sito?

La struttura più utilizzata in qualsiasi progetto è un file HTML, che funge da homepage, e delle cartelle per contenere immagini, fogli di stile e file di script. Vediamola insieme:

  1. index.html: Questo file racchiude generalmente il contenuto della tua homepage, cioè il testo e le immagini che le persone vedono quando accedono per la prima volta al tuo sito. Usando il tuo text editor, crea un nuovo file chiamato index.html e salvalo nella cartella test-site.
  2. cartella images: Questa cartella racchiude tutte le immagini che usi nel tuo sito. Crea una sottocartella chiamata images, nella cartella test-site.
  3. cartella styles: Questa cartella racchiude il codice CSS usato per creare il contenuto  grafico  (per esempio, quale font usare, quali colori usare come sfondo). Crea una sottocartella chiamata  styles, nella cartella test-site.
  4. cartella scripts: Questa cartella racchiude tutto il codice JavaScript usato per aggiungere funzioni interattive al tuo sito (per. es. tasti che caricano dei dati quando vengono cliccati ). Crea una sottocartella chiamata scripts, nella cartella test-site.

Nota: Su Windows, potresti avere problemi a vedere l'estensione dei file, perchè Windows ha un opzione chiamata Nascondi estensioni per tipi di file conosciuti attivata per default. Normalmente puoi disattivarla in Windows Explorer, selezionando Opzioni cartella... , deselezionare Nascondi estensioni per tipi di file conosciuti, poi cliccando OK. Per avere più informazioni sulla tua versione di Windows, fai una ricerca su internet!

Percorsi dei file

Per permettere ad un file di trovarne un altro, dovremo indicare un percorso tra di loro - in pratica creare un itinerario, così che un file possa sapere dov'è l'altro. Per dimostrare ciò, inseriremo un po' di codice HTML nel nostro file index.html, rendendo così possibile mostrare l'immagine scelta nell'articolo "Come dovrebbe apparire il tuo sito web?"

  1. Copia l'immagine scelta in precedenza nella cartella images.
  2. Apri il file index.html, e inserisci il codice che segue, così come lo vedi scritto. Non preoccuparti  del suo significato per ora - approfondiremo i dettagli più avanti. 
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>La mia pagina di prova</title>
  </head>
  <body>
    <img src="" alt="La mia immagine di prova">
  </body>
</html>
  3. La riga <img src="" alt="My test image"> è il codice HTML che si occupa di mostrare l'immagine nella pagina. Dobbiamo indicare nell'HTML dove trovare l'immagine: essa si trova all'interno della directory images, che a sua volta è nella directory comune a index.html. Scorrendo lo schema strutturale da index.html alla nostra immagine, il percorso che dovremmo avere è: images/your-image-filename. Se ad esempio, la mia immagine si chiama firefox-icon.png, allora il percorso corretto sarà images/firefox-icon.png.
  4. Scrivi l'indirizzo del file nel codice HTML, tra le virgolette di src="".
  5. Salva il tuo file HTML, ed aprilo con il browser web (puoi farlo velocemente con un doppio click). Dovresti vedere l'immagine nella tua pagina web appena creata.

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

Alcune regole generali per i percorsi dei file:

  • Per indicare che il file è nella stessa cartella / directory del file HTML richiesto, puoi semplicemente usare il nome del file, ad esempio: my-image.jpg.
  • Per riferirti ad un file in una sotto cartella / directory, scrivi il nome della directory prima del nome del file e separali con un forward slash (/), ad esempio subdirectory/my-image.jpg.
  • Per usare un file che si trova in una cartella / directory al di fuori di quella dove risiede il file HTML richiesto, si possono usare due punti (..). Ad esempio se index.html si trova in una sotto cartella / directory di test-site e my-image.jpg è all'interno di  test-site, my-image.jpg può essere richiamato da index.html usando ../my-image.jpg.
  • Queste notazioni, possono essere combinate come si preferisce, ad esempio ../subdirectory/another-subdirectory/my-image.jpg.

For now, this is about all you need to know.

Nota: Il file system di Windows, usa i backslash, non i forward slash, esempio: C:\windows. Questo nel codice HTML non conta — anche se stai sviluppando il tuo sito web su Windows, è obbligatorio usare i forward slash nel codice.

Cos'altro dovrei fare?

Per ora è tutto. L'albero della tua cartella / directory, dovrebbe essere simile a questo:

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

Previous Overview: Getting started with the web Next