Increase

Imagen de fondo en las filas de una tabla

2006-03-21T00:53:00.000-04:00

Colocar una imagen de fondo en la fila de una tabla es una tarea engorrosa porque todos (Firefox 1.5, Internet Explorer 6 y Opera 8.2) los navegadores se comportan de diferente forma.
A continuación se expondrá el problema y una solución.

Problemática

Para analizar el comportamiento de los tres navegadores se usará un simple archivo HTML con una tabla compuesta por una cabecera (thead) y un cuerpo (tbody). En la fila de la cabecera se pone una imagen de fondo, según la especificación CSS2 (REC-CSS2-19980512:http://www.w3.org/TR/REC-CSS2/cover.html), usando la propiedad 'background-image', como se muestra en el siguiente código:


<html>
 <body>
  <h1>Imagen de fondo en filas de tablas</h1>
   <table width="150px" cellpadding="0" cellspacing="0" border="0">
    <thead>
      <tr style="background-image: url(background.gif);">
        <th>Firefox</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Mozilla fundation</td>
        <td>Microsoft Corporation</td>
        <td>Opera Software</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Comportamiento esperado

La especificación CSS2 dice claramente que las propiedades de fondo no deben ser heredadas:

Background properties are not inherited, but the parent box's background will shine through by default because of the initial 'transparent' value on 'background-color'.

Al especificar una imagen de fondo en la fila se espera que esta se vea en su totalidad a través de las celdas, siempre y cuando estas no especifiquen ningun color de fondo.
El resultado esperado es el siguiente:

Comportamiento real

Estos pantallazos muestran el comportamiento de cada nevegador.

Firefox es el único que entrega el resultado esperado, mostrando la imagen en todo el fondo de la fila. Internet Explorer y Opera muestran un comportamiento similiar, en que cada celda hereda la imagen de fondo de la fila, por lo que se obtiene ese efecto de repetición de la imagen en cada celda en vez de una sola imagen de fondo en la fila.
Además del caso de estudio se realizaron más pruebas con distintas combinaciones de estilos y ubicaciones de estos.

Ejemplo:

[...]
<thead>
<tr style="bakcground-image: url(background.gif);">
  <th>Firefox</th>
<!-- aqui se agrega la propiedad 'background-position' a una celda -->
  <th style="background-position: 50% 0%;">Internet Explorer</th>
  <th>Opera</th>
</tr>
</thead>
[...]

Firefox no se muestra fectado por la aplicación de 'background-position' en una celda, lo que confirma que efectivamente las celdas no heredan el fondo de la fila.

En Internet Explorer cada celda hereda el atributo 'background-image', esto se confirmó al aplicar un 'background-position' a la celda, que resultó en un desplazamiento de la imagen en la celda.

Opera por su parte se comporta de otra forma, si bien parece que las celdas heredan la imagen de fondo, esto es solo un efecto visual e internamente las celdas no tienen imagen de fondo. Esto se verificó aplicando 'background-image' a las celda sin obtener algún efecto.

Por lo tanto Internet Explorer 6 y Opera 8.2 no se están comportando de acuerdo a la especificación CSS2.

Solución (workaround)

La solución debe ser simple, no intrusiva, sin necesidad de despedazar la imagen y no debe tener efectos secundarios en Firefox. Dependiendo de la compatibilidad entre navegadores que se quiera, existen dos posibles soluciones:

Compatibilidad con Firefox e Internet Explorer.

Dado que en Internet Explorer las celdas heredan el atributo 'background-image' de la fila, para lograr una imagen continuada en el fondo, basta con especificar adecuadamente el atributo 'background-image' en cada celda de la fila.
'background-image' acepta distintos formatos, aquí solo se usarán dos de ellos: <porcentaje> <porcentaje> y <distancia> <distancia>; el uso de uno u otro formato depende principalmente de la imagen de fondo.
Para una imagen sin trama o formas, el formato porcentual es más que suficiente, pero para una imagen con tramas o textos que deben aparecer en ubicaciones especificas de la fila es necesario el uso del formato <distancia> <distancia> para obtener un posicionamiento preciso.

Formato <porcentual>

[...]
<thead>
<tr style="bakcground-image: url(background.gif);">
  <th style="background-position: 0% 0%;">Firefox</th>
  <th style="background-position: 50% 0%;">Internet Explorer</th>
  <th style="background-position: 100% 0%;">Opera</th>
  </tr>
</thead>
[...]

Formato <distancia>

[...]
<thead>
<tr style="bakcground-image: url(background.gif);">
  <th style="background-position: 0px px;">Firefox</th>
  <th style="background-position: -50px 0px;">Internet Explorer</th>
  <th style="background-position: -100px 0px;">Opera</th>
</tr>
</thead>
[...]

Compatibilidad con Firefox, Internet Explorer y Opera.

Para que funcione en Opera es necesario especificar la imagen de fondo en cada celda además de especificar 'background-position'. Esto porque en Opera las celdas no heredan el atributo 'background-image' por lo que 'background-position' por si solo no tendría algún efecto. Esta solución tambien funciona en Internet Explorer y Firefox.

Formato <porcentual>

[...]
<thead>
<tr><-- aquí se quitó la propiedad 'background-image' de la fila-->
  <th style="bakcground-image: url(background.gif); background-position: 0% 0%;">Firefox</th>
  <th style="bakcground-image: url(background.gif); background-position: 50% 0%;">Internet Explorer</th>
  <th style="bakcground-image: url(background.gif); background-position: 100% 0%;">Opera</th>
</tr>
</thead>
[...]

Formato <distancia>

[...]
<thead>
 <tr><-- aquí se quitó la propiedad 'background-image' de la fila-->
  <th style="bakcground-image: url(background.gif); background-position: 0px px;">Firefox</th>
  <th style="bakcground-image: url(background.gif); background-position: -50px 0px;">Internet Explorer</th>
  <th style="bakcground-image: url(background.gif); background-position: -100px 0px;">Opera</th>
 </tr>
</thead>
[...]

Ambas soluciones no usan nada fuera de HTML y CSS; son simples, no se necesita seccionar ninguna imagen y funcionan correctamente en Firefox.
Pero son un poco intrusivas porque agregan bastante código que es incomodo de mantener y si además en una página se tienen muchas tablas con distintas imagenes de fondo o tablas generadas dinámicamente, se vuelve un poco engorroso configurar apropiadamente los parametros en cada celda.
Por esto escribí una función en javascript que se encarga de configurar todo lo necesario para que la imagen de fondo aparezca correctamente en los tres navegadores.


function setTableRowBackgroundImagePosition(table){
 var all_tablesRows;
 if (table) all_tablesRows = table.getElementsByTagName("tr");
 else all_tablesRows = document.getElementsByTagName("tr");

 for (var i = 0; i < all_tablesRows.length; i++){
 if(all_tablesRows[i].style.backgroundImage == '') continue;//No background-image here, go on.
 var cells = all_tablesRows[i].cells;
 var previousWidth = 0;
 for (var j = 0; j < cells.length - 1 ; j++){//The last cell is processed after the for.
   cells[j].style.backgroundPosition = '-' + previousWidth.toString() + "px 0px";
   if(navigator.userAgent.indexOf("Opera")!=-1){//mmm...Opera
     cells[j].style.backgroundImage = all_tablesRows[i].style.backgroundImage;
   }
   previousWidth += cells[j].clientWidth;
 }
 cells[cells.length-1].style.backgroundImage = all_tablesRows[i].style.backgroundImage;
 cells[cells.length-1].style.backgroundPosition = "100% 0%";
 }
}

Su uso es muy sencillo, solamente se debe escribir la tabla de forma correcta indicando la imagen de fondo solo en la fila (tr) y luego con una llamada a la función todo queda configurado. La función revisa todas las filas de todas las tablas presentes en el documento y en las que se haya indicado una imagen arreglará las celdas configurando la propiedad 'background-position' y en caso de estar en Opera también la propiedad 'background-image'.
La función tambien da la posibilidad de especificar que tabla se quiere arreglar, para evitar pasar por todas las tablas del documento.

En concreto, se debe escribir la tabla:

<table width="150px" cellpadding="0" cellspacing="0" border="0">
 <thead>
  <tr style="background-image: url(background.gif);">
   <th>Firefox</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Mozilla fundation</td>
   <td>Microsoft Corporation</td>
   <td>Opera Software</td>
  </tr>
 </tbody>
</table>

Y luego llamar la función, ya sea desde window.onload o como parte de otra función que genera una tabla.
El uso de la función tiene además la ventaja que si el diseño de la imagen no tiene directa correspondecia al tamaño de la tabla, se puede hacer una imagen larga como el máximo ancho de la tabla y si ella resulta más corta se verá bien de todas formas, porque la última celda siempre se configura de modo que muestre el extremo derecho de la imagen.

GoogleTalk Status

2006-03-05T01:19:00.000-03:00

Actualización: Este material está obsoleto porque la nueva versión de Google Desktop permite obtener la posicón del mouse, lo cual puede usarse para detectar la inactividad del usuario.

Este es el caso: Me encanta Google Desktop Sidebar 3 y realizé un plugin para mi y mis compañeros de trabajo, el cual muestra información actualizada constantemente. El problema está en que mi PC está encendido 24/7 y no tiene ningun sentido que el plugin esté descargando datos desde internet para mostrarmelos si yo me fui a almorzar o estoy durmiendo. Entonces seria bueno que el plugin pueda de alguna forma determinar cuando no estoy utilizando el PC y en esos momentos no descargue la información acutalizada ahorrando así ancho de banda, consumo de la linea y procesamiento del servidor. Obviamente en mi Google Desktop Sidebar tengo GoogleTalk conectado y él sí sabe cuando no estoy en el PC, entonces una idea seria preguntarle a él, pero hay un pequeño problema que explico a continuación:

La API de la Sidebar expone, entre otras, la variable global googleTalk la cual permite que el plugin se comunique con nuestros 'amigos' que también tengan instalada la Sidebar y el plugin en cuestion. googleTalk tiene la propiedad friends que es un arreglo de objectos Friend, con ella podemos saber el estado (online/idle/busy) de nuestros amigos.
Nota: friends solo expone nuestros amigos que están online, los que estan offline no aparecerán en el arreglo.

El problema está en que si bien podemos saber el status de nuestros amigos, no hay forma de saber nuestro propio status, entonces se me ocurrio lo más obvio: Si no podemos saberlo pero nuestros amigos sí, preguntemoselo a ellos!

Como funciona

La idea es simple, le pregunta periodicamente a mis amigos indicados en options.GetValue('googleTalkStatus_friends') siempre y cuando options.GetValue('check_my_status') == 'true'. Luego, cuando mi estado cambia llama googleTalkStatus.onChangeStatus.

Entonces, para que funcione, el plugin se debe encargar de alguna manera que el usuario especifique cuales de sus amigos tienen el plugin instalado; esto parecerá una molestia pero me vi forzado a incluirlo para evitar que cada medio minuto a mis amigos les apareciera una ventana preguntando si quieren entrar a la página de plugins de Google Desktop Sidebar porque no tienen instalado el plugin que estoy usando. googleTalkStatus_friends debe ser la representación literal de un arreglo con los nombres de los amigos selecionados, ej: googleTalkStatus_friends = ['Juan Perez', 'Kaiser Soza'].

Como se usa

googleTalkStatus tiene cuatro propiedades posiblemente utiles para el plugin y tan solo dos metodos. Hay otras propiedades y metodos pero son de uso interno y no son de mucha utilidad para el plugin.

Propiedades:
googleTalkStatus.status: indica mi estado de GoogleTalk, estos pueden ser: 'firstCheck', 'unknown', 'stopped' y 0, 1, 2 para Online, Idle y Busy respectivamente. firstCheck es el estado que existe entre la llamada a googleTalkStatus.start() y la primera respuesta de mis amigos. Unknown es cuando googleTalkStatus no puede determinar mi estado. Stopped es el estado que existe despues de la llamada a googleTalkStatus.stop().

googleTalkStatus.delay: indica en milisegundos cada cuanto tiempo se debe consultar por mi estado a mis amigos.

googleTalkStatus.onReceiveTalkData: esta es importante, se debe usar en vez de googleTalk.onReceiveTalkData para que todo funcione bien. Será llamada incluso despues de haber detenido googleTalkStatus, así que no hay problema si se desactiva googleTalkStatus porque las comunicaciones propias del plugin continuarán a funcionar.
googleTalkStatus.onStatusChange: esta es un handler a la función que se debe llamar cada vez que googleTalkStatus.status cambia.

Metodos:
googleTalkStatus.start(): Inicializa googleTalkStatus, para que empieze a preguntar por mi estado. Esta función devuelve gddNoFriendsWithPlugin cuando no se han indicado los amigos a los cuales se les puede preguntar, es decir, options.GetValue('googleTalkStatus_friends') == "". Devuelve gddNoFriendsWithSideBar si ninguno de los amigos tiene Sidebar.
googleTalkStatus.stop(): Detiene googleTalkStatus, lo que no impide que mis amigos me pregunten por sus estados.

Ejemplo:

if (options.GetValue('check_my_status') == 'true') {
googleTalkStatus.onStatusChange = function(){utils.alert(googleTalkStatus.status)};
googleTalkStatus.onReceiveTalkData = function(friend, data){utils.alert(data)};
googleTalkStatus.start();
}

Para deterner googleTalkStatus se debe llamar googleTalkStatus.stop().

Y eso seria todo, lo demás depende de cada plugin, que cosa hará en googleTalkStatus.onStatusChange es especifico de cada plugin y no tiene ninguna relación con googleTalkStatus.

Para más detalle basta echar una mirada al codigo. Debo admitir que no está muy bien escrito pero lo llevo usando una semana y me ha funcionado bien.

Descargas:

Solo el js: googleTalkStatus.js
Un plugin de ejemplo que usa googleTalkStatus para decirte tu estado de GoogleTalk, obviamente para probarlo necesitas instalarlo en almenos dos PC con dos usuarios distintos de GoogleTalk.
GoogleTalkStatus.msi
GoogleTalkStatus_source.zip

Ajax no es solo un detergente

2005-06-14T13:13:00.000-04:00

En estos días he descubierto el termino AJAX que significa Advanced Javascript And XML o también Asynchronous Javascript And XML. A mi gusto el segundo es más apropiado a lo que Ajax se refiere, pero eso es solo un detalle.
Los usos de Ajax son de lo más variados, pero aqui listo algunos:

Validación de formularios en tiempo real.
Autocompletado de controles HTML.
Controles UI sofisticados.
Refrescos de conjuntos limitados de datos.
Notificaciones y polling del servidor.

El termino Ajax apareció en un paper publicado por Adaptive Path y luego se hizo famoso por todos lados, la aplicación que todos nombran como el mejor ejemplo de esta tecnologia es Gmail, el cuál adoro (Si alguien quiere una cuenta en gmail, basta con que me deje un comentario...tengo un monton y no se a quien pasarselas :) ).
Ajax en realidad es una técnica que se viene usando desde el lejano 1997 con una serie de 'trucos' bastante engorrosos antes de que apareciera XMLHttpRequest en todos lo navegadores. En terminos MUY grotescos Ajax es el uso del objeto XMLHttpRequest para comunicarse con el servidor y obtener información (datos) o postear datos al servidor sin necesitadad de recargar la página que el usuario está viendo y así lograr una experiencia mucho más agradable al usuario. Lo que se obtiene es una página web que se comporta como cualquier aplicación de escritorio.

No me voy a largar en detalles sobre esto, ¿Para que duplicar contenidos?. En vez aqui pongo una lista de links para quien quiera conocer esta "tecnologia" o quien simplemente siente curiosidad por este termino que nos recuerda un detergente para la ropa :)

Al principio dije He descubierto el termino Ajax, porque en realidad yo ya lo usaba en mySite sin saber la cantidad de discución que generó.

Cuan grande es Mozilla.

2005-02-16T15:46:00.000-03:00

"Mozilla is built on a very big source code base and is far larger than most Open Source projects. It is 30 times larger than the Apache Web Server, 20 times larger than the Java 1.0 JDK/JRE sources, 5 times bigger than the standard Perl distribution, twice as big as the Linux kernel source, and nearly as large as the whole GNOME 2.0 desktop source—even when 150 standard GNOME applications are included."
Fragmento extraido del libro "Rapid Application Development with Mozilla" de Nigel McFarlane.

Sabia que mozilla era grande, pero nunca imagine que fuera tan grande.