giu
25

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.

Popularity: unranked [?]



Puoi visualizzare il post originale qui.

mag
21

Leggere meglio con Minified Pure Reader

 

Come sapete, sono un grande fan degli RSS e mi piace leggere gli articoli tramite Google Reader. Ultimamente ho cominciato a scoprire alcuni strumenti interessanti per leggere meglio, come ad esempio Readability di cui vi ho già parlato. Quasi per caso una volta mi sono imbattuto in Pure Reader, uno script originariamente sviluppato per Safari e poi portato anche a Firefox e altri browser.

http://nadesign.net/safari/images/preview-reader.png

La versione di Pure Reader originale su Safari

Per un po’ l’ho adoperato e in effetti non è male. Poi comunque ho notato qualche piccolo difetto, per esempio il fatto che venga nascosto il pulsante mi piace e altre funzioni considerate “secondarie” o che tutte le immagini vengano messe su una riga a parte, compresi gli smile. Nulla di grave comunque.

Alla fine ci ho pensato un po’ e in effetti l’interfaccia di Google Reader, semplice e in linea con le altre applicazioni di Google, non mi spiace affatto. Quello che non soddisfa in effetti è il modo con cui Google Reader visualizza il testo degli articoli. Perciò ho deciso di prendere Pure Reader per Greasemonkey e modificarlo in modo da avere soltanto gli articoli con lo stile modificato, mentre tutto il resto rimane come prima.

Minified Pure Reader

Se volete installare lo script come sempre vi basta avere Greasemonkey e poi visitare la pagina dedicata a Minified Pure Reader. Buona lettura!

Popularity: unranked [?]



Puoi visualizzare il post originale qui.

mar
09

Open Source Ampersands: singoli font liberi e gratuiti per il design

 

Open Source Ampersands

Open Source Ampersands è un progetto di Mark Pilgrim, ex-dipendente di Google, e consiste in una raccolta di ampersand (è il carattere “&”) utilizzabili liberamente per i propri progetti di design. Non soltanto come caratteri per i siti web con o, senza l’attributo @font-face dei CSS, ma anche per la realizzazione di lavori offline.

Ogni ampersand della galleria corrisponde a un archivio compresso contenente quattro formati del singolo carattere: EOT, TTF e WOFF. Inoltre, sono incluse una pagina dimostrativa in HTML e una cartella con la font family completa. I caratteri sono presi da Google Fonts Directory, The League of Movable Type e altre risorse gratuite.

La raccolta di Pilgrim è ispirata a un intervento del 2008 di Dan Cederholm: il design, nel 2011, «è limitato soltanto dalla proprietà intellettuale». Perciò, disporre di typeface simili significa avere più libertà di creare contenuti originali. Peraltro, molte famiglie di caratteri non commerciali di solito escludono le ampersand.

Via | The Next Web

Open Source Ampersands: singoli font liberi e gratuiti per il design é stato pubblicato su ossblog alle 11:00 di mercoledì 09 marzo 2011.

Popularity: unranked [?]



Puoi visualizzare il post originale qui.

giu
06

Eliminare l’outline sui bottoni in Firefox

 

Cos’è l’outline su un bottone?

Me lo sono chiesto anche io appena ho letto la parola “outline”. L’outline è quel bordo che il browser aggiunge quando viene fatto il focus di un elemento. In particolare viene utilizzato per evidenziare gli elementi di una pagina quando si naviga con il con la tastiera, utilizzando il tab per spostarsi sui vari link.

L’outline viene utilizzato per l’accessibilità di un sito ed è molto importante per chi usa navigare nella pagina tramite tastiera (con il TAB ad esempio). Se qualcuno ancora non ha capito cosa sia ecco vi un esempio:

lo vedete quel bordino attorno? Io l’ho odiato per tanto tempo, finché non sono riuscito ad eliminarlo :)

Senza perderci in chiacchiere inutili, a volte potrebbe esserci l’esigenza di personalizzarlo, come nel mio caso. Se provando a cercare su internet e avete trovato questa riga di css da inserire:

*:focus,*:active,*:hover { outline:none; }

sappiate che su Firefox non funzionerà, o almeno verrete ignorati. Non so’ per quale motivo, ma fino ad ora ho sempre cercato di evitare di utilizzare bottoni proprio per questo motivo. Oggi scopro che una soluzione c’è! Inserendo questa magica riga il problema si risolverà:

button::-moz-focus-inner { border: 0; }

Sto ancora chiedendomi che selettore è i due due punti, fino ad ora non lo avevo mai visto. Intuitivamente sembra un selettore come “:before” o “:hover” ma viene utilizzata una funzione offerta dal browser che sembra definire il CSS da applicare nel momento in cui viene effettuato il focus su un elemento. Sto cercando maggiori informazioni a riguardo.

In tutti i casi con la riga CSS di cui sopra risolviamo il problema del fastidiosissimo bordo quando un bottone viene selezionato. E’ inutile dirvi che potete selezionare in maniera più accurata gli elementi a cui applicare la regola (ad esempio sostituedo a button una classe specifica) e quindi continuare a mantenere l’accessibilità della pagina sugli altri elementi.

Popularity: 1% [?]



Puoi visualizzare il post originale qui.

dic
13

Tuxmind è accessibile… !

 

Popularity: 1% [?]



Puoi visualizzare il post originale qui.

ott
07

Open Font Library: l open source incontra le typeface

 

Open Font Library

Open Font Library è un archivio online di typeface rilasciate sotto licenza OFL (o, di pubblico dominio) che possono essere scaricate, condivise e miscelate per uso personale e/o commerciale.

Finanziato da Mozilla, il progetto è interessante per l’opportunità di utilizzare le font-family disponibili direttamente sul proprio sito, attraverso la regola @font-face dei CSS3 (già supportati da alcuni browser): com’è spiegato nella documentazione, queste non devono essere necessariamente ospitate sul proprio spazio, perché l’indirizzo dei file è mantenuto invariato sul server di Open Font Library.

I designer possono caricare i propri font nella libreria, purché disposti a mantenere la fruibilità degli stessi come free software, che caratterizza tutti i contenuti presenti.

Popularity: 1% [?]



Puoi visualizzare il post originale qui.

apr
23

Aptana Studio, un IDE Open Source completo per il Web 2.0. Ecco come installarlo su Ubuntu

 

aptana logo Aptana Studio, un IDE Open Source completo per il Web 2.0. Ecco come installarlo su Ubuntu

Aptana è un IDE (ambiente di sviluppo integrato) professionale per lo sviluppo di applicazioni web e siti. Aptana è un prodotto Open Source, ed è disponibile per Linux, Mac e Windows, sia come applicazione stand-alone, che come plug-in per Eclipse. Si tratta di una soluzione molto completa che affianca strumenti per lo sviluppo di applicazioni Web 2.0 a servizi online di collaborazione ed hosting. Di base Aptana supporta Html, CSS e javascript, ma il supporto può essere esteso, grazie ad una serie di plug-in gratuiti, ad altri linguaggi come: Ruby On Rayls, Python e PHP. Sempre tramite plug-in si può abilitare una serie di strumenti per la creazione di applicazioni per iPhone, Nokia ed Adobe AIR. Le funzioni messe a disposizione da Aptana Studio sono veramente tante, per una panoramica completa vi rimando alla features list del sito ufficiale.

aptana gui 300x225 Aptana Studio, un IDE Open Source completo per il Web 2.0. Ecco come installarlo su Ubuntu

Installazione

Per installare Aptana Studio su Ubuntu basta scaricare, da qui, l’archivio zip della versione stand-alone per Linux.

Scompattatelo e spostatelo in una cartella qualsiasi della vostra home directory, es:

cp -r aptana /home/nomeutente/Programmi

Nelle istruzioni dell sito di Aptana lo spostano in /usr/local, ma per poter aggiornare, bisogna cambiare i permessi alla cartella.

Se non l’avete già fatto, installate xulrunner e Java 6, con:

sudo apt-get install sun-java6-jre sun-java6-plugin xulrunner

Create lo script runAptana nella cartella aptana con:

gedit /home/nomeutente/Programmi/aptana/runAptana.sh

incollate all’interno del file queste due righe:

export MOZILLA_FIVE_HOME=/usr/lib/xulrunner

/home/nomeutente/Programmi/aptana/AptanaStudio

correggendo l’ultima riga con il percorso esatto al file AptanaStudio.

Salvate, chiudete e rendetelo eseguibile con:

chmod +x /home/nomeutente/Programmi/aptana/runAptana.sh

Fatto ciò non vi resta che avviare il programma con un doppioclick su runAptana.sh.

aptana avvio 300x139 Aptana Studio, un IDE Open Source completo per il Web 2.0. Ecco come installarlo su Ubuntu

Per accedere rapidamente ad Aptana, potete creare un’entrata nel menù. Aprite un terminale e date:

alacarte

Si aprirà il menù editor, spostatevi alla voce “Programmazione”, cliccate su “Nuova voce” e mettete come nome Aptana Studio, come comando navigate fino allo script runAptana.sh, e inserite la descrizione. Come icona potete usare quella ufficiale, che trovate qui.

aptana menu editor 300x220 Aptana Studio, un IDE Open Source completo per il Web 2.0. Ecco come installarlo su Ubuntu

L’interfaccia grafica di Aptana Studio è molto ben strutturata. Le funzioni come dicevo sono tante ma ben organizzate.  Aptana è una valida alternativa Open Source a costosi software proprietari come Dreamweaver.

Articoli correlati:

Video tour: Bluefish, ecco il potente editor in azione

Adobe AIR 1.5, ora anche per Linux

Adobe rilascia l’alpha di Flash Player 10 64-bit per Linux

Rilasciato Google Gears 0.3, lavorare offline con le nostre Web Apps preferite

Popularity: 1% [?]



Puoi visualizzare il post originale qui.

apr
14

IE8 – alcuni utili bug

 

Popularity: 1% [?]



Puoi visualizzare il post originale qui.

ago
28

Firefox 3 gioisce: rilasciato Firebug 1.2

 

Firebug

Gli sviluppatori web saranno felici di sapere che è stata finalmente rilasciata la versione 1.2 di Firebug, la famosa estensione di Firefox che consente di effettuare il debug di codice HTML, JavaScript e CSS direttamente dal browser. La novità principale di Firebug 1.2 è l’introduzione del supporto ufficiale a Firefox 3 ma i vari bugfix e l’aumento delle performance (grazie ad un “comportamento” più intelligente dell’estensione) non passeranno di sicuro inosservati.

Firebug 1.2 è ora scaricabile direttamente da addon.mozilla.org.

via | edit

Popularity: 1% [?]



Puoi visualizzare il post originale qui.

lug
30

Rails: includere diversi file per diverse viste

 

Popularity: 8% [?]



Puoi visualizzare il post originale qui.

lug
14

Mootools e rollover

 

Popularity: 5% [?]



Puoi visualizzare il post originale qui.

mag
13

Selettori CSS: chi è il più veloce?

 

Popularity: 3% [?]



Puoi visualizzare il post originale qui.

mag
07

Moodalbox

 

Popularity: 3% [?]



Puoi visualizzare il post originale qui.

mag
06

Nuovo stile per Beta Design Studio

 

Popularity: 3% [?]



Puoi visualizzare il post originale qui.

apr
19

Questo tanto discusso CSS Reset

 

Popularity: 3% [?]



Puoi visualizzare il post originale qui.

top