IE7 y los PNG semi-transparentes

iuttu — Fri, 02 Jan 2009 21:36:20 +0000

Las ganas que teníamos todos de que llegase el soporte del formato de imagen PNG a Internet Explorer 7, y cuando llega, llega incompleto (viva Microsoft). El descubrimiento llega después de utilizar exhaustivamente mootools, haciendo aparecer de la nada capas con una imagen PNG, mientras se realiza el efecto se ve una sombra negra (depende del PNG) en la zona transparente de la imagen, hasta que se completa la animación con la opacidad máxima (100%).

Para no complicar el ejemplo y mostrar el problema de una forma más sencilla, vamos a usar un par de imágenes (gracias Arturito por tu colaboración) y el siguiente html:


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-ES" lang="es-ES">
<head>
<title>iuttu Test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="js/mootools.js"></script>
<style>
#test {
background: url(IMGP1355.JPG) no-repeat; width: 300px; height: 225px;
position: relative;
}
#test img {
position: absolute; top: 60px; left: 50px;
}
</style>
 
<script type="text/javascript">
function canviarOpacidad(_acual) {
$("foto").setStyle('opacity', _acual);
}
</script>
</head>
<body>
<div id="test">
<img id="foto" src="png.png" />
</div>
 
</code>
 
<code><a href="javascript:canviarOpacidad(0);">opacidad = 0</a>
<a href="javascript:canviarOpacidad(1);">opacidad = 1</a>
<a href="javascript:canviarOpacidad(.5);">opacidad = .5</a>
</body>
</html>

Podeis ver el ejemplo aquí:

Bien, si pulsamos los dos primeros botones veremos que todo funciona de forma lógica (excepto en IE6, que no renderiza bien los PNGs de serie). Si pulsamos en opacidad cero la capa desaparece, y en opacidad uno la capa aparece, esto parece funcionar en IE7 que oculta y muestra la capa correctamente, pero, si pulsamos en opacidad .5, en IE7 parece que la capa se ve más oscura:

En fin, ahora esperar a que alguien descubra una forma de evitar esto (parece que funciona si la capa que contiene el png tiene como fondo un color plano) o a que salga el IE8 y se pongan las pilas

jEdit, editor casi perfecto

iuttu — Sun, 21 Sep 2008 22:28:38 +0000

Desde que me toca trabajar en casa he estado buscando una IDE/editor que se adaptara a mis necesidades. Desde Bluefish, Screem, NVU,… me quedé temporalmente con Quanta Plus (el único que aún tengo instalado). La necesidad de trabajar con PHP, xHTML y CSS me “obligó” a saltar a un Eclipse + PDT + Aptana que funcionaba bastante bien, pero era demasiado pesado. Un compañero de trabajo me puso los dientes largos con lo ligero que es Textmate… volví a buscar y pasé por Emacs, SciTE,… hasta quedarme con gEdit (editor por defecto de Gnome, manda guasa) y algunos plugins interesantes que lo potenciaban.

Pero nada, uno tiene el culete inquieto y seguí buscando, hasta encontrar jEdit, un editor escrito en Java (sí, a mi también empezó a picarme todo). ¡Es estupendo! Ligero como él solo, disponible en las tres plataformas principales y con una capacidad de adaptación alucinante. Como soy de los que gustan de compartir, aquí os dejo este post =P

Instalar jEdit es simple:
sudo apt-get install jedit
Como siempre, desde la web se puede descargar en distintos formatos para diferentes sistemas operativos (incluido el formato de paquete Debian con una versión superior a la de los repositorios)

Lanzamos el editor y empezamos a tocar. Lo primero, bajar unos cuantos plugins. Recomiendo:

Buffer Tabs: Añade una pestaña con cada fichero (buffer) abierto. Por defecto los ficheros abiertos se seleccionan con un desplegable un tanto engorroso.
SideKick: Una ventana dockable (acoplable?) que permite acoplar otros plugins y mostrar estructuras de árbol (muy útil para mostrar listas de tareas, errores, funciones, etc…)
CTagsSideKick: Árbol estructurado basado en ctags
ErrorList: Listado de errores de nuestro código. En PHP te muestra todos los errores y con un click te manda a la línea con el error, además de marcarte el error en el mismo código al estilo de Eclipse.
FTP: Permite acceder remotamente a ficheros mediante protocolo FTP
LookAndFeel: Cambia fácilmente el “tema” de colores del editor (yo utilizo el Dessert)
MacroManager: Gestiona la descarga de macros (hay muchísimas)
PHPParserPlugin: Parsea el código PHP en busca de errores
ProjectViewer: Facilita la agrupación de ficheros en proyectos (y se integra con el plugin de SVN)
SuperAbbrevs: Permite definir abreviaturas que con una pulsación de tecla generarán un código definido. Por ejemplo, al escribir “for+tab” puede aparecer “for($i=0;$i<;$i++){}”. Totalmente configurable con variables marcando el salto del cursor. Genial.
SVNPlugin: Gestión de un repositorio SVN con las acciones típicas. Lástima que muestre el estado de los ficheros, lástima.
TaskList: Genera listas de lo que definas (todo, done, etc…) en un ventana acoplable
TextAutocomplete: Autocompleta el texto con la combinación de teclas que definas. Busca en la librería del lenguaje que utilices y en el código que encuentre por encima (genial para evitar errores al escribir nombres de variables)
WhiteSpace: Permite gestionar los espacios y bloques de texto, eliminando los espacios sobrantes o marcando los bloques entre llaves con líneas verticales por ejemplo,…

Y esto es sólo una muestra. Hay muchos plugins y macros para poder adaptarlo a nuestras necesidades.

Por supuesto, tiene contras:

No he conseguido activar los autocierre de bloques (al escribir un ‘(‘ te escriba un ‘)’, por ejemplo). Hay una macro que lo hace, pero parece que no funciona bien.
El plugin SVN funciona bien, pero no marca qué ficheros están bloqueados (sólo los abiertos)
El alt+flechas que indenta estupendamente en gEdit no funciona tan fino en jEdit

Pero seguro que se pueden solucionar. Es mucho el potencial por descubrir (no he mirado nada por ejemplo del tratamiento de cadenas o como mostrar la ayuda contextual por idioma) y parece que la comunidad es bastante activa… ¡¡y no olvidemos que se trata de un editor de código abierto, multiplataforma y gratuito!!

Actualización 22/09/2009: Solucionado el problema con el cierre automático de bloques (con el plugin FirstMate)

iuttu » maquetación

IE7 y los PNG semi-transparentes

jEdit, editor casi perfecto