Gian Carlo Mingati. Design and development for interactive media.

Ma quanto costa questo network transfer?
Ho scoperto che la popolarità - passatemi il termine - di alcune pagine di questo sito è talmente elevata (e mi fà piacere, ovviamente) che mi si bruciano più di 30 Gigabytes di network transfer ogni mese; stando alle statistiche della mia (mt) hosting solution, questo sito ha più di 80.000 hits al giorno e circa 4000 visite totali alle singole pagine dei miei plugins jQuery (slideViewer in testa). Google Analytics lo conferma.

Cosa sono le hits e cosa sono le page views? In pratica ogni hit rappresenta la richiesta da parte di un browser di ogni singolo elemento di una pagina - per esempio una pagina con 1 file esterno css, 1 file immagine e la pagina stessa sono 3 hits e 1 page view. E questo, se si supera un certo limite ha un costo: essendo cliente di MediaTemple (mt) dal 2002 ed essendo rimasto sullo shared server, pago poco meno di 120 euro l’anno; oggi, usare (mt) come hosting provider costa almeno 20$ al mese (240 l’anno) … quindi mi tengo il mio servizio base con i suoi limiti di network transfer.
Fino a pochi mesi fa non avevo mai dato uno sguardo a questa faccenda del consumo mensile di banda, ma queste due pagine su jQuery sono a loro volta linkate dalla lista di plugin del sito jQuery (sulla quale chiunque sviluppi un plugin può linkare il suo lavoro) ed è da lì che arriva tutto questo traffico. Inoltre, slideViewer è spesso linkato da quei post sulle “migliori 10, 100, 1000 javascript galleries e/o ajax solutions per il tuo sito” e da lì parte altro traffico.

Ho potuto verificare che se una pagina è molto linkata ed il testo in essa contenuto (ma anche i tags H1, H2 e in genere i tags di intestazione) corrisponde ad un certo tipo di keywords (come per esempio slider, viewer, jquery), ecco che cercandole con Google il primo link è sempre quello alla pagina di slideViewer servita dal mio account su (mt). Insomma sale il PageRank, il famoso algoritmo col quale Google indicizza il world wide web… e diminuisce il network transfer disponibile per il mese.

Ma… a proposito di PageRank:

Insomma, sforare i 30 Giga di network transfer mensili si traduce in un sovraprezzo di $.50 per Giga in più e - ad oggi - siamo già a 4 in più. Non mi resta che diminuire la qualità delle immagini dei miei sliders (peccato) perchè ogni giorno tutte le immagini di quelle pagine vengono servite a 2-3000 utenti e così si fà presto a raggiungere i 30 Giga prima della fine del mese.

Durante la fase iniziale dello sviluppo di un widget jQuery un bel pò più articolato, mi sono ritrovato al punto in cui offset().left e top, ed il loro utilizzo erano chiari; ho quindi deciso di condividere con voi questi ‘effettini’ trasformandoli in un piccolo plugin con funzionalità di Zoom e Pan (ingrandimento e scroll in base alla X e Y del puntatore del mouse).

Si chiama miniZoomPan e funziona così: si prepara il markup composto da una DIV con un ID e dentro ci si mette un’immagine; la classica immagine in un post, per esempio.

<div id="zoom01">
<img src="leaf_s.jpg" />
</div>


Si instanzia il plugin (scaricabile qui) in questo modo:

$(function() {
$("#zoom01").miniZoomPan({
sW: 200, //small image width and height
sH: 250,
lW: 370, //large image width and height
lH: 462
// other options
/*
frameColor: "#cecece",
frameWidth: 1,
loaderContent: "loading..." // text or image tag eg.: "<img src='spinner.gif' />"
*/
})
});


Fatto. Come potete notare sW e sH sono le dimensioni dell’immagine piccola, mentre lW e lH sono quelle dell’ingrandimento. Obbligatoriamente le vs. immagini dovranno avere la parte finale del nome file modificato ad hoc (mycat_s.jpg per la piccola, mycat_l.jpg per la grande).
A questo punto quando vi posizionate sull’immagine, ne viene caricata una di dimensioni maggiori (grande quanto volete) che scrollerà in base alla posizione del mouse. Un preload customizzabile con testo o con una gif informa l’utente del caricamento in corso.

Qui trovate la pagina d’esempio, dove con un minimo di pazienza potrete recuperare il CSS e lo script che comunque per comodità potete prelevare rispettivamente qui e qui. Si tratta di piccolo plugin senza pretese, che però può servire su un online store per visualizzare al volo l’ingrandimento di una maglietta o di un oggetto senza dover cambiare pagina o usare finestre modali.

miniZoomPan plugin. Enjoy.