Cómo posicionar tus sprites

Como ya he comentado antes, en A list apart y en WebSite Optimization explican mejor que yo cómo posicionar tus sprites para conseguir el efecto deseado, por lo que no seré yo quien os repita de nuevo la información (algo que he odiado siempre es la asombrosa capacidad que tienen algunos para copiar los artículos originales de otros sin aparente sentimiento de culpa).

Por lo que en esta entrada pasaré a valorar todos esos detalles inesperados que se os podían haber pasado por alto en un primer momento a la hora de implantar vuestra maravillosa técnica de sprites.

El primer detalle es quizá uno de los más importantes: debéis tener en cuenta el formato de vuestras imágenes y los navegadores con los que se verá vuestra página. Si vuestras imágenes son PNG's nativas, probablemente tendréis añadido este filtro desarrollado por Microsoft para solucionar la cagada incompatibilidad de IE6 con imágenes PNG. No es que IE6 sea directamente incompatible con los PNG, sino que no soporta bien el canal alfa de estas imágenes. Para quienes no sepáis qué es el canal alfa, os diré que es una característica de las imágenes PNG que hace que puedan ser translúcidas (es decir, con una transparencia parcial) en vez de ser o totalmente transparentes o totalmente opacas como los GIF.

Pues bien, lo que le ocurre a IE6 es que no soporta bien las imágenes translúcidas, pero no se queda ahí el asunto, porque si utilizáis el filtro de Microsoft que ya mencioné antes para solucionar el problema, no podréis poner imágenes PNG en background. El filtro alpha image loader es completamente incompatible con el reposicionamiento de imágenes en background. Por lo que no tendréis más remedio que quitarlo y probar soluciones alternativas, de las cuales algunas están expuestas aquí: Blog de Christopher Schmitt

Mi recomendación personal es que no intentéis ensuciar la estructura de la página añadiendo divs exóticos, especialmente si trabajáis para un portal complejo con contenido HTML autogenerado y toneladas de divs por defecto. El título de este blog es "diseño con estándares para la vida real" y mi elección personal es intentar hacer una web lo más semántica posible dentro de las restricciones lógicas que las prisas y la vida real imponen a nuestro trabajo. En lugar de intentar complejas operaciones de reposicionamiento, os aconsejo trasladar los PNG a GIF utilizando las ideas de Andrew en el comentario número 20 del artículo de Schmitt, colocando estos GIF de background en una hoja de estilos alternativa sólo para IE6, o bien bajo un comentario condicional.

Otro detalle (y que podría parecer una tontería):

Cuando copiéis en vuestra CSS sentencias del tipo:

clase-sprites {
background: url(../img/menu_sprites.png)left no-repeat;
}

Aseguraos de que no habéis hecho lo mismo que yo, porque vuestra imagen no se verá en IE6 ni en IE7. Os preguntaréis qué he hecho, ¿verdad? Me ahorré un espacio después del paréntesis. Eso bastó, en contra de las especificaciones del W3C para que el contenido de mi fantástico sprite no se viera en ninguna versión de IE. Dejad siempre vuestras CSS bien aireadas, como aquí:

clase-sprites {
background: url(../img/menu_sprites.png) left no-repeat;
}

Otro detalle más que hace que los png sean inútiles en IE es que concretamente en la versión de IE7 no son clicables, por lo que os recomiendo una vez más que paséis los PNG a GIF aunque sea una solución estéticamente más desagradable (y recemos para que cada vez menos gente utilice IE6, al menos así nos quitaríamos el mayor de nuestros males).

CSSprites vs. SpriteGen

Primero comenzaré con una breve reseña de las aplicaciones on-line que generan tiras de imágenes en Sprites fácilmente. Si en este punto alguien se encuentra perdido, puede leer el artículo de A list apart que mencioné en el post anterior o bien leer este otro artículo con un enfoque más práctico en WebSite Optimization. Esperaba encontrar infinidad de aplicaciones javascript para calcular las coordenadas internas necesarias para situar las imágenes, pero sólo encontré dos aplicaciones citadas una y otra vez en infinidad de páginas web:

Spritegen
CSS Sprites Alfa

Así que como veis, amigos, más que encontrar información diversa muchas veces encontramos meros loros repetidores en la red de redes.

Para evitar ser un loro yo también, a continuación haré una comparativa entre ambas aplicaciones, puesto que después de probar las dos tuve que verme forzada a quedarme sólo con una.

La primera aplicación de la que hablaré será Spritegen, que como podéis ver en la captura de pantalla que os muestro a continuación parece muy útil por la cantidad de opciones de configuración que tiene:



En comparación con ella tras un examen preliminar, CSS Sprites Alfa saldría claramente perdiendo:



Pues bien amigos, esto no es así. SpriteGen tiene una serie de bugs importantes que a su creador le convendría mejorar. Por ejemplo, si a la hora de meter una serie de imágenes png le pedimos que nos las cambie a gif, les añadirá alrededor un borde sólido negro de 1px que aumentará el tamaño de vuestra imagen. Y si usáis como yo la técnica de sprites para optimizar el peso de los pequeños iconos de menú de vuestro sitio, 1px extra es importante y os hará sentiros realmente desorientados a la hora de intentar ubicar de nuevo vuestros iconos en la página, teniendo que recalcular de nuevo las coordenadas que el programa os dio. Por no mencionar el borde en sí mismo, que podría romper completamente la coherencia estética de vuestra página.

Por lo demás, si no cambiáis el formato nativo de PNG a GIF, no tendréis problemas mayores y podréis aprovechar las fantásticas opciones de configuración que ofrece este programa. Os recomiendo que juguéis con ellas. Podéis por ejemplo utilizar los iconos de www.freeiconsweb.com para hacer estas pruebas. Yo tomé unos GIF's como ejemplo y se veían bastante bien al pasarlos a PNG.

Ambos programan disponen las imágenes por orden alfabético en la tira, por lo que sería conveniente que ya tuvierais previamente ordenadas las imágenes por orden alfabético en vuestra hoja de estilo para evitar liaros. Spritegen nos dispone la información sin ayudas gráficas, dándonos el nombre del archivo original y a continuación sus coordenadas. En cambio, Sprites Alfa prescinde del nombre del archivo original, pero nos lo representa gráficamente. Eso ya va en gustos. Personalmente creo que si vas a manejar sesenta o setenta iconos es mejor tener la referencia del nombre, pero la solución que nos presenta Sprites Alfa puede ser más amigable e intuitiva cuando tenemos menos imágenes. Puedes ver la interfaz de ambos aquí:




Como podéis ver, cada aplicación tiene sus ventajas y sus inconvenientes. Cada uno puede utilizarlas como más le convenga. Yo he intentado exponer aquí las características de cada una. En la entrega siguiente hablaré de algunos aspectos que hay que tener en cuenta a la hora de posicionar un sprite en CSS.

Saludos

Lo que nunca te contaron sobre Sprites CSS

Una de las cosas que me gustan de la empresa donde trabajo es que se considera la investigación y la iniciativa propia como algo muy importante. Todos tenemos nuestra página de del.icio.us e intercambiamos nuestros conocimientos, procuramos estar al día. Cuando alguien ve una solución interesante en la web, se lo comenta a los demás y se intenta llevar a cabo.

Eso fue lo que me pasó a mí con la técnica de Sprites CSS. Vi un artículo interesante en A list apart y le hice un comentario inocente a mi jefe, sin pensar que inmediatamente me vería sumergida en un marrón. Y a mi jefe le pareció una excelente idea que se lo aplicara al portal donde en ese momento estábamos trabajando. Noventa y tantos pequeños iconos repartidos en diferentes secciones del portal y en distintas hojas de estilo, en un sitio diseñado con tecnología de portlets que además tenía innumerables hacks. Aquello tenía pinta de convertirse en una auténtica saga en la que mis futuros hijos seguirían intentando encontrar la solución idónea para aplicar la técnica de sprites al portal.

Intentaré ahorraros las escenas de llanto y rechinar de dientes (aunque en algún momento se me escapará alguna) y comenzaremos con los pasos necesarios para implementar esta técnica sin excesivo sofoco. Primero centraré mi atención en las aplicaciones que podéis encontrar en internet para utilizarla; un segundo post se fijará en los aspectos que debéis tener en cuenta a la hora de utilizar un sprites; el tercero y último (al menos de momento, porque este tema trae cola) se centrará en las incompatibilidades entre IE6, IE7 y Firefox, así como en posibles hacks y filtros a utilizar.

P.D.: Podéis solicitar a través de comentarios una traducción de los post al inglés y la publicaré con mucho gusto. En un par de semanas cambiaré aspectos de diseño del blog e introduciré facilidades multi-idioma.

Allá va

Queda formalmente inaugurado el blog "Diseño con estándares para la vida real", con la firme intención de ejercer de salvavidas o recurso de emergencia para todos aquellos que en algún momento han insultado a Bill Gates, a los gurús del software libre que nos complican la vida aún más o a la inocente caricatura de Forges que les acompaña pinchada con una chincheta en la pared de su cubículo.

No pretendo aquí ejercer de fiel repetidora de los gurús de internet. Todos conocemos sus páginas y entramos en ellas con frecuencia, por lo que asumiré que todos mis lectores están al día de técnicas más o menos fantasiosas que en nuestro trabajo diario no nos dejan aplicar (aunque en alguna ocasión, y por su interés, reproduciré algún artículo que otro citando a su autor). Simplemente intento acercarme a todos los diseñadores y desarrolladores web que quieren desarrollar conforme a los estándares pero se encuentran con dificultades que parecen insalvables día a día. Este blog estará más dedicado, en suma, a aquellos diseñadores que trabajan con sitios web complejos en conexión con lenguajes orientados a objetos y necesitan resolver arduos problemas concretos relacionados con maquetación o integración de código. Los temas más frecuentes serán XHTML, CSS, Javascript, Ajax, JSP, Java y tecnología de portlets porque estas son las tecnologías con las que tengo que lidiar a diario, las que me gustan y las que me preocupan.

Soy flashfóbica perdida, por lo que no debéis esperar tutoriales flash sobre cómo hacer bonitas animaciones introductorias para vuestras páginas en esta bitácora.

Y finalmente, como no todo es hacer weberías en la vida, aquí podréis encontrar reseñas de libros, música o películas, así como información cultural en general. El diseño tiene un componente de creatividad que necesita alimentarse con vivencias culturales no siempre pixelables.