Contesto:
Nell'ambito delle nuove tecnologie sempre più diffuse su internet a seguito del fenomeno "web 2.0", mi riferisco in particolare ai nuovi tipi di user interface basate su ajax, appaiono sempre più incompleti i vecchi strumenti di analisi di navigazione di un sito, quali, ad esempio, StatCounter
Tali tool non riescono a catturare informazioni circa la navigazione di un utente in quei contesti dove le user interface sono desktop-like (ad esempio nella home page personalizzabile di google), non più basate sul vecchio modello di ipertesto.
Questo breve articolo, dedicato ad un pubblico di sviluppatori e web designer, descrive la costruzione di un nuovo -semplice- strumento il cui fine è quello di individuare le sezioni più “vive” di una singola pagina web.
Definisco una sezione di una pagina web più “viva” rispetto ad un’altra quando il mouse si muove maggiormente sopra essa.
Tesi:
Durante la navigazione di un sito, il focus principale di un utente è guidato dal movimento degli occhi. Il movimento del mouse è una condizione necessaria ma non sufficiente per registrare la posizione dello sguardo su una pagina web.
E’ infatti facile supporre che l’occhio non debba guardare esattamente dove è presente il puntatore del mouse, ma quando questo si muove lo sguardo lo segue.
Strumenti:
- Javascript ; in particolare la libreria grafica: http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
- Tomcat : http://tomcat.apache.org/
Procedimento:
Poichè si desidera memorizzare e analizzare la posizione del mouse di più utenti in diversi momenti, occorre usare un repository acceduto dall’applicazione lato server.
Analizzeremo per primo il lato server, in quanto molto semplice, tralasciando la fase di configurazione del server e del dwr i cui riferimenti sono ben documentati nei siti indicati. La classe java che raccoglie le informazioni di navigazione è :
public class MouseStatistic
{
private static Set allMousePosition = new HashSet();
public MouseStatistic(){}
public Set stat(){
return allMousePosition;
}
public void add(int x, int y)
{
if (x!=0 && y!=0)
allMousePosition.add(new Position(x,y));
}
}
Gli oggetti Position rappresentano la posizione x e y sullo schermo del puntatore del mouse. E’ facile immaginare evoluzioni dell’esempio riportato che considerino anche la sessione di un utente, o il tempo di permanenza nella stessa posizione.
public class Position
{
private int itsX;
private int itsY;
public Position(int x, int y){
itsX = x;
itsY = y;
}
public int getX()
public int getY() { return itsY; }
}
Dopo aver configurato il dwr.xml, il web.xml possiamo già verificare la semplice funzione di aggiunta e recupero dati puntando all’indirizzo localhost:8080/webapp/dwr/ (per maggiori informazioni: http://getahead.ltd.uk/dwr/getstarted)
L’html è altrettanto semplice:
< html > < head > < script type='text/javascript' src='/[webapp]/dwr/interface/MouseStatistic.js'>< /script>
< script type='text/javascript' src='/[webapp]/dwr/engine.js'>< /script>
< script type='text/javascript' src='/[webapp]/dwr/util.js'>< /script>
< script type='text/javascript' src="/[webapp]/js/wz_jsgraphics.js" >
< /script>
< script type='text/javascript' src="/[webapp]/js/record.js" >< /script> < /head >
< body >
< input type="button" value="Record" onclick="startRecord()" />< input type="text" value="2000" id="interval" /> < input type="button" value="Stop" onclick="stopRecord()" />
< input type="button" value="View Mouse Positions" onclick="statistics()"/>
< div id="paint"/> < br/> < hr/> < table align="center" cellpadding="40">
< tr> < td> < img src="http://www.cursor.org/images/pamflag.jpg"/>
< /td> < td> < img src="http://www.ozon.ru/multimedia/person_photo/ryder_winona.jpg"/> < /td> < /tr> < /table> < /body> < /html>
La libreria wz_jsgraphics.js fornisce funzioni varie per disegnare su una pagina html.
La libreria record.js invece fornisce le seguenti funzioni:
Funzioni di impostazioni dell’intervallo di tempo di campionamento della posizione del mouse:
var sendMousePositionToServerInterval ;
function startRecord()
{
var interval = DWRUtil.getValue("interval");
sendMousePositionToServerInterval = setInterval("sendPosition()", interval);
}
function stopRecord()
{
clearInterval(sendMousePositionToServerInterval);
}
Funzioni di recupero e invio coordinate:
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
function sendPosition()
{
MouseStatistic.add(doNothing(), tempX, tempY);
}
<!--
============================================================
Capturing The Mouse Position in IE4-6 & NS4-6
(C) 2000 www.CodeLifter.com
Free for all users, but leave in this header
//-->
function getMouseXY(e)
{
if (IE)
{ // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
}
else
{ // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
return true
}
function doNothing(){}
Nota: la funzione getMouseXY() è stata liberamente tratta da http://www.codelifter.com/main/javascript/capturemouseposition1.html
Funzioni di disegno:
function statistics()
{
MouseStatistic.stat(showStatistics);
}
function showStatistics(points)
{
var jg = new jsGraphics("paint");
jg.setStroke(3);
jg.setColor("red");
for (var i = 0 ; i < points.length ; i++)
{
jg.drawLine(points[i].x, points[i].y, ponts[i].x, points[i].y);
}
jg.paint();
}
Nota: non è prevista la possibilità di disegnare un singolo punto. Si è aggirato il problema disegnando un segmento con stesso punto di origine e di termine.
Conclusioni
Grazie a javascript è possibile recuperare informazioni di navigazione di utente in modo silente, senza refresh della pagina né eccessivo carico computazionale. Tali informazioni possono essere elaborate da un web designer per individuare le aree del sito dove l’attenzione e la gestualità dell’utente è maggiormente concentrata.
Per considerazioni legate a questo esempio, errori, consigli, commenti vi invito a scrivermi : torti.tommaso@gmail.com
Nessun commento:
Posta un commento