Las “cajas locas” de lanacion.com
Posted by Rulo | Filed under desarrollos, herramientas, jquery
En realidad no se llaman así, pero yo al menos les digo así y es un apodo que les puse mientras las desarrollaba.
Con esta funcionalidad se ofrece al usuario que disponga la información de manera subjetiva y a la vez tiene una oferta mas amplia de contenido relacionado a cada canal. Aunque no todo está visible en una primera instancia.
Pero más allá de la parte conceptual de las cajas, yo voy a hablar de la parte técnica que es lo que me interesa.
Desde el momento que me dijeron “Rulo tenes que hacer andar esto así” me dí cuenta que iba a ser dificil encontrar algún componente en jquery ya armado que haga específicamente eso. Y tenia que ser jquery.
Yo fui uno de los que empezó a hinchar hace bastante para empezar a usar jquery en lanacion. Cuando todo el sitio estaba manejado por la YUI de yahoo. La prueba de calidad fue canchallena. Todos se hizo con jquery desde el inicio y tuvo resultados muy buenos. A partir de ahí nos dieron el visto bueno para empezar a meterlo en lanacion, con el plan de paulatinamente reemplazar por completo a la YUI (cosa que todavía no pasó).
Volviendo a las cajas, el componente que hice se encarga de manejar la animación de las cajas al cambiar de posición con las flechitas y también la funcionalidad de colapsarlas. Tanto la caja completa que solo se cierra y se abre, como las solapas internas que además tienen la funcionalidad de abrirse al clickear una solapa y mostrar la última solapa clickeada en caso que el usuario las cierre desde el “handler”.
Además tiene la funcionalidad de “recordar” el orden de las cajas y mostrarlas como el usuario las dejó la ultima vez que las movió. Eso lo hace a través del componente jqueryui y el plugin jquery cookies
Era mas simple utilizar la funcionalidad “sortable” para volver a acomodar las cajas leyendo el orden en que las tenia que mostrar desde una cookie. Eso también le agregó otra funcionalidad que no estaba en los planes, una manera más de mover las cajas. Tomándolas y arrastrándolas desde el techo de color. 
Lo que Explorer se perdió
Un “feature” que estaba pensado desde un principio, era una manera de extender las noticias en una línea (que nosotros internamente llamamos tipo4) donde con un rollover sobre la nota, se puede ver un thumbnail de la foto (si la tiene) y la bajada. El “snapshot”.
Si bien estaba funcionando todo ok hasta unos días antes de implementarlo, notamos que en todas las versiones de IE este snapshot no se veía bien. Ni siquiera en la versión 8 (donde yo pensé que habían arreglado el problema, pero no). Básicamente el problema era de css. El IE al tener un elemento con posición relativa (con un z-index) y otro dentro con posición absoluta funciona bien como cualquiera esperaría. Pero con la excepción de que ese elemento absoluto queda “encapsulado” en el elemento de posición relativa, por lo que el siguiente elemento de posición relativa en el código queda por arriba del elemento de posición absoluta. Eso pasa en todas las versiones de IE y fue mas de un dolor de cabeza con los desplegables de la navegación del sitio.
Quizá la explicación no es tan clara, pero quedará para detallarlo en otro post.
En definitiva, en todos los otros navegadores van a poder ver esta funcionalidad que a mi personalmente me parece que esta muy buena.
Aunque mi idea es poner el js con un html demo para que lo pueda usar quien lo necesite. Como estoy corto de tiempo no pude hacer el demo y lo voy a agregar pronto. No quería dejar de postear esto, porque siempre me pasa lo mismo y si pasan 5 meses, para cuando lo posteo ya es viejo. Eso es causa de la ausencia de muchos post que tuve en mente y nunca llegué a publicar.
