Quictime 7 se apodera de los objetos PNG en Internet Explorer

27.9.09. Por ooscarr (ooscarr)

Internet Explorer 8 incluye soporte para imágenes como objetos, pero cuando instalas Quicktime éste se apodera de algunos de ellos y eso se arregla de la siguiente manera en Windows xp.

Ve a las preferencias de Quicktime.

Otras preferencias de Panel de control de Windows xp con la opción Quicktime.
Si no aparece Quicktime en el panel de control, puedes seleccionar "Ver otras opciones de Panel de Control" en el panel lateral de Windows xp.

En la ficha "Explorador" selecciona "Ajustes MIME...".

Ficha "Explorador" en las preferencias de Quicktime para Windows xp.

Busca la opción "Imagen PNG" y desmárcala.

Explorador de tipos MIME de Quicktime para Windows xp con la opción "Imagen PNG" no marcada.

En Windows Vista y Windows 7 no sé cómo hacer lo mismo. A pesar de que las preferencias aparecen, en Windows xp se necesita tener permisos de Administrador para que todo esto funcione.

Links

Artículos relacionados

Etiquetas: , , ,

Imágenes como objetos en Internet Explorer

7.4.09. Por ooscarr (ooscarr)

En XHTML2, las etiquetas <img> y <applet> fueron reemplazadas por <object>, algo que en Internet Explorer era un tremendo problema. Digo era, porque Internet Explorer 8 se comporta más o menos como el resto de los navegadores modernos, acompañado de una nueva función llamada "modo compatibilidad". En este artículo muestro una solución conocida a la incompatibilidad con las imágenes insertadas como objeto de las versiones anteriores.

¿Por qué <object>?

La historia del objeto

  1. Con Internet Explorer 3.0 Microsoft introdujo una tecnología para insertar elementos ActiveX dentro de una página web utilizando la etiqueta <object>.
  2. Netscape también quiere insertar videos en las páginas web y saca la etiqueta <embed>, con otro nombre para diferenciarse de la tecnología ActiveX específica del sistema operativo de Microsoft.
  3. En 1997 se le agrega el elemento <object> a la especificación del HTML.
  4. Microsoft ajustó su forma de tratar los objetos para que aceptaran el estándar. Pero siguió tratando a todos los objetos como elementos de ActiveX.
  5. Hasta el día de hoy.
  6. La etiqueta <embed> nunca fue estándar, aunque se sigue utilizando por algunos para evitar de manera rápida los problemas de incompatibilidad.
  7. Después sale la especificación de XHTML2 donde se eliminan las etiquetas <img>, <applet> e <iframe> para ser reemplazadas por <object>.
  8. Internet Explorer 8 muestra los objetos de manera más parecida al estándar.

Qué tenía de malo el <img>

Semánticamente, aparte de que i-m-g no es una palabra completa como image u object; a mi manera de pensar, <object> es una palabra mucho más genérica para nombrar esta clase de elementos que no son texto en una página web.

Pienso que si se siguiera utilizando una etiqueta específica para las imágenes, tendría que crearse otra llamada <video> (como lo hicieron en HTML5) y siguiendo esa lógica después vendrían <map>, <game>, <iframe> (también fue eliminado), <application>, <applet>, <vr>, etc. Obligando a cambiar o extender el estándar cada vez que a alguien se le ocurra insertar nuevo tipo de contenido en una página web. Y luego comienzan los dilemas: ¿es applet una application? ¿Y si el iframe contiene un video? ¿El objeto flash es un video, una aplicación, una animación, o un <application><video><animation> </animation></video></application>?

En cambio, una sola etiqueta estandarizada para embeber elementos es mucho más flexible, pudiéndose usar el MIME type para diferenciar de qué clase de objeto se trata.

Sin embargo, y lo supe recién, la etiqueta <img> se va a mantener al final debido a los reclamos y para hacer felices a todos, pero con la condición de que se prefiera la etiqueta de objeto.

Ejemplo de código

Por ejemplo, la etiqueta...

<img
 src="rss.jpg"
 width="152"
 height="160"
 alt="RSS" />

Como objeto se vería como...

<object
 type="image/jpeg"
 data="rss.jpg"
 width="152"
 height="160">
 <p>Icono <acronym xml:lang="en-us" title="Really Simple Syndication">RSS</acronym>.</p>
</object>

Como se pudo apreciar, el texto alternativo de la etiqueta <object> tiene mayor riqueza descriptiva que el texto plano permitido en el atributo alt de la etiqueta <img>.

Es más, si el software agente que se está utilizando para visualizar el documento no tiene soporte para un determinado formato de imagen, o cualquier otra cosa, el elemento <object> en teoría permite disponer de otros objetos para colocar en su lugar.

Ejemplo:

<object
 type="video/x-mng"
 data="logo.mng"
 width="152"
 height="160">

 <object
  type="image/gif"
  data="logo.gif"
  width="152"
  height="160">

  <p>Logo de ElBlog</p>

 </object>
</object>

En teoría, porque Internet Explorer para Windows tiene sus diferencias.

Internet Explorer

Prácticamente todos los navegadores modernos están preparados para insertar imágenes como objetos. Pero las versiones anteriores de IE no.

Problemas de objeto con Internet Explorer 6 y 7

  • Borde visible alrededor del objeto.
  • Espaciado interior (padding) extra dentro de los objetos. y como el tamaño del objeto es el mismo que el de la imagen...
  • Aparecen las barras de desplazamiento innecesariamente.
  • Cuando hay varios objetos como en el ejemplo anterior, en vez de mostrar el primero que entiende, IE6 los carga todos.
  • Si tienes las opciones de seguridad en "alta" (deshabilitando todos los controles ActiveX), no verás ningún elemento <object>, incluso aquellos que no tienen nada que ver con ActiveX (como nuestras imágenes).
  • Es más, si el objeto imagen es de otro dominio, aparecerá una alerta de seguridad en Internet Explorer. ActiveX.
  • Olvídate de las semi-transparencias de los PNG.
  • Al deshabilitar las imágenes, Internet Explorer cargará los objetos igual.
  • Al poner un vínculo alrededor de un objeto, éste no se vuelve clickeable.

Posible solución a los problemas con Internet Explorer

Para el problema de lo objetos alternativos

Para cuando tengas varios objetos como alternativas de formato o para agregar información adicional para los ciegos o robots buscadores, puedes usar los comentarios condicionales para evitar que los procese Internet Explorer 6 y seguir cumpliendo con los estándares:

<object
 type="image/tiff"
 data="beagle.tiff"
 width="152"
 height="160">

 <!--[if gte IE 7]>
 <object
  type="image/jpeg"
  data="beagle.jpg"
  width="152"
  height="160">
 </object>
 <![endif]-->

</object>

Usé gte IE 7 porque en Internet Explorer 7 se soluciona este problema.

Para los problemas estéticos

Para deshacerse del borde alrededor, el extra padding y las barras de desplazamiento; existe un javascript que detecta y aplica los estilos correspondientes de estos objetos.

El código javascript es el siguiente:

function fixObjectImages(){
 var objs=document.getElementsByTagName('OBJECT');
 for(n=0;n<objs.length;n++){
  var obj=objs[n];
  if((obj != null && obj.type != null)
  && ((obj.type=="image/jpeg")
  || (obj.type=="image/gif")
  || (obj.type=="image/png"))){
   fixObject(obj);
  }
 }
}
function fixObject(obj){
 obj.body.style.border='none';
 obj.body.style.margin='0';
 obj.body.style.padding='0';
 obj.body.style.overflow='hidden';
}
window.onload = fixObjectImages;

El truco para arreglar el elemento <object> es darse cuenta que actúa como un <iframe>; o sea, es su propio canvas con un canvas. Dentro del DOM, un <object> tiene su propio body con todas sus propias propiedades. Entonces para remover el borde, simplemente lo hacemos en nuestra función window.onload (demo):

Afortunadamente Internet Explorer 8 arregló esto, logrando así que todos los mayores navegadores modernos estén preparados para insertar imágenes como objetos.

Este y otros cambios produjeron problemas de incompatibilidad con el código de páginas web preparadas para las versiones anteriores de IE. Esto obligó a incluir un botón nuevo llamado "modo de compatibilidad" en la versión 8 del navegador y todo un sistema que consulta en una base de datos de Microsoft para saber cómo abrir cada página web (opcional, por privacidad).


Botón de Vista de compatibilidad en Internet Explorer 8.

Estas novedades provocaron confusión y descontento en los usuarios no ilustrados en el tema de los estándares web. La mayor parte incluso volvió a las versiones anteriores. :-@

Para los objetos PNG en IE6 y los vínculos

Debido a la forma en que los objetos son tratados por Internet Explorer, no se me ocurre otra manera de solucionar el problema de los PNG semi-transparentes en versiones anteriores a Internet Explorer 6 y el no poder cambiar el tamaño de la imagen original sin necesariamente tener que reemplazar todas las etiquetas <object type="image/png"> por <img>.

Para el ActiveX e imágenes deshabilitadas

N.T.S. Si se deshabilita ActiveX, desaparecen todos los objetos.

Cuando se deshabilitan las imágenes en las versiones anteriores a Internet Explorer 8, las imágenes como objeto seguían apareciendo; en cambio en IE8, desaparece todo el objeto sin mostrar el texto alternativo.

Ejemplo final

En el siguiente ejemplo, se muestran dos imágenes PNG con un vínculo cada una. La primera corresponde a la etiqueta <img> de toda la vida y la segunda es un objeto. A ambas se les han aplicado los javascript para que se vean lo mejor posible en las diferentes versiones de IE y comparar su funcionamiento en los distintos navegadores.

Pelota  
La 1ra imagen tiene la etiqueta <img> y la 2da, <object>

Palabras finales

Internet Explorer no estará siguiendo el estándar XHTML hasta que acepte el MIME type application/xhtml+xml, por lo que el uso de <object> en vez de <img> para las imágenes en Internet Explorer no es ninguna obligación ya que todos las versiones de HTML que acepta IE aceptan la etiqueta <img>.

Se hace imperativo que todos se actualicen y actualicen cada computador con Windows que no tenga Internet Explorer 8, porque seguir con versiones antiguas de los navegadores hacen que se retrase el desarrollo de la web.

Actualización

Después de la escritura de este artículo, surgen 2 informaciones:

Referencias

Artículos relacionados

Etiquetas: , , ,

Llegaron los APNG (y no son estándar)

1.3.09. Por ooscarr (ooscarr)

Animación de pelota rebotando

Pobre MNG... Un formato de animaciones basado en el PNG. Cuando salió nadie lo pescó. No estaba terminado cuando se masificó el GIF gracias a Netscape, a pesar de que era un formato propietario. Sin embargo, MNG poseía mayor compresión, transparencias alpha, y perfiles de color.

Ahora Mozilla Firefox 3 (cuyo motor se basó en el de Netscape) incluye soporte para los archivos APNG dejando botado al estándar MNG. La principal razón fue la menor cantidad de código en comparación con el MNG para poder implementarlo. Otra ventaja de APNG es que los archivos, de extensión PNG, se degradan agraciadamente en los navegadores que no soportan el formato. No así con el MNG, que hasta se está viendo la posibilidad de darle su propio MIME type.

Pero el APNG no es un estándar. Al principio se tuvo la inteción de definir una especificación simple para animaciones en PNG al estilo GIF, pero los desarrolladores de la época decidieron expandirlo a algo más complejo que resultó en un nuevo formato: el MNG.

Después llegaron unos turcos, estudiaron el PNG, inventaron la forma de incluir animación después de poner el primer frame como si fuera un PNG normal, mandaron un parche a Mozilla, a todos les gustó, se propuso como estándar, fue rechazado, el formato se quedó en el código y hoy (marzo de 2009) ya se encuentra implementado en los navegadores Mozilla Firefox 3 y Opera 9.5.

Así que ya llegaron. Estándar o no, sirven para pequeñas cosas como ese remolino animado que indica que algo está cargando, por ejemplo, donde no se sabe si el fondo será oscuro, claro, de color... Que todos hemos visto con bordes pixelados en formato GIF o con un cuadrado negro detrás para disimular la necesidad del canal alpha.

Cargando...

¿Llegará el MNG?

Eso todavía se discute.

(el APNG) es un MNG simplificado. Como la mitad de las costosas definiciones están fuera. Hay un soporte avanzado para disponer del método "restaurar-al-previo" del GIF. El "perfil de simplicidad" se fue.

¿Por qué existe este tema? MNG es un estándar inmensamente complicado que nadie quiere implementar. Encuentra a alguien que lo implemente y a alguien que le importe y con eso tendrás media posibilidad. Nada que se diga en este foro va a cambiar eso.

Y por los méritos del APNG, bueno, es extremadamente simple por una razón. La compatibilidad hacia atrás con PNGs no-animados era una meta admirable, pero si se empuja al APNG hacia un nuevo MIME y una nueva extensión de archivo, sería menos útil en la web, lo cual sería ciertamente una vergüenza. Dicho eso, esto es lo mismo que en cualquier debate de estandarización. De cualquier forma, nadie puede usar realmente esta cosa hasta alrededor de 5-10 años desde hoy, cuando existan múltiples implementaciones (si es que van a alguna parte).

Yo, por mi parte, no puedo utilizar MNG porque los navegadores no tienen soporte para el formato, no tengo un software donde pueda verlos (existe una compilación especial de Firefox que los muestra y plug-ins para otros navegadores), no está definido el MIME type aún (se está usando video/x-mng por ahora) y, sinceramente, no creo que llegue el día en que Internet Explorer no haga problemas con esto.

Este navegador no soporta MNG

Ejemplo de APNG

Como prueba de concepto, he convertido el logotipo animado de ElBlog al formato APNG. Por eso no se mueve ni en Safari ni en IE, al igual que la pelota saltarina que acompaña este post.

Referencias

Etiquetas: , ,

Tip: Buscar en un sitio específico con Google

30.8.08. Por ooscarr (ooscarr)

Por medio de un simple javascript se puede crear un buscador personalizado en nuestro navegador favorito.

En Google, y en muchos otros buscadores, se pueden restringir las búsquedas a un dominio determinado usando la palabra reservada site:. Por ejemplo, en el caso de que queramos buscar el término firefox en cualquier página dentro del ooscarr.com que Google tenga en su índice, la consulta sería algo así:

firefox site:ooscarr.com

Marcador mágico

También se puede crear un marcador para buscar automáticamente en cualquier sitio que se esté visitando.

Pop-up preguntando el término a buscar en un dominio específico

Para buscar dentro de cualquier dominio al que pertenece la página que se tenga en frente con un par de clicks sin tener que tipear la parte site:ejemplo.com en Google, podemos

  1. crear cualquier marcador (o favorito, o bookmark) presionando la clásica combinación de teclas Control D. Si tienes mac, command D.

    Firefox: Marcadores > Marcar esta página
    En las nuevas versiones de Firefox, dice Marcar esta página

  2. Luego vamos donde se editan los marcadores o favoritos,

    Firefox: Marcadores > Organizar marcadores...

  3. y editamos la dirección por el siguiente código:

    javascript:Qr=prompt('Buscar%20en%20el%20sitio%20por','');if(Qr)location.href='http://www.google.com/search?q=site:'+encodeURIComponent(window.location.hostname)+'+'+escape(Qr);

    Y le cambiamos el nombre por algo más descriptivo como Buscar en este dominio

    Captura de pantalla de la Biblioteca de marcadores de Firefox 3 para Mac OS X

También se puede agregar rápidamente arrastrando el siguiente link

site:

a la barra de marcadores o favoritos. O agregarlo directamente haciendo click con el botón derecho para ver el menú contextual.

Esto funciona en todos los navegadores que conozco con soporte para javascript y funciona para cualquier dominio automáticamente.

Referencias

Etiquetas: , , , , , ,

PNGs transparentes en Internet Explorer 6 (segunda parte)

22.7.08. Por ooscarr (ooscarr)

No a Internet Explorer

Ya vimos los métodos mediante scripts para mostrar el canal alpha de los archivos PNG en Internet Explorer 6, ahora toca el turno de hacerlo desde el archivo mismo. Internet Explorer, desde la versión 4, soporta imágenes en formato PNG; pero el formato implementado no está completo. Sin embargo, hasta donde lo soporta, todavía podemos hacer algo.

Transparencia binaria

Primero hay que decir que es mentira que Internet Explorer antes de la versión 7 no soportaba transparencia en los PNG. IE sí podía mostrar pixeles 100% transparentes de forma nativa como lo hace con las imágenes GIF (y los PNG se comprimen más que sus equivalentes GIF), ya que para hacer transparente este color no se necesita un canal alpha, sino definir en la paleta cuál color no mostrar.

Imagen con semi-transparencias Imagen PNG sin semi-transparencias
La imagen de la izquierda es semi-transparente por lo que IE6 no lo interpreta bien (el fondo no se ve). En cambio la imagen de la derecha sólo tiene 1 color 100% transparente que no necesita el canal alpha así que IE lo muestra transparente sin necesidad de scripts raros.

¿Cómo lo creamos?

Este formato, al igual que el GIF, consta de un índice de colores de los cuales podemos elegir por lo menos 1 como transparente para que Internet Explorer lo interprete correctamente.

En Windows (con Irfanview)

Irfanview

Para crear estos archivos PNG en Windows, yo utilizo un pequeño (pero poderoso) software gratuito (mi favorito de Windows) llamado Irfanview, que al momento de guardar el archivo como PNG y seleccionar la opción Save Transparent Color, aparece un diálogo que permite elegir el solo y único color que Internet Explorer interpretará como transparente (antiguamente había que ingresar el número en la paleta de este color).

Panel de opciones de "Guardar como..." en el software Irfanview
Al presionar guardar, aparecerá una miniatura de la imagen donde se debe seleccionar el color que será transparente.

En los demás sistemas operativos (con GIMP)

GIMP

En el caso del software GIMP (no estamos en condiciones de comprar Photoshop),

  1. Una vez abierta la imagen, anda a Imagen > Modo > Indexado...
    Menú "Imagen" > "Modo" > "Indexado..." de GIMP
  2. En el siguiente diálogo, cualquier combinación de configuraciones es buena (manteniéndose debajo de los 256 colores; mientras menos, mejor)
    Panel de conversión de color indexado de GIMP
  3. Luego, después de Guardar como..., aparecerá un panel donde es importante marcar Guardar los valores de los colores de los pixeles transparentes y no marcar Guardar el color de fondo.
    Opciones de Guardar como PNG en GIMP

Alternativamente, se puede hacer más fácil con un plug-in llamado Save for web. Y si tienes Fireworks esto es mucho más fácil (seguir leyendo).

Este tipo de archivo resulta igual que un GIF (excepto que no lo abrirán versiones anteriores a Internet Explorer 4), y como el archivo es más pequeño, para este tipo de imágenes ya todos se deberían olvidar de los GIF.

Es cierto que la gracia del formato PNG está en las semi-transparencias, y el método anterior sólo sirve para demostrar que PNG es una mejor alternativa para los GIF estáticos. Pero también se puede lograr semitransparencias compatibles con IE6 si llegamos al límite de lo que IE6 puede ofrecer con respecto al soporte de este formato.

Presentando el PNG 8

Otra manera de incluir imágenes PNG con alpha en versiones anteriores a IE7, es guardarlas en PNG 8, es decir, con una paleta de colores inferior a los 256 colores. De esta forma, el canal alpha se degradará más aceptablemente ignorando todos los colores semi-transparentes.

Imagen de un fantasma semi-transparente con PNG 8
Este fantasma no se ve en IE6 e inferiores porque todos los pixeles tienen algún nivel de transparencia (esta vez sí se ve el fondo).

Y esa es la restricción. Al ignorar completamente cualquier color con canal alpha, este método sólo es recomendable para sombras o partes semi-transparentes que sean presindibles.

Imagen de la cabeza de Wilber con una sombra semi-transparente
La sombra y sólo la sombra semi-transparente no se ve en IE6 e inferiores pero sí se ve en IE7.

¿Cómo lo creamos?

Con Fireworks

MacromediaAdobe Fireworks es la mejor aplicación para crear este tipo de archivos. Lamentablemente no es gratis, pero se puede descargar una versión de prueba para Mac o Windows por 30 días desde la página de Adobe.

Para guardar en PNG 8 hay que ir a Archivo > Vista previa y seleccionar PNG 8. Después de seleccionar Transparencia alfa, Exportar.

PNG 8 en Fireworks 2 para Mac OS en blanco y negro
Nótese que con Fireworks también se puede guardar en el modo indexado mencionado anteriormente.

PNGNQ

Yo busqué cómo hacerlo en GIMP pero no encontré nada. Así que por ahora con comandos no más

Para instalar pngnq sólo tirándolo al path (o al /usr/bin), se necesita tener la librería libpng, que para mac se puede bajar desde Mac OS X Ports.

Cuando lo ejecutamos, tipeamos:

pngnq filename.png

O si queremos elegir el número de colores:

pngnq -n 256 filename.png

Y se creará el archivo resultante en la misma carpeta terminado en -nq8.png.

Da buenos resultados la mayoría de las veces en cuanto a colores, pero nunca se sabe lo que va a salir hasta que se ejecuta y se prueba en el maldito Internet Explorer 6.

Referencias

Artículos relacionados

Etiquetas: , ,

Usando PNG con transparencias en Internet Explorer 6 (primera parte)

20.7.08. Por ooscarr (ooscarr)
No a Internet Explorer

¿Por qué las transparencias de las imágenes PNG no se ven en Internet Explorer 6 y qué puedo hacer para que se vean bien? Todavía hay mucha gente que no ha actualizado a Internet Explorer 7, o deshabilitaron el WindowsUpdate, o todavía no pasan ni a Windows XP. No sé.

Primero pensé: Al diablo con IE6. Pero hay veces en que necesito que las cosas funcionen en Internet Explorer 6, y los otros formatos no me dejan cambiar de posición las imágenes o el color de fondo sin tener que generarlas de nuevo y es muy complicado andar reproduciendo fondos con capas y un montón de marimañas más. Necesito definir una solución para este problema.

Por medio de javascripts

DirectX

Suena descabellado, pero el truco más famoso es el del javascript (el famoso pngfix.js) que arregla por medio de un estilo propietario de Microsoft el problema (AlphaImageLoader). También se puede aplicar sin necesidad de javascripts con el estilo CSS no estándar:

img{
 background-image: url(pildora.png) !important;
 background-image: none;
 filter: none !important;
 filter: progid:DXImageTransform.Microsoft.
AlphaImageLoader(src="pildora.png");
}

Este código lo que hace es dibujar una segunda superficie en el mismo espacio que ocupa el elemento y cargar el PNG ahí. Con DirectX.

Pero este código tiene sus problemas y limitaciones, como no funcionar en versiones anteriores a Internet Explorer 5.5, no poder usar mapas de imágenes (existe otro javascript para mapas de imágenes), no funciona con listas (hay otro javascript para listas), tampoco con fondos (otro javascript), ni rollovers (otro), consume muchos recursos hasta el punto de ¡bloquear algunos formularios y deshabilitar ciertos links!

SuperSleight

El mismo desarrollador del javascript anterior menciona otro javascript más completo SuperSleight que, traduciendo, tiene las siguientes ventajas:

  • Funciona tanto con imágenes inline como de fondo, reemplazando la necesidad de los javascripts sleight y bgsleight
  • Automáticamente aplicará position: relative a los vínculos y campos de formulario si no tienen ya una posición ajustada. (Puede ser deshabilitado.)
  • Puede ser ejecutado en todo el documento, o sólo una parte seleccionada donde tú sabes que están los PNGs. Esto es mejor para el rendimiento.
  • Detecta imágenes de fondo ajustadas como no-repeat y ajusta el scaleMode para recortar en vez de escalar.
  • Puede ser re-aplicado por cualquier otro JavaScript en la página — útil si ha sido cargado nuevo contenido mediante una petición AJAX.

El javascript en cuestión se puede descargar desde 24 ways y viene con un archivo GIF transparente x.gif que utiliza para hacer todo el truco.

Para implementarlo, basta incluir el llamado al javascript dentro del <head></head> dentro de comentarios condicionales para Internet Explorer menores o iguales a la versión 6:

<!--[if lt IE 7]>
<script type="text/javascript"
 src="supersleight-min.js"></script>
<![endif]-->

Yo lo uso, pero no incluye solución para los fondos que se repiten o están posicionados. Así que restringí su funcionamiento para esta columna (<div id="content">) solamente descomentando la penúltima línea del javascript de la siguiente forma:

// limit to part of the page ... pass an ID to limitTo:
supersleight.limitTo('content');

HTC

Después, en wikipedia encontré otra solución. Esta vez sí es compatible con imágenes, con listas ¡y hasta con fondos repetidos y posicionados al mismo tiempo!

En cada elemento que queramos usarlo, el truco es el siguiente, por ejemplo:

img {
 behavior: url(/js/fx-iepngfix.htc);
}
#header {
 padding-bottom:31px;
 background:transparent url(IMAGENAME.png) 0% 100% no-repeat;
 behavior: url(/js/fx-iepngfix.htc);
}
ul li {
 padding-left: 11px;
 background-image: url(IMAGENAME.png);
 background-repeat: no-repeat;
 background-position: 0% 5px;
 behavior: url(/js/fx-iepngfix.htc);
}

Por supuesto, la propiedad CSS no estándar "behavior" sólo existe en Internet Explorer (es una de las Microsoft Windows Script Technologies) y el archivo HTC (con licencia BSD, MIT y LGPL, al igual que el iepngfix.htc del que está basado) se puede descargar desde la página de fx-iepngfix.htc.

Se podría crear un javascript que agregue esta propiedad a todos los elementos que lo necesiten y luego llamamos a dicho javascript desde comentarios condicionales. Puede ser... Hm... ¡Oh! ¡Dicho y hecho! ¡Alguien más ha logrado esta solución definitiva!

Otras librerías

En Google code existe un proyecto que intenta arreglar éste y otros problemas de Internet Explorer a través de un javascript. Se trata de IE7.js e IE8.js. El primero arregla y ajusta las versiones anteriores de Internet Explorer para que se comporte como Internet Explorer 7; y el segundo, mejora también a Internet Explorer 7 para que incluya arreglos que no alcanzaron a integrarse en él. Todavía no soporta los fondos repetidos o posicionados. :-(

Soluciones como estas vienen integradas en la mayoría de las librerías javascript como:

También hay otra solución (aparte de estas) nueva que aparece al final del siguiente video (en inglés):

5 Easy Ways to Tackle IE6’s Transparency Issues
Ir a la página del video para descargar los archivos de los ejemplos

Y eso que no mencionan la solución con flash...

Continuará...

Siento que me he alargado demasiado con este –al principio simple– post. Existen otras técnicas que solucionan todos estos problemas más fácilmente y directo al hueso, que no revelaré hasta la próxima entrada.

Referencias

Artículos relacionados

Etiquetas: , , ,

Deja de usar iframes

28.6.08. Por ooscarr (ooscarr)
Maten a Internet Explorer

Ustedes saben. Los frames y los iframes desaparecieron de la especificación XHTML a partir del XHTML 1.1. Entonces, si necesitamos embebeer contenido de otra página en la nuestra, ¿cómo lo haremos?

Si es sólo por presentación, usa CSS

Si quieres poner un iframe sólo para que se vea la barrita de desplazamiento dentro de la página, deberías usar hojas de estilo como en el bloque de noticias como aparece en la siguiente página:

Para lograr ese efecto sin usar iframes, primero encerramos la parte que queremos en, digamos, un <div>:

<div id="extras">Esto después debería lucir como si
estuviera dentro de un viejo iframe</div>

Y para que se vea con la barrita de desplazamiento, le aplicamos el estilo overflow, por ejemplo:

#extras{
 height : 230px;
 width : 200px;
 overflow : auto;
}

Si es muy necesario cambiar su contenido sin actualizar la página, podrías usar métodos javascripts como el XML HTTP Request.

Un objeto HTML

Si es necesario usar el viejo iframe, existe la solución de usar un objeto de tipo HTML embebido dentro de la página.

Por ejemplo, a continuación debería aparecer un pequeño convertidor de divisas:

No se pudo mostrar el convertidor de divisas en esta página. Visita finance.google.com.
Prueba presionando el botón Convert.

Éste es el código:

<object type="text/html"
data="http://finance.google.com/finance/converter?
from=USD&amp;to=CLP&amp;auto=1"
width="400" height="150"
style="border:1px solid #000;">
 No se pudo mostrar el convertidor de divisas en esta página.
 Visita <a href="http://finance.google.com/finance?q=usdclp"
  rel="external">finance.google.com</a>.
</object>

Internet Explorer

Lo anterior no funciona en Internet Explorer. En vez de mostrar un formulario para convertir divisas, sólo apareció el objeto con una página en blanco.

Internet Explorer preguntando si deseo ejecutar código externo
Internet Explorer cree que todos los object son elementos ActiveX. :-/

Internet Explorer bloquea el contenido embebido de otros dominios (incluso entre subdominios distintos), excepto si el HTML se está ejecutando bajo localhost. Según ellos, por razones de seguridad, y puede ser que estén en lo correcto en tratar a este objeto como un elemento independiente... Hmm... Los desarrolladores también dijeron que puede ser que eliminen esta restricción en futuras versiones beta de Internet Explorer 8. Esperemos.

Resultado de Acid2 mirror en Internet Explorer 8
Esta es la razón por la que IE8 pasa el Acid2 test desde www.webstandards.org y no desde acidtests.org, ni desde webstandards.org (sin las www).

Así que el método de objetos sólo funcionará para páginas del mismo dominio bajo Internet Explorer.

Internet Explorer además muestra unas extrañas barras de desplazamiento y un borde cuando incrustamos objetos HTML. Para deshacernos de éstos, hay que definir los siguientes estilos dentro de las páginas a embeber:

html {
 overflow: auto;
 border: none;
}

No se pudo mostrar el hola, mundo.
Se debería ver en Internet Explorer.

Internet Explorer, adicionalmente, no reconoce que un link dentro de la página incluida tiene a la página que la contiene como su _parent. Prueba haciendo click en el botón XHTML 1.0 que está dentro del objeto anterior y compara dónde se abre la página. Así que sumemos motivos para odiar a IE.

Pruebas en otros navegadores

Una página francesa hizo la prueba en los navegadores más populares de su época la manera en que cargan este y otros tipos de objetos, y estos fueron sus resultados:

User AgentResultado
Fuente: http://joliclic.free.fr
Firefox 1.5success
Firefox 1.0.7success
Opera 9success
Konqueror 3.5.2success
Safari 2.0.4success
IE 7RC1success
IE 6success
IE 5.5success
IE 5.0.1success
IE 4.0.1success
IE Mac 5.2.3success
Lynx 2.8.5degrade correctly

Yo le agregaría

User AgentResultado
Firefox 2.0.0.14success
Firefox 3success
IE8 beta 1success
Opera 9.5success
Safari 3.1.1success
iPhone 1Gsuccess

Al usar este método de objeto, también desaparece el soporte de abrir un link directamente dentro del objeto desde afuera como se podía hacer antiguamente con los iframes a través del desechado atributo target.

XFrames?

El tercer método no lo sabemos. Así como el W3C desechó los formularios con <form> en favor de los Xforms, a partir del XHTML 1.1 los frames ya no son soportados en favor de los Xframes.

Xframes es una redefinición de los framesets, que permite definir el contenido de los frames desde la URI para así no echar a perder el botón de retroceso o las direcciones guardadas en marcadores, además de facilitar el trabajo de los buscadores. Pero nada se dejó como alternativa al pobre iframe, por ahora.

En resumen

Evita usar iframes. Aparte de que son inseguros, pasados de moda y próximamente obsoletos; lo más recomendable es programar la forma de reusar código en un lenguaje de programación interpretado en el servidor.

Pero si hay que usar iframes,

  1. Si el contenido es del mismo dominio y no se cambiará desde la página contenedora, el objeto HTML debería ser la solución.
  2. Si se desea cambiar el contenido de las páginas incluidas, las llamadas javascript HTTP Request (em, como AJAX) podrían ser una alternativa.
  3. Si se desea incluir contenido externo sin olvidar a Internet Explorer, no quedará otra que seguir usando iframes (con algún DOCTYPE antiguo o transicional). O utilizar los comentarios especiales <!--[if IE]> e <!--[if !IE]> <--> como lo he hecho en mi recién inaugurado formulario de comentarios.

Referencias

Artículos relacionados

Etiquetas: , ,

Publicidad