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

Parte 2

Fabrizio Pucci
Collaboratore, BETA2



Vediamo un esempio in cui vogliamo inserire in un certo punto della pagina una immagine con una dimensione corretta rispetto alla dimensione dello schermo. Il primo passo quindi è di creare le varie immagini con le dimensioni per cui vogliamo ottimizzare il browser. Immaginiamo di creare quindi tre immagini chiamate "piccola.gif", "media.gif" e "grande.gif" da utilizzare rispettivamente per le risoluzioni 640 x 480, 800 x 600 e 1024 x 768 o superiore.

Per rilevare la risoluzione del monitor il codice è il seguente:

<script language="JavaScript">
var NN4 = (document.layers) ? true : false;
var IE4 = (document.layers) ? false : true;
function Risoluzione ()
{
     if ((NN4) || (IE4))
     {
          RisWidth=screen.width;
          RisHeight=screen.height;
     }
     else
    {
          RisWidth=800;
          RisHeight=600;
    }
}
</script>

Inizialmente controllo la versione dei browser: NN4 varrà true se si sta usando Netscape Communicator 4.0 o superiore, false negli altri casi. Stesso discorso per IE4 che corrisponde a Microsoft Internet Explorer.

Una piccola nota sull'assegnazione

var NN4 = (document.layers) ? true : false;

che magari non tutti conoscono. Essa è una forma contratta che sta per:

if (document.layers=true) {NN4=true} else {NN4=false}

Di seguito assegno alle variabili RisWidth e RisHeight i valori rilevati, mentre per i browser più vecchi che non riconoscono tale oggetto assegno un valore di default, in questo caso 800 x 600.

Vediamo il controllo della risoluzione in azione:

Avendo a disposizione tale controllo possiamo inserire dinamicamente l'immagine della dimensione corretta in mezzo al codice HTML:

<script language="JavaScript">
     if ((NN4) || (IE4))
     {
          if (RisWidth<=640) {document.write('<img src="piccola.gif">')}
              else if (RisWidth<=800) {document.write('<img src="media.gif">')}
                  else if (RisWidth>=1024) {document.write('<img src="grande.gif">')}
     }
     else
    {
          document.write('<img src="grande.gif">');
    }
</script>

Questo procedimento, se applicato alle parti più importanti del sito, come immagini di intestazione, barre di pulsanti, ecc. può permettere con poche righe di codice in più e con un tempo di caricamento praticamente invariato (vengono caricati solo gli elementi per la vostra risoluzione), di ottenere delle pagine più curate e maggiormente fruibili.
Questo non è solo un discorso che riguarda l'estetica, ma anche una migliorata funzionalità.
Nei siti attuali, con un monitor da 17" impostato a 1024 x 768 o 1280 x 1024, risoluzioni normali per questo tipo di monitor, spesso si ha molta difficoltà a leggere i tasti e le barre di navigazione realizzate con immagini, perché queste ultime risultano esageratamente piccole. Tra l'altro in questi casi non c'è veramente nulla da fare per gli utilizzatori di Explorer e Netscape, perché le funzioni presenti per ingrandire e ridurre, agiscono solo sul testo e non sulle immagini. L'unico browser che permette di ingrandire anche le immagini tramite una funzione zoom, è Opera (di Opera software) che rispetto alla dimensione normale del 100% può ridurre fino al 20% o ingrandire fino al 1000%

Un altro possibile esempio di utilizzo della funzione "Risoluzione" vista sopra, è quello delle pagine dinamiche realizzate tramite posizionamento di layer (tramite i tag <div> e <span>) e relativi zindex. In questo caso, dovendo nella maggior parte dei casi lavorare posizionando le varie parti tramite indicazioni di pixel, succede che vedendo la pagina ad una risoluzione maggiore ci saranno un bordo a destra (e a volte uno in basso) vuoti! Per ovviare all'inconveniente si può, ad ogni posizionamento assoluto, aggiungere una variabile "spostamento" che sarà assegnata all'inizio del codice in base alla risoluzione impostata.

L'ultima possibilità che prendiamo in esame, per non avere sorprese con il posizionamento assoluto di elementi, è quella di fare eseguire il codice in una finestra con dimensioni fissate, tramite il metodo open dell'oggetto window. "esempio.html" (rinominato in 2299fp1.htm per esigenze di impaginazione) è il file che viene caricato all'interno della finestra che apriamo, mentre "esempio" è il titolo che compare nella barra in alto, esattamente come farebbe il corrispondente tag HTML <title></title>

<script language="JavaScript">
function ApriFinestra ()

{

window.open ('2299fp1.htm','esempio','width=700,height=500,directories=no,location=no,
menubar=no,resizable=no,scrollbars=no,status=no,titlebar=no,toolbar=no');

}
</script>

Nell'esempio sono state escluse nella visualizzazione tutte le varie toolbar, tramite l'assegnamento del valore 'no'. Per farle visualizzare basta mettere 'yes' in quelle che si vogliono mostrare a video.
L'utilizzo di questo metodo, a causa dei suoi limiti intrinseci, viene usato in applicazioni molto particolari come giochi in DHTML, help e banner pubblicitari.


Parte 1
Parte 2


Articoli correlati
BETA 2099.3 - HTML Dinamico di Fabrizio Pucci
Altri Articoli del sommario...
Altri Articoli sullo stesso argomento...
Siti Web
Elenco di siti consigliati da BETA...


Fabrizio Pucci è Collaboratore di BETA2 dal 1999; è raggiungibile su Internet tramite la redazione.

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