StoryMap JS – Histórias e seus locais

“StoryMap JS é uma ferramenta gratuita para ajudá-lo a contar histórias na web que destacam os locais de uma série de eventos”. É dessa forma que o site oficial do aplicativo se apresenta. Desenvolvido pelo grupo Knight Lab da Universidade Northwestern em Illinois nos Estados Unidos, o recurso goza de uma interface simples e amigável ao usuário iniciante, sendo uma mecanismo prático e de fácil uso para elaboração de mapas interativos, que permitem o desenvolvimento de diversos tipos de histórias e web-reportagens com foco especial nas regiões e lugares onde elas se passam.

Mas como de fato podemos usar o Story Map JS ? Veja conosco esse pequeno tutorial que ensina os primeiros passos para entender e trabalhar com a ferramenta:

1º Passo: Criando seu “Story Map”

Após acessar o site do aplicativo, você irá se deparar com o layout inicial do site, onde lá estarão algumas informações e setores, como visão global da ferramenta, exemplos de mapas criados por ela, algumas dicas, entre outros. Para nós o mais importante será o botão verde em destaque no centro da página, é a partir dele que entraremos nos recursos e na criação de mapas de fato.

Tela inicial do site

2º Passo: Associar sua conta Google

Logo depois de clicar no botão verde, você será levado para a página de edição de mapas, porém antes de começar a usar a ferramenta, deve-se antes associar sua conta do Google com o aplicativo, é a partir dessa conexão que o site irá lhe garantir permissão para usá-lo e dando ao usuário o controle dos meios de edição e criação.

Entrar com o Google

Agora com a conta do Google associada, podemos iniciar a criação de nosso mapa.


3º Passo: Criando seu primeiro mapa

A primeira coisa que iremos fazer é nomear nosso projeto, escolha um nome e clique no botão verde “Create” para criar seu primeiro mapa.

Aba que aparecerá ao entrar com o Google

Após criado, o usuário terá agora diversas opções e lugares para explorar, cada um com sua função especifica. Para facilitar iremos agora montar um lista com os principais recursos e o que cada botão faz:

Options: Local onde se edita as informações gerais do seu mapa, como fonte das letras, que tipo de mapa você usará em seu arquivo, linguagem, tamanho e compartilhamento do projeto.

+ Add Slide: Nesse botão é onde você cria novos slides para seu projeto. Por padrão o primeiro slide sempre é criado automaticamente e se diferencia dos demais por ser a “capa” do seu projeto. É possível selecioná-lo ao clicar na caixa vermelha acima da botão “+Add Slide”.

Preview: Aqui é possível visualizar como está ficando o projeto e navegar pelos slides criados.

Edit: Com essa seção selecionada é possível adicionar e editar os slides do seu projetos

Locais da lista em destaque

4º Passo: Editando seus slides

Na hora de criar seus slides tenha sempre em mente que para ser possível vincular um local específico a ele, é necessário colocar as informações deste local na aba que aparecerá no mapa após você criar o slide pela primeira vez, podem ser locais mais gerais, como países e cidades, até mais específicos como ruas os coordenadas.

Aba de localização

Existem outros três locais de edição do slide, a seção “Media” onde consegue colocar uma imagem de destaque no seu slide, colocar créditos e comentários dela, a seção “Headline” que é onde colocaremos título do slide e por último a caixa de texto, que lhe permite escrever textos, editar HTMLs, inserir links, colocar seu texto em negrito e itálico, é a região que será usada para contar sua história. Também existem opções para editar o background e adicionar marcadores específicos no seu mapa, elas estão logo abaixo da caixa de texto.

O salvamento de todas as mudanças são feitas automaticamente pelo sistema, porém existe uma opção de salvamento manual no canto superior esquerdo da página, então caso tenha encerrado de fazer seu slide e quer partir para outro, é apenas ir no botão de adicionar slides que o seu recém trabalhado será salvo sem problemas. Todos os Slides criados serão mostrados para o usuário da parte esquerda da tela, sendo possível a navegação entre eles e até exclui-los por completo.


5º Passo: Finalizando e compartilhando

Agora com tudo finalizado está na hora de compartilhar e publicar seu projeto, tanto na aba “Options” quanto na aba “Share” (canto superior direito) existem opções para que você compartilhar sua criação em diversos locais de diversas formas, mostre para todos seus trabalhos e não pare de criar histórias novas.


A seguir um exemplo de story map criado com a ferramenta:


Autores: Guilherme Soares, Lucas Romano, Vitor Rezende, Washington Santos.

Write a Comment

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