Infografia Multimédia/Multimídia

InfografiaInfografiaMultimédiaMultimédia

Workshop AC/UFPWorkshop AC/UFP

MultimédiaMultimédia

Eduardo Zilles Borba Eduardo Zilles Borba –– ezb@ezb.com.br ezb@ezb.com.br

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 (ezb@ezb.com.br) Eduardo Zilles Borba (ezb@ezb.com.br) 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 (ezb@ezb.com.br) Eduardo Zilles Borba (ezb@ezb.com.br)

�� 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 (ezb@ezb.com.br) Eduardo Zilles Borba (ezb@ezb.com.br)

“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

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)

IAMULT

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

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)

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

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)

PO REA

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)

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.

SONALIZA

�� 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

�� 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…)

�� 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.

�� 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

4. Dicas para criar uma infografia4. Dicas para criar uma infografiaPRODUÇÃ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.

Eduardo Zilles BorbaEduardo Zilles Borbaezb@ezb.com.brezb@ezb.com.brwww.ezb.com.brwww.ezb.com.br

twitter.com/ezillesborbatwitter.com/ezillesborba

Infografia Multimédia/Multimídia

Education

Transcript of Infografia Multimédia/Multimídia

INFOGRAFIA - ÍNDICES DE DESEMPREGO

Infografia multimídia: possibilidades interativas de um ...

Infografia para designers.

Workshop de Infografia

ZON Multimédia Serviços de Telecomunicações e Multimédia ......ZON Multimédia – Serviços de Telecomunicações e Multimédia, SGPS, S.A. 1H13 Consolidated Management Report

129145445 INFOGRAFIA Infografia Na Era Da Multimidia

Infografia 3 2010

Infografia multimídia para apresentação de resultados de testes de usabilidade

Infografia 2013

ZON Multimédia Serviços de Telecomunicações e Multimédia ...web3.cmvm.pt/sdi2004/emitentes/docs/PCT39793.pdf · ZON Multimédia – Serviços de Telecomunicações e Multimédia,

Infografia aula 1

ZON Multimédia – Serviços de Telecomunicações e Multimédia ...

Infografia U6

Infografia: Conceito e Prática

Infografia Final

Projeto de pesquisa - UFSC...perspectiva da evolução técnica e narrativa dos produtos noticiosos hipermidiáticos, tais como slideshows, especiais multimídia, infografia online

LIVRO - JORNALISMO - Infografia - Manual de Infografia - Folha de São Paulo

Infografia · Title: Infografia Created Date: 10/20/2016 9:34:09 AM

Sistemas Multimídia - Aula 04 - O Que é Multimídia (Ambientes Multimídia e Produtos Multimídia)

Os Textos Multimídia MULTIMÍDIA Multimídia MULTIMÍDIA Tópico: Os Textos (Conceitos Básicos)