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

México intenta regular la industria del videojuego con su propia clasificación

La industria de los videojuegos ha tenido un crecimiento exponencial en todo el mundo; especialmente en territorio mexicano, donde la industria ha pasado de 11 mil 278 millones de pesos a 22 mil 852 millones tan…

close

play_circle_outline Campaña reconoce la capacidad creativa con humor

Few Can Do What You Do, es el nuevo lema de la campaña de Format una plataforma portafolio para creativos; esta campaña bajo el lema “Pocos pueden hacer lo que tu” reconoce la capacidad de…

close

play_circle_outline Como crear efecto de doble exposición en photoshop en menos de 1 minuto

El photoshop es de las herramientas imprescindibles en el catalogo de programas de un diseñador o creativo; no obstante, muchos no tenemos la pericia y conocimiento de todo lo que podemos lograr con el. Es…

close

Lista de estrenos en Netflix para Mayo 2017

Netflix continua incrementado su catalogo de películas y series cada mes; siendo el turno del mes de Mayo del 2017 donde llegarán nuevas temporadas de series como House of Cards y Unbreakable Kimmy Schmidt; así como…

close

play_circle_outline Mira el nuevo y emocionante trailer final de Cars 3

El día de ayer se dio a conocer el trailer final de la nueva entrega de la película de Disney y Pixar Cars 3; esta nueva entrega de la saga nos relata la ultima carrera…

close

Ilustraciones tipográficas inspiradas en el reino animal

El diseñador británico conocido como Marcus Reed ha creado una genial colección de ilustraciones tipográficas inspiradas en el reino animal; estas ilustraciones nos muestran a diversos animales desde el Cocodrilo hasta la Cebra con sus…

notifications Recién publicamos
close