Simplifica el diseño de tu web con cinco bibliotecas de JavaScript (I)

Escrito por Iteisaburo el 8 de noviembre de 2009 | 0 comentarios home title

Vamos a dar un repaso a cinco bibliotecas de JavaScript que facilitan tremendamente el desarrollo de páginas web modernas y atractivas.

Las bibliotecas que vamos a ver no son del mismo estilo que otras más conocidas como jQuery, Mootools, YUI o Prototype; son mucho más pequeñas y especializadas, pero son las mejores en su trabajo y nos proporcionan unas funcionalidades únicas que veremos a continuación.

1. Corrige la transparencia de los PNG en Internet Explorer 6 con DD_BelatedPNG

Creado por: Drew Diller
Licencia: MIT
Uso: corrige la transparencia del canal alfa de las imágenes PNG en IE6
Tamaño: 6,86 kb (comprimido)
Compatibilidad: sólo con IE6
Ver demo
Descargar

DD_belatedPNG fue creada con el único propósito de permitir el uso de PNG con transparencias alfa para poder usarlos en IE6 sin tener que recurrir al filtro propietario de Microsoft, AlphaImageLoader. Como saben todos los que han intentado usar PNG en IE6, aunque pueden funcionar a un nivel muy básico, hay otras cosas (como background-image repetidos) que son impensables.

Utilizar el filtro AlphaImageLoader sólo arregla a medias el problema de los PNG en IE6, ya que sólo se puede usar con imágenes de fondo. Para hacer uso de PNG con transparencia alfa en elementos <IMG> se utilizan parches como el HTC, que depende de un PNG transparente y un archivo .HTC que describe su comportamiento. Además, como ya saben los usuarios de YSlow y Firebug, el filtro AlphaImageLoader de Microsoft es lento; una de las directrices de YSlow es evitar ese filtro a toda costa.

DD_belatedPNG utiliza la implementación de VML de Microsoft para reemplazar los PNG con elementos VML, que sí soportan la transparencia alfa. Puede utilizarse en elementos <IMG> y también como background-image de CSS. Cuando se reemplazan los background-image, hay características como background-repeat y :hover que también se pueden utilizar, ya que esta biblioteca resuelve todos los problemas habituales de los PNG en IE6.

Uso

Utilizar DD_BelatedPNG es tremendamente sencillo; como sólo es necesaria para IE6, el script principal se puede incluir en la página usando un comentario condicional:

<!--[if IE 6]><script src="DD_belatedPNG.js"></script>
<![endif]--&gt
;

La biblioteca sólo tiene un método, fix, utilizado para proporcionar sencillos selectores CSS que son manejados por la biblioteca, y cualquier elemento <IMG> cuyo atributo src sea una imagen PNG, o cualquier elemento que use un fondo en PNG mediante CSS con el adecuado nombre de clase, será corregido por DD_belatedPNG. Esta parte del script puede ir también en el comentario condicional, para que las reglas adicionales sólo sean procesadas por IE6:

<script type="text/javascript">
        DD_belatedPNG.fix(".linkButton");
</script>

Los PNGs corregidos se mostrarán ahora en IE6 tal como deberían, se les podrá aplicar background-positon y background-repeat, y también funcionarán con estados :hover, algo imposible con el filtro propietario de Microsoft. La siguiente imagen muestra el antes y el después de una imagen de fondo con transparencia alfa:

DD_belatedPNG en acción