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

Sustituir capas por tablas para una maquetación accesible

julio 7, 2008

Aún siendo una de las deficiencias mas comunes en el diseño web en lo que a la accesibilidad se refiere, existen todavía profesionales empeñados en seguir maquetando sus páginas mediante tablas.

En general, no se permite su uso para maquetar a menos que cuando se alinea una tabla, los contenidos de las celdas se convierten en series de párrafos (es decir, de arriba hacia abajo) uno tras otro. Las celdas deben tener sentido cuando se leen en orden horizontal y deben incluir elementos estructurales (que creen párrafos, encabezamientos, listas, etc.) de modo que la página tenga sentido al ser alineada (p.e cuando el usuario desabilite el uso de tablas en su navegador). ver mas aquí.

En realidad, transformar una maquetación realizada con tablas a capas no es tan complicado. Básicamente se trata de  jugar con los estilos CSS “float” y “clear”, y una vez entendido nos puede resultar incluso más cómodo e intuitivo que hacerlo mediante tablas.

Float: Sirve para alinear un elemento, haciendo que los elementos que le rodean se alineen con respecto a él. Sus posibles valores son “left” (para alinear el elemento a la izquierda) y “right” (para alinearlo a la derecha).Un elemento con “float” debe tener definida su anchura.

Clear: Se utiliza conjuntamente con float. Utilizamos este estilo cuándo queremos que elementos que tienen cerca un elemento flotante (mediante “float”) dejen de alinearse junto a él. Sus posibles valores son left (el elemento no permite flotantes a su izquierda ), right (el elemento no permite flotantes a su derecha ) o both (el elemento no permite flotantes a ningún lado)

Vamos a comenzar con un ejemplo sencillo. Dos columnas.

<table>

<tr>

<td style=”width:40%”>Columna Izquierda</td>

<td style=”width:60%”>Columna Derecha</td>

</tr>

</table>

La transformación es muy sencilla y se va a repetir básicamente en todos los casos:

  • Las etiquetas <table> y </table> las sustituremos por <div> y </div>.
  • La etiqueta <tr> será eliminada
  • Las etiquetas <td> y </td> serán sustituidas por un <div> flotante alineado a la izquierda: <div style=”float:left; width:xxx;”> y </div>
  • La etiqueta </tr> será sustituida por un <div> que no permitirá flotantes a ningún lado: <div style=”clear:both; padding:0px; margin:0px;”></div>

Este sería el ejemplo completo:

<div>

<div style=”float:left; width:40%;”>Columna Izquierda</div>

<div style=”float:left; width:60%;”>Columna Derecha</div>

<div style=”clear:both; padding:0px; margin:0px;”></div>

</div>

En este otro ejemplo mostramos una página con cabecera, tres columnas y pie de página.

<table>

<!– Cabecera de Página –>

<tr>

<td colspan=”3″></td>

</tr>

<!– Cuerpo a 3 columnas –>

<tr>

<td>Izquierda</td>

<td>Centro</td>

<td>Derecha</td>

</tr>

<!– Pie de Página –>

<tr>

<td colspan=”3″></td>

</tr>

</table>

La transformación a capas …

<div>

<!– Cabecera de Página –>

<div>Cabecera</div>

<div style=”clear:both; padding:0px; margin:0px;”></div>

<!– Cuerpo a 3 columnas –>

<div style=”float:left; width:33%;”>Izquierda</div>

<div style=”float:left; width:33%;”>Centro</div>

<div style=”float:left; width:33%;”>Derecha</div>

<div style=”clear:both; padding:0px; margin:0px;”></div>

<!– Pie de Página –>

<div>Pie de Página</div>

<div style=”clear:both; padding:0px; margin:0px;”></div>

</div>

En este caso, nos ahorramos incluso la necesidad de añadir el atributo colspan de la celda que conforma la cabecera y el pie de página.

Los estilos han sido definidos en línea para que quede más claro. En vuestra mano está definirlos en un CSS externo mucho mas elegante.


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


Utilización de object por iframe para conseguir un xhtml 1.1 válido

abril 1, 2008

Todos desarrollador preocupado de que sus páginas estén escritas en un xhtml limpio y validado, sabrá que el elemento iframe no está soportado en la versión 1.1. de xhtml y que, por lo tanto, su utilización ocasionará un error en la validación del código.

La solución está en la utilización del elemento object para realizar las funciones del, ya parece que anticuado, elemento iframe.

Recordemos que el elemento iframe era utilizado de la siguiente forma:
<iframe id=”IFrame1″ frameborder=”0″ scrolling=”no” width=”500″ height=”600″ src=”pagina.htm”></iframe>

Pues bien, esta será la forma de utilizar el elemento object en sustitución del elemento iframe:
<object id=”IFrame1″ type=”text/html” data=”pagina.htm” style=”width:500; height:600px;”><p
>Contenido alternativo, si la página no es encontrada!!!</p></object>

Object también puede ser utilizado para sustituir al elemento img:
<object data=”image.jpg” type=”image/jpg”>
<p>Contenido alternativo, si la página no es encontrada!!!</p></object>

La utilización de Object en sustitución de img nos aporta la posibilidad de incorporar un contenido textual alternativo a la imagen representada mas completo que los atributos alt o longdesc de la etiqueta img.