Volando come un Rasteriz

Dopo una lunga sfilza di articoli su jQuery, il focus si sposta su PHP. Oggi realizzeremo una guida capace di spiegarci come poter interrogare delle pagine esterne (magari per scrivere uno spider) impostando un Agent personalizzato: tutto ciò grazie all’utilizzo della libreria cUrl offerta da PHP.

Sia se utilizzate wamp, sia se avete una configurazione LAMP, vi anticipo che c’è da includere la libreria sul PHP.INI.

Per capire se avete curl abilitato o meno, potete creare un file PHP e mettere al suo interno SOLO questo codice:

<? phpinfo(); ?>

Se avrete cUrl attivo, lo capirete da una riga simile a questa:

Bene… se questa è la vostra schermata, siamo sicuri che curl è installato e possiamo procedere con la lettura dell’howto. Diversamente vi consiglio di navigare su Google e cercare una guida per la sua installazione.

<?php

// Inizializziamo il riferimento alla risorsa cURL
$ch = curl_init();

// Impostiamo l'url sul quale bisogna fare la richiesta
curl_setopt($ch, CURLOPT_URL, "http://www.masterix.org");

// Eseguiamo la richiesta
$output = curl_exec($ch);

// Chiudiamo il riferimento alla risorsa cURL e liberiamo le risorse in memoria
curl_close($ch);

?>

Queste semplici righe di codice, ci permettono di interrogare una pagina web e mettere tutto il codice di risposta in una variabile php di nome $output. Tuttavia, per modificare l’agent con cui ci presentiamo al webserver, dobbiamo aggiungere una nuova riga di codice. Trasformiamo quindi il codice sopra, in questo modo:

<?php

// Inizializziamo il riferimento alla risorsa cURL
$ch = curl_init();

// Impostiamo l'url sul quale bisogna fare la richiesta
curl_setopt($ch, CURLOPT_URL, "http://www.masterix.org");

// Impostiamo l'user-agent con il quale bisogna fare la richiesta
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)");

// Eseguiamo la richiesta
$output = curl_exec($ch);

// Chiudiamo il riferimento alla risorsa cURL e liberiamo le risorse in memoria
curl_close($ch);

?>

E con questo abbiamo finito. Per dubbi, correzioni o suggerimenti, commentate

JavaScript ha cambiato il mondo, lo sappiamo tutti noi: jQuery (ma anche le altre librerie, come mootools) l’ha perfezionato.

Per chi non lo conoscesse, jQuery è progetto ambizioso e diffuso che mira a mantenere viva una libreria (per l’appunto jQuery) snella e veloce capace di semplificare i metodi classici di interfacciamento con gli elementi HTML, la gestione degli eventi, le animazioni e le interrogazioni Ajax: tutto con la certezza del cross-browser, ossia la compatibilità con tutti i browser (o comunque con quelli più diffusi).

Ho utilizzato per lungo tempo Mootools ma, visto che le dimensioni contano (in bytes, cosa pensavate? maniaci! ahahah), ultimamente mi sono spostato verso questo progetto: anche perché ha un’interessante libreria di affiancamento definita jQuery-ui che gestisce alcuni aspetti delle interfacce grafiche (come menù accordion, tab, dialog, ecc).

Dopo questa breve (uaaa) premessa, veniamo però al dunque, ossia scorrere delle immagini con un’effetto a scomparsa. Si tratta di un sistema testato che attualmente ho utilizzato per l’homepage della mia azienda (Gruppo Ambita) per poter scorrere in home la presentazione (nel bannerone in alto) dei prodotti che abbiamo sviluppato.

Dal punto di vista grafico, la realizzazione non è difficilissima, e si compone di poche righe per quanto riguarda il css:

#fx_img {
	position: relative;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#fx_img li {
	position: absolute;
	top: 0px;
	left; 0px;
}

Mentre, per l’html:

<ul id="fx_img">
 <li><img src="img/1.jpg" border="0" alt="La prima foto" title="La prima foto" /></li>
 <li><img src="img/2.jpg" border="0" alt="La seconda foto" title="La seconda foto" /></li>
 <li><img src="img/3.jpg" border="0" alt="La terza foto" title="La terza foto" /></li>
 <li><img src="img/4.jpg" border="0" alt="La quarta foto" title="La quarta foto" /></li>
</ul>

Come noterete, si tratta veramente di poche righe per la parte “HTML” e “CSS”. Il discorso varia per la parte relativa al Javascript, ma comunque non si tratta di mille pagine.

var bannerSlider = {};
bannerSlider.ul = null;
bannerSlider.index = -1;
bannerSlider.length = -1;
bannerSlider.timeOut = 10; // in secondi
bannerSlider.started = false;  

bannerSlider.init = function(ulist)
{
 bannerSlider.ul = ulist;
 var els = $(bannerSlider.ul).find('li');
 bannerSlider.length = els.length;
 bannerSlider.hiddenAll(els);
 bannerSlider.viewNext();
}; 

bannerSlider.hiddenAll = function(els)
{
 for (var i=0; i<els.length; i++)
 {
 var el = els.eq(i);
 el.fadeOut(1);
 }
};

bannerSlider.viewNext = function()
{
 if (bannerSlider.length < 1)
 return;

 var els = $(bannerSlider.ul).find('li');

 if (bannerSlider.index == -1)
 {
 els.eq(0).fadeIn((bannerSlider.started) ? 1000 : 5);
 bannerSlider.index = 0;
 setTimeout("bannerSlider.viewNext()", bannerSlider.timeOut*1000);
 bannerSlider.started = true;
 return;
 }

 els.eq(bannerSlider.index).fadeOut(900);

 var next = bannerSlider.index+1;
 if (next > (els.length-1))
 next = 0;

 els.eq(next).fadeIn(1000);
 bannerSlider.index = next;
 setTimeout("bannerSlider.viewNext()", bannerSlider.timeOut*1000);
};

Infine, non ci resta che aggiungere al codice sopra, quello che segue:

$(document).ready(function() {
    bannerSlider.init("#fx_img");
});

In pochissime righe, abbiamo creato l’effetto richiesto. Per chiarimenti o dubbi sul codice, non esitate a commentare.

Hai trovato interessante questo articolo?