Blog Tecnológico de Azalorea

Llevo tiempo buscando un script para tooltips que no exija html redundante y que coja el texto (o html) a mostrar del atributo title. No encontré nada que lo haga, pero al final dí con un script que hacía algo parecido y lo adapté a mi gusto.

El script original se puede bajar de http://jnetiq.com/tool_tips.html.
El script adaptado lo puedes bajar aquí.

También adapté el script para que haga uso de Prototype/Scriptaculous. Aún queda mejorar algunos detalles, pero el resultado ya es muy satisfactorio.

Modo de uso:

Poner el siguiente código en el header

var jttl;
function jttl_init(){
if (typeof(Tooltips) == “function”){
jttl = new Tooltips();
jttl.registerElements(document.body);
jttl.activate();
}
}

Al final de la página o en onLoad poner

jttl_init();

Los elementos que deban tener el tooltip han de tener la clase tooltip (class=”tootltip”).

Para un nuevo proyecto necesitaba la posibilidad de disponer de pestañas. Las soluciones que había probado hasta ahora no llegaron a convencerme y así me puse a buscar para ver lo que había disponible en la red. Mi idea era encontrar algo que haga uso de Scriptaculous… pero no hubo suerte. Finalmente dí con Tabber. Ofrece más funcionalidades de las que estaba buscando, pero no las buscaba porque no había pensado en ellas… la verdad es que está muy bien.

Entre las funcionalidades que más me llamaron la atención se encuentra la posibilidad de cargar el contenido de un pestaña usando Ajax, la posibilidad de tener múltiples pestañas repartidas en la página (también anidadas) y poder asignar eventos a las diferentes pestañas sin tener que hackear el código. El código está escrito orientado a objetos y está muy bien comentado.

Lo que haré es portar el código para que haga uso de Prototype/Scriptaculous para reducir el peso. Con esto tendré el script de pestañas de mis sueños

Enlaces:

• Homepage:
  http://www.barelyfitz.com/projects/tabber/
• Blog:
  http://www.barelyfitz.com/blog/archives/category/tabber/

Scripts alternativos:

• xttab:
  http://www.extollit.com/tabctrl.php
• DynArch:
  http://www.dynarch.com/products/dhtml-tabs/
• WebFX (mi favorito hasta ahora):
  http://webfx.eae.net/dhtml/tabpane/tabpane.html
• net4visions (en desarrollo):
  http://www.net4visions.com/dev/tabs/docs/readme.htm
  http://net4visions.com/dev/tabs/tabs.html

Cómo prometí en un post anterior aquí va mi el primer artículo sobre trucos en Firebug. Tengo que aclarar que no son cosas que descubrí yo, sino que el mismo autor los publica en su web… pero aquí lo tenéis en castellano.

Si escribimos una referencia a un objeto en Firebug, este objeto será un enlace clicable. Este enlace nos lleva al Inspector con el objeto en cuestión preseleccionado. Esto no solo es aplicable a referencias metidas por la línea de comando, sino también a referencias recibidas por la función printfire().

Al pasar el ratón por encima del enlace el objeto en cuestión es resaltado con un borde azúl en la ventana del navegador (ver imagen). Estando en el Inspector con el objeto seleccionado podemos acceder (ver pestañas abajo a la derecha en el Firebug) a las siguientes características del objeto seleccionado:
- Código fuente (Source)
- CSS aplicado (Style)
- Layout aplicado (Layout)
- Eventos enlazados (Events)
- Dom

En los últimos meses ha habido mucha discusión acerca del uso de innerHTML. Los hay que están totalmente en contra por el hecho de no ser un estándar. Otros sin embargo lo abogan su uso porque a pesar de no ser un estándar tiene un amplio soporte en los navagedores y por su mayor rapidez [ver comparativa].

La verdad es que el soporte de los navegadores para innerHTML es bastante mejor que el soporte para DOM. Firefox, desde la versión 1.5, hasta permite usar innerHTML para documentos XML.

Yo suelo usar mucho Ajax en mis aplicaciones, y la manera más rápida es que el servidor me devuelva un fragmento de XHTML porque así evito hacer 2 funciones, una para la visualización HTML y otra para la visualización DOM. Esto me lleva a usar innerHTML ya que de lo contrario tendría que convertir el HTML a DOM y después insertarlo… doble trabajo y tiempo de procesador.

Parto de la idea que los estándares son buenos, pero, como siempre, no todo es blanco o negro. Uno debe elegir las herramientas a usar según convengan en la situación dada.

Hoy he descubierto el blog del programador de firebug. Llevo usandolo desde hace un rato, pero no tenía ni idea de las posibilidades que esconde esta extensión.

Las funcionalidades se podrían definir como una mezcla de la consola de javascript y el inspector de DOM. Pero según he descuebierto hoy incorpora varios detalles que facilitan las cosas a la hora de resolver problemas ya sea con el CSS o con Javascript.

Explicar en detalle todas las funcionalidades me parece demasiado para este post… pero haré un resumen:

• Firebug instala un pequeño iconito en la barra inferior de Firefox, por defecto es verde pero se pone en rojo cuando hay errores de Javascript. Cicando en cualquier momento en el ícono se accede al entorno de FIrebug con todas sus funcionalidades.
• Dispone de un inspector DOM. Muestra un marco alrededor del objeto en la ventana del navegador cuando pasas el ratón por encima del arbol DOM del inspector y viceversa.
• Línea de comandos… dispone de posibilidad de ejecutar comandos Javascript que se ejecutan en el entorno de la página cargada.
• Inspector de Ajax… muestra tanto el request mandado como los datos que devuelve el servidor.
• Posibilidad de mostrar solo los mensajes relacionados con la página abierta.

Mirando el blog de Joe Hewitt descubrimos muchos detalles más… en otro post iré detallando los diferentes “trucos” que se mencionan allí.

Miguel

Scriptaculous ha vuelto a sacar una nueva versión.
El corto tiempo que ha pasado desde que han sacado la versión anterior se debe a que con la ampliación de código se han metido unos “Memory Leaks” que hacían su uso casi imposible en Internet Explorer.

La nueva versión resuelve este problema y algunos detallitos más.
Aparte de un nuevo parámetro para draggables no hay funcionalidades nuevas en esta versión.

Miguel

Los que nos gustan los estándares y en general todos que hagan uso de Ajax agradecerán esta noticia. W3C está trabajando en un primer boceto (draft) oficial para el XMLHttpRequest.

Hasta el día de hoy cada navegador tenía su manera de implementarlo… y por tanto nosotros teníamos que adaptar nuestro código a cada plataforma. En un futuro, que espero no sea muy lejano, podremos desarrollar aplicaciones Ajax sin tener que gastar líneas de código para hacerlo funcionar en los diferentes navegadores.

Está claro que pasará aún algun tiempo hasta que esté terminado la propuesta de estándar y pasará otro tanto hasta que se implementen en los navegadores, pero podemos estar contentos que por fin se haya empezado esta tarea.

Lo que llama la atención es que al parecer no hay ningun miembro de Microsoft involucrado en la creación de este nuevo estándar. Si Microsoft decide no guiarse por el estándar de W3C los problemas seguirán siendo los mismos.

Miguel