Blog Tecnológico de Azalorea

Joe Hewitt ha puesto manos a la obra y ha sacado la versión beta de Firebug 1.0. Al día de hoy es la beta3 que incorpora funcionalidades que usuarios le han pedido tras haber evaluado beta1 y beta2.

Y estamos de suerte porque Joe ha decidido, tras pensarselo detenidamente y hablar con los usuarios, a seguir con el modelo OpenSource [ver su comentario]. Al parecer ha hecho bien porque los mismos usuarios se han volcado en donar importes de 20 a 100€ para que Joe pueda dedicarle recursos a esta herramienta que ya se ha vuelto indisepnsable para muchos desarrolladores.

El interfaz de Firebug está totalmente renovado y mucho más limpio… cosa que era necesaria porque tiene un sinfin de nuevas funcionalidades. Las más importantes son:

• Poder abrir Firebug en una ventana propia
• Editar HTML (y no solo los parámetros como en la versión 0.4)
• Editar CSS (desde beta3 se puede editar enteramente)
• Monitorizar tráfico de red detallando gráficamente cuando tarda cada elemento en cargarse.
• Perfilar tiempo de ejecución

Aparte del AddOn para Firefox Joe ha creado Firebug Lite… una librería JavaScript para disponer de las funcionalidades (limitadas por momento) de Firebug en Internet Explorer, Opera y Safari. Por momento Firebug Lite está limitado al logging y ejecución de comando JS en la consola.

Happy debugging,
Miguel

Los creadores de Moo.fx han sacado un framework que podría hacerle la competencia a Scriptaculous & Co. El nuevo jugador se llama MooTools y, aunque recien salido aún tiene sus defectos, trae todo para poder posicionarse muy adelante.

La principal ventaja que trae es la ligereza… con todas las extensiones y sin comprimir solamente pesa 35 KB. El autor mantiene que MooTools funciona en IE6 y 7, Firefox & amigos, Opera, Safari y Camino, pero algún comentario encontrado por internet afirma que en IE7 da errores.

Una gran diferencia entre Scriptaculous y Mootools es que el primero presupone muchas de las posibles opciones donde MooTools deja totalmente en la mano del desarrollador la tarea de definir las opciones… hasta el punto de no funcionar si alguna opción no ha sido definida.

En resumen este nuevo candidato tiene muy buena pinta y queda esperar ver cómo evoluciona y su aceptación entre los desarrolladores.

John Reisig ha sacado la versión 1.0 de jQuery.

Según su blog se ha reescrito gran parte del código para solventar diversos problemillas que tenía la librería. También ha aprovechado el lanzamiento para rehacer la web (por momento solo anunciado pero aún no visible). Según el Blog de John Reisig aún tardará unos días hasta tenerla lista para el público.

Lo que si ya está disponible es la documentación actualizada de visualQuery en http://screencasts.visualjquery.com/visual/docs.xml.

Aún no tuve tiempo de probar esta versión y evaluar si me sale a cuenta cambiar de scriptaculous/prototye a jQuery…

Downloads:
jQuery 1.0
jQuery 1.0 (comprimido)

Cada día se escucha más hablar de DOM y cada vez menos de DHTML. Hay discusiones larguísimas acerca de estos 2 términos sobre todo porque no está del todo claro si es lo mismo o no lo es. Cómo siempre depende del enfoque que cada uno le dé a un término y otro.

Hay quienes defienden DOM cómo la tecnología del futuro (y sin duda tienen razón) objetando que DHTML es cosa del pasado (cosa que no creo). DOM-scripting lo interpreto cómo parte de DHTML (HTML dinámico), que en este caso se consigue actuando sobre nodos en vez de actuar sobre capas.

Hoy me he topado con un artículo muy bueno sobre cómo pasar de DHTML a DOM-scripting. Salvando el hecho de que yo considero DOM cómo una parte de DHTML, el artículo es muy instructivo por tener cómo meta querer ayudar a evitar técnicas antiguas y enseñar a usar técnicas actuales.

El autor diferencia DHTML de DOM-scripting por el hecho de que DHTML no es ningún estándar del W3C sino que es un conjunto de estándares (al igual que lo es Ajax hoy en día) y que DHTML aparenta cambiar la página sin recargarla, cuando DOM es capaz de enviar y recibir datos a otros sistemas (pe servidor). Lo último en realidad nada tiene que ver con DOM y mucho menos es un estándar (aunque lleva mucho tiempo vagando por el mundo de los navegadores).

Estoy muy de acuerdo en que DOM es el futuro…. de DHTML… y si se hace uso de Ajax de manera reservada (quiero decir que no se intente usarlo porque si) pues aún mejor.

Bueno… aquí va el enlace (el artículo está en inglés):
http://icant.co.uk/articles/from-dhtml-to-dom/from-dhtml-to-dom-scripting.html

Otro tutorial interesante trata de objetos literales (también en inglés):
http://www.wait-till-i.com/index.php?p=239

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

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

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.