TimeLine JS: Tutorial de como usar uma linha do tempo interativa

O Knight Lab é um grupo da Northwestern University, sob licença do Massachusetts Institute of Technology (MIT). formado por designers, desenvolvedores, estudantes, jornalistas e educadores com o objetivo de produzir ferramentas interativas para o jornalismo e inovações em mídia. Story Map JS e Timeline  são algumas dessas inovações aplicadas para produção de web-reportagens e conteúdo para internet.

TimelineJS é uma ferramenta de código aberto que permite a qualquer pessoa construir cronogramas interativos e visualmente bem resolvidos.

As linhas do tempo podem ser construídas usando simplesmente uma planilha do Google, ou, para os experts o modelo JSON (JavaScript Object Notation), que podem criar linhas do tempo personalizadas, mantendo a funcionalidade principal do TimelineJS.

Essas linhas do tempo pode integrar texto com imagens, mapas, vídeos, sites, etc. Então, bora ver como funciona e como fazer a sua própria Timeline?

Passo 1:

A partir do template disponível no site oficial do Knight Lab, você irá copiar para a sua conta Google, pelo aplicativo Google Planilhas, clicando no botão “Fazer uma cópia” como mostra as imagens abaixos:

Passo 2:

Após você ter feito uma cópia para o seu Drive Google, vá completando as seções nas colunas apropriadas, por isso, é bom entender as categorias e planejar a organização da sua Timeline:

  • A primeira linha em azul representa o título da sua linha do tempo e não será necessário colocar datas associadas.
  • Year/Month/Date/Time representa a caixa para inserir respectivamente, o ano, mês, dia e hora que representa o evento
  • Em “Display Date” representa a data como você gostaria que aparecesse. Por exemplo, se você inserir a data nos títulos Ano / Mês / Data como 2006/1/1, mas quiser que a data apareça no slide como “1º de janeiro de 2006”, insira-a como tal em “Display Date“. O texto inserido na “Display Date” substituirá quaisquer datas inseridas no “Year / Month / Date”.
  • Em “Media“, você pode adicionar mapas do Google Maps, URLs [Flickr, Instagram, Spotify, Twitter, Vimeo, YouTube, Wikipedia], etc.   
  • Para agilizar o processo de adição de imagens, você pode clicar com o botão direito do mouse em uma imagem e selecionar “copiar endereço da imagem” e adicioná-lo à caixa relacionada. Certifique-se de creditar a fonte da imagem na caixa “Media Credit”.  

Passo 3:

Após ter finalizado a sua planilha, no menu arquivo, vá em “Compartilhar” e selecione publicar na web.

Em seguida, clique no botão verde “Publicar”. Quando for perguntado “Tem certeza …?”, Clique em OK. Ignore o URL que aparece no centro da janela. Basta usar o X no canto superior direito para fechar a janela.

Depois de fechar a janela, copie o URL na barra de endereço do seu navegador. Você usará isso na próxima etapa. 

Passo 4:

Agora volte para o site do Timeline JS e cole o URL da planilha na caixa “Google Spreadsheet URL“.

Passo 5:

E por fim, clique em “Preview” para ver sua linha do tempo. Nessa seção você encontrará o link e o código de incorporação para compartilhar o seu trabalho!

E veja só um exemplo de linha do tempo que nós fizemos referente ao surgimento dos Talibãs:

Write a Comment

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *