Monthly Archives: June 2009

network transfer

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:

Loading the player…


Google, the Master Plan. © 2007 O. Halici, J. Mayer

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.

offset con jQuery

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).

miniZoomPan

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.

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(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.