Integrar estadísticas con Google Analytics

Las estadísticas son algo básico para un blogger, así que si usáis Google Analytics os interesará esta parte. Dentro de la configuración hay una parte que lo especifica: “AdSense, estadísticas y código a medida”, sin embargo, no es trivial la configuración.

Dentro de esa parte tenemos un textarea para rellenar con título: “Estadísticas y código a medida”. Deberemos introducir el siguiente código JavaScript, modificando sólo nuestro identificador de cliente de Google Analytics (es una cadena de la siguiente forma: “UA-XXXXXX-X). Veamos:

<script type=”text/javascript”>

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-EL_TUYO-X']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

Una vez hecho esto guardamos y nuestro blog móvil también contará en la visitas de Analytics.

Integrar publicidad con Google AdSense

Los canales convencionales de publicidad para AdSense no tienen el formato apropiado para la web móvil. Por lo tanto, deberemos comenzar creando un canal para móviles en nuestra cuenta de AdSense.

Para ello inicias sesión en la plataforma de anuncios de Google y dentro de ella te diriges a:

1. Mis anuncios
2. Contenido para móviles
3. Criterios de seguimiento personalizados

Una vez creado el criterio de seguimiento, dentro de “Contenido para móviles”, elegimos “Bloques de anuncios” y creamos un anuncio a nuestro gusto. Guardamos y obtenemos el código.

Con este código, el criterio que acabamos de crear y nuestra identidad de AdSense, tenemos ya todo listo. Rellenamos nuestra identidad y nuestro canal dentro de los campos preparados para ello en la configuración de WPtouch:

• Identidad de Google AdSense
• Canal de Google AdSense

Y el código lo incluimos en el mismo textarea en el que hemos introducido el código de Analytics, incluyendo algún salto de línea entre ellos.

Con ésto estará todo listo.

Cada vez más los juegos se están pasando de Flash a la tecnología HTML y Javascript. Ya publiqué en su momento juegos como Biolab Disaster o un juego propio, como Milokoban.

El juego que presento hoy es Karoshi HTML5, donde el objetivo del juego es suicidarse en vez de sobrevivir. El juego está desarrollado con la herramienta Game Maker HTML5, si bien no es libre sí que permite desarrollar juegos con la tecnología HTML y Javascript.

Enlace: Karoshi HTML5.

¿Qué problema tiene HTTP? Para cada petición de este tipo, abre y cierra la conexión. ¿Eso qué conlleva? Un aumento del tiempo de transferencia.

Como se puede observar, el problema en parte es abordable ya que aunque no podemos (por ahora) reunir todas las imágenes en una sola transmisión, sí que es cierto que podemos hacer que si tenemos 4 ficheros de hojas de estilo CSS y 10 ficheros JavaScript que cargar; podemos limitarnos a enviar un sólo fichero de cada tipo al navegador. El resultado no cambia y aceleramos el proceso.

Si usamos WordPress, podemos instalar WP Minify para que automatice este proceso por nosotros y nos olvidemos, junto con otra mejora, comprime ambos ficheros resultantes lo que lleva a una mejora mayor aún de la ya comentada.

Podéis ver el efecto de usarlo en las capturas siguientes:

Casi 100.000 bytes recibidos, tras usar WP Minify tenemos:

Menos de 30.000, ¿muy útil verdad? Veamos cómo instalarlo. Nos dirigimos a:

• Escritorio
• Plugins
• Añadir nuevo
• Buscamos “WP Minify”
• Instalar ahora

Una vez instalado lo activamos pero antes de eso nos aseguramos de que el servidor web tiene permisos de escritura en:

• /wp-content/plugins/wp-minify/cache
• /wp-content/plugins/wp-minify/min/config.php

Con sólo eso veremos el rendimiento de nuestro sitio optimizado de forma automática sin esfuerzo de nuestra parte.

Ejemplo

Código fuente del ejemplo

El componente social lo pone BuddyPress, uno de los plugins más radicales que he conocido para WordPress, ya que introduce gran cantidad de características y básicamente permite hacer una pequeña red social en el sitio.

Adaptamos un tema, montamos todo y como normalmente ocurre con WordPress, todo perfecto sin tener que adentrarnos demasiado en el código, ni tener que dedicarle más tiempo del estrictamente necesario.

Sin embargo, cuando actualizamos a WordPress 3.2.1 comenzó a surgir un problema, había elementos que no se estiraban y aparte de los defectos estéticos, la consola de JavaScript se quedaba tan bloqueada, que acciones tan necesarias como comunes (por ejemplo subir una imagen) no podían efectuarse fácilmente.

Me puse a investigar y el error que me aparecía en la consola de JavaScript era algo así como: f.easing e.animatedproperties this.prop is not a function (con algunos corchetes y paréntesis de por medio). En Google no había suficiente documentación, o al menos, con la presente no era capaz de llegar a resolver el problema de manera inmediata.

Sólo pude llegar a deducir dos cosas y a raíz de ahí pude completar la solución:

1. Había una incompatibilidad por la llamada a una serie de funciones que habían cambiado de nombre en una versión reciente del plugin de jQuery: jQuery Easing.
2. Esta incompatibilidad se manifestaba en alguna llamada al plugin.

Veamos cómo he procedido para solucionar el problema. Aunque existe un fichero para evitar esto mismo, de compatibilidad con versiones anteriores (que por cierto acabo de ver y que en su momento no conocía) lo que hice fue lo siguiente.

Modificar llamadas

Las llamadas a funciones antiguas las cambié por su equivalentes en la nueva versión del plugin jQuery:

• easeIn por easeInQuad
• easeOut por easeOutQuad
• easeInOut por easeInOutQuad

Tenéis una lista completa de modificaciones de llamadas en el fichero de compatibilidad (por si preferís no usarlo y directamente tratar con las nuevas funciones).

Una vez modificado ésto, el problema seguía existiendo y es que en el fichero global.js de mi tema, estaba integrado el plugin antiguo (o algunas líneas de éste con las funciones que usaba) y había un problema de nombres de funciones y llamadas.

Eliminar rastros

Busque la línea y la suprimí, de hecho, para evitar más problemas, quité el fichero propio del plugin e integré su contenido en mi fichero global.js.

Todo esto que os comento se habría solucionado con el fichero de compatibilidad que acabo de encontrar, pero no deja de ser un ejemplo de cómo, una pobre planificación inicial en un desarrollo (el del complemento de jQuery) hace que luego surjan quebraderos de cabeza variados. Tened en cuenta que el error lo da una función que a priori no tiene nada que ver con eso y que por las características propias de JavaScript, es verdaderamente complicado ver código de jQuery o sus plugins en versión de producción, que no de desarrollo.

Se pueden incluir tantas etiquetas script como se quiera en un documento. Otra manera de utilizar Javascript es mediante el atributo src de la etiqueta script. Este atributo se utiliza para incluir un archivo externo que contiene Javascript y que quiere incluirse en el código HTML. El archivo externo simplemente es un archivo del texto que contiene código JavaScript, y cuyo nombre acaba con la extensión js:

Y por último, puede incluirse también código Javascript como respuesta a algún evento. Aquí se muestra un ejemplo en el que el usuario cuando pulsa el botón Clic le aparece un mensaje que le dice que acaba de pulsar ese mismo botón:

Cuando di a conocer el videojuego Biolab Disaster, se me olvidó hacer referencia al motor de JavaScript con el que estaba hecho: Impact JS. En su momento probé el motor e hice algunas pruebas y me gustó mucho, es por eso que me gustaría que lo conocieráis.

Impact JS es un motor de JavaScript específico para crear videojuegos. Usando la API de este motor te despreocuparás del navegador que vaya a funcionar, ya que está preparado para que ande en todos los navegadores, incluso en los de los móviles. Además cuenta con un editor de niveles y un depurador para que el desarrollo de tu videojuego sea mucho más fácil y sencillo.

La licencia que tenía, en un principio, era libre, aunque no gratis, para modificar y distribuir, pero ahora se está cerrando un poco más. Espero que con el tiempo, Dominic Szablewski, el autor, lo libere por completo tal como insinuó, estaremos al tanto.

Además de Biolab Disaster, hay otros videojuegos creados con este motor como Z-Type o Creatures and Castles.

Página oficial: Impact JS.

Esta función, cuando se ejecuta, espera una cantidad de milisegundos hasta que llama otra función. Aquí os dejo un ejemplo con su código para clarificarlo.

Ejemplo

Código fuente del ejemplo

Debido a mi afán de estas tecnologías, aquí os dejo Milokoban, el típico juego de empujar cajitas. Lo publiqué hace un año tanto en mi web como en Android y pongo a vuestra disposición el código fuente. La licencia es GPLv3. ¡Espero que os guste!

Juego:

Código fuente: milokoban.zip.

Android Market: Milokoban.

Como me gustan los juegos aquí os dejo uno que demuestra lo que se puede hacer ya programando en estos lenguajes. Si bien estas tecnologías aún les queda mucho camino para sustituir la potencia de Flash con respecto a las aplicaciones web, es un avance muy importante.

Los controles son el cursor izquierdo y el cursor derecho para moverse y espacio para saltar. Si no se mueve el personaje, pulsa con el botón izquierdo del ratón en el canvas.

En Javascript, éste es el código que yo utilizo cuando quiero hacer una web multiplataforma:

Esto es muy útil ya que no se usarán los mismos eventos de Javascript en un PC que en un dispositivo táctil.

Ejemplo

Para probar el ejemplo, copia el código fuente y pégalo en un editor de textos. Guárdalo como ejemplo.html y ejecútalo desde un navegador.

1. data()

El método data nos permite manejar datos de cualquier elemento del DOM de una forma segura, evitando referencias circulares y los efectos sobre la memoria de las mismas. Veamos un ejemplo:

<div data-type="page" data-hidden="true" data-options='{"name":"John"}'></div>
$("div").data("role") === "page";
$("div").data("hidden") === true;
$("div").data("options").name === "John";

O lo que es lo mismo:

$("div").data("role", "page");
$("div").data("hidden", "true");
$("div").data("role", {name: "John"});

Referencia completa en la documentación jQuery de data()

2. stop( [limpiarCola ], [saltarAlFinal] )

El método permite parar, la animación que está actualmente en ejecución. Es verdaderamente útil cuando manejamos imágenes.

Veamos un ejemplo de llamada:

$(this).find('img').stop(true, true).fadeOut();

Referencia completa en la documentación jQuery de stop()

3. toggleClass()

Permite conmutar clases, de forma, que si el elemento tiene ya la clase, la elimina y viceversa. El siguiente código:

$('#home').toggleClass('active');

Hace exactamente lo mismo que este:

if ($('#home').hasClass('active')) {
    $('#home').removeClass('active');
}
else {
    $('#home').addClass('active');
}

Referencia completa en la documentación jQuery de toggleClass()

4. delay(duracion, [nombreCola])

Permite retrasar la ejecución de las funciones que se ejecutan en una cola. Muy útil con las animaciones.

$('#content').slideUp(300).delay(800).fadeIn(400);

Referencia completa en la documentación jQuery de delay()

5. each()

Este método nos permite iterar sobre estructuras del DOM de una forma simple en una sola línea. Cada vez que se llama, itera una vez comenzando en el elemento 0 hasta el final de la estructura. Veamos un ejemplo:

<ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Mango</li>
    <li>Blueberry</li>
    <li>Watermelon</li>
</ul>

Referencia completa en la documentación jQuery de each()

6. size()

La llamada a esta función es equivalente a la llamada al atributo length. Es mejor usar el atributo, pero siempre viene bien saber más posibilidades.

var size1 = $("li").size(); // es igual a
var size2 = $("li").length;

Referencia completa en la documentación jQuery de size()

7. closest(selector)

Obtiene el primer ancestro (elemento superior en el árbol) que concuerda con la regla incluida en el selector.

$('li.item-a').closest('ul').css('background-color', 'red');

Referencia completa en la documentación jQuery de clostest()

8. position()

El método nos devuelve la posición de un elemento respecto a otro, a diferencia del método offset que lo hace respecto del documento. Sin lugar a dudas, el método más útil para situar elementos de forma relativa a otros:

var p = $("p:first");
var position = p.position();
alert("left: " + position.left + ", top: " + position.top);

Referencia completa en la documentación jQuery de position()

No se fuerzan cambios ni refrescos de pantalla y por lo tanto, la experiencia del usuario es más continua y más parecida a cómo sería en un interfaz de escritorio. Sin embargo, este tipo de tecnologías tiene un problema: si no controlamos los eventos del usuario mientras existe una carga de datos, es posible que se generen comportamientos erráticos.

Pongamos un ejemplo. Tenemos un sistema que carga una serie de datos de forma dinámica con AJAX a través de un formulario. Cuando el usuario hace la búsqueda, la carga se realiza y se le muestra. Si la carga tarda “mucho” y no se bloquea de alguna forma la posibilidad de seguir buscando, pueden aparecer resultados incoherentes (de búsquedas anteriores) o directamente fallar el sistema por sobrecarga.

¿Cuál es la solución más popular para este tipo de problemas? Utilizar una pantalla de espera. Vamos a explicar cómo hacerlo con jQuery en muy pocos pasos.

Introducción

La solución que vamos a usar, utilizará un div no opaco de color gris, que ocupará la pantalla al completo cuando se produzca una petición de tipo AJAX. El div incorporará una animación en la parte central.

El div

Deberemos situar un div que por defecto se encuentre escondido, hide, justo al comienzo de nuestro código del body. Contendrá una imagen de carga, que podréis generar fácilmente con alguna aplicación web como AJAXLoad.

El código será el siguiente:

<div id="div_carga">
<img id="cargador" src="./images/ajax-loader.gif"/>
</div>

El estilo del div

Para que el div ocupe la pantalla completa y la imagen se quede en medio, deberemos establecer las siguientes reglas CSS:

#div_carga{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
	background: url(images/gris.png) repeat;
	display:none;
	z-index:1;
}
#cargador{
    position:absolute;
    top:50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;
}

El fichero gris.png que aparece, es un fichero con una imagen en PNG de color gris con transparencias.

El código jQuery

Finalmente tenemos que introducir el código que se encargue de hacer que en cuanto se produce una petición AJAX el div se muestre y que cuando finalice, se oculte. Podríamos hacerlo para cada operación, pero es mucho más cómodo usar las funciones:

• .ajaxStop()
• .ajaxStart()

¿Cómo? Como se muestra a continuación.

$('#div_carga')
			.hide()
			.ajaxStart(function() {
				$(this).show();
			})
			.ajaxStop(function() {
				$(this).hide();
			})
		;

Como siempre, cualquier sugerencia, corrección o comentario será bien recibido.

Éste es el código que utilizo sin usar ningún tipo de librería:

En la función imagenCargada es donde ya sé que la imagen ha sido cargada correctamente y puedo proceder a su utilización ya que está almacenada en memoria.

Ejemplo

Código fuente del ejemplo

Descarga el código fuente del ejemplo pulsando aquí.

DepthJS es mucho más que una nueva forma de navegar. La idea fundamental es que ahora los desarrolladores web que se especializen en Javascript pueden trabajar con el Kinect sin tener que aprender un nuevo lenguaje o código especial de comunicación. Esto permitirá una nueva serie de interacciones más allá de lo que desarrolló por primera vez.

A continuación os dejo el vídeo del equipo de desarrollo de DepthJS en acción:

DepthJS es una aplicación de código abierto bajo la licencia AGPL. La podéis descargar desde github.com/doug/depthjs