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

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

Acid Tests

30.5.08. Por ooscarr (ooscarr)

Tanto en Linux como en Mac OS X es posible correr versiones antiguas de Internet Explorer simultáneamente con la ayuda de ies4linux e ies4mac (ya no es simultáneo), respectivamente, que están basados en el sistema para correr aplicaciones de Windows wine. Para otros programas, es posible la virtualización de todo el sistema o procesador (más adelante ahondaré en eso, a medida que las tecnologías se desarrollen).

Así están ls navegadores hoy en día. Más razones para NO USAR INTERNET EXPLORER. O por último si actualizaras a Internet Explorer 7, este blog se vería un poco más decente.

Acid1

Acid1
Ya todos pasan el acid1 (menos los viejos Internet Explorers).

Haz el Acid1 test

Acid2

Acid2
Ya todos muestran la carita feliz del Acid2 en Mac OS X
Y cuando salgan Internet Explorer 8 y Mozilla Firefox 3, ellos también.
¿Pero y el iPhone noooo? ¿Y Opera Mobile sí?

Haz el Acid2 test

Acid3

Acid3
Webkit y una versión interna de Opera superan el acid3.
Esperemos que Mozilla Firefox 3 también lo supere.
Digamos que por ahora Webkit lleva Acid3 a Linux.

Haz el Acid3 test

Etiquetas: , , , ,

Publicidad