El orden de las propiedades CSS

Si eres de los que escriben páginas y páginas de CSS (o utilizas pre-procesadores como SASS, LESS, Stylus, o tu propio pre-procesador), alguna vez te habrá asaltado la duda de en qué orden deberían ir las propiedades de las reglas CSS. ¿Al azar? ¿Alfabéticamente? ¿Siguiendo algún patrón arcano?

Ordenar las propiedades CSS ayuda a mantener una estructura de código clara, y evita que pierdas tiempo pensando en dónde poner (o no poner) una nueva propiedad. Además, si trabajas en un equipo con otros amantes del CSS como tú te será más fácil leer código que no has escrito, y de alguna manera estarás contribuyendo a crear una guía del estilo del proyecto Continúa leyendo El orden de las propiedades CSS

Compartir en redes sociales y medir con Google Analytics

¿Gestionas las estadísticas de visitas de un sitio web con Google Analytics, y quieres medir la efectividad de los botones para compartir en redes sociales?

El código de seguimiento JavaScript de Google Analytics (Tracking Code, que carga en la página el archivo externo ga.js con todas las funcionalidades), dispone de una API en la que consta un método que permite este tipo de medición, el método _trackSocial(). Con él se pueden registrar las interacciones “sociales” de nuestro sitio y categorizarlas correctamente.

_gaq.push(['_trackSocial',  'theSocialNetwork', 'like', 'http://www.mysite.com/abc']);

El botón de Google+ invoca automáticamente éste método al ser activado y envía la información a nuestra cuenta de Google Analytics; pero si queremos medir las acciones de otras plataformas como Facebook o Twitter, entonces se requiere un poco más de trabajo e integración con las APIs de esos servicios. Continúa leyendo Compartir en redes sociales y medir con Google Analytics

use strict

Como si de un aviso de alguna hermética entidad se tratara, desde hace un par de años ha ido apareciendo en las entrañas de algunas librerías JavaScript y en ejemplos de código dispersos por la red la enigmática frase ‘use strict’.

¿Y qué demonios significa esta sentencia?

Más o menos indica al motor de interpretación de JavaScript de tu navegador favorito (y moderno, no me utilices Internet Explorer) que sea más restrictivo en la ejecución de scripts, un poco más seguro, y allá donde antes era permisivo y hacía la vista gorda ahora emita errores y regañe al programador.

Así por ejemplo, crear una variable global dentro del contexto de una función:

function testFunction()
{
    var localVar = true;
    globalVar = 4;
}
testFunction();

Continúa leyendo use strict

Imágenes que no dicen onLoad

JavaScript y la etiqueta <img> siempre han sido buenos amigos, desde aquellos días que  gracias a un pequeño script se precargaban todas las imágenes de una página, como por ejemplo los rollovers de ciertos botones.

var preload_imgs = ["image1.jpg", "image2.gif", "image3.jpg"];
for(var i=0; i<preload_imgs.length; i++)
{
	var img = new Image();
	img.src = preload_imgs[i];
}

¿Pero que ocurre cuando se crean o se tratan imágenes dinámicamente, y se quiere controlar el preciso momento en que están son (des)cargadas? Continúa leyendo Imágenes que no dicen onLoad

Ruby Blue, o como crear temas para FlashDevelop

Quién haya programado algo en ActionScript o HaXe seguramente conocerá el programa FlashDevelop, un editor de código open source bastante completo y potente para Windows (creo que para Linux y Mac hay una versión con MonoDevelop).

El único inconveniente que le veo (que más quieres, es gratuito) es que no hay ninguna manera evidente de cambiar el theme – los colores de la ventana de edición de código. Otros entornos como Eclipse permiten muy fácilmente cambiar el tema de colores (gracias al plugin Eclipse Color Themes), y después de haber probado combinaciones de fondos oscuros como Oblivion o Solarized Dark una ventana de edición en blanco quema mis retinas.

Pantalla de edición de FlashDevelop
Una página con fondo blanco, el horror…

Así, para cambiar el theme a FlashDevelop es necesario obtener un archivo .FDZ (que no es más que un archivo comprimido ZIP con otra extensión), ejecutarlo y aceptar la instalación. La próxima vez que se lance FlashDevelop habrá cambiado de colores, probablemente a mejor.
(Puedes probar con éste archivo FDZ basado en Ruby Blue, creado por mismamente yo.)

Ahora que sabemos como alterar la combinación de colores, crear un tema nuevo será igual de sencillo. Continúa leyendo Ruby Blue, o como crear temas para FlashDevelop