La tecnica "tradizionale"

Se avete mai provato a costruire un sito utilizzando programmi commerciali come Dreamweaver, sapete che la costruzione del sito ed il posizionamento dei blocchi di contenuto (siano essi di grafica o di testo) viene ottenuta attraverso una serie di tabelle.

Queste tabelle vengono "tenute in posizione" da piccole celle riempite con una immagine trasparente, spesso chiamata spacer.gif, che ha il solo compito di "bloccare" le varie parti traloro, ed impedire che i browser tentino di collassare le caselle vuote.

L'esempio classico di una pagina tipo portale sviluppata su tre colonne potrebbe essere qualcosa del tipo seguente:

 Questo potrebbe essere un header del sito ottenuto mediante una tabella

 

Questa è una

colonna laterale

 

 

 

 

Questo è lo spazio del contenuto del sito

Questa è una

colonna laterale

 

 

 

 Questo potrebbe essere il footer del sito ottenuto mediante una tabella

 

Questo tipo di approccio presente numerosi svantaggi:

  • design non "liquido": la pagina non è in grado di adattarsi a media differenti
  • l'informazione non può essere gerarchizzata: la fruizione è sempre e comunque dall'alto verso il basse e questo rappresenta un enorme svantaggio quando il contenuto che è nella parte centrale viene mostrato molto dopo un header privo di informazioni salienti su media come palmari e cellulari
  • difficile modifica della struttura se non a patto di complicare il codice: il rendering del sito da parte di un browser qualsiasi avviene dopo che tutto il codice è stato caricato, quindi l'esempio sopra verrà visualizzato più rapidamente di quello qui sotto:

 Questo potrebbe essere un header del sito ottenuto mediante una tabella

 

Questa è una

colonna laterale

menu 2
menu 1

 

 

 

 

Questo è lo spazio del contenuto del sito

Questa è una

colonna laterale

 

 

 

 

Questo perchè la tabella contenuta all'interno della colonna di sinistra (si chiama tabella nidificata) aggiunge una serie di tag html che devono essere valutati dal browser prima della visualizzazione.

Questo, infine, può rendere il codice molto complicato, al punto di facilitare gli errori in caso di editazione mauale, o, se si supera un certo numero di nidificazioni, di "confondere" il browser e generare effetti indesiderati in fase di output.

La tecnica "moderna"

La tecnica moderna parte dal concetto che l'informazione può apparire in modo diverso a seconda del media, e che prtanto ogni contenuto viene inglobato in una serie di tag <div> il cui piazzamento sulla pagina è regolato dai CSS.

Setto così sembra molto complesso, ma in realtà i CSS (Cascading Style Sheet) meglio noti come "Fogli di Stile" prevedono una validità legata la media.

Possiamo in tale modo assegnare "al volo" posizioni diverse ai nostro componenti sulla pagina a seconda che stiamo guardando la presentazione su uno schermo, su un palmare, se lo stiamo stampando e così via.

No solo possiamo agire sulla forma, intesa come caratteri, sfondi, colori eccetera, ma possiamo determinare esattamente in che ordine e dove compariranno i singoli contenitori al momento della visualizzazione.

Cose come rendere visibili alcune parti o nasconderne altre, ad esempio in fase di stampa, sono facilmente gestite attraverso proprio l'attributo media dei CSS.

 Questo potrebbe essere un header del sito ottenuto mediante una div posizionale

 

Questa è una

colonna laterale

che è un div 

 

 

 

 

Questo è lo spazio del contenuto del sito

ma stavolta è un div

Questa è una

colonna laterale

in un div

 

 

 

I vantaggi di questo approccio sono numerosi:

  • separazione del livello di presentazione dalla struttura del codice
  • forte semplificazione del codice: ogni div è formalmente libero all'interno del codice
  • possiamo decidere quale div deve comparire per primo a seconda del media. Si chiama gerarchizzazione dell'informazione
  • design "liquido" in grado di adattarsi a schermi di tutte le misure
  • possibilità di realizzare menu a tendina interamente "CSS driven"

Riferimenti

Ecco alcuni siti sui quali è possibile approfondire questi concetti:

http://www.javascriptkit.com

http://www.barelyfitz.com/screencast/html-training/css/positioning/

I cookie ci aiutano a migliorare la tua esperienza di navigazione.

Utilizzando il sito, accetti quindi l'utilizzo dei cookie.