App JavaScript para crear lineas de tiempo con HTML5 y CSS3

Time Sheet JS es una interesante App JavaScript que te facilita crear lineas de tiempo aprovechando la flexibilidad de HTML5 y CSS3, es un script muy fácil de utilizar e integrar en tu pagina web, basta con incluir el script y definir un arreglo en formato JSON con los datos que deseas se desplieguen como parte de la linea de tiempo, definiendo para cada dato una fecha inicial y una fecha inicial así como la información referente a dicho evento.

La forma en la que nos permite crear las lineas de tiempo nos permite crear el arreglo de datos y eventos de manera muy sencilla integrando los datos desde una base de datos usando AJAX por ejemplo, no hay mucha documentación sobre la herramienta, solo una pequeña guía que explica como crear tu primera linea de tiempo con Time Sheet, les dejo el ejemplo.

Por cierto resaltar que esta librería no tiene ninguna dependencia, no es necesario incluir otras librerías JS y tampoco provoca conflictos con frameworks como jQuery, MooTools, Angular, etc.

Primero insertar en la cabecera, antes de </head>, la llamada al archivo que descargamos (por cierto el enlace para descargar esta al final):

<script src="/javascripts/timesheet.js" type="text/javascript" />

Ahora este es un ejemplo de código de un arreglo en formato JSON con los datos que forman la linea de tiempo de la imagen que pueden ver abajo:

new Timesheet('timesheet-default', 2002, 2013, [    ['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 happened', 'dolor'],    ['01/2008', '05/2009', 'LOST Season #4', 'lorem'],    ['01/2009', '05/2009', 'LOST Season #4', 'lorem'],    ['02/2010', '05/2010', 'LOST Season #5', 'lorem'],    ['09/2008', '06/2010', 'FRINGE #1 & #2', 'ipsum']  ]);

 

timesheet js

Enlace para descargar Time Sheet JS

comment ¿Que opinas?

Artículos recientes

close

TGIF: Magikarp Jump, el nuevo y absurdo juego de Pokémon para móviles

Magikarp Jump es el nuevo juego para móviles Android y iPhone basado en el universo de Pokémon; esta “broma” de juego es genial en muchos aspectos, no obstante, también es ridiculo en otros. Magikarp Jump…

close

KFC transforma su clásica cubeta en una contador de cuentos

KFC Suppertime Stories es una apuesta de KFC en América del Sur; la cual, es encabezada por su nuevo diseño interactivo de Packaging, el cual,  transforma la clásica cubeta de KFC en una lampará cuenta…

close

Diseños de lámparas origami inspiradas en animales

OWL paperlamps es la empresa encargada del diseño y elaboración de estas geniales lámparas de origami inspiradas en diferentes animales. Cabe señalar, que estas pueden ser adquiridas la tienda de Etsy; esto claro mediante un módico…

close

Creativas campañas para crear conciencia sobre el calentamiento global

El calentamiento global es un hecho y cada vez es más evidente en todas las ciudades del mundo; inviernos más crudos y terribles sequías forman parte del día a día en las noticias a nivel…

close

Lista de estrenos en Netflix para Junio 2017

Llega el mes de Junio y diferentes series y películas llegan a la plataforma de vídeo mediante streaming por excelencia; es por eso, que el día de hoy te presentamos cuales son los estrenos que…

close

Living Lights of the Ocean, fotografías de un mundo subacuático surrealista

Living Lights of the Ocean es obra de fotografía y diseño digital que nos presenta un maravilloso paisaje neón de un mundo subacuático completemente surrealista. Un podría jurar que se trata de modelados digitales a simple…

notifications Recién publicamos
close