Utilidad para la maquetación de diseños en retícula
26 de Mayo 2008
Si tienes la necesidad de comprobar que la maquetación html de un diseño en retícula mantiene las distancias y anchuras correctas, puedes dedicarte a hacer capturas de pantalla y compararlas con los diseños, utilizar algún programa para medir espacios en pantalla (recomiendo Webmaster’s Toolkit, buenísimo) o superponer una retícula sobre tus páginas.
Para esto último he creado un bookmarklet que superpone una retícula semitransparente centrada en la página. La retícula utilizada tiene una anchura total de 1002 píxeles (976 de espacio útil + 13 píxeles por cada lado de distancia de seguridad), 12 columnas de 75 píxeles cada una y márgenes de 8 píxeles entre ellas.
Para usar el bookmarklet, arrastra el link “Retícula” a la barra de marcadores en Firefox o Safari o haz click con el botón derecho del ratón sobre él para añadirlo a los favoritos en Internet Explorer u Opera. Para quitar la retícula haz click sobre ella.
Si necesitas utilizar otra imagen de fondo, puedes modificar el código desde las propiedades del favorito.
De momento no funciona en Konkeror y parece no funcionar corréctamente en esta página en Internet Explorer 6 y 7, aunque sí lo hace en otras.
Actualización 9 noviembre 2008
Dejo una nueva versión de la retícula en la que la imagen se genera mediante codificación en base 64 y data URL, de manera que no es necesario que se descargue de un servidor. (Sólo para Firefox y navegadores decentes)
Más información sobre imágenes codificadas en base 64 en yukei.net
[0];var alturaContenedor = divContenedor.scrollHeight;alturaContenedor += 'px';var capaReticula = document.createElement('div');capaReticula.style.width = '100%';capaReticula.style.height = alturaContenedor;capaReticula.style.position = 'absolute';capaReticula.style.top = 0;capaReticula.style.left = 0; capaReticula.style.opacity = '0.5'; capaReticula.style.filter = 'alpha(opacity='+50+')'; capaReticula.style.MozOpacity = '0.5'; capaReticula.style.background = 'url(http://idivimage.com/files/yxdmtjmumznymzmzmznn.gif) top center repeat-y';capaReticula.title = 'Clícame para quitarme'; capaReticula.id = 'r'; var r = document.getElementById('r');if(!r){document.body.appendChild(capaReticula);};document.body.onclick = function(){var r = document.getElementById('r'); if(!r) return; document.body.removeChild(r);}; void(0);){kind=link}