Cansado dos mesmos layouts insossos e tediosos dos seus posts? Gostaria de dar uma atualizada e marcar um gol de placa na hora de entreter o internauta?
Pois bem, a ferramenta certa para isso é a Storyline JS.

Northwestern University Knight Lab

É uma grande comunidade de desenvolvedores, designers e estudantes de Chicago responsável por algumas das mais interessantes ferramentas para blogs e sites de jornalismo. Promovendo um sistema de coworking entre profissionais e estudantes, a Knight Lab conseguiu prover criativas alternativas para aumentar o nível de interação entre o internauta e a página, como, por exemplo, as aplicações:

• Storyline Js;
• Juxtapose Js;
• StoryMap Js;
• Timeline Js.

São todas ferramentas bem úteis e surpreendentemente fáceis de se utilizar. Apesar de cada uma merecer sua devida atenção, a StoryLine Js será abordada de forma mais aprofundada nesta matéria com dicas de utilização e um passo-a-passo descomplicado para habilitar qualquer pessoa a usufruir um pouco das suas vantagens. No final da página ainda terá um exemplo divertido de StoryLine, perfeito para todos os amantes do Futebol. Então, daremos início .

Dando o pontapé inicial

O StoryLine Js é um programa de código aberto que tem a capacidade de ler dados dispostos em planilhas e convertê-los em gráficos de linha vistosos e interativos. São normalmente usados para contar uma história – trajetória – que pode ser resumida em números, datas e curtas informações de assuntos variados.

Além disso, é preferível utilizar o programa para apresentar informações breves, sem estender muito a explicação. Isso porque o StoryLine Js tem limite de caracteres que costuma ser de 500 para o texto corrido e 54 caracteres para os títulos. Por isso, planeje bem seu texto.

Passo 1:

Primeiramente, será necessário utilizar este link para ter acesso ao site oficial da ferramenta. Na página constarão informações gerais sobre o Storyline Js, como estágio de desenvolvimento e algumas regras de utilização. O que queremos mesmo está mais ao fim da página…

Passo 2:

Ao fim da página, haverá um resumido passo-a-passo para orientar a confecção do gráfico. No primeiro item, clique no “Google Sheets” em destaque, isso o levará diretamente para a página inicial do Planilhas Google.

Passo 3:

Feito isso, inicie um novo documento e disponha os dados escolhidos da seguinte forma:

A primeira coluna diz respeito ao tempo, ficando a cargo do leitor escolher qual é mais conveniente para o tipo de projeto desejado. A segunda diz respeito aos dados numéricos que farão a relação com os dados do tempo no gráfico. Na terceira, será necessário colocar os títulos escolhidos para os cards. Por último, temos a coluna do texto corrido, é importante lembrar do limite de caracteres informado anteriormente.

Passo 4:

Ao terminar de distribuir os dados da forma indicada, será preciso copiar o link da planilha online e inserí-lo no campo ao lado do escrito “Google Spreadsheet URL” no site oficial. Seguem duas imagens ilustrando esse processo:

Passo 5:

Inserido o link, surgirá essa opção de formatação. Aqui é onde os dados informados na planilha serão transformados no gráfico:

Nessa primeira etapa, serão configuradas as informações relacionadas ao tempo. No primeiro quadro será necessário selecionar a coluna da planilha que contém as informações sobre o tempo escolhido, e no segundo o formato de tempo desejado. Na segunda etapa será informado no quadro a coluna que contem as informações sobre os dados que farão relação com o tempo. Finalizando essa parte, iremos informar os dados dos cards. No primeiro quadro, selecione a coluna que estão dispostos os títulos, e o segundo a coluna dos textos. Para terminar clique em Create Storyline:

Passo 6:

Pronto, o projeto está feito. Será possível ver ao lado esquerdo uma prévia do gráfico:

Agora que a linha do tempo está pronta, é necessário copiar o link que está inserido em ”Embed” para a incorporar ao site. No WordPress, vá em “adicionar bloco”‘ e selecione a opção ”Pré-Formatado”. Feito isso, clique nos três pontos que aparecerão no canto direito e vá em ”Editar HTML”, e então insira o link entre os simbolos “><“. Agora, é só clicar novamente nos três pontos e selecionar ”Editar Visualmente”.

Resultado:

Nesta matéria utilizamos de exemplo de utilização do Storyline Js os dados sobre os artilheiros das ultimas 8 copas do mundo. Como dito no início, se você é um amante do futebol, irá se divertir com esse singelo projeto e se não for, use nossas dicas e deixe suas postagens ainda mais interessantes, até porque um pouco de criatividade é sempre bem-vinda na hora de entreter os internautas. Segue abaixo o nosso Storyline Js: