7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. JavaScript

Los 8 Mejores Timelines JavaScript de Código Abierto Gratis

Scroll to top
Read Time: 8 mins

Spanish (Español) translation by Gustavo Ramirez (you can also view the original English article)

Una línea de tiempo de JavaScript es muy útil cuando quieres mostrar información sobre eventos en orden cronológico. Nos permiten presentar datos a nuestros usuarios de una forma visualmente agradable. Sin embargo, escribir el código necesario para mostrar una JavaScript línea de tiempo en tu sitio web puede representar mucho tiempo si comienzas desde cero.

Si quieres mostrar líneas del tiempo en tu sitio web, una librería decente de timeline JavaScript te ahorrará mucho tiempo. Por eso, creamos una lista con algunas de las mejores librerías para línea de tiempo de JavaScript de código abierto y gratis, que te ahorrarán la molestia de buscarlas tú mismo.

1. TimelineJS3

Comenzaremos nuestra lista con un timeline Javascript relativamente conocido que se llama TimelineJS3. Utilizado por muchos sitios web populares como Time, Mashable, Engadget, CNN entre otros.

Utilizar la herramienta de autor oficial es la opción más sencilla para crear una línea de tiempo de JavaScript con esta librería, que cuenta con una guía para llevarte paso a paso. Así podrás incorporar un JavaScript línea de tiempo en tu página web con tan solo agregar una línea de código.

También existe la opción de implementar líneas del tiempo en tu propio sitio web en lugar de incorporarlas. Solamente necesitas incluir los archivos CSS y JavaScript correspondientes con un poco de código. Esto te permite personalizar muchas cosas en tu timeline JavaScript. Solo asegúrate de utilizar los archivos Less de la librería para compilar tus hojas de estilo al cambiar el diseño de la línea del tiempo. Esto te ahorrará horas de escribir selectores inválidos.

También existen plugins para CMS como WordPress y Drupal que facilitan el proceso de incorporar un timeline JavaScript en esas plataformas.

2. TimelineJS

La segunda librería en nuestra lista se llama Timeline JS. Aunque su nombre es similar al TimelineJS3, se trata de proyectos totalmente distintos. Tendrás que invertir relativamente poco tiempo en esta librería para instalar y poner en funcionamiento tu línea de tiempo de JavaScript.

TimelineJS - Javascript línea de tiempoTimelineJS - Javascript línea de tiempoTimelineJS - Javascript línea de tiempo
TimelineJS - Javascript línea de tiempo

Ten en cuenta que se trata de un plugin JQuery, por lo que en caso de no estar utilizándolo, necesitarás cargar JQuery en tu sitio web. El contenido del timeline JavaScript aquí se especifica utilizando HTML en vez de JSON. El contenido para cada punto en el tiempo está envuelto en su propio elemento div, que también tiene un atributo de data- time para indicar cuándo ocurrió el evento.

Este plugin cuenta con una variedad de opciones para controlar el comportamiento del timeline Javascript. Eso incluye realizar cambios a cosas como la dirección de la línea del tiempo y la velocidad del autoplay, si es que está configurada para reproducción automática. También puedes determinar clases personalizadas que se deben agregar a distintos elementos de la línea de tiempo de JavaScript.

Todas estas opciones facilitan agregar tu propio estilo personalizado. Hay muchos ejemplos en el sitio oficial que te muestran cómo luciría con distintas opciones configuradas.

Más de 2 Millones de Temas y Plugins WordPress, Plantillas para Web e Email, UI Kits y Más

Descarga miles de temas y plugins para WordPress, plantillas web, elementos UI y mucho más con una membresía de Envato Elements. Obtén acceso ilimitado a una librería en constante crecimiento con millones de recursos creativos y de programación.

3. React Calendar Timeline 

El componente React Calendar Timeline es distinto a las primeras dos librerías, ya que no está creado para utilizarse como una herramienta que le brinda a los espectadores una descripción general de los eventos con un eje de tiempo que indica cuándo ocurrieron.

Mejor piensa en ella como un planificador de eventos o un rastreador. Por ejemplo, sería muy útil en situaciones donde administras un grupo de personas que tienen tareas asignadas y deben completarse en tiempos específicos.

Este componente de sistema open source cuenta con un enorme conjunto de funciones que te ayudan a administrar y planear distintos tipos de actividades. Los elementos que se agregan al JavaScript línea de tiempo se pueden mover o modificar de tamaño. También tienes la opción de proporcionar tu propio estilo para los elementos. Además, puedes enlazar varias líneas del tiempo, por lo que al desplazarte en una de ellas las demás se moverán en sincronía.

Otro punto importante es que puedes poner atención a distintos eventos para agregar tu propia funcionalidad, en vez de la que te ofrece el componente de manera predeterminada.

4. Vis Timeline

La librería Vis Timeline es útil para aquellos que buscan una librería para visualizar datos y crear una JavaScript línea del tiempo interactiva y gráfica en 2D totalmente personalizables.

Esta librería para timeline gratis cuenta con un gran conjunto de funciones. Puedes dividir los eventos o datos en grupos para evitar que se mezclen. Sin embargo, también tienes la opción de permitir que se combinen. También puedes moverte a través del timeline Javascript o hacer acercamientos o alejamientos para que los elementos se ajusten a la pantalla. El calendario se ajustará automáticamente y puede tener un rango de milisegundos hasta años.

Los elementos individuales pueden tener solo fecha de inicio o una combinación de fechas de inicio y fin. Existen muchas maneras de diseñar el timeline gratis que hagas. Puedes cambiar el fondo de la cuadrícula o agregar categorías a diferentes elementos de eventos para darles su propio estilo.

Este sistema open source te permite trazar eventos en una gráfica 2D con gráficos de barras o de polígono en vez de una JavaScript línea de de tiempo lineal.

5. Labella.js

Es posible que estés creando una línea de tiempo de JavaScript, donde tengas que colocar muchas etiquetas muy cerca una de la otra porque ocurrieron en un periodo corto de tiempo. Puedes indicar el tiempo en el JavaScript línea de tiempo con un punto, pero esta etiqueta contiene más información del evento que puede ocupar mucho espacio. Esto significa que hay una gran probabilidad de superposición entre las etiquetas. Por fortuna, el sistema open source Labella.js se encarga de este problema.

Una cosa que hay que tener en cuenta de Labella.js es que supone que implementaste o integraste tu propio timeline JavaScript. Sin embargo, puedes utilizar otra librería del sistema open source llamada d3kit-timeline, que cuenta con todas las funciones de Labella y al mismo tiempo implementa la funcionalidad del JavaScript línea del tiempo. Serás capaz de hacer tus propias líneas del tiempo con tan solo escribir una docena de líneas de código.

Experimenta con la demostración interactiva para descubrir cómo puedes crear tu propía JavaScript línea de tiempo repleta de etiquetas.

6. Timeline JavaScript

La librería Squarechip Timeline es una gran alternativa para aquellos que buscan un timeline gratis ligero y una implementación libre de dependencias. Esta librería se concentra en el rendimiento al renderizar la línea de tiempo de JavaScript.

Squarechip Timeline - Sistema Open SourceSquarechip Timeline - Sistema Open SourceSquarechip Timeline - Sistema Open Source
Squarechip Timeline - Sistema Open Source

Puedes crear timelines verticales y horizontales responsive. A la vez, puedes configurar muchas opciones para ajustarlas de manera que cambie las líneas de tiempo horizontales a verticales en pantallas con anchos más pequeños.

Aunque la librería está libre de dependencias, se registrará a sí misma como un plugin si jQuery está descargado en la página web. Puedes crear e inicializar una línea de tiempo de JavaScript de tres maneras: el viejo confiable vanilla JavaScript, utilizando jQuery o proporcionando atributos de datos en los elementos donde deseas mostrar el timeline gratis.

La librería cuenta con un aspecto minimalista por sí misma, por lo que puedes aplicar tu propio estilo sin mucho esfuerzo. Puedes encontrar la documentación, así como ejemplos prácticos de este sistema open source en el sitio web oficial.

7. Timeline Storyteller

La librería Timeline Storyteller es la solución que cuenta con más funciones, y es perfecta para aquellos que quieran crear un timeline JavaScript que no se limite a composiciones horizontales o verticales. Este sistema open source lo desarrolló Microsoft y cuenta con un enorme conjunto de características.

Timeline Storyteller - Línea de Tiempo de JavaScriptTimeline Storyteller - Línea de Tiempo de JavaScriptTimeline Storyteller - Línea de Tiempo de JavaScript
Timeline Storyteller - Línea de Tiempo de JavaScript

Puedes compartir los datos de tu timeline gratis en muchos formatos como CSV, JSON y hojas de cálculo de Google. También asigna información relevante a distintos eventos mediante una variedad de atributos, pero solamente se requiere el start_date, mientras los otros son opcionales.

La información en la JavaScript línea del tiempo se puede presentar en formato linear, radial, espiral o cuadrícula, así como otros diseños. También puedes especificar una escala de tiempo para ubicar un evento. Cuenta con una escala cronológica con valores absolutos, así como escalas relativas y logarítmicas. Considera visitar la galería de la librería para ver todos los diseños que puedes crear.

8. D3 Timeline

La librería D3.js es perfecta para visualizar todo tipo de información y un timeline gratis no es la excepción. Puedes utilizar la librería D3 timeline, que básicamente es una extensión de D3, para crear rápidamente un timeline JavaScript simple.

Esta librería de sistema open source es sencilla, pero ofrece una gran variedad de opciones para colocar etiquetas de eventos en el timeline. También, puedes crear fácilmente una JavaScript línea de tiempo con o sin ejes. Además, está la opción de combinar etiquetas circulares con rectangulares para trazar eventos que suceden en un punto y periodos de tiempo. Las etiquetas de eventos se puede aplicar y responder a eventos de clics.

Finalmente, puedes agregar colores personalizados a etiquetas de eventos o rotar el eje de las etiquetas si no hay suficiente espacio. Se mencionan muchos métodos en la página de archivo para personalizar la apariencia y comportamiento de esta JavaScript línea de tiempo.

Pensamientos Finales

Las timelines JavaScript tienen muchas aplicaciones prácticas, tales como presentar información cronológica a los usuarios o coordinar a los miembros de un equipo al planear un evento. Al utilizar el sistema open source de librerías JavaScript ahorrarás mucho tiempo al crear una línea del tiempo en tu sitio web.

En este artículo, vimos algunas de las librerías más populares y gratuitas para JavaScript línea de tiempo, que se integran a tu sitio web con facilidad. Además te permitirán crear líneas del tiempo llenas de multimedia como TimelineJS o algo más sencillo y responsive como la librería Squarechip Timeline.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.