Después de Kanban.

14:29:00 Miquel A. Mora 0 Comments



KanbanTimeline.mov Watch on Posterous
Kanban funciona perfectamente como sistema de producción. El tablero de Kanban nos permite tener una muy buena visión sobre el trabajo en curso y una gestión optimizada de las cargas de trabajo previstas.
Pero cuando una tarea se finaliza, debemos crear algún sistema o método para conservar la información referente a esta tarea y su creación a modo de histórico o como consulta. Esta opción ya viene integrada en los software de gestión de proyectos existentes. Pero nosotros no utilizamos ninguno, al menos por el momento


Timeline para la Visualización del trabajo realizado
Periódicamente semanal o quincenalmente "vaciamos" los post-its de la columna Terminado-Funcionando y los añadimos a una hoja de calculo de google docs.
El formato de la hoja de calculo es
Titulo | Fecha Petición | Fecha Selección | Fecha inicio | Fecha Terminado | Fecha Entrega | Fecha Funcionando | Descripción | Pedido por | Categoria de la tarea | Realizado por
Las cabeceras de las columnas las vamos a formatear de esta forma para su posterior integración con el widget de visualización.
{Nombre_de_la_columna:tipo de datos de la columna (si es diferente a texto)}

 {label} | {Pila:date} | {Seleccionado:date} | {En_Curso:date} | {Terminado:date} | {En_Entrega:date} | {Funcionando} {description:single} | {Peticion} | {TipoEvento} | {Team}


Captura_de_pantalla_2011-03-23_a_las_12

Aquí añadimos la información que hemos recogido durante el flujo de trabajo de la tarea y que tenemos anotado en cada post-it según lo comentado en HOLA, SOY KANBAN. PRINCIPIOS DE USO
Bien. Ahora ya tenemos un lugar donde guardamos la información y no tenemos que temer al maleficio del pegamento del post-it (que sabemos tiene caducidad ;)
SMILE Widgets
Y para mostrar de manera friendly esta información, recurrimos a un proyecto libre y Open-Source de widgets para la visualización de datos en entorno web llamado SMILE Widgets Tiene varios componentes o widgets, el que utilizamos será Exhibit, que soporta filtrado, ordenación, búsqueda de datos con timelines interactivos, del cual recomiendo consultar la documentación para una explicación completa del widget.

Captura_de_pantalla_2011-03-23_a_las_12

Integración del Widget Exhibit
La integración del widget es muy sencilla, debemos incluir una llamada a las clases javascript del mismo y la referencia a la hoja de calculo de google donde esta la información como explican en su wiki de documentación.

   <script src="http://static.simile.mit.edu/exhibit/api-2.0/exhibit-api.js" type="text/javascript"></script>     <script src="http://static.simile.mit.edu/exhibit/extensions-2.0/time/time-extension.js"></script>      <link         rel="exhibit/data"         type="application/jsonp"        href="http://spreadsheets.google.com/feeds/list/0AuRpxlLrxxzedDVrTERiYmgtb0hlTklyM3lWQjFzUnc/od6/public/basic?alt=json-in-script"       ex:converter="googleSpreadsheets" />

Vistas Detalles o Diagrama Temporal

Captura_de_pantalla_2011-03-23_a_las_12

Creamos el Panel donde mostraremos los datos en modo listado de DETALLES o en modo DIAGRAMA TEMPORAL (Timeline)
<body>   <h1>Kanban Implementation Timeline</h1> <table width="100%" cellspacing="20">    <tr valign="top"> <!-- Personalización de colores de las tareas --> <div ex:role="coder" ex:coderClass="Color" id="Evento-colors"> <span ex:color="FFFF00">Formacion</span> <span ex:color="66CC66">Novedad</span> <span ex:color="FF99CC">Incidencia</span> <span ex:color="FF9900">Mejora</span> </div>  <td ex:role="viewPanel">
 Vista DIAGRAMA TEMPORAL (Timeline)

Captura_de_pantalla_2011-03-23_a_las_12

Creamos la vista DIAGRAMA TEMPORAL (Timeline)
Configuramos en que columna estan los datos, y forma de visualización.
<!-- inicio pagina TIMELINE --> <div ex:role="view"   ex:viewClass="Timeline"   ex:start=".En_Curso"   ex:end=".Funcionando"   ex:topBandUnit="week"   ex:bottomBandUnit="month"   ex:topBandPixelsPerUnit="100"   ex:colorKey=".TipoEvento"   ex:colorCoder="Evento-colors"   ex:formats="date {mode: medium; show: date}"    ex:latestStart=".Pila">
Pop-up detalles tarea

Captura_de_pantalla_2011-03-23_a_las_12
Creamos el popup que se abrirá cuando cliquemos sobre una tarea en el timeline
Notar que hemos creado una imagen que representa el tipo de evento o para mostrar gráficamente la categoría de la tarea, la imagen esta guardada en la carpeta images y se llama igual que el TipoEvento con extensión.jpg (ejemplo images/novedad.jpg) por esto la razon del concat('images/', .TipoEvento, '.jpg')"

<!-- inicio popup de la tarea --> <div ex:role="lens">   <table border="0"> <tr> <td><img ex:src-content="concat('images/', .TipoEvento, '.jpg')" /></td> <td><div class="title" ex:content=".label"></div></td> </tr> </table>   <div class="tarea" ex:content=".description"></div> <p ex:content=".TipoEvento">   </p>  

Captura_de_pantalla_2011-03-23_a_las_12

Mostramos los detalles de fechas, leadtime, propietario de tarea y autor, en una tabla.
<!-- inicio tabla team y lead time -->  <div class="team"><hr><b>Peticion:</b> <span ex:content=".Peticion"></span>  -  <b>Lead time:</b> <span ex:content="date-range(.Seleccionado, .Funcionando, 'day')"></span> dias -  <b>Equipo:</b> <span ex:content=".Team"></span></div>  <table border="0"  cellpadding="2"> <tr>  <td> <table border="1" class="kanban"> <tr>  <th colspan="2">Pendiente</th> </tr> <tr class="alt">  <td >Pila</td>  <td>Seleccionado</td> </tr> <tr>  <td><span ex:content=".Pila"></span> </td>  <td><span ex:content=".Seleccionado"></td> </tr> </table> </td>  <td> <table border="1" class="kanban"> <tr>  <th colspan="2">Desarrollo</th> </tr> <tr class="alt">  <td >en Curso</td>  <td>Finalizada</td> </tr> <tr>  <td><span ex:content=".En_Curso"></td>  <td><span ex:content=".Terminado"></td> </tr> </table> </td> <td> <table border="1" class="kanban"> <tr>  <th colspan="2">Terminado</th> </tr> <tr class="alt">  <td >en Entrega</td>  <td>Funcionando</td> </tr> <tr>  <td><span ex:formats="date { template: 'dd/MM/yy'; show : date }" ex:content=".En_Entrega"></td>  <td><span ex:content=".Funcionando"></td> </tr> </table> </td> </tr> </table>    </div></div>

Captura_de_pantalla_2011-03-23_a_las_16

Ya tenemos acabada la vista DIAGRAMA TEMPORAL (Timeline)
Vista modo listado de DETALLES

Captura_de_pantalla_2011-03-23_a_las_12

Continuamos con la vista modo listado de DETALLES.
Creamos y configuramos la vista
<!-- inicio pagina DETALLES --> <div ex:role="view" ex:label="Detalles" ex:viewClass="Tile" ex:orders=".TipoEvento" ex:possibleOrders=".TipoEvento, .Peticion, .Team"> </div>
Añadimos el formato y los datos a mostrar
<table ex:role="lens" class="Detailist" width="900px" style="display: none;"><tr><td>  <div class="title" ex:content=".label"></div>  <p ex:content=".description"></p>  <img ex:src-content="concat('images/', .TipoEvento, '.jpg')" />
Mostramos los detalles de fechas, leadtime, propietario de tarea y autor, en la misma tabla que hemos utilizado para la vista popup del Timeline.
Filtros y criterios de ordenación
Captura_de_pantalla_2011-03-23_a_las_12
Finalmente creamos los filtros y ordenación que queremos mostrar en las vistas que hemos creado.
<!-- inicio FILTROS Laterales -->       <td width="20%">       <div ex:role="facet" ex:facetClass="TextSearch" ex:facetLabel="Buscar"></div>       <h2>Filtrar</h2>       <div ex:role="facet" ex:expression=".Peticion" ex:facetLabel="Peticion"></div>       <div ex:role="facet" ex:expression=".TipoEvento" ex:facetLabel="Evento"></div>       <div ex:role="facet" ex:expression=".Team" ex:facetLabel="Equipo"></div>        </td>
Ya tenemos nuestro histórico de tareas creado. Tan solo con añadir nuevas tareas a la hoja de calculo de google nos aparecerán en nuestras vistas de forma automática.

Solo nos queda disfrutar al mostrar la cantidad de tareas que el equipo va realizando... y a que ritmo!!!
Si quereis el codigo completo y las imagenes utilizadas, simplemente emailme o poner un comentario.

You Might Also Like

0 comentarios: