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

play_circle_outline ‘Home’ el cortometraje sobre refugiados que ha sido premiado en Cannes

CANNES es uno de los festivales más importantes en el mundo de la publicidad y de  la cinematografía; en este se dan a conocer diversas piezas artísticas en el ramo audiovisual. Black Sheep Studios ha…

close

SEGA regala sus primeros clásicos en Android y iOS

SEGA una de la compañía pioneras en el entretenimiento ofrece mediante SEGA Forever sus primeros clásicos de manera gratuita. SEGA regala sus primeros clásicos GRATIS Los juegos que estará regalando la empresa para dispositivos con sistema…

close

Prada’s paperclips, la gama alta del clip por 185 dólares (TGIF)

Otra semana que  llega a su fin y lo celebramos con una divertida historia que nos hace recordar lo pobres que somos; el día de hoy quiero compartir con ustedes un peculiar objeto que se…

close

LE Clitoris, un adorable documental animado sobre el clítoris (NSFW)

Le Clitoris es un gracioso y adorable documenta que nos explica la historia del único órgano humano dedicado al placer; este curioso vídeo que ha sido creado por Lori Malépart-Traversy ha sido premiado en diversos festivales; durante…

close

Schrodinger’s Wood, un ejemplo de ilusión óptica en el arte

Maskull Lasserre ha creado una genial escultura en madera que muestra un escenario un tanto imposible; y es que, esta obra de nombre Schrodinger’s Wood es una oda a los detalles que merece la pena apreciar….

close

Creativos accesorios de oficina para diseñadores y amantes de Pantone

Pantone se ha vuelto inmensamente grande en cuanto a publicidad directa e indirecta; esto es evidente cuando nos fijamos en la cantidad de productos, obras y diseños que ha inspirado. Desde fotografías, selecciones de colores…

notifications Recién publicamos
close