Fin dalla loro comparsa, circa un anno fa, le chromeless hanno riscosso immediatamente un successo strepitoso e, probabilmente, un riscontro così positivo non se l'aspettava neanche Gabriel Suchowolski, l'arteficie di questa novità nel mondo del web publishing.
In poco tempo il codice si è diffuso a macchia d'olio soprattutto tra siti che utilizzavano animazioni in flash; l'aspetto delle chromeless ben si adatta ad una grafica "tecnologica" e "accattivante" realizzabile solo con il prodotto della Macromedia.
Queste pop up, infatti, sono speciali perchè esteticamente "fuori dal comune" e personalmente credo che il risultato migliore si raggiunga inserendole in siti (sia in flash che in html) con un layout quanto meno originale; al contrario si rischia di ottenere un effetto di "stonatura" rispetto al resto delle pagine.
Tralasciando la navigabilità del sito, provate a visitare Chromeless.org [1] per capire cosa intendo; successivamente immaginate la stessa finestra su portali come Virgilio.it oppure Tiscalinet.it. Ovviamente la mia è solo un'opinione personale e nulla più.
Ma cosa sono, precisamente, le chromeless?
Pop up chromeless può essere tradotto come finestra senza bordo. È questa la caratteristica principale che le rende uniche nel loro genere: visualizzare il contenuto di una normale pagina html in una finestra priva del classico bordo superiore di colore blu.
Il codice utilizzato è molto complesso ed ha lo scopo di ottenere lo stesso effetto del classico fullscreen ma in versione "ridotta" (dentro una pop up appunto).
Prima di vedere il codice nel dettaglio analizziamo la compatibilità con i browser più diffusi e le caratteristiche salienti dello script.
- Explorer: le chromeless sono state sviluppate appositamente per questo browser con cui si raggiunge la piena compatibilità. Le pop up verranno aperte senza bordi e a centro schermo a qualsiasi risoluzione.
- Netscape 4.x e Netscape 6.01: la compatibilità non è totale ma il codice viene interpretato comunque; non verranno aperte delle chromeless ma delle pop up standard in alto a sinistra nello schermo.
- Opera: dà qualche problema nella velocità di esecuzione dello script; come per i navigatori di casa Netscape avremo delle semplici pop up e non delle chromeless vere e proprie; i tempi di attesa per l'apertura sono notevoli (Opera ha bisogno di molte risorse per "leggere" tutto lo script) e in alcuni casi, soprattutto se la pagina è pesante in termini di Kb, si rischia di bloccare il browser dell'utente.
- K-meleon: visto che ne avevo la possibilità ho provato le chromeless anche su uno degli ultimi navigatori usciti sul mercato. Per il fatto stesso di avere il "cuore" di Mozilla (lo stesso di Netscape 6.01) si comporta esattamente come il "cugino" più famoso: apre delle pop up standard in alto a sinistra nello schermo (da notare però che lo stesso K-meleon è leggermente più veloce, nell'interpretazione del codice, rispetto a NN 6.01).
Queste la caratteristiche principali delle chromeless. Come potete notare non avremo grossi problemi di compatibilità anche se dovremo arrenderci al compresso tra i vari browser; vi metto in guardia solo su una cosa: il codice scritto da Gabriel Suchowolski, proprio perchè molto complesso, non è dei più leggeri; per questo motivo cerchiamo di non abusarne in ogni pagina dato che si corre il rischio di rallentare enormemente il caricamento del sito.
Le considerazioni sulla velocità le farete comunque a voi a lavoro terminato…
N.B.
Il codice che analizzeremo adesso deriva direttamente da quello originale scritto dall'autore; mi sono permesso solamente di fare una piccola modifica allo script per poter utilizzare più chromeless nello stesso documento con un'unica funzione (cosa che originariamente non era prevista); in pratica passeremo i parametri di personalizzazione della finestra direttamente dal link nella pagina.
Lo script è formato principalmente da due porzioni di codice che, per comodità, verranno inclusi in file esterni .js (in questo modo il sorgente delle pagine sarà più ordinato).
Il primo file l'ho chiamato codicecrome.js. Contiene la parte più complessa del codice e, fortunatamente per noi, non va personalizzato. Potete scaricarlo direttamente da qui [2].
Il secondo javascript, invece, l'ho nominato come cromeless.js. Vediamo in dettaglio com'è strutturato:
function saibcrom (titolo_finestra, urlPop, lungX, altY) {
title=titolo_finestra;
W=lungX;
H=altY;
windowCERRARa = "img/close_a.gif"
windowCERRARd = "img/close_d.gif"
windowCERRARo = "img/close_o.gif"
windowNONEgrf = "img/none.gif"
windowCLOCK = "img/clock.gif"
windowREALtit = title
windowTIT = "<font face=verdana size=1> "+ title +"</font>"
windowBORDERCOLOR = "#ff0000"
windowBORDERCOLORsel = "#c6c6c6"
windowTITBGCOLOR = "#c6c6c6"
windowTITBGCOLORsel = "#ff0000"
openchromeless(urlPop, title, W, H, windowCERRARa, windowCERRARd, windowCERRARo, windowNONEgrf, windowCLOCK, windowTIT, windowREALtit , windowBORDERCOLOR, windowBORDERCOLORsel, windowTITBGCOLOR, windowTITBGCOLORsel)
}
La funzione saibcrom contiene i parametri che verranno passati dai link presenti nella pagina; ogni collegamento che aprirà una chromeless, quindi, conterrà: il titolo della finestra, l'url della finestra da aprire, le misure che tale finestra dovrà avere.
Le righe di codice:
windowCERRARa = "img/close_a.gif"
windowCERRARd = "img/close_d.gif"
windowCERRARo = "img/close_o.gif"
windowNONEgrf = "img/none.gif"
windowCLOCK = "img/clock.gif"
fanno riferimento alle immagini presenti sul bordo superiore delle chromeless. Le immagini standard sono comprese nel file zip che avete scaricato prima. Si trovano nella cartella img che dovrà essere uploadata insieme agli altri file ma volendo potete cambiare tranquillamente il percorso delle gif.
La stringa sottostante:
windowTIT = "<font face=verdana size=1> "+ title +"<font>"
riguarda il titolo che avranno le chromeless; possiamo modificare sia il tipo che la grandezza del font.
I colori della barra superiore, invece, possono essere modificati agendo su questi quattro parametri:
windowBORDERCOLOR = "#ff0000"
windowBORDERCOLORsel = "#c6c6c6"
windowTITBGCOLOR = "#c6c6c6"
windowTITBGCOLORsel = "#ff0000"
i valori esadecimali indicano rispettivamente: il colore del bordo, il colore del bordo quando selezionato, il colore della barra del titolo, il colore della barra del titolo quando selezionata.
Vediamo come costruire un esempio pratico per aprire una chromeless. Avremo bisogno di due documenti: una index.htm (che "lancerà" lo script) e una pagina chiamata pop.htm (che sarà appunto la nostra chromeless).
La index contiene i richiami ai due file .js esterni e il link che richiama la funzione saibcrom. Vediamo nel dettaglio il codice:
<html>
<head>
<title>Index</title>
<SCRIPT language="JavaScript" SRC="cromeless.js"></SCRIPT>
<SCRIPT language="JavaScript" SRC="codicecrome.js"></SCRIPT>
</head>
<body>
<div align="center"><a href="javascript:saibcrom('Prova', 'pop.htm',250,250)">Apri la chromeless di prova</a></div>
</body>
</html>
Tra i tag <head> sono contenuti i richiami ai due file .js esterni. Nel <body>, invece, è presente il link che fa riferimento alla funzione saibcrom passando i parametri di cui avevamo parlato prima: titolo della pop up ('Prova'), URL della pop up ('pop.htm'), lunghezza (250) e altezza (250).
Nel caso volessimo aprire più di una chromeless nella stessa pagina basterà usare un link simile a quello analizzato adesso avendo cura di cambiare i parametri ovviamente.
La pop up, invece, è una normalissima pagina html… ci penserà lo script a darle l'effetto orignale.
Dobbiamo solo inserire una piccola stringa nel tag <body> per essere sicuri che la chromeless stia sempre in primo piano rispetto alla index; ecco, quindi, come sarà strutturata la finestra:
<html>
<head>
<title>Pop up chromeless</title>
</head>
<body onload="top.window.focus()">
<div align="center"><font face="verdana" size="2">Questa è una pop up chromeless di prova.
Potete guardare il sorgente delle due pagine per capire come sono strutturate.
Le chromeless possono essere spostate sullo schermo tenendo premuto il tasto sinistro del mouse sulla barra grigia.</font></div>
</body>
</html>