aprile 2003
HOME  |  INDICE  |  CORSI  |  DIZIONARIO  |  ABBONAMENTI  |  SITO  |  HELP
 
   
  CORSI OPENMASTER
  MUSICA DIGITALE  
  WEBMASTER  
 
Lezione 1  
Lezione 2  
Lezione 3  
Lezione 4  
Lezione 5  
Lezione 6  
Editor HTML  
Esercizi  
Risorse  
 
  WINDOWS EXPERT  
 
 

Progettare un sito statico

 

1. Definire la struttura

Introduzione
1: definire la struttura
2: collocare i file grafici e multimediali
3: domini reali e virtuali
4: collegamenti assoluti e relativi

Il primo passo consiste nel definire una struttura ordinata per catalogare le informazioni da pubblicare (vedi "Organizzazione delle informazioni"). Dopo di che si traccia una mappa del sito, che imposti l'organizzazione delle informazioni in generale (vedi "Costruzione della mappa") e si arriva infine ai percorsi di navigazione (vedi "Sistemi di navigazione" e "Sistemi di labeling"). Da queste tre attività ricaveremo il sistema di directory che conterrà i vari file. Nella pratica, infatti, un sito statico consiste semplicemente di una serie di file distribuiti in varie directory.

Progettare la struttura del il sito
Qui vediamo la mappa abbozzata di una porzione di sito, a partire dalla home page (index.html) per scendere verso le pagine singole che compongono una lezione del corso. La mappa è stata realizzata mediante lo strumento di disegno siti di Adobe GoLive 6.0 che consente di tracciare i contenuti del con tutte le relazioni prima ancora di aver creato una singola pagina. Una volta che la mappa è definita, il programma genera tutte le pagine e le directory necessarie a rappresentarla.


Clicca per ingrandire

Un sito molto semplice potrebbe avere tutti gli elementi in una sola cartella, ma se prevediamo un minimo di espansione, sarà opportuno avere cartelle separate con più livelli in cascata per tenere ordine nei contenuti. In effetti, seguendo la mappa tracciata prima, dovremmo avere anche i nomi e la posizione delle directory, così da replicare fisicamente sul disco, almeno a grandi linee, i percorsi di navigazione previsti per il sito.

La scelta dei nomi delle cartelle e dei file è importante perché ci deve aiutare a ricordare che cosa ciascuno contiene senza doverlo aprire tutte le volte. Scegliete quindi nomi mnemonici ed esplicativi che ricalchino le etichette che avete adottato per il vostro sistema di navigazione (vedi sempre "Tecniche di progettazione" nella lezione 1). Il nome delle directory e dei file costituisce anche un ausilio al navigatore che li vedrà comparire nella finestra Indirizzo del suo browser subito dopo il nome del dominio a cui il sito è abbinato. Una regola importante nella scelta dei nomi di file e directory è evitare caratteri speciali che possano essere incompatibili con il sistema operativo del server.

Mappa delle directory
Ecco come si traduce sul disco la struttura a directory per realizzare un sito che contenga gli articoli di questo corso per Webmaster. Notate che, trattandosi di un sito statico, abbiamo raggruppato gli articoli in base all'argomento e li abbiamo inseriti in una directory di nome esplicativo. Anche i nomi dei file sono di tipo esplicativo. Non abbiamo seguito la convenzione di scrivere tutto in minuscolo per renderli più facili da capire nell'immagine. Qui la vista strutturate delle cartelle è tratta dalla finestra di esplorazione sito di Dreamweaver MX.

Poiché quest'ultimo può variare, ci conviene adottare un approccio che renda i nostri file compatibili con Windows, Windows NT/2000 e con Unix/Linux. È facile, basta mantenere i nomi brevi ed evitare l'uso di spazi bianchi (sostituiteli con una linea di sottolineatura o con un trattino). Evitiamo anche l'uso di qualsiasi vocale accentata (sia maiuscola sia minuscola) e dei seguenti caratteri speciali: < , ; : > " ' * / \ & ! % ? = # () [] + il punto fermo è ammesso, ma può provocare confusione in Windows perciò usatelo solo come separatore tra il nome e il suffisso obbligatorio e non aggiungete mai più di un suffisso in cascata. Conviene evitare anche l'uso del segno del dollaro ($) e di qualsiasi carattere particolare, mantenendosi in sostanza all'interno delle lettere primarie dell'alfabeto, i numeri, il trattino e la sottolineatura.

Le virgolette doppie (") sono pericolose anche quando usate all'interno del testo perché vengono normalmente utilizzate da HTML e dai linguaggi di scripting per passare i parametri di un comando. Sostituitele sempre con il codice equivalente previsto da HTML (&quot;) e fate altrettanto con i caratteri speciali e le vocali accentate.

Nella definizione dei nomi di file, prestate anche attenzione all'impiego delle maiuscole e delle minuscole, irrilevanti per Windows, ma riconosciute da Unix/Linux. Anche la lunghezza dei nomi è importante. Il DOS è limitato a 8 caratteri di nome e 3 caratteri di suffisso, il Macintosh si ferma a 31 caratteri, Windows dalla versione 95 in avanti consente di usare 255 caratteri e lo stesso vale per Unix. Alcuni consigliano di mantenersi entro i vincoli del DOS, al fine di essere compatibili con tutti, ma ciò finisce per rendere il nome illeggibile. Probabilmente l'approccio migliore è di mantenersi al di sotto dei 31 caratteri e usare ovunque possibile caratteri minuscoli per i nomi dei file e delle directory, in tal modo il sito potrà spostarsi su macchine Windows, Macintosh o Linux senza problemi.

È anche importante rispettare i suffissi che seguono i nomi dei file e che permettono al browser di riconoscerne la natura e di trattarli di conseguenza. I più comuni sono .HTM o .HTML per le pagine in generale. I due sono intercambiabili in Windows, e su gran parte dei server Unix e Linux di recente concezione, a meno che siano stati configurati altrimenti. Macintosh usa in modo nativo il suffisso .HTML per il lavoro in locale perciò consigliamo di usare sempre quest'ultimo, quando possibile. Per le immagini i suffissi riconosciti dai browser sono .JPEG e .JPG) per le fotografie, Graphics Interchange Format (.GIF) per la grafica a 256 colori e Portable Network Graphic (.PNG) per grafica e foto, anche se quest'ultimo è tuttora poco diffuso.

Il nome della home page, cioè della prima pagina del sito, è determinante perché va riconosciuto automaticamente dal particolare sistema operativo presente sul server e inviato al navigatore quando costui digita l'indirizzo del sito senza indicare una pagina in particolare. Il nome di questo file "indice" è index.htm o index.html per i server Unix e Linux, e diventa default.htm o default.asp, nel caso di Internet Information Server di Microsoft, con la possibilità di riconoscere anche index.htm e index.asp (.ASP è il suffisso delle pagine dinamiche realizzate con Active Server Pages). Può assumere anche altri nomi come main.htm, welcome.htm e home.htm a seconda del server impiegato.

L'amministratore di sistema può configurare il server in modo da riconoscere tutti questi tipi, ma è sempre bene verificare e regolarsi di conseguenza. Le altre pagine possono avere un nome a piacere, anche se c'è chi consiglia di creare dei file index.html anche per le home page di secondo e terzo livello. Infatti in server cerca automaticamente tale file ogni volta che digitiamo un indirizzo che finisca con il nome di una directory senza specificare nient'altro, ad esempio www.digifocus.it/prodotti/fotocamere, e nel caso non lo trovi visualizza in alcuni casi una propria pagina indice composta di un elenco dei file e delle cartelle comprese in quella particolare directory.

  < Precedente   Prossimo >

 

Corso - Webmaster
 
  Prima lezione:
  Competenze e strumenti
  Seconda lezione:
  Siti statici e linguaggio HTML
1. Progettare un sito statico
  1. Definire la struttura
  2. Collocare i file grafici e multimediali
  3. Domini reali e virtuali
  4. Cos'è un dominio
  5. Registrare un dominio
  6. Recuperare un dominio perso
  7. Collegamenti assoluti e relativi
2. Progettare la pagina
  1. Modelli di pagina
  2. Impostare gli spazi del "canovaccio"
  3. Tecniche d'impaginazione
3. Pagine HTML e marcatori
4. Sintassi HTML
5. Tag strutturali di pagina
6. Strutturare la pagina: tabelle, frame e form
7. Definizioni di HTML
8. Esercizi
  1. Esploriamo i tag di base
  2. Creiamo una pagina vergine con HTML-Kit
  3. Progettare un sito con Golive 6.0
  4. Riepilogo dei concetti della lezione
  Terza lezione:
 Modelli di pagina e tabelle
  Quarta lezione:
  HTML 4.01 e CSS
  Quinta lezione:
  Design e multimedialità
  Sesta lezione:
  Siti interattivi

 Copyright© PC Open - 2002 - 2003

Credits