Internet Explorer 6 no acepta PNG’s de 32 bits con transparencia. Es un fastidio para miles de diseñadores web. Además, el filtro de Microsoft AlphaImageLoader y otras soluciones que hacen uso de él son contraproducentes.

El formato mágico

Pero, por casualidad encontré una alternativa para IE6 que podría ser útil en ciertos casos y con la que tendríamos transparencias reales en los navegadores modernos, y transparencia binaria en IE6 (como la del GIF).

Se trata de utilizar un formato especial de PNG, en el que tendríamos una imagen indexada de 8 bits con un valor alfa especifico por cada uno de los colores de la paleta (Más información en la especificación PNG).

Imagen de 32 bits optimizada con PNGOUT (3,36 KB)

Imagen de 8 bits con canal alfa optimizada con PNGOUT (2,42 KB).

Los navegadores modernos muestran correctamente este formato, pero IE6 no aplica bien el alfa y elimina todas la zonas semitransparentes, dejando sólo las zonas opacas. Esta opción puede ser válida para pequeños iconos o similares.

Ejemplo de como quedaría en IE6

Para utilizar esta triquiñuela, sólo tenemos que reducir el número de colores de la imagen y del canal alfa, y después optimizarla con PNGOUT. ¡Ojo! Photoshop no carga bien este tipo de imágenes.

También podemos utilizar Fireworks, de los pocos programas capaces de trabajar con imagenes de 8 bits con alfa.

Para utilizar un PNG de 32 bits con transparencias en Internet Explorer 6 (y 5.5) no había más solución que echar mano del poco agraciado filtro Directx AlphaImageLoader (código propietario Microsoft).

Posible solución: iepngfix.htc

Por suerte Angus Turnbul creó un atajo que nos facilita mucho la vida a los diseñadores web:

1. Descarga este fichero HTC y este GIF en tu directorio CSS
2. Añade este código en tus CSS para utilizar PNG’s con transparencia (¡ojo!, no valida)
   IMG { behavior: url(iepngfix.htc); }
3. ¡Listo!

El fichero HTC (referencia en Microsoft) es un componente HTML con un script que puede ser leído por Internet Explorer y que trata el PNG con transparencias para aplicarles el filtro. Funciona tanto para imágenes dentro de la etiqueta IMG o en los BACKGROUND de CSS

Ejemplos

Por ejemplo, si tenemos definido el siguiente fondo:

DIV#base { background: url(imagen-con-alfa.png); }

Añadiríamos la siguiente línea en nuestro CSS:

IMG, DIV#base { behavior: url(iepngfix.htc); }

Aunque aconsejo utilizarlo sólo en los fondos o imágenes que lo necesiten. Podemos utilizar, por ejemplo, la siguiente clase:

IMG.transparencia { behavior: url(iepngfix.htc); }

Las pegas

• Los fondos en PNG no se pueden repetir, es decir, no se pueden usar como tiles.
• Hay que definir los tamaños de las imagenes con width y height o crear un contenedor tipo DIV con el tamaño apropiado. También es posible editar el fichero HTC y cambiar la propiedad SCALE por CROP para evitar esto.
• No se puede utilizar padding o border
• Más detalles

Véase también

• PNG de 8 bits con canal alfa (la alternativa a IE6)
• Por qué según Yahoo no se debe usar AlphaImageLoader: Image Optimization, Part 5: AlphaImageLoader

Para probar tu página web en una Wii (sin usar una Wii, obviamente) puedes usar el navegador Opera (Opera for desktop) y cambiar el modo de renderizado a 5 en la configuración de navegador (RenderingMode=5). Para acceder a esta opción escribe en el campo de direcciones:

opera:config#UserPrefs|Renderingmode

Algunos detalles…

• Opera admite HTML, XHTML, XML, WML, RSS – Atom, CSS 3, XSLT, SVG, y JavaScript; excepto designMode, contentEditable, y audio.
• Utiliza una pantalla virtual de 800px, aunque la resolución de las televisiones suele ser bastante peor. El zoom es imprescindible en muchos casos.
• Lo ideal son los diseño elásticos (yo prefiero llamarlos flexibles). Nada de utilizar “px“. La página se adapta al dispositivo, y no al contrario.
• El único plug-in que soporta es Flash 7
• A nivel de CSS, admite media="tv" (¡woh!). Si este tipo no está presente, opta por el tipo screen, aunque, como indica la especificación, nunca los mezclará.
• También admite Web Forms 2.0. Están muy bien, aunque el soporte en otros navegadores es nulo,
• Sólo dispone de dos tipografías. Una sans-serif (Wii NTLG PGothic) y otra monoespaciada (Wii NTLG Gothic)

Más información Making Wii-friendly pages

Xiti Monitor, un instituto francés de encuestas web, ha publicado un barómetro sobre el uso de los navegadores web en julio. Internet Explorer sigue perdiendo terreno con respecto a Firefox.

El ascenso de Firefox continúa… cercano al 28% de indice de uso en Europa a principios de julio de 2007, con la misma progresión en todos los 32 países europeos estudiados. Y no pierde terreno en ninguno de ellos.

Y si quieres conocer nuestro punto de vista sobre el tema, sólo tiene que echar un vistazo a las siguientes anotaciones:

• Un infierno llamado Internet Explorer
• Internet Explorer es un cáncer y debe ser frenado

Visto en blogameleon

Dave Child ha reunido en un esquema todas las reglas de CSS, incluidos los selectores de CSS 2.1, en formato PNG o PDF, preparado para ser impreso en un único folio.

Muy práctico como chuleta (Más información sobre CSS)

También hay disponibles esquemas en el mismo formato para HTML, PHP, Javascript o incluso para The World of Warcraft

Vía del.icio.us

Siguiendo la tónica del pequeño manual de usabilidad, aquí dejo la traducción a castellano de un estupendo artículo que leí hace tiempo: “Por qué diseñar con tablas es estúpido” (versión original en inglés). Aunque ya es un poco viejo, y el título puede ofender a algunos, sigue siendo totalmente válido. Sobre todo me quedo con las ventajas:

• hará que tus páginas carguen más rápido
• reducirá tus costos de hosting
• hará que tus rediseños sean más eficientes y económicos
• te ayudará a mantener consistencia visual en todos tus sitios
• te hará obtener mejores resultados con los motores de búsqueda
• hará que tus sitios sean más accesibles para todas las personas interesadas y agentes de usuarios
• y te brindará un margen competitivo (es decir, seguridad laboral) a medida que el mundo se rige cada vas más por Normas Web.

Cuando se diseñó Mundijuegos se siguieron los principios que se comentan en el artículo, como la separación entre contenido y presentación (xhtml+css) o el marcado estructural. Este enfoque en el diseño fue esencial para ahorrar ancho de banda (importante si tienes 10 millones de páginas vistas) o para realizar posteriores rediseños del portal de forma bastante sencilla (como minitorneos.com o tegane.com)

Vía meneame.net