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

 

3. Tecniche d'impaginazione

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

Il Web non prevede strumenti per l'impaginazione grafica di elementi sulla pagina. Nato in origine per visualizzare semplici testi chilometrici, con occasionali immagini annegate nei testi medesimi, l'HTML non fornisce marcatori per disporre gli oggetti nella posizione che vogliamo e con le proporzioni desiderate. La soluzione elaborata dai progettisti è stata di ricorrere alle tabelle, nate in origine come strumento per la visualizzazione tabulare di dati e trasformatesi nel principale mezzo d'impaginazione del Web. Ogni elemento viene inserito all'intero della cella di una tabella invisibile e combinando celle e righe contigue si arriva alla costruzione completa della pagina. Il codice che ne risulta è abbastanza complesso e richiede una certa esperienza, ma funziona nella gran parte dei browser.

L'alternativa più rozza e impiegata solo nei primissimi tempi del Web, quando le tabelle ancora non esistevano, consisteva nel creare una grande immagine che contenesse informazioni cliccabili che poi rimandavano a pagine interne di testo. Tecnicamente questo genere di immagini prende il nome di imagemap oppure mappe di immagini e vengono ancora utilizzate in alcuni contesti particolari, ma comportano lentezza nel caricamento (date le dimensioni del file grafico) e complicazione nell'aggiornamento dei contenuti.

In alternativa, nel tempo, si sono sviluppati altri tre strumenti d'impaginazione. Il più semplice e grossolano prende il nome di frame e consente di suddividere la finestra a video in tante finestre più piccole, ciascuna contenenti una pagina indipendente. Suddividendo i contenuti nelle diverse pagine e regolando le dimensioni dei frame, possiamo produrre un'impaginazione approssimativa, ma funzionale. Vedremo più avanti quali sono i vantaggi e gli svantaggi dei frame.

Un altro strumento, sicuramente indicato per il futuro, ma ancora poco supportato dai vari browser, sono i fogli di stile (CSS), mediante i quali è possibile posizionare gli elementi sulla pagina indicandone le coordinate. I fogli di stile fanno anche parte del cosiddetto DHMTL (Dynamic HTML) che consente di aggiungere animazioni e interazione nella pagina senza l'impiego di oggetti grafici. Una variante rispetto ai CSS sono i livelli (layer) di Netscape che tuttavia stanno cadendo in disuso con il ridimensionarsi della diffusione di tale browser.


Chiude l'elenco l'impaginazione grafica realizzata mediante strumenti particolari come Flash. In tal caso usciamo completamente dal dominio dell'HTML e generiamo pagine che possono essere visualizzate solo mediante l'impiego di speciali plug-in (moduli aggiuntivi) nel browser del navigatore. Il plug-in di Flash viene ormai fornito già in partenza con Internet Explorer di Microsoft ed è abbastanza diffuso nella Rete, tuttavia si consiglia di avere sempre una versione alternativa delle pagine (solo testo) per consentire l'accesso anche a chi Flash non c'è l'ha oppure non lo può utilizzare perché magari cieco e costretto a far riferimento a un browser che "legga" i contenuti attingendo direttamente dalla codifica HTML.


Usabilità e accesso
I siti moderni, soprattutto quelli realizzati per la Pubblica Amministrazione richiedono, anche in Italia, l'osservanza di alcune regole che modificano il modo d'impostare i contenuti sulla pagina e i sistemi d'impaginazione possibili. Si tratta di regole di usabilità, per riprodurre un ambiente che sia familiare al navigatore e che gli consenta di usare il sito immediatamente senza dovere imparare a usarlo, e regole di accessibilità che consentano di capire i contenuti anche a chi, per vali motivi, non può utilizzare un browser convenzionale. L'usabilità si centra in buona sostanza sulla ripetizione di modelli che si sono dimostrati vincenti sul Web e limita l'originalità del sito.

Il classico esempio di usabilità è l'automobile: quando salite al posto di guida, il volante e i pedali dell'acceleratore, della frizione e del freno sono sempre nella stessa posizione, qualunque modello scegliate. I pochi modelli che sono "originali" alla fine vengono usati poco. L'accessibilità di traduce invece nel fornire alternative testuali a qualsiasi cosa che non sia decifrabile se non guardandola su un monitor: tipicamente immagini e tabelle. Inserendo una nota di commento per ciascuna immagine e un sunto per ogni tabella, entrambi previsti dai rispettivi tag HTML, chi "legge" la pagina attraverso un sistema di sintesi vocale anziché guardarla a video, può capire di cosa si sta parlando.

Ciò impone maggiore lavoro su chi produce contenuti, ma allarga il pubblico potenziale non solo ai portatori di handicap, ma anche a chi consulta un sito via telefono (attraverso sintetizzatore vocale) oppure dal browser vocale montato sull’autoradio (uno scenario poi non tanto futuribile).

  < 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