9
INFOGRAFIA NA INTERNET Alguns cases do portal G1 O portal G1 há 3 anos vem produzindo infografia. Desde o início, o desafio foi usar recursos de internet, explorar animação, interatividade, vídeos, games entre outras possibilidades que a web oferece, pensando em tudo isso a serviço do jornalismo, nunca esquecendo que as informações visuais tem de ter o mesmo rigor de apuração que é necessário em um bom texto. Histórico 01 página

1º LIDE - Leonardo Aragao

Embed Size (px)

DESCRIPTION

palestra de Leonardo Aragao, do G1, no 1º LIDE

Citation preview

Page 1: 1º LIDE - Leonardo Aragao

INFOGRAFIA NA INTERNETAlguns cases do portal G1

O portal G1 há 3 anos vem produzindo infografia. Desde o início, o desafio foi usar recursos de internet, explorar animação,interatividade, vídeos, games entre outras possibilidades que a web oferece, pensando em tudo isso a serviço do jornalismo,nunca esquecendo que as informações visuais tem de ter o mesmo rigor de apuração que é necessário em um bom texto.

Histórico

01página

Page 2: 1º LIDE - Leonardo Aragao

INFOGRAFIA NA INTERNETAlguns cases do portal G1

Esse projeto foi desenvolvido buscando, além de passar corretamente as informações do voo realizado por Santos Dumont,proporcionar uma experiência ao usuário de internet, que poderia “voar” com o 14 bis. Um trabalho extenso, que envolveumodelagem em 3d, programação, e muitos testes.

O voo do 14 bis

02página

14 Bis

Modelo 3d, texturizado e pronto para asanimações que foram criadas

+

Page 3: 1º LIDE - Leonardo Aragao

INFOGRAFIA NA INTERNETAlguns cases do portal G1

O início do trabalho ocorre com a busca de imagens, plantas, elementos que possam fornecer pistas de como era aviãoem detalhes. Neste projeto também foi necessário recorrer a referências em vídeos, que foram essenciais para detalhar amovimentação e o funcionamento do avião e seus instrumentos de navegação.

Coletando referências

03página

14 Bis

Page 4: 1º LIDE - Leonardo Aragao

INFOGRAFIA NA INTERNETAlguns cases do portal G1

04página

14 Bis

Fotografias de referência+ Modelo construido em 3d+

Page 5: 1º LIDE - Leonardo Aragao

INFOGRAFIA NA INTERNETAlguns cases do portal G1

05página

14 Bis

Veja animação:> http://www.vimeo.com/5441086 Veja animação:> http://www.vimeo.com/5479793

Abaixo um pouco do arquivo em 3d, com seus controles de animação, e também um teste de seu funcionamento na prática

Se os links não funcionarem, clique com o botão direitoem cima e copie e cole no browser com o “Select Tool”.

Page 6: 1º LIDE - Leonardo Aragao

INFOGRAFIA NA INTERNETAlguns cases do portal G1

06página

14 Bis

Antes de partir pro layout final, vários esboços são elaborados, buscando prever,antes da estética, o funcionamento e a usabilidade da peça.

+ Layout já próximo do final, com esboços prevendo como seriam as animações e oscontroles de interação do infográfico. Neste estágio também foi elaborado as animaçõesque o usuário iria controlar, movimentando o avião.

+

Layout

Page 7: 1º LIDE - Leonardo Aragao

INFOGRAFIA NA INTERNETAlguns cases do portal G1

Layout final, já funcionando, com itens de menu dividindo o conteúdo, controles deanimação finais e um medidor, que indica a distância percorrida e o tempo de voodo avião 14 bis

+

14 Bis

Page 8: 1º LIDE - Leonardo Aragao

INFOGRAFIA NA INTERNETAlguns cases do portal G1

O portal G1 há 3 anos vemproduzindo infografia. Desde o início,o desafio foi usar recursos de internet,explorar animação, interatividade,vídeos, games entre outraspossibilidades que a web oferece,pensando em tudo isso a serviço dojornalismo, nunca esquecendo queas informações visuais tem de ter omesmo rigor de apuração que énecessário em um bom texto.

Animação do voo

Veja animação:> http://www.vimeo.com/5490550

14 Bis

Se os links não funcionarem, clique com o botão direitoem cima e copie e cole no browser com o “Select Tool”.

Page 9: 1º LIDE - Leonardo Aragao

INFOGRAFIA NA INTERNETAlguns cases do portal G1

Veja o resultado final no infográfico:>http://g1.globo.com/Noticias/0,,IIF1222-5603,00.html

No próximo making of: Ponte Estaiada em São Paulo, veja link:http://g1.globo.com/Noticias/SaoPaulo/0,,MUL465174-5605,00-PONTE+DE+METROS+E+INAUGURADA+NA+ZONA+SUL.html#asa

Se os links não funcionarem, clique com o botão direitoem cima e copie e cole no browser com o “Select Tool”.