terremoto no Jap̣o Р1 ano

O Uol tem uma equipe que trabalha com especiais multimídia interativos, e recentemente publicou um trabalho que chamou a atenção por utilizar a linguagem HTML5  – o que há de mais novo na tecnologia web.

Foi o especial 1 ano do terremoto no Japão, com material recolhido da cobertura e uma edição adicional, com fotos, vídeos, texto.

O projeto usa um tipo de navegação que mimetiza os tablets, uma espécie de “navegação em E”, uma vez que tem um eixo vertical, e muitos eixos horizontais. Em alguns momentos, o eixo horizontal é grande demais, e sem uma marcação mais adequada, a usabilidade fica prejudicada. De qualquer forma, é uma das poucas experiências brasileiras com o formato. O G1 tinha experimentado algo semelhante antes, num especial sobre o Corinthians.

Abaixo, Cíntia Baio, produtora conta um pouco dos bastidores de como foi pensado e feito o especial.

 

O nosso objetivo era tentar contar qual é o retrato do Japão um ano após o terremoto com uma linguagem diferente, que valorizasse vídeos e imagens, que foram muito fortes durante toda a cobertura do ano passado. Depois de uma reunião com designers e programadores, um deles sugeriu fazer em html 5, com um formato diferente dos infográficos que já tínhamos como padrão. Um dos pontos que contou bastante para a decisão foi o planejamento antecipado e um conteúdo frio, facilitando o trabalho de apuração, layout e programação.
A partir daí, os jornalistas do projeto (éramos em 3) decidiram quais seriam os itens abordados e qual seria a ordem e começamos o trabalho de apuração, escolhendo fotos e vídeos que relembrassem o tema. Um deles, que é editor-assistente de Inter e quem deu a ideia de fazer uma cobertura especial para o tema, foi até o Japão para visitar os locais atingidos e mostrar como estava sendo a reconstrução.
Para a equipe, criar um projeto assim foi importante no processo de integração de diferentes áreas, já que tivemos a participação de programador, designer, jornalistas, técnicos de vídeo desde a criação até a execução do projeto. É uma maneira diferente da redação trabalhar e do jornalista pensar de uma maneira diferente em como apresentar o conteúdo.

 

Duelo das misses

Jogo criado pelo UOL na cobertura especial de Miss Brasil
por Cintia Baio
A cobertura de concursos de misses é algo tradicional no UOL e acontece desde 2003. Todos os anos, a editoria de Tabloide acompanha os eventos do tipo e produz conteúdo em texto, vídeo, foto e ferramentas interativas — como o “Monte sua Miss ideal”, que permite juntar partes do rosto de diferentes candidatas e criar a miss perfeita.

Em 2011, o portal decidiu replicar o famoso jogo do “Super Trunfo” na cobertura especial de Miss Brasil. Seguindo as regras do jogo real, a ideia era apresentar as candidatas e, ao mesmo tempo, divertir o leitor. Obviamente, cada uma das misses representaria uma carta. O coringa (carta trunfo) seria a vencedora do concurso de 2010, uma vez que ela possui todas as atribuições que a fizeram vencer o concurso.

A primeira dúvida foi decidir o que usar como itens de disputa nas cartas. Dados do Estado que cada uma representa? Notas dadas pelo editor do UOL Tabloide? Notas a atributos como simpatia, beleza podiam ser interessantes, mas acabariam gerando discussões por serem subjetivas demais.

Assim, ficou decidido que atributos físicos seriam os itens. O internauta deveria escolher um deles (cintura, busto, quadril e simpatia) e venceria quem tivesse o maior. No caso da cintura, menor (claro!). O único subjetivo seria “simpatia”. A nota foi dada pelo editor do UOL Tabloide, que passou um dia todo com as candidatas.

Primeiro layout
Depois de definido como o jogo seria feito, o designer começou a fazer o desenho usando Photoshop e Ilustrator. A ideia era ter uma tela inicial, que abrigasse o resumo do jogo, regras e a possibilidade de ver todas as cartas. O visual deveria combinar com as imagens das misses e ter uma navegação simples. Nessa parte, foram 5 dias de trabalho.

O resultado mostrou que o jogo seria muito comum e sem muitas diferenças em relação a outros modelos de Super Trunfo já feitos. A partir daí, foi decidido criar vídeozinhos das cartas, em um esquema “Harry Potter”, para dar mais diversão e movimento ao jogo.

A possibilidade de gravar cada uma das misses para a produção dos vídeos só foi confirmada pouco mais de uma semana antes da publicação (mesmo a decisão ter sido tomada dois meses antes). As misses se reuniram em um hotel em Angra dos Reis (SP) uma semana antes do evento e a reportagem teria apenas um dia para, além de fazer os vídeos para o jogo, gravar para outras matérias e produzir mais conteúdo para reportagens e álbum de fotos.

Além de não saber se a reportagem teria tempo hábil para capturar as imagens, a equipe de vídeo tinha um desafio técnico: as imagens seriam gravadas dentro de um quarto de hotel, com um cromaqui, e não era possível saber com antecedência se haveria ou não luz suficiente no local.

Por conta de problemas técnicos também, só foi possível gravar as imagens com meio corpo. Filmar o corpo todo ficou impossível por conta do espaço disponível, que não dava conta de um cromaqui maior e de comportar mais equipamentos de iluminação.

Apuração dos dados
Conseguir as medidas das misses foi um desafio inesperado. A ideia inicial era entrar em contato com a organização do concurso e pedir as informações. No entanto, a assessoria de imprensa respondeu que não poderia fornecer os dados por uma decisão do concurso, que acredita que quesitos como simpatia e inteligência são mais determinantes na escolha da miss do que medidas físicas.

A saída foi pesquisar o telefone das assessoras de todas as misses, ligar e pedir os dados. O trabalho foi feito por um jornalista, que estava focado na cobertura, e levou, aproximadamente, dois dias para terminar.

A nota para o quesito simpatia foi dada pelo editor do UOL Tabloide, que já acompanhou vários concursos e passou um dia inteiro com as misses. A “metodologia” usada para a nota foi especificada na sessão de ajuda do jogo.

Produção dos vídeos
Após a confirmação de que era possível gravar e a luz era suficiente, dois técnicos fizeram as imagens, com o cuidado de que o movimento fosse rápido, começando e terminando da mesma maneira para garantir um looping correto no jogo — ou seja, se a miss começasse o vídeo com a mão na cintura, deveria terminar assim.

Os vídeos foram editados em dois dias usando After Efects. Basicamente, o fundo de cada um foi recortado e exportado para ser usado com o background do infográfico. A opção foi salvá-los com uma resolução mais baixa para garantir que mais pessoas pudessem vê-los, por conta da velocidade de banda de cada um. A decisão fez com que as imagens perdessem resolução.

Programação
A programação do jogo levou 25 dias para ser feita, usando Flash e Flash Builder, com efeitos 3D. Segundo o programador, Rodrigo França, um das preocupações é se ele ficaria lento, já que carregava 27 pequenos vídeos e usuários com internet de apenas 1MB talvez não conseguissem abrir.

Abaixo, designer e programador contam um pouco da experiência de montar o Duelo das Misses:

Hugo Luigi, designer

1. Qual programa vc usou para desenhar o jogo?
Adobe Illustrator e Photoshop
2. Quanto tempo levou para fazer?
Foram três dias para as primeiras telas e mais uns dois para ajustes finais depois que o layout foi apresentado
3. O que você achou mais complicado de fazer?
Manter a essência das Misses dentro de um jogo de cartas
4. O que você achou mais legal no info?
Poder conhecer melhor as candidatas, além de vê-las em movimento. Gostei muito do ‘tchauzinho’ delas
5. O que você achou do resultado?
Ficou bem legal. O efeito 3d que o França usou no flash deu a cara de jogo que tanto queriamos.

Rodrigo França, desenvolvedor

1. Qual programa vc usou para programar? Flash + Flash Builder

2. Quanto tempo levou para fazer?
25 dias (5 semanas)

3. O que você achou mais complicado de fazer?
A lógica do jogo é bastante complexa. Minha maior dificuldade foi entender todas as regras do jogo físico e depois aplicar no virtual.

4. O que você achou mais legal no info?
Os vídeos das misses integrados ao uso de 3D dentro do flash.

5. O que você achou do resultado?
Achei o resultado bem acima do esperado. O jogo corria o risco de ficar super pesado, mas na última semana do projeto consegui otimizá-lo alcançando um ótimo desempenho.

 

Este texto é um trabalho para a disciplina design informacional, da pós-graduação 2011 na PUC-SP.

As infografias brasileiras sobre a tragédia no Japão

Primeiro o terremoto, depois o tsunami. Como se não bastasse, o risco de contaminação nuclear também vira preocupação para os japoneses. No jornalismo, a explicação para eventos dessa grandeza são quase sempre feitas por meio de infografias. Afinal,

é melhor mostrar em um mapa a área de contaminação radioativa de um lugar do que falar, apenas e genericamente, “um raio de 30 km”. Praticamente todos os sites de notícia brasileiros usaram algum tipo infografia para mostrar o tamanho do problema enfrentado pelo Japão. Vejamos quem fez o que:

Folha.com


O site traz uma imagem feita por computador da usina nuclear de Fukushima Daiichi. Nela aparecem uns círculos vermelhos em cima de cada reator. Quando o você passa o mouse em cima, ele te dá a informação sobre cada um. Não sou muito fã do conteúdo principal estar em MouseOver (o mouse sobre o item). Imagina se fosse no jornal impresso: cada texto correspondente é pequeno o suficiente para estar visível, num box, sem necessidade de clique ou passar mouse.

A outra arte que a Folha.com fez (logo abaixo na matéria) sobre o acidente é mais didática, seguindo a linha do passo-a-passo. A navegação peca já no início, com o 1 e 2 na primeira aba. Tem uma seta logo ali, que te faz crer que levará (como deveria) para o segundo item. Porém, isso não acontece. Para navegar, só clicando nos itens. Mesmo assim, é uma infografia que oferece uma explicação simples e direta para o perigo das usinas.

iG

O iG foi quem mais produziu infografias sobre o tema. Até o momento, foram oito.

A mais simples é uma imagem mostrando como funciona o sistema de alerta de tsunami. É basicamente uma arte de impresso, sem nenhum diferencial para o online.

A infografia sobre como funciona uma usina nuclear também foi bem modesta, apenas uma ilustração explicativa. O mesmo para uma sobre como se forma um tsunami. Mas nesta última, pelo menos, usa-se a possibilidade de animação e interação com clique.

O trabalho sobre os danos na usina nuclear se assemelha muito ao material sendo publicado lá fora, usando mapas para mostrar a área atingida. A imagem de satélite funciona bem melhor que uma arte, pois dá para ver o estado em que ficaram os reatores após o tsunami.

A do círculo de fogo é interessante por mostrar pontos com os locais dos 12 terremotos mais intensos já registrados no mundo. Notem que destes, somente 2 não estão no que é chamado círculo de fogo. Eu só colocaria o ano e número de mortos visível no box da esquerda. E uma questão: por que este do Japão aparece com o número 4, mas o texto diz ser o sétimo mais forte da história?

Este mostra um mapa do Google e as cidades atingidas por terremotos e tsunamis. Ao clicar em uma das cidades da lista ou nos pontos, abre uma caixa com opções de fotos, informações e links. Simples, porém não dá para saber quais cidades sofreram mais se não clicar em algumas delas e descobrir sozinho, o que torna a navegação pouco informativa.

A dos prédios resistentes a terremotos é simples, mas eficiente. Uma animação mostra como um prédio se comporta em uma situação de tremor e um texto do lado explica. Básico e direto.

Uma que explica como ocorrem os terremotos é antiga, mas foi atualizada com os maiores abalos. Didática.

Estadão

Apesar de não ter feito o mais bonito ou extravagante infográfico, o Estadão fez o mais completo sobre o acidente nuclear do Japão.

É o único a reunir informações sobre contaminação, sobre as localizações das usinas japonesas e o funcionamento da usina de Fukushima e seu atual problema. Aliás, detalhe para o níveis de acidentes, que coloca em escala com outros do passado.

G1

O G1 tinha um histórico bom de infografias em seu começo, mas hoje parece ter perdido o fôlego (inclusive, a página de infografias não é atualizada desde dezembro). A única arte que achei no site é estática, de um mapa mostrando os pontos dos locais atingidos e as placas tectônicas. Por que o G1 não tem outros infográficos?

R7 e Uol

Ambos estão usando muitos vídeos de infografias feitas pela AFP, como esta do R7 . De material próprio, somente o Uol, que fez um trabalho de mapeamento das cidades, parecido com o do iG, mas com uma navegação mais agradável, deixando um espaço na lateral direito somente para as fotos e texto dos locais atingidos.

Outros materias próprios não foram tão eficientes, como este mapa de países que receberam alerta de tsunami. Poderia muito bem ser somente um mapa pintado dentro de uma matéria, não uma infografia animada com mouseover.

Este outro é mais interessante, mostrando como funciona um reator, mapeando as usinas e os reatores que estão com problema em Fukushima. Na parte de usinas nucleares dá vontade de clicar em uma que está marcada como Estado de Emergência (Fukushima 2) -porém, não é clicável…

MAIS: O site 10,000 words – where journalism and technology meet fez um post com os melhores infográficos para entender a crise no Japão. Vale a pena.