Posts Tagged 'Web 2.0'

Query spaziali su Google Fusion Tables

E’ stata da poco rilasciata una nuova funzionalità per l’utilizzo delle Google Fusion Tables. L’ottimo servizio di gestione dei dati by Google da questo momento supporta anche le query spaziali!
Diverse sono le possibilità, tra cui determinare i punti di interesse che si trovano all’interno di una determinata area (rettangolare o circolare) oppure determinare il numero di elementi desiderati che si trovano nelle vicinanze di una particolare coppia di coordinate.

Stavolta la mia scelta è quella di non apportare particolari modifiche al codice riportato da Google e di farvi vedere solo uno degli esempi.
Mi sono limitato dunque a prendere dei dati già presenti in Internet (più precisamente l’indirizzo degli uffici postali presenti nella Provincia di Rimini) e li ho caricati in una Google Fusion Table, registrata all’indirizzo http://tables.googlelabs.com/DataSource?dsrcid=305567 . Il caso che vi propongo è quello di selezionare gli “n” uffici postali più vicini a un determinato punto della mappa.

Quello che è davvero interessante è che, per implementare la selezione all’interno del codice javascript, viene utilizzata una notazione “SQL-like” e quindi di facile comprensione

query: “SELECT indirizzo FROM ” + tableid + ” ORDER BY ST_DISTANCE(indirizzo, LATLNG(44.03, 12.56)) LIMIT 5″

tableid è la variabile che contiene il nome della Fusion Table, per il resto si tratta di una semplice query SQL dove i parametri sono il punto da cui calcolare le distanze (44.03, 12.56) e LIMIT, cioè il numero di punti da considerare (nel nostro caso 5)

Il codice finale è questo:

<!DOCTYPE html>

<html>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″/>

<style>
#map_canvas { height: 300px; width:600px; }
</style>

<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”&gt;
<script type=”text/javascript”>

// definisce la tabella di Google Fusion da caricare

var tableid = 305567;

function initialize() {

map = new google.maps.Map(document.getElementById(‘map_canvas’), {
center: new google.maps.LatLng(44.03, 12.56),
zoom: 10,
disableDefaultUI: true,
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.MEDIUM},
mapTypeId: google.maps.MapTypeId.ROADMAP  });

//definisce il layer da visualizzare: la query e’ di tipo ‘Simil SQL’ e seleziona i 5 indirizzi (parametro LIMIT) più vicini al punto con coordinate 44.03 12.56
layer = new google.maps.FusionTablesLayer(tableid, {
query: “SELECT indirizzo FROM ” + tableid + ” ORDER BY ST_DISTANCE(indirizzo, LATLNG(44.03, 12.56)) LIMIT 5”  }
);
layer.setMap(map);

}
</script>
</head>
<  body onload=”initialize()”>
<div id=”map_canvas”>

</body>
</html>

mentre il risultato lo potete trovare qui.

Inutile dire che le potenzialità sono infinite. Potremmo infatti gestire come variabili sia il punto da cui calcolare le distanze (magari prendendola da un dispositivo mobile una volta impostato il parametro sensor a yes), sia il numero di markers da considerare (attraverso un FORM dal quale ricavare in input detto parametro).

Nella documentazione ufficiale Google Fusion Tables potete trovare gli altri esempi, fate qualche esperimento e… buon divertimento.

Linkografia

@ Search your geo data using spatial queries from Fusion Tables!
@ Google Fusion Table API

Inserimento markers su Google Maps V3

Dopo l’articolo nel quale abbiamo imparato a visualizzare una semplice Google Map V3, tentiamo di costruire qualcosa di più utile. L’esigenza potrebbe essere quella di visualizzare su di una mappa centrata una serie di punti particolari.
Con lo scopo di facilitare la comprensione dei termini utilizzati, ricordo che secondo le specifiche di Google Maps tutto ciò che può essere identificato da coordinate geografiche é definito overlay. Un particolare tipo di overlay è il marker, cioè il singolo punto sistemato su una mappa.
Nell’esempio che vi propongo, su una Google Map vengono visualizzati i markers relativi ai luoghi dove ho abitato io e alcuni elementi della mia famiglia. Al passaggio del mouse su ogni marker viene visualizzato il tipo di scuola.
Prima  di cominciare abbiamo bisogno delle coordinate dei punti che desideriamo visualizzare. A tale scopo o annotiamo i dati forniti dal nostro gps oppure utilizziamo applicazioni di geocoding, in grado di estrarre le coordinate da un indirizzo. Possiamo far riferimento a servizi come http://mygeoposition.com/ .

Una volta ottenuti i dati, si tratta di “passarli” al nostro codice. La scelta che ho fatto è stata quella di caricare i dati in tre vettori (array), uno per le latitudini, uno per le longitudini e uno per le descrizioni dei markers.
In fase di visualizzazione, i dati dei vettori verranno letti attraverso un ciclo iterativo for.

var i = 0;
for (i=0; i<lat[1].length; i++)
{
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat[i], long[i]),
map: map, title: descr[i] });
}

Il risultato lo trovate qui mentre qui sotto potete esaminare un estratto del codice usato.

<html>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″/>

<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?
                 sensor=false”></script>
<script type=”text/javascript”>

function carica_variabili() {

//definizione coordinate su cui centrare la mappa
var lat_centro = “44.114773”;
var long_centro = “9.8517”;

//inizializzazione vettori
var lat = new Array();
var long = new Array();
var descr = new Array();

//popolamento vettori. Per aggiungere punti è sufficiente inserire una nuova terna di
// valori:  lat[4], long[4], descr[4] e cosi’ via

lat[0] = “44.111206”;
long[0] = “9.834749”;
descr[0] = “Qui ho abitato fino al 1990”;

lat[1] = “44.117701”;
long[1] = “9.871722”;
descr[1] = “Qui ho abitato fino al 2000”;

lat[2] = “44.113025”;
long[2] = “9.843195”;
descr[2] = “Qui abita mia zia Maria”;

lat[3] = “44.118320”;
long[3] = “9.846319”;
descr[3] = “Qui abita mia sorella”;

//Opzioni della mappa: zoom livello 14, centrata su un punto particolare,
//modalità IBRIDA

var Opzioni = {
        zoom: 14, center: new google.maps.LatLng(lat_centro, long_centro),
        mapTypeId: google.maps.MapTypeId.HYBRID,
       scaleControl: false    }

var map = new google.maps.Map(document.getElementById(“map_canvas”), Opzioni);

//ciclo FOR per la lettura dei valori dei vettori e relativa visualizzazione su
//mappa

var i = 0;
for (i=0; i<lat[1].length; i++)
    {  var marker = new google.maps.Marker({
       position: new google.maps.LatLng(lat[i], long[i]),
      map: map, title: descr[i] });
    }

}
</script>
</head>

<body style=”margin:5px; padding:2px;” onload=”carica_variabili()”>

<div id=”map_canvas” style=”width: 60%; height: 60%;”></div>

</body>
</html>

Linkografia
@ Maps API V3 Overlays  (Google Code – inglese)
@ Esempio visualizzazione markers singolo (Google Code – inglese)

Installazione AVD e prima applicazione Android

In questo articolo cominceremo a familiarizzare con l’emulatore Android e scriveremo la nostra prima semplicissima applicazione.

Prima di lanciare l’emulatore, è necessario prima creare una AVD (Android Virtual Machine). Che cos’è una AVD? E’ un insieme di specifiche che ci permette di emulare un dispositivo Android anzichè un altro, diverso per configurazione hardware (la tastiera, la memoria, la presenza di una fotocamera, ecc.), la forma (skin) del dispositivo, ed altro ancora. Naturalmente possiamo creare tutti gli AVD che desideriamo, uno per ogni dispositivo da “mimare”.

Per creare un AVD usiamo uno dei tools forniti da Android SDK.

Apriamo un prompt di sistema, ed eseguiamo la riga di comando:

android create avd --target 2 --name ilmioprimoavd
Alla domanda “Do you wish to create a custom hardware profile?” premete Invio per rispondere di no.

Questo è tutto. Abbiamo il nostro AVD denominato ilmioprimoavd. Adesso siamo pronti per creare un nuovo progetto Android.

Apriamo Eclipse, selezionamo File > New > Project.
Selezioniamo “Android Project” e clicchiamo su Next.
Inseriamo i dettagli del progetto come nella figura seguente:

Nella sezione che segue qualche nota sul significato dei diversi campi. Per adesso potete anche prendere tutto per buono, saltare la parte che segue e andare avanti

---------------------------- cut here -------------------------------------------------

Project Name: il nome della directory che conterrà i file del progetto.
Application Name: il nome dell’applicazione che apparirà sul nostro dispositivo Android.
Package Name: il significato sarà certamente chiaro a chi ha familiarità con i packages del linguaggio Java. Per semplificare,  si tratta di un namespace, di un “contenitore” dove è contenuto tutto il codice. Il nome del package deve essere univoco tra tutti i packages installati sul sistema Android; per questa ragione è molto importante usare una codifica standard del tipo domain-style. L’esempio proposto utilizza il namespace “com.tutorial“, dedicato appunto al codice che scriveremo durante i nostri tutorial. Quando saremo in grado di scrivere le nostre applicazioni, sarà opportuno utilizzare namespace appropriati (es. euripide.gps.vicinoame dove  lo sviluppatore di nome Euripide  includerà tutte le versioni dell’applicazione “Vicinoame” che sfrutta il rilevatore GPS di Android).
Create Activity: campo opzionale che identificherà la sottoclasse Activity. Per ora vi basti sapere questo.
Min SDK Version: specifica il livello minimo della versione API richiesta dalla nostra applicazione e ne definisce la compatibilità col nostro dispositivo. Se l’applicazione richiede un API Level superiore a quello supportato dal dispositivo, l’applicazione non sarà installata. La compatibilità verso il basso sarò invece assicurata.

---------------------------- cut here -------------------------------------------------

Cliccate su Finish. Il progetto è pronto ed è visibile nel Package Explorer sulla sinistra (vedi figura).

Aprite il file VivaAndroid.java, presente in src>com.tutorials.prima_applicazione.  Questo il codice creato:

package com.tutorials.prima_applicazione;
 import android.app.Activity;
 import android.os.Bundle;
 public class VivaAndroid extends Activity
  {
   /** Called when the activity is first created. */
   @Override
   public void onCreate(Bundle savedInstanceState)

    {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.main);
    }
  }

Per il momento non ci preoccupiamo del significato delle istruzioni, che comunque potete cercare nell’apposita sezione reference della guida per sviluppatori Android. Limitiamoci a lavorate sul codice proposto apportando le seguenti modifiche:

package com.tutorials.prima_applicazione;
 import android.app.Activity;
 import android.os.Bundle;
 import android.widget.TextView;
 public class VivaAndroid extends Activity
 {
  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState)

   {
    super.onCreate(savedInstanceState);
    TextView tv = new TextView(this);
    tv.setText("Questa è la mia prima applicazione   
               Android!!!");
    setContentView(tv);
   }
}

Non vi resta che andare nel menu Run e selezionare “Android application“. Eclipse compilerà il file java e lo passerà all’emulatore per il risultato:

Links utili
@ Hello World (dalla guida ufficiale per sviluppatori Android)
@ Descrizione della classe TextView e del metodo setText (dalla guida ufficiale per sviluppatori)
@ Un breve tutorial video (inglese) che riprende i contenuti di questo post (nel video l’AVD non viene creato a riga di comando ma direttamente su Eclipse)

Introduzione alle Yahoo! Maps

Sempre stimolato da digitaladoptive, unico antidoto contro la cronica mancanza di tempo necessaria per riempire di contenuti questo blog, stavolta voglio introdurre ai neofiti del mashup le API di Yahoo! Maps.
Per chi ha avuto la pazienza di leggere i miei post riguardanti le API di Google Maps, si accorgerà che i metodi e le sintassi sono molto molto simili.
Il semplice obiettivo di questo post è di inserire una Yahoo! Map, centrata in un particolare punto del globo terracqueo, in una pagina web.
Per iniziare a lavorare, abbiamo bisogno di un account Yahoo! su quale chiedere una chiave (“application id“). Almeno nelle prime fasi, non avremo bisogno di uno spazio web: a differenza delle API di Google Maps, le API di Yahoo! Maps lavorano anche in locale, cioè sul proprio PC (purchè collegato alla Rete, evidentemente)

Per chiedere la chiave, come si diceva, è necessario avere un account Yahoo! e andare alla seguente pagina

Si presenterà la seguente schermata dove inserire alcuni dati:

Alcune delucidazioni:

1. Il Vostro account Yahoo! apparirà di default
2. Selezionate “Generic”
3. Potete inserire qualunque cosa
4. Potete inserire qualunque cosa
5. Non è un campo obbligatorio ma, a vostra futura memoria, suggerisco di inserire l’indirizzo della pagina web dove inserirete la mappa
6. Inserite la vostra e-mail
7. Inserite una breve descrizione

Il resto non consideratelo.

Nella pagina che segue otterrete una stringa di caratteri che copierete nel codice qui in basso dove indicato.

Il codice è diffusamente commentato, non dovreste avere problemi di comprensione (ma sono qui a vostra disposizione!)

<head>
<script type=”text/javascript” src=”http://api.maps.yahoo.com/ajaxymap?v=3.0&appid= INSERITE_QUI_LA_YAHOO_ID_RICHIESTA_SUL_SITO”></script>

<!– Definizione struttura pagina: messa la mappa di dimensioni 550×450 px //–>

<style type=”text/css”>
#spaziomappa {
width: 550px;
height: 450px;
align: center;}
</style>

</head>

<body>
<div id=”spaziomappa” align=”center”></div>
<script type=”text/javascript”>

// centra la mappa alle coordinate indicate (lat, long)
var lat = 44.063889;
var long = 9.883333;

// definizione coppia di coordinate che identificano il Golfo della Spezia
var punto = new YGeoPoint(lat, long);
var livellozoom = 7

// Definisce l’oggetto map che caricherà una mappa nell’elemento “spaziomappa” della pagina web
var map = new YMap(document.getElementById(‘spaziomappa’));

// Aggiunge la barra di controllo che consente tre tipi di visualizzazione:
// cartina (REG), satellite (SAT) e ibrida (HYB)
map.addTypeControl();

// Aggiunge il controllo per lo zoom
map.addZoomLong();

// Imposta il tipo di mappa, in questo caso ibrida; per altri tipi di visualizzazione
// Si può usare SAT (satellite) o REG (cartina)
map.setMapType(YAHOO_MAP_HYB);

// Mostra la mappa centrata alle coordinate definite dalla variabile ‘punto’al
// livello 7 di zoom
map.drawZoomAndCenter(punto, livellozoom);

</script>
</body>

Il risultato lo potete trovare qui.
Nelle prossime puntate cercheremo di fare qualcosa di più, per adesso mi limito a suggerirvi i links alla documentazione ufficiale di Yahoo! Maps API (inglese):

Formazione in Second Life: web 2.0 nel metaverso

Tra le land italiane dove si tratta di formazione, a mio avviso merita davvero più di una visita l’Isola di Imparafacile gestita da Imparafacile Runo.
La land è attiva da soli cinque mesi ma le  iniziative sono tantissime. Anche se con un po’ ritardo vorrei  segnalarvi una di queste:  il corso WEB 2.0: ISTRUZIONI PER L’USO. L’obiettivo, secondo gli organizzatori, è quello di “offrire informazioni pratiche ed operative sui nuovi strumenti messi a disposizione dalla rete“.
Il mio alter ego Cirdan Maruti ha per ora partecipato ad una sola lezione ma ha scoperto dei relatori davvero di gran livello e con una capacità comunicativa fuori dal comune.
Giudicate comunque voi. Cliccando qui potrete visionare la riduzione su Youtube della prima lezione. Il prossimo appuntamento sarà il 7 maggio  alle 21.45 nella i-box dell’Isola Imparafacile e si parlerà di Ambient Findability, concetto sviluppato da Peter Morville, (esperto di Architettura dell’Informazione), e riassumibile nello statement

I want to be able to find anything, anywhere, anytime

Vi lascio con qualche link

I riferimenti del progetto “Imparafacile”

@ I-box isola Imparafacile
@ Imparafacile Ning: formazione e cultura in SL

Approfondimenti sulla lezione del 7 maggio

@ La bella recensione di Federico Bo sul libro Ambient Findability di  Morville
@ Il blog di Semantic Studios fondato da Morville

La strategia Internet di Danone: case-study da non imitare

Grazie al blog di Nicola Mattina, sono venuto a conoscenza di una iniziativa di Buzz Marketing della Danone, che affidandosi alla Promodigital, ha tentato di sfruttare le peculiarità del Web 2.0 per la promozione di alcuni suoi prodotti. Lo scopo era  quello di focalizzare l’attenzione degli utenti Internet sugli elementi differenzianti di alcuni prodotti (Actimel e Danacol) rispetto alla concorrenza.
Il primo elemento della strategia è stato quello di manifestare la propria presenza all’interno di una ventina di forum, con lo scopo di dare informazione, chiarire dubbi sul prodotto e tentare di attivare una comunicazione bidirezionale con clienti reali e potenziali.
Fermo restando che la strategia non può esaurirsi nell’arco di un paio di mesi, a me pare che l’esperienza sul forum almeno per ora sia fallimentare. Chiunque usi la Rete da un po’ di tempo sa quali sono i meccanismi di difesa (e di attacco) messi in atto da chi si sente oggetto di pressioni commerciali. Lo stile di comunicazione del nickname targato Danone non ha certamente aiutato. Era una voce da promoter di supermercato, da comunicato stampa, da taglia e incolla di materiali creati da altri. Non era in grado di dare una seria informazione scientifica laddove il punto di forza del prodotto dovrebbe essere la superiorità dei prodotti Danone rispetto ad altri yogurts e soprattutto rispetto ad altri yogurts probiotici. Un medico e un biologo, seppur con costi superiori,  forse avrebbero retto meglio all’urto. 

Il secondo elemento della strategia è stato quello di invitare alcuni bloggers ad un evento dove sono state spiegate le peculiarità del prodotto. L’idea era quello di indurre gli influencers delle Rete (proprietari di blogs molto visitati) di postare resoconti della serata in modo che si attivasse un processo di Buzz Marketing virtuoso.
Anche questo secondo elemento della strategia non sembra avere avuto per ora molto successo, visto che i commenti della blogosfera che ho raccolto (vedi links in fondo all’articolo) sono per ora piuttosto negativi.

A mio parere sono stati compiuti diversi (gravi) errori:

1) Come già detto, lo stile di comunicazione deve essere coerente al prodotto, e nel caso della presenza nei forum non lo è stato. Danone ha sufficienti mezzi per sostenere i costi di un portavoce qualificato, ma non lo ha fatto. la conclusione ma probabilmente i costi sarebbero stati superiori.

2) Primo errore di segmentazione: non si può pensare di trovare omogeneità di comportamenti di consumo dove la variabile discriminatoria sia ‘frequentazione forum salute e bellezza’

3) Secondo errore di segmentazione: i bloggers sono persone dai profili molto diversi e non li puoi segmentare sulla base della variabile ‘blogs più frequentati’ .  Perdonate l’iperbole, ma è come mandare uno spot sui preservativi su Radio Maria solo perchè è tra le reti più ascoltate in Italia. Non solo: l’errore di strategia è amplificato, perchè in media questo segmento di popolazione è più istruito, più attento alla dimensione etica delle aziende e assolutamente impermeabile a messaggi semplificati.

4) Perdita di controllo della comunicazione: ha contribuito al boomerang comunicativo la pubblicazione su Youtube (NON da parte dell’azienda, ma da parte di un partecipante alla serata) dei video della serata che, sinceramente, ha messo di fronte il pubblico Internet a una serata promozionale stile Tupperware più che ad un’ azienda moderna che crede nelle potenzialità di mercato della Rete.

Riassumendo il mio punto di vista, da una multinazionale del genere non può essere accettato che faccia marketing indifferenziato a segmenti della popolazione identificati attraverso criteri completamente errati rispetto al tipo di prodotto.

Le mie impressioni finali:

1) L’errore di fondo è che si è voluto ottenere il massimo con il mimino sforzo, e questo nel marketing NON E’ POSSIBILE. Conquistare audience su un prodotto costa lacrime, sangue e soldi.

2) Penso che chi ha progettato queste strategie non ha una cultura di marketing tradizionale solida e si nasconde dietro i nuovi strumenti comunicativi offerti dalla Rete come se fossero la pietra filosofale. Senza scomodare pratiche complesse come la cluster analisys, bastava un minimo di buonsenso per segmentare meglio il mercato di riferimento

3) La reputazione dell’azienda, che già in Rete non gode di ottima salute (ci sono state alcune contestazioni di pubblicità ingannevole, anche se non tutte giunte a definizione) secondo me è ulteriormente compromessa.

Per concludere, invito a riflettere su alcuni concetti base indicati nella mappa meme web 2.0 nell’ormai strafamoso articolo di Tim O’Reilly, tradotto qui. Sono queste basi che possono aiutarci a non incappare a clamorosi errori di marketing 2.0 . 

# Partecipazione,  non pubblicazione
# Arricchimento delle esperienze degli utenti
# Attitudine, non tecnologia
# Il comportamento dell’utente non è predeterminato
# Cooperazione, non controllo

Linkografia

I forum che ho trovato nei quali il “portavoce” Actimel/Danacol ha sperimentato qualche difficoltà …

@ Dì la tua forum
@ Newsgroup gateway
@ Nutritionvalley Forum
@ Bertuccia Forum

Il punto di vista dei bloggers (e anche una replica dell’ideatore) sulla campagna Danone

@ Milioni di yogurt con i social media
@ Tempo di Buzz Danone Actimel
@ Danone: perchè così non funziona
@ Danone ascolta e le persone partecipano. Un esempio di social networking offline
@ Evento Actimel by DeliMyth
@ Un evento per costruire la reputazione online: l’esempio di Danone
@ Facciamo un po’ di chiarezza
@ Danone 2.0: da Stanhome alle bertucce, passando per Herbalife

Una directory delle aziende italiane 2.0

Desidero condividere con Voi l’ottimo lavoro di Claudio Ancillotti dell’agenzia 2.0TaskForceItaly, che sta conducendo un progetto di tipo tassonomico sulle attività delle aziende italiane in ambito Web 2.0. Un ottimo spunto per conoscere, riflettere, segnalare.

@ TOP List Aziende 2.0 – Social Media Marketing


Creative Commons License
Questo/a opera è pubblicato sotto una Licenza Creative Commons.

Addthis

AddThis Social Bookmark Button

Flickr Photos

Moods of blue

High heels

Altre foto

%d blogger hanno fatto clic su Mi Piace per questo: