Ayuda IT: 2011-11

2011-11-27

Seguimiento de errores con Google Analytics

De igual forma que podemos hacer un tracking de los eventos con Google Analytics (las búsquedas por ejemplo), también es posible hacer un tracking de algunos de los errores que se producen en nuestra página web (algo que, de otra forma, es muy complejo).

Para hacer esto lo único que debemos hacer, igual que antes, es añadir el siguiente código a nuestros javascript:

_gaq.push(['_trackEvent', 'Error', 'geocode', status]);

_gaq.push(['_trackEvent', 'Error', 'twitterError', errorThrown]);

donde

'Error'

es la "categoría del evento", un valor de nuestra elección y que se mostrará en la página de eventos de Google Analytics

'geocode' ó 'twitterError'

es la "acción de evento", un valor de nuestra elección y que se mostrará en la página de eventos de Google Analytics

status ó errorThrown

es el valor de la "etiqueta de evento", es el valor del código postal, en este caso, y se mostrará en la página de eventos de Google Analytics.

Toda la información se podrá visualizar en Google Analytics, en la sección
Contenido - Eventos - Eventos principales

De esta forma podemos obtener mucha información muy útil de una forma muy sencilla.

Seguimiento de eventos con Google Analytics

Después de activar las características de Google Analytics en nuestra página web podemos realizar un tracking completo de aquellos eventos que ocurran en nuestra página web y que nos interesen.

Por ejemplo podemos hacer un seguimiento del evento de búsqueda, usando como parámetros de este evento el país y el código postal buscado desde nuestra página web.

En el fondo es algo bastante sencillo, ya que lo único que requiere es añadir la siguiente línea de código javascript:

_gaq.push(['_trackEvent', 'Busqueda', 'postalCode', postalCode]);

donde

'Busqueda'

es la "categoría del evento", un valor de nuestra elección y que se mostrará en la página de eventos de Google Analytics

'postalCode'

es la "acción de evento", un valor de nuestra elección y que se mostrará en la página de eventos de Google Analytics

postalCode

2011-11-19

Añadir analítica web a nuestros sitios web con Google Analytics

Podemos añadir analítica web a nuestra web con Google Analytics de una forma muy simple.

Sólo debemos abrir una cuenta en Google Analytics y poner el código javascript que se nos proporciona justo antes de cerrar la cabecera (header) ó el cuerpo (body) de nuestras páginas web.

A partir de entonces tendremos disponibles todo tipo de estadísticas sobre las visitas a nuestros sitios web.

Así podremos conocer gran cantidad de información sobre las visitas a nuestros sitios web de una forma muy sencilla.

Poner un icono de favoritos en nuestra página web

Poner un icono de favoritos en nuestra página web (esas pequeñas imágenes que aparecen al lado de la barra de direcciones y en cada pestaña del navegador que tenemos abierta, y que son usadas también en los marcadores de favoritos de las páginas web) es muy simple, sólo hay que añadir:

<link rel="shortcut icon" href="favicon.ico" />

a la cabecera de nuestra página web.

El archivo favicon.ico es una imagen de tipo .ico que debe tener un tamaño de 16x16 pixels.

Esta imagen se puede crear con un editor gráfico (como GIMP, por ejemplo) o usando un servicio online (como por ejemplo http://www.favicon.cc/).

2011-11-12

Cuidado con los acentos en la etiqueta meta description

La etiqueta meta description es la que es muestrada por los buscadores debajo del link de nuestra página web.

Debemos tener cuidado si queremos usar acentos ú otras letras que no sean ASCII en esta etiqueta, ya que, en general, los buscadores no la mostraran adecuadamente.
En lugar de usar una letra acentudada directamente debemos usar su correspondiente código de escape html.

Es algo muy sencillo que evitará dar una imagen pobre a los usuarios que encuentren nuestra web en algún buscador.

2011-11-09

Usar css media queries

Podemos usar css media queries para detectar el espacio disponible en el navegador del cliente y así cambiar el tamaño de los elementos de nuestra página web (incluso podemos cambiar el tamaño de la letra, por ejemplo) dependiendo del tamaño disponible.

El fichero css será algo así:

@CHARSET "UTF-8";

/* valores por defecto */
.contenedor {
    width: 984px;
    margin: 0 auto;
    position: relative;
}
.header {
    width: 216px;
    position: absolute;
    left: 0px;
}
.nioos {
    margin: 0;
    font-size: 91px;
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    line-height: 147px;
    text-align: center;
}
.subtitle {
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    font-size: 13px;
    line-height: 21px;
    text-align: center;
}
.principal {
    width: 728px;
    position: absolute;
    left: 256px;
}
#mapa {
    width: 100%;
    height: 450px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
    line-height: 21px;
}
.gs-newsResult {
    height: 168px;
}
.gs-publisher, .gs-publishedDate, .gs-clusterUrl {
    font-size: 11px;
    line-height: 17px;
}
.barra-busqueda {
    width: 100%;
    margin-bottom: 5px;
    position: relative;
}
#direccion {
    width: 645px;
}
.control {
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 13px;
}
#buscando {
    position: absolute;
    left: 625px;
    top: 4px;
    visibility: hidden;
}
#placeAttr {
    width: 100%;
    height: 20px;
    font-family: Arial,sans-serif;
    font-size: 11px;
    text-align: right;
    padding-top: 2px;
}

/* valores para un ancho de navegador de entre 1365px y 1280px */
@media (max-width: 1365px) and (min-width: 1280px) {
    .contenedor {
        width: 1240px;
    }
    .header {
        width: 280px;
    }
    .nioos {
        font-size: 105px;
        line-height: 170px;
    }
    .subtitle {
        font-size: 21px;
        line-height: 34px;
    }
    .principal {
        width: 920px;
        left: 320px;
    }
    #mapa {
        height: 569px;
        font-size: 21px;
        line-height: 34px;
    }
    .gs-newsResult {
        height: 306px;
    }
    #direccion {
        width: 810px;
    }
    .control {
        font-size: 21px;
    }
    #buscando {
        left: 790px;
        top: 7px;
    }
}

/* valores para un ancho de navegador de entre 1439px y 1366px */
@media (max-width: 1439px) and (min-width: 1366px) {
    .contenedor {
        width: 1324px;
    }
    .header {
        width: 301px;
    }
    .nioos {
        font-size: 105px;
        line-height: 170px;
    }
    .subtitle {
        font-size: 21px;
        line-height: 34px;
    }
    .principal {
        width: 983px;
        left: 341px;
    }
    #mapa {
        height: 608px;
        font-size: 21px;
        line-height: 34px;
    }
    .gs-newsResult {
        height: 306px;
    }
    #direccion {
        width: 870px;
    }
    .control {
        font-size: 21px;
    }
    #buscando {
        left: 850px;
        top: 7px;
    }
}

/* valores para un ancho de navegador de entre 1679px y 1440px */
@media (max-width: 1679px) and (min-width: 1440px) {
    .contenedor {
        width: 1400px;
    }
    .header {
        width: 320px;
    }
    .nioos {
        font-size: 126px;
        line-height: 204px;
    }
    .subtitle {
        font-size: 21px;
        line-height: 34px;
    }
    .principal {
        width: 1040px;
        left: 360px;
    }
    #mapa {
        height: 643px;
        font-size: 21px;
        line-height: 34px;
    }
    .gs-newsResult {
        height: 306px;
    }
    #direccion {
        width: 900px;
    }
    .control {
        font-size: 21px;
    }
    #buscando {
        left: 880px;
        top: 7px;
    }
}

/* valores para un ancho de navegador de entre 1919px y 1680px */
@media (max-width: 1919x) and (min-width: 1680px) {
    .contenedor {
        width: 1640px;
    }
    .header {
        width: 380px;
    }
    .nioos {
        font-size: 147px;
        line-height: 238px;
    }
    .subtitle {
        font-size: 21px;
        line-height: 34px;
    }
    .principal {
        width: 1220px;
        left: 420px;
    }
    #mapa {
        height: 754px;
        font-size: 21px;
        line-height: 34px;
    }
    .gs-newsResult {
        height: 306px;
    }
    #direccion {
        width: 1105px;
    }
    .control {
        font-size: 21px;
    }
    #buscando {
        left: 1085px;
        top: 7px;
    }
}

/* valores para un ancho de navegador mayores de 1920px */
@media (min-width: 1920px) {
    .contenedor {
        width: 1880px;
    }
    .header {
        width: 440px;
    }
    .nioos {
        font-size: 168px;
        line-height: 272px;
    }
    .subtitle {
        font-size: 42px;
        line-height: 68px;
    }
    .principal {
        width: 1400px;
        left: 480px;
    }
    #mapa {
        height: 865px;
        font-size: 21px;
        line-height: 34px;
    }
    .gs-newsResult {
        height: 306px;
    }
    #direccion {
        width: 1280px;
    }
    .control {
        font-size: 21px;
    }
    #buscando {
        left: 1260px;
        top: 7px;
    }
}

Para conocer cuales son las resoluciones más habituales, y así construir nuestro fichero css para las resoluciones que consideremos más importantes, podemos visitar las siguientes webs:

http://www.w3schools.com/browsers/browsers_display.asp
http://www.w3schools.com/browsers/browsers_resolution_higher.asp
http://gs.statcounter.com/
http://en.wikipedia.org/wiki/Display_resolution
http://www.screenresolution.org/

También hay que tener en cuenta que ciertos navegadores antiguos (como internet explorer 8 y versiones anteriores) no tienes soporte para media queries de css, por lo que deberemos indicar los valores por defecto del tamaño de los elementos de nuestra página web para estos browsers.

2011-11-03

Mostrar y ocultar una imagen de carga con css

Es muy importante mostrar información al usuario sobre lo que está pasando con la página web que está visualizando.

De esta forma es conveniente, por ejemplo, mostrar una pequeña imagen cerca del botón de búsqueda cuando el usuario está esperando a que se devuelvan los resultados.

Hay muchas posibles imagenes que se pueden usar, la que usamos en nuestro ejemplo es una que hemos descargado de Ajaxload - Ajax loading gif generator.

Esta pequeña "ruedecita" se situa en nuestra página mediante el elemento:

<img id="buscando" src="images/ajax-loader.gif" />

Este elemento tiene un estilo css asociado que inicialmente no lo muestra (el elemento está oculto).

#buscando {
    position: absolute;
    left: 790px;
    top: 7px;
    visibility: hidden;
}

Posteriormente, mediante un javascript muy simple, lo mostramos y ocultamos a nuestra conveniencia para informar al usuario de que la página está realizando alguna acción y todavía no ha terminado.

Para mostrar:

document.getElementById("buscando").style.visibility = "visible";

Para ocultar:

document.getElementById("buscando").style.visibility = "hidden";

Es un efecto simple y da una muy buena impresión al usuario de nuestra web.

2011-11-02

Usar el api de twitter con jquery

Es posible usar el api de twitter junto con jquery, en concreto con sus potentes capacidades ajax, para mostrar los twits próximos a nuestra zona de busqueda sobre el mapa de nuestro sitio web.

El uso de ajax con jquery es muy simple como vamos a ver con la siguiente función:

function buscarTwitter(mDistancia, lat, lng) {
    var distance = mDistancia / 1000;
    var twitterUrl = "http://search.twitter.com/search.json?q=&rpp=100&geocode=" + lat + "," + lng + "," + distance + "km";
    $.ajax({
        url: twitterUrl,
        cache: false,
        dataType: "jsonp",
        beforeSend: mostrarBuscando(),
        complete: ocultarBuscando(),
        success: function(data) {
            var results = data.results;
            parsearResults(results);
        }
    });
}

En primer lugar construimos la URL de búsqueda en twitter con los parámetros que queremos, en este caso, la latitud, la longitud, y el radio de búsqueda (en kilómetros).

var twitterUrl = "http://search.twitter.com/search.json?q=&rpp=100&geocode=" + lat + "," + lng + "," + distance + "km";

Después usamos la función de jquery $.ajax():

$.ajax({

  url: twitterUrl,

  cache: false,

  dataType: "jsonp",

  beforeSend: mostrarBuscando(),

  complete: ocultarBuscando(),

  success: function(data) {

    var results = data.results;

    parsearResults(results);

  }

});

Aquí es importante notar que:

el parámetro dataType es jsonp (el tipo de datos devuelto por el api)
el parámetro beforeSend es una función "mostrarBuscando()" que se encarga de hacer visible la "ruedecita" de búsqueda
el parámetro complete es una función "ocultarBuscando()" que se encarga de ocultar la "ruedecita" de búsqueda
el parámetro success es una función que recoge los datos devueltos por twitter y los presenta en el mapa

Como veis no es dificil usar un api externo haciendo uso de las funcionalidades de jquery.

Añadir jquery al proyecto web

La librería jquery es una de las librerías javascript más populares para el desarrollo de sitios web.

La forma más sencilla de añadir esta librería a nuestra página web es añadiendo, en la cabecera, la siguiente línea, que no permite cargar la librería directamente de los servidores de Google.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Muy sencillo.

Ayuda IT

Páginas