BETA La rivista ipertestuale tecnica
BETA
BETA La rivista ipertestuale tecnicaBarra BETA
Barra Sito Beta.it

BETA 2299.5 - Tecnologie Web: DHTML: Adattiamo il sito alla risoluzione del client  -  Indici | Guida

Clicca qui!

DHTML: Adattiamo il sito alla risoluzione del client

    Spesso, girando su Internet ci si imbatte in siti che vengono visualizzati male: parti non bene incolonnate, elementi mal disposti, grossi spazi vuoti, ecc. In questi casi è probabile che il web designer abbia realizzato il sito con il computer impostato su una certa risoluzione, diversa dalla vostra, senza poi andare a verificare la visualizzazione con altre impostazioni.

Fabrizio Pucci
Collaboratore, BETA2

    Spesso, girando su Internet ci si imbatte in siti che vengono visualizzati male: parti non bene incolonnate, elementi mal disposti, grossi spazi vuoti, ecc. In questi casi è probabile che il web designer abbia realizzato il sito con il computer impostato su una certa risoluzione, diversa dalla vostra, senza poi andare a verificare la visualizzazione con altri settaggi.
Sfruttando alcune funzionalità introdotte con Navigator ed Explorer 4, c'è la possibilità tecnica di realizzare pagine che si vedano in maniera ottimale a tutte le risoluzioni e in questo articolo vedremo di esaminare trucchi e metodologie.
A questo punto però vi potreste chiedere se c'è effettivamente la necessità di occuparsi di questo problema. La risposta è affermativa e di seguito analizzeremo brevemente i motivi.
Qualche tempo fa i monitor più venduti erano i 14" che permettono una visualizzazione a 640 x 480 e 800 x 600 pixel e la quasi totalità dei siti erano impostati per vedersi correttamente a una di queste due risoluzioni.. Attualmente il modello base dei monitor è il 15" (che permette una visione a 1024 x 768, anche se con i caratteri ingranditi) mentre i 17" hanno dei prezzi molto appetibili e una notevole risoluzione massima (1600 x 1200), quindi bisogna fare più attenzione alla realizzazione delle pagine, perché la tipologia di pubblico è diventata più eterogenea e se non si prendono le dovute precauzioni il salto tra 640 x 480 e 1600 x 1200 è troppo grande per sperare che non nascano problemi. E' vero che ci sono alcuni siti in cui nella home page campeggia una scritta che recita più o meno così: "Questo sito è ottimizzato per una risoluzione di 800 x 600" (ad esempio), ma come si fa a costringere il visitatore di una pagina web a cambiare la risoluzione di Windows (e magari anche le dimensioni dei caratteri), tra un sito e l'altro? E' improponibile! Quindi se non avete pensato a questo problema e il vostro sito non si vede granché bene alla risoluzione impostata nel client, molto probabilmente l'utente deciderà di andare da un'altra parte.

Cerchiamo allora di analizzare dove possono sorgere problemi di visualizzazione e trovare delle adeguate soluzioni. In realtà l'HTML per sua natura è stato realizzato con un alto grado di adattabilità, perché essendo un linguaggio di marcatura concepito innanzitutto per distribuire informazioni in rete, ci si può attendere che la natura dell'hardware, dei sistemi operativi e dei browser utilizzati, sarà la più eterogenea. In generale per il testo non ci sono problemi perché si ri-impagina in base alla larghezza della finestra a disposizione. Attenzione invece se state usando i tag <pre></pre> per il testo preformattato, perché questi mantengono il testo così com'è e quindi ad esempio i ritorni a capo sono fissati (il testo non si ri-impagina).
Per quanto riguarda le tabelle, se dimensionate tramite indicazioni sulla percentuale non ci sono problemi:

<table border="1" width="90%">
    <tr>
        <td width="20%">&nbsp;</td>
        <td width="80%">&nbsp;</td>
    </tr>
  ......
</table>

Spesso però per realizzare pagine più complesse e posizionare correttamente tutti gli elementi, è necessario ricorrere a indicazioni sul numero di pixel e in tal caso non utilizzando più una notazione relativa (le percentuali), ma una assoluta (i pixel) bisogna fare i conti la risoluzione impostata.

Un altro punto critico relativo alla risoluzione del client deriva dalle immagini. Facciamo un esempio. Dobbiamo fare un sito per una ditta che vuole mettere una immagine con una intestazione che rimane fissa in alto nello schermo. L'immagine deve essere alta 100 pixel e per la larghezza deve occupare tutta l'area dello schermo. Come procediamo?
Con immagini particolari, come ad esempio quelle che hanno uno sfondo a tinta unita o che sfumano verso un colore, è possibile "barare", mettendo l'immagine centrata in una tabella e scegliendo lo sfondo con lo stesso colore di quello dell'immagine.
Immaginando che l'immagine abbia dimensioni di 500 x 100 e abbia sfondo blu #000080:

<table border="0" width="100%" bgcolor="#000080" cellspacing="0" cellpadding="0">
    <tr>
        <td width="100%" align="center"><img src="
immagine.gif" width="500" height="100"></td>
    </tr>

</table>

In tal modo otterremo una continuità tra l'immagine e lo sfondo della cella che farà sembrare la nostra tabella un'unica barra che copre tutto lo schermo.
Come dicevamo prima però, questo è un trucco che non risolve i problemi, perché in primo luogo siamo tenuti a creare delle immagini con le caratteristiche di mascherabilità di cui sopra e in secondo luogo perché vedendole comunque ad una risoluzione elevata, l'area in cui sono presenti le informazioni (l'immagine) si vedrà comunque molto piccola a discapito di una ampia banda laterale blu.

La soluzione di questo e di altri problemi, è quella di rilevare la risoluzione a cui è impostato il browser e inserire la corretta descrizione della pagina in base alla risoluzione.
Collegamento d'articolo
Parte 1 | Parte 2

Parte 2


Copyright © 1999 Fabrizio Pucci, tutti i diritti sono riservati. Questo Articolo di BETA, insieme alla Rivista, è distribuito secondo i termini e le condizioni della Licenza Pubblica Beta, come specificato nel file LPB.

BETAe-mail info@beta.it
Barra Sito Beta.it
Frontespizio Abbonamenti a BETA Redazione Liste/Forum Informazioni Mirror ufficiali Beta Home Page Beta Home Page english Beta News BETA Rivista Articoli BETA Beta Edit, pubblicazioni Beta Logo, premi Beta Lpb, Licenza Pubblica e Articoli Lpb Beta Navigatore Beta Online Beta Library Beta Info Gruppo Beta BETA La rivista ipertestuale tecnica Collegamento al sito Web