TrInfografia Magical

fInfografiaInfografiaMultimdiaMultimdia

Workshop AC/UFPWorkshop AC/UFP

MultimdiaMultimdia

Eduardo Zilles Borba Eduardo Zilles Borba [email protected] [email protected] Universidade Fernando Pessoa Universidade Fernando Pessoa

Agncia de Comunicao da UFPAgncia de Comunicao da UFPPorto, Portugal Porto, Portugal -- 25/05/201025/05/2010

1.1. A evoluo da infografia A evoluo da infografia

Roteiro do workshopRoteiro do workshop

2. Conceitos de infografia multimdia2. Conceitos de infografia multimdia2. Conceitos de infografia multimdia2. Conceitos de infografia multimdia

3.3. Casos de sucessoCasos de sucesso

Workshop AC/UFP Workshop AC/UFP Infografia Multimdia Infografia Multimdia -- Eduardo Zilles Borba ([email protected]) Eduardo Zilles Borba ([email protected]) 2

4.4. Projecto prticoProjecto prtico-- briefing, brainstorm, produo criativa, aprovao, publicaobriefing, brainstorm, produo criativa, aprovao, publicao-- exemplos prcticos de metodologiaexemplos prcticos de metodologia-- dicas de links para webdicas de links para web

Infografia multimdiaInfografia multimdia

1.1. IntroduoIntroduo

O ser humano recebe informao atravs O ser humano recebe informao atravs dos sentidos dos sentidos (Cairo, 2008)(Cairo, 2008)::

IntroduoIntroduo

3Workshop AC/UFP Workshop AC/UFP Infografia Multimdia Infografia Multimdia -- Eduardo Zilles Borba ([email protected]) Eduardo Zilles Borba ([email protected])

80,0% Viso80,0% Viso 14,0% Audio14,0% Audio 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. Evoluo da infografia1. Evoluo da infografia

Workshop AC/UFP Workshop AC/UFP Infografia Multimdia Infografia Multimdia -- Eduardo Zilles Borba ([email protected]) Eduardo Zilles Borba ([email protected])


A infografia no somente mostra e descreve feitos, mas sim descobre conexes, padres no evidentes na primeira vista que, se no fossem representados, permaneceriam

Sobre a infografiaSobre a infografia

1.1.Evoluo da infografia Evoluo da infografia


que, se no fossem representados, permaneceriam desconhecidos para o leitor

a visualizao da informao/infografia facilita a anlise. A dimenso esttica deve ser relegada a um segundo plano, e uma consequncia (um afeto secundrio) da qualidade da informao. (Cairo, 2008, p.29).

PrPr--HistriaHistria EgpciosEgpcios

Rev.Rev.ImprensaImprensa

Esquemas,Esquemas,Dados eDados e

InfoInfoJornalismoJornalismo



3000 a.C. at3000 a.C. at394 d.C394 d.C

Sc.XVSc.XV Sc.XVI ao XXSc.XVI ao XX Anos 80Anos 80


HistriaHistria EgpciosEgpcios ImprensaImprensa Dados eDados eGrficosGrficos

JornalismoJornalismo

-- PinturasPinturas-- FormasFormas-- ObjectosObjectos

-- SinaisSinais-- SmbolosSmbolos-- SignosSignos

-- Prensa de GutembergPrensa de Gutemberg-- Impresso de textoImpresso de textoem Grande escala. em Grande escala.

(Ex: Bblia).(Ex: Bblia).

-- Da Vinci (esquemas)Da Vinci (esquemas)-- Playfair (grficos)Playfair (grficos)

-- Beck (metro)Beck (metro)

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


19951995 Surge a Surge a InternetInternet (web) com novas caractersticas para(web) com novas caractersticas paraa mensagem a mensagem (Schultz, 1999).(Schultz, 1999). A comunicao desperta A comunicao 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 indivduoindivduo e o e o digitaldigital (Negroponte, 1995; Levy, 1999). (Negroponte, 1995; Levy, 1999).

MultimedialidadeMultimedialidade InteractividadeInteractividade HipertextualidadeHipertextualidade UbiquidadeUbiquidade Velocidade de actualizaoVelocidade de actualizao MemriaMemria PersonalizaoPersonalizao

Principais conceitos da infografia na ciberculturaPrincipais conceitos da infografia na cibercultura

2.2. Infografia MultimdiaInfografia Multimdia



Infografia online

uma unidade informativa, na maioria dos casosapresentada em sequncia sucessiva, que se elabora



apresentada em sequncia sucessiva, que se elaborapara publicaes digitais no estritamente lingusticas,realizada mediante elementos icnicos (estticos oudinmicos) com apoio de diversas unidades sensoriais:vdeo, udio, texto, foto/imagem, ilustrao, animao.(Valero Sancho, 2004)




Caractersticas da infografia na Internet


1 1 -- MULTIMDIAMULTIMDIA



a combinao, controlada por computador, a combinao, controlada por computador, de textos, grficos,de textos, grficos,imagens, vdeos, udios, animaes e qualquer outro meio imagens, vdeos, udios, animaes e qualquer outro meio

pelo qual a informao possa ser representada, pelo qual a informao 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 esttica pelo menos um tipo de media esttica (texto, grfico, imagem) (texto, grfico, imagem) e e

um media dinmico um media dinmico (vdeo, udio, animao)(vdeo, udio, animao). . (Gouveia, 2009)(Gouveia, 2009)


M

U

L

T

I

M

D

I

A

M

U

L

T

I

M

D

I

A



M

U

L

T

I

M

D

I

A

M

U

L

T

I

M

D

I

A


2 2 -- INTERACTIVIDADEINTERACTIVIDADE



a caracterstica do sistema multimdia que permite ao a caracterstica do sistema multimdia que permite ao utilizador final controlar como e quando os elementos de utilizador final controlar como e quando os elementos de

informao so apresentados. informao so apresentados. (Gouveia, 2009)(Gouveia, 2009)

Interaco entre Homem/Humano e mquina/computadorInteraco entre Homem/Humano e mquina/computador


I

N

T

E

R

A

C

T

I

V

I

D

A

D

E

I

N

T

E

R

A

C

T

I

V

I

D

A

D

E



I

N

T

E

R

A

C

T

I

V

I

D

A

D

E

I

N

T

E

R

A

C

T

I

V

I

D

A

D

E


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 informao na forma de blocos cujo acesso se d atravs de informao na forma de blocos cujo acesso se d atravs de

referncias especficas denominadas hiperlinks. referncias especficas denominadas hiperlinks. (Wikipedia.com, 2010)(Wikipedia.com, 2010)

No caso dos infogrficos feitos para a web, ao passo que cadaNo caso dos infogrficos feitos para a web, ao passo que cadaelemento elemento vdeo, foto, udio, texto vdeo, foto, udio, texto -- deve ser compreensveldeve ser compreensvelde maneira isolada, todos tm de manter coerncia entre si e de maneira isolada, todos tm de manter coerncia entre si e

contribuir para uma contribuir para uma unidade comunicativa. unidade comunicativa. (Salaverra, 2001)(Salaverra, 2001)


H

I

P

E

R

T

E

X

T

U

A

L

H

I

P

E

R

T

E

X

T

U

A

L



H

I

P

E

R

T

E

X

T

U

A

L

H

I

P

E

R

T

E

X

T

U

A

L


4 4 UBQUA / GLOBALUBQUA / GLOBAL



CCapacidade da informao estar disponvel em qualquer local apacidade da informao estar disponvel em qualquer local e a qualquer momento (e a qualquer momento (sentido de omnipresenasentido de omnipresena). ).

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


U

B

Q

U

A

/

G

L

O

B

A

L

U

B

Q

U

A

/

G

L

O

B

A

L



U

B

Q

U

A

/

G

L

O

B

A

L

U

B

Q

U

A

/

G

L

O

B

A

L


5 5 VELOCIDADE DE ACTUALIZAOVELOCIDADE DE ACTUALIZAO



Uma das principais caractersticas da mensagem na Uma das principais caractersticas da mensagem na Internet a sua velocidade e simplicidade para Internet a sua velocidade e simplicidade para

actualizao de contedos (actualizao de contedos (tempo real)tempo real)..(Virilio, 1995)(Virilio, 1995)


T

E

M

P

O

R

E

A

L

T

E

M

P

O

R

E

A

L



T

E

M

P

O

R

E

A

L

T

E

M

P

O

R

E

A

L


6 6 MEMRIAMEMRIA



A A capacidade de armazenar a informaocapacidade de armazenar a informao abre um abre um novo horizonte para a criao de base de dados novo horizonte para a criao de base de dados

extensas extensas at mesmo infinitasat mesmo infinitas.. (Negroponte, 1995)(Negroponte, 1995)




M

E

M

R

I

A

M

E

M

R

I

A

x


7 7 PERSONALIZAOPERSONALIZAO



A mensagem A mensagem centralizada no indivduocentralizada no indivduo. . Igualmente, personalizada a Igualmente, personalizada a EXPERINCIA da pessoa EXPERINCIA da pessoa

com umacom uma interface multimdia.interface multimdia.

A informao no apenas emitida e recebida. A informao no 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.


P

E

R

S

O

N

A

L

I

Z

A

O

P

E

R

S

O

N

A

L

I

Z

A

O



P

E

R

S

O

N

A

L

I

Z

A

O

P

E

R

S

O

N

A

L

I

Z

A

O



NarrativasNarrativas

Linear / SequencialLinear / Sequencial NoNo--linear / Relacionallinear / Relacional


Linear / SequencialLinear / Sequencial-- narrativa com incio, meio e narrativa com incio, meio e fim. O indivduo intervem para fim. O indivduo intervem para avanar a pea.avanar a pea.

AutnomoAutnomo-- infogrfico independente de infogrfico independente de qualquer notcia. Apresentaqualquer notcia. Apresentatoda a informao necessria.toda a informao necessria.

NoNo--linear / Relacionallinear / Relacional-- narrativa livre e construda narrativa livre e construda pelo indivduo atravs de pelo indivduo atravs de hiperligaeshiperligaes

ComplementoComplemento-- actua como um elemento para actua como um elemento para aprofundar a informao de uma aprofundar a informao de uma pea principal.pea principal.

Casos de SucessoCasos de Sucesso

3. Exemplos de infografias multimdia3. Exemplos de infografias multimdia


Casos de sucessoCasos de sucesso

3. Exemplos de infografia multimdia3. Exemplos de infografia multimdia

Estado (Brasil)Estado (Brasil)

-- Alta interactividadeAlta interactividade-- Boa multimedialidadeBoa multimedialidade


-- Boa multimedialidadeBoa multimedialidade

-- Relacional e espacial Relacional e espacial -- NoNo--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 -- NoNo--linearlinear-- Cartografia Cartografia (simblica/mapa)(simblica/mapa)-- Aco antes e depoisAco 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-- NoNo--linear linear -- MiniMini--site site (hiperlink para pgs)(hiperlink para pgs)-- InformativoInformativo

Link:http://veja.abril.com.br/complementos-materias/mapa-flora-sp/info-popup.shtml

Uma metodologia para desenvolver infogrficos digitaisUma metodologia para desenvolver infogrficos digitais

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




AlteraesAlteraes


PedidoPedidoBriefingBriefing

BrainstormBrainstormEsboosEsboos

ProduoProduoCriativaCriativa AprovaoAprovao PublicaoPublicao

Publicar quando no h cliente. Publicar quando no 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?-- pblicopblico--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 histria, facto, notcia.histria, facto, notcia.-- deadline deadline (dia, semana)(dia, semana)

QUEM PRODUZ O CONTEDOQUEM PRODUZ O CONTEDO(TEXTO/FOTO)? CLIENTE,EQUIPA (TEXTO/FOTO)? CLIENTE,EQUIPA

DA AGNCIA, DESIGNER FREELANCERDA AGNCIA, DESIGNER FREELANCER

EQUIPE MULTIDISCIPLINAR NA EQUIPE MULTIDISCIPLINAR NA REDACO DO JORNAL (REPRTER, REDACO DO JORNAL (REPRTER,

ILUSTRADOR, FOTGRAFO)ILUSTRADOR, FOTGRAFO)



2. Brainstorm & Esboos2. Brainstorm & Esboos

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 infogrfico (ideia central)Estipular conceito do infogrfico (ideia central)

Desenhar esboos do projecto:Desenhar esboos do projecto:-- arquitectura dos contedosarquitectura dos contedos-- plano de navegao e usabilidadeplano de navegao e usabilidade



3. Produo criativa3. Produo criativa

Contedo Contedo (redaco, dados, ndices, nmeros)(redaco, dados, ndices, nmeros)


Contedo Contedo (redaco, dados, ndices, nmeros)(redaco, dados, ndices, nmeros)

Design Grfico Design Grfico (ilustrao, cones, smbolos, signos)(ilustrao, cones, smbolos, signos)

Design de Interaco Design de Interaco (hiperlinks, menu, animao, programao(hiperlinks, menu, animao, programao--action script, testes do produto digital)action script, testes do produto digital)



4. Aprovao4. Aprovao

Reunio com cliente para apresentar a pea.Reunio com cliente para apresentar a pea.


Reunio com cliente para apresentar a pea.Reunio com cliente para apresentar a pea.

Sugestes, alteraes, acrscimos de contedos.Sugestes, alteraes, acrscimos de contedos.

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 no ocorre regularmente pelo elevado infografia isto no ocorre regularmente pelo elevado grau de pormenores.grau de pormenores.



5. Publicao5. Publicao

Aps aprovado, publicar a pea multimdiaAps aprovado, publicar a pea multimdia


Aps aprovado, publicar a pea multimdiaAps aprovado, publicar a pea multimdia(integrar ao site, gravar em CD/DVD, servidor ASP/PHP)(integrar ao site, gravar em CD/DVD, servidor ASP/PHP)

Testes de publicao, j na verso Testes de publicao, j na verso beta, beta, com o cliente ou com o cliente ou indivduos neutros.indivduos neutros.



AlteraesAlteraes


PedidoPedidoBriefingBriefing

BrainstormBrainstormEsboosEsboos

ProduoProduoCriativaCriativa AprovaoAprovao PublicaoPublicao

Publicar quando no h cliente. Publicar quando no 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)



Exerccio 1Exerccio 1

Cliente: 1970 Viagens Cliente: 1970 Viagens (Agncia de Viagens e Turismo)(Agncia de Viagens e Turismo)


O que precisava: um incentivo para divulgar promoes O que precisava: um incentivo para divulgar promoes no site de uma forma visual e interactivano site de uma forma visual e interactiva

Pea: infogrfico Pea: infogrfico Mundo InteractivoMundo Interactivo

Meio: animao flash integrada na pgina inicial do site Meio: animao flash integrada na pgina inicial do site da 1970 Viagens atravs de um banner destacado com da 1970 Viagens atravs de um banner destacado com hiperlink para aceder ao infogrfico.hiperlink para aceder ao infogrfico.




E

S

B

O

O

E

S

B

O

O


4. Dicas para criar uma infografia4. Dicas para criar uma infografiaP

R

O

D

U

O

C

R

I

A

T

I

V

A

P

R

O

D

U

O

C

R

I

A

T

I

V

A


P

R

O

D

U

O

C

R

I

A

T

I

V

A

P

R

O

D

U

O

C

R

I

A

T

I

V

A


4. Dicas para criar uma infografia4. Dicas para criar uma infografiaA

P

R

O

V

A

D

O

/

P

U

B

L

I

C

A

D

O

A

P

R

O

V

A

D

O

/

P

U

B

L

I

C

A

D

O


A

P

R

O

V

A

D

O

/

P

U

B

L

I

C

A

D

O

A

P

R

O

V

A

D

O

/

P

U

B

L

I

C

A

D

O



Exerccio 2 (com os participantes)Exerccio 2 (com os participantes)

Cliente: jornal dirioCliente: jornal dirio


O que precisava: um infogrfico especial sobre o Estoril O que precisava: um infogrfico especial sobre o Estoril Open de Tnis. Dados a ressaltar: histria, tenistas Open de Tnis. Dados a ressaltar: histria, tenistas participantes e os vencedores das ltimas edies.participantes e os vencedores das ltimas edies.

Pea: infogrfico Pea: infogrfico Estoril Open de TnisEstoril Open de Tnis

Meio: animao flash para actuar como um complemento Meio: animao 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 participao!pela participao!

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

Documents

TrInfografia Magical