Come nasce un Antipixel: storia di BlogBabel Rank

Venerdì 18 Maggio, 2007
Aggiornamento: Blogbabel ha chiuso - tutti i servizi, widget e plugin non sono più attivi

Voglio raccontarvi come è nato l'antipixel di BlogBabel, le tecniche di programmazione utilizzate e il prezioso contributo, diretto e indiretto, di voi Blogger, che ha reso tutto questo particolarmente divertente! ;)

10 Maggio

Tutto è iniziato leggendo il Post Visualizzare il ranking Alexa in PHP su phptips.it. In questo Post veniva esposto un metodo per catturare il Rank di Alexa. Così prendendo spunto da questa tecnica ho adattato il codice ed ho pubblicato il primo Post "Catturare il Rank a BlogBabel". A parte la pessima immagine tirata fuori con ImageMagick (perchè non ho avuto voglia di migliorarla), uno dei problemi più fastidiosi era che veniva generata un'immagine (GIF) sul mio server per ogni accesso. Questa strada avrebbe portato, o presto o tardi, ad un immane spreco di spazio... Avevo quindi bisogno di generare un'immmagine temporanea, ad esempio restituendo in runtime l'informazioni dell'immagine senza generarne davvero nessuna (anche creando un file temporaneo, ed eliminandolo subito dopo, sarebbe stato comunque oneroso in termini di time-server e risorse).

10 Maggio - notte

Mi viene l'idea di usare Flash! Il vantaggio è evidente: Flash chiama la mia funzione PHP, preleva il Rank e lo mostra. In questo modo nessuna immagine - nemmeno temporanea - viene creata e le risorse sono salve.
Partendo dal codice PHP che "Cattura il Rank di BlogBabel", ho sfruttato la capacità degli oggetti EMBED e OBJECT - in particolare Flash - di accettare parametri dall'esterno.

In pratica quando si inserisce un ActiveX (tramite il TAG OBJECT) e/o un TAG EMBED, è possibile passare in GET alcuni parametri all'oggetto. Proprio questo veniva fatto nel primo codice proposto:

PLAIN TEXT
HTML:
  1. <!-- Versione Embed -->
  2. <embed src="http://www.undolog.com/services/blogbabelrank.swf?blog=undolog" bgcolor="#ffffff" width="80" height="15" name="blogbabelrank" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
  3. <!-- Versione Embed -->

Come vedete l'attributo SRC oltre a puntare al fiilmato SWF, passa anche un parametro blog, necessario per determinare il vostro blog su BlogBabel.

12 Maggio

Nel frattempo che arrivavano i primi feedback, mi sono dedicato all'aggiornamento della versione in Flash (aggiungendo i menu contestuali). Il codice che ho usato è davvero semplice e sfrutta la comunicazione tra Flash e un Server, in questo caso la mia paginetta PHP su undolog.com. Per capire meglio il giro ecco uno schema:

bbr-schema

Dalla pagina di un Web - il vostro ad esempio - viene caricato il filmato SWF con un parametro in GET (?blog=[vostro codice]). Il codice ActionScript lo preleva, ottenendolo direttamente come variabile nella root del filmato (considerate che per compatibilità ho usato Adobe Flash MX - versione 8 e non l'ultima versione 9):

PLAIN TEXT
Actionscript:
  1. /*
  2. ** Prevelo la variabile in GET
  3. */
  4. blog = (blog != undefined) ? blog : "undolog";

Ora il filmato deve chiedere alla pagina PHP di prelevare da BlogBabel il Rank:

PLAIN TEXT
Actionscript:
  1. /*
  2. ** Domini accessibili
  3. */
  4. System.security.allowDomain("http://www.undolog.com", "http://it.blogbabel.com");
  5. /*
  6. ** Spliting valori di ritorno
  7. */
  8. var ret_value = new Array();
  9. var php_file = "bbr.php";
  10. var send_lv = new LoadVars();
  11. send_lv.onLoad = function(success) {
  12.     if (success) {
  13.         ret_value = send_lv.returnvalue.split("-");
  14.         rank_mc.rank_txt.text = ret_value[0];
  15.         if (ret_value[0] <= ret_value[1]) {
  16.             bck_mc.gotoAndStop(1);
  17.         } else {
  18.             bck_mc.gotoAndStop(2);
  19.         }
  20.     }
  21. };
  22. send_lv.sendAndLoad("http://www.undolog.com/services/" + php_file + "?blog=" + blog, send_lv);

Le righe di codice con gotoAndStop() mi servono solo per cambiare lo sfondo del filmato Flash (rosso o verde). L'oggetto LoadVars chiama la pagina PHP, inviandogli come parametro il blog. Il metodo sendAndLoad() si aspetta un ritorno, che fa scattare l'evento onLoad() dell'oggetto stesso! Il PHP (bbr.php) restituisce i valori a Flash nel seguente modo:

PLAIN TEXT
PHP:
  1. /*
  2. ** Restituisce sulla stdout i risultati prelevati da BlogBabel
  3. */
  4. echo "returnvalue=".$rank."-".$max."-".$min;

Quando scatta l'evento onLoad() nel filmato la variabile ret_value diventa un array, visto che PHP mi restituisce i tre valori che mi servono "RANK-MASSIMO-MINIMO"!

Questa tecnica, tuttavia, diede qualche problema su alcuni Blog (compatibilità W3C) e comuqnue - come sappaimo - produce su Microsoft Internet Explorer quella fastidiosa richiesta "Premi barra spaziatrice per attivare il controllo"!

15 Maggio

Grazie quindi alle segnalazioni di wolly, Axell ed altri, venne fuori che non passava la validazione W3C! Bisognava eliminare il TAG EMBED! Così scrissi una pseudo routine Javascript in grado di inserire dinamicamente il filmato Flash, superando in un colpo solo sia il probelma della compatibilità W3C che il comportamento su Microsoft Internet Explorer:

PLAIN TEXT
HTML:
  1. <!-- Start BlogBabel Rank -->
  2. <script language="javascript1.2" type="text/javascript" src="http://www.undolog.com/services/bbrjs.php?blog=[blog]"></script>
  3. <!-- End BlogBabel Rank -->

Questa è una tecnica davvero simpatica, già discussa su questo Blog. In pratica carico una pagina PHP come script Javascript! Il codice bbrjs.php non fa altro che questo:

PLAIN TEXT
PHP:
  1. <?php
  2.    
  3. if( isset($_GET["blog"]) ) if( $_GET["blog"] != "" ) : ?>
  4.  
  5. document.write ( '<embed src="http://www.undolog.com/services/blogbabelrank.swf?blog=<?=$_GET["blog"]?>" bgcolor="#ffffff" width="80" height="15" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed>');
  6.  
  7. <?php endif  ?>

16 Maggio

Se l'uso di Flash aveva risolto il problema delle immagini temporanee aveva portato con se un po' di pasticci, risolti, alla fine, grazie all'ultimo script; unica soluzione per usare Flash in modo quasi trasparente.

Intanto qualcuno (Gioxx) cominciava a chiedere giustamente anche una - più semplice - versione immagine! Quindi ritorno sui miei passi e cerco di capire come diavolo evitare il problema delle GIF generate sul mio Web Server!

Lampo di genio... (o colpo di fortuna...) stavo visitando il nuovo tools.blogflux.com (che si è da poco fuso un altro servizio di aggregazione Feed: blogtopsite - ora divenuto un'unica cosa sotto il cappello di Bloggy Network) e mi ricordo che offre un simpatico servizio di Button Maker - o Antipixel Maker:

Button Maker

Fantastico! Era quello che serviva! Eseguendo un semplice Reverse Engineering (sbirciando nel codice con il fantastico FireBug di FireFox ;)) del servizio (tra l'altro in rete ce ne sono vari, ma questo era perfetto per il mio scopo), scopro che è composto da una semplice FORM che invia i parametri per la costruzione dell'antipixel in GET (perfetto! Meglio che in POST) ad un pagina che emette direttamente un'immagine!!!! A dir poco eccezionale!!!
Ecco quindi che il codice PHP diventa:

PLAIN TEXT
PHP:
  1. <?php
  2. // Prelevo Rank con il solito metodo
  3. // ....
  4.  
  5. $u = 'http://tools.blogflux.com/buttonmaker/button.php'.
  6.  '?leftText='.$rank.
  7.  '&leftColor='.urlencode("#3169A5").
  8.  '&leftBG='.urlencode("#FFFFFF").
  9.  '&leftAlign=3'.
  10.  '&rightText=BlogBabel'.
  11.  '&rightColor='.urlencode("#FFFFFF").
  12.  '&rightBG='.urlencode($color).
  13.  '&rightAlign=1'.
  14.  '&borderBG='.urlencode("#000000").
  15.  '&buttonBG='.urlencode("#FFFFFF").
  16.  '&divAlign=1'.
  17.  '&buttonSize=1'.
  18.  '&fontFamily=';   
  19.  
  20. $o = '<a target="_blank" href="'.AIM_URL.$_GET["blog"] .'"><img border="0" alt="BlogBabel Rank - Image Version 1.0 - Creato da undolog.com" src="'.$u.'" />';
  21. ?>
  22. document.write( '<?=$o?>' );

(Con questo metodo potete creare qualsiasi antipixel - al peggio intaseremo il server di tools.blogflux.com)

Ancora una volta il codice fornito faceva uso di uno pseudo-Javascript:

PLAIN TEXT
HTML:
  1. <!-- Start BlogBabel Rank -->
  2. <script language="javascript1.2" type="text/javascript" src="http://www.undolog.com/services/bbrimage.php?blog=[blog]"></script>
  3. <!-- End BlogBabel Rank -->

Era giunto il momento di trasformarlo in semplice immagine!

17 Maggio

Sono riuscito ad eliminare lo script usando questo semplice trucco in PHP:

PLAIN TEXT
PHP:
  1. // Prelevo Rank con il solito metodo
  2. // ....
  3. $u = 'http://tools.blogflux.com/buttonmaker/button.php'.
  4.  '?leftText='.$rank.
  5.  '&leftColor='.urlencode("#3169A5").
  6.  '&leftBG='.urlencode("#FFFFFF").
  7.  '&leftAlign=3'.
  8.  '&rightText=BlogBabel'.
  9.  '&rightColor='.urlencode("#FFFFFF").
  10.  '&rightBG='.urlencode($color).
  11.  '&rightAlign=1'.
  12.  '&borderBG='.urlencode("#000000").
  13.  '&buttonBG='.urlencode("#FFFFFF").
  14.  '&divAlign=1'.
  15.  '&buttonSize=1'.
  16.  '&fontFamily=';   
  17.  
  18.  header("Location: ".$u );

Quindi il codice diventava ancora migliore, facendo uso solo del TAG IMG:

PLAIN TEXT
HTML:
  1. <!-- BlogBabel Rank -->
  2. <img alt="BlogBabel Rank - by undolog.com" src="http://www.undolog.com/services/bbroimage.php?blog=[blog]"/>
  3. <!-- BlogBabel Rank -->

Grazie al beta-testing di Gioxx, vengo a scoprire che sul suo Blog viene in qualche modo intercettato l'uso di PHP. Lo stesso Gioxx, infatti, mi consiglia di usare una sintassi simile a quella di FeedBurner - solo un'immagine con SRC privo di indicazioni PHP. Così eseguo l'ultima modifica (o ultima fatica ;)). Grazie all'uso di .htaccess sul mio Web Server posso creare un permalink, o link fittizio, che punta al file PHP di sopra. Quello che volevo ottenere era una sintassi che eliminasse l'estensione PHP dalla chiamata, ovvero:

PLAIN TEXT
HTML:
  1. <!-- BlogBabel Rank -->
  2. <img alt="BlogBabel Rank - by undolog.com" src="http://www.undolog.com/bbrank/[blog]"/>
  3. <!-- BlogBabel Rank -->

Nel caso di undolog:

PLAIN TEXT
HTML:
  1. <!-- BlogBabel Rank -->
  2. <img alt="BlogBabel Rank - by undolog.com" src="http://www.undolog.com/bbrank/undolog"/>
  3. <!-- BlogBabel Rank -->

Per realizzare questa magia basta disporre del supporto del file .htaccess che permette un RE-WRITE trappando il caso (404) di pagina mancante. Sull'header di undolog, quindi, ho inserito queste linee di codice:

PLAIN TEXT
PHP:
  1. $_tmp_uri = $_SERVER["REQUEST_URI"];
  2. $_tmp_cmd = explode("/", $_tmp_uri);
  3. //
  4. switch( $_tmp_cmd[1] ) {
  5.     case "bbrank":
  6.         header ("Location: /services/bbroimage.php?blog=".$_tmp_cmd[2] );
  7.         break;
  8.     default:
  9.         /* Short and sweet */
  10.         define('WP_USE_THEMES', true);
  11.         require('./wp-blog-header.php');
  12.         break;
  13. }

La perfezione, o quasi, era stata raggiunta! Nessuna incompatibilità, nessuno script e nessun PHP, almeno apparentemente. Ecco alla fine schematicamente il giro:

Schema Finale

Giunti alla fine non mi resta che ringraziare tutti voi per i calorosi riscontri ;). UN GRAZIE comulativo a tutti colori che hanno installato e commentato gli svariati Post sull'argomento ;)

DOWNLOAD

  • Per chi desidera (per chi può o è in grado) installare il file PHP sul proprio server invece di passare per undolog.com ecco il sorgente zippato:
    File PHP che cattura il Rank e invia una richiesta a tools.blogflux.com
    bbroimage.zip

Post correlati

Tags: , , , , , , , ,

5 commenti a: “Come nasce un Antipixel: storia di BlogBabel Rank”

  1. getAvatar 1.0 Venerdì 18 Maggio, 2007 alle 15:19
    Napolux ha detto:

    :P Tutto parte da PHPTIPS :P Bene bene… E io che stavo quasi pensando di chiuderlo…

    Rispondi Quota
  2. getAvatar 1.0 Sabato 19 Maggio, 2007 alle 02:54
    P|xeL ha detto:

    Bel lavoro… complimenti! ;-)
    Ciao,
    P|xeL

    Rispondi Quota
  3. getAvatar 1.0 Sabato 19 Maggio, 2007 alle 17:26
    Gioxx ha detto:

    Bravo Undo! Durante la prossima settimana vedo di scrivere qualcosa in merito e cercare di piazzarti anche il secondo mirror per il servizio :)

    Rispondi Quota
  4. getAvatar 1.0 Lunedì 21 Maggio, 2007 alle 19:41
    Alex - Microsmeta ha detto:

    Ciao!

    Ora l’antipixel di Blogbabel è tutto bianco, sia qui che sul mio blog…

    Rispondi Quota
  5. getAvatar 1.0 Lunedì 28 Maggio, 2007 alle 03:56
    Un plugin blogbabelesco [Vittorio Pasteris] | rubriche ha detto:

    [...] Se vi interessa essere opportunamente celoduristi o preferite solo inserire una informazione in più nel vostro blog date una occhiata a BabelRank, un plugin semplice semplice che vi permette di visualizzare in tempo reale le statistiche fornite s BlogBabel. Ovviamente anche il bloggante lo ha adottato per “mostrare i muscoli”. Se volete anche divertirvi con la storia del plugin … [...]

Lascia un commento

TAG XHTML permessi: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Usa <pre> per racchiudere codice