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.

Esta adaptación que hice del plugin original, agrega la funcionalidad de manipular banners en flash. Pero antes de hablar de la funcionalidad agregada, repaso que hace el plugin original.

El plugin wp-serve resuelve la necesidad de la que hablaba antes, pero se queda corto. Agrega al backend una página de administración de banners, donde es muy simple dar de alta, modificar o eliminar posiciones de banners, pero con la restriccion que solo permite imagenes (ya sean jpg, gif o png).
Además tambien se puede especificar una “zona” para cada banner, que vendria a ser como un nombre de posición. Luego en el theme, o en el post, donde llamemos a esa posición irán rotando los banners cargados para ese nombre. Se puede indicar la cantidad de veces que querramos que esa posición se imprima, o que sea ilimitada.

En el backend se pueden ver las posiciones cargadas con una estadistica de impresiones y clicks por cada una. Es bastante piola la verdad. Pero no permite cargar banners en flash y es ahí donde veo un gran defecto en el plugin. Y no soy el único, mi amigo nch también lo cree, ya que el fué quien me pidió que le agregue esta funcionalidad.

La funcionalidad agregada es la del soporte a banners en flash. Al igual que otros adservers el flash necesita recibir un parametro con la url adonde apuntar. Y esto es importante para el conteo de clicks. El banner no apunta directamente a la url de destino, sino que pasa por un “puente” que se encarga de derivar al usuario al destino.

Un ejemplo es el banner de proyectounder que puse en el sidebar.

Para usar el plugin lo puede descargar de aquí. Las instrucciones de uso, las dejé como en el plugin original y agregué una descripción en la página del backend del código a agregar en los banners en flash.

Descarga: adserve-flash

A más de 1 mes de estar en línea, superó todas las expectativas en cuanto a  performance lo cual se traduce a costo. La capa visual generada con xml y xsl está funcionando muy bien, sumado al módulo de cache, genera un consumo muy bajo de los recursos del server . Casi igual a si estuviera sirviendo todos htmls estáticos.

Otra cosa que empezamos a notar, es que el framework se hizo “muy amigo” de google. Leegando a indexar un total de 23.800 urls del sitio en lo que lleva online, casi el doble de la versión anterior que estuvo en línea mas de 3 años.

Otro módulo que se agregó para este sitio fué el de analytics, para la generación de los rankings de notas, videos, playlists y discos. Así el manejo de estadísticas se canaliza directamente por google y sacamos esa carga a la base del sistema.

Para el módulo de videos empezamos a utilizar el JW Player 5, para poder empezar a utilizar los videos encodeados en mp4 (los ultimos videos están en este formato) asi mas adelante podemos implementar html5 para compatibilidad con otros dispositivos como el iphone.

Se cambió la sección de artistas, para mostrar más contenido. Aprovechando el cache, se muestran artistas random (3 destacados y 12 en un listado) que van cambiando 1 vez por hora.

El sistema de registración se hizo practicamente de nuevo, manteniendo los usuarios que ya estaban registrados. Se creó un perfil de usuario, donde se puede visualizar la actividad del usuario dentro del sitio, como ser comentarios, publicación de eventos o avisos clasificados. Además ahora los usuarios registrados, pueden cargar un avatar para ser reconocidos en cualquier parte del sitio donde interactuen.

También se mejoró la agenda y sigue en etapa de mejoras. Porque es una de las cosas que mas tráfico genera al sitio.

Aunque para este desarrollo, el framework esta “tuneado” se crearon modulos especificos de la aplicación. Se hace evidente la flexibilidad que tiene y estamos ansiosos de ponerlo open source para que otros desarrolladores lo utilicen y nos ayuden a mejorarlo y agrandarlo!

Otro sitio que tambien esta funcionando con el framework es lugares de viaje. Que al igual que proyectounder tiene desarrollados módulos especificos de esa aplicación.