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: , , ,

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: , , , , , ,

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: , , ,

Publicidad