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

Netflix estrena el trailer de The Punisher junto con The Defenders, pero esta oculto

El día de hoy se estreno la esperada serie de súper héroes “The Defenders” en la cual, y justo al final de la temporada encontraras oculta una sorpresa. Se trata de un teaser trailer de…

close

15 principios de oro sobre la jerarquía visual que debes conocer

La jerarquía visual es uno de los principios básicos del diseño, no obstante, suele ser ignorada como tal en por algunos diseñadores. Lo anterior, traer como resultado un desorden visual sobre la importancia de los…

close

Pequeños robots hechos con cámaras fotográficas por James Rauff

“El arte de recirculación” es el nombre que recibe esta serie artística del artista y escrito James Rauff; el cual, ha realizado unos pequeños robots en base al reciclaje de algunas cámaras fotográficas descompuestas. Los…

close

Coloring corruptions, el resultado de dejar a un adulto con libros para colorear

La creatividad no tiene limites, no obstante, la edad y donde se aplique son variantes que pueden modificar el resultado, es por eso, que el día de hoy quiero compartir con ustedes algunas imágenes de…

close

Microsoft Office World Championship, el concurso de paqueteria Office que no creerás que existe

El Microsoft Office World Championship es una realidad, una muy curiosa que hasta el día de hoy desconocíamos; según el sitio web Gizmodo este campeonato mundial de Office se celebra anualmente con la participación de…

close

Safety Bags, bolsas de plastico que limpian los alimentos de pesticidas

  Safety Bags es una iniciativa lanzada por la multinacional Tesco y desarrollada por la agencia Cheil WW Hong Kong; esta, tiene finalidad promover el uso de las “Safety Bags”, las cuales, tienen una función muy…

notifications Recién publicamos
close