Dissuadere gli utenti di Internet Explorer tramite uno script

Per lungo tempo Internet Explorer è stato in modo assoluto ed incontrastato il browser più utilizzato al mondo. Questo è dipeso principalmente da strategie di preinstallazione aggressive (e blocco della disinstallazione), ma forse non sarebbe un gran problema se Internet Explorer funzionasse decentemente.

Vi spiego che intendo per decentemente: un browser dovrebbe supportare, al momento del rilascio, tutte le tecnologie web già divenute standard de iure e anche magari qualcuna di quelle standard de facto (ma questo è opzionale). Ci sarebbero poi da fare anche molti discorsi sulla sicurezza ma tralasciamo. Internet Explorer è noto per non supportare granché delle migliori tecnologie CSS. Con Javascript sembra andare un po’ meglio solo perché gli autori di Jquery e librerie simili fanno davvero i miracoli per far funzionare tutto, in realtà non è tutto oro quello che luccica. Addirittura bisogna inserire un meta tag nelle pagine per far comportare Internet Explorer (a partire dalla versione otto) in modo un po’ più normale, altrimenti fa apposta a comportarsi male.

Questo cosa implica? Si arriva all’ironica regola che ho inventato e deciso di chiamare del 3+3:

Se ci vogliono 3 giorni per creare e far funzionare qualcosa in un browser standard, ci vogliono 3 mesi per far funzionare la stessa cosa con Internet Explorer.

Sembra una battutina, però è vero, e i problemi sono ancora peggiori.

La situazione attuale

Prima vi parlavo delle date di rilascio e dovremmo fare un altro piccolo approfondimento su questo. Di seguito riporto le date di rilascio ufficiali per le varie versioni di IE:

  • versione 6 – 2001
  • versione 7 – 2006
  • versione 8 – 2009
  • versione 9 – 2011

Secondo Microsoft il 10% delle persone usa Internet Explorer nella versione 6, che è uscita 10 anni fa. Anche se al tempo fosse stato il browser migliore della categoria, ora è comunque un suicidio navigare con quella roba. Figuratevi sviluppare siti che funzionino lì. Lo stato delle cose è grave: si stima che il 40% delle persone usi Windows XP che ha come ultima versione disponibile la 8, vecchia di 2 anni (ma in realtà anche di più).

È la stessa azienda di Redmond che incoraggia le persone ad aggiornare subito il browser, il problema è che lo fa invitando a usare Internet Explorer 8 oppure 9. Se vi state chiedendo che male ci sia, leggete l’articolo Internet Explorer 9 e il supporto ai web standard per rendervi conto che seppur uscito nel 2011 è parecchio indietro rispetto a qualsiasi altro browser che rispetta veramente gli standard (per citarne alcuni Firefox, Safari, Chrome, Opera…).

Tra uno o due anni saremo punto e a capo: molti utenti che usano Internet Explorer e rimangono indietro, con gli sviluppatori web che si strappano i capelli cercando di fare siti web funzionanti.

Lo script dissuasore

Per fortuna, se gestite dei siti web e come me volete evitare di diventare pazzi, dovendo avere anche a disposizione una macchina Windows per fare test esotici e sperare che le cose funzionino, potete offrire ai vostri utenti un’alternativa migliore.

Basandomi sul vecchio script di Explorer Destroyer, nella versione modificata da Xavier, ho ritoccato e sistemato un popup che avvisa gli utenti di Internet Explorer che è consigliabile passare a Firefox, fornendo utili motivazioni, e l’ho racchiuso in uno script PHP di facile utilizzo per chi realizza siti web. Questo non impedisce ai navigatori con IE di vedere il sito (basta cliccare un link e l’avviso sparisce).

Perché Firefox? In realtà si poteva decidere di consigliare alle persone di usare un browser che supporti gli standard (che in parole meno gentili vuol dire “qualsiasi altro browser”), però secondo me è bene consigliare Firefox per almeno 3 motivi:

  • è ragionevolmente diffuso e multipiattaforma, così l’utente può riconoscerlo e usarlo altrove
  • è software libero
  • dando un’indicazione generica (“installa qualcos’altro…”) senza fornire alternative è poco efficace perché molto probabilmente chi usa Explorer non ne conosce e non ha voglia di cercarne una

Il procedimento di installazione e configurazione sul proprio sito richiede 5 minuti, e una volta finito chi naviga con IE riceverà una volta al giorno (oppure ogni tot di giorni a vostra scelta) questo messaggio:

Messaggio visualizzato da Internet Explorer 6

La scelta che ho voluto fare è quella di iniettare il codice nella pagina solo se ad un primo controllo fatto via PHP l’utente usa Internet Explorer. Questo vuol dire che l’HTML non viene “sporcato” se chi naviga usa altri browser, e quindi le pagine sono anche lievemente più veloci da scaricare e visualizzare.

Come installarlo

Come detto prima, lo script richiede:

  • la presenza di PHP
  • l’accesso FTP all’hosting
  • il poter individuare (o generare con PHP) una stringa contenente il giusto tag <body> da passare alla funzione

Per prima cosa avrete bisogno di scaricare l’archivio contenente lo script e un riassunto di queste istruzioni. Potete fare il download da qui e poi dovete caricare la cartella IE nella radice del vostro hosting.

A questo punto la serie di cose da fare è abbastanza semplice.

Se volete, cambiate il valore var daysToSleep = 0; nel codice per impostare quanti giorni di “riposo” deve attraversare l’avviso prima di ricomparire nuovamente.

  • 0 significa che verrà mostrato una volta al giorno
  • -1 significa che verrà mostrato su ogni singola pagina, sempre

Quindi bisogna modificare il file “header” o equivalente del proprio CMS (di solito va fatto nel tema che si utilizza), e inserire al posto del tag <body> il codice seguente, opportunamente adattato:

<?php
// inserisce il semplice tag body per Firefox, il check per Explorer
require(getenv("DOCUMENT_ROOT").'/IE/IEcode.php');
printbody( <ARG> );
>

Al posto di <ARG> bisogna inserire la stringa del body (un esempio potrebbe essere <body class='prova'>) secondo le convenzioni del linguaggio PHP. Se si vuole inserire un semplice tag senza attributi si può anche lasciare la funzione senza argomento (non una stringa vuota “”).

Salvate le modifiche è tutto, potete provare con qualsiasi browser cambiando il vostro user-agent per vedere se funziona (se non usate IE vedrete male il banner, questo ve lo spiego nel paragrafo seguente). Chi usa Windows può fare la prova direttamente da Internet Explorer senza che sia necessario modificare la configurazione del browser.

Personalizzare il codice e il problema della PNG

Con un minimo di conoscenza di HTML troverete facilmente dove mettere le mani in fondo al file PHP per cambiare il testo della casella gialla. Fate attenzione però se volete cambiare il banner di Firefox con uno degli altri forniti da Mozilla. Vi ricordo infatti che le versioni più vecchie di Internet Explorer non hanno supporto alle PNG trasparenti, e ci sono innumerevoli discussioni e hack riguardo alla risoluzione di questo problema. Personalmente, dato che il banner è una sola immagine, ho optato per quella del filter.

Il codice del banner di Firefox, rispetto alla versione originaria di Mozilla, è il seguente:


<a href='http://www.mozilla.org/firefox?WT.mc_id=aff_en11&WT.mc_ev=click'>
<img src='http://www.mozilla.org/contribute/buttons/120x240bubble_b.png' alt='Firefox Download Button' border='0'
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', src='http://www.mozilla.org/contribute/buttons/120x240bubble_b.png'); padding-top: 240px;" />
</a>

Se volete sostituire il pulsante, dovete cambiare solo l’url dell’immagine (che è presente 2 volte come potete notare) e il padding-top dev’essere uguale all’altezza della stessa, perché così Explorer nasconde l’immagine e la ricarica sopra con AlphaImageLoader. Per questo qualsiasi browser normale vi farebbe vedere l’immagine scostata verticalmente. Be’, alla fine l’importante è che funzioni su IE!

Conclusione

La strada verso un web fatto di standard aperti, affermati e condivisi è estremamente importante. Il browser è il software che usiamo tutti i giorni, perciò risulta fondamentale che questo visualizzi le pagine web in un modo corretto e moderno. Nel nostro piccolo possiamo fare qualcosa per far conoscere alle persone un software libero che funziona molto meglio di Internet Explorer e quindi da un leggero contributo a evitare i mal di testa.

Se usate lo script sul vostro sito mi farebbe piacere ricevere un commento per saperlo e se lo ritenere interessante diffondete la notizia.

Firefox 3.5 su Ubuntu: la risposta è Ubuntuzilla

Inizialmente avevo deciso di mantenere Firefox alla versione fornita ufficialmente da Ubuntu, ovvero la 3.0. Il fatto che nuove versioni non vengano inserite dopo il rilascio ufficiale della distribuzione dipende dal code freeze, che in generale è una buona cosa per la stabilità, anche se a mio parere va bene per moltissime cose, ma per Firefox dovrebbero pensarci su un attimo. :\

Ad ogni modo, ho in seguito cambiato idea e deciso che volevo avere anch’io Firefox 3.5. Questo principalmente per la valanga di nuove funzionalità ed ottimizzazioni che il browser ha subito, le più importanti sono il supporto al tag <video> dell’html 5 e la navigazione anonima, oltre al CSS 3. 🙂 Ho trovato numerose guide in giro per la rete, e finora quelle che ho letto mi hanno lasciato basito o addirittura deluso. Infatti, pur vantando una “integrazione nel sistema” e l’installazione di “Firefox, non Shiretoko” finivano con l’effettuare quasi tutte le operazioni manualmente, senza alcun controllo preciso, e poi installavano versioni quali Shiretoko (ma non avevano detto di no?) o Minefield, cioè le varie versioni di sviluppo del browser, non quelle finali.

È anche vero però che affinché non ci siano problemi con Ubuntu è il caso che il sistema continui a pensare di avere installati i pacchetti di Firefox 3.0. Per questi motivi il procedimento non si integrerà col sistema, però sarà comunque quasi del tutto automatico, a parte i piccoli accorgimenti che prenderemo (che per la verità si potrebbero anche non fare, è solo per essere “perfettini”).

Il pacchetto che ci aiuterà in tutto il procedimento si chiama Ubuntuzilla.

Ottimo OS + ottimo browser = navigazione favolosa
Ottimo OS + ottimo browser = navigazione favolosa

Questo procedimento ci garantirà nel modo più assoluto di avere installato Firefox 3.5 all’ultima versione ufficiale dal sito di Mozilla. Non ci saranno trucchetti che richiedono di aggiornare le lingue, modificare il nome del software, o altro. Scaricate subito il pacchetto Debian dal sito di Ubuntuzilla e installatelo. Non noterete nessuna applicazione nuova nel menu, tranquilli, è normale. Ora è il momento di procedere all’installazione. 😉

Aprite un terminale e date il seguente comando:

ubuntuzilla.py -a install -p firefox

E seguite le semplici istruzioni. In particolare, dovrete rispondere affermativamente (y) e poi inserire il numero della lingua (l’italiano dovrebbe essere il 35) e confermarlo. A questo punto lo script si preoccuperà di scaricare l’archivio contenente Firefox 3.5 (di dimensione compresa tra 9 e 10 mb circa) ed installarlo. In seguito, aggiungerà delle chiavi GPG (se non avete mai usato GPG ci metterà probabilmente un minuto, è normale).

Infine vi chiederà se volete inserire un controllo automatico delle nuove versioni. Vi consiglio di accettare questa scelta. Ogni volta che una nuova versione di Firefox sarà disponibile, verrete prontamente notificati, e potrete aggiornarla ripetendo la procedura qui riportata (il sito di Ubuntuzilla consiglia un altro modo, ma l’ho provato e non si comporta per nulla bene, meglio fare una “installazione”, che comunque manterrà tutte le vostre impostazioni).

È il momento delle modifiche manuali. Esiste un bug noto di Firefox 3.5, che indica un crash ogni volta si decide di far partire un video Flash a schermo intero. La soluzione è già stata spiegata dallo stimato Marco Boneff, per cui vi rimando alla sua mini-guida. Badate però che il file da modificare è /usr/bin/firefox e di inserire la riga che lui vi propone subito sotto a quella che recita #set -x, verso l’inizio del file. Questa modifica va fatta ogni volta che installate/aggiornate Firefox con le istruzioni riportate sopra, se utilizzate Flash player.

Dato che abbiamo messo Firefox 3.5, una volta appurato che tutto funzioni (fatelo!), si possono togliere diverse tracce di Firefox 3.0 di Ubuntu. Fate nel terminale:

sudo rm -rf /usr/lib/firefox-3*
 rm -rf ~/.mozilla_backup_*

Questo non toglierà i pacchetti da Synaptic (il sistema deve credere che Firefox sia ancora alla versione 3) e lascerà qualche traccia di Firefox 3, ma almeno avrete liberato un po’ di spazio inutilmente sprecato. 😛

L’ultima cosa da fare è risolvere il problema dell’antialiasing. Vi spiego il fatto: quando cambiate le impostazioni riguardo all’hinting dei font (ovvero come vengono arrotondati) in GNOME, questo salva le impostazioni in Gconf. Ciò significa che tutti i programmi non GNOME, evitano questi parametri. Firefox 3.5 “pesca” le impostazioni da un file di fontconfig nella directory home, che però contiene ancora la direttiva “originale” e non il parametro che avete impostato voi.

A sinistra con hinting pieno, a destra come lo voglio, cioè con hinting leggero
A sinistra con hinting pieno, a destra come lo voglio, cioè con hinting leggero

Le guide che ho trovato online, consigliavano sempre di fare modifiche ai file di sistema, essenzialmente mettendo le mani molto rozzamente, sovrascrivendo file (in modo che anche se uno avesse impostato l’hinting pieno avrebbe avuto quello leggero), insomma pratiche poco pulite che non permetto di fare. Ciò che ho fatto, e che farò fare a voi, è semplicemente inserire il parametro corretto nel vostro file di configurazione. procedete quindi ad aprirlo (se il file risulta vuoto vedete la nota in fondo all’articolo*):

gedit ~/.fonts.conf

A questo punto individuate il blocco relativo all’hinting:

 <match target="font" >
 <edit mode="assign" name="hintstyle" >
 <const>hintfull</const>
 </edit>
 </match>

Come potete notare, il parametro da modificare è hintfull. Controllate nelle impostazioni di GNOME il tipo di hinting che volete, i valori corrispondenti da inserire sono i seguenti:

  • Nessuna: inserite false nel valore booleano della sezione precedente
  • Leggera: hintslight
  • Media: hintmedium
  • Completa: hintfull

Salvate e poi chiudete Firefox. Fatelo ripartire e vedrete che sarà tutto a posto, senza aver truccato nessun file di sistema. 🙂 Questo avrà anche l’effetto collaterale di funzionare su altre applicazioni non GNOME in cui prima magari notavamo la differenza di hinting. Ottimo!

Come potete vedere questo è un metodo praticamente automatico (le modifiche manuali non sono obbligatorie, diciamo solo che migliorano le cose) e soprattutto non ci distrugge la “coerenza” delle impostazioni dei font nel nostro sistema. Se riscontrate qualche difficoltà chiedete pure senza indugio. Spero che la guida vi sia stata utile.


Nel caso in cui il vostro file di configurazione risulti vuoto, in quanto non presente, incollateci dentro il contenuto di questo file di esempio:

<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>
    <match target="font">
        <edit mode="assign" name="rgba">
            <const>none</const>
        </edit>
    </match>
    <match target="font">
        <edit mode="assign" name="hinting">
            <bool>true</bool>
        </edit>
    </match>
    <match target="font">
        <edit mode="assign" name="hintstyle">
            <const>hintslight</const>
        </edit>
    </match>
    <match target="font">
        <edit mode="assign" name="antialias">
            <bool>true</bool>
        </edit>
    </match>
</fontconfig>