Optimiza tus imágenes gratis sin perder calidad y mejora la velocidad de tu página web: Compresor de Imágenes JPG/PNG/GIF

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

Guía para aprender a utilizar Adobe Illustrator

El pasado viernes compartimos con ustedes 33 vídeos que serían útiles como guía para principiantes sobre como aprender a usar photoshop; los cuales, en verdad son útiles si pretendes utilizarlos para incursionar en el mundo…

close

Satíricas ilustraciones sobre la realidad social por Sébastien Thibault

Hay muchos problemas en el mundo; muchos de ellos son ocasionados por personajes específicos o acciones que marcan el rumbo del planeta; las cuales, a pesar de su relevancia pueden ser plasmadas satíricamente por los…

close

Como hacer un logo en photoshop de manera fácil y rápida

Hacer un logotipo es una de las cosas más importantes para crear una identidad visual y de marca; no obstante, la manera de realizarlos puede causarnos dolor de cabeza, especialmente si no conocemos como funcionan…

close

Hiperrealista escultura de una ballena crea conciencia en las calles de París

El grupo artístico y creativo Captain Boomer ha realizado una fantástica obra para crear concia sobre el cambio climático; la cual, consta de la creación y colocación de una hiperrealista escultura de una ballena al costado del…

close

play_circle_outline Netflix presenta el primer trailer de Stranger Things 2

Strange Things es una de series aclamadas de Netflix; y la cual, tuvo su presencia en el Comic-Con de San Diego mediante la presentación de su primer tráiler. El cual, muestra el regreso de los…

close

Linkin Park presenta propuesta de logo para inmortalizar a Chester Bennington

El pasado jueves fue un día muy oscuro para los fans de Linkin Park y para el mundo de la música; esto debido, a que se encontró al vocalista Chester Bennington muerto en su casa; noticia…

notifications Recién publicamos
close