WebjornaIismo

Do desktop aos dispositivos mveis

CONTEXTO
A evoluo das tecnologias digitais influencia a adequao da prtica
jornalstica e torna mais complexa a produo e distribuio de
informaes para os indivduos.
O jornalismo tende a acompanhar o surgimento de novos suportes, como
aconteceu com o rdio, a televiso e o computador.
O jornalismo ganha maior complexidade no momento em que as
tecnologias mveis e as redes de alta velocidade passam a fazer parte
do cotidiano das pessoas e so identificadas como local de consumir
fatos jornalsticos.
As principais caractersticas a serem consideradas so a ubiquidade ,
que a possibilidade de estar em vrios lugares ao mesmo tempo; a
portabiIidade , que permite o transporte facilitado do aparelho; e a
mobilidade, que garante o acesso ao contedo em movimento.
CENRIOS CONVERGENTES:
CULTURA DA MOBILIDADE E JORNALISMO DIGITAL
Mobilidade abrange a cultura do mundo contemporneo na qual grande parte das
pessoas sente a necessidade de estar conectada a maior parte do tempo.
Lemos (2009) acredita que a cultura da mobilidade no uma novidade e ela no
nasce com os dispositivos portteis digitais e as redes sem fio, uma vez que a vida
social est baseada no deslocamento, no nomadismo e na errncia

Com a internet, houve a quebra da questo de vinculao do saber a espaos
especficos, como bibliotecas. Ainda era preciso, contudo, o deslocamento a um ponto
fsico de acesso. Agora, com os dispositivos mveis, o acesso a informao
descentralizado. As atividades sociais no esto mais vinculadas aos lugares
(PELLANDA, 2009).
Lemos (2005, p. 2) ressalta que a computao mvel e as tecnologias nmades como
ele denomina os celulares, notebooks e etc. marcam a fase da comunicao
ubqua, pervasiva e senciente, insistindo na questo da mobilidade. A ubiquidade faz
referncia possibilidade de estar em diferentes locais ao mesmo tempo; a
computao pervasiva se caracteriza pela introduo de chips em equipamentos que
passam a trocar informaes; e a sencincia refere-se possibilidade de interconexo
dos computadores e objetos, por meio de sensores, que se reconhecem de maneira
autnoma e trocam informaes
CARACTERSTICAS DO JORNALISMO DIGITAL
Palcios (2004) estabelece sete pontos que definem o jornalismo
na web:
MuItimidiaIidade ou convergncia
Interatividade
HipertextuaIidade
PersonaIizao
Memria
Instantaneidade do acesso
AtuaIizao contnua do produto informativo

FASES OU GERAES DO JORNALISMO DIGITAL (BARBOSA, 2007)
Primeira gerao: (fase da transposio), o momento em que os produtos fornecidos na
internet no passam de reprodues do contedo dos jornais impressos.
Segunda gerao: (fase da metfora), com o aperfeioamento da estrutura tcnica da internet,
comeam a existir tentativas de explorar as caractersticas da rede, mesmo ainda se espelhando
no modelo impresso. As publicaes para web comeam a utilizar links, com chamadas para fatos
relacionados; e-mail, para comunicao entre veculo e leitor; hipertextos; e surgem as sees de
"ltimas notcias.
Terceira gerao: (fase da expIorao), marcada pelo desenvolvimento de produtos especficos
para a web, que ultrapassam a ideia de transposio do jornal impresso para o website. Dessa
forma, so criados sites jornalsticos pensados para o novo meio. Os produtos jornalsticos
apresentam recursos multimdia, com sons, vdeos e animaes; recursos de interatividade, como
chats e fruns de discusses; opes de personalizao do contedo de acordo com os
interesses do leitor.
Quarta gerao: (fase da base de dados), na qual o jornalismo passa pela adaptao a uma
nova possibilidade, que configura a apropriao das bases de dados: uma base tecnolgica
ampliada; acesso maior por meio de conexes banda larga; disseminao de plataformas mveis;
equipes especializadas; uso expandido de base de dados, algoritmos, linguagens de
programao, produtos diferenciados criados e mantidos de modo automatizado; sites dinmicos,
narrativas multimdias; aplicao de novos mtodos para gerar visualizaes diferenciadas para
os contedos jornalsticos.
TIPOS DE JORNALISMO
MieIniczuk (2003)
JORNALISMO ONLINE
(HALL, 2001; DE WOLK, 2001),
WEBJORNALISMO
(CANAVLHAS, 2001; 2004;
MELNCZUK, 2003)
CIBERJORNALISMO
(DAZ NOC & SALAVERRA, 2003;
SALAVERRA, 2005)
JORNALISMO
CONTEXTUALIZADO
(PAVLK, 2001; 2005)
PRODUTO JORNALSTICO E SUA RELAO COM O USURIO
(Lemos, 1997; Mielniczuk, 1998)
a) Usurio/leitor/interator e mquina;
b) Usurio/leitor/interator com a prpria publicao, atravs do hipertexto;
c) Usurio/leitor/interator com outras pessoas - seja autor ou outros
leitores
Devemos entender estas reIao para fundamentarmos a
usabiIidade do produto/interface/suporte webjornaIstico
WEBJORNALISMO EM DESKTOPS
a) TEXTO LINEAR aquele em que a leitura continuada e seguida.
Ex.: leitura de um livro, de um jornal, de uma revista.
b) TEXTO NO LINEAR aquele que faz uso do hipertexto como
ferramenta de associao de idias.
Ex.: os hiperlinks dentro de um texto no ciberespao.
COMO SE L NAS MDIAS DIGITAIS?
a) Leitores escaneadores:
leitura no-linear por todos os elementos da pgina;
b) Leitores metdicos:
ocorre de cima para baixo.
O leitor escaneia uma seo especfica e depois
aprofunda sua leitura entre as camadas do hipertexto
MOVIMENTO DE LEITURA NA TELA DO COMPUTADOR
Devemos entender o comportamento dos leitores/ usurios
Tecnologia do EyeTrack
MAPA DE CALOR (HEAT MAP)
A cor Iaranja mostra a rea mais vista; a azuI, a menos vista
Trs caminhos de Ieitura / focagem visuaI no corpo do Ieiaute
Mapa de caIor (heat map)
A cor Iaranja mostra a rea mais vista; a azuI, a menos vista
Mapa de caIor (heat map)
A cor Iaranja mostra a rea mais vista; a azuI, a menos vista
JORNALISMO NO CONTEXTO DESKTOP
AGNCIAS DE NOTCIAS
PORTAIS DE NOTCIAS E ENTRETENIMENTO
WEBJORNAIS
ELEMENTOS COMPOSITIVOS DO JORNAL IMPRESSO
!
Texto - o chamado "corpo de texto (matrias, colunas, artigos, editoriais, cartas etc.).
Vinheta - mini-ttulos que marcam um tema ou assunto recorrente ou em destaque; podem
incluir mini-ilustraes e geralmente vm acima do ttulo da matria ou no alto da pgina.
TtuIo - desde a manchete, que fica na primeira pgina, at os ttulos menores de artigos.
So subdivididos em:
subttuIo - (suti, linha-fina ou linha de apoio) colocado abaixo do ttulo principal,
complementa a informao do ttulo e instigam leitura do texto
antettuIo - (chapu ou cartola) colocado acima do ttulo principal, complementando a
informao do ttulo e instigam leitura do texto
interttuIo ou quebras - colocado no meio do texto, para dividi-lo em sees e facilitar a
leitura
oIho - colocado no meio da massa de texto, entre colunas, para ressaltar trechos e
substituir quebras; so muito utilizados em entrevistas.
Foto - fotografias, que em jornal e revista vm sempre acompanhadas de legenda
descritiva e do crdito para o fotgrafo.
Arte - o que se chama de arte em diagramao so imagens produzidas para ilustrar ou
complementar visualmente a informao do texto. Podem ser:
Infogrfico - que inclui mapas, grficos estatsticos, seqenciais e esquemas visuais;
Charge - desenho geralmente satrico com personagens do noticirio, sem ter que
necessariamente seguir opinio expressas em matrias relacionadas no jornal;
IIustrao - todo tipo de desenho ou pintura que pode acompanhar um texto jornalstico.
A ilustrao pode ser uma verso ilustrativa do texto ou uma viso complementar ao texto,
usando uma linguagem pictrica.
Box ou caixa - um box um espao graficamente delimitado que normalmente inclui um
texto explicativo ou sobre assunto relacionado matria principal.
Fio - existe para separar elementos que, por algum motivo, podem ser confundidos.
CabeaIho e Rodap - marca o topo e a base da pgina, respectivamente, incluindo
marcas bsicas como nome do veculo, editoria, data, nmero da edio e nmero da
pgina; quando usado na primeira pgina, o cabealho inclui ainda a logomarca do jornal
em destaque, preo e alguns nomes de chefia da equipe (presidente, diretor, editor-chefe).
Anncio - espao de publicidade, nico elemento de contedo no-editorial da
diagramao, produzido pela equipe comercial.
CoIunagem - a distribuio do texto em colunas verticais de tamanho regular, espaadas
e vlidas para encaixar os elementos. Atualmente, o padro em jornais standard a
diviso em 6 colunas, mas o uso de 8 colunas j foi predominante.
Cor - uso de cores e matizes em jornalismo, que confere sentido e modifica a mensagem,
muitas vezes sutilmente; at meados do sculo XX, os jornais de grande circulao no
utilizavam impresso a cores, dependendo da escala de cinzas para matizar seus
preenchimentos.
Espaamento - entrelineamento, entre colunas e entre cada elemento grfico.
Fontes tipogrficas - A escolha e o uso das fontes nos textos influem na maneira como o
leitor apreende os textos, atravs da legibilidade, dimenso e carter das fontes.
ELEMENTOS COMPOSITIVOS COMUNS AO WEBJORNAL
TtuIo dos cadernos: temas que compem as sees do jornal
Vinheta - mini-ttulos que marcam um tema ou assunto recorrente ou em
destaque
AntettuIo (chapu ou cartola) fixado acima do ttulo principal,
complementando a informao do ttulo e instigam leitura do texto
TtuIo - desde a manchete, que fica na primeira pgina, at os ttulos
menores de artigos. So subdivididos em:
Texto - o chamado "corpo de texto
SubttuIo (suti, linha-fina ou linha de apoio) colocado abaixo do
ttulo principal, complementa a informao do ttulo e instigam leitura do
texto
InterttuIo ou quebras - colocado no meio do texto, para dividi-lo em
sees e facilitar a leitura
Infogrfico - inclui mapas, grficos estatsticos, seqenciais e esquemas
visuais;
Fotografia - apresentadas em slide show e acompanhadas de legenda
descritiva e do crdito para o fotgrafo.
Vdeos: composies com at 3 trs minutos
Interao: redes sociais de interao
!"#$%&%'#'(
!"#$%&' $)* +",-$.,* &* /."0,"%
1233456 ', $,$78.', +8"9"8"):
* +,-./*.01 ';<"=.>*
23 405423 ?'%?.,',
2 603,.- ",?*%"7>"0 1$,' &" 0.,=*,
+*8* 8')+"8 * $%.9'8).&*&" &'
="@='5A
REDAO
TtuIo dos cadernos, Vinhetas e AntettuIos: 1 (uma) palavra
TtuIos: entre 3 (trs) a 5 (cinco) palavras em casos ESPECAS
at 7 (sete) palavras (no so considerados artigos ou preposies)
1) Usar fontes no-serifadas
2) No use as mesmas palavras iniciais no ttulo e na chamada.
3) Voc tem 4 palavras para ir direto ao ponto, portanto use
4 palavras diferentes.
5) Evite repetir qualquer palavra do ttulo na chamada,
exceto para uma ou duas palavras-chave.
SubttuIo: pargrafo composto com uma mdia de 100 (cem) a
140 (cento e quarenta) caracteres
REDAO
Textos
Gomes (1999) ajustar a rgua do editor de texto de 2,5 a 12,5 cm
(16,5 cm na tela). Para isso, sugerimos pargrafos de textos
compostos por at 20 linhas, com uma media de 200 a 250
palavras, subdivididas em pargrafos com no mximo 5 ou 6 linhas
com cerca de 40 a 70 caracteres por linha.
Para ampliar ainda mais a legibilidade cada pargrafo deve ser
separado por espacejamento duplo e descrever uma ideia, exceto
quando o tema tratado justificar a juno de outros assuntos.
Para textos com mais de vinte linhas aplicar os interttulos
REDAO DE CONTEDOS PARA MDIAS DIGITAIS
WEBWRITER: Profissional que escreve para mdias digitais
WEBWRITING: escreve hipertextos, mas tambm relaciona
imagens, sons, vdeos, infogrficos, etc. a hipermdia
LIDE: o qu? quem?, como?, quando? onde?, por qu?
Foco nas mdias sociais
Adio de softwares de interao;
Desenvolvimento de interface hipermdia para cada suporte
especfico: desktops, celulares e tablets;
Empregar atributos de usabilidade no desenho das interfaces
(NELSEN, 2007)
PROCESSO DE ELABORAO DA NOTCIA ON-LINE
Pauta: temas para a confeco de matrias
Apurao: Reunio de fatos relacionados aos assuntos
conhecimento obre o assunto
Checagem: verificao dos fatos !" $%&%
Fontes: verificao dos fatos nas fontes oficiais, cientficas
gerar credibilidade
Redao
Edio
!"#$%"&' ")*'#+"&,
-./010 1./ 2 345.6/278. 3/9.6:24:0 0 ;3<2 1./ 2;
345.6/27=0; >0 29.3.? @ 4AB0C >2 936D/3>0 ;06E >05343>.
90C. :2/24F. >. :0G:. 0 2 :0/E:312 04B.CB3>2?

)AB0C HE;31.: o LexLo em uma s pglna com esLruLura
llnear.
IJ )AB0C: LexLo llnear dlvldldo LemaLlcamenLe em uma
s pglna. uso de lnLerLlLulos. ode-se usar llnks
lnLernos.
KJ )AB0C: LexLo llnear dlvldldo em subLemas que
aparecem em vrlas pglnas da web.
DA PIRMIDE INVERTIDA PIRMIDE HORIZONTAL
Primeiro pargrafo o lead (= do ingls, liderar, conduzir)
Segundo pargrafo ampliao do lead
Terceiro pargrafo contextualizao
Quarto pargrafo material secundrio ou menos importante
Capta mais facilmente a ateno do leitor - na web, o leitor no costuma
rolar a tela, e portanto, no l at o final da pgina.
Permite que o leitor interrompa a leitura sem ter que chegar ao final do
texto
PIRMIDE HORIZONTAL OU DEITADA
Canavilhas (2007)
Texto Iinear - construo pura
e simpIes do texto no formato
da Pirmide Invertida
Texto Iinear dividido em temas,
na mesma pgina
Diviso do texto em subtemas,
no formato de interttuIos
LkLMLC
Suprema Corte de Iust|a, asf|x|ada pe|o engarrafamento de processos

Cs 23 maglsLrados receberam, s no ano passado, 11.291 processos enLre
anulaes, revlses, exLradles, confllLos de compeLncla, demandas a
embalxadas, corregedorlas, peLles de llberdade ou de progresso de pena,
lmpedlmenLos ou recusas, Lrocas de radlcao e aes de LuLela cauLelar.

LsLa e a radlografla do congesLlonamenLo de processos na Suprema CorLe:
- 1em um atraso de c|nco anos na an||se dos processos.
- kecebeu em 1999 um LoLal de 4.881 aes de LuLela cauLelar. P pendnclas na
anllse de 70 sollclLaes de exLradlo. LnLraram na vara enal duranLe 1999
4.790 processos, na vara 1rabalhlsLa, 3.721 e na vara Clvel, 2.780. A cada semana,
recebe em medla mals 90 processos.
- D|spe de do|s mag|strados aux|||ares, um advogado asslsLenLe e um auxlllar
[udlclal para cada um dos maglsLrados, para aglllzar sua gesLo. orem, suas
[ornadas de Lrabalho se esLendem de 12 a 13 horas, lncluslve nos sbados e
domlngos.
- Apresenta o ma|or congest|onamento na vara enal e a Clvll.

(ve[a o exemplo compleLo no cap.3 Como escrever para web)
Tcnica da estratificao ou
reveIao progressiva
Diviso no linear do texto em
subtemas, de tamanhos
diferentes, em pginas
diferentes, interligados pelo
hiperIink. o leitor que
decide qual caminho a ser
percorrido.
Erros na titulao
! #$%&'() '(*+()
! ,*-(./0123) .343%560)7
!" $%&'( )* +%,-%."
/" 0 1-(2-13% 4%5 6(,-% 31 78(98:251.
!"!#$%&
'() + ,-.-/0-1 2134 567(-0 564 -0(8961 3 ,03,618:;31<= > ,-.-/0-1? 5-16
@-A- ,-.-/0-1 564,61(-1= B/8(3 03,3(8:;31 C3 ,-.-/0-1 76 (D(E.6? .87@- F87-
3 .3-C=

Culllermo (2008) sugere duas formas para crlar LlLulos:

G6C6 HI o LlLulo e pargrafo oferecem a mesma lnformao de modo
suLllmenLe dlferenLe, mas com alguns elemenLos adlclonals.
Lx:
!D(E.6I Cmara aprova pro[eLo de lel que faclllLa a lmporLao de remedlos
menos caros.
$3-C 2HJ ,-0K90-F6<I A Cmara voLou, no lnlclo da manh de sexLa-felra, a
aprovao de uma medlda que Lornarla mals fcll para os amerlcanos
lmporLar remedlos conLrolados de balxo preo do Canad e da Luropa.
!"!#$%&
'()( +, dlferencla-se LlpograflcamenLe o LlLulo, reLlra-se a llnha
flna e a chamada. LvlLam-se as repeLles. nesLe caso, o LlLulo [
funclona como parLe do lead.

Lx:
-./01/.2 3.241 )( 567689(:,
8enuncla dlreLor da nASA, Sean
&1;8<)2 3.241 )( 5=> ?2.@;.23(:,
Sua salda vem aps Lrs anos a frenLe da agncla espaclal norLe-
amerlcana, marcados pelo acldenLe da nave espaclal Columbla,
em 2003.
!"#$%&'
)* +,+-.* / 0* 1*23* 4* +/5+* 6
lnlcle a frase (ou pargrafo) com palavras porLadoras de lnformao ou
37.78279:;701<*. Lembre-se do padro de lelLura em (e que a
esquerda da Lela flcam a malor parLe dos ponLos de aLeno).

)* +,+-.*:
ara Lrazer as lnformaes mals lmporLanLes para a esquerda, voc
pode:
AdoLar a voz passlva.
vlolar a ordem de su[elLo, verbo, ob[eLo dlreLo/lndlreLo, adverblo.
usar os dols ponLos. Lles expressam a relao causa-efelLo,
concluso, resumo.
lnlclar a frase com numeros.
LvlLe lnlclar com arLlgos.
!"!#$%&'
!"#$%&'(
$)*+,-.* /01 23
45647 8* 9)1321)*
:,0+)132;<)2

*+"(,-"./"
"acote ser |anado
8* +10 +0; mes"

!"#$ & '('")&
*+ ,-./*+
/*'$0*+ $
'0+.+ *&1+2
/*3&04+56$27
892$01$ :"$
*& $;7 /22&
*<&
+=&*'$=$7
!"#$%&'
)* +*,-* .* /01/*2
Mlnlmlze a ponLuao. C excesso de vlrgulas cansa e dlmlnul
o Lempo de lelLura. 8aclonallze as ldelas em frases menores.
CorLe as repeLles.
use os lnLerLlLulos para LexLos com mals de 20 llnhas.
8ompa a unlformldade usando marcadores. L marque
palavras-chave para a compreenso do assunLo.
alavras que no funclonam para comear LlLulos e
pargrafos: arLlgo e expresses como alem dlsso, a
saber...
Se for usar clfras slmples (aLe 4 numeros), subsLlLua as
palavras por numeros.


JORNALISMO MVEL
Jornalismo mvel: uso de plataformas mveis para produo e consumo de
informaes
Est inserido na quarta gerao do jornalismo digital, e utiliza a base de dados
para criar novos mecanismos de estrutura e atualizao de notcias.
A grande difuso de aparelhos mveis (celulares e tablets) propicia o
desenvolvimento dessa forma de fazer jornalismo. .Tendncia: todos os jornais
desenvolvam "jornais de bolso.
Alm de ligaes -> multimdia, internet, apps, cmeras, etc.
Touchscreen: 4 tela (cinema, tv, computador)
Convergncia com outros meios (impresso, rdio e eletrnico)
Verses mobiles: browsers (Safari, nternet Explorer, Windows Mobile, etc.)
Veiculao: SMS, RSS, websites, aplicativos, revistas digitais, vdeos,
fotografias, infogrficos, etc.
JORNALISMO MVEL EM APLICATIVOS
ProbIemas: telas pequenas, pginas no adaptadas, downloads lentos
Propostas: criar contedo prprio, adequado ergonomia de cada
dispositivo, sistema operacional e nicho de consumidor
Contedo: hipertexto, fotografia e vdeo
iPhone iPad
O GIobo Notcias
JornaI de Notcias
Dirio de Notcias
CNN
BBC
Sky News
BBC News
F1 News
Discovery News
The Guardian
Fox News
DaiIy News (UtiIitrio)
Notcias de TeconIogia (UtiIitrio)
TeIevisa Notcias for iPad
G1
EmoI Notcias
FoIha
BBC News
News of the WorId
The Sun
The Guardian Eyewitness
Sky Sport News
Sky News for iPad
No CeIuIar
nfografia no webjornalismo
Novos formatos
Novas visualizaes: a era da infoesttica
A interatividade nas infografias em base
de dados
Qualquer notcia pode virar uma
visualizao/infografia

Trajetria da
A imagem grfica sempre esteve presente
na histria da imprensa.
Uso de fotografias
Mapas com rotas de guerras
Temos os Protoinfogrficos formas
incipientes de produo da infografia
Primeiro infogrfico publicado no The Times, em 1806
Considerado o primeiro mapa meteorolgico a ser veiculado em um jornal. The
Times, 1875
O primeiro infogrfico publicado na imprensa. Daily Post, em 1740
lnfografia publicada no Pennsylvania Gazzete, em 1754
Primeira infografia publicada num peridico portugus em 1723, no Gazzeta de
Lisboa Ocidental. Fonte: Susana Ribeiro.
lnfogrficos incipientes publicados no Estado no incio do sculo XX
Os infogrficos so:
So teis para explicar informaes
complexas de compreender apenas com o
texto em si.
Ex.:
Como entender a bolsa de valores?
A crise econmica?
A clonagem humana?
O projeto genoma? A gripe suna?
Os infogrficos
Nascem com a funo de facilitar a
compreenso dos fatos, aes,
acontecimentos da atualidade, que
acompanha ou substitui o texto.
Acima de tudo, um infografista um
jornalista que pensa visualmente.
A sintaxe da linguagem visual - Donis A Dondis
Design para quem nao e desiger Robin Willians
Dcada de 1980: O Dia, Folha de So Paulo primeiros
a usar a infografia.
A reboque das reformas grficas
Centradas na metodologia do Design
Revistas Superinteressante e Mundo Estranho:
prestgios, prmios e investimentos na rea
USA Today: principal influenciador
Sistematizao da infografia: uso de
cores, textos curtos e grficos como
narrativa visual;
Marco para o jornalismo moderno
Valorizao da imagem como discurso
jornalstico
!
"O dinamismo estava na imagem, no s nos
novos padres das pginas, mas,
principalmente, no uso da narrativa visual, o
recurso que nos permite atingir a maior
aproximao possvel da sensao de
movimento num veculo impresso
(MORAES, 1998)
Macintosh, da Apple, em 1984;
Desenvolvimento de programas de
editorao eletrnica, paginao e
tratamento na imagem Photoshop -;
Criao do departamento de arte nos
jornais

Guerra do Golfo, em 1991!

A mdia explora os relatos visuais para a
transmisso da informao
Necessidade de "ver o que acontecia
naquela regio
Crescimento da importncia da imagem
para o jornalismo visual
"As infografias se estabeleceram na imprensa
ocidental como uma ferramenta de trabalho
mais, e j habitual desde ento, como um
renascimento ou potencial gnero narrativo
em pleno campo do jornalismo visual impresso,
to pouco desenvolvido at ento.
(De Pablos, 1991)
Primeiramente, surge como uma
transposio do impresso para o virtual;
Ganha imagens em movimento, 3D,
multimidialidade e interatividade;
Agrega as potencialidades do ambiente
Atentados 11 de setembro, em 2001, EUA.

http://noticias.terra.com.br/mundo/interna/0,,Ol1131861-El294,00.html
http://www.elpais.com/fotogalerias/popup_animacion.html?xref=20021107elpepuint_1
http://www.elmundo.es/especiales/2002/09/internacional/11s/im1.html

No ciberespao, eram necessrias tcnicas e aplicativos

avanados que pudessem favorecer uma produo
no mais esttica, mas com elementos dinmicos e
ferramentas apropriadas para que a infografia gerasse
imagens em movimento e animaes, que simulassem um
cenrio ancorado nas potencialidades da hipermdia.

Surge o aplicativo Flash.

Banda Larga
Propriedades da infografia na web
lnformativa (o qu, quem, quando, como, onde e por qu);
Significativa (assunto chave, familiaridade, identificao,
atualidade);
Funcional (exera funo quela informao),
Esttica (movimento simblico, movimento gif, originalidade);
Compreensvel (visibilidade, clareza, didtica);
lcnica (abstrao, figurao plana, fotografia);
Tipogrfica e verbal (adio das propriedade: som, ttulo,
crdito, texto explicativo, rtulo) e Concordncia.
Na era da convergncia, a infografia um dos
elementos que mais tem explorado as
possibilidades de da
narrativa visual.
Desafios? no s tecnolgicos, mas sobretudo
e de
http://revistaepoca.globo.com/Revista/Epoca/0,,EMl129261-17445,00-BEM+MAlS+QUE+UM+CAFEZlNHO.html

http://www.marca.com/deporte/futbol/mundial/sudafrica-2010/calendario.html
http://globoesporte.globo.com/futebol/copa-do-mundo/noticia/2010/05/veja-curiosidades-e-evolucao-das-bolas-utilizadas-em-copas-do-mundo.html

http://www.nytimes.com/interactive/2008/08/01/sports/20080802_TORCH_GRAPHlC.html

http://www.youtube.com/watch?v=_sFPwEwzV8Q&feature=related
O mais importante
PENSAR VlSUALMENTE!
Tipos de lnfogrficos
Tipos de lnfogrficos
Tipos de lnfogrficos
Tipos de lnfogrficos

Fotografia e Vdeo no JornaIismo DigitaI




















COMPOSIO DE VDEOS PARA A WEB
! O uso de vdeos est diretamente relacionado ao seu udio (reproduo em telas
pequenas);
! Devem iniciar sua reproduo um segundo depois do acionamento do boto play
(tocar);
! Narrativa acompanhada por legendas ou ser fornecido texto em sinopse;
! O contedo deve conter poucos movimentos e mudana de cmera;
! Tempo de durao de dois at trs minutos;
! Vdeos com mais de trs minutos devem ser substitudos por seqncias de
imagens animadas (slide show) ou em diversos segmentos com legendas para
identificar o assunto principal de cada sequncia;
! O carregamento do arquivo (buffer) deve ser realizado no incio da exibio do
vdeo;
! Evitar imagens pixelizadas ou com outros meios de compactao que interfiram na
leitura.
TCNICAS DE COMPOSIO DE VDEOS DIGITAIS
a) Enquadramento de plano conjunto ao detalhe, com luz natural ou laterais suaves;
b) Ambiente silencioso e uso de microfone externo;
c) Planos de fundo monocromticos;
d) Cortes secos com encadeamento dinmico (com menos de cinco segundos);
e) Frequncia de udio (11.025 KHz, 8-bit mono);
f) As cores usadas devem ter uma categorias prximas ou em gradao;
g) Primar por iluminao neutra;
h) Evitar conflito de iluminao entre claro e escuro;
i) Narrao pausada;
j) Roupas e plano de fundo em cores lisas - evite as texturas elementos decorativos,
plantas, quadros, listras e quadriculados;
k) Rtulos ou legendas devem ser inseridos sobre a pgina web e no durante as
cenas dos vdeos.
(LYNCH E HORTON, 2002), (AVILA , 2004) e (LINDSTROM, 1995)
!"#$%!&!
http://olhardigital.uol.com.br/produtos/central_de_videos/os_celulares_causam_cancer_e_na_duvida_como_se_prevenir #|0|0|1|9
ENQUADRAMENTO
Plano conjunto: para cenas externas com movimento em plano de fundo.
http://olhardigital.uol.com.br/jovem/central_de_videos/que-tal-jogar-um-game-com-realidade-aumentada/14765
PLANOS DE FUNDO MONOCROMTICOS
O uso do enquadramento de plano mdio ao detalhe, com luz natural ou laterais suaves.
http://olhardigital.uol.com.br//negocios/central_de_videos/trend-makers-comercio-digital/10776
ENQUADRAMENTO EM PLANO PRXIMO ENQUADRAMENTO EM PLANO MDIO
http://video.globo.com/Videos/Player/Entretenimento/0,,GIM1526825-7822-
MARCIOGARCIACONTASEUSEGREDOPARAMANTEROCASAMENTOFELIZ,00.html
ENQUADRAMENTO EM PLANO PRXIMO ENQUADRAMENTO EM PLANO CONJUNTO
http://video.globo.com/Videos/Player/Noticias/0,,GIM1527373-7823-FRUSTACOESNAOSUPERADASPODEMCAUSARDOENCAS,00.htm
ADICO DE PUBLICIDADE
http://g1.globo.com/videos/minas-gerais/v/policia-aIirma-que-quatro-dos-14-onibus-queimados-tem-relacao-a-acao-de-criminosos-presos/1528668/#/todos
20os20vC3ADdeos/page/1
ADICO DE PUBLICIDADE
ENQUADRAMENTO EM MDIO
http://video.globo.com/Videos/Player/Esportes/0,,GIM1528672-7824
PETKOVICFALASOBREEMOCAODESUAULTIMAPARTIDAPELOFLAMENGO,00.html
FICHA DE VDEO
Titulo: Base de pesquisa COMDA.
Formato: Windows Media Player.
Durao: 2m 30 segs.
Tamanho: 3 MB.
Sinopse: Reportagem sobre a base de pesquisa COMiDA histrico, integrantes, produes acadmicas e
eventos. nclui entrevista com os Professores. Adriano Gomes e Taciana Burgos
AS IMAGENS NO JORNALISMO DIGITAL
Nos desenhos de pginas web as
imagens devem ampliar a comunicabilidade da
interface, j que devem estabelecer relaes
semnticas entre os elementos de hipermdia,
como hipertextos virtuais, cones, leiaute e
hiperlinks. Os atributos de usabilidade ampliam
a concatenao das imagens com os outros
elementos de hipermdia e contribuem para a
transmidiatizao de contedos, ampliao de
informaes e ilustrao de assuntos em
notcias digitais. Os atributos de usabilidade
para imagem envolvem:
O thumbnail um recurso de agrupamento,
indexao e acesso imagens que colabora
para a comunicabilidade e esttica do leiaute
quando h a necessidade de veiculao de
muitas imagens. Ele organiza as imagens em
verses reduzidas em slides ou slide shows,
que devem ser inseridos aps a pgina inicial
do stio e quando acessadas permitir
visualizao na mesma janela (Figura 1).
Figura 1: Aplicao do atributo thumbnails
Fonte: www.virginia.edu/blandy/thumbn
No Jornalismo Digital o nmero de imagens, seu tamanho e posicionamento diante do pargrafo
de hipertexto determina o tempo de carregamento do stio virtual e sua concatenao semntica.
Assim, a sua aplicao no deve ocorrer de forma isolada ou aleatria, mas sim, de forma estratgica
do lado esquerdo do pargrafo de hipertexto , com resoluo entre 72dpi e 100dpi, pois integrar o
seu significado ao hipertexto virtual correspondente, alm de contribuir para o carregamento da
interface. (MCCLURG-GENEVESE, 2005).
A PUBLICAO DE IMAGENS E SEUS FORMATOS
! GF (Graphic nterchance Format): formato ideal para publicar fontes, grficos e imagens
animadas com at 256 cores. O GF preserva a transparncia em imagens de cor indexadas;
! JPEG (Joint Photographic Experts Group) o padro de compresso de imagens de alta
definio que permite reduzir at 90% do tamanho da imagem original, sem comprometer sua
qualidade. O formato mantm o fundo da imagem na cor branca, alm de ser inadequado para
grficos, pois destaca rudos nas superfcies de tom contnuo (chapado);
! PNG (Portable Network Graphics): formato recomendado pela W3C para imagens em interfaces
de hipermdia como substituto para o formato GF. Ele proporciona uma maior gama de
profundidade de cores, alta compresso e fundos de imagem transparentes;
! TFF (Tagged mage File Format)! formato de imagens flexvel para todos os programas de
edio vetorial, de mapa de bits e de webdesign. Admite imagens na escala CMYK, RGB, Lab,
de cor indexada e em escala de cinza, com ou sem transparncia (MCCLURG-GENEVESE,
2005).
ATRIBUTOS DE USABILIDADE PARA APLICAO DE IMAGENS
(MCCLURG-GENEVESE, 2005; NELSEN 2007; CARRON, 2008)
1-Apresentar relao semntica com o contedo abordado;
2-Acompanhar legendas;
3-Formato disponvel em GF, JPEG, PNG ou TFF;
4-Eliminao imagens como plano de fundo;
5- Manter legibilidade entre as imagens em primeiro plano e a cor do leiaute;
6-Adicionar marcadores ALT;
7-Nmero de imagens na pgina no pode comprometer o carregamento da pgina;
8-Evitar o uso de imagens como cones;
9-Devem ampliar o significado do texto;
10-Alinhamento esquerda;
11-No devem companhar sons;
12-Resoluo entre 72dpi a 100dpi;
13- Aplicar thumbnails para coletnea de imagens;
14-Aplicar slide ou slide show para facilitar a visualizao;
15-Evitar a aplicao de imagens como plano de fundo para garantir a legibilidade de hipertextos e
hiperlinks, como para acelerar o carregamento da pgina;
16- Manter o equilbrio entre o contraste das imagens em primeiro plano e a cor do leiaute para gerar
profundidade e valorizar a informao mais importante
IMAGENS E FOTOGRAFIAS

A quantidade de elementos grficos nas pginas web
deve ser minimizada devido ao tempo de download. Os
elementos grficos gratuitos simplesmente precisam
desaparecer, inclusive todos os casos de textos com
renderizao de imagens (com exceo de legendas to
intimamente integradas a um grfico profissional que
precisam ser parte do arquivo de imagem propriamente
dito). Mesmo assim, os usurios realmente querem ver
fotos dos produtos que esto comprando, pois no
podem toc-los e senti-los. Em uma pgina biogrfica,
tambm melhor incluir uma foto da pessoa ou texto
que se concentra em um indivduo. Vale lembrar: "uma
imagem vale mil palavras.
A maneira de resolver a tenso entre essas duas
diretrizes de design aproveitar os recursos do
hipertexto da web. As pginas de nvel mais elevado
devem minimizar o nmero de ilustraes, pois o
usurio ainda no indicou um interesse concreto em um
objeto individual que precisa ser exibido. Em seguida,
medida que o usurio segue os links para pginas mais
especficas, possvel adicionar as imagens.
REDUO DE IMAGENS
A forma tradicional de produzir
pequenas verses de imagens criar
thumbnails em um programa grfico ao
usar o comando redimensionar .
nfelizmente, a escala reduz tanto a imagem
que as ilustraes com muitos detalhes se
perdem e ficam muito apinhadas para ter
algum significado. O recorte preserva esses
detalhes internos ao visor, mas custa de
perder o contexto da imagem como um
todo. Para tal, devemos usar a combinao
entre recorte e escala tcnica de reduo
da imagem com aumento da reIevncia.
Para obter um thumbnail que seja 10%
da imagem original, recorte primeira a
imagem 32% do tamanho original e escale o
resultado para 32%. A imagem ser 0,32 x
0,32 = 0,1% da imagem original.
A reduo de imagens com aumento
da relevncia resultam em imagens que
preservam tanto o contexto quanto o
detalhe, mesmo nos tamanhos muito
pequenos. Nesses exemplos, metade da
reduo foi obtida atravs do recorte da
imagem e a outra metade foi obtida atravs
da escala (NELSEN, 2007).

As duas abordagens
tradicionais para diminuir as
imagens so o recorte e a
escala. nfelizmente, recortar
leva perda de contedo,
principalmente quando as
imagens so recortadas com
muita exatido e escalar leva
perda de detalhe ,
dificultando ver o que a
imagem ilustra.
APLICAO INCORRETA
LEI DOS TEROS
De acordo com a Lei dos Teros os melhores pontos para se posicionar um objeto ficam nas
interseces das linhas. Evite o centro, que considerado um ponto neutro. Sua aplicao representa
uma regra bsica de composio de imagens analgicas e digitais.
REFERNCIAS
BURGOS,TL. Comunicao grfica em interfaces de hipermdia de educao a distncia via web. (n) GOMES, A; COSTA, J.
(org.) Comunicao, Linguagem e novaes Miditicas. Natal: EDFURN, 2011.
CYBS, WO; BETOL, AH; FAUST, R. Ergonomia e usabiIidade: conhecimentos, mtodos e apIicaes. So Paulo: Novatec, 2007.
CARRON, W. Design para web designers: princpios do design para web. Rio de Janeiro: Alta Books, 2006.
LAL, R; FREDERCK, GR Dominando o desenvoIvimento WEB para smartphone Alta Books, 2011.
MCCLURG-GENEVESE, J. The principIes of design, 2005.Disponvel em L: http:// www.digitalweb.com/articles/principles_of_design/.
Acessado em: 17 de julho de 2009.
NELSEN, J.Projetando websites. Rio de Janeiro: Campus, 2000.
_________; LORANGER, H. UsabiIidade na Web: projetando websites com quaIidade. Rio de Janeiro: Campus, 2007.
_________ .MobiIe usabiIity. Alertbox, July 20, 2009. Disponvel em:<http://www.useit.com/alertbox/mobile-usability.html>. Acesso: 12
jun 2011.
_________; BUDU, R. Usability of iPad Apps and Websites. Fremont: Nielsen Norman Group, 2010. Disponvel em:
<http://www.nngroup.com/reports/mobile/ipad>Acesso: 12 jun 2011.
_________. UsabiIidade iPad: primeiros resuItados dos testes do usurio. Alertbox. 2011 http://www.useit.com/alertbox/ipad.html.
Acesso em 18 nov de 2011.
PLONE, D; PLONE, T. Use a cabea! DesenvoIvendo para iPhone. Rio de Janeiro: Altabooks, 2011
STEVENS, C. Projetando para o iPad: criando apIicativos que vendem. Rio de Janeiro: Ed. Cincia Moderna, 2011.
TERUEL, EC.WEB MobiIe - DesenvoIva sites para dispositivos mveis. Rio de Janeiro: Cincia Moderna, 2010.
BARBOSA, Suzana. Sistematizando conceitos e caractersticas sobre o jornalismo digital em base de dados (n) Jornalismo Digital de Terceira Gerao.Universidade
da Beira ntrior, 2007.
BARDOEL, Jo & DEUZE, Mark. Network journalism: converging compe- tences of old and new media professionals. n: http://home.pscw.uva.nl/deuze/pub19.htm.
Acesso em13/10/2000.
BENYON, David. nterao Humano-computador. So Paulo: Pearson, 2011.
CANAVLHAS, Joo. Webnoticia: propuesta de modelo periodstico para la WWW. Salamanca: Livros LabCom, 2007.
CYBS, Walter Otto; BETOL, Adriana Holtz; FAUST, Richard. Ergonomia e usabilidade: conhecimentos, mtodos e aplicaes. So Paulo: Novatec, 2007.
FRANCO, Guillermo Como escrever para a web: elementos para a discusso e construo. Austin: Knight Fundation, 2009
PHONE Human nterface Guidelines. United States of America: Apple nc., 2010.Disponvel em: < http://developer.apple.com/iphone/library
documentation/UserExperience/Conceptual/MobileHG/MobileHG.pdf>. Acesso em: 7 fev 2012.
KALBACH, James. Design de navegao web: otimizando a experincia do usurio. Porto Alegre: Bookman, 2009
KRUG, Steve. No me faa pensar: uma abordagem de bom senso a usabilidade na web. Rio de Janeiro: Alta Books, 2006.
MACHADO, Elias. La estructura de la noticia en las redes digitales: un estudio de las consecuencias de las metamorfosis tecnolgicas en el periodismo. Facultad de
Ciencias de la Comunicacin/Universidad Autnoma de Barcelona, 2000.
MACHADO, Elias. Banco de dados como formato no jornalismo digital. n: Anais V Lusocom, (CD-ROM), Covilh, Portugal, abril, 2004a.
MACHADO, Elias. O banco de dados como espao de composio de narrativas multimdia. n: Anais do SBPJor (CD-ROM). Salvador- BA/Brasil, 2004b.
MACHADO, Elias. A ntranet como Modelo de Gesto no Jornalismo Di- gital. n: Pauta Geral Revista de Jornalismo. Ano 11 No 6. Salvador: Calandra, 2004c.
MELNCZUK, Luciana. Jornalismo na Web: uma contribuio para o es- tudo do formato da notcia na escrita hipertextual. (Tese de doutorado). FACOM/UFBA,
Salvador, 2003.
NELSEN, Jakob; LORANGER, Hoa. Usabilidade na Web: projetando websites com qualidade. Rio de Janeiro: Campus, 2007.
NELSEN, Jakob. Mobile usability: Jakob Nielsen's Alertbox, July 20, 2009. Disponvel em:<http://www.useit.com/alertbox/mobile-usability.html>. Acesso: 12 jun 2011.
NELSEN, Jakob; BUDU, Raluca. Usability of iPad Apps and Websites. Fremont: Nielsen Norman Group, 2010. Disponvel em:
<http://www.nngroup.com/reports/mobile/ipad>Acesso: 12 jun 2011.
NELSEN, Jakob. Usabilidade iPad: primeiros resultados dos testes do usurio. Alertbox. 2011 http://www.useit.com/alertbox/ipad.html. Acesso em 18 nov de 2011.
PALACOS, Marcos. Jornalismo em ambiente plural? Notas para discusso da internet enquanto suporte para a prtica jornalstica. n: BRASL, Andr (et all) Cultura
em fluxo : novas mediaes em rede. Belo Horizonte: PUC Minas, 2004a. pp: 248-263.
PALACOS, Marcos. Multimidialidade, nteratividades e outras dades na Literatura e no Jornalismo On-line ou Onde foi parar o Monstro da Lagoa Negra? n: Anais
do SBPJor (CD-ROM). Salvador-BA/Brasil, 2004b.
PALACOS, Marcos. nternet as system and environment in cyberspace: Preliminary ideas from ongoing research. n: Triple C 1 (2): 95- 104, 2003. Disponvel em:
http://triplec.uti.at/articles. Acesso em: 23/11/2003.
PALACOS, Marcos. Fazendo jornalismo em redes hbridas. Notas para discusso da internet enquanto suporte meditico. Texto publicado no Observatrio da
mprensa em 11/12/2002 e disponvel em: www.observatoriodaimprensa.com.br/artigos/eno111220022.htm. Acesso em: 03/ 08/ 2003.
PALACOS, Marcos. Jornalismo online, informao e memria: aponta- mentos para debate. Paper apresentado no painel nformao e Jor- nalismo no evento
Jornadas sobre jornalismo online, Universidade da Beira nterior, Portugal, Junho, 2002.
PALACOS, Marcos.; MELNCZUK, Luciana; BARBOSA, Suzana; R- BAS, Beatriz; NARTA, Sandra. Um mapeamento de caractersticas e tendncias no jornalismo
online brasileiro e portugus. n: Comu- nicarte, Revista de Comunicao e Arte, Vol.1, No2, Universidade de Aveiro, Portugal, setembro/2002.
PALACOS, Marcos; MACHADO, Elias. Manual do jornalismo na internet. Disponvel em:
www.facom.ufba.br/jol/fontes_manuais.htm. Acesso em: 20/11/2000.
PLONE, Dan; PLONE, Tracey. Use a cabea! Desenvolvendo para phone.Rio de Janeiro: Altabooks, 2011