El tip consiste en integrar JSmin  a los comandos favoritos de PSpad para comprimir el código JS sin salir del programa.

Ingredientes

• PSPad instalado (sobre Windows).
• JSMin versión línea de comandos para Windows (Descarga directa aquí).
• Un código javascript para usar de ejemplo.

Preparación

Ejecuta PSpad y crea un nuevo documento de texto, este servirá para crear un archivo BAT (proceso por lotes) que se encargará de ejecutar JSMin. El archivo debe contener el siguiente código y lo guardas como jsmin.bat en la misma carpeta que jsmin.exe

jsmin.exe <%1 >%2

Se usa un BAT porque JSMin no funciona correctamente al llamarlo directamente desde PSpad.

Crear un favorito en PSPad

Los favoritos están en la pestaña de el panel lateral de PSpad (si no esta visible lo mostras con Ctrl+F2), tiene un icono de corazón.

Busca un espacio en blanco de la barra y haces click derecho para mostrar el menú y crear un nuevo enlace.

En la ventana de nuevo enlace escribí

• JSmin como nombre
• busca el archivo BAT que creaste en el primer paso en Ruta
• y como parámetros agrega la siguiente línea

"%File%" "%Dir%%Name%-min.js"

La línea anterior envía la ubicación del archivo javascript y la ubicación del nuevo archivo comprimido agregando “-min” al nombre, por ejemplo si el archivo se encuentra en C:/codigo.js el nuevo archivo se creara como c:/codigo-min.js

En la misma ventana de crear enlace busca la carpeta en donde se encuentra jsmin.bat y jsmin.exe, deberías de tener algo similar a esto

Active Capturar salida para que muestre los resultados en PSpad pero no es necesario. Presiona Aceptar y listo.

Ahora podes comprimir cualquier archivo JS que estes viendo en PSPad solo usando el enlace en los favoritos en la barra lateral. Nada extraordinario pero si muy útil para facilitar el trabajo.

Comenta

ivanmendoza 2010 - Bajo licencia Creative Commons By-NC-SA.

Para hacerlo tuve que modificar el código un poco y aprovechando les dejo el tip de cómo lo hice para que se ahorren unos minutos cuando tengan que hacerlo. Antes de empezar, easySlider es esto:

y este tip es para tener un registro de cuantas veces han hecho click en el botón de siguiente o anterior (las flechas a los lados).

¿Qué necesitas?

• Una cuenta de Google Analytics y el código instalado en la página web. Importante: tienes que usar el “nuevo” código ga.js y no urchin.js
• Tener instalado easySlider en la página, eso incluye jQuery para que easySlider funcione. Para poder modificar easySlider debes usar la versión sin comprimir (el archivo de descarga incluye dos versiones).
• Un editor de texto para modificar código javascript de easySlider.

¿Cómo conseguir que Analytics detecte eventos?

Lo primero es averiguar cuál es el nombre del objeto que esta usando Google Analytics. Si usaste el código que Google te ofrece por defecto tendrás algo como esto:

y el objeto es pageTracker. La forma de avisarle a Analytics que se activo un evento es usando la función _trackEvent que tiene tres parámetros básicos aunque puedes añadir más.

pageTracker._trackEvent(“categoria”, “accion”, “etiqueta”, “valor”);

En resumen los tres primeros parámetros son para clasificar el evento: categoría es el más general, seguido de la acción (qué evento es) y por último etiqueta con la información del elemento. El resto de parámetros son valores que se pueden enviar como información extra.

Para easySlider solo use los tres primeros y la función queda así:

pageTracker._trackEvent("Homepage_Slider", "Navigate", "Next");

Modificar easySlider para disparar los eventos

Modificar easySlider para lanzar el evento de siguiente y anterior es bastante sencillo, solo debes buscar el siguiente código en el archivo easySlider.js y añadir algunas líneas.

$("a","#"+options.nextId).click(function(){
animate("next");
if (t>=ts) $(this).fadeOut();
$("a","#"+options.prevId).fadeIn();
});

$("a","#"+options.prevId).click(function(){
animate("prev");
if (t<=0) $(this).fadeOut();
$("a","#"+options.nextId).fadeIn();
});

Ese código es el que usa easySlider para hacer el cambio de información, justo debajo de la función de animate debes agregar la llamada a _trackEvent para  que Analytics registre el evento. Como precaución incluí la función dentro de un If que revisa el objeto pageTracker.

$("a","#"+options.nextId).click(function(){
animate("next");
if(pageTracker){
pageTracker._trackEvent("Homepage_Slider", "Navigate", "Next");
}
if (t>=ts) $(this).fadeOut();
$("a","#"+options.prevId).fadeIn();
});

$("a","#"+options.prevId).click(function(){
animate("prev");
if(pageTracker){
pageTracker._trackEvent("Homepage_Slider", "Navigate", "Previous");
}
if (t<=0) $(this).fadeOut();
$("a","#"+options.nextId).fadeIn();
});

Listo, con esos cambios Google Analytics registrará cada click que hagan tus visitantes en los botones de siguiente y anterior.

Revisar los registros

Esta es la parte aburrida porque tenes que esperar a que Google Analytics actualice sus datos. Cuando esto suceda podrás ver las estadísticas en la pestaña de Content > Event tracking (Contenido > Seguimiento de eventos) y te mostrará algo como esto

Gráfica de la interacción de los visitantes con easySlider

Tabla del total de eventos y la cantidad de eventos por elemento (label). Como era de esperarse la gente usa más el botón Next (17 clicks) que el botón Previous (5 clicks).

El seguimiento de eventos de Google Analytics se puede utilizar para muchas cosas más, este es solo un pequeño ejemplo, y puedes aprovechar esta opción para llevar registro de cómo usan los visitantes una página web más allá de las paginas visitan.

Encuentras más información de Event Tracking en la guía oficial de Google Analytics: Event Tracking Guide (inglés).

Aclaración: Las modificaciones de este ejemplo son de la última versión publicada de easySlider y no los he probado, en mi caso trabaje con la versión anterior 1.5 de easySlider que varia un poco.

Comenta

ivanmendoza 2009 - Bajo licencia Creative Commons By-NC-SA.