Il plugin permette di inserire in una pagina i bottoni di condivisione dei maggiori social network utilizzando jQuery e CSS. Oltre ai classici social network come Facebook o Twitter è possibile abilitare Whatsapp (solo su mobile) e l’email. Continua a leggere…

Il network manager di Ubuntu 14.04 ha un bug che non permette di importare correttamente i file “conf.ovpn”. Per utilizzare la vpn è necessario configurare la connessione da linea di comando. Continua a leggere…

Se avete una distribuzione Linux probabilmente avrete installato anche Python. E se avete Python avete anche un server integrato che, con un po’ di fantasia, potrebbe essere utile per condivedere temporaneamente una cartella in rete Lan. Basta uno script bash di poche righe da usare con Nautilus (Gnome), Caja (Mate) o con il file manager che preferite. Continua a leggere…

In vista del rilascio di un sito con layout responsive ho cercato una soluzione che mi permettesse di ottimizzare il caricamento delle immagini. Alla base del ragionamento c’è una semplice considerazione: se la risoluzione del device è di 480 pixel è inutile fornire immagini 3 volte più grandi, soprattutto se l’utente non ha a disposizione una connessione a banda larga.

Ho immaginato questa soluzione basandomi su WordPress, dove è semplice avere in automatico diversi tagli della stessa foto. Il limite più grosso della tecnica proposta, quindi, è dare per scontata l’esistenza di diverse versione dello stesso file. A differenza di Adaptive Images non è prevista la creazione di immagini “on the fly”.

Potete vedere la demo accedendo con vari dispositivi se potete.

Prima di passare all’analisi del codice alcune considerazioni importanti.

– Il proof of concept utilizza un cookie, un javascript da 1,1 KB (compresso) e 2 regole da inserire in un file htaccess (se avete accesso alla configurazione del virtualhost, ovviamente, mettete le regole lì dentro. Le elaborazioni saranno più veloci).

– Lo script è volutamente in javascript puro per questioni prestazionali. La prima versione che ho fatto usava jQuery ma, anche se l’adoro, è pur sempre un wrapper e quindi più lento nell’esecuzione. Al primo caricamento, in molti casi, non venivano fornite le immagini giuste per via di una lenta elaborazione. Dopo che la libreria veniva servita dalla cache del browser, ovviamente, la situazione cambiava.

– L’approccio che ho utilizzato inizialmente era di impostare come default le immagini più piccole, per sostituirle all’occorrenza con quelle più grandi.
Dopo tutti i test effettuati ho valutato che fosse meglio agire al contrario. In caso di errori da parte del client il massimo che può accadere è che gli vengano fornite le immagini di peso maggiore; poco male rispetto al caso in cui ad un browser con risoluzione di 1900×1200 vengano mostrate foto 70×70.

– Questa tecnica non si basa sull’analisi degli user-agent ma sulla risoluzione dello schermo dell’utente indipendentemente dal dispositivo che usa. Non era mia intenzione fornire un’immagine per ogni device ma, piuttosto, ragionare per breakpoint (anche abbastanza ampi).
Mi spiego meglio: nella maggior parte dei casi la differenza tra l’immagine desktop e quella per tablet potrebbe essere minima; quello che è importante è riuscire a distinguere le foto tra smartphone e pc. Ecco perchè i breakpoint per default sono 3: small, medium e normal.
Attenzione ad un particolare: il javascript utilizza window.screen.availWidth. Ciò significa che sul mio tablet android, sia inversione portrait che landscape, il valore restituito sarà sempre 1280, ovvero la risoluzione massima impostata. In sostanza do per scontate che se entrate nel sito con una risoluzione la manterrete per tutta la navigazione.

La scelta di comprire con un unico breakpoint tutte le versioni tablet è voluta anche per via di possibili problemi di cache del cookie. Molto dipende anche dai breakpoint che avete costruito voi nel vostro layout responsive.

Messaggio di servizio: questo link serve solo per provare ad indicizzare una pagina.
Continua a leggere…