Gestire i file

Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.

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 in una struttura nel tuo computer, facendo si che essi possano parlare tra di loro, e permettendo a tutti i contenuti di puntare al giusto file, prima di (eventualmente) caricarli su un server. Questa pagina discute di alcune problematiche alle quali dovresti essere al corrente cosicchè tu possa impostare una corretta struttura di file per il tuo sito web.

Dove dovresti creare il tuo sito web all'interno del tuo computer?

Quando stai lavorando ad 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). Qui è dove il tuo intero sito web vivrà.
  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 i nomi delle cartelle e dei file sono completamente 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 nel crei un'immagine nella cartella test-site e le assegni il nome MyImage.jpg, poi 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 nel nome del file, alcuni sistemi lo tratteranno come se fossero due 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 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 tratta i trattini come separatore delle parole, ma non tratta le sottilineature allo stesso modo. Per questo motivo, è buona abitunidine 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, foglie 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 subcartella 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 subcartella 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. buttoni che caricano dei dati quando vengono cliccati ). Crea una subcartella 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 - semplicemente una strada, così che un file possa conoscere dove è 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 preoccuparto 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. The image is inside the images directory, which is in the same directory as index.html. To walk down the file structure from index.html to our image, the file path we'd need is images/your-image-filename. For example, our image is called firefox-icon.png, so the file path is images/firefox-icon.png.
  4. Scrivi il percorso al file nel codice HTML, tra i doppi apici 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

 

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: PatrickT, DaniPani, cubark
Ultima modifica di: PatrickT,