*Linux Guide

Fare Web - Progetto e Realizzazione - Parte 2

*

Il Progetto

Giunti siamo, finalmente, a produrre il progetto del nostro sito. Partiremo quindi dall'architettura del medesimo.
Un sito web ha una struttura ed una organizzazione tale per cui da una pagina di ingresso, si accede alle pagine interne. Nel gergo della rete si dice che la pagina di ingresso è la "Home" che può essere una pagina completa vera e propria, o una pagina di presentazione (Splash Page) dove in genere c'è un solo collegamento alla seconda pagina. Diciamo che si tratta di un atrio dal quale si accede al salone!
In linea di principio se il sito ha un numero inferiore o pari a 10 pagine, è possibile prevedere un accesso diretto ad ognuna di esse a partire dalla Home Page. Se invece il sito ha più di 10 pagine, si predilige raggrupparle in macro sezioni in modo che dalla Home si giunga alla pagina della macro sezione e da qui alle singole pagine che ne fanno parte.
Quando il sito raggiunge centinaia di pagine, le macrosezioni divengono decine a loro volta dirette a sezioni e da qui alle singole pagine.
Entra nuovamente in gioco la carta e la penna. Sulla base del numero di pagine che si presume di voler inserire nel sito, si produrrà un disegno come quello raffigurato a fianco, ricordando che se il sito ha molte pagine è bene raggrupparle in macrosezioni.

Struttura piramidale del sito di esempio

A questo punto per rendere meno teorica la spiegazione, supponiamo di creare un sito dal nome "Samp-Site" e progettiamo una piramide organizzativa come rappresentata in figura.
La home, in cima alla piramide, si chiama per forza "index.htm" (ma anche 'index.html' va bene), non c'è alternativa in quanto una volta che il browser invia la richiesta, deve trovare una pagina d'ingresso che poi sarebbe un indice, 'index.htm', appunto. Le altre pagine hanno nomi scelti in funzione dei contenuti e l'importante è che abbiano estensione '.htm'.

Stabilito numero e nome delle pagine che comporranno il sito SampSite, è necessario disegnare il loro aspetto coerente, ovvero quell'aspetto grafico che avranno tutte le pagine e qui entra in gioco la logica, sebbene non vi siano regole ferree al riguardo. La pagina comunque deve avere un titolo generale relativo al sito e che si colloca generalmente in alto. Sarebbe bene affiancare a questo titolo un logo anche molto semplice dove ci sia riferimento al nome del sito.
Dopo titolo e logo, la pagina dovrebbe mostrare la barra del menu principale.
Nel nostro caso la porremo appena sotto la testa in quanto si tratta della seconda area che il visitatore consulterà e gli offriremo subito i comandi per una adeguata visita nel sito. Molti altri designer preferiscono inserire il menu in una colonna, destra o sinistra (ma anche centrale non sarebbe una idea malvagia, ma in questo caso si dovrebbe evidenziare il menu in modo inequivocabile). Tuttavia occorre tenere presente che il menu posto in una colonna, si dispone verticalmente allungando la pagina in caso di disabilitazione degli stili, ma ne parleremo successivamente.

aspetto preliminare della pagina

Quindi inseriremo la barra del menu principale in un area sotto la testata ricordando che il menu non va mai posto nella parte bassa della pagina, a meno che questa stia tutta nella schermata a qualsiasi risoluzione dello schermo, e che nel menu devono comparire tutti i collegamenti alle pagine del sito o, nel caso che ci siano decine di pagine, a quelle che fungono da macrosezioni.
Ad ogni modo è fondamentale inserire nel menu un richiamo alla pagina principale per garantire all'utente di poter ricominciare la visita dall'inizio.

Aspetto preliminare della pagina

Dopo il menu sarebbe importante inserire l'area dei contenuti veri e propri dove inserire testo, immagini, collegamenti ed altro. Eventualmente produrremo una colonna laterale dove inserire moduli di autenticazione, banner pubblicitari, menu collaterali, piccoli bottoni di collegamento ed altro. Da un punto di vista prettamente legato all'Accessibilità, sarebbe importante produrre una colonna che nell'ambito del codice segua l'area principale dei contenuti in modo che la consultazione senza Fogli di stile prediliga dapprima la lettura del contenuto primario e solo successivamente la consultazione del contenuto accessorio o secondario.
Come ultima istanza, produrremo il pie di pagina, quell'area di chiusura che contiene informazioni su copyright, sul webmaster del sito e poco altro ancora.

Aspetto definitivo della pagina

Al termine dovremmo avere una struttura simile a quella rappresentata nella figura qui sopra. Naturalmente si potrà decidere di mettere la colonna di destra a sinistra, o inserire due aree principali, o produrre due colonne di uguali misure, o inserire una terza colonna od effettuare altre scelte che non si è obbligati ad effettuare subito, ma partire con una struttura già in buona parte stabilita, aiuta nella realizzazione dell'intero progetto.

Quello che abbiamo illustrato sopra si potrebbe definire come la struttura/scheletro della pagina matrice del sito. Questa struttura/scheletro va quindi rivestita di elementi e soluzioni grafiche in base ai propri gusti ed agli obiettivi che il sito vuole raggiungere. Ci sono essenzialmente tre modi per vestire la struttura/scheletro di una pagina web :

  1. con CSS e Colori
  2. con CSS e Immagini
  3. con Oggetti

Il primo metodo sfrutta essenzialmente gli abbinamenti di colori tramite la potenza dei CSS o Fogli di Stile. Questa metodica è impalpabile e si affida alle capacità del browser di restituire all'utente l'immagine in modo corretto e completo. Diciamo che questa metodica può essere vista come se la struttura/scheletro della pagina fosse ricoperta di effetti olografici leggerissimi, fittizi e senza struttura.
Il secondo metodo si fonda sul rivestimento della struttura/scheletro con delle immagini che hanno una loro consistenza ed un loro peso. E' un pò come se la facciata di una casa fosse rivestita con manifesti di vario genere. Questi manifesti hanno un loro peso ed un loro ingombro strutturale.
Il terzo metodo consiste nel dar vita propria all'intera struttura che è scheletro e rivestimento al tempo stesso. E' possibile paragonare questo metodo all'esoscheletro degli insetti che funge da impalcatura e struttura comunicativa al tempo stesso.
Il quarto metodo, non dichiarato in precedenza, consiste nell'assemblaggio delle tre metodiche.
In ogni caso occorre ricordare che una struttura/scheletro rivestita con il primo metodo è leggerissima, di facile gestione, rapida nel caricarsi e facilmente modificabile e adattabile. I difetti sono legati alla restrizione della fantasia per cui si possono realizzare siti dal fascino grafico limitato. Non va poi dimenticato che se queste pagine vengono visualizzate con browser vecchi che non supportano adeguatamente i CSS (internet explorer 4, Netscape 3 e 4, iCab), potranno essere rese in modo scomposto.
La pagina rivestita con immagini è afflitta da problemi di ingombro e dal fatto che le immagini possono essere modificate con difficoltà, ma permettono al designer di far volare la fantasia grafica. Ci sono siti bellissimi che fanno dell'uso delle immagini un patrimonio artistico.
La pagina/struttura realizzata con files .swf è una soluzione oggi molto impiegata, spesso impropriamente o non completamente, per via della sua multimedialità e interattività irraggiungibile con il semplice xhtml/CSS. E' una metodica troppo dipendente da presidi e strumenti non totalmente supportati che si chiamano "plug-in" o inserti. Non dobbiamo poi dimenticare che i files .swf per via della loro complessità, hanno un peso gigantesco e intollerabile per connessioni lente.
In questa opera illustreremo come ottenere pagine con struttura grafica fondata sul primo e sul secondo metodo.

<< Precedente | Indice | Successiva >>

[ 1 ] Pagina Splash si o no?
Molti siti presentano pagine di presentazione il più della volte basate su oggetti, filmati ed altre amenità grafiche a volte inutili. Servono a presentare il sito, ma spesso servono per mostrare le capacità dell'autore di gestire un programma complesso come Flash di macromedia.
Se si vuole impiegare una pagina di presentazione deve essere una pagina leggerissima che si carichi in un batter d'occhio, altrimenti serve solo a spazientire l'utente che vede la prospettiva di dover attendere ancora per vedere la pagina più interessante, quella successiva.

[ 2 ] Estensione
Per estensione si intende quel frammento di nome di file che ne identifica la natura e il tipo. Nel nostro caso si tratta di un file di tipo ipertestuale (htm sta per 'hyper text markup')

Linux Guide | Torna in alto