Posts Tagged ‘Perla’

Genera estadísticas de tus descargas

Escrito por Oriol Navascuez en 11/08/2010

Hoy en día las estadísticas son muy importantes, por no decir imprescindibles. “Tenemos un 74% de visitas nuevas”, “el 11% es trafico directo”, “…noticia tiene un 12% de las visitas de la web”,… exacto, todo son números, porcentajes,… al fin y al cabo, es lo que al cliente le interesa. Lo importante para el cliente o empresario que nos contrata es el objetivo de conversión.

Y que es esto del objetivo de conversión? Cualquier página, archivo o documento descargable es un documento de conversión. Pero os damos unos ejemplos para que quede más claro:

  • Una página de “agradecimiento” que aparece tras introducir datos en un formulario. Estas páginas permiten realizar un seguimiento de los registros para la recepción de boletines informativos, suscripciones a listas de correo electrónico, envío de solicitudes de trabajo o formularios con información de contacto.
  • Una página de confirmación de compra o página de recibo.
  • Una página “Acerca de nuestra empresa”.
  • Un determinado artículo o una noticia.
  • Cualquier otra página a la que intente conducir a los usuarios que visitan su sitio.

Todos estos casos son objetivos de conversión, y como tal, es posible que nos interese tener un número de veces que se visitan, o se descargan.

Es posible que haya secciones de nuestra web que no se estén siguiendo en analytics dada su situación, como pueden ser formularios paginados, o descargas de archivos y se nos pida averiguar el número de visitas que se realizan. A día de hoy lo que más he usado y visto, son funciones en PHP que en cuanto se carga la pagina deseada se ejecuta una función que aumenta un número en una base de datos, haciendo así una estadística interna. Eso no está mal, pero si lo queremos unificar todo en la herramienta de Google Analytics, tenemos una herramienta para poder hacerlo.

Una forma más sencilla de hacer el seguimiento de estos datos, si contamos ya con las estadísticas de Google Analytics, es de la forma que os enseñaremos a continuación.

Si leemos los artículos de ayuda de Google Analytics, veremos que nos facilitan la función “_trackPageview“. Esta función permite realizar el seguimiento de los eventos del sitio que no generen una visita de página, es decir, a las descargas de archivos, a los enlaces salientes, etc.

Por ejemplo, para registrar todos los clics que se realizan a un enlace determinado, www.ejemplo.com/descargas/tutorial1.zip, como visita de pagina de /descargas/tutorial1 deberemos añadir el siguiente atributo a la etiqueta <a> del enlace:

<a href="http://www.ejemplo.com/descargas/tutorial1.zip" onClick="javascript: pageTracker._trackPageview('/descargas/tutorial1'); ">

Una vez colocada la función en nuestra web, en 24/48 horas, podremos ver los resultados en nuestra cuenta de Google Analytics.

DIV height: 100%

Escrito por Oriol Navascuez en 05/05/2010

Bueno pues a raíz de una consulta de una amiga diseñadora… surge esta otra perlita sobre CSS.

Alguna vez maquetando hemos necesitado hacer que un <div> nos ocupe el 100% del alto de una capa, o de toda la web. Y normalmente, si no se sabe este pequeño truco, hemos tenido que hacer cosas raras. Pues bien, la solución es bastante sencilla, y es la siguiente.

Para conseguir que cualquier <div> que tengamos en nuestra web pueda tener el 100% del alto de la capa en la que se anida, solo tenemos que darle el 100% de altura al html y al body. De esta forma:


html, body { height: 100%; }

Al decirle a los tags html y body que su altura será del 100% nos permite que las capas que nosotros queramos opten también a tener esa altura. Es una tontería, pero cuando no se sabe este pequeño truco, puede dar muchos problemas el maquetar alguna cosa.

Hay que tener en cuenta también, que la capa o capas anterior a la que le queremos dar ese height:100%, deben de tener un alto especificado. Es decir, si la capa anterior le damos 200px de alto, el height:100% será de esos 200px de la capa contenedora, o si a la capa anterior le damos también 100% de alto igual que a la capa que se lo queremos dar, nos ocupará toda la pantalla. Solo teniendo en cuenta esto, podremos hacer capas al 100% en cualquier instancia.

Por si no os ha quedado demasiado claro, o queréis ver un ejemplo del funcionamiento, podéis ver esta página de ejemplo que hemos preparado:

DEMO

Esperamos que os sirva esta pequeña perla, como decimos nosotros, para vuestros diseños! ;)

Centrar un DIV horizontal y verticalmente

Escrito por Oriol Navascuez en 03/05/2010

Aquí va la primera perla de 2Novatos.

Cuantas veces hemos necesitado centrar un div para un diseño, o para posicionar un texto dentro de otra capa? El que diga nunca miente, yo, muchísimas.
Y cuantos de vosotros habéis necesitado centrar un div horizontal y verticalmente? Quizá no tantos, pero si alguna vez lo habéis necesitado y no se os ha ocurrido como, os damos la solución.

Para centrar un div de forma horizontal con CSS solo tenemos que crear un div y aplicarle la siguiente clase:

Centrar horizontalmente:

.centrarH{
    width:270px;
    height:150px;
    margin:0 auto;
}

El único secreto de esta clase es el valor margin al cual le damos el valor 0 auto. Con esto lo que le decimos es que el margen superior e inferior sea igual a 0, y que el margen de la izquierda y de la derecha sean automáticos. Con lo que conseguimos que nuestra capa se posicione al centro.

Bien, y como hacemos que además de centrada horizontalmente lo esté verticalmente? Pues ya no es tan sencillo, pero tampoco es nada difícil, solo tenemos que hacer alguna división…

Centrar horizontal y verticalmente:

.centrarHV{
     width:270px;
     height:150px;
     position:absolute;
     left:50%;
     top:50%;
     margin:-75px 0 0 -135px;
}

Bien, en este caso nuestra clase ya tiene algunos atributos más que la anterior. Esta vez lo que le hemos dicho es que con left y top al 50% nos centre la capa hacia el centro de nuestra pantalla. Pero si solo hacemos eso, la capa se centra en la esquina superior izquierda, y lo que queremos es centrarla desde el centro de la capa en cuestión.

Para ello hacemos uso de una simple división. Creamos el atributo margin dándole valores negativos de la mitad del alto de nuestro div y la mitad del ancho de este. Con lo que el div se centra en el punto medio quedando centrado en la pantalla.

Pues con estas dos simples clases ya tenemos dos divs centrados horizontal y verticalmente. A continuación os dejo con una imagen que hemos hecho, para que veáis, el efecto que va teniendo aplicar las CSS.