Vai al contenuto


Richieste cross-domain con JSONP

In questo articolo tratteremo la possibilità di effettuare richieste asincrone con javascript eliminando la limitazione che si ha utilizzando richieste AJAX con l’oggetto XMLHttpRequest (e suoi corrispondenti su Internet Expolorer) per la quale non posso effettuare richieste su domini diversi da quello in cui è ospitata la pagina web richiedente. La soluzione è chiamata JSONP (JSON with Padding). Ovviamente questo sistema ha implicazioni sulla sicurezza, e quindi bisognerà essere cauti nel suo utilizzo.

Nel nostro esempio andremo a calcolare l’area di un cerchio, creando un servizio web che, preso un parametro raggio, restituirà il valore dell’area.

Il formato di comunicazione tra il servizio web ed il client che fa la richiesta sarà JSON.

Ipotizziamo di avere una pagine web simile alla seguente, dove ci sarà una div risultato nella quale apparirà il risultato dell’elaborazione. Prima della chiusura del body è presente l’inclusione del file javascript.

<!doctype html>
<html lang="it">
	<head>
		<meta charset="utf-8" />
		<title>Calcolo area cerchio JSONP</title>
	</head>
	<body>
		<h1>Calcolo area cerchio</h1>
		<div id="risultato">

		</div>
	<script src="cerchio.js"></script>
	</body>
</html>

Il file javascript cerchio.js ha al suo interno un oggetto cerchio con due metodi: uno per effettuare la richiesta al servizio web, ed un altro (callback) che visualizzerà il risultato nella pagina web. Potete notare come, oltre a passare il parametro raggio al servizio web, verrà passato anche un riferimento alla funzione javascript che vogliamo eseguire una volta ricevuta la risposta. Si creerà quindi una vera e propria chiamata a questa funzione creando un inclusione di script che ha come indirizzo quello del servizio web. Lanciamo la richiesta al caricamento della pagina tramite cerchio.creaRichiesta();.


var cerchio = {
	visualizzaRisultato: function(data) {
		var contenitoreRisultato = document.getElementById("risultato");
		contenitoreRisultato.innerHTML = data.area;
	},

	creaRichiesta: function() {
		var script = document.createElement("script");
		script.src = "http://www.dominiodelservizio.com/area_cerchio.php?callback=cerchio.visualizzaRisultato&raggio=5";
		document.body.appendChild(script);
	}
}

window.onload = function(){
	cerchio.creaRichiesta();
}

Una possibile implementazione lato server del servizio web sarà la seguente:

$raggio = isset($_GET['raggio']) ? $_GET['raggio'] : 1;
$area = $raggio * $raggio * pi();
echo $_GET['callback'].'({"area" : "'.$area.'"})';

in questo modo un esempio di risposta del server sarà: cerchio.visualizzaRisultato({”area” : “78,539816339745″});

A patto di creare sistemi sicuri lato server, JSONP è un ottimo metodo per creare richieste dai nostri javascript. Ha anche lati negativi, come la limitazione nell’utilizzo del formato JSON ed il fatto che per i nostri script sarà difficile intercettare errori 404. Nei casi in cui i nostri servizi sono tutti residenti sullo stesso dominio, il metodo "classico" per creare richieste AJAX rimane quello preferibile.

Postato in Articoli generici. Taggato con , , , , , .

Canonical tag: evitare i contenuti duplicati

Vedremo in questo articolo analizzeremo il canonical tag dandone descrizione e modalità di utilizzo.

Che cos’è il canonical tag?

Il canonical tag è un meta tag che troviamo nell’intestazione html di una pagina web. Ha la funzione di indicare ad i motori di ricerca qual è la versione canonica dell’URL della pagina in corso di visualizzazione. Il suo scopo è quindi di impedire ad i motori di indicizzare le pagine con contenuto duplicato. Sul web si può trovare indicato anche con il nome ‘rel canonical’, ‘rel = canonical’, ‘tag URL canonical’ ‘tag rel canonical’ ‘tag canonical’

Come viene utilizzato il canonical tag?

Il canonical tag è una nuova soluzione introdotta da Google, Live e Yahoo che fornisce uno strumento (non è l’unico) per risolvere in maniera “rapida” il problema dei contenuti duplicati.
Sono molti gli esempi di pagine web che generano gli stessi o simili contenuti da diversi URL; in questo senso il  canonical tag può essere utilizzato per scegliere ed indicare al motore la versione master da utilizzare.
Vediamo un elenco di URL che indirizzano alla stessa pagina web e che di conseguenza sarebbero interpretati come contenuti duplicati dai motori di ricerca.

http://www.nomedominio.it/prodotto.php?oggetto=nome-oggetto
http://www.nomedominio.it/prodotto.php?oggetto=nome-oggetto&categoria=nome-categoria
http://www.nomedominio.it/prodotto.php?oggetto=nome-oggetto&id=0123&sessionid=567

Dunque inseriamo in TUTTE le pagine di cui sopra,  l’indirizzo che vogliamo rendere  principale, ad esempio http://www.nomedominio.it/prodotto.php?oggetto=nome-oggetto

<!– ESEMPIO UTILIZZO CANONICAL TAG –>

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Titolo pagina web</title>
<link rel=”stylesheet” type=”text/css” media=”all”>fogliostile.css” />
<link rel=”canonical” href=”http://www.nomedominio.it/prodotto.php?oggetto=nome-oggetto“/>
</head>

Tag canonical e redirect 301

L’attributo Canonical tag è simile ad un reindirizzamento 301. Inserendo il nostro canonical tag stiamo dicendo infatti ad i motori che più pagine devono essere considerate come una sola (e fin qui è identico al 301) ma senza in realtà reindirizzare i visitatori verso il nuovo URL.

La differenza principale sta quindi nel fatto che un reindirizzamento 301 redirige tutto il traffico (sia bot che i visitatori umani) mentre il canonical tag è solo per i motori. Inoltre con una redirect 301 è possibile effettuare reindirizzamenti cross-domain, ossia è possibile reindirizzare una pagina da www.dominio1.com a www.dominio2.com. Questo utilizzo è invece precluso al canonical tag che opera esclusivamente su un dominio singolo.

Approfondimenti

Postato in Articoli generici, SEO. Taggato con , , , .

Escludere un indirizzo ip statico dalle statistiche di Google Analitics

Un ottimo modo per “pulire” le statistiche di Google Analitics ed avere quindi della statistiche più affidabili è quello di escludere le visite dal proprio indirizzo IP statico. Per fare questo è necessario impostare un filtro.

Nella schermata inziale di Analitics, in basso sulla destra, troviamo il link “Gestione filtri”. Creiamo ora il nostro filtro ex-novo selezionando  ”Aggiungi filtro“.

  • Nome filtro: assegnare un nome chiaro e facilmente comprensibile. Questo perché il filtro creato potrà essere utilizzato su più siti web. In sostanza se creiamo un filtro per escludere l’ip statico ad esempio di un’azienda, potremmo chiamarlo “Escludi Ip Nome Azienda”. Se in futuro volessimo escludere questo stesso  ip da altri siti del nostro Google account, non dovremmo far altro che selezionare “Escludi Ip Nome Azienda” fra i filtri memorizzati.
  • Tipo filtro: lasciare selezionato “filtro predefinito”. Dunque dalla prima select selezionare “Escludi”, dalla seconda “traffico dagli indirizzi IP” ed infine nella terza select selezionare l’opzione che si presta meglio alle nostre esigenze. Se conosciamo perfettamente il nostro indirizzo IP selezioneremo quindi “uguali a” . Inserire quindi l’ip nel campo preposto. ( se non lo conoscete lo trovate qui )
  • Applica filtro ai profili dei siti web: selezionare il sito web su cui vogliamo applicare il filtro ed aggiungerlo.

escludere-un indirizzo-ip-statico-dalle-statistiche-di-Google-Analitics

Postato in Articoli generici, Google. Taggato con , , .

.htaccess: redirect page 301

In questo breve articolo vedremo un’altra interessante direttiva di Apache specificabile nel nostro file .htaccess.
Con la Redirect 301 abbiamo la possibilità di redirigere un qualsiasi URL verso un nuovo URL.

redirect 301 /old/old.html http://mysite/new.html

Aggiungendo questa riga di codice al nostro file .htaccess se dal browser tentiamo di andare alla pagina http://mysite/old/old.html verremo rediretti alla pagina http://mysite/new.html.

Si noti che il comportamento di Apache a questa direttiva in pratica è quello di fare una sorta di “replace” del nuovo valore (new.html) sul vecchio (old/old.html). Infatti se spegifichiamo una direttiva di questo tipo:

redirect 301 /old/ http://mysite/new/

avremo come effetto quello che tutti gli URL di pagine contenute in old/ (es. old/page1.html, old/page2.html, …) verranno rediretti ad un corrispondente nella cartella new (new/page1.html, new/page2.html, ……)

Postato in .htaccess. Taggato con , , .

.htaccess: disabilita directory listing

In un precedente articolo abbiamo visto cosa sono i files .htaccess e come impostare il nostro server Apache al loro uso, mentre in questo vedremo uno degli usi più utili e comuni che si fa dei files in questione.
Spesso quando si sviluppa un sito web si creano diverse directory per contenere files che le pagine html utilizzano come le immagini, i files css, i files di javascript ecc. Supponiamo ad esempio che nella nostra applicazione abbiamo creato una directory images che contiene le immagini del sito. Se proviamo dal browser ad accedere all’indirizzo di tale cartella avremo un output simile al seguente.

directory listing

directory listing

Ciò avviene essenzialmente per il fatto che sovente tali cartelle non contengono un file index.html.
Spesso si ha l’esigenza, anche per questioni di sicurezza, di disabilitare tale comportamento e per farlo basta specificare una semplice direttiva nel file .htaccess.

Options -Indexes

Il risultato dell’uso di tale direttiva è che accedendo all’URL adesso si riceve un messaggio di errore 403.

403 error directory listing

403 error directory listing



Postato in .htaccess. Taggato con , , , .

Apache: i file .htaccess

1. I file htaccess.

I file .htaccess sono dei file che contengono “direttive” di Apache. In quanto tali con essi è possibile specificare svariati comportamenti ed impostazioni del web server. Ad esempio li si può usare per proteggere directory con user e pass, limitare l’accesso a determinati files e cartelle, riscrivere gli URL e cambiare alcune variabili di configurazione del PHP.

2. Funzionamento

Apache quando riceve una richiesta, prima di eseguirla, verifica se esiste un file .htaccess nella cartella del file richiesto o in una cartella precedente. In tal caso lo interpreta a run-time e si configura in modo coerente alle direttive presenti all’interno del file. Dato che apache ricarica il file ad ogni richiesta non è necessario riavviarlo in caso di modifiche del file .htaccess.

3. Problematiche

Se il vostro server non funziona correttamente con i files .htaccess la causa potrebbe risiedere nella sua configurazione.  A tal proposito ricordiamo che affinché il vostro web server Apache funzioni correttamente con i files .htaccess è necessario che nel file di configurazione di Apache la direttiva AllowOverride si impostata su ALL.


Postato in .htaccess. Taggato con , , .

Guida introduttiva di Google all’ottimizzazione per motori di ricerca

Circa due anni fa Google pubblicò il  primo SEO Starter Guide in inglese. Da pochi giorni lo troviamo tradotto in  40 lingue fra cui l’italiano.

Guida introduttiva di Google all’ottimizzazione per motori di ricerca (SEO)

Per coloro che già conoscevano la versione in inglese, segnalo che ne è disponibile una nuova ed aggiornata  rispetto alla precedente. Le novità predominanti sono la presenza di un glossario di termini, l’utilizzo di ulteriori immagini di esempio e le linee base sui modi per ottimizzare il sito per dispositivi mobili (probabilmente l’integrazione più interessante e degna di nota rispetto alla prima guida)

Search Engine Optimization Starter Guide NUOVA VERSIONE IN INGLESE

Postato in Articoli generici, Google. Taggato con .

Riconoscimento browser smartphone con javascript

In questo breve articolo spiegheremo come sviluppare una semplice classe javascript per il riconoscimento del browser di uno smartphone.
Partiamo con la base, ovvero su come avere informazioni sul browser. Questo può essere facilmente realizzato tramite la chiamata a navigator.userAgent che, nel caso del’iPhone, restituirà una stringa simile alla seguente:

HTTP_USER_AGENT=Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C25 Safari/419.3

Per ogni dispositivo dovrò quindi avere un’istuzione condizionale che mi permetta di capire qual’è il browser utilizzato in quel momento. Nella nostra classe andremo a distinguere tra i dispositivi mobili più comuni: iphone, ipod, symbian S60, symbian, webkit, android, windows cs, blackberry e palm.

Per riconoscere ad esempio un iPhone, non dovrò far altro che scrivere

var uagent = navigator.userAgent.toLowerCase();
if (uagent.search("iphone") > -1)
	alert("Siamo su iPhone");
else
	alert("Non siamo su iPhone");

E allora, riportando tutto in una classe avrò:

var SmartphoneDetector = {
	deviceIphone : "iphone",
	deviceIpod : "ipod",
	deviceS60 : "series60",
	deviceSymbian : "symbian",
	engineWebKit : "webkit",
	deviceAndroid : "android",
	deviceWinMob : "windows ce",
	deviceBB : "blackberry",
	devicePalm : "palm",
	uagent : navigator.userAgent.toLowerCase(),

	// function list
	detectIPhone : function(){
		if (this.uagent.search(this.deviceIphone) > -1)
			return true;
		else
			return false;
	},
	detectIPod : function(){
		if (this.uagent.search(this.deviceIpod) > -1)
			return true;
		else
			return false;
	},
	detectIphoneOrIpod : function(){
		if (this.detectIphone())
			return true;
		else if (this.detectIpod())
			return true;
		else
			return false;
	},
	detectS60OssBrowser : function(){
		if (this.uagent.search(this.engineWebKit) > -1)
		{
			if ((this.uagent.search(this.deviceS60) > -1 ||
					this.uagent.search(this.deviceSymbian) > -1))
				return true;
			else
				return false;
		}
		else
			return false;
	},
	detectAndroid : function(){
		if (this.uagent.search(this.deviceAndroid) > -1)
			return true;
		else
			return false;
	},
	detectWebkit : function(){
		if (uagent.search(engineWebKit) > -1)
			return true;
		else
			return false;
	},
	detectAndroidWebKit : function(){
		if (this.detectAndroid())
		{
			if (this.detectWebkit())
				return true;
			else
				return false;
		}
		else
			return false;
	},
	detectWindowsMobile : function(){
		if (this.uagent.search(this.deviceWinMob) > -1)
			return true;
		else
			return false;
	},
	detectBlackBerry : function(){
		if (this.uagent.search(this.deviceBB) > -1)
			return true;
		else
			return false;
	},
	detectPalm : function(){
		if (this.uagent.search(this.devicePalm) > -1)
			return true;
		else
			return false;
	}
}

Una volta salvato il file ed incluso nella nostra pagina, potrò utilizzare la classe in questo modo:

if(SmartphoneDetector.detectIPhone()){
	alert("Siamo su iPhone");
}
if(SmartphoneDetector.detectAndroid()){
	alert("Siamo su Android");
}
if(SmartphoneDetector.detectWindowsMobile()){
	alert("Siamo su Windows Mobile");
}

Potete scaricare direttamente la classe SmartphoneDetector.js

Postato in Articoli generici, Funzioni, Internet, Javascript. Taggato con , , , , , , , .

gRaphaël – Creazione di grafici

In questo articolo introduciamo le librerie gRaphaël, un set di utiity per la creazione di grafici sulle proprie pagine web che ha come base la libreria RaphaëlJS già introdotta in questo blog.
L’utilizzo di gRaphaël ci consentirà la creazione di vari tipi di grafici in maniera molto semplice. Useremo per ora soltanto due tipologie di grafici: grafico a barre e grafico a torta. Innanzitutto prepariamoci a scrivere il codice scaricando la libreria di base RaphaëlJS dal sito http://raphaeljs.com/. Poi andiamo sul sito http://g.raphaeljs.com/ e scarichiamo il file g.raphael.js. Questi due file saranno la base per la costruzione dei grafici, infatti basterà poi scegliere il tipo di grafico di cui avremo necessità, e scaricarne il relativo file javascript. Nel nostro esempio avremo bisogno di un grafico a barre e di un grafico a torta. Scaricheremo allora i file g.bar.js e g.pie.js.

Siamo ora pronti a visualizzare il codice del nostro esempio

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>GRaphael</title>
<style type="text/css">
	#bar-canvas{
		width:500px;
		height:300px;
		margin: 0 auto;
	}
	#pie-canvas{
		width:500px;
		height:300px;
		margin: 0 auto;
	}
</style>
<script type="text/javascript" src="js/raphael-min.js"></script>
<script type="text/javascript" src="js/g.raphael-min.js"></script>
<script type="text/javascript" src="js/g.bar-min.js"></script>
<script type="text/javascript" src="js/g.pie-min.js"></script>
<script type="text/javascript">
	var sorgenteDati = [150, 200, 90, 180, 40];
	window.onload = function(){
		var barCanvas = new Raphael("bar-canvas", 500, 300);
		barCanvas.g.barchart(0, 0, 500, 300, sorgenteDati, {type: "soft"});

		var pieCanvas = new Raphael("pie-canvas", 500, 300);
		pieCanvas.g.piechart(250, 150, 100, sorgenteDati);
	}

</script>
</head>
<body>
<div id="bar-canvas"></div>
<div id="pie-canvas"></div>
</body>
</html>

Abbiamo innazitutto incluso nell’ordine la libreria di base raphael-min.js e la libreria di base per i grafici g.raphael-min.js. Successivamente sono stati inclusi g.bar-min.js e g.pie-min.js in quanto andremo a creare due tipologie di grafico. Come valori (variabile sorgenteDati) per i grafici abbiamo utilizzato quelli di un precedente articolo nel quale avevamo creato un grafico a barre con il solo utilizzo delle RaphaëlJS. Confrontando il codice dei due articoli si vedrà come l’utilizzo delle gRaphaël semplifichi di molto il nostro lavoro. L’uilizzo è molto semplice: come sempre andremo a creare una div per ogni canvas che vorremo creare, assegnadogli un id. Nel codice javascript inizializzeremo i due riquadri tramite var barCanvas = new Raphael(”bar-canvas”, 500, 300); e var pieCanvas = new Raphael(”pie-canvas”, 500, 300);. Al primo riquadro assegneremo un grafico a barre tremite barCanvas.g.barchart(0, 0, 500, 300, sorgenteDati, 0, {type: “soft”}); che ci dice di creare un grafico a barre che parta dalla coordinata 0,0 ed abbia dimensioni 500×300, che utilizzi come dati l’array sorgenteDati, ed abbia la caratteristica grafica soft (è possibile utilizzare anche round e sharp, che creeranno angoli più o meno arrotondati). Al secondo riquadro assegneremo un grafico a torta tramite  pieCanvas.g.piechart(250, 150, 100, sorgenteDati); che crea una torta con centro nelle coordinate 250,150 e raggio 100, e che ha come dati quelli provenienti dall’array sorgenteDati.

Il risultato sarà il seguente

Esempio utilizzo gRaphael

Esempio di utilizzo delle librerie gRaphael

Postato in Articoli generici, Javascript.

Php > Copia directory ricorsivamente

Lo script seguente permette di copiare ricorsivamente l’intero contenuto di una directory in una destinazione specificata.

1. Lo script

function full_copy( $source, $destination)
{
        if ( is_dir( $source ) ) {
            @mkdir( $destination );
            $d = dir( $source );
            while ( FALSE !== ( $entry = $d->read() ) ){
                if ( $entry == '.' || $entry == '..' ){
                    continue;
                }
                $Entry = $source . '/' . $entry;
                if ( is_dir( $Entry )){
                   full_copy( $Entry, $destination . '/' . $entry );
                   continue;
                }
                copy( $Entry, $destination . '/' . $entry );
            }
            $d->close();
        }else{
            copy( $source, $destination );
        }
    }

Postato in Funzioni, PHP. Taggato con , , .