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

The Truth is Hard, la nueva campaña del NY Times contra Trump

El New York Times, el periódico impreso de mayor importancia en el mundo ha lanzado una campaña contra Trump y sus “hechos alternativos“; esta campaña denominada The Truth is Hard que se une a la…

close

GIGS.2.GO, un ejemplo de diseño sustentable para memorias USB

GIGS.2.GO, es una idea muy creativa para tener memorias USB siempre a la mano; este genial ejemplo de diseño sustentable es una genial idea para aquellos que buscamos siempre ser amigables con el planeta. Fabricado…

close

Hermosas fotografías de paisajes nocturnos por Simon Waldran

La fotografía nocturna nos permite ver angulo nuevo de los paisajes que conocemos; esto debido a que en la naturaleza los contrastes de luces y ambiente cambian demasiado dependiendo de la hora. Es por eso,…

close

Mockup Photoshop animado de iPhone gratis

Excelente Mockup Photoshop animado de iPhone para descargar gratis y utilizar para presentar tu proyecto, esta perfecto para presentar junto a un portafolio digital o web, no es para After Effects, todo es para generar ya…

close

Netflix Beers, el creativo diseño de cervezas inspirado las series de Netflix

Netflix Beer, es un proyecto realizado por la diseñadora gráfica Razan Wehbi; en la cual crea un genial branding de cervezas para la empresa Netflix que siempre esta en busca de expandir su negocio. Es…

close

Geniales ilustraciones minimalistas con motivo del descubrimiento de la NASA

La artista Amanda J. Smith ha realizado unos carteles para conmemorar el descubrimiento del sistema planetario TRAPPIST-1; estas ilustraciones que han sido presentadas por la misma NASA son un intento para que nos demos una idea de…

notifications Recién publicamos
close