Solución al problema con las transparencias de los PNG-24 en el Microsoft Internet explorer 5 y 6

diciembre 23, 2008

Ya hemos hablado en este blog de la posibilidad de incluir transparencias en nuestras Webs gracias al formato PNG-24. En este Post, mostramos el modo de hacerlo y en este otro mostramos una solución al problema que se nos presenta cuando visualizamos los PNG con transparencia en el maldito Internet Explorer.

En este último Post, Bob Osola nos ofrece una buena solución para mostrar los PNG con transparencia en el Internet Explorer 5 y 6 pero tenía ciertas limitaciones como el mostrar correctamente los PNG utilizados como fondo de capa.

Aquí os dejo una solución que se presenta como definitiva y que, como poco, a mi me ha funcionado de maravilla. Este  Script nos permitirá mostrar todos los PNG con transparencia  que hayamos utilizado en el diseño de nuestra página; desde los utilizados como imagen normal <img hasta los definidos como background de determinado elemento en nuestra hoja de estilos CSS.

Se trata de iepngfix del desarrollador Freelance Angus Turnbull. Este script hace uso de los CSS Behaviors; una extensión CSS nativa de Microsoft.

Para utilizar este script es necesario disponer de dos elementos. Por un lado el archivo .htc iepngfix.htc y por otro de un gif vacio, es decir sin imagen. Ambos archivos no son suministrados en el paquete que nos ofrece el autor desde su página. Podéis descargarlos aquí.

Una vez os hayais descargado los archivos debéis ubicar el gif vacío dentro del directorio de vuestro proyecto que consideréis oportuno y definir en iepngfix.htc la ruta hacia ese archivo. Esto será lo único que tendréis que editar en el archivo .htc.

Ahora vamos a ver como usarlo. Como veréis es muy sencillo:

En la hoja de estilos general indicamos como lo hacemos de manera habitual que tal o cual elemento (en nuestro caso un div de id=”ConFondo” y las cabeceras h1) van a llevar como fondo, en este caso, unas imégenes en formato PNG, llamadas fondo.png para el div y fondoH1.png para las cabeceras h1.

div#ConFondo {

background:url(archivos/images/fondo.png) top left no-repeat;

}

h1 {

background:url(archivos/images/fondoH1.png) top left no-repeat;

}

En la hoja de estilos definida para internet Explorer incluiremos lo siguiente:

div#ConFondo, h1 {

behavior: url(archivos/js/iepngfix.htc);

}

Estaros atentos a que la ruta del archivo iepngfix.htc debe ser igual a la apuntada desde el archivo html !!! . Esto quiere decir que si, como en nuestro caso, los estilos son definidos en una hoja de estilos externa, la ruta que apunta al archivo iepngfix.htc no es la que nos llevaría desde la ubicación de nuestro CSS en archivos/css/iepngfix.htc sino desde la posición del archivo html.

http://www.twinhelix.com/css/iepngfix/iepngfix.zip

Anuncios

Manual de Usabilidad Web

junio 10, 2008

No cabe duda de que la accesabilidad es un tema indispensable para todo desarrollador web. Y dentro de todo lo que abarca el conseguir diseñar un sitio web accesible, la usabilidad del mismo juega un papel fundamental.

Un modo de introducirse en este tema es a través de este manual repartido en la ponencia Como crear sitios web de exito,usabilidad web en la practica, celebrada en el Parque Tecnológico de Alava el dia 26 de mayo de 2008, y organizada por Araba Enpresa Digitala.

Los autores; Miguel Sanchez y Javier Eguiluz.

http://www.enpresadigitala.net/euskera/biblioteca/mostrar_fichero.jsp?id=1127


Sprites (Espectros) de CSS, botones con efecto rollover sin Javascript

enero 16, 2008

Interesante artículo escrito por Daved Shea en el que se explica una interesante, accesible y limpia forma de realizar botones con efecto rollover (o lo que nuestra imaginación nos permita) utilizando la antigua técnica de la retícula de sprites sin la necesidad de utilizar JavaScript.

La idea básica es la de agrupar los distintos gráficos utilizados en cualquier animación básica de nuestro sitio web en un único archivo de imágen. Los distintos gráficos o Sprites serían las distintas celdillas que conformarían ese archivo de imagen al que se le llamará retícula maestra.

El modo de mostrar las distintas imágenes consistiría en ir moviendo horizontal y verticalmente esta retícula aplicada como background de un elemento div de determinadas dimensiones.

Merece la pena echarle un vistazo.

www.alistapart.com/articles/sprites

En Castellano: www.vectoralia.com/manual/html/sprites.html


Listamatic, Una lista múltiples opciones

noviembre 30, 2007

Interesante sitio en el que nos muestran el poder del CSS ofreciéndonos distintos tipos de menus creados con listas escritas en XHtml totalmente válido y accesible.

Merece la pena echarle un vistazo.

css.maxdesign.com.au/listamatic