VIAJANDO EN EL TIEMPO

<script src=”my own” title=”viajando en el tiempo”>

Las líneas de tiempo son importantes para gestión de proyectos, control, cronogramas de planificación, sistemas ERP, entre otros. Permiten una visualización de actividades que se han venido desarrollando en un proyecto, un sistema, etc. Bien usadas, puede ser un recurso versátil (una de las que se me ocurre es una línea de tiempo para la duración de actividades de un proyecto en un tablero kanban).

Timesheet.js es una de esas librerías que me “encontré por ahí googleando“. Es un proyecto prototipo, un envoltorio de un proyecto más grande usando Middleman. Esta librería fue creada por Sebastian Müller como parte de un proyeto más grande, pero que por su aplicación práctica lo liberó aparte en el Gato-Pulpo.

La librería está en fase omega (tal cosa no existe, sólo es un sarcasmo para decir que NO es viable usarla en producción ¬¬’), pero así como viene la librería podemos usarla en proyectos “académicos”, tras unas cuantas modificaciones al código, principalmente del CSS que trae por defecto. Nada más descargarla, la incluímos en un HTML junto con su CSS y trabajamos con ella.

<script src="timesheet.js"></script>
<link rel="stylesheet" href="timesheet.css">

La sintaxis no es gran cosa 😛

<div id="timesheet">
	<script>
		new Timesheet('timesheet', 2002, 2015, [
  		  ['2002', '09/2002', 'A freaking awesome time', 'lorem'],
    		  ['06/2002', '09/2003', 'Some great memories', 'ipsum'],
		  ['2003', 'Had very bad luck'],
		  ['10/2003', '2006', 'At least had fun', 'dolor'],
		  ['02/2005', '05/2006', 'Enjoyed those times as well', 'ipsum'],
		  ['07/2005', '09/2005', 'Bad luck again', 'default'],
		  ['10/2005', '2008', 'For a long time, nothing!', 'dolor'],
		  ['04/2003', '04/2009', 'It happens!', 'lorem']
		]);
	</script>		
</div>

El constructor acepta cuatro parámetros obligatorios:

  • El id del contenedor de la data.
  • Años de inicio y fin (sólamente los años).
  • Un Array con la data específicada en cada ìtem:
    • Fechas de inicio y fin (en formato MM/AAAA o el año).
    • Breve descripcion.
    • Atributo class que determina el color de la barra.

Y nos da un bonito resultado out of the box:

Captura de pantalla de 2015-03-31 11:50:34A pesar de todas las modificaciones que eventualmente hubiera que hacerle a esta librería, sigue siendo una buena opción para elaborar líneas de tiempo, y considerando que su propio autor insta a forkear su proyecto en el Gato-Pulpo, veré si lo incluyo en uno de mis proyectos que tengo en mente, espero que me de tiempo 😉

</script>

Anuncios