Crea il tuo sito web partendo da zero - parte 02 - Composizione della pagina

Questo articolo fa parte di una serie che parla di come creare un sito web partendo da zero. Se non hai letto i precedenti ti invitiamo a farlo.

Alcune cose nel corso del tempo potranno essere aggiornate, modificate o cancellate perché il web è un mondo in continuo mutamento e, ovviamente, potrebbe capitare anche di sistemare qualche erroruccio.

PREREQUISITI e MATERIALE per questa parte:

• aver chiara la parte 01 - Organizzazione del sito
• Tanta creatività e possibilmente gusto
• foglio, penna e matite

Dopo aver riguardato (e modificato se necessario) ciò che si è fatto durante la parte 01 del corso, è ora di tirare fuori la parte artistica che è in noi.

Prendete un foglio e delle matite colorate e cominciate a schizzare la composizione della pagina del vostro futuro sito.

Non vi dovete preoccupare troppo dei colori e delle forme ma la cosa più importante al momento è la posizione di ogni cosa che volete inserire.

Per la parte grafica dei siti non esistono delle norme vere e proprie da rispettare ma vi sono delle regole dettate dal buon senso.

Qui di seguito vi segno i passaggi principali da affrontare e dei consigli per una corretta composizione. (Sono passaggi e consigli personali, qualcuno potrebbe non pensarla allo stesso modo)

• Studiate una grafica semplice e schematica. La grafica deve essere omogenea in tutte le parti del sito oppure navigando all'interno dello stesso l'utente crederà di cambiare portale quando non è così.
• Partite dalla Home Page che di solito è la più difficile.
• Nella parte alta del sito dovrebbe andare l'header, una striscia orizzontale che solitamente è ripetuta sempre uguale in tutte le pagine del sito. E' molto sconsigliato modificarla di pagina in pagina
• All'interno dell'header andrà inserito il logo del sito (meglio se a sinistra), il nome del sito e in alcuni casi anche il motto
• Il menù di navigazione di solito è posto in due posizioni (ma va scelta una delle due, non entrambe):
  • ORIZZONTALE: subito sotto l'header. Questa tipologia spesso è associata al "menù a tendina". Per il vostro primo sito è sconsigliata in quanto non verrà spiegata nelle lezioni future.
  • VERTICALE: una colonna posta di solito a sinistra. Per semplicità di realizzazione consiglio di utilizzare questa tipologia per il vostro primo sito, in quanto è quella che verrà spiegata nelle future lezioni. Questa tipologia è leggermente più semplice da realizzare e solitamente più flessibile in quanto teoricamente si può "allungare" all'infinito.
• Il menù di navigazione principale dovrà essere ripetuto uguale in ogni pagina in modo da creare omogeneità nel sito e anche in modo da permettere agli utenti un orientamento
• In basso sotto tutti i contenuti di solito è presente il così detto footer. Si tratta di una striscia orizzontale in fondo alla pagina che contiene il link al Copyright e ad altre informazioni importanti.
• Potete scegliere se volete creare una colonna anche a destra (in questo caso dovrete anche avere in mente il suo eventuale utilizzo, per esempio: link utili, pubblicità, news, argomenti correlati...)
• La parte centrale del sito comprende i contenuti.

Qui sopra uno schema delle parti principali presenti in una pagina web.

Questi erano consigli che vanno più o meno bene in ogni occasione. Di seguito quelli per relativi al nostro piccolo "progettino".

• Per questo vostro primo sito evitate cose troppo "artistiche" e strampalate, cercate la semplicità.
• Consiglio colori tenui per gli sfondi e colori decisi per le scritte
• Per il momento evitate sfumature e figure tondeggianti, cercate di creare una grafica schematica, creata da rettangoli dentro altri rettangoli che si distinguono solo per il loro colore

Fate più schizzi di prova. Servono solo per avere un'idea di partenza.

Vi dico fin da ora che probabilmente non sarete in grado di realizzare il sito come ve lo state immaginando perché ci vuole un po' di esperienza per creare ciò che si vuole ma non vi preoccupate, l'importante per ora sono i concetti.

Per la prossima parte è necessario che voi abbiate installato sul vostro PC un elaboratore di testi. Il più comodo da utilizzare sarà il semplice blocco note e le spiegazioni faranno riferimento proprio a questo.

Vi servirà anche un browser (cosa che ovviamente già avete altrimenti non stareste leggendo questa pagina). Un browser è il programma che vi occorre per visualizzare un sito internet. In questo momento state leggendo queste parole utilizzando IE Explorer, Modzilla Firefox, Opera o qualcos'altro di similare.

Io sono particolarmente portata ad utilizzare Modzilla Firefox (gratuito e scaricabile da qui) perché "lavora" meglio ma anche gli altri vanno bene.

Vai alla parte 3 - Primo HTML di esempio