infografia multimédia/multimídia

f

InfografiaInfografiaMultimédiaMultimédia

Workshop AC/UFPWorkshop AC/UFP

MultimédiaMultimédia

Eduardo Zilles Borba Eduardo Zilles Borba –– [email protected] [email protected]

Universidade Fernando Pessoa Universidade Fernando Pessoa Agência de Comunicação da UFPAgência de Comunicação da UFP

Porto, Portugal Porto, Portugal -- 25/05/201025/05/2010

1.1. A evolução da infografia A evolução da infografia

Roteiro do workshopRoteiro do workshop

2. Conceitos de infografia multimédia2. Conceitos de infografia multimédia2. Conceitos de infografia multimédia2. Conceitos de infografia multimédia

3.3. Casos de sucessoCasos de sucesso

Workshop AC/UFP Workshop AC/UFP –– Infografia Multimédia Infografia Multimédia -- Eduardo Zilles Borba ([email protected]) Eduardo Zilles Borba ([email protected]) 2

4.4. Projecto práticoProjecto prático-- briefing, brainstorm, produção criativa, aprovação, publicaçãobriefing, brainstorm, produção criativa, aprovação, publicação-- exemplos prácticos de metodologiaexemplos prácticos de metodologia-- dicas de links para webdicas de links para web

Infografia multimédiaInfografia multimédia

1.1. IntroduçãoIntrodução

O ser humano recebe informação através O ser humano recebe informação através dos sentidos dos sentidos (Cairo, 2008)(Cairo, 2008)::

IntroduçãoIntrodução

3Workshop AC/UFP Workshop AC/UFP –– Infografia Multimédia Infografia Multimédia -- Eduardo Zilles Borba ([email protected]) Eduardo Zilles Borba ([email protected])

�� 80,0% Visão80,0% Visão�� 14,0% Audição14,0% Audição�� 3,5% Olfacto3,5% Olfacto�� 1,5% Tacto1,5% Tacto�� 1,0% Gosto/Paladar1,0% Gosto/Paladar

Dos primatas aos cibernautasDos primatas aos cibernautas

1. Evolução da infografia1. Evolução da infografia

Workshop AC/UFP Workshop AC/UFP –– Infografia Multimédia Infografia Multimédia -- Eduardo Zilles Borba ([email protected]) Eduardo Zilles Borba ([email protected])


“A infografia não somente mostra e descreve feitos, mas sim

descobre conexões, padrões não evidentes na primeira vista

que, se não fossem representados, permaneceriam

Sobre a infografia…Sobre a infografia…

1.1.Evolução da infografia Evolução da infografia


que, se não fossem representados, permaneceriam

desconhecidos para o leitor…

… a visualização da informação/infografia facilita a análise. A

dimensão estética deve ser relegada a um segundo plano, e

é uma consequência (um afeto secundário) da qualidade da

informação”. (Cairo, 2008, p.29).

PréPré--HistóriaHistória EgípciosEgípcios

Rev.Rev.ImprensaImprensa

Esquemas,Esquemas,Dados eDados e

InfoInfoJornalismoJornalismo



3000 a.C. até3000 a.C. até394 d.C394 d.C

Séc.XVSéc.XV Séc.XVI ao XXSéc.XVI ao XX Anos 80Anos 80


HistóriaHistória EgípciosEgípcios ImprensaImprensa Dados eDados eGráficosGráficos

JornalismoJornalismo

-- PinturasPinturas-- FormasFormas-- ObjectosObjectos

-- SinaisSinais-- SímbolosSímbolos-- SignosSignos

-- Prensa de GutembergPrensa de Gutemberg-- Impressão de textoImpressão de textoem Grande escala. em Grande escala.

(Ex: Bíblia).(Ex: Bíblia).

-- Da Vinci (esquemas)Da Vinci (esquemas)-- Playfair (gráficos)Playfair (gráficos)

-- Beck (metro)Beck (metro)

-- USA TodayUSA Today(complementares,(complementares,meteorologia…)meteorologia…)


19951995 –– Surge a Surge a InternetInternet (web) com novas características para(web) com novas características paraa mensagem a mensagem (Schultz, 1999).(Schultz, 1999). A comunicação desperta A comunicação desperta para um novo paradigma para um novo paradigma -- da massa e do átomo para da massa e do átomo para

Era DigitalEra Digital



para um novo paradigma para um novo paradigma -- da massa e do átomo para da massa e do átomo para o o indivíduoindivíduo e o e o digitaldigital (Negroponte, 1995; Levy, 1999). (Negroponte, 1995; Levy, 1999).

�� MultimedialidadeMultimedialidade�� InteractividadeInteractividade�� HipertextualidadeHipertextualidade�� UbiquidadeUbiquidade�� Velocidade de actualizaçãoVelocidade de actualização�� MemóriaMemória�� PersonalizaçãoPersonalização

Principais conceitos da infografia na ciberculturaPrincipais conceitos da infografia na cibercultura

2.2. Infografia MultimédiaInfografia Multimédia



Infografia online é…

� uma unidade informativa, na maioria dos casos

apresentada em sequência sucessiva, que se elabora



apresentada em sequência sucessiva, que se elabora

para publicações digitais não estritamente linguísticas,

realizada mediante elementos icônicos (estáticos ou

dinâmicos) com apoio de diversas unidades sensoriais:

vídeo, áudio, texto, foto/imagem, ilustração, animação.(Valero Sancho, 2004)




Características da infografia na Internet


1 1 -- MULTIMÉDIAMULTIMÉDIA



É a combinação, controlada por computador, É a combinação, controlada por computador, de textos, gráficos,de textos, gráficos,imagens, vídeos, áudios, animações e qualquer outro meio imagens, vídeos, áudios, animações e qualquer outro meio

pelo qual a informação possa ser representada, pelo qual a informação possa ser representada, armazenada, armazenada, transmitida e processada sob a forma digital, em que existe transmitida e processada sob a forma digital, em que existe pelo menos um tipo de media estática pelo menos um tipo de media estática (texto, gráfico, imagem) (texto, gráfico, imagem) e e

um media dinâmico um media dinâmico (vídeo, áudio, animação)(vídeo, áudio, animação). . (Gouveia, 2009)(Gouveia, 2009)


MULT

IMÉD

IAMULT

IMÉD

IA



MULT

IMÉD

IAMULT

IMÉD

IA


2 2 -- INTERACTIVIDADEINTERACTIVIDADE



ÉÉ a característica do sistema multimédia que permite ao a característica do sistema multimédia que permite ao utilizador final controlar como e quando os elementos de utilizador final controlar como e quando os elementos de

informação são apresentados. informação são apresentados. (Gouveia, 2009)(Gouveia, 2009)

Interacção entre Homem/Humano e máquina/computadorInteracção entre Homem/Humano e máquina/computador


INTER

ACTIVIDADE

INTER

ACTIVIDADE



INTER

ACTIVIDADE

INTER

ACTIVIDADE


3 3 -- HIPERTEXTUALHIPERTEXTUALÉÉ o texto em formato digital ao qual agregao texto em formato digital ao qual agrega--se outros conjuntos de se outros conjuntos de



ÉÉ o texto em formato digital ao qual agregao texto em formato digital ao qual agrega--se outros conjuntos de se outros conjuntos de informação na forma de blocos cujo acesso se dá através de informação na forma de blocos cujo acesso se dá através de

referências específicas denominadas hiperlinks. referências específicas denominadas hiperlinks. (Wikipedia.com, 2010)(Wikipedia.com, 2010)

No caso dos infográficos feitos para a web, ao passo que cadaNo caso dos infográficos feitos para a web, ao passo que cadaelemento elemento –– vídeo, foto, áudio, texto… vídeo, foto, áudio, texto… -- deve ser compreensíveldeve ser compreensívelde maneira isolada, todos têm de manter coerência entre si e de maneira isolada, todos têm de manter coerência entre si e

contribuir para uma contribuir para uma unidade comunicativa. unidade comunicativa. (Salaverría, 2001)(Salaverría, 2001)


HIPER

TEX

TUAL

HIPER

TEX

TUAL



HIPER

TEX

TUAL

HIPER

TEX

TUAL


4 4 –– UBÍQUA / GLOBALUBÍQUA / GLOBAL



CCapacidade da informação estar disponível em qualquer local apacidade da informação estar disponível em qualquer local e a qualquer momento (e a qualquer momento (sentido de omnipresençasentido de omnipresença). ).

“A Internet se entranha na pele da cultura”.“A Internet se entranha na pele da cultura”.(Kerckhove, 1995)(Kerckhove, 1995)


UBÍQUA/G

LOBAL

UBÍQUA/G

LOBAL



UBÍQUA/G

LOBAL

UBÍQUA/G

LOBAL


5 5 –– VELOCIDADE DE ACTUALIZAÇÃOVELOCIDADE DE ACTUALIZAÇÃO



Uma das principais características da mensagem na Uma das principais características da mensagem na Internet é a sua velocidade e simplicidade para Internet é a sua velocidade e simplicidade para

actualização de conteúdos (actualização de conteúdos (tempo real)tempo real)..(Virilio, 1995)(Virilio, 1995)


TEM

PO REA

LTEM

PO REA

L



TEM

PO REA

LTEM

PO REA

L


6 6 –– MEMÓRIAMEMÓRIA



A A capacidade de armazenar a informaçãocapacidade de armazenar a informação abre um abre um novo horizonte para a criação de base de dados novo horizonte para a criação de base de dados

extensas extensas –– até mesmo “infinitas”até mesmo “infinitas”.. (Negroponte, 1995)(Negroponte, 1995)




MEM

ÓRIA

MEM

ÓRIA

x


7 7 –– PERSONALIZAÇÃOPERSONALIZAÇÃO



A mensagem é A mensagem é centralizada no indivíduocentralizada no indivíduo. . Igualmente, é personalizada a Igualmente, é personalizada a EXPERIÊNCIA da pessoa EXPERIÊNCIA da pessoa

com umacom uma interface multimédia.interface multimédia.

A informação não é apenas emitida e recebida. A informação não é apenas emitida e recebida. Existe um elevado grau de Existe um elevado grau de feedbackfeedback que que

prolonga o fim da mensagem.prolonga o fim da mensagem.


PER

SONALIZA

ÇÃO

PER

SONALIZA

ÇÃO



PER

SONALIZA

ÇÃO

PER

SONALIZA

ÇÃO



�� NarrativasNarrativas

�� Linear / SequencialLinear / Sequencial �� NãoNão--linear / Relacionallinear / Relacional


�� Linear / SequencialLinear / Sequencial-- narrativa com início, meio e narrativa com início, meio e fim. O indivíduo intervem para fim. O indivíduo intervem para “avançar” a peça.“avançar” a peça.

�� AutónomoAutónomo-- infográfico independente de infográfico independente de qualquer notícia. Apresentaqualquer notícia. Apresentatoda a informação necessária.toda a informação necessária.

�� NãoNão--linear / Relacionallinear / Relacional-- narrativa livre e construída narrativa livre e construída pelo indivíduo através de pelo indivíduo através de hiperligaçõeshiperligações

�� ComplementoComplemento-- actua como um elemento para actua como um elemento para aprofundar a informação de uma aprofundar a informação de uma peça principal.peça principal.

Casos de SucessoCasos de Sucesso

3. Exemplos de infografias multimédia3. Exemplos de infografias multimédia


Casos de sucessoCasos de sucesso

3. Exemplos de infografia multimédia3. Exemplos de infografia multimédia

Estadão (Brasil)Estadão (Brasil)

-- Alta interactividadeAlta interactividade-- Boa multimedialidadeBoa multimedialidade


-- Boa multimedialidadeBoa multimedialidade

-- Relacional e espacial Relacional e espacial -- NãoNão--linearlinear-- Cartografia Cartografia (ambiental, real)(ambiental, real)

Link:http://www.estadao.com.br/brasilia50.shtm



Veja (Brasil)Veja (Brasil)

-- Alta interactividadeAlta interactividade-- Boa multimedialidadeBoa multimedialidade


-- Boa multimedialidadeBoa multimedialidade

-- Relacional Relacional -- NãoNão--linearlinear-- Cartografia Cartografia (simbólica/mapa)(simbólica/mapa)

-- Acção “antes e depois”Acção “antes e depois”

Link:http://veja.abril.com.br/complementos-

materias/mapa-flora-sp/info-popup.shtml



JN (Portugal)JN (Portugal)

-- Boa interactividadeBoa interactividade-- Baixa multimedialidadeBaixa multimedialidade


-- Baixa multimedialidadeBaixa multimedialidade

-- RelacionalRelacional-- NãoNão--linear linear -- MiniMini--site site (hiperlink para pg’s)(hiperlink para pg’s)

-- InformativoInformativo

Link:http://veja.abril.com.br/complementos-

materias/mapa-flora-sp/info-popup.shtml

Uma metodologia para desenvolver infográficos digitaisUma metodologia para desenvolver infográficos digitais

4. Dicas para criar uma infografia4. Dicas para criar uma infografia




AlteraçõesAlterações


PedidoPedidoBriefingBriefing

BrainstormBrainstormEsboçosEsboços

ProduçãoProduçãoCriativaCriativa AprovaçãoAprovação PublicaçãoPublicação

Publicar quando não há cliente. Publicar quando não há cliente. Exemplos: projecto pessoal,Exemplos: projecto pessoal,

jornal online(infog.coordenada pelo jornal online(infog.coordenada pelo editor de arte e/ou editoreditor de arte e/ou editor--chefe)chefe)



1. Pedido do cliente / Briefing1. Pedido do cliente / Briefing

�� CLIENTECLIENTE �� EDITOR / DIR.CRIATIVOEDITOR / DIR.CRIATIVO


�� CLIENTECLIENTE-- o que quer?o que quer?-- qual o objectivo?qual o objectivo?-- públicopúblico--alvo?alvo?-- qual a verba?qual a verba?-- deadlinedeadline

�� EDITOR / DIR.CRIATIVOEDITOR / DIR.CRIATIVO-- lead lead (quem, onde, quando, (quem, onde, quando, porque, quando, como…)porque, quando, como…)

-- texto ou briefing da texto ou briefing da história, facto, notícia.história, facto, notícia.-- deadline deadline (dia, semana…)(dia, semana…)

QUEM PRODUZ O CONTEÚDOQUEM PRODUZ O CONTEÚDO(TEXTO/FOTO)? CLIENTE,EQUIPA (TEXTO/FOTO)? CLIENTE,EQUIPA

DA AGÊNCIA, DESIGNER FREELANCERDA AGÊNCIA, DESIGNER FREELANCER

EQUIPE MULTIDISCIPLINAR NA EQUIPE MULTIDISCIPLINAR NA REDACÇÃO DO JORNAL (REPÓRTER, REDACÇÃO DO JORNAL (REPÓRTER,

ILUSTRADOR, FOTÓGRAFO…)ILUSTRADOR, FOTÓGRAFO…)



2. Brainstorm & Esboços2. Brainstorm & Esboços

�� Brainstorm multidisciplinar (equipa) / pesquisa e estudoBrainstorm multidisciplinar (equipa) / pesquisa e estudo


�� Brainstorm multidisciplinar (equipa) / pesquisa e estudoBrainstorm multidisciplinar (equipa) / pesquisa e estudo

�� Estipular conceito do infográfico (ideia central)Estipular conceito do infográfico (ideia central)

�� Desenhar esboços do projecto:Desenhar esboços do projecto:-- arquitectura dos conteúdosarquitectura dos conteúdos-- plano de navegação e usabilidadeplano de navegação e usabilidade



3. Produção criativa3. Produção criativa

�� Conteúdo Conteúdo (redacção, dados, índices, números…)(redacção, dados, índices, números…)


�� Conteúdo Conteúdo (redacção, dados, índices, números…)(redacção, dados, índices, números…)

�� Design Gráfico Design Gráfico (ilustração, ícones, símbolos, signos…)(ilustração, ícones, símbolos, signos…)

�� Design de Interacção Design de Interacção (hiperlinks, menu, animação, programação(hiperlinks, menu, animação, programação--action script, testes do produto digital…)action script, testes do produto digital…)



4. Aprovação4. Aprovação

�� Reunião com cliente para apresentar a peça.Reunião com cliente para apresentar a peça.


�� Reunião com cliente para apresentar a peça.Reunião com cliente para apresentar a peça.

�� Sugestões, alterações, acréscimos de conteúdos.Sugestões, alterações, acréscimos de conteúdos.

�� Algumas vezes, em casos de logotipos, podeAlgumas vezes, em casos de logotipos, pode--se se apresentar mais que uma proposta. Contudo, na apresentar mais que uma proposta. Contudo, na infografia isto não ocorre regularmente pelo elevado infografia isto não ocorre regularmente pelo elevado grau de pormenores.grau de pormenores.



5. Publicação5. Publicação

�� Após aprovado, publicar a peça multimédiaApós aprovado, publicar a peça multimédia


�� Após aprovado, publicar a peça multimédiaApós aprovado, publicar a peça multimédia(integrar ao site, gravar em CD/DVD, servidor ASP/PHP)(integrar ao site, gravar em CD/DVD, servidor ASP/PHP)

�� Testes de publicação, já na versão Testes de publicação, já na versão beta, beta, com o cliente ou com o cliente ou indivíduos neutros.indivíduos neutros.



AlteraçõesAlterações


PedidoPedidoBriefingBriefing

BrainstormBrainstormEsboçosEsboços

ProduçãoProduçãoCriativaCriativa AprovaçãoAprovação PublicaçãoPublicação

Publicar quando não há cliente. Publicar quando não há cliente. Exemplos: projecto pessoal,Exemplos: projecto pessoal,

jornal online(infog.coordenada pelo jornal online(infog.coordenada pelo editor de arte e/ou editoreditor de arte e/ou editor--chefe)chefe)



�� Exercício 1Exercício 1

�� Cliente: 1970 Viagens Cliente: 1970 Viagens (Agência de Viagens e Turismo)(Agência de Viagens e Turismo)


�� O que precisava: um incentivo para divulgar promoções O que precisava: um incentivo para divulgar promoções no site de uma forma visual e interactivano site de uma forma visual e interactiva

�� Peça: infográfico Peça: infográfico –– Mundo InteractivoMundo Interactivo

�� Meio: animação flash integrada na página inicial do site Meio: animação flash integrada na página inicial do site da 1970 Viagens através de um banner destacado com da 1970 Viagens através de um banner destacado com hiperlink para aceder ao infográfico.hiperlink para aceder ao infográfico.




ESBOÇO

ESBOÇO


4. Dicas para criar uma infografia4. Dicas para criar uma infografiaPRODUÇÃO CRIATIVA

PRODUÇÃO CRIATIVA


PRODUÇÃO CRIATIVA

PRODUÇÃO CRIATIVA


4. Dicas para criar uma infografia4. Dicas para criar uma infografiaAPROVA

DO/PUBLICADO

APROVA

DO/PUBLICADO


APROVA

DO/PUBLICADO

APROVA

DO/PUBLICADO



�� Exercício 2 (com os participantes)Exercício 2 (com os participantes)

�� Cliente: jornal diárioCliente: jornal diário


�� O que precisava: um infográfico especial sobre o Estoril O que precisava: um infográfico especial sobre o Estoril Open de Ténis. Dados a ressaltar: história, tenistas Open de Ténis. Dados a ressaltar: história, tenistas participantes e os vencedores das últimas edições.participantes e os vencedores das últimas edições.

�� Peça: infográfico Peça: infográfico –– Estoril Open de TénisEstoril Open de Ténis

�� Meio: animação flash para actuar como um complemento Meio: animação flash para actuar como um complemento da reportagem principal no site do jornal.da reportagem principal no site do jornal.



�� Dicas de links na webDicas de links na web

�� www.coolinfographics.comwww.coolinfographics.com


�� www.albertocairo.comwww.albertocairo.com

�� www.flowingdata.comwww.flowingdata.com

�� www.datavis.tumblr.comwww.datavis.tumblr.com

�� http://infographics.apa.athttp://infographics.apa.at

�� http://homer.uc3m.es/audiovisuales/miscelanea/conferencihttp://homer.uc3m.es/audiovisuales/miscelanea/conferencias/20071217_VC_Leganes.wmv as/20071217_VC_Leganes.wmv (workshop A.Cairo)(workshop A.Cairo)

Muito obrigado Muito obrigado pela participação!pela participação!

fWorkshop AC/UFP Workshop AC/UFP -- Universidade Fernando Pessoa Universidade Fernando Pessoa -- Porto, Portugal Porto, Portugal –– 25/05/2010.25/05/2010.

47

Eduardo Zilles BorbaEduardo Zilles [email protected]@ezb.com.brwww.ezb.com.brwww.ezb.com.br

twitter.com/ezillesborbatwitter.com/ezillesborba

infografia multimédia/multimídia

Education