JIT: JavaScript Information Visualization Toolkit

ByLuis

Impresionante la librería que ha creado Nicolas Garcia Belmonte que permite crear gráficas RGraph, Treemaps o Hyperbolic Trees. ¿Y qué tipo de gráficas son estas? pues explicándolo llanamente, las que muestran relación entre elementos usándo árboles, pero algo más visuales, centrando nodos.
jit.png
Por lo poco que he visto, está desarrollado en Canvas y para IE lo simula mediante VML. También estaría bien mirar si permite ampliar nodos dinámicamente.
JIT

Similar Posts

7 reglas para realizar Javascript de calidad

ByLuis

Siete consejos para realizar un javascript de calidad y no intrusivo:

  • No hagas suposiciones: no pienses que el usuario tendrá el javascript activado o que usará un navegador adecuado.
  • Usa IDs y relaciones entre elementos: para no depender de un HTML mal estructurado y que el javascript sea imposible de realizar, utiliza IDs para acceder a los elementos con los que se quiere tratar y busca elementos que faciliten acceder a otros elementos.
  • Utiliza estilos: en vez de modificar los estilos de los elementos HTML mediante Javascript, usa clases CSS que modifiquen los estilos, y mediante Javascript se le puede añadir la clase a un elemento superior.
  • Comprende el navegador y a los usuarios: debes pensar cómo funciona un navegador, no sobre saturar su comportamiento (abuso de drag&drop, eventos, …). Además debes pensar qué espera el usuario que haga el navegador, y respetarlo.
  • Comprende los eventos: los eventos no solo corresponden a un objeto, sino a los elementros hijo que contiene. Así se pueden realizar eventos sobr un único elemento y no tener que modificar los demás.
  • Respeta el código de otros: seguro que a parte de tu código existe algún otro que has añadido, por lo que deberás programar teniendo en cuenta que hay que evitar conflicto entre funciones.
  • Después de ti vendrá otro: es muy frecuente que alguien acabe modificando tu código, ten un poco de consideración por los demás y escribe código legible y entendible.

The seven rules of Unobtrusive JavaScript

Vía / @dcedilotte

|

Recopilación de utilidades Javascript

ByLuis

Una interesante lista de utilidades Javascript, agrupadas por acciones sobre enlaces (buscar enlaces, ocultar visitados, eliminar redirecciones, …), interactuación con formularios (transformar POST en URLs, mostrar ocultos, …), uso de texto y datos (resaltar, ordenar tablas, …), reemplazar objetos (mostrar el texto alternativo de las imágenes en lugar de estas, quitar plugins, …), desarrollo web (shell, modificar estilos, …), validaciones (urls de imágenes incorrectas, validacion de HTML, …) y por último un grupo de utilidades varias (traducir la página, editarla, …).
Bookmarklets
Vía / aNieto2K

Backgrounds animados con jQuery

ByLuis

Interesante script para jQuery que usa el plugin para modificar la posición del background y que nos permite hacer efectos con el background similares a los que se suelen hacer con Flash.

Mediante un fondo de mayor tamaño que el elemento y con una forma irregular (esquinas, ondas, degradado, …) se trata de que al mover el fondo, el efecto que se produzca sea el de una animación.

El script sería algo así:

$('#nav a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0 -250px)"},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})

Using jQuery for Background Image Animations

Vía / Script & Styles

Simpletip: tooltips mediante jQuery

ByLuis

Simpletip es un plugin para jQuery que nos permite añadir tooltips a elementos HTML de forma sencilla y cómoda.

Posee muchas opciones para configurar el tooltip, además de ser modificable mediante estilos.

$("JQUERY SELECTOR").simpletip({
content: 'My Simpletip',
fixed: false
});

Funciona en Firefox 1.5+, IE6+, Safari 2.0+ y Opera 9.0+.

Simpletip

Permitir el botón atrás en aplicaciones dinámicas

ByLuis

Cuando realizamos aplicaciones dinámicas, ya sea usando Ajax o mediante javascript mostrando u ocultando contenidos, nos podemos encontrar con el problema de que el usuario pulse el botón ‘Atrás’ del navegador creyendo que accederá al contenido anterior. El resultado de esa acción será en la mayoría de los casos que el usuario acceda a la página anterior y no al ‘contenido’ anterior.

Para solucionar esto, lo que se debe hacer es que las acciones dinámicas sean realizadas mediante enlaces (#), por ejemplo, si queremos usar pestañas podemos acceder a #tab1, #tab2, …, #tabn. Si vamos atrás en el navegador continuaremos en la misma página pero en otra sección (#).

Para tratar esto mediante jQuery se puede hacer usando el siguiente código:

$(window).bind('hashchange', function () {
  // hacer lo que sea para mostrar el contenido
});

Enabling the Back Button

Vía / CSS Globe