Nei giorni scorsi è stato rilasciato SuperPreview, un software Microsoft molto interessante. SuperPreview permette di vedere l’anteprima di una singola pagina web all’interno dei tre browser made in Redmond al momento maggiormente utilizzati: Internet Explorer 8, Internet Explorer 7 (tramite la funzione Compatibility View di IE 8) e, sopratutto, il famigerato Internet Explorer 6, tutt’ora incubo degli sviluppatori.

Perchè SuperPreview?

Il testing delle pagine web su più browser è un passaggio molto importante per chi sviluppa siti internet, necessario per eliminare eventuali inconsistenze. Le alternative sono principalmente due:

• utilizzare uno dei numerosi servizi online, come BrowserShots, che offrono, in modo gratuito o a pagamento, la possibilità di scaricare anteprime del rendering della pagina su più browser;
• tenere installate più versioni dei browser sul proprio sistema ed effettuare il test manualmente.

Entrambi le possibilità offrono vantaggi e svantaggi: se la prima elimina la necessità di avere molti browser sul proprio computer, è altrettanto vero che necessita di tempi molto più lunghi per aspettare che il rendering remoto si concluda e non offre strumenti di analisi della struttura del documento.

La seconda possibilità è sicuramente più immediata in quanto tutto il testing avviene in locale, ma presenta diversi problemi quando proviamo ad installare due versioni dello stesso browser incompatibili tra loro. Questo è particolarmente vero per Internet Explorer data l’impossibilità di avere contemporaneamente più versioni di Internet Explorer sullo stesso sistema operativo (a meno di non ricorrere ad alcuni hack). Per effettuare i test si rende necessario quindi l’utilizzo di computer diversi (o di macchine virtuali) con sopra installate le diverse versioni del browser, con tutti i problemi e i rallentamenti che questa procedura comporta.

Attraverso SuperPreview, invece, possiamo svolgere tutti i test, almeno per quanto riguarda IE, all’interno di un singolo ambiente di lavoro. Oltretutto il software è rilasciato gratuitamente, quindi perchè non dargli almeno un’occhiata? :-)

SuperPreview è una versione ridotta (e proprio per questo gratuita) del programma completo incluso nella suite Microsoft Expression Web. Pertanto sarà possibile effettuare l’anteprima delle pagine soltanto con i browser Microsoft. Con il programma completo è invece possibile avere l’anteprima anche con altri browser, ad esempio Firefox.

L’Interfaccia

Una volta scaricato e installato, il programma si presenta con una interfaccia abbastanza chiara ed intuitiva:

In alto è presente la classica la barra degli strumenti, al centro lo spazio dove verranno mostrate le anteprime della pagina e in basso lo spazio dove aggiungere nuovi browser, visualizzare la struttura DOM del documento e selezionare la risoluzione con cui effettuare l’anteprima.

La barra degli strumenti si divide in sette gruppi distinti:

1. Strumenti di selezione: per selezionare singoli elementi all’interno del DOM o scorrere il documento.
2. Modalità di selezione: selezionando la prima modalità verrà visualizzato un riquadro attorno all’elemento DOM selezionato, mentre con la seconda tutta la pagina escluso l’elemento selezionato verrà nascosta.
3. Strumenti di misurazione: nascondono o visualizzano i righelli e le linee guida, molto utili per verificare che gli elementi della pagina siano allineati.
4. Strumenti layout: le varie modalità in cui disporre le anteprime della pagina con i vari browser (orizzontalmente, verticalmente, ecc). Molto comoda la visualizzazione overlay, che sovrappone due anteprime in modo da vedere le discontinuità tra una e l’altra.
5. Barra dell’indirizzo: dove inserire l’indirizzo della pagina web da visualizzare. E’ possibile selezionare una pagina dall’hard disk premendo il pulsante con i tre puntini.
6. Zoom: livello di ingrandimento a cui visualizzare le anteprime.
7. Menu di aiuto: contiene la guida in linea e i collegamenti al sito ufficiale del programma.

Alcuni esempi: Box Model, Trasparenza PNG, CSS 3

Per testare le funzionalità di SuperPreview ho preparato un piccolo esempio che contiene alcuni scenari tipici di incompatibilità con le diverse versioni di Internet Explorer. Vi invito a scaricare il file e a provare ad effettuare i test voi stessi. L’esempio si compone di tre parti distinte:

1. Test del Box Model in Quirks Mode (IE 6 e 7) e Standard Mode (IE 8).
2. Test della trasparenza PNG (non supportata correttamente da IE 6.
3. Test della proprietà CSS 3 text-shadow non supportata da tutte le versioni di Internet Explorer.

Selezioniamo quindi i browser Internet Explorer 8 e 6 nella zona di selezione browser:

Ed inseriamo l’indirizzo della pagina. A questo punto siamo in grado di verificare le differenze di rendering nel file di esempio. In particolare, mentre IE 8 non avrà difficoltà nel visualizzare il primo esempio seguendo lo standard W3C per il Box Model, IE 6 visualizzerà la pagina in Quirks Mode utilizzando il Box Model errato. Lo stesso discorso vale per il test PNG: IE 6 non visualizza l’immagine con trasparenza.

E’ possibile ripetere i test con IE 8 in Compatibility View. In questo caso il risultato del primo test sarà esattamente identico (e quindi errato) a quello di IE 6. Internet Explorer 7 tuttavia supporta la trasparenza PNG, il secondo test avrà esito positivo.

Nessuna versione di Internet Explorer supporta le proprietà CSS 3: l’esito dell’ultimo test sarà identico per tutti e tre i browser.

Pagine Web, ma non solo

Una funzionalità molto interessante riguarda la possibilità di importare layout direttamente da file immagine .bmp, .gif, .png, .jpg, ma anche da file Adobe Photoshop (estensione .psd). Questo risulta molto utile durante il lavoro di conversione da layout grafico, sviluppato all’interno di una applicazione di grafica come appunto Photoshop, alla rappresentazione in HTML e CSS.

Per usufruire di questa funzione è suffieciente premere il pulsante Open Image all’interno della finestra principale:

Conclusioni

Se proprio vogliamo essere pignoli, dobbiamo dire che la visualizzazione delle proprietà DOM e CSS andrebbe migliorata perchè al momento non è all’altezza di altri software come Firebug. Inoltre il programma è sensibilmente lento in fase di rendering delle pagine, soprattutto nel caso di pagine abbastanza complesse.

In conclusione SuperPreview è un piccolo software estremamente interessante, gratuito e che vale la pena scaricare anche solo per la possibilità che ci offre di testare i nostri layout su IE 6 / 7 / 8 sullo stesso computer, senza dover ricorrere a servizi online o a macchine virtuali.