Dal 2004 il blog di Antonio Troise

E’ noto a tutti che uno dei grandi problemi di Internet Explorer (dalla release 5.5 alla attuale 7) è quello di non riuscire a visualizzare correttamente la trasparenza presente nei file immagine di tipo PNG.
Per chi non lo sapesse il formato PNG (Portable Network Graphics) fu creato nel 1995 da un gruppo di autori indipendenti, dopo che nel 1994 il popolarissimo formato GIF iniziò ad avere problemi di brevetti. Superficialmente simile al GIF, in quanto è capace di immagazzinare immagini in modo lossless, non ha molte delle limitazioni tecniche del formato GIF: infatti, è in grado di memorizzare immagini in colori reali (mentre il GIF era limitato a 256 colori) e ha un canale dedicato per la trasparenza (layer alpha).
Purtroppo, nonostante tutti i maggiori programmi di grafica e di navigazione supportino correttamente questo formato grafico, l’unica eccezione è appunto Internet Explorer versione 5 e superiore. Infatti, anche nella più recente versione di Explorer, nonostante permetta la visualizzazione del formato PNG, il layer alfa è gestito male.

In particolare, IE dalla versione 5.5 alla 6 è infatti in grado di mostrare le PNG, ma non ha il supporto per la trasparenza variabile. Infatti IE5.5 e 6 riescono a leggere queste immagini senza trasparenza o con trasparenza binaria (se quindi si presentano a 8bit) ma per le immagini con trasparenza variabile, non esisteva ancora una piena compatibilità, mostrando un antiestitico colore grigio.
Questo, almeno apparentemente, sino all’avvento di IE7.

Per quanto riguarda IE7, quindi, nonostante si dica che sia stato pienamente supportato il formato PNG, dopo alcuni test si è scoperto che IE7 tratta i PNG (ad 8 bit o 24) in modo differente dagli altri browser come FireFox e Opera, creando un ennesimo antiestetico effetto di taglio su un’immagine PNG usata come sfondo in repeat-x, mentre solo FireFox rende perfettamente lo stacco.
Eccone un esempio:

Questa è una cosa che molti webmaster e webdesigner devono tenere conto: io personalmente, quando ho sviluppato il template di questo sito, avevo usato delle iconcine png con lo sfondo trasparente, ma quando ho fatto il test di visualizzazione su Explorer, mi sono accorto che ognuna di esse era contornata da uno sfondo grigio chiaro e sono stato, quindi, costretto a convertirle in GIF, perdendo una inevitabile fetta di colori.

Se molti, preferiscono professare il motto “abbandonate explorer” è anche vero che, dati alla mano, è ancora il browser più usato al mondo (ovviamente solo perché preinstallato sul sistema operativo più diffuso al mondo) e quindi occorre considerare fix che possano permettere la corretta visualizzazione della trasparenza delle immagini in PNG.

Nel tempo molti si sono cimentati nella soluzione definitiva lato server, in attesa che Microsoft risolva il problema a monte, ovvero, semplicemente, ripristinando la corretta visualizzazione del layer alpha da parte dell’engine di rendering di IE. Tra queste posso citare articoli come PNG in Explorer 6, PNG Behavior, Cross-browser semi-transparent backgrounds e The PNG problem in Windows Internet Explorer

Per molti, però, la soluzione migliore per poter utilizzare le PNG con trasparenza anche con Internet Explorer, consiste nell’usare IEPNGFix (qui trovate la demo, mentre qui potrete scaricare il pacchetto zip).

Per attivarlo sul proprio sito basterà copiare questo file htc, e questo file blank.gif nella vostra cartella di lavoro e, quindi, inserire nel vostro foglio di stile questa riga di codice css (comprensivo di commenti condizionali al fine di garantire la validazione del css):

<br /> <!--[if IE]> </p> <style type="text/css"> img { behavior: url(iepngfix.htc); } </style> <p><![endif]--><br />

Soluzioni lato client si possono trovare anche qui dove, usando Multiple IE su Windows XP, si consiglia di copiare due file dll (dxtmsft.dll e dxtrans.dll) nella cartella “C:\WINDOWS\ServicePackFiles\i386“.

Ora che avete finalmente risolto l’annoso problema della trasparenza del PNG su IE, potete godervi la lettura di questo interessante articolo di Digital Web Magazine, Creative Use of PNG Transparency in Web Design, che spiega come far uso sapientemente delle partially transparent implementabili sulle immagini PNG per creare suggestivi effetti sul proprio sito.

A volte può capitare di non ricordare la password di uno di quei tanti servizi del web 2.0 in beta a cui ci siamo iscritti (ultimamente crescono come funghi…), per poi scoprire che la si era salvata nel proprio browser (di solito quando si tratta di servizi non particolarmente importanti uso senza remore questa funzionalità). In questo modo possiamo accedere senza problemi al servizio interessato ma se dovessimo accidentalmente cancellare, per motivi di privacy, i dati sensibili sul nostro browser, le password salvate nei moduli internet sarebbero le prime ad essere eliminate definitivamente. Ecco perché, se non si ricorda una password che però si aveva avuto la cura di salvarle sul proprio browser, è necessario, prima o poi, recuperarla.

Internet Explorer

Se si tratta di Internet Explorer si possono usare uno di quei tanti programmi in grado di rivelare il contenuto celato sotto gli asterischi di un campo password. Tra i tanti vi posso suggerire Asterisk Logger, Password Reveal e Kernel Password Unmask 1.0. Questi applicativi hanno la prerogativa di funzionare sia per i campi password di Internet Explorer che per tutti quelli di Windows, come per esempio il campo password di una connessione remota.

Firefox

Purtroppo, questi programmi non funzionano sui campi password dei moduli internet aperti con Firefox: ne ho provati praticamente di tutti i tipi, freeware e shareware, ma nessuno è stato in grado di rivelare e scoprire le password nascoste sotto gli asterischi di un browser Firefox.

Fortuna che quelli che hanno sviluppato questo splendido browser hanno pensato ad un metodo semplice e quanto mai immediato. Infatti basta andare nel menu Strumenti -> Opzioni…, cliccare sulla folder Sicurezza, e quindi sul pulsante “Mostra password…”
A questo punto si aprirà una finestra che mostrerà una lista di siti e di nome utente associati: cliccando sul pulsante in basso a destra “Mostra password” sarà possibile visualizzare in chiaro tutte le password salvate.

Ovviamente, per quanto immediata sia questa funzione, costituisce, per contro, anche un piccolo buco di sicurezza: chiunque avesse accesso alla vostra postazione potrebbe visionare tutte le vostre password usate nel web. Per risolvere questo problema, c’è la possibilità di inserire, dalla folder Sicurezza aperta in precedenza, una password principale che serve a proteggere le informazioni sensibili come le password dei siti: in tal modo, ogni volta che verrà chiesto a Firefox, di recuperare un’informazione protetta, come la lista delle password vista in precedenza, verrà richiesta una password principale.
Sarà bene, quindi, che ognuno di voi setti questa password.

UPDATE: Andrea Micheloni mi segnala anche un altro metodo per scoprire le password nascoste su Firefox usando i bokmarklet javascript. Provate a salvare questo codice tra i preferiti: se nella pagina vi è un campo password, basterà cliccare sul collegamento appena salvato e la password verrà mostrata in un popoup.

Export/Import delle password salvate su Firefox

L’estensione per Firefox Password Exporter permette di effettuare in tutta semplicità e sicurezza di effettuare un export delle password salvate su Firefox e il successivo ripristino. Il file di backup generato può essere XML o CSV e si può decidere di criptarlo.

In maniera più semplice è possibile fare il backup manuale del file in cui sono memorizzati i dati delle password. E’ sufficiente andare nella cartella del profilo utente su Firefox (del tipo C:\Documents and Settings\[username]\Application Data\Mozilla\Firefox\Profiles\[nome_profilo].default) e copiare in un posto sicuro il signons2.txt: questo è un file ascii leggibile le cui password, però, sono criptate.

Per gli sviluppatori di siti spesso risulta utile comparare i propri progetti html su diversi browser visto che ognuno risponde in maniera diversa alle varie specifiche w3c.
Il problema è che, se anche si possono installare diversi browser tra Internet Explorer, Firefox e Opera, le difficoltà insorgono quando si devono testare diverse versioni dello stesso browser: per Firefox è più semplice, visto per sua natura è possibile creare varie versioni stand alone sullo stesso sistema operativo.
Per Internet Explorer, invece la questione si fa più ostica perché, di solito, questo sovrascrive le vecchie versioni del browser made in Microsoft. La soluzione più semplice che ho trovato è quella di scaricare le versioni stand alone dei vari Internet Explorer dal sito lambcutlet.org (il bello è che mentre mostra i link per i download di IE, in alto sulla pagina vi è un bel banner che invita a scaricare Firefox!):

• Internet Explorer 6.0 Eolas Edition [3.41 MB]
• Internet Explorer 5.5 SP2 [3.51 MB]
• Internet Explorer 5.01 SP2 [2.93 MB]
• Internet Explorer 4.01 [2.38 MB]
• Internet Explorer 3.0 [909.4 kB]

Ovviamente dovete stare attenti a navigare con versioni datate di Explorer (tipo la 3.0) su altri siti al di fuori del vostro che state testando: oltre a non gestire correttamente i vari stili CSS sarete anche soggetti ai vari bachi (e quindi worm e virus) che nel corso delle varie release sono stati risolti.

Il problema, però, è che a volte non è sufficiente avere diverse versioni dei browser solo su un sistema operativo ma è opportuno visualizzare il proprio sito anche con browser installati su sistemi operativi diversi, come Windows, Linux o Mac OS X. A questo punto le cose si fanno però più complicate!

Solo per Linux, senza considerare le versioni datate, avremmo ben 13 diversi browser da installare (Dillo 0.8, Epiphany 2.14, Firebird 0.7, Firefox 2.0, Flock 0.7, Galeon 2.0, Iceweasel 2.0, Konqueror 3.5, Mozilla 1.7, Navigator 4.8, Opera 9.10, Phoenix 0.5 e SeaMonkey 1.1); per Windows ne avremmo almeno tre (Firefox 2.0 e Internet Explorer 6.0 e 7.0), mentre per Mac solo due (Firefox 2.0 e Safari 2.0, qui è, però, possibile trovare una versione di IE 5.2.3 anche per Mac OS e addirittura per HP-UX).

Con l’emulazione offerta da Vmware la soluzione potrebbe essere a portata di mano ma attualmente installare un sistema Mac è quasi impossibile data l’estrema lentezza nella gestione del sistema operativo. A questo punto, però, rimane fuori dalla nostra analisi Safari: e allora a cosa serve installare 16 versioni diverse di Browser su Windows e su Linux emulato (o viceversa ovviamente) per poi ritrovarsi una analisi parziale se non si prevede anche il browser di default del mondo Mac? Attualmente è lo stesso problema che sto incontrando io: sto sviluppando delle pagine html che fanno uso pesante di javascript (per ajax) e css e ho da poco scoperto che risultano essere quasi illeggibili su Safari!

A questo punto l’unica via d’uscita è quella di utilizzare applicazioni online tipo IE NetRenderer, Browsershots e Browsrcamp.

Tutti questi siti non fanno altro che realizzare uno screenshot di una pagina web come verrebbe visualizzata su un browser specificato. L’unico vincolo che dovete tenere in considerazione è che dovete pubblicare la pagina web che volete testare sul web!

Browsershots
Al momento il più completo di tutti è Browsershots, che, però, non realizza istantaneamente lo screenshot del sito a causa del peso che l’operazione comporta sul server. Ho notato che, molto spesso, durante la prima interrogazione, il server va in timeout.
Ecco la lista dei browser/SO disponibili:

Linux
Dillo 0.8
Epiphany 2.14
Firebird 0.6
Firebird 0.7
Firefox 1.0
Firefox 1.5
Firefox 2.0
Firefox 3.0
Flock 0.7
Galeon 2.0
Iceweasel 2.0
Konqueror 3.5
Mozilla 1.0
Mozilla 1.1
Mozilla 1.2
Mozilla 1.3
Mozilla 1.4
Mozilla 1.5
Mozilla 1.6
Mozilla 1.7
Navigator 4.8
Opera 9.10
Phoenix 0.1
Phoenix 0.2
Phoenix 0.3
Phoenix 0.4
Phoenix 0.5
SeaMonkey 1.0
SeaMonkey 1.1
All

Windows
Firefox 1.5
Firefox 2.0
MSIE 5.0
MSIE 5.5
MSIE 6.0
MSIE 7.0
All

Mac
Firefox 2.0
Safari 2.0

Inoltre è possibile scegliere tra le seguenti risoluzioni video:
Tiny (640×480)
Small (800×600)
Medium (1024×768)
Large (1280×1024)
Huge (1600×1200)

Infine è possibile scegliere quale versione di Javascript abilitare (1.3, 1.4, 1.5 o 1.6), quale versione di Macromedia Flash supportare (Versione 4, 5, 6, 7, 8), quale profondità dei colori attivare (4 bit, 8 bit, 16 bits e 24 bit), che versione di Java abilitare (Blackdown, Kaffe, Sun Java) e quali Media plugins avere (Apple Quicktime, Windows Media Player, SVG e PDF).

Purtroppo il tempo di attesa può variare da 15 minuti sino ad un massimo di 4 ore ma penso che per avere tutte queste informazioni ne vale la pena!

Browsrcamp
BrowsrCamp è un servizio meno completo del precedente e permette di testare gratuitamente la propria pagina web solo sul browser per MacOSX Safari 2.0.4 ma a diverse risoluzioni (width a 800, 832, 1024, 1280, 1600); per tutti gli altri è prevista una versione a pagamento.

Anche se il sito offre molto di meno Browsershots, per me risulta l’ideale dato che su Windows dispongo già di Firefox e Internet Explorer e con Browsrcamp riesco ad ottenere senza tempi di attesa lo screenshot della mia pagina web vista da Safari 2.0.4.

Inoltre, lo screenshot viene effettuato ad un ottima risoluzione e non è limitato alla sola pagina web visibile alla risoluzione scelta, ma è completa visualizzando anche la parte nascosta del browser visibile solo scrollando la barra verticale. Qui potete vedere un esempio del mio sito visibile su Safari.

IE Netrender
IE Netrender è un servizio analogo ai due precedenti ma si focalizza esclusivamente su Explorer 5.5, 6 e 7. Una caratteristica davvero originale è quella che permette di confrontare, nello stesso screenshot, le differenze di resa tra IE6 e IE7 (IE7-IE6 Mixed e IE7-IE6 Difference).

Anche se è molto veloce IE Netrender ha un grosso svantaggio: lo screenshot visualizza solo il sito alla risoluzione 800×600 e non visualizza tutto il sito nella sua interezza ma si ferma alla prima schermata del browser.
In definitiva questo servizio è utile solo per appurare visivamente le differenze IE7-IE6.

UPDATE: Esiste da poco anche CSSVista un software freeware per Windows Xp, che vi permetterà di vedere contemporaneamente la visuale dei css sia in Firefox che in Internet Explorer 6. Per i più indecisi è possibile anche anche una demo video di CSSVista, mentre qui è possibile scaricarlo.

Ho installato Internet Explorer 7: d’altronde non potevo esimermi ancora a lungo perché volevo toccare con mano cosa di bene e male aveva fatto Microsoft.
Ebbene, ecco le mie prime impressioni avute in un’ora circa di navigazione (al dire il vero rischiosa senza Firefox):

1. Ho impiegato 10 minuti a trovare la Cronologia: è posta nella stessa sezione del “Centro Preferiti” (la stellina gialla nella toolbar) e non è richiamabile con un pulsante a parte o da menu.
2. Non capisco perché la barra degli indirizzi, con i pulsanti di BACK e FORWARD, sia fissa nella parte in alto del browser: qualcuno sa se è possibile spostarla magari sotto il menu (ancora non riesco ad abituarmi a questa impostazione di IE7 che peraltro reputo scomoda)?
3. Molto scomoda (forse anche perché è posto nella barra degli indirizzi troppo alta) la posizione del tasto “Aggiorna”: abituato ad avere un tasto refresh bello grande, questo è troppo piccolo e in alto da risultare user friendly (fortuna che esiste l’F5); capisco il vantaggio di riutilizzarlo come tasto “VAI” quando si digita un nuovo indirizzo, ma qui si sintetizza inutilmente.
   Stesso discorso di scomodità per il tasto “Interrompi”.
4. Il mistero più grande è perché abbiano optato per la chiusura delle schede la funzione MouseUp del tasto centrale del mouse. Mi spiego meglio. Su Firefox una scheda aperta si chiude cliccando col tasto centrale del mouse: il click va inteso come una combinazione di MouseDown (si preme il pulsante del mouse in una posizione x,y) e MouseUp (si rilascia il pulsante del mouse in una posizione x,y).
   Quindi la funzione mouseUp viene chiamata ogni volta che il pulsante del mouse, che precedentemente era stato premuto, è stato rilasciato.

   Il vantaggio di usare, per la chiusura delle schede, il MouseUp, è che questo metodo permette di annullare il click all’ultimo momento (infatti la posizione in cui il tasto viene rilasciato potrebbe essere diversa da quella in cui è stato premuto, ciò accade se si preme il pulsante, si muove il cursore tenendo il tasto premuto e quindi lo si rilascia in una posizione diversa da quella iniziale) ma, soprattutto, permette una maggiore sensazione di risposta (feedback) e controllo.

   Con IE7, invece, appena si preme il tasto centrale del mouse la scheda si chiude trovandosi poi il mouse sulla scheda precedente e con la netta sensazione (dato che il rilascio del tasto avviene sopra questo) che si sia chiuso una finestra sbagliata.

(occorre tenere presente che non esiste una funzione di Recovery delle schede chiuse accidentalmente).

5. Anche se al riavvio, IE7 ripristina le schede dall’ultima chiusura, non memorizza la cronologia delle singole finestre (cosa che Firefox fa di default).
6. Ho notato che IE7 non visualizza molto bene i CSS del mio sito: in particolar modo non rende visibile l’underline arancione che si ha quando si passa con il mouse sopra il menu in alto. Con Firefox e IE6 questo problema non esiste: IE7 fa un ulteriore passo indietro nel rispetto degli standard?
7. L’unica cosa interessante è la presenza del tasto di “Selezione rapida schede” che mostra un’anteprima di tutte le schede aperte.

Queste sono le prime impressioni a caldo. Quali sono le vostre?

La notizia fa pensare: anche se avete installato tutte le patches, Internet Explorer è stato libero da significativi difetti (che ne compromettevano la sicurezza) solo per 81 giorni nel 2006.
E’ la ricerca effettuata dal notizia del Washington Post che ha misurato quanto ha impiegato Microsoft a distribuire gli aggiornamenti di sicurezza per i suoi prodotti nel corso dell’ultimo anno: la statistica è stata effettuata contattando tutte le aziende che si occupano di sicurezza che hanno identificato e comunicato buchi critici e, quindi, valutando quanto ci ha messo Microsoft a porre rimedio.
Il risultato è stato che per nove mesi di quest’anno Microsoft ha ignorato segnalazioni relative a exploit nel codice.
Ci sono stati almeno 98 giorni nel 2006 durante i quali non esistevano aggiornamenti del software per dei bachi che Microsoft sapeva essere già in uso da criminali, che hanno potuto così ottenere dati personali e rubare denaro.
Per 10 volte le istruzioni dettagliate su come risolvere problemi critici di Internet Explorer sono state pubblicate on-line da privati prima che Microsoft a rendersi disponibile una patch ufficiale.
Firefox invece ha totalizzato soltanto nove giorni in cui codice exploit in grado di causare seri problemi di sicurezza sono stati comunicati prima che Mozilla facesse uscire le patch.

[via The Inquirer]