Lo script che vi presentiamo in questa occasione è un'altra trovata di John Weir, il web designer autore dei già visti Clippings: i Preferiti per il tuo sito. L'SG Layout (probabilmente SmokingGun Layout) è un JavaScript che agisce sulla presentazione dei contenuti della vostra pagina. Vi permette di:
- Dividere i contenuti in colonne
- Aumentare o diminuire le dimensioni del carattere
- Cambiare pagina senza dover attenderne il caricamento (la pagina viene interamente caricata alla prima richiesta)
- Inserire delle immagini a corredo dell'articolo
Come i clippings, l'SG Layout fa uso di DOM, JavaScript, CSS e non è compatibile con vecchie versioni dei browser. Anche le ultime versioni di Opera non sono in grado di leggere i parametri dello script. In più questo script è ancora in versione beta, ciò significa che alcune funzioni previste non sono state completate e che in alcuni casi lo script potrebbe presentare difficoltà di visualizzazione. Il problema più importante che abbiamo rilevato è forse l'impossibilità di visualizzare il contenuto scelto ad una sola colonna. Ne vanno scelte al minimo due.
Lo script è rilasciato sotto licenza GPL (open source). Potete modificarlo, utilizzarlo e distribuirlo liberamente avendo l'unico accorgimento di mantenere il copyright inalterato.
Per utilizzare lo script, che potete scaricare dall'icona download in alto nella pagina, avete bisogno dei due file JavaScript da integrare all'interno della pagina Web, di un po' di codice CSS e di una formattazione oculata del contenuto della vostra pagina. Se volete subito visualizzare il codice della pagina d'esempio saltando alla fine di questo articolo.
I file JavaScript
I due file JavaScript vanno inseriti, se possibile, all'interno dei tag <head> </head> della vostra pagina. È assolutamente necessario che il file sg_layout_ini.js venga richiamato prima del file sg_layout.js. Il primo infatti contiene i parametri di inizializzazione del secondo. Invertendo l'ordine il JavaScript non funzionerà più.
Scaricate i due file .js esterni e tra i tag HEAD della pagina inserite:
<script type="text/javascript" src="sg_layout_ini.js"></script>
<script type="text/javascript" src="sg_layout.js"></script>
Vediamo di modificare alcuni parametri. Le personalizzazioni, in questo caso, interessano solamente il primo dei due file, quello di inizializzazione (sg_layout_ini.js). Vediamolo in una struttura ordinata e senza commenti dell'autore (che troverete nel file originale da scaricare). Sotto ogni riga di codice abbiamo aggiunto la descrizione dell'azione della variabile:
var ART_HEIGHT_MIN = 100;
var ART_HEIGHT_MAX = 0;
Questi primi due parametri non sono stati utilizzati all'interno dello script e possono dunque essere anche cancellati
var NAVIGATION_AREA = 180;
Lo spazio dell'area che l'articolo lascerà vuota nella parte bassa dello schermo (in pixel)
var LINE_HEIGHT_MOD = .2;
La distanza fra le righe (interlinea): maggiore sarà questo valore maggiore sarà la distanza fra le varie righe (in punti) e dunque più lunghe le colonne. L'autore consiglia di mantenerlo a .2
var MAX_LINE_HEIGHT = .5;
Valore massimo dell'interlinea, utilizzato per prevenire errori di visualizzazione
var CONTENTS = "pageContents";
Il nome dell'elemento che conterrà, nella pagina HTML, l'articolo
var viewER = "textParent";
Il nome dell'elemento che si occuperà, nella pagina HTML, di visualizzare l'articolo suddiviso a colonne
var IMG_viewER = "imageviewer";
Il nome dell'elemento che si occuperà, nella pagina HTML, di visualizzare le immagini a corredo dell'articolo
var IMG_INLINE = false;
Se al posto di false si indica true le immagini vengono inserite all'interno dell'articolo e non a lato. La funzione non è stata ancora perfezionata e si consiglia di mantenerla su false
var COLUMN_NUM = 2;
Il numero di colonne in cui dovrà essere diviso l'articolo. Non è possibile impostarlo ad 1
var font_size = 15;
La grandezza base del carattere (pixel)
var font_size_MAX = 26;
La dimensione massima del carattere ottenibile dal ridimensionamento eseguito sulla pagina
var font_size_MIN = 9;
La dimensione minima del carattere ottenibile dal ridimensionamento eseguito sulla pagina
Includere i CSS
Dopo aver inserito i due script bisognerà utilizzare alcuni fogli di stile per visualizzare il contenuto dell'articolo. Senza fogli di stile l'articolo verrebbe visualizzato in modo normale, senza la divisione in colonne.
I CSS da utilizzare agiscono su tre elementi della pagina (colonne, articolo e immagini) e sono suddivisi in due selettori di classe per la formattazione delle colonne (.stText p e .stText) e tre selettori di ID per la formattazione dell'articolo e delle immagini (#textParent, #imageviewer e #imageviewer DIV).
Modificando questi CSS si potrà dare alla pagina la visualizzazione che si desidera. Vediamo in dettaglio i CSS originali che compaiono sul sito dell'autore, partendo dai selettori di classe:
.stText p {padding:0px; margin:0px}
.stText {
position:absolute;
margin-right:14px;
width:250px;
top:0px;
left:0px;
padding-right:5px;
}
La prima riga deve rimanere invariata, mentre la seconda istruisce al browser di visualizzare le colonne con una posizione assoluta (indipendente dagli altri elementi - Per approfondimenti si rimanda alla Guida ai CSS), mantenedo a destra 14 pixel di distanza, ipostando la larghezza della colonna a 250 pixel, e mantenendo uno spazio di 5 pixel per il lato destro. Per modificare la visualizzazione delle colonne si può agire su questo CSS.
Il primo dei selettori di ID si occupa invece di indicare dove e come posizionare la zona dell'articolo vero e proprio:
#textParent {
left:60px;
top:45px;
overflow:hidden;
width:100%;
margin-left:0px;
z-index:1;
position:absolute;
}
Anche in questo caso viene utilizzato un posizionamento assoluto (che qui può essere eliminato o sostituito con uno relativo). Da notare le proprietà essenziali per il posizionamento: z-index:1 indica che l'articolo deve essere il primo elemento visibile se un altro si sovrappone; mentre overflow:hidden nasconde tutta la parte testuale che non rientra all'interno dell'area delle colonne. Quest'ultimo è un paramero fondamentale in quanto si occupa di nascondere il testo già caricato dal browser ma che non rientra nel layout definito dai fogli di stile. Provate a modificarlo in overflow:auto e vedrete cosa significa.
Gli altri due selettori prendono in gestione le immagini e ne definiscono la visualizzazione all'interno dell'articolo. Anche qui la posizione è assoluta (le immagini vengono spostate 570 pixel a destra del margine del browser).
#imageviewer {
position:absolute;
overflow:auto;
width:100%;
top:45px;
left:570px
}
#imageviewer DIV {
margin:10px;
}
La formattazione dell'articolo
Arrivati a questo punto abbiamo: inserito i due JavaScript che ci permettono di gestire le funzioni, costruito i CSS che si occupano di formattare il layout della pagina, ora non ci rimane altro da fare che inserire l'articolo all'interno della pagina preoccupandoci di legarlo alle proprietà dei CSS. Vi riporto il codice così come dovrà essere formattato a partire dal tag <body>. Potete naturalmente modificare i parametri che desiderate:
<body id="bodyNode">
Eventuale altro contenuto
<!-- strumenti per la manipolazione dell'articolo -->
Pagina <b id="P"></b>
Dimensione del carattere <a href="javascript:st_fontLarger()"><b>+</b></a> <a
href="javascript:st_fontSmaller()"><b>-</b></a>
<a href="javascript:st_screenPrevious()" id="pageprevious">precedente</a> | <a
href="javascript:st_screenNext()" id="pagenext">successiva</a>
<!-- strumenti per la manipolazione dell'articolo -->
<!-- articolo -->
<div id="pageContents">
<div>
<p>Primo paragrafo</p>
<p>Secondo paragrafo</p>
<p><img src="img_1.gif" custom="Prima Immagine"><b>Prima Immagine</b>Terzo paragrafo
con immagine</p>
<p>...</p>
</div>
</div>
<!-- articolo -->
<!-- visualizzazione degli elementi -->
<div id="textParent"></div>
<div id="imageviewer"></div>
<!-- visualizzazione degli elementi -->
Eventuale altro contenuto
</body>
Il testo andrà formattato per paragrafi. Ciò significa che ogni pezzo di articolo (unità testuale) che verrà incolonnata dovrà essere racchiusa all'interno dei tag <p> </p>. Più brevi saranno le unità testuali, migliore sarà la resa visiva dell'articolo. Le immagini verrano poste a destra dell'articolo stesso in una posizione definita dal selettore di ID #imageviewer visto in precedenza. Sotto l'immagine verrà visualizzato una nota specificata nella proprietà custom="***" del tag IMG.
Nella pagina successiva vi mostreremo il codice di un articolo formattato da noi per prova con alcune modifiche al codice commentato in questo articolo. Gli strumenti per la manipolazione dell'articolo sono stati inseriti in una tabella come spiegato nell'articolo Rollover di navigazione con i CSS.
Il codice completo
Qui sotto vi mostriamo il codice completo del file di esempio utilizzato in questo articolo. Comparando questo codice con quello commentato nelle pagine precedenti potrete arrivare a mettere a punto il layout dei vostri articoli in modo efficace e utile per i navigatori. Da notare che da questo codice sono state eliminate le proprietà per la visualizzazione delle immagini (sia dai fogli di stile sia dalla formattazione della pagina con l'articolo).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Esempio Javascript Layout</title>
<script type="text/javascript" src="sg_layout_ini.js"></script>
<script type="text/javascript" src="sg_layout.js"></script>
<style type="text/css" id="stStyle">
<!--
/* THIS MUST BE THE FIRST STYLE */
.stText p {padding:0px; margin:0px}
.stText {
position:absolute;
margin-right:14px;
width:350px;
top:0px;
left:0px;
padding-right:5px;
}
#textParent {
overflow:hidden;
margin-left:25px;
position:relative;
}
.bordotab {
margin-left:25px;
color: #000000;
background-color: #FFFFCC;
border-top-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-left-color: #000000;
}
.classetd {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #FFFFCC;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
}
.classetd a {
position: relative;
text-decoration: none;
}
.classetd a:hover {
color: #CC0000;
background-color: #CCFFFF;
text-decoration: none;
}
-->
</style>
</head>
<body style="font-family: Arial" id="bodyNode">
<div id="content">
<table width="700" border="0" cellpadding="1" cellspacing="0" class="bordotab">
<tr>
<td class="classetd" align="center" style="background-color: #CCCCCC">
Pagina <b id="P"></strong>
</td>
<td class="classetd" align="center">
Carattere: <a href="javascript:st_fontLarger()"><strong>+</strong></a> <a href="javascript:st_fontSmaller()"><strong>-</strong></a>
</td>
<td class="classetd" align="center">
Pagina: <a href="javascript:st_screenPrevious()" id="pageprevious">Precedente</a> | <a href="javascript:st_screenNext()" id="pagenext">Successiva</a>
</td>
</tr>
<tr>
<td colspan="3" class="classetd">
<h3>Net Semiology: comunicare bene in Internet </h3>
</td>
</tr>
</table>
<br/>
<div id="pageContents">
<div>
<p> Paragrafo 1 </p>
<p> Paragrafo 2 </p>
<p> Paragrafo 3 </p>
<p> Paragrafo 4 </p>
</div>
</div>
<div id="textParent"></div>
<div id="imageviewer"></div>
<div style="margin-top:15px">
<table width="700" border="0" cellpadding="1" cellspacing="0" class="bordotab">
<tr>
<td class="classetd" >
<span style="color:#Ba1b2a"><strong>!</strong></span>Per cambiare pagina potete cliccare con il mouse sopra una delle due colonne (un effetto di rollover colorerà la scritta "Precedente" o "Successiva" nella tabella di navigazione in alto).
</td>
</tr>
<tr>
<td class="classetd" align="center" style="background-color: #CCCCCC">
<div align="center" style="font-family: verdana; font-size: 14px;"><a href="javascript:window.close()"><strong>Chiudi questa finestra</strong></a></div>
</td>
</tr>
</table>
</div>
</body>
</html>
Questo JavaScript è stato utilizzato per la prima volta nella visualizzazione degli articoli dell'International Herald Tribune. Il sito originale dell'autore è http://www.smokinggun.com.
