Timeline JS

TimelineJS es una herramienta de código abierto que permite crear  líneas de tiempo visualmente atractivos e interactivos y está disponible en 40 idiomas. Se pueden agregar medios de comunicación de diferentes fuentes y tiene soporte para: Twitter, Flickr, Google Maps, YouTube, Vimeo, Parra, Dailymotion, Wikipedia, SoundCloud y y otros mas.

El sitio oficial del proyecto es: http://timeline.verite.co/

Los resultados que se obtienen con esta herramienta es bastante bueno aqui unos ejemplos:

Como incluir Timeline Js En un sitio web

Incluir Timeline JS desde google spreadsheets

Existen diversas formas de adjuntar Timeline Js en un sitio web, la mas sencilla es utilizando google spreadsheets para guardar los datos aqui el ejemplo del sitio web oficial. Se tiene que crear de acuerdo a la plantilla que proveen en el sitio web

templatespreadsheets

Luego hay que hacer publico el documento en la web

publics the web

y al final utilizar el enlace para crear el timeline y mediante un iframe colocarlo en la pagina web.

step3

 

 

Incluir Timeline JS desde el repositorio de Github

En el repositorio oficial de Github podemos descargar el codigo fuente de Timeline JS https://github.com/VeriteCo/TimelineJS
y de ahi ubicarlo en nuestro sitio web. a la derecha hay un boton para bajarlo en .zip

download zip

timelinejsgithub

En uno de los ejemplos podemos apreciar que existen diversas fuentes de datos para crear el timeline como puede ser google spreadsheet (igual que el ejemplo anterior), a traves de jquery, a traves de Json y JsonP.

En el ejemplo con google spreadsheets tenemos:

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Ejemplo Timeline</title>
 <meta charset="utf-8">
 <meta name="description" content="TimelineJS example">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-touch-fullscreen" content="yes">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 <!-- Style-->
 <style>
 html, body {
 height:100%;
 padding: 0px;
 margin: 0px;
 }
 </style>
 <!-- HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 </head>
</html>
<body>
 <!-- BEGIN Timeline Embed -->
 <div id="timeline-embed"></div>
 <script type="text/javascript">
 var timeline_config = {
 width: "100%",
 height: "100%",
 source: 'https://docs.google.com/spreadsheet/pub?key=0Agl_Dv6iEbDadHdKcHlHcTB5bzhvbF9iTWwyMmJHdkE&amp;output=html'
 }
 </script>
 <script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script>
 <!-- END Timeline Embed-->
</body>

y nos genera lo siguiente:

timelinegoogle

Para crear un timeline que utilize Json se utiliza el siguiente

<script type="text/javascript">
 var timeline_config = {
 width: "100%",
 height: "100%",
 source: 'example_json.json'
 }
 </script>

Utilizando como source una cadena Json. El formato para esta cadena Json es el siguiente

{
 "timeline":
 {
 "headline":"Sh*t People Say",
 "type":"default",
 "text":"People say stuff",
 "startDate":"2012,1,26",
 "date": [
 {
 "startDate":"2011,12,12",
 "endDate":"2012,1,27",
 "headline":"Vine",
 "text":"<p>Vine Test</p>",
 "asset":
 {
 "media":"https://vine.co/v/b55LOA1dgJU",
 "credit":"",
 "caption":""
 }
 },
 {
 "startDate":"2012,1,26",
 "endDate":"2012,1,27",
 "headline":"Sh*t Politicians Say",
 "text":"<p>In true political fashion, his character rattles off common jargon heard from people running for office.</p>",
 "asset":
 {
 "media":"http://youtu.be/u4XpeU9erbg",
 "credit":"",
 "caption":""
 }
 },
 {
 "startDate":"2012,1,10",
 "headline":"Sh*t Nobody Says",
 "text":"<p>Have you ever heard someone say “can I burn a copy of your Nickelback CD?” or “my Bazooka gum still has flavor!” Nobody says that.</p>",
 "asset":
 {
 "media":"http://youtu.be/f-x8t0JOnVw",
 "credit":"",
 "caption":""
 }
 },
 {
 "startDate":"2012,1,26",
 "headline":"Sh*t Chicagoans Say",
 "text":"",
 "asset":
 {
 "media":"http://youtu.be/Ofy5gNkKGOo",
 "credit":"",
 "caption":""
 }
 },
 {
 "startDate":"2011,12,12",
 "headline":"Sh*t Girls Say",
 "text":"",
 "asset":
 {
 "media":"http://youtu.be/u-yLGIH7W9Y",
 "credit":"",
 "caption":"Writers & Creators: Kyle Humphrey & Graydon Sheppard"
 }
 },
 {
 "startDate":"2012,1,4",
 "headline":"Sh*t Broke People Say",
 "text":"",
 "asset":
 {
 "media":"http://youtu.be/zyyalkHjSjo",
 "credit":"",
 "caption":""
 }
 },

 {
 "startDate":"2012,1,11",
 "headline":"Sh*t Old People Say About Computers",
 "text":"",
 "asset":
 {
 "media":"http://youtu.be/HRmc5uuoUzA",
 "credit":"",
 "caption":""
 }
 },
 {
 "startDate":"2012,1,18",
 "headline":"Sh*t New Yorkers Say",
 "text":"",
 "asset":
 {
 "media":"http://youtu.be/yRvJylbSg7o",
 "credit":"",
 "caption":"Directed and Edited by Matt Mayer, Produced by Seth Keim, Written by Eliot Glazer. Featuring Eliot and Ilana Glazer, who are siblings, not married."
 }
 }
 ]
 }
}

Generara lo siguiente:

timelinejson

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s