Escolar Documentos
Profissional Documentos
Cultura Documentos
WEBWRITING
CONFEDERAO NACIONAL DO
COMRCIO DE BENS, SERVIOS E TURISMO CNC
MANUAL DE
WEBWRITING
CONFEDERAO NACIONAL DO
COMRCIO DE BENS, SERVIOS E TURISMO CNC
RIO DE JANEIRO, 2011
2011 Confederao Nacional do Comrcio de Bens, Servios e Turismo
Qualquer parte desta publicao pode ser reproduzida, desde que citada a fonte.
Braslia
SBN Quadra 1, Bloco B 14 ao 18 andar
Edifcio Confederao Nacional do Comrcio
CEP: 70040-000 Braslia/DF
PABX: (61) 3329-9500 | 3329-9501
E-mail: cncdf@cnc.org.br
Rio de Janeiro
Avenida General Justo, 307
CEP: 20021-130 Rio de Janeiro/RJ
PABX: (21) 3804-9200
E-mail: cncrj@cnc.org.br
Introduo 5
Tcnicas de Redao 21
Imagens e Multimdia 47
Direitos Autorais 71
Apndice 81
Glossrio 81
Bibliografia 85
ndice Temtico 86
Introduo 1
Voc conhece o empresrio do seu segmento melhor do que ningum. E se ele quiser conhecer
melhor o Sindicato que o representa, conseguir entender a sua atuao e servios? Isso vai
depender da habilidade do sindicato em comunicar-se de forma clara e atraente pelo site.
Quanto mais bem explorado o canal internet, maior a chance de estreitar o relacionamento com
o empresrio e com a sociedade em geral. Na prtica, isso significa atrair novos associados, vender
mais servios, agilizar o atendimento e aumentar a visibilidade do seu sindicato. Para chegar l, voc
precisa de um bom contedo.
Neste captulo
Sobre o PDA
Sobre o projeto
6 Manual de Webwriting PDA CNC | Captulo 1 Introduo
Ponto de ateno: alerta para um risco ou conflito que voc pode enfrentar
na rotina de gerenciamento do site;
Dica: sugesto de ideia ou boa prtica, que pode ser aplicada para resolver
um desafio;
Sobre o PDA
Com as frequentes mudanas nos cenrios poltico, econmico e empresarial do Pas,
as entidades sindicais patronais precisam repensar sua gesto e forma de atuao
para garantir a sua sustentabilidade e a de seus representados.
Sobre o projeto
Para conectar ainda mais o Sistema Comrcio ao universo digital, a CNC lana agora
um novo produto: os sites dos sindicatos. O projeto, desenvolvido no mbito do
Programa de Desenvolvimento Associativo (PDA), disponibiliza um modelo de site
para os sindicatos filiados ao Sicomrcio, com reas para os seguintes contedos:
O Sistema Comrcio de Bens, Servios e Turismo est on-line. Faa parte dessa rede.
Usabilidade e
Arquitetura de Informao 2
Voc j usou um celular com menus confusos ou um software com funes complicadas demais?
Pois , usabilidade fcil de entender quando faz falta: algo difcil de operar gera uma experincia
frustrante para o usurio. O site de qualquer organizao precisa ter uma estrutura clara e intuitiva,
para que o pblico encontre a informao desejada ou use um servio rapidamente.
Sobram exemplos negativos de usabilidade na internet e, mais ainda, fora dela. Todo mundo j se
perdeu em um estacionamento mal sinalizado e, nas compras de ms, bateu perna procura de
sees escondidas em um supermercado.
A mesma lgica vale para o seu site. O usurio no deve encontrar obstculos para procurar um
produto, solicitar um servio, preencher um cadastro ou enviar dvidas. Tudo deve ser pensado
de forma a garantir uma boa experincia aos que j so clientes e aos que podem passar a ser.
Vamos supor que voc receba ligaes dirias de clientes com dificuldades para baixar uma guia
de pagamento. Se a origem do problema for um boto de download difcil de achar, a sua insti-
tuio ganha duplamente ao fazer uma simples adaptao na pgina: aumenta a satisfao do
pblico e economiza recursos de atendimento.
este o foco da usabilidade que vamos discutir neste captulo: como retirar obstculos e criar
condies para gerar negcios via internet, respeitando o comportamento do internauta. A boa
notcia que, muitas vezes, pequenas mudanas no site j fazem uma tremenda diferena nos
seus resultados.
Neste captulo
Nossas manias no param por a. Num site de buscas, por exemplo, dificilmente
seguimos at a segunda ou terceira pgina procura do resultado ideal da pesquisa.
como se tudo aps a primeira pgina j no valesse a pena o esforo. Isso justo?
No importa, como as pessoas agem na internet.
Mas o maior desafio que voc vai enfrentar dentro de casa: convencer seus chefes
e clientes internos de que o ponto de vista mais importante est do outro lado do
balco. Esse aculturamento gradual e delicado, porque mexe com egos, insegu-
relacionamento ranas e preconceitos. Prepare-se, com argumentos e jogo de cintura, para encarar
o trabalho de formiguinha de defender o foco no usurio.
Imagem 1
Amostra de teste de eyetracking em estilo mapa de calor, com
ateno representada em cores
Imagem 2
Amostra de teste de eyetracking com sequncia de pontos de
ateno dos usurios
12 Manual de Webwriting PDA CNC | Captulo 2 Usabilidade e Arquitetura de Informao
Por outro lado, todo esse vai e vem traz alguns desafios. O internauta tpico
imediatista, impaciente e tem dificuldade para manter o foco na leitura. Alm
disso, as telas dos computadores emitem luz e piscam de modo imperceptvel, o
que cansa a vista rapidamente. Mais do que nunca, seja objetivo.
Voc deve estar se perguntando como fazer para que seu usurio se concentre
naquele documento extenso, mas essencial para ele e para a sua instituio. Antes
Leia mais: de simplesmente digitalizar o arquivo e public-lo na ntegra em seu site, pense
captulo 3 Tcnicas de
Redao e captulo 4 em alternativas: voc pode subdividi-lo em blocos menores interligados, ilustr-los
Tcnicas de Edio
e Publicao para aumentar sua atratividade, entre outras tcnicas. Voc e o seu pblico-alvo
sairo ganhando.
Esse mapeamento mostra que, de maneira geral, ao entrar em um site pela primeira
vez, o olhar do internauta fica voltado para a parte superior esquerda da pgina eyetracking
e desce em um movimento que lembra a lembra a letra F (imagem 1) . Estas so comportamento
as reas quentes da pgina. Os mesmos estudos mostram pouca ateno para
o lado direito da pgina e a parte de baixo. Estas so as reas frias.
Com base nesses dados, responda rpido: onde voc publicaria chamadas para
servios e contedo que geram receita? Essa foi fcil. Mas lembre-se de que o
seu maior desafio instruir os seus clientes internos a seguir as boas prticas de
usabilidade. No porque o usurio vai ficar feliz, mas porque isso bom para os
seus negcios.
Leia mais:
captulo 6 Anlise
de Mtricas Bsicas
Arquitetura de informao: a
organizao por trs do site
A arquitetura de informao (AI) uma aliada da usabilidade na criao de uma
boa experincia de navegao ao visitante. Ela organiza os sistemas de informao
de maneira que as pessoas encontrem o que querem de maneira fcil, rpida e
sem dor de cabea.
Imagem 3
Rodap do site da CNC, que destaca a clareza do sistema de navegao
14 Manual de Webwriting PDA CNC | Captulo 2 Usabilidade e Arquitetura de Informao
Assim como na construo de uma casa, um site precisa passar pela etapa de
planejamento, em que todos os elementos so desenhados e calculados para
aproveitar o espao da melhor forma possvel. E o layout vem s depois, porque, c
entre ns, no d para chamar o decorador antes de saber onde as paredes vo ficar.
Nessa simples ida ao mercado, encontramos dois conceitos de AI: sistema de orga-
nizao, que divide a informao em grupos, de maneira lgica e de entendimento
simples para todos; e sistema de rotulao, em que cada rtulo (ou etiqueta) repre-
senta a informao do grupo. Voc tem alguma dvida sobre o que vai encontrar
na seo Carnes?
Nos corredores desse mesmo supermercado, esto dispostos mapas do local, com a
sua posio exata e para quais sees pode ir. Este outro componente da arquitetura
de informao: o sistema de navegao. Com ele, o seu usurio sabe onde est no
seu site, como voltar a uma pgina anterior e qual pode ser o seu prximo passo.
Por falar em busca, cuide da edio do contedo com carinho, porque ela faz toda
a diferena na qualidade dos resultados de pesquisas. Todo contedo precisa ser metadados
classificado de maneira correta na hora da publicao, para ajudar o sistema a en- busca
tender no que consiste cada pgina. Isso feito pelo preenchimento de metadados
campos que descrevem as informaes essenciais da prpria pgina, como se
fossem marcadores.
Leia mais:
captulo 4 Tcnicas
de Edio e Publicao
Acessibilidade: portas
abertas para todos
Instalar uma rampa para cadeirantes em uma loja uma ao de responsabilidade
social ou uma deciso comercial? As duas coisas. Facilitar o acesso a pessoas com
alguma deficincia solidrio e simptico, mas tambm gera negcios. Isso tambm
vale na web, claro.
Com apenas algumas providncias, voc pode tornar o site da sua instituio mais
acessvel. Por exemplo:
Viabilizar aes de navegao pelo teclado, j que nem todos podem usar
o mouse;
Essas so amostras das vrias tcnicas para aprimorar a acessibilidade de sites. Vale
a pena estudar mais o assunto.
Leia mais:
artigos e documentos
sobre acessibilidade
www.cnc.org.br/
com moderao
Animaes trazem dinamismo e ajudam a comunicar contedos visualmente, mas,
em excesso, podem comprometer a navegao do seu site por diversos motivos. Se Leia mais:
captulo 5 Imagens
voc pensou em poluio visual, est certo, mas no s isso. Usurios com conexo e Multimdia
lenta sofrem para baixar pginas com animaes pesadas. Outro risco o acesso via
dispositivos mveis como iPad e o iPhone, que no exibem o formato Flash.
16 Manual de Webwriting PDA CNC | Captulo 2 Usabilidade e Arquitetura de Informao
O banner, que pode ser animado ou esttico, tem sido questionado em termos
de usabilidade e eficcia, mas ainda est longe da aposentadoria. Voc pode
explorar esse formato publicitrio, desde que tomando certos cuidados e es-
colhendo bem seu posicionamento. Lembre-se de que o seu foco deve estar
no cliente, e se tem algo que ele no gosta em um site um amontoado de
chamadas piscantes.
O uso dessa pea precisa ser estudado com cuidado por mais uma razo: o
fenmeno da cegueira a banners, isto , o comportamento de cada vez mais
usurios ignor-los por reflexo. Os banners, quando mal empregados, perdem
Leia mais: pontos por:
artigos sobre cegueira
a banners
www.cnc.org.br/
webwriting No ter relao com o contedo;
Embarreirar a leitura;
Enfeiar a pgina;
Piscar continuamente.
E por a vai. Para evitar um efeito de tiro pela culatra, cuide para que os banners:
Imagens 4 e 5
Exemplos de sites mal estruturados
Fontes: http://www.dennetworks.com/digital-cable/
http://www.angelfire.com/super/badwebs/
18 Manual de Webwriting PDA CNC | Captulo 2 Usabilidade e Arquitetura de Informao
Resumo do captulo
O que fazer:
Lembrar que a maioria dos usurios chega ao site com uma tarefa a
cumprir (ex.: baixar uma guia)
O que evitar:
Muita gente acha que o layout de um site muito mais importante do que seu contedo. Outras
at valorizam o papel da informao na teoria, mas no investem em sua pesquisa e produo.
Longe de dizer que a programao visual no merea ateno, mas no contedo que o usurio
encontra (ou no) solues para suas dvidas e necessidades.
Percebeu que no estamos falando apenas de textos bonitos, e sim de explorar o site como uma
ferramenta de negcios? Ento, vamos s principais tcnicas de redao on-line. Com elas, o seu
trabalho de atualizao do site vai ficar fcil e eficaz.
Neste captulo
Leia mais:
Pesquisas comprovam que o internauta tpico escaneia visualmente pginas
captulo 4 Tcnicas na web, diferentemente da leitura linear no papel. Ento, evite textos longos e
de Edio e Publicao
cansativos. Seja objetivo para ajudar o usurio a chegar mais rapidamente at a
informao.
Para lidar com a leitura superficial na web, estruture o seu texto pela tcnica de
pirmide invertida, que concentra o que h de mais importante logo no incio,
edio deixando o que h de menos relevante para o fim da pgina. Quando for come-
navegao ar a redigir, lembre-se de concentrar as informaes mais importantes logo
no primeiro pargrafo, tomando como base os objetivos editoriais e comerciais
da pgina. fundamental que voc seja capaz de, at o segundo pargrafo, no
mximo, responder as seguintes perguntas:
O qu?
Leia mais:
captulo 2 Usabilidade
e Arquitetura de
Quem?
Informao
Quando?
Onde?
Como?
Por qu?
Manual de Webwriting PDA CNC | Captulo 3 Tcnicas de Redao 23
Notou como o ltimo texto passou as mesmas informaes, porm de forma mais
objetiva e convincente? Isso porque as recomendaes que vimos at agora foram
colocadas em prtica durante a sua produo.
Uma dica para evitar textos longos subdividi-los em mais de uma pgina sempre que
for necessrio ampliar o enfoque. Mas tome cuidado ao criar esses outros nveis de
navegao, para ter certeza de que aquele assunto precisa estar numa nova pgina.
Se o usurio tiver que dar cliques demais at a informao procurada, voc tambm
corre o risco de ele abandonar o seu site.
priorizao No caso das matrias, a primeira dica importante restringir o nmero de fontes, isto
, pessoas entrevistadas ou consultadas. Inclua apenas a quantidade indispensvel
para abordar o assunto pretendido. Esta orientao fundamental para que os seus
textos sejam mais curtos. Nas matrias, tambm vale quebrar o texto quando for entrar
numa nova abordagem sobre o tema e de incluir links que complementem a leitura.
Agora, e se os clientes forem da rea, tudo bem usar linguagem tcnica? Cuidado, linguagem
porque esse raciocnio parece fazer sentido mas a recomendao continua va-
lendo. que, muitas vezes, numa pesquisa na internet, outros usurios encontram
o seu site. Se o contedo for tcnico demais, visitantes leigos vo ficar desorientados
e frustrados. E voc poder perder negcios.
Para tornar a leitura ainda mais atrativa, procure incluir exemplos ilustrados com
fotos, tabelas, infogrficos e outros recursos de apoio visual. Vale ainda usar ma-
cetes editoriais como:
Para comear a escrever para a web, evite frases longas, voz passiva, ordem indireta linguagem
e tudo mais que possa retardar a leitura. Comeando pela voz ativa, veja como essa
forma de construir as frases faz toda diferena para permitir a melhor compreenso
da informao pelo leitor:
Leia mais:
captulo 4 Tcnicas Voltando ao que levantamos no incio deste captulo: textos para a internet precisam
de Edio e Publicao de uma formatao especfica. E ela deve ser atrativa para o usurio. A quebra de par-
grafos um desses recursos fundamentais para organizar o texto num site. Ao deixar
uma linha em branco entre cada um deles, voc facilitar a leitura em blocos menores.
Talvez o seu publicador j faa essa quebra automaticamente, ento vale testar antes.
atratividade O uso de tpicos outra medida para otimizar a leitura e chamar a ateno do
formatao leitor. Sem contar que eles transmitem uma impresso de organizao para a
pgina. Por isso, sempre que quiser enumerar itens ao longo de um texto, recorra
aos marcadores para criar os tpicos. Na primeira publicao, verifique como a
ferramenta de publicao do seu site trabalha com marcadores.
Leia mais: Ao escolher as palavras-chave, procure saber como os usurios se referem a de-
Manual do Publicador
terminados assuntos. Por exemplo, se escrever sobre um novo modelo de carro,
verifique se os termos mais buscados incluem sinnimos como automvel. Se for
o caso, use variaes para aumentar a visibilidade do seu contedo.
relacionamento Voc trabalhar com base em uma lista de palavras-chave predefinida, ento
metadados procure o seu ponto de contato para o site em caso de dvidas ou sugestes.
Maisculas e minsculas
Aqui vai uma dica que pode parecer questo de esttica, mas envolve bons modos:
ateno ao uso de letras maisculas (ou caixa alta). Elas devem ser utilizadas como
numa escrita normal, ou seja, apenas em incio de frases e em nomes prprios.
que, alm de dificultar a leitura, o uso de letras maisculas, na internet, d a ideia
de grito e voc no quer se dirigir ao seu leitor desta forma. Outro motivo que
os leitores de tela para deficientes visuais soletram as palavras em caixa alta, em
vez de l-las.
Manual de Webwriting PDA CNC | Captulo 3 Tcnicas de Redao 27
Termos estrangeiros
Cuidado tambm com o emprego de palavras estrangeiras. Se for us-las, use
o itlico e explique o seu sentido depois de inseri-las no texto. O mesmo vale
para a utilizao de siglas. Neste caso, escreva o seu contedo por extenso e,
em seguida, coloque a abreviao entre parnteses.
Como acabamos de passar pelas dicas que ajudaro voc a redigir para a
internet, est na hora de conhecer as recomendaes de formatao para
textos web.
Falando nisso, importante lembrar que alguns dos seus textos tero destaque
na homepage do site. Desta forma, quando redigi-los, produza tambm as suas homepage
chamadas, que devem descrever claramente o contedo da pgina para a qual chamadas
o link direcionar. Aposte numa linguagem persuasiva, mas evitando frases de
efeito, trocadilhos e sensacionalismo.
Quando for colocar os hiperlinks no corpo do texto, insira-os apenas nas palavras
link ou expresses que remetam ao contedo que voc quer sugerir ao leitor. Tenha o
navegao cuidado, ainda, de apontar os links para pgina cujo contedo pertinente leitura,
e no quelas que so genricas, como a home do site.
Se for inserir um link para download de um PDF, udio ou vdeo, por exemplo, indique
ao usurio o que acontecer ao clicar. Faa como nas sugestes abaixo, indicando
a extenso e o peso do arquivo quando possvel:
formatao Para ajudar o leitor a identificar o que h de mais importante no texto, use o negrito
em palavras e pequenos trechos. Ateno para no aplicar esse recurso em par-
grafos inteiros ou frases longas o que anula o efeito do destaque. O negrito pode
ser usado ainda nas perguntas de entrevistas pingue-pongue e tambm em itens
enumerados com marcadores.
O itlico tambm pode ser adotado para mudar a velocidade da leitura e chamar a
ateno alm de indicar neologismos, palavras estrangeiras ou trechos de um texto
original (ex.: artigos de uma lei, trechos de uma obra literria). Quando o objetivo
destacar uma determinada palavra, quebrando a uniformidade do texto, alguns
especialistas defendem a substituio do itlico por aspas simples. Adote um padro.
seu site nos resultados desses mecanismos. Alguns desses macetes so tcnicas e
dependem de programao, mas vrios passam por ajustes finos na redao e edio.
Uma dessas prticas simples tem um duplo benefcio: facilitar a leitura dos seus
textos e aumentar a visibilidade do seu site em buscadores. Trata-se da repetio de
palavras-chave. Isso significa que as expresses mais importantes do seu texto devem
aparecer mais de uma vez ao longo da pgina. Mas use esse recurso com moderao,
Leia mais:
porque repetir demais compromete a qualidade do texto e pode ser entendido por captulo 4 Tcnicas
de Edio e Publicao
buscadores como um artifcio desleal.
Agora que voc chegou ao final do processo de redao para web, d uma revisada
no seu texto. Conte com o corretor ortogrfico e no tenha vergonha de tirar o
dicionrio da gaveta. Ah, e pedir que um colega leia o seu texto tambm pode ser
uma boa ideia, principalmente quando voc j tiver feito outras revises sozinho.
30 Manual de Webwriting PDA CNC | Captulo 3 Tcnicas de Redao
Resumo do captulo
O que fazer:
O que evitar:
Usar gerundismo
Se voc est preparando uma publicao on-line, saiba que todo esforo para se comunicar de
forma clara e atraente com seu pblico-alvo ser recompensado. Seja para captar novos parceiros
comerciais, divulgar bem os seus servios ou, simplesmente, transmitir valores positivos que po-
dem ser estendidos sua empresa (como organizao, transparncia, objetividade, relevncia).
Que tal, ento, conhecer algumas ferramentas de edio que vo deixar o seu contedo na web
mais compreensvel, pertinente e visualmente interessante?
Neste captulo
Editando um contedo
Editando um contedo
Seu chefe imediato procurou voc com a demanda urgente de publicar um deter-
minado contedo no site da sua empresa ou entidade. Por maior que seja a presso,
pode ter certeza: somente copiar e colar o texto, a imagem ou o documento, sem
traar uma estratgia para esta divulgao no site, no vai surtir o efeito desejado.
o caso dos entrettulos (ou interttulos), pequenos ttulos colocados no meio do texto,
para torn-lo menos denso. Eles no costumam ter mais do que trs ou quatro palavras
edio e so bastante teis para realar uma mudana de assunto. Observe, a cada quatro
formatao ou cinco pargrafos, se no h oportunidade de separar os blocos de informao
usando este elemento.
Por isso mesmo, quando a ideia fazer a ponte com o novo tema que ser introdu-
zido a seguir, o melhor que as palavras escolhidas para compor o entrettulo sejam
concretas e fortes alm de diferentes das usadas no ttulo.
Outro artifcio que facilita a compreenso do texto e deixa a diagramao mais leve
Leia mais: ao mesmo tempo so os boxes (em portugus, caixas). Eles servem para condensar
Manual do Publicador
informaes citadas em uma matria, artigo ou texto institucional e que precisam com-
plementadas, contextualizadas ou explicadas didaticamente. Na web, alm de textos,
tambm possvel encontrar animaes ou imagens dentro de boxes (imagem 1).
Imagem 1
Box com cotaes de aes no
site da BBC
Imagem 2
Exemplo de olho em pgina do Jornal da UFRJ
36 Manual de Webwriting PDA CNC | Captulo 4 Tcnicas de Edio e Publicao
Imagem 3
Relao de nomes e cargos em texto corrido
Imagem 4
Relao de nomes e cargos em lista com marcadores
Manual de Webwriting PDA CNC | Captulo 4 Tcnicas de Edio e Publicao 37
Mas, antes de tomar a iniciativa de formatar um olho, confira se o seu site tem um
padro visual para esse recurso, e se a ferramenta de publicao tem um comando
especfico. Em caso de dvida, melhor usar tcnicas mais simples, que no exijam Leia mais:
Manual do Publicador
uma edio sofisticada.
Veja a diferena entre um texto corrido (imagem 3) e uma lista (imagem 4), exatamente
com o mesmo contedo:
Padronizao
Se voc for o responsvel pela gesto de contedo web na sua organizao, con- formatao
sidere padronizar este tipo de regra em um manual de redao e estilo especfico qualidade
para o site. Prefira, claro, adotar as mesmas regras e convenes j consolidadas
em sua comunicao interna ou externa.
Caso estas regras no existam, coloque-as voc mesmo no papel, cuidando para
que todo o contedo publicado no site siga o mesmo padro. Isto vale para a forma
como voc ir descrever siglas, nmeros, cifras, ttulos de obras de arte (como livros,
msicas, filmes, programas de TV) etc.
anexos Aqui, tambm, o excesso algo prejudicial. Pendurar uma lista de arquivos rela-
hipertexto cionados ao final de cada pgina no gera o destaque pretendido e banaliza a
importncia de cada documento. S utilize este recurso se o material extra realmente
tiver ligao com o tema central do texto em questo.
Por fim, certifique-se de redigir chamadas atraentes, claras e que entregam o que
link prometem. No mande o leitor para uma homepage, mas sim para a pgina interna
navegao do site indicado, onde ele encontrar a informao especfica da chamada.
H notcias, alis, que pedem uma fotogaleria e merecem o esforo extra no momento
da publicao como os eventos e comemoraes internos da sua organizao.
o tipo de registro que desperta um interesse espontneo dos colegas de trabalho.
Assuntos tcnicos, difceis de explicar apenas com palavras, podem ser ilustrados
com o auxlio de tabelas e infogrficos (imagens 5 e 6).
Leia mais:
captulo 5 Imagens
e Multimdia Se algum departamento da sua organizao tiver este tipo material grfico, em con-
Manual de Webwriting PDA CNC | Captulo 4 Tcnicas de Edio e Publicao 39
dies de veiculao na web, corra atrs. Muitas vezes, contedos ricos ficam nas
gavetas porque ningum imaginou que eles pudessem ser publicados na web. udios
e vdeos de palestras, tutoriais ou eventos tambm devem ser aproveitados.
Imagem 5
Infogrfico no site Good Magazine
Crdito: http://www.flickr.com/photos/nunoluciano/
Imagem 6
Infogrfico no site Column 5
Crdito: http://www.flickr.com/photos/ralphpaglia/
40 Manual de Webwriting PDA CNC | Captulo 4 Tcnicas de Edio e Publicao
Formatando um contedo
para publicao
Chegou a hora dos finalmentes: a insero do contedo na ferramenta de publicao
do site. E, depois de tanto capricho com texto, imagens e arquivos anexos, voc no
quer que nada saia errado. Tenha calma, pois faltam apenas os ajustes finos.
Aps esse cuidado inicial, verifique se o texto est alinhado esquerda (alguns publica-
dores fazem isso automaticamente). Por que no usar o alinhamento justificado, isto ,
blocado? que ele cria grandes espaos em branco entre as palavras, prejudicando
Leia mais: a leitura que j no l muito confortvel na tela do computador.
captulo 2 Usabilidade
e Arquitetura de
Informao Na hora de inserir as imagens, vale conferir se todos os textos esto alinhados con-
forme padro do seu site. A ferramenta de publicao est programada para fazer
essa formatao automaticamente.
Links
hipertexto Os links para outras pginas do seu prprio site, indicados como complemento
navegao informao principal, devem abrir preferencialmente na mesma janela do navegador.
Como vimos anteriormente, o usurio constri sua prpria narrativa ao navegar entre
os links de um mesmo site, podendo retornar pgina inicial quando quiser pelo
boto Voltar ou pelo breadcrumb das pginas, onde a hierarquia das sees evidente.
Leia mais:
captulo 2 Usabilidade
e Arquitetura de Se voc deseja propor a leitura de assuntos correlatos (mas independentes) do conte-
Informao
do de sua pgina, sugerindo para pginas de outro site, faa esses links abrirem em
outra janela do navegador. Sim, existe a possibilidade de o visitante ficar neste novo
site e no voltar em seguida. Mas no se preocupe, porque o objetivo comercial de um
site institucional no segurar o usurio pelo maior tempo possvel e sim oferecer
informao, solues e servios com agilidade.
Leia mais:
captulo 6 Anlise Diversas ferramentas de publicao apresentam um campo de resumo, que voc
de Mtricas Bsicas
precisa preencher com uma espcie de chamada do contedo que est colocando
no ar. Dependendo do site, esta sntese pode aparecer como um destaque na pgina
Manual de Webwriting PDA CNC | Captulo 4 Tcnicas de Edio e Publicao 41
Clique nos links sugeridos e veja se eles apontam para onde deveriam;
Metadados: as etiquetas
do contedo
Voc j procurou livros em uma biblioteca, pesquisando naquelas fichas de papel em
gavetinhas? Os termos de cada uma delas, com o resumo do tema de cada livro, autor,
data de publicao etc. so os parmetros de busca entre milhares, at milhes de ttulos.
Pois bem, esses so os metadados, e eles funcionam de modo semelhante na internet. Es-
tamos falando de etiquetas, legendas de contedo invisveis que separam o joio do trigo.
Invisveis entre aspas, porque esse verdadeiro inventrio do que est publicado na Rede
fica oculto para ns, usurios, mas muito importante para a visibilidade de uma pgina
web. Isto porque a tecnologia de metadados ajuda os sistemas de busca de contedo
a reconhecer o que est por trs dos arquivos e catalog-los corretamente. Assim, eles
podem ser encontrados mais facilmente.
Existem vrios componentes dos metadados, mas suas principais partes (ou meta tags)
so o ttulo, a descrio e as palavras-chave. A fim de que sua pgina seja bem catego-
rizada e pontuada por buscadores como Google, Yahoo! e Bing, voc deve inseri-las
corretamente na seo <head> do cdigo-fonte de cada pgina produzida. Mas calma,
voc no precisa virar dubl de programador. A parte tcnica ser resolvida pela sua
ferramenta de publicao ou pelo webmaster do seu site.
42 Manual de Webwriting PDA CNC | Captulo 4 Tcnicas de Edio e Publicao
O importante que as meta tags sejam nicas, claras e informativas, permitindo a asso-
ciao mais direta possvel com o contedo da tela em questo. Afinal, elas servem,
literalmente, como etiquetas do contedo. No adianta ter uma sacada para um
ttulo que deixe o usurio na dvida sobre onde ele est e para que serve essa pgina.
A meta tag de ttulo (Title) aparece tanto na barra superior do seu navegador quanto no
resultado de uma busca ( o ttulo clicvel da sua pgina), como ilustrado na imagem 7.
Imagem 7
Exibio do ttulo de uma pgina web
Como o ttulo de um livro, a title tag a primeira coisa que um internauta examina
quando se depara com a pgina e quer entender, rapidamente, de que assunto ela
trata. para l que o usurio olha quando est com vrias janelas abertas no seu
navegador e quer saber o que ler em seguida.
Ao preencher a title tag, comece com o nome da sua empresa, por exemplo, seguido
da palavra-chave mais importante sobre a pgina em questo, sem ultrapassar 65 letras
limite de caracteres que o Google consegue exibir no resultado de buscas por
uma pgina. Se voc o ultrapassar, sua mensagem ficar cortada na tela. A cada
contedo, este ttulo deve mudar.
A descrio (description tag) deve oferecer um resumo do que a sua pgina contm,
em at 160 caracteres. Pense, por exemplo, no que as pessoas precisam/gostariam de
saber a respeito da sua empresa ou organizao (o que ela faz, onde est localizada)
e use os termos mais importantes no texto da pgina para compor este resumo. Em Leia mais:
Manual do Publicador
algumas ferramentas, esse campo chamado de resumo ou descrio.
Estes termos que esto j espalhados pelo texto e melhor definem o teor de sua pgina
so justamente as palavras-chave (keywords) que voc precisa inserir no cdigo de
sua publicao para os motores de busca funcionarem a seu favor. No h limite de Leia mais:
artigo sobre a
keywords para cadastrar, mas procure ser especfico: foque em frases ou palavras que importncia das
representem os assuntos de maior destaque na pgina e em seus principais sinnimos. palavras-chave
em textos:
www.cnc.org.br/
webwriting
Ex: Construtora Joo de Barro, construo, engenharia, histria, trajetria,
negcios no Brasil, obras, principais empreendimentos, principais projetos
Resumo do captulo
O que fazer:
Programar links para abrir em uma nova janela quando a pgina for
de um site externo (consulte o Manual do Publicador)
O que evitar:
Se voc optou pelo estabelecimento mais bonito, no tem motivo para se envergonhar. Afinal,
natural que a boa aparncia cause uma impresso positiva em nosso inconsciente. Se isso justo
ou no, uma outra histria, mas o impacto nos negcios bem real.
O cuidado com o acabamento do site ajuda a passar uma imagem profissional da sua organizao.
Quem no se preocupa com a identidade da empresa na web corre o srio risco de perder opor-
tunidades. Pior: um visual amador pode comprometer a sua credibilidade, mesmo se o contedo
estiver adequado.
E voc ver tambm como tirar o mximo proveito de um contedo multimdia esteja ele em
formato de vdeo, udio ou animao para enriquecer a experincia do usurio.
Sites institucionais tm se tornado a principal porta de entrada para potenciais clientes. Aproveite
essa oportunidade. E cause uma boa impresso nesse primeiro encontro.
Neste captulo
Fotos
Vdeo
48 Manual de Webwriting PDA CNC | Captulo 5 Imagens e Multimdia
Fotos
O cuidado com as imagens de um site institucional no apenas uma questo est-
tica. claro que voc deve se preocupar em dar uma aparncia bacana pgina da
sua organizao na web. Mas fique sabendo que seus efeitos podem ser bem mais
abrangentes e lucrativos.
Um site com fotos de baixa qualidade um convite para afugentar qualquer visitante.
E se voc no souber dimension-las corretamente, adeus! No h nada pior para o
internauta do que gastar tempo esperando uma imagem pesada carregar.
Outro erro comum no ter critrio na hora da edio de uma foto. Acredite: saber
recortar uma imagem uma arte que no deve ser desprezada. Se bem feito, o
recorte valoriza a pgina e desperta a ateno do usurio; mas, se mal executado,
pode colocar a perder todo o seu sentido.
Boas imagens tambm ajudam voc a divulgar as aes da sua organizao para alm
do prprio site. E, o mais importante, quem aprende a manuse-las evita retrabalho
e ganha tempo para se dedicar a outras tarefas.
Mos obra!
Antes do clique
Saber o que pixel o primeiro passo antes de comear a dominar tcnicas de trata-
mento de imagens. simples: toda imagem composta por pequenas partculas.
Na tela do computador, so quadrados coloridos. Pixel nada mais do que cada um
desses quadradinhos.
No d para identificar pixels a olho nu. preciso aumentar bem o tamanho de uma
imagem para conseguir enxerg-los, conforme indica as imagens 1 e 2.
Lembre-se deste conceito. Ele ser sempre til para quem trabalha com tratamento
de imagens.
Imagem 1 Imagem 2
Foto em tamanho original Detalhe expandido, evidenciando os pixels
Manual de Webwriting PDA CNC | Captulo 5 Imagens e Multimdia 49
Se voc o responsvel por tirar as fotos dos eventos corporativos, no precisa usar
o mximo de resoluo da sua cmera digital para obter boas fotos para a web. Com
72 ou 100 dpi (pontos por polegada, em portugus), j possvel conseguir um bom
resultado. Mais do que isso desperdcio de espao, porque os monitores ainda esto
longe da definio grfica do papel.
Mas ateno: se voc tambm planeja aproveitar essas imagens em materiais im- imagens
pressos, a tudo muda de figura. Nesse caso, o melhor tirar as fotos com a maior
resoluo e o maior tamanho possvel. O recomendvel a partir de 300 dpi.
Quem usa o celular para registrar eventos deve ter cuidado redobrado. No porque
seu aparelho tem uma cmera de cinco ou dez megapixels que a festa estar garan- Leia mais:
captulo 7
tida. No se engane: a qualidade da imagem vai depender de uma srie de outros Direitos Autorais
fatores, como a lente, o software e a performance do flash da cmera. Por isso,
prefira uma cmera digital dedicada, que oferece boa qualidade por preos razoveis.
Essa tarefa, alis, pede algumas regrinhas. Grave sempre uma verso original ou cpia imagens
de segurana. Isso porque, ao mexer na imagem, voc pode no ficar contente com
o resultado e querer resgatar a foto anterior. O ideal criar duas pastas: uma para
as imagens originais e outra para as editadas.
Outra dica prtica sempre usar uma nomenclatura padro para todas as imagens.
Facilita a pesquisa interna no publicador do site e a sua acessibilidade. E evite usar
acentos na hora de nomear os arquivos. Veja o exemplo abaixo:
produto X_lancamento01.jpg
produto X_lancamento02.jpg
50 Manual de Webwriting PDA CNC | Captulo 5 Imagens e Multimdia
Resoluo x dimenso
O tratamento da imagem o momento que exige maior ateno. O primeiro passo
saber distinguir entre resoluo e dimenso.
Imagem 3 Imagem 4
Foto com resoluo adequada Qualidade prejudicada pela baixa resoluo
imagens Resoluo voc reduz, mas no pode aumentar. E uma vez reduzida, um abrao!
como esticar uma massa de macarro: ao expandi-la, voc no consegue
aumentar o seu volume. Com a superfcie mais fina, furos vo aparecer. J a dimen-
so pode ser aumentada, mas sob o risco de afetar a qualidade da imagem.
Formatos de arquivos
E qual a melhor extenso de imagens para web? Depende. Se voc costuma tra-
balhar com fotos ricas em detalhes e cores ou com ilustraes complexas, o melhor
usar JPG. Isso porque esse formato comprime a imagem mantendo ao mximo
suas caractersticas originais.
E o BMP (Bitmap) nada mais que a extenso padro do Windows. o formato usado
para salvar uma imagem com a melhor qualidade possvel o que no o nosso
caso. Afinal, estamos falando de tratamento de imagens para web, que privilegia a
leveza. Portanto, nada de publicar imagens em formato BMP.
Recorte e redimensionamento
Muita ateno na hora de cortar as fotos. Se voc tem uma imagem de um grupo de imagens
mais de 20 pessoas em uma reunio de trabalho, por exemplo, reduzi-la apenas no redimensionamento
vai adiantar. Mesmo que no distora, a foto ficar incompreensvel para o usurio.
O melhor escolher um pedao da imagem que faa sentido.
Mas, se a foto no ficar boa mesmo assim, no perca tempo. Procure outra imagem
que funcione melhor em dimenses menores.
Imagens 5, 6 e 7
Foto original em tamanho maior, com uma verso apenas reduzida
( esquerda) e uma reduzida com recorte
Fonte: Divulgao/Fecomercio-AM
52 Manual de Webwriting PDA CNC | Captulo 5 Imagens e Multimdia
Publicao e hospedagem
Leia mais: Voc poder turbinar a divulgao de imagens de eventos na empresa para alm do
captulo 2 Usabilidade
e Arquitetura da seu prprio site. Hoje, existem diversos servios on-line de fotogalerias, como Flickr,
Informao Picasa e Fotki, onde voc pode armazenar seus arquivos gratuitamente. E o que
melhor: eles abrem o mundo para o contedo publicado no seu site.
Leia mais:
ACONTECE NO SEU SINDICATO
captulo 7
Direitos Autorais
J pensou em usar um desses servios on-line de fotogalerias para postar ima-
gens de um evento do seu sindicato? uma oportunidade de levar contedo
do seu site para as redes sociais, onde poder ser compartilhado e curtido por
todos aqueles que tm algum envolvimento com o setor.
Vdeo
Usar ou no usar?
Vdeos humanizam histrias, aproximam pessoas e dinamizam o site. Estudo recente
feito nos EUA indica que o nmero de pessoas que assistem a vdeos em seus apa-
relhos celulares disparou 43%1 em 2010. No Brasil, a audincia do YouTube engordou
33%2 no mesmo ano. Esses dados j do uma noo de como a multimdia tem
ganhado espao na web.
Apesar dessa crescente popularidade, nem sempre vale a pena colocar vdeos em vdeos
um site institucional. Como em qualquer formato de comunicao, preciso avaliar
se o assunto, o contedo e os recursos de produo so apropriados.
Se voc tiver a ideia de publicar um vdeo do seu presidente falando do ltimo lana-
mento de um servio, por exemplo, fique atento a algumas questes:
Metas: importante saber definir bem o que voc planeja fazer. Um vdeo
pode nem ser a melhor soluo para o seu problema. Se a sua empresa
deseja anunciar algum novo servio, por exemplo, j parou para pensar em
um tutorial animado? Ele pode sair muito mais em conta do que um vdeo.
Formatos
Se voc realmente sente necessidade de produzir vdeos para o seu site e tem recursos
para assumir essa empreitada, timo. Nesse caso, importante ficar por dentro dos
formatos de vdeo mais comuns:
AVI
Pontos fortes: alta qualidade, embutido no Windows
Pontos fracos: arquivos pesados, s funciona na plataforma Windows
vdeos Se o seu plano for subir os vdeos para um site de compartilhamento, como YouTube
compartilhamento ou Vimeo, a preocupao com o formato praticamente deixa de existir. Basta fazer
upload, e a converso ser automtica.
1, 2, 3, gravando
Certifique-se de escolher uma filmadora digital adequada o que no quer dizer
necessariamente cara. Algumas cmeras fotogrficas gravam vdeos razoavelmente
( bom testar antes de comprar) e so alternativas econmicas, enquanto a maioria
dos smartphones no d nem para o gasto. Agora, se quiser obter vdeos de alta
qualidade, voc vai precisar de uma filmadora mesmo.
vdeos Lembre-se de fazer testes antes de gravar. Confira o tempo de bateria nos diversos
mdulos de captura, o zoom, a qualidade do udio para som ambiente e outros
detalhes. Se a filmagem de um evento corporativo ficar ruim, voc no ter uma
segunda chance. E sabe como funciona a Lei de Murphy...
Para vdeos mais simples, vale usar o Windows Movie Maker, que j vem instalado no
sistema operacional e tambm serve para edio de udio. possvel baixar gratui-
tamente o Lightworks indicado como um dos mais completos por especialistas
entre os editores gratuitos.
Depois de tudo isso, s falta publicar o seu vdeo na ferramenta do site ou em um servio
on-line de compartilhamento. E torcer para que eles sejam campees de audincia.
56 Manual de Webwriting PDA CNC | Captulo 5 Imagens e Multimdia
Resumo do captulo
O que fazer:
O que evitar:
A partir de agora, vamos ajud-lo a pensar estrategicamente o seu site. A virar a chave em sua
mente e a encarar o site institucional no como uma pgina bonitinha na web. Mas a enxerg-lo
como uma ferramenta de negcio, cujo foco o cliente.
Voc sabia que a qualidade das informaes disponveis no seu site pode ter impacto direto no
caixa da sua empresa? Se no, vejamos: se a pgina de cadastro de novos associados estiver escon-
dida, como espera gerar mais receita para a empresa via web? Como planeja usar esse banco de
dados a seu favor? Pense nisso.
Se voc nunca parou para refletir sobre essas questes, melhor comear a se preocupar. hora
de passar a medir, testar e fazer avaliaes sobre o desempenho do seu site. So as mtricas que
vo ajudar a sua organizao a tomar decises baseadas em informaes concretas. o momento
de romper de vez com os velhos achismos!
Estabelecer mtricas para avaliar a performance do seu site abraar uma nova viso de trabalho.
Nada contra quem usa a intuio para conduzir negcios. Mas para fazer do seu site uma pode-
rosa ferramenta de marketing, preciso conhecer bem como ele funciona nos bastidores.
Neste captulo
Pensando estrategicamente
Pensando estrategicamente
O que so mtricas
Calma, mtrica no um bicho de sete cabeas. De maneira simples e objetiva: ela
nada mais do que um dado que pode indicar performance no nosso caso, de
um site empresarial.
Ao estabelecer mtricas para o seu site, voc ser capaz de identificar elementos como:
As opes de usos e combinaes entre elas so muitas, como veremos mais adiante.
estratgia Agora, chegamos a um ponto crucial. Se voc ainda no sabe quais so as metas
e objetivos do seu negcio, melhor parar e refletir. Saber responder a esta questo
fundamental antes de retomarmos qualquer discusso sobre anlise de mtricas.
Mas, se j sabe de cor e salteado para onde o negcio deve seguir, fica muito mais
fcil fazer o seu site trabalhar para voc.
Encare a anlise de mtricas como uma rotina, um programa, como tantos outros con-
duzidos pela sua organizao. Como exerccio, tente responder s seguintes questes:
Para facilitar o seu entendimento sobre como mudanas num site podem ser determi-
nantes para o sucesso ou fracasso de um negcio, vamos usar novamente o exemplo
da pgina de cadastro.
Por meio de mtricas previamente selecionadas, foi possvel identificar o caminho que
o usurio costumava percorrer at a pgina de cadastro. E constatou-se que o trajeto
era muito longo at que conseguisse preencher o formulrio. Ou seja, o mais impor-
tante para a empresa no estava sendo atendido: a captao de potenciais clientes!
Com base nessa observao, foram realizadas mudanas no layout do site, de forma
a facilitar o acesso e o preenchimento de dados pelos usurios. No fim das contas,
graas a uma inteligente anlise de mtricas, foi possvel tomar decises que tiveram
impacto na receita da empresa. Afinal, as pessoas agora no encontram mais dificul-
dades para fazer o cadastro.
O pulo do gato em saber fazer uma anlise de mtricas que muitas vezes ela
tambm exige mudanas fora do ambiente on-line. Quer ver um exemplo?
Como avaliar se o FAQ (relao de perguntas e respostas frequentes) do site tem mtricas
sido eficaz se a sua instituio no registra as chamadas recebidas pela central de estratgia
atendimento? Manter esse banco de dados atualizado crucial para fazer compa-
raes e identificar se as demandas no site so as mesmas recebidas por telefone.
Se forem, provavelmente existe algum problema com seu FAQ.
Concluso: voc pode estar perdendo tempo e dinheiro mantendo uma equipe
superdimensionada para atender ligaes que poderiam ser facilmente resolvidas
pelo site, via autoatendimento.
A resposta simples, mas exige uma boa discusso gerencial: depende do negcio da
sua empresa. Um portal de notcias, por exemplo, deve privilegiar mtricas que indi-
quem audincia e exposio publicidade (principal fonte de receita desses veculos):
Definir quais mtricas sero teis para acompanhar o desempenho do site uma
tarefa extremamente importante. Afinal, so elas que permitiro testar, correlacionar,
interpretar e fazer eventuais correes para tirar o melhor proveito do seu site.
Leia mais:
post no blog de
Avinash Kaushik Mas no se preocupe em abraar o mundo de uma s vez. Procure, por enquanto,
(em ingls) selecionar as mtricas que sejam realmente essenciais para esse incio de trabalho.
www.cnc.org.br/
webwriting Uma dica preciosa usar o simples mas implacvel teste do E da?, proposto
pelo especialista em mtricas web Avinash Kaushik.
mtricas O resumo o seguinte: ao escolher uma mtrica para analisar periodicamente, per-
desempenho gunte a si mesmo por que ela to importante. Se a resposta no estiver na ponta
da lngua at o terceiro E da, descarte-a. Ela certamente no far diferena para
o seu negcio neste momento.
entrar no seu site uma vez e abrir dez pginas, ter gerado dez page views.
A mesma coisa, se ele entrar dez vezes e abrir uma pgina a cada visita.
Aplicaes:
Aplicaes:
Aplicaes:
Aplicaes:
Aplicaes:
Aplicaes:
Aplicaes:
Aplicaes:
Ranking das sees mais acessadas: indica quais sees tiveram maior apelo
entre os usurios no ltimo perodo.
Aplicaes:
Ranking dos dez caminhos mais percorridos pelo usurio no site: a listagem das
rotas de navegao mais frequentes percorridas pelo usurio dentro do seu site.
Aplicaes:
Aplicaes:
Ranking dos temas mais comentados pelo fale conosco: a listagem dos
assuntos que despertam maior dvida e/ou comentrios dos usurios.
66 Manual de Webwriting PDA CNC | Captulo 6 Anlise de Mtricas Bsicas
Aplicaes:
Aplicaes:
Aplicaes:
Um dos maiores interesses de todo sindicato atrair novos associados. E ser uma
fonte confivel de prestao de servios. Para que o seu site atinja esses objetivos,
fique de olho nas seguintes mtricas:
Imagem 1
Tela do Google Analytics
68 Manual de Webwriting PDA CNC | Captulo 6 Anlise de Mtricas Bsicas
estratgia Voc j deve ter percebido que preciso ter muita disciplina para fazer uma apurada
qualidade anlise de mtricas. verdade. No adianta realizar essa avaliao s a cada seis
meses. preciso criar uma rotina de trabalho. O ideal que voc acompanhe mensal-
mente os nmeros extrados do relatrio de mtricas. Mas h casos especficos que
exigem tambm um monitoramento quase dirio.
Procure, ainda, fazer comparaes entre diferentes perodos para avaliar o sucesso de
uma campanha ou melhoria no site. Certas tendncias s ficam claras dentro de uma
viso histrica o mesmo ms no ano passado, os ltimos trs anos, e da por diante.
E lembre-se de registrar eventos ou anncios que tenham influenciado um aumento
de visitao ou uso de um servio no site. Isso precisa ficar claro no seu relatrio.
Se a guia de contribuio para o seu Sindicato retirada todo incio de ano, bom
voc estar preparado para monitorar de perto esse trfego no seu site. Se possvel,
faa isso diariamente. uma forma de estar alerta para identificar problemas e
resolv-los de imediato, sem causar grandes transtornos para seus associados.
Tenha sempre em mente que trabalhar com mtricas adotar uma nova viso de
trabalho. Quem atua nesse ramo sabe que muito comum enfrentar resistncias
dentro do ambiente de trabalho para realizar as mudanas necessrias para um bom
aproveitamento do site.
Resumo do captulo
O que fazer:
O que evitar:
Embora envolva uma srie de leis, com aquela linguagem nunca amistosa, fcil saber como agir
na maioria das vezes. As principais fontes de informao, como portais e sites de compartilha-
mento, divulgam o que o que se pode e o que no se pode fazer com o contedo ali exposto.
Reserve poucos minutinhos para ler.
Afinal, a internet no uma terra de ningum, e nem tudo o que publicado de domnio p-
blico. E agora voc tambm ver a questo por outro ngulo: afinal, vai gerar contedo no site
da sua instituio. Assim, no se esquea de estabelecer uma poltica de uso e deix-la clara para
os visitantes.
E vamos em frente.
Neste captulo
Modelos de licena
Boas prticas
72 Manual de Webwriting PDA CNC | Captulo 7 Direitos Autorais
Voc pode adotar este contedo em seu site, mas precisa tomar alguns cuidados
Leia mais: para no desrespeitar a legislao e correr riscos legais. Afinal de contas, o autor de
ntegra da Lei de
Direitos Autorais um texto, fotografia ou qualquer outra criao conta com a proteo da Lei 9.610,
www.cnc.org.br/
que estabelece o que pode e o que no pode ser feito com essas obras.
webwriting
A primeira regrinha bsica seguir o velho e correto bom senso: ao usar o contedo
de terceiros em seu site, sempre cite de onde voc o conseguiu. E o principal: no
use o material para obter lucro.
legislao Mas ateno: uma reviso da Lei de Direitos Autorais estava em discusso no
Congresso Nacional quando este manual foi elaborado. Entre as medidas que
poderiam ser implementadas, estava a incluso de novas permisses para o uso de
obras sem necessidade de pagamento ou autorizao. Fique de olho.
Modelos de licena
Se voc est em um site, interessou-se por determinado contedo e quer republic-lo
na sua pgina, a primeira coisa a fazer observar o modelo de licena utilizado. Os
mais comuns so o Copyright e o Creative Commons. Geralmente, essa informao
est disponvel na parte inferior da tela.
Copyright
Confira as principais caractersticas desse modelo de licenciamento, o mais comum
entre os veculos de comunicao com fins comerciais:
Imagem 1
O aviso de Copyright
do NYT assertivo, mas
explica didaticamente as
aes possveis
Imagem 2
O site do jornal A Folha de S.Paulo enfatiza a proibio
de reproduzir seu contedo sem autorizao
Imagem 3
Mensagem de copyright no site da CNC
74 Manual de Webwriting PDA CNC | Captulo 7 Direitos Autorais
Creative Commons
O modelo de licenciamento Creative Commons (CC), lanado em 2002, muito
mais recente do que o Copyright. Pensado em meio revoluo digital, ele segue
uma filosofia bem mais flexvel:
Leia mais: CC BY
site da Creative
Commons (em ingls) Permite distribuio, remixagem, adaptao e utilizao
www.creativecommons.org
em outras obras, at com fins comerciais, desde que
haja crdito pela criao original.
CC BY-SA
Permite distribuio, remixagem, adaptao e utilizao
em outras obras, at com fins comerciais, desde que
haja crdito pela criao original e que a nova obra seja
licenciada da mesma forma.
CC BY-ND
Permite redistribuio desde que a obra no sofra alte-
rao e que haja crdito pela criao.
CC BY-NC
Permite distribuio, remixagem, adaptao e utilizao
em outras obras apenas para fins no comerciais.
preciso atribuir crdito pela criao original, mas sem
necessidade de licenciar da mesma forma.
CC BY-NC-SA
Permite distribuio, remixagem, adaptao e utilizao
em outras obras apenas para fins no comerciais.
preciso atribuir crdito pela criao origina e licenciar
da mesma forma.
CC BY-NC-ND
A licena mais restritiva: s permite download e compar-
tilhamento da obra, atribuindo o crdito e sem alter-la
ou us-la para fins comerciais.
Manual de Webwriting PDA CNC | Captulo 7 Direitos Autorais 75
Boas prticas
Em caso de dvida, entre em contato com o autor
Voc j percebeu que so muitas e variadas as possibilidades de uso da obra de
terceiros. Em alguns casos, as definies de direitos autorais no esto explicitadas,
como na maioria dos blogs. Portanto, no hesite caso tenha alguma dvida: entre
em contato com o autor.
Cite a fonte
Alm de respeitar as regras do direito autoral, voc pode demonstrar sua boa-f: cite
a fonte do contedo que voc usar em seu site, inclua o link original em seu site e
informe isso ao autor. Voc poder se surpreender e at mesmo criar boas parcerias.
Leia mais:
site do Flickr
www.flickr.com/commons
Imagem 4
Seo do Flickr com imagens licenciadas no modelo
Creative Commons
Leia mais:
www.youtube.com/t/
copyright_center
Imagem 5
Centro de direitos autorais do YouTube
Imagem 6
Site da Agncia Cmara
Imagem 7
Site da Agncia Brasil
78 Manual de Webwriting PDA CNC | Captulo 7 Direitos Autorais
Estabelea parcerias
O uso do clipping pode gerar boas oportunidade de parceria para o seu site. Mas
legislao fique atento: ao apontar o link para o contedo original e entrar em contato com o
relacionamento autor, informando-o sobre a republicao do contedo, voc pode argumentar que
a curiosidade dos leitores pode aumentar o trfego em ambos os sites, sendo uma
medida benfica para ambos. Ao mesmo tempo, pode oferecer a ele que publique
material produzido por voc.
Direito autoral um assunto srio, mas veja na imagem 8 como as mudanas culturais
aceleradas pela internet tambm podem render algumas risadas.
Imagem 8
Tirinha de Robmaia, sobre direitos autorais.
Fonte: http://thirinhas.wordpress.com
Srie: Noronha o blogueiro pobre de esprito 0031
Manual de Webwriting PDA CNC | Captulo 7 Direitos Autorais 79
Resumo do captulo
O que fazer:
O que evitar:
AVI
Formato de udio e vdeo, criado pela Microsoft, que se popularizou por ser reconhecido pela maioria
dos computadores com Windows e dos leitores de DVD. AVI, por extenso, Audio Video Interleave.
BMP
O formato BMP, sigla para Windows Bitmap, um formato comum de grficos no sistema opera-
cional da Microsoft. Para publicao na web, ele costuma ser convertido para formatos mais leves,
como JPG e GIF.
Breadcrumb
Conhecido como rastro de navegao, breadcrumb significa migalhas de po na traduo literal.
representao simples dos nveis de navegao em um site, a partir da pgina em que o usurio
se encontra. Com o apoio de links em uma linha de texto, geralmente no topo da tela, possvel
retornar para uma pgina anterior ou subir para sua seo, por exemplo.
Cdigo-fonte
Trata-se das instrues por trs das pginas web, codificadas em HTML HyperText Markup
Language, que significa Linguagem de Marcao de Hipertexto. Diversas ferramentas de edio
do mercado dispensam o domnio dessa codificao para publicaes simples.
Converso
Em marketing, significa a realizao de uma determinada ao por parte do cliente que atinja um
objetivo comercial. Por exemplo: fechamento de uma compra, assinatura de newsletter, envio de
um e-mail comercial.
Copyright
Direito de autor. So os direitos pertencentes ao criador intelectual de alguma obra.
Creative Commons
Descrio popularmente difundida para o conjunto de licenas estabelecidas pela ONG Creative
Commons.
82 Manual de Webwriting PDA CNC | Captulo 8 Apndice
DPI
Do ingls dots per inch, significa pontos por polegada e representa a densidade de pontos em uma
foto ou ilustrao. Quanto mais pontos por polegada, maior a qualidade da imagem na tela e no papel.
Eyetracking
Tcnica de estudo de usabilidade que mede o grau de ateno e a movimentao dos olhos dos
usurios, enquanto usam o computador no caso da web, para navegar em pginas.
Flash
Software utilizado para animaes interativas, popularizado na web, com extenso de arquivo .swf.
Flash Video
Com extenso de arquivo .flv, um formato de vdeo leve que roda no software Flash.
GIF
Formato de imagem compacto, limitado a 256 cores, usado predominantemente para cones e
imagens chapadas na web devido sua leveza.
Hiperlink
Recurso usado para redirecionamento do usurio para outros contedos na web. Os hiperlinks (ou
links) podem apontar para pginas externas ou do prprio site, assim como arquivos para download.
Hipertexto
Texto publicado em uma plataforma digital que permita a interligao de pginas e elementos por meio
de hiperlinks (ou simplesmente links). a base da navegao na web, com interface grfica interativa.
HTML
a linguagem das pginas na web.
Infogrfico
Soluo de comunicao visual que combina textos com fotos, ilustraes, mapas e outros
recursos grficos. Trata-se de um recurso til para resumir e explicar informaes complexas
no apenas na web, como tambm em jornais, revistas e livros.
JPG
Tambm conhecido como JPEG, um formato prprio para compactar fotos e ilustraes. Por
trazer uma boa relao entre tamanho de arquivo e qualidade da imagem, o formato predomi-
nante na web para imagens detalhadas.
Layout
Termo refere-se ao projeto visual tanto de meios impressos como de sites e outros ambientes na web.
Metadados
Na web, so dados que descrevem o contedo e as caractersticas de cada pgina no cdigo-
fonte. Os metadados podem ser gerados manual ou automaticamente e servem de orientao
aos mecanismos de busca.
MOV
Formato de arquivo multimdia do software QuickTime, da Apple.
Manual de Webwriting PDA CNC | Captulo 8 Apndice 83
Nveis de navegao
So as camadas hierrquicas em um site na web. Por exemplo, em uma loja virtual: seo de
informtica (1 nvel), subseo de notebooks (2 nvel), pgina com modelos de uma determinada
marca (3 nvel).
Pingue-pongue
Tipo de entrevista editada e publicada no formato de perguntas e respostas, com um breve texto
de abertura para introduzir o assunto e o entrevistado. Nestes casos, faz-se um texto introdutrio
para apresentar o tema e, em seguida, alternam-se as questes do jornalista e as declaraes do
entrevistado.
Pixel
o menor elemento em uma tela, isto , um ponto de uma imagem digital. A resoluo de moni-
tores, por exemplo, medida em pixels: 800 x 600, 1.024 x 768 etc.
QuickTime Video
Ver MOV.
Royalty-free
Modalidade de licenciamento de imagens, textos e outras obras intelectuais em que o contra-
tante no paga royalties, isto , taxas adicionais pelo direito de uso exclusivo. Em geral, contratos
royalty-free permitem o uso de obras em determinados canais, mas probem ceder ou revender
os direitos de reproduo.
Webmaster
Profissional encarregado da manuteno essencial de sites e intranets, realizando atividades de
webdesign, programao e publicao.
Webwriting
Conjunto de tcnicas voltadas para a produo e distribuio de contedo web, que pode ser
texto, foto, vdeo e udio, entre outros. Com seus estudos sobre usabilidade, realizados a partir de
1997, Jakob Nielsen comprovou que textos para a internet requerem uma formatao diferenciada.
A abordagem do webwriting tem evoludo nos ltimos anos, passando a envolver aspectos de
usabilidade, arquitetura da informao e gesto do conhecimento.
WMV
Formato multimdia Windows Media Video, popular por ser compatvel com o sistema opera-
cional da Microsoft e por gerar arquivos leves, para reproduo na web.
84 Manual de Webwriting PDA CNC | Captulo 8 Apndice
Bibliografia
Leitura essencial
Reforce seus conhecimentos em webwriting, usabilidade e webdesign com estes livros
em portugus:
Rodrigues, Bruno. (2010) Padres Web em Governo Eletrnico Cartilha de Redao Web. Minis-
trio do Planejamento, Oramento e Gesto Secretaria de Logstica e Tecnologia da Informao.
www.governoeletronico.gov.br/biblioteca/arquivos/padroes-brasil-e-gov-cartilha-de-redacao-web
Moherdaui, Luciana. (2007) Guia de Estilo Web Produo e Edio de Notcias On-line. Ed.
Senac So Paulo.
Franco, Guillermo. Como Escrever para a Web. Centro Knight de Jornalismo para as Amricas.
http://knightcenter.utexas.edu/como_web_pt-br.pdf. 2009. (traduzido por Marcelo Soares).
Nielsen, Jakob e Loranger, Hoa. (2007) Usabilidade na Web Projetando Websites com qualidade.
Ed. Campus.
ndice Temtico
A O
anexos 37, 38 ortografia 27
atratividade 26
acessibilidade 52 P
priorizao 24
B
busca 15, 64 Q
qualidade 37, 68
C
chamadas 27 R
compartilhamento 54 redimensionamento 51
comportamento 12, 13 relacionamento 10, 22, 26, 68, 78
D
desempenho 62 V
vdeos 53, 54
E
edio 22, 34
estratgia 60, 61, 62, 68
eyetracking 13
F
formatao 26, 28, 34, 37
H
hipertexto 28, 37, 38, 40
homepage 27
I
imagens 49, 50, 51, 52, 76
L
legislao 72, 76, 78
linguagem 22, 25, 27
link 28, 38
M
metadados 15, 26
mtricas 61, 62
N
navegao 12, 22, 28, 38, 40, 64
Anotaes