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

Diseñador crea Dadbag para quienes quieren tener pancita

Si alguna vez has deseado tener una pancita de papá suburbano quizá este producto realizado por el diseñador Albert Pukies; el cual no es más que una riñonera o bolsa de vientre que simula ser una prominente…

close

Loving Vincent: la primera película pintada a mano

Loving Vincent, es una película única en su tipo; ya que para su proceso de producción requirió más de 66,000 óleos para pintar fotograma por fotograma su historia. Esta película cuenta la historia del pintor…

close

Estrenos Netflix octubre 2017

Llega el mes de octubre y con ello nuevos estrenos en series películas como Stranger Things y Donnie Darko; las cuales se incorporará al catálogo vigente de Netflix para este décimo mes del año 2017….

close

Tipografía en alimentos por Enon Avital

El día de hoy queremos compartir con ustedes unas geniales muestras tipográficas realizadas por el diseñador Enon Avital. Esta colección ha sido realizada inspirándose en letras hebreas; esto debido a que Avital piensa que ya…

close

Desafíos para eliminar bloqueos creativos

Los temidos bloqueos creativos; son aquellos males que acosan a los diseñadores, artistas y creativos al momento de desarrollar nuevas ideas. Es por eso, que el día de hoy compartiremos una forma de eliminar aquellos…

close

Ligoteo Gamer, el Tinder para Gamers

Vagando por Internet y la Google Play nos hemos topado con una aplicación un tanto llamativa; la cual es denominada como “Ligoteo Gamer” y es desarrollada por Ligoteo Social Network. Esta aplicación es un tanto peculiar…

notifications Recién publicamos
close