Skip to content


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

Posted 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 );
        }
    }

Posted in Funzioni, PHP. Tagged with , , .

Php > MySQL: comando source

Nella gestione di sistemi web spesso si può avere la necessità di caricare file .sql nel nostro database direttamente da uno script php.

1. Problema

Il problema principale che si deve affrontare è dovuto al fatto che il comando source, utilizzabile da linea di comando, non fa parte delle librerie standard di mysql per php. Infatti se tentiamo di lanciare questo comando da php:

mysql_query('source file_path');

avremo come risposta un tipico errore di sintassi:

Source failed: You have an error in your SQL syntax;
check the manual that corresponds to your MySQL server
version for the right syntax to use near 'source file_path' at line 1

2. Soluzione

La soluzione a tale problema è molto semplice. La riga di codice da inserire è la seguente:

shell_exec('mysql -u username -ppassword dbname < file_path')

In questo modo il comando viene passato direttamente alla shell che lo esegue esattamente come farebbe se lo scrivessimo noi dalla linea di comando. Naturalmente, perchè lo script funzioni, è necessario che sulla macchina in cui gira il webserver sia installato un client (su linea di comando) di mysql.

Posted in Articoli generici, MySQL. Tagged with , , , .

Google map: calcola indicazioni stradali

Proseguendo la nostra panoramica sulle Api di Google Map in questo articolo vedremo come realizzare una mappa con puntatore (marker) implementando la funzionalità di “Calcola percorso” che permetterà all’utente di trovare facilmente le indicazioni stradali per raggiungere la destinazione specificata da un qualunque punto di partenza. Prima di proseguire con la lettura di questo articolo sarebbe preferibile leggere quest’altro articolo introduttivo.

1. Registrare una API key

Il primo passo da effettuare è rigistrare una chiave per il proprio dominio. Per questa procedura rimando al seguente articolo.

2. Import Google map API

Ottenuta la chiave la prima cosa che dobbiamo fare è importare le API sulla nostra pagina. A tal proposito basta inserire nel codice questa riga:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAy5MGb6ekAenysCb6jvQABBQBlhnV4cuz6vqJJD4RnEQTD9BFjxRBE8PR2TiWclvsHuX-X4dKUmmRcw" type="text/javascript"></script>

3. Lo script

Il codice seguente contiene il sorgente dello script che implementa la mappa con marker e la funzionalità “Calcola percorso”. Tale script va naturalmente aggiunto al codice della pagina web in cui intendiamo aggiungere la nostra mappa.

<script type="text/javascript">

var geocoder;
var toLatValue;
var toLngValue;
var div_percorso;
var zoom;
var marker_showed;
var markerLat;
var markerLng;
var markerInfo;

function initialize(div_id_map, div_id_percorso, latitudine, longitudine, info) {

 if (GBrowserIsCompatible()) {

 map = new GMap2(document.getElementById(div_id_map));
 div_percorso = document.getElementById(div_id_percorso);
 markerLat = latitudine;
 markerLng = longitudine;
 markerInfo = info;
 zoom = 16;
 var latlng = new GLatLng(markerLat, markerLng);
 marker_showed = false;
 gdir = new GDirections(map, div_percorso);
 geocoder = new GClientGeocoder();
 map.setCenter(latlng, zoom);
 map.addControl(new GSmallMapControl());
 map.addControl(new GMapTypeControl());
 GEvent.addListener(gdir, "error", handleErrors);
 mostraMarker();
 geocoder = new GClientGeocoder();
 }
}

function mostraMarker(){
 var latlng = new GLatLng(markerLat, markerLng);

 if(!marker_showed){

 var latlngatt = new GLatLng(markerLat, markerLng);
 var mar = createMarker(latlngatt, 0, markerInfo)
 map.addOverlay(mar);
 mar.openInfoWindowHtml(markerInfo);
 marker_showed = true;
 }

 map.setCenter(latlng, zoom);
}

function showDirection(){

 var fromStato = document.getElementById("fd_stato");
 var fromProvincia = document.getElementById("fd_provincia");
 var fromComune = document.getElementById("fd_comune");
 var fromVia = document.getElementById("fd_via");

 toLatValue = markerLat;
 toLngValue = markerLng;

 var address = fromVia.value + ", " + fromComune.value + ", " + fromProvincia.value +", " + fromStato.value;
 geocoder.getLocations(address, showDirection2);

}

function showDirection2(response){
 map.clearOverlays();
 if (!response || response.Status.code != 200) {
 alert("Impossibile trovare l\'indirizzo specificato.");
 marker_showed = false;
 mostraMarker();
 }else{

 place = response.Placemark[0];
 fromPoint = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
 toPoint = new GLatLng(toLatValue, toLngValue);
 setDirections2(fromPoint, toPoint);

 }
}

function setDirections2(fromAddress, toAddress) {
 var arr = new Array();
 arr[0] = fromAddress;
 arr[1] = toAddress;
 gdir.loadFromWaypoints(arr, {"locale" : "it"});
 marker_showed = false;
}

function createMarker(point,number, string) {
 var marker = new GMarker(point);
 GEvent.addListener(marker, "click", function() {
 marker.openInfoWindowHtml(string);
 });
 return marker;
}
function showAddress(address) {
 if (geocoder) {
 geocoder.getLatLng(
 address,
 function(point) {
 if (!point) {
 alert(address + " not found");
 } else {
 map.setCenter(point, 15);
 var marker = new GMarker(point);
 map.addOverlay(marker);
 marker.openInfoWindowHtml(address);
 }
 }
 );
 }
}

function cancella_percorso(){
 gdir.clear();
 mostraMarker();
}

function handleErrors(){
 if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS){
 alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);

 }else if (gdir.getStatus().code == G_GEO_SERVER_ERROR){
 alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);

 }else if (gdir.getStatus().code == G_GEO_MISSING_QUERY){
 alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);

 }else if (gdir.getStatus().code == G_GEO_BAD_KEY){
 alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);

 }else if (gdir.getStatus().code == G_GEO_BAD_REQUEST){
 alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);

 }else {
 alert("An unknown error occurred.");

 }
 mostraMarker();
}

</script>

Per una questione di pulizia del codice sarebbe buona norma non copiare e incollare il codice sorgente dello script direttamente nella pagina html ma scriverlo in un file .js che successivamente viene importato nel codice html.

4. La pagina HTML

Nel body della pagina html che implementerà la mappa è necessario mettere una div per la visualizzazione della mappa, una div dove stampare le indicazioni stradali e una form dove l’utente può specificare il punto di partenza dal quale calcolare il percorso.

<div id="mappa" style="width:100%;height:400px;"></div>
<form action='#mappa' onSubmit='showDirection(); return false;'>

  <div style="padding-top:10px;">Scopri il percorso. inserisci di seguito il tuo punto di partenza:</div>
  <div style="padding:10px;">

     Stato:
     <input type='text' id='fd_stato' >
     Provincia:
     <input type='text' id='fd_provincia' >
     Comune:
     <input type='text' id='fd_comune' >
     Via:
     <input type='text' id='fd_via' >

     <input type='submit' value='Mostra percorso'>
     <input type='button' value='Cancella percorso' onClick='cancella_percorso();'>

  </div>
  <div id="percorso">
  </div>
</form>

5. window.onload

L’ultimo passo consiste nell’inserire, all’evento window.onload della pagina html, una chiamata alla funzione initialize() che ha il compito di inizializzare la mappa.

<script type="text/javascript">                

  window.onload = function(){

    var idMap = 'mappa';
    var idPercorso = 'percorso';
    var latitudineMarker = 42.050733;
    var longitudineMarker = 13.9219903;
    var infoMarker = 'Blogink.it';

    initialize("mappa", "percorso", latitudineMarker, longitudineMarker, infoMarker);

  }

  window.onunload = function(){

    GUnload();

  }

</script>

La variabile idMap deve prendere il valore che abbiamo dato all’attributo id della div nel quale vogliamo che compaia la mappa. Allo stesso modo la variabile idPercorso prende il valore dell’id della div nel quale vogliamo che vengano stampate le indicazioni stradali.
Le variabili latitudineMarker e longitudineMarker devono invece prendere le coordinate (latitudine e longitune) del punto nel quale vogliamo che appaia il nostro marker e che dunque sarà la destinazione del percorso calcolato. Per trovare facilmente le coordinate di una determinata via rimando al questo articolo. Infine nella variabile infoMarker possiamo inserire del testo che apparirà nella tipica nuvoletta che compare al click del marker.

6. Esempio

Un esempio di quanto esposto in questo articolo è visionabile qui.

Posted in Articoli generici, Google Map, Javascript. Tagged with , , , , , , .

Raphaël JS – Eventi

Questo articolo cercherà di fornire le basi per la gestione di eventi sugli oggetti creati con la libreria Raphaël JS. Gli eventi gestibili sono: click, dblclick, mousedown, mousemove, mouseout, mouseover, mouseup, hover. La sintassi sarà element.TIPO_EVENTO(function(event){ … }); Inoltre sarà possibile rimuovere l’evento associato ad un oggetto utilizzando gli eventi unclick, undblclick, ed in generale con la sintassi element.unTIPO_EVENTO(function(event){ … }).

L’esempio seguente mostrerà un cerchio con due animazioni associate quando il mouse è sopra l’oggetto e quando esce dall’oggetto. Sarà poi visualizzato un alert al click sull’oggetto.

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Eventi Raphael JS</title>
		<script type="text/javascript" src="js/raphael-min.js"></script>
		<style type="text/css">
			#canvas {
	            height: 480px;
	            margin: 0 auto;
	            text-align: left;
	            width: 640px;
	        }
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var paper = new Raphael("canvas", 640, 480);
				var circle = paper.circle(50, 50, 40).attr({
						gradient: '90-#526c7a-#64a0c1',
						stroke: '#3b4449',
						'stroke-width': 10,
						'stroke-linejoin': 'round'
				}).mouseover(function(){
					this.animate({"fill-opacity": .50}, 500);
				}).mouseout(function(){
					this.animate({"fill-opacity": 1}, 500);
				}).click(function(){
					alert("cliccato il cerchio");
				});
			}
		</script>
	</head>
	<body>
		<div id="canvas"></div>
	</body>
</html>

L’esempio è di facile comprensione, associando all’oggetto circle tre eventi tramite assegnazione concatenata. Nulla di più immediato, introducendo tra l’altro la funzione animate che permette di cambiare gli attributi dei nostri oggetti in un intervallo determinato di tempo, nel nostro caso 500 millisecondi, ovvero mezzo secondo. Al click apparirà un messaggio di alert.

Esempio di utilizzo degli eventi con le Raphael JS

Esempio di utilizzo degli eventi con le Raphael JS

Da questo semplice esempio possiamo prendere spunto per creare pulsanti, o creare semplici effetti di rollhover su elementi presenti nelle nostre pagine.

LINK

Posted in Articoli generici, Javascript.

Google map: trova latitudine e longitudine di una via

In un articolo precedente abbiamo visto come integrare nel nostro sito web una semplice mappa con puntatore grazie alle API di Google map. Si è visto che per posizionare il puntatore (marker) bisogna fornire le coordinate di latitudine e longitudine del punto. Si ha, dunque, spesso la necessità di trovare queste coordinate per un indirizzo particolare del quale naturalmente non conosciamo la latitudine e la longitudine.

1. Trova le coordinate di una via

Utilizzando lo script messo a disposizione è possibile trovare facilmente le info che desideriamo. Basta inserire l’indirizzo che cerchiamo e cliccare su cerca per far si che lo script automaticamente faccia comparire il marker nella posizione specificata e nei due cambi in basso le coordinate del punto cercato. L’indirizzo va inserito nella forma: indirizzo, comune, provincia, nazione.

trova latitudine longitudine

Vai allo script

2. Raffinare la ricerca

Per raffinare ulteriormente la posizione del marker abbiamo la possibilità di cliccare sullo stesso e trascinarlo a piacere nella mappa. Una volta rilasciato il tasto sinistro del mouse il marker si posizionerà nel nuovo punto e nei campi in basso apparirà la latitudine e la longitudine del punto corrente.

Posted in Articoli generici, Google Map, Javascript. Tagged with , , , , , , , .

4G LTE: la tecnologia a banda larga di “quarta generazione”

Long Term Evolution, il prossimo passo in avanti per i sistemi 3G wireless basati su tecnologia GSM / UMTS, è stato approvato a gennaio dal 3rd Generation Partnership Project – il che apre ampi scenari alla sperimentazione utilizzando l’alta velocità senza fili. LTE rappresenta infatti la direzione verso la quale gli operatori di reti mobili si stanno sempre più direzionando, con un futuro in cui la banda larga wireless crescerà in velocità di 50Mbps. Tutti i carrier GSM e larga parte dei vettori CDMA, tra cui Verizon Wireless, l’operatore n.1 wireless negli Stati Uniti, sono ormai orientati ed a buon punto nella pianificazione delle reti LTE.

Il 16 febbraio la telefonia mobile ed il mondo del settore telefonico si sono dati appuntamento a Barcellona, in occasione del Mobile World Congress per mostrare i loro ultimi prodotti. Sono stati molti i grandi brand che hanno esposto i nuovi sistemi 4G Long-Term Evolution, standard che dovrebbe essere finalizzato per il prossimo anno.

La coreana LG Electronics e la Nortel Networks introducono un sistema LTE tale da fornire una connessione mobile a banda larga che permetterà “ad un utente in viaggio su un treno di guardare video in streaming da YouTube.” Specifico per completezza che le distribuzioni commerciali di LTE sono a più di un anno di distanza, quindi ciò che viene prospettato resta per il momento ipotetico. Ma non c’è dubbio che, insieme con il WiMax, LTE è pronta a far evolvere in maniera esponenziale la competitività tecnologia per operatori di telefonia mobile. La maggior parte grandi vettori sono concordi nell’allinearsi alla tecnologia LTE, come successore per le reti cellulari.

Sia LTE che WiMax hanno attirato le previsioni ottimistiche degli analisti: le previsioni di Juniper Research anticipano che quasi 24 milioni saranno gli abbonati in tutto il mondo per l’uso dei servizi LTE entro il 2013, il WiMax ne attirerà più di 80 entro il 2012.

Posted in Articoli generici, Internet. Tagged with , , , , , .

Raphaël JS – una perfetta libreria grafica

Raphaël JS è una libreria Javascript (scritta da Dmitry Baranovskiy) dedicata alla grafica vettoriale e di incredibile potenza. Raphaël utilizza le SVG W3C Recommendation ed il VML come base per la creazione degli oggetti grafici. Questo ha naturalmente un notevole vantaggio: ogni oggetto, entrando a far parte del DOM, può essere associato ad eventi e può essere modificato. La compatibilità è garantita per tutti i moderni browser.

Entriamo subito a conoscere questa libreria.

Scarichiamo direttamente la libreria o facciamolo tramite il sito web (http://raphaeljs.com/). Nella versione compressa la libreria ha una dimensione inferiore a 60 Kb. Osservandone le potenzialità è una dimensione ottima.

Nel nostro primo esempio andremo a creare un semplicissimo grafico a barre.

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Esempio Raphael JS</title>
		<script type="text/javascript" src="js/raphael-min.js"></script>
		<style type="text/css">
		#canvas {
	            height: 300px;
	            margin: 0 auto;
	            text-align: left;
	            width: 640px;
		    border:1px solid #999;
	        }
		</style>
		<script type="text/javascript">
			var sorgenteDati = [150, 200, 90, 180, 40];
			window.onload = function(){
				var paper = new Raphael("canvas", 640, 300);
				var text = paper.text(100, 50, 'Statistiche');
				text.attr({opacity: 1, "font-size": 25, fill: "#696", "font-weight":600});
				var currentX = 100;
				for(var i = 0; i < sorgenteDati.length; i++){
					var roundedRect = paper.rect(currentX, 300 - sorgenteDati[i], 50, sorgenteDati[i], 0);
					roundedRect.attr({
						fill: generateColor()
					});
					currentX += 60;
				}

			}

			function generateColor(){
				var rint = Math.round(0xffffff * Math.random());
				return ('#0' + rint.toString(16)).replace(/^#0([0-9a-f]{6})$/i, '#$1');
			}
		</script>
	</head>
	<body>
		<div id="canvas"></div>
	</body>
</html>

Andiamo a vedere cosa è stato fatto! Come primo passo abbiamo incluso il file di libreria (che nel nostro caso si trova all’interno di una cartella js/). Nel body è stata creata una div che sarà il contenitore dei nostri oggetti grafici; il codice CSS ne definisce le caratteristiche. Sarà il codice javascript a definire l’intero comportamento del sistema.

L’array sorgenteDati conterrà i valori con i quali creeremo il grafico, mentre la funzione generateColor() è una semplice funzione che ci permetterà di utilizzare un colore diverso per ogni barra (colore casuale). L’utilizzo delle Raphaël JS prevede l’inizializzazione di un oggetto Raphael che diventerà il contenitore degli oggetti, quindi nel nostro caso è la variabile paper la quale punterà alla div “canvas” di dimensioni 640px di larghezza per 300px di altezza. Nelle righe seguenti abbiamo utilizzato soltanto due degli elementi che la libreria ci offre, e sono il text ed il rect. Il text crea del testo all’interno della pagina (come la libreria Cufon studiata nei nostri precedenti articoli) mentre il rect crea un rettangolo.

L’oggetto text, inizializzato tramite la funzione paper.text(posizioneX,  posizioneY, contenutoTestuale) rappresenterà il nostro titolo, al quale andiamo poi ad assegnare gli attributi tramite text.attr({elencoAttributi}).

Per ogni valore della nostra sorgente di dati andiamo a creare un rettangolo tramite la funzione paper.rect(posizioneX, posizioneY, larghezza, altezza, arrotondamentoAngoli). Anche qui andiamo ad essegnare le proprietà al rettangolo tramite roudedRect.attr({elencoAttributi}), dove nel nostro caso diciamo di riempire il rettangolo con un colore casuale.

Il risultato sarà il seguente:

Esempio di utilizzo delle Raphael JS

Esempio di utilizzo delle Raphael JS

Questo piccolo articolo è solo una basilare introduzione all’argomento, ma cercheremo di offrirvi ulteriori esempi su questa stupenda libreria.

LINK

Posted in Articoli generici, Javascript. Tagged with .

Motori di ricerca, aspettative per il 2010

Seguo sempre con molto interesse gli sviluppi dei diversi motori di ricerca e spesso cerco di trovare anche in altri settori delle indicazioni che mi aiutino ad abbozzare delle mie personali previsioni per la pianificazione generale della mia strategia di marketing online.

Cosa sappiamo

  • Bing sta cercando di accaparrarsi Yahoo! Search
  • La ricerca sui dispositivi mobili cresce e crescerà sempre di più arrivando agli stessi livelli della ricerca desktop, si prevede addirittura il sorpasso
  • Google ha come obiettivo  il mercato cinese e Baidu potrebbe esserne il veicolo

Cosa ci si sospetta

Bing andrà alla grande oppure avrà un forte collasso. Si prevede che Bing crescerà di popolarità fra gli utenti Yahoo!
Tutti coloro che capiranno dove il web si sta proiettando, agiranno d’anticipo e proporranno siti internet ad hoc per la navigazione mobile, meglio se ottimizzati per Google Mobile Search.
Google è consapevole che il metodo più rapido e con ogni probabilità anche l’unico di prendere il posto di Baidu è quello di acquistarlo. Ma si può fare? Gli sarà permesso? Il governo cinese con ogni probabilità continuerà ad ostruire con tutti i suoi mezzi (e sono molti) l’ascesa del colosso americano.

Come accadrà?

L’obiettivo di Bing è quello di portare una seria concorrenza alla ricerca tramite motori e sta cercando di accellerare il processo con importanti investimenti economici, vedi Yahoo Search ed annunci in TV ad alta intensità. Tuttavia ho difficoltà a credere che Bing riuscirà ad entrare in una seria concorrenza con Google, specie nel mercato americano ed europeo.

Capitolo Google

Il dominatore del web sta espandendo i suoi piani con un crescente elenco di futuri prodotti e di imprese che intende acquistare. (Esempio: Yelp per migliorare le opzioni di ricerca locale)

Il discorso cinese merita un approfondimento. La Cina è il più grande mercato in via di sviluppo per l’utilizzo del web e Google ovviamente vuole essere in primo piano. A tal proposito avrà bisogno di capire come gestire il caso Baidu. Ricordo che già nel 2005, Robin Li, CEO di Baidu, rifiutò di prendere posizione circa le voci che vedevano Google verso l’acquisizione di Baidu che nel contempo è cresciuto ed è diventato grande, troppo grande.

Google è ora però ad un bivio. Proseguire sulla sua attuale e solita strategia che ha prodotto risultati ovunque, ma non con i cinesi, o dovrà sottostare a Baidu. In entrambi i casi, non credo che l’algoritmo di ricerca cambierà per il popolo della Cina. Di pari passo però penso che alla lunga il successo di Google arriverà anche in  Cina. Sicuramente faranno di tutto per impedirlo e tante cose stanno andando già in tale direzione:

Ricerca Mobile

Si dovrà dare sempre maggior attenzione alla ricerca tramite mobile, molti indizi portano a pensare che la ricerca mobile si svilupperà a tal punto da superare quella web tradizionale e con il proliferarsi di innovazioni dei dispositivi mobili come iPhone e Google Android si inizierà con ogni probabilità a vedere un motore di ricerca progettato specificamente per i siti web mobile. Di conseguenza conviene essere solerti e progettare sempre siti web navigabili con tali dispositivi; resto convinto però che al sito convenzionale debba sempre essere affiancato quello sviluppato appositamente per il mobile. Il fattore principale che spingerà la ricerca mobile è un aumento di locali, negozi, attività commerciali  che sfrutteranno questi canali per entrare nella vita quotidiana delle persone.

Posted in Articoli generici, SEO. Tagged with , , , , , , , .

Una semplice mappa con Google map

Per la maggior parte dei navigatori, Google è conosciuto come uno dei maggiori motori di ricerca presenti sul web. Tuttavia per gli addetti ai lavori Google è soprattutto una fonte inesauribile di strumenti e librerie, gratuitamente disponibili, che ci permettono di integrare nei nostri siti web funzionalità molto interessanti.

In questo articolo vedremo come implementare sulla nostra pagina web una semplice mappa con marker (puntatore).

1. Registrare una API key

Per poter utilizzare le API Javascript di Google map è necessario innanzitutto registrare una chiave per il proprio dominio. Tramite una semplice procedura in cui ti verrà chiesto esclusivamente il nome dominio a cui associarla, Google ci restituirà una chiave necessaria per importare sulla nostra pagina web le API di Google map. La chiave sarà di questa forma:

ABQIAAAAy5MGb6ekAenysCb6jvQABBQBlhnV4cuz6vqJJD4RnEQTD9BFjxRBE8PR2TiWclvsHuX-X4dKUmmRcw

Nota: per poter eseguire correttamente la procedura di registrazione è necessario essere loggati con il proprio account Google

2. Import Google map API

Ottenuta la chiave la prima cosa che dobbiamo fare è importare le API sulla nostra pagina. A tal proposito basta inserire nel codice questa riga:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAy5MGb6ekAenysCb6jvQABBQBlhnV4cuz6vqJJD4RnEQTD9BFjxRBE8PR2TiWclvsHuX-X4dKUmmRcw" type="text/javascript"></script>

3. Lo script

Lo script vero e proprio, riportato di seguito, che realizzerà la mappa con il marker va naturalmente aggiunto al codice della pagina web nel quale vogliamo inserire la mappa

<script type="text/javascript">

 function initialize() {
    if (GBrowserIsCompatible()) {
       var map = new GMap2(document.getElementById("id_div_map"));
       map.addControl(new GLargeMapControl());
       map.addControl(new GMapTypeControl());
       var point = new GLatLng(41.8954656, 12.4823243);
       map.setCenter(point, 13);
       map.addOverlay(new GMarker(point));
    }
 }

 window.onload = function(){
    initialize();
 }

 window.onunload = function(){
    GUnload();
 }

</script>

Nella riga n. 5 al posto della stringa “id_div_map” va inserito l’id della div (presente nel body della pagina HTML) nel quale vogliamo inserire la mappa. Nella riga n.8 vanno inserite la latitudine e la longitudine del punto in cui vogliamo inserire il marker.

4. La pagina HTML

L’utlimo passo, come precedentemente annunciato, è quello di inserire nel codice della pagina web una div nella quale lo script visualizzerà la mappa. Ricordo che la div deve avere lo stesso id che passiamo allo script in Javascript.

<div id="id_div_map" style="height:300px;width:300px;">
</div>

Nota: è necessario specificare l’altezza e la larghezza della div.

5. Esempio

In definitiva una pagina web che implementi la mappa descritta in questo articolo può essere di questa forma:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAy5MGb6ekAenysCb6jvQABBQBlhnV4cuz6vqJJD4RnEQTD9BFjxRBE8PR2TiWclvsHuX-X4dKUmmRcw"
type="text/javascript"></script>

<script type="text/javascript">

 function initialize() {
    if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("id_div_map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      var point = new GLatLng(41.8954656, 12.4823243);
      map.setCenter(point, 13);
      map.addOverlay(new GMarker(point));
    }
 }

 window.onload = function(){
    initialize();
 }

 window.onunload = function(){
    GUnload();
 }

</script>

</head>
<body>
<div id="id_div_map" style="height:300px;width:300px;"></div>
</body>
</html>

Posted in Google, Google Map, Javascript. Tagged with , , .