Blog Tecnológico de Azalorea

Tras probar muchos scripts para ventanas flotantes por fin he dado con uno que se basa en Scriptaculous, es funcional y bonito. Hace uso de skins, lo que lo hace facilemente adaptable al entorno de la aplicación que estemos programando y permite cargar los contenidos dinámicamente… y de allí a cargar los contenidos mediante Ajax ya solo queda un pequeño paso
La única pega que le veo es que no ofrece la posibilidad de adaptar su tamaño al contenido, aunque si ofrece la funcionalidad de scroll.

Podeis ver la demo en http://net4visions.com/dev/dialog/dialog.htm.
Para descargar el código… http://net4visions.com/dev/dialog/

La implementación de dialog.js en nuestra aplicación es muy fácil…
Después de cargar prototype.js y scriptaculous.js se carga _dialog.js.
Para abrir una ventana flotante se usa

var dlg0 = new Dialog(null, {options});

Las opciones disponibles y el manual completo lo encontrais aquí.

Miguel

Jesse James Garett, el inventor de la palabra “Ajax” admite que Ajax ya no define solamente “Asynchronous JavaScript + XML” sino que es válido para todo tipo de aplicación web que hacen uso de:
- un modelo de interacción asincronea
- tecnologías nativas del navegador.

Ajax se ha convertido en la palabra de moda para todo tipo de aplicaciones web. Muchas de estas no merecen el nombre Ajax porque las funcionalidades son puramente DHTML o DOM Scripting sin comunicarse con el servidor.

Pero hay otras muchas que usan iframes para la comunicación o devuelven (x)HTML en vez de XML (caso de Prototype)… y esto si debe considerarse Ajax… y ahora con el beneplácito de Jesse

Miguel

Una particularidad que tiene Prototype es que la respuesta de un request JSON la espera en la cabecera de la respuesta, dentro del tag propietario X-JSON. En principio eso no causa ningún problema hasta que no coincidan 2 elementos… el uso de Internet Explorer y un tamaño excesivo del contenido devuelto.

Desconozco la motivación para usar la cabecera para el transporte del contenido JSON, pero a la vista de los problemas que nos puede dar con IE es algo que debería replantearse.

Miguel

Ha salido por fin la la largamente prometida versión 0.4 de Firebug. Lo más impresionante es que esta versión viene con un debugger “básico” pero muy funcional. No es tan completo (o complejo) cómo el Venkman, pero la facilidad y rápidez de uso del Firebug pronto nos hará olvidarnos de Venkman. Además con esta nueva versión el autor ha inaugurado dominio propio para la herramienta. Para la URL ha seguido el estilo de la Mozilla Foundation… www.getfirebug.com

Las funcionalidades nuevas son las siguientes:

• Permite poner breakpoints desde la consola.
• Inspeccionar variables locales.
• Stacktraces en los errores… para saber en que circunstancia se dispara el error.
• Break on error… (opcional) para para la ejecución cuando hay un error y llevarnos a la fuente del mismo.
• console.log… ya no necesitamos la función printfire()… Firebug pone a disposición de las páginas el objeto console para ello.
• Los mensajes de logging ahora se pueden clasificar (debug, error, warning, info)… parte del objeto log.
• Aserciones… podemos testear aserciones con el objeto log.
• Uso de funcionalidad tipo prinf (PHP) para los mensajes del objeto log. Esto nos permite incluir una referencia a un objeto e inspeccionarlo con un solo click.

Para un listado completo de cambios ir a los release notes.
Documentación para las nuevas funcionalidades se encuentra aquí.

Feliz debugging

Thomas Fuchs, el inventor de Scriptaculous, ha creado un script para crear reflejos de imágenes dinámicamente. Lo asombroso es que, basandose en Scriptaculous, el script consiste of solamente 20 líneas.

Puedes ver el script en acción en http://mir.aculo.us/stuff/reflector/reflector.html.
En el código fuente se ve el JS usado para crear el efecto. Prefiero no publicar aquí el código porque Thomas Fuchs va haciendo mejoras y en el ejemplo siempre estará el código actualizado.

MochiKit es otra librería con el afán de simplificar la creación de páginas DHTML. Lo mejor de MochiKit es la documentación. Es muy extensa y detallada. También dicen que es ligera, pero con 111KB en su versión comprimida no me parece muy ligera.

Cómo las demás librerías DHTML ofrece soporte para la mayoría de los navegadores que se usan actualmente. Las funcionalidades son bastante similares a lo que ya conocemos, pero destacando que además de Ajax tiene soporte para JSON.

La nueva versión 1.3.1 (ha salido hoy) añade MochiKit.Signal… funciones para la gestión de eventos.

URLs interesantes:

• Homepage:
  http://www.mochikit.com/
• Blog:
  http://bob.pythonmac.org/archives/category/javascript/mochikit/

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.