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 la pagina

 

1. Modelli di pagina

Introduzione
1: modelli di pagina
2: impostare gli spazi del "canovaccio"
3: tecniche d'impaginazione

La creatività non ha limiti e ci sono diversi approcci possibili. Sul Web si sono consolidati due approcci ricorrenti per la strutturazione delle pagine (per un approfondimento del tema rimandiamo a "Web design arte e scienza" edito da Apogeo).

Il primo modello prende il nome di "schema a tre/quattro pannelli e moduli" e prevede nella parte alta una zona orizzontale che contiene il logo del sito, eventuali banner e l'indicazione di dove ci si trova in quel momento all'interno del sito medesimo.

Il secondo pannello, costituito da una verticale a sinistra, contiene di solito la barra di navigazione e infine il terzo pannello, centrale, ospita il contenuto. Nella pratica la zona di contenuto non viene sfruttata appieno per un limite intrinseco di tutti i browser, e cioè l'impossibilità di stampare ciò che si trova all'estrema destra dello schermo (noi abbiamo misurato empiricamente tale limite a 659 pixel dal bordo sinistro della pagina Web).

Nelle realizzazioni pratiche troviamo perciò modelli a quattro pannelli, con una colonna all'estrema destra della pagina usata per contenuti minori. I pubblicitari la definiscono, in gergo, "area extramercial", perché ospita banner e bottoni secondari, in aggiunta a quelli primari in testa alla pagina. Solitamente la si utilizza anche per elementi di servizio, come la finestra di login, la navigazione locale (link che collegano tra loro varie parti di uno stesso articolo), i bottoni realizzati dal marketing per iniziative promozionali oppure dal content manager per evidenziare altri contenuti del sito.

Modello a tre/quattro pannelli
È il modello più diffuso nel Web e prevede la realizzazione di un modulo o pannello orizzontale superiore (modulo 1) che contiene il logo del sito e alcuni elementi di navigazione globale, un pannello verticale all'estrema sinistra (modulo 2) che contiene la navigazione vera e propria, un pannello centrale (modulo 3) che ospita i contenuti e un pannello verticale all'estrema destra (modulo 4) che contiene rimandi locali oppure bottoni promozionali e che sfrutta l'area non stampabile della pagina.


Clicca per ingrandire

Dove cade la piega
Un altro concetto importante nel progettare una pagina e, in particolare la home page, è la caduta della "piega" o "fold", all'inglese. Si tratta del limite inferiore della porzione visibile della pagina prima di eseguire lo scrolling. La parte alta della home page costituisce la porzione più pregiata del sito, quella che tutti vedranno e che perciò tenderà ad affollarsi di elementi di navigazione, di richiami editoriali e di eventuali contenuti pubblicitari.

Infatti, solo una parte dei navigatori esegue lo scrolling verticale della home page per vedere il contenuto sottostante, dopo la piega (below the fold). Il termine è preso a prestito dal mondo dei quotidiani la cui prima pagina è visibile solo per metà quando è piegata sul banco dell'edicolante, dunque la parte superiore, sopra la piega, contiene sempre gli elementi di richiamo più forti.

A dire il vero, i dettami originali del Web design nsegnavano a realizzare home page abbastanza semplici da poter essere visualizzate per intero senza il bisogno di scrolling e ovunque sia possibile questa rimane la soluzione da preferirsi, specie per i siti più semplici, tuttavia col crescere dei siti e con il fatto che almeno metà dei navigatori non tenta nemmeno di navigare il sito, ma si ferma alla home page, il numero di elementi da enfatizzare in quest'ultima cresce rapidamente, perciò è inevitabile avere home page con uno oppure anche due scrolling e pagine interne che arrivano fino al limite massimo di cinque scrolling.

Per compensare in parte il problema della piega e rendere il più visibile possibile i contenuti interni del sito, alcuni portali hanno inventato un altro modello di pagina, denominato in gergo "LSD" dall'inglese "Logo, Search box and Directory". In pratica fa quel che dice: apre la pagina con il logo e con le informazioni che permettono al navigatore di orientarsi sulla sua posizione attuale e di navigare nelle sezioni principali, prosegue subito sotto con la finestra di ricerca, messa molto in risalto perché costituisce uno degli elementi di navigazione primari per un portale e finisce con la Directory, ossia la classica visualizzazione tabellare degli argomenti che troviamo in Yahoo, Virgilio, Libero e tanti altri. Quest'ultima è l'elemento centrale del modello poiché consente di creare una struttura di navigazione molto ricca, in aggiunta alla barra standard, che offre immediata visibilità di quel che c'è sotto la home page.

Modello "LSD" e "piega" della pagina
Deriva il suo nome dalle iniziali delle parole inglesi Logo Search Directory. Un modello inizialmente reso popolare da Yahoo e adottato da gran parte dei portali per la realizzazione della loro home page. La pagina viene divisa in tre fasce orizzontali, consecutive. La prima contiene il logo del sito e gli eventuali elementi di navigazione globale del sito. La seconda, di solito piccola, contiene la finestra per impostare una ricerca per mezzo del motore di ricerca interno al sito/portale. La terza ha vagamente le sembianze del sommario di una guida telefonica (da cui il nome directory) ed elenca le principali categorie e sottocategorie d'informazioni o servizi offerti. Di solito, a fianco della directory troviamo anche colonne verticali che contengono informazioni, ulteriori elementi di navigazione e bottoni promozionali.


Clicca per ingrandire

Il modello LSD soddisfa anche le raccomandazioni di usabilità di Jakob Nielsen, secondo il quale la home page dovrebbe contenere l'80% d'informazioni di navigazione e solo il 20% di contenuto effettivo, proporzione che si ribalta nelle pagine interne dove il contenuto regna sovrano e gli elementi di navigazione sono meno evidenti (vedi il testo "Web usability" edito da Apogeo).

Sempre secondo le indicazioni di Nielsen, e non solo, il navigatore medio si ferma per 8 secondi su una qualsiasi pagina prima di decidere se approfondire oppure andare altrove, dunque la home page deve offrire a colpo d'occhio ogni possibile strumento per capire cosa ci sia all'interno del sito.

È invece pessima e deprecata la prassi del tunnel, vale a dire la presentazione ai nuovi navigatori di una sequenza di pagine promozionali da attraversare obbligatoriamente prima di arrivare alla home page vera e propria. Altrettanto deprecata, benché meno dannosa, la famigerata splash page, una pagina d'introduzione animata che cerca di spiegare lo scopo del sito e che prevede, solitamente, un pulsante "skip intro" per procedere direttamente alla home page del sito. Entrambe le soluzioni risultano appaganti per il progettista grafico e magari per il marketing, ma sono inutili per il navigatore che esce dal tunnel appena possibile e non si ferma quasi mai per osservare l'animazione della splash page, bensì salta direttamente su altri siti.

Il metodo più pratico per realizzare un sito di medie dimensioni è quello di seguire il modello a tre/quattro pannelli per tutte le pagine, compresa la home page, oppure di adottare il modello LSD per la home page e per le pagine di navigazione primarie (le home page di secondo e terzo livello, nel caso in cui il sito sia molto ampio e profondo), mantenendo i quattro pannelli per tutte le altre.

  < 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