+ All Categories
Home > Documents > Manual de Webwriting

Manual de Webwriting

Date post: 08-Oct-2015
Category:
Upload: fabiano-moraes
View: 15 times
Download: 0 times
Share this document with a friend
Description:
Manual de Webwriting
92
 MANUAL DE WEBWRITING CONFEDERAÇÃO NACIONAL DO COMÉRCIO DE BENS, SERVIÇOS E TURISMO CNC
Transcript
  • Manual de WebWritingConfederao naCional do ComrCio de Bens, servios e Turismo CnC

  • Confederao naCional do ComrCio de Bens, servios e Turismo CnCRio de JaneiRo, 2011

    Manual de WebWriting

  • 2011 Confederao Nacional do Comrcio de Bens, Servios e TurismoQualquer parte desta publicao pode ser reproduzida, desde que citada a fonte.

    Confederao Nacional do Comrcio de Bens, Servios e Turismowww.cnc.org.br

    BrasliaSBN Quadra 1, Bloco B 14 ao 18 andarEdifcio Confederao Nacional do ComrcioCEP: 70040-000 Braslia/DFPABX: (61) 3329-9500 | 3329-9501E-mail: [email protected]

    Rio de JaneiroAvenida General Justo, 307CEP: 20021-130 Rio de Janeiro/RJPABX: (21) 3804-9200E-mail: [email protected]

    Contedo: agncia Palavra-Chave (www.palavrachave.net)Diagramao: Pictorama Design (www.pictorama.com.br)

    Colaboraram na produo deste manual: Bruna Croce, Daniel Aisenberg, Daniele Neiva, Danielle Lima, Gabriela Bittencourt, Gabriela Ferraz, Marcos Lobo, Marcus Siqueira, Paulo Schueler, Yves Galvo

    Coordenao Estratgica: Assessoria de Comunicao (Ascom) e DeplanApoio Grfico: Programao Visual | Assessoria de Comunicao CNC

  • Introduo 5

    Usabilidade e Arquitetura de Informao 9

    Tcnicas de Redao 21

    Tcnicas de Edio e Publicao 33

    Imagens e Multimdia 47

    Anlise de Mtricas Bsicas 59

    Direitos Autorais 71

    Apndice 81

    Glossrio 81

    Bibliografia 85

    ndice Temtico 86

    Sumrio

  • Neste captulo

    Estrutura dos captulos

    Sobre o PDA

    Sobre o projeto

    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.

    O Manual de Webwriting um instrumento para facilitar o seu trabalho de criao e atualizao

    do seu site fonte de consulta preferencial de cada vez mais empresrios. Com recomendaes

    e dicas prticas, ele servir como referncia rpida no seu dia a dia.

    Introduo 1

  • 6 Manual de Webwriting PDA CNC | Captulo 1 Introduo

    Estrutura dos captulosSe voc quiser ler esta publicao de ponta a ponta, ter uma viso abrangente sobre

    planejamento e produo de contedo para sites institucionais. Agora, se a sua ideia

    for consult-lo de vez em quando, tudo bem: cada captulo do Manual de Webwriting

    foi subdividido em blocos menores, por assunto e pela etapa do trabalho.

    Para facilitar ainda mais a localizao de informaes, criamos os seguintes recursos:

    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;

    Leia mais: recomendao de leitura, tanto dentro ou fora do manual, rela-

    cionada ao assunto abordado;

    Glossrio: chamada para um verbete descrito no glossrio, localizado no

    fim do manual;

    Temas: assuntos relacionados a cada Ponto de ateno e Leia mais. Todas

    essas indicaes temticas esto listadas no fim do manual.

    Voc vai notar que os cones de destaque incluem palavras-chave, relacionadas ao

    contexto da dica ou do ponto de ateno. Essas marcaes esto organizadas em

    um ndice prprio, no fim do manual, para servir de atalho quando voc tiver dvi-

    das especficas. Tudo para que o Manual de Webwriting seja uma ferramenta til, de

    verdade, para voc e o seu sindicato.

    Sobre o PDACom 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.

    O associativismo surge como uma ferramenta que ir alavancar o desenvolvimento de

    mecanismos de atrao dos empresrios, e o fortalecimento da marca e da imagem

    institucional garantindo as mudanas necessrias para a representao sindical

    patronal nesta nova era.

    Para criar a cultura do associativismo nas entidades do Sistema Comrcio, a Confe-

    derao Nacional do Comrcio de Bens, Servios e Turismo (CNC) lanou, em 2010,

    o Programa de Desenvolvimento Associativo (PDA), numa iniciativa conjunta com a

    Confederao Nacional da Indstria (CNI).

  • 7Manual de Webwriting PDA CNC | Captulo 1 Introduo

    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:

    Local: para divulgao de informaes institucionais, produtos, servios e

    notcias do sindicato;

    Regional: para divulgao das notcias da federao;

    Setorial: para divulgao de notcias de acordo com a rea de atuao

    da entidade;

    Nacional: para divulgao de anlises, estudos tcnicos e vdeos de interesse

    do setor tercirio.

    Esse sistema de comunicao permite que o sindicato oferea a dirigentes, empre-

    srios, imprensa e governos uma fonte de informaes constantemente atualizada

    sobre assuntos que afetam o dia a dia do comrcio de bens, servios e turismo.

    Um modelo-padro, personalizvel, ser disponibilizado aos sindicatos filiados ao

    Sistema Confederativo da Representao Sindical do Comrcio (Sicomercio), e par-

    ticipantes do Sistema de Excelncia em Gesto Sindical (SEGS). O site divulgar as

    principais aes e iniciativas do sindicato, da federao qual ele filiado, da CNC e,

    ainda, notcias setoriais, classificadas de acordo com a rea de atuao da entidade.

    O site ser a vitrine do sindicato, levando a sua representao a um novo patamar.

    Alm de ampliar o alcance das informaes, o novo canal de comunicao estabe-

    lecer uma relao mais prxima da entidade com os empresrios de sua categoria,

    dando mais visibilidade e transparncia s iniciativas e aes sindicais. E permitir,

    ainda, mais integrao entre todos os elos que compem o Sistema Comrcio: sin-

    dicatos, federaes e CNC, demonstrando o tamanho e a fora do Sistema.

    Esta iniciativa vinculada ao SEGS Sistema de Excelncia em Gesto Sindical da

    CNC, que busca melhorar a gesto das nossas entidades. Faa parte deste movimento.

    O Sistema Comrcio de Bens, Servios e Turismo est on-line. Faa parte dessa rede.

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

    O mantra: foco no usurio

    Como o usurio l na web

    A navegao nas mos do usurio

    Cada contedo em seu lugar

    Arquitetura de informao: a organizao por trs do site

    Como o usurio encontra o seu contedo

    Acessibilidade: portas abertas para todos

    Animaes e banners com moderao

    Neste captulo

    Usabilidade e Arquitetura de Informao 2

  • 10 Manual de Webwriting PDA CNC | Captulo 2 Usabilidade e Arquitetura de Informao

    O mantra: foco no usurioTodos ns temos hbitos. Seja em casa, no trabalho ou num supermercado, certas

    atitudes nos acompanham por toda a vida. E na web no diferente. Ao acessarmos

    um site, temos o costume de passar os olhos nas mesmas regies da tela. como se

    percorrssemos um caminho imaginrio at encontrar a informao que buscamos.

    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.

    Estudar o comportamento do usurio nada mais do que levar em considerao

    esses e outros detalhes ao administrar o seu site. por isso que textos, fotos, grficos,

    vdeos e animaes jamais devem ser jogados nas pginas. Voc ver que todos

    esses elementos devem conviver em harmonia e cumprir, cada um, seu papel para

    atingir os objetivos comerciais do site.

    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-

    ranas e preconceitos. Prepare-se, com argumentos e jogo de cintura, para encarar

    o trabalho de formiguinha de defender o foco no usurio.

    Como o usurio l na webUm vcio comum em sites institucionais reproduzir contedo de publicaes im-

    pressas, com pouca ou nenhuma adaptao. Ora, no preciso ser especialista em

    usabilidade para perceber que a leitura de livros, jornais e sites tm caractersticas

    bem diferentes. Reformular d trabalho, claro, mas o seu site precisa estar sintonizado

    com o comportamento do usurio para dar retorno.

    Na prxima vez que entrar em um site, repare como voc caa a informao. Isto

    o que especialistas chamam de leitura escaneada: passamos os olhos pela pgina,

    procura de algo que j temos em mente ou simplesmente esperando encontrar

    algo de interesse.

    Essa leitura aparentemente catica comprovada por estudos de eyetracking

    ( imagens 1 e 2), uma tcnica que rastreia como os olhos dos internautas percorrem

    pginas na tela.

    Na web, ao escanear um site, o usurio induzido a parar quando encontra palavras-

    chave do seu interesse. Este ponto importante para que voc saiba trabalhar o seu

    contedo mais importante e fazer com que ele seja visto. A tambm entram diversas

    tcnicas de redao on-line, a maioria de simples aplicao.

    relacionamento

    Leia mais:captulo 6 Anlise de Mtricas Bsicas

    Leia mais: captulo 3 Tcnicas de Redao

  • Manual de Webwriting PDA CNC | Captulo 2 Usabilidade e Arquitetura de Informao 11

    Imagem 1Amostra de teste de eyetracking em estilo mapa de calor, com ateno representada em cores

    Imagem 2Amostra 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

    A navegao nas mos do usurioNa mdia impressa, o autor quem comanda a narrativa. J na web, cada usurio

    monta sua prpria histria, de acordo com seus interesses e objetivos. Podemos

    iniciar um assunto, ir para o final direto ou ler algo relacionado. Isto possvel

    graas ao recurso mais elementar da web, o hipertexto . como uma estrada

    com milhares de opes de caminhos, todos interligados.

    Essas ligaes so feitas pelos hiperlinks (ou simplesmente links) elementos

    clicveis em uma pgina, como palavras, imagens e banners, que apontam para

    outras pginas e arquivos. Por mais simples que sejam, os links costumam ser

    pouco explorados em sites institucionais. Ser por uma dificuldade tcnica? No,

    a questo bem outra: a dificuldade de manter o foco no usurio. Talvez voc

    j tenha ouvido crticas como:

    Esses links vo interromper a leitura do texto.

    Cuidado para no levar o usurio para fora do nosso site.

    Quem quiser outras informaes, que use o menu de nave gao.

    Reconhecer que a web um ambiente comandado pelo internauta o primeiro

    passo para construir um bom site. Continua sendo importantssimo desenhar uma

    estrutura clara e fcil de navegar, mas o usurio precisa ser apoiado a traar sua

    prpria rota. E no preso a uma lgica de livro com incio, meio e fim definidos

    pelo dono do site. Use e abuse dos links.

    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

    de simplesmente digitalizar o arquivo e public-lo na ntegra em seu site, pense

    em alternativas: voc pode subdividi-lo em blocos menores interligados, ilustr-los

    para aumentar sua atratividade, entre outras tcnicas. Voc e o seu pblico-alvo

    sairo ganhando.

    Cada contedo em seu lugarBem, j deu para notar que voc tem poucos segundos para capturar a ateno

    do visitante. E saber onde posicionar um contedo importante, de acordo com

    as preferncias do seu usurio. Aqui voltamos a falar da leitura escaneada e

    do eyetracking.

    navegao

    comportamento

    Leia mais: captulo 3 Tcnicas de Redao e captulo 4 Tcnicas de Edio e Publicao

  • Manual de Webwriting PDA CNC | Captulo 2 Usabilidade e Arquitetura de Informao 13

    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

    e desce em um movimento que lembra a lembra a letra F (imagem 1) . Estas so

    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.

    Arquitetura de informao: a organizao por trs do siteA 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.

    eyetracking

    comportamento

    Leia mais: captulo 6 Anlise de Mtricas Bsicas

    Imagem 3Rodap 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.

    A arquitetura de informao est no nosso dia na dia, mesmo sem percebermos. J

    notou como fcil encontrar tudo em um bom supermercado? Os produtos so

    separados de acordo com a sua categoria, com nomes de fcil entendimento.

    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.

    Como o usurio encontra o seu contedoTodo usurio entra em um site com um objetivo, seja encontrar uma receita de bolo,

    saber o resultado do jogo do time do corao ou baixar uma guia para pagamento.

    Quem est na sua pgina tambm est atrs de algo, tem tarefas a cumprir. Para

    pr em prtica o to falado foco no usurio, voc precisa levantar quais tarefas

    so essas e fazer ajustes de navegao e contedo para torn-las mais acessveis.

    O caminho at o contedo desejado passa pela navegao ou pela busca. A pri-

    meira opo usada, geralmente, por usurios que conhecem o contexto da in-

    formao e navegam por associao de ideias; j a segunda preferida por quem

    sabe exatamente o termo ou arquivo procurado e no precisa percorrer os nveis

    de navegao do site.

    Independentemente do mtodo escolhido pelo usurio, o seu contedo precisa

    ter uma qualidade chamada de encontrabilidade. um termo estranho, verdade,

    mas grave isso: a facilidade de localizao de informaes e servios na web,

    tanto para usurios que j esto dentro do site quanto para quem est pesquisando

    em um buscador.

    Ambos os mtodos merecem total ateno de quem administra o site e devem

    funcionar juntos, j que cada um tem suas vantagens. No d para contar com

    uma ferramenta de busca para resolver problemas de arquitetura de informao,

    por exemplo. Assim como uma boa estrutura de navegao no dispensa um

    mecanismo de busca.

    Leia mais: captulo 6 Anlise de Mtricas Bsicas

  • Manual de Webwriting PDA CNC | Captulo 2 Usabilidade e Arquitetura de Informao 15

    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

    classificado de maneira correta na hora da publicao, para ajudar o sistema a en-

    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.

    Acessibilidade: portas abertas para todosInstalar 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.

    Mais do que oferecer possibilidades de navegao aos portadores de deficincia, um

    site precisa estar apto a receber usurios com dificuldades de viso ou coordenao

    motora, conexes lentas ou que usem dispositivos mveis. E vrios outros pblicos

    com limitaes.

    Com apenas algumas providncias, voc pode tornar o site da sua instituio mais

    acessvel. Por exemplo:

    Permitir que um deficiente visual aumente a fonte do texto;

    Viabilizar aes de navegao pelo teclado, j que nem todos podem usar

    o mouse;

    Adicionar um texto alternativo para todas as imagens;

    Redigir texto alternativo para vdeos e animaes.

    Essas so amostras das vrias tcnicas para aprimorar a acessibilidade de sites. Vale

    a pena estudar mais o assunto.

    Animaes e banners com moderaoAnimaes trazem dinamismo e ajudam a comunicar contedos visualmente, mas,

    em excesso, podem comprometer a navegao do seu site por diversos motivos. Se

    voc pensou em poluio visual, est certo, mas no s isso. Usurios com conexo

    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.

    Leia mais: captulo 4 Tcnicas de Edio e Publicao

    metadados

    busca

    Leia mais: artigos e documentos sobre acessibilidade www.cnc.org.br/webwriting

    Leia mais: captulo 5 Imagens e Multimdia

  • 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

    pontos por:

    No ter relao com o contedo;

    Anunciar produtos que no interessam;

    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:

    Ofeream algo relacionado ao contedo apresentado;

    Estejam posicionados na parte superior da pgina, antes da rolagem;

    Respeitem a identidade visual do site;

    Estejam prximos ao melhor contedo da pgina.

    Leia mais: artigos sobre cegueira a banners www.cnc.org.br/webwriting

  • Manual de Webwriting PDA CNC | Captulo 2 Usabilidade e Arquitetura de Informao 17

    Imagens 4 e 5Exemplos de sites mal estruturadosFontes: 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

    O que fazer:

    Capturar a ateno do usurio rapidamente com chamadas e ttulos atraentes e autoexplicativos

    Subdividir o contedo em blocos menores, interligados por links, para que o usurio monte sua prpria histria

    Concentrar o contedo mais importante no incio da pgina

    Enriquecer as principais chamadas com fotos, cones ou ilustraes

    Lembrar que a navegao e a leitura no seguem uma ordem sequencial como no papel

    Destacar os canais de atendimento, como telefone e e-mail, para o pblico tirar suas dvidas

    Adequar o site ao nvel cultural e tecnolgico do seu pblico-alvo

    Priorizar o raciocnio e as referncias do empresrio, e no os da entidade

    Lembrar que a maioria dos usurios chega ao site com uma tarefa a cumprir (ex.: baixar uma guia)

    Distribuir as sees, pginas e blocos de informao de modo claro e autoexplicativo

    Oferecer instrues e referncias que ajudem o usurio a se localizar e decidir seu prximo passo

    Descrever cada imagem com o atributo texto alternativo (ALT)

    Manter os padres visuais e de comportamento de navegao em todo o site

    Caso seja preciso baixar um programa para visualizar um contedo (ex.: Flash, PDF), oferecer instrues de download e instalao

    Resumo do captulo

  • Manual de Webwriting PDA CNC | Captulo 2 Usabilidade e Arquitetura de Informao 19

    O que evitar:

    Formatar uma chamada importante como banner, pois peas publicitrias so cada vez mais ignoradas pelo internauta

    Esperar que o usurio leia a pgina em uma determinada ordem, como se o site fosse um livro

    Apresentar em formato de animao (Flash) um contedo que funcionaria bem em texto esttico com ilustraes

    Combinar dois ou mais elementos animados em uma mesma pgina, para evitar poluio visual

    Posicionar elementos importantes direita ou abaixo da rolagem, que so reas mais escondidas da pgina

    Publicar textos centralizados ou justificados (blocados), salvo em legendas ou grficos

    Acreditar que somente a busca suficiente para o pblico localizar informaes no site, desmerecendo a estrutura de nave gao

    Manter pginas sem contedo ou com justificativas como em breve ou em construo

    Criar pginas que no deixem claro seu propsito

    Pressupor que o usurio j conhece o seu site e domina as ferramentas da web

    Usar fontes e imagens de baixo contraste ou pequenas demais

    Sobrecarregar a homepage de chamadas e banners, pressupondo que esta a nica porta de entrada do site

    Contar com o feedback espontneo do pblico para detectar erros e aperfeioar o site

    Estruturar a navegao do site espelhando o organograma da entidade ao p da letra

    Apresentar instrues genricas e pouco esclarecedoras (ex.: consulte documentao)

    Apontar links para uma pgina ou ao no esperada (ex.: o usurio clica em Fale Conosco e cai em uma janela de e-mail, em vez de um formulrio de contato)

  • O contedo do seu site institucional o primeiro ponto de contato para muitos clientes. Se eles

    no entenderem ou no forem atrados por essa comunicao, podero deixar de solicitar ser-

    vios e ir embora com uma m impresso. Alguns at entraro em contato por telefone, mas isso

    no to bom quanto parece: o atendimento a dvidas gerais sai caro, enquanto muitas delas

    poderiam estar respondidas no site.

    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.

    Antes de comear a redigir

    Durante a produo dos textos

    Produzi os textos. E agora?

    Neste captulo

    Tcnicas de Redao 3

  • 22 Manual de Webwriting PDA CNC | Captulo 3 Tcnicas de Redao

    Antes de comear a redigirPara comear, bom saber o que esse tal webwriting: numa traduo livre do

    ingls, signi fica redao para a web. Mas, na prtica, vai alm do simples texto

    e envolve um conjunto de prticas para produzir e distribuir contedo para os

    mais variados ambientes da internet, desde sites e intranets at blogs, newsletters

    por e-mail e redes sociais. Entram a recursos como fotos, vdeos, animaes e

    infogrficos.

    Escrever para a internet, portanto, vai requerer de voc uma srie de cuidados

    antes, durante e depois da redao. A fim de que encontre e compreenda

    melhor as tcnicas de webwriting na hora em que mais precisar, confira as

    recomendaes para cada uma das etapas de produo.

    O mais importante no topo

    Antes de voc comear a trabalhar na redao, importante reforar que, na in-

    ternet, o usurio constri sua prpria narrativa. Se ele se interessar em aprofundar

    o conhecimento em determinado tema abordado numa pgina, recorrer a links

    e sugestes de contedo relacionado que voc propuser.

    Pesquisas comprovam que o internauta tpico escaneia visualmente pginas

    na web, diferen temente da leitura linear no papel. Ento, evite textos longos e

    cansativos. Seja objetivo para ajudar o usurio a chegar mais rapidamente at a

    informao.

    E prepare-se para defender essa boa prtica em discusses na sua organizao.

    Quanto mais tcnicos e conservadores forem os seus clientes internos, mais

    eles insistiro em uma linguagem complexa e coalhada de jarges. Essa miopia

    praticamente inevitvel e precisa ser combatida com fatos e dados.

    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,

    deixando o que h de menos relevante para o fim da pgina. Quando for come-

    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?

    Quem?

    Quando?

    Onde?

    Como?

    Por qu?

    Leia mais: captulo 5 Imagens e Multimdia

    Leia mais: captulo 4 Tcnicas de Edio e Publicao

    Leia mais:captulo 2 Usabilidade e Arquitetura de Informao

    linguagem

    relacionamento

    edio

    navegao

  • Manual de Webwriting PDA CNC | Captulo 3 Tcnicas de Redao 23

    Leia o texto abaixo:

    A Confederao Nacional do Comrcio de Bens, Servios e Turismo (CNC)

    foi fundada para ser a grande representante do empresariado comercial

    brasileiro. Para poder estar contribuindo com este setor, a Confederao

    Nacional do Comrcio de Bens, Servios e Turismo rene grandes entida-

    des e importantes representantes de empresas extremamente atuantes em

    todas as categorias do comrcio em todo o territrio do Brasil.

    Com essa atuao significativa, bem planejada e integrada, a CNC est

    contribuindo no apenas para o fortalecimento e o desenvolvimento de

    um dos setores mais importantes e significativos do Pas. Essa atuao dos

    integrantes da CNC importante para o segmento e tambm para favore-

    cer o desenvolvimento econmico e social do Brasil, j que o comrcio

    de bens servios e turismo de extrema importncia para o Pas.

    Para atuar a favor do comrcio, a Confederao Nacional do Comrcio de

    Bens, Servios e Turismo agrupa federaes patronais estaduais e nacionais

    e sindicatos do setor em sua estrutura. Esto agrupadas na CNC, 34 fede-

    raes patronais estaduais e nacionais, sendo 27 estaduais e sete nacio-

    nais. Essas federaes patronais estaduais e nacionais que fazem parte da

    estrutura da CNC so compostas pelos 955 sindicatos mais atuantes nos

    segmentos do comrcio no Pas.

    Importantes para o comrcio brasileiro, os sindicatos so organizados e

    liderados por representantes de micro, pequenas, mdias e grandes empre-

    sas brasileiras. Esses empresrios que lideram os sindicatos esto envolvidos

    com a atuao significativa em prol da defesa do cumprimento dos direitos

    de suas categorias e profissionais. Esses empresrios so a slida base

    sobre a qual est estruturada a Confederao Nacional do Comrcio de

    Bens, Servios e Turismo, a CNC.

  • 24 Manual de Webwriting PDA CNC | Captulo 3 Tcnicas de Redao

    E a, conseguiu entender quais so as principais informaes? Achou o texto claro,

    objetivo e correto? Agora, leia o segundo exemplo:

    Reunindo entidades e representantes de empresas atuantes nas cate-

    gorias do comrcio, a Confederao Nacional do Comrcio de Bens,

    Servios e Turismo (CNC) contribui no apenas para um dos setores

    mais importantes para o Pas. A atuao de seus integrantes favorece

    ainda o desenvolvimento econmico e social do Brasil.

    A Confederao agrupa, em sua estrutura, 34 federaes patronais

    estaduais e nacionais. Integram essas entidades os 955 sindicatos mais

    atuantes nos segmentos do comrcio no Pas.

    Os sindicatos, por sua vez, so organizados e liderados por represen-

    tantes de micro, pequenas, mdias e grandes empresas. Envolvidos

    com a defesa dos direitos de suas categorias e profis sionais, esses

    empresrios so a base da CNC.

    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.

    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.

    J quando for produzir entrevistas no formato pingue-pongue, planeje-se para no

    fazer introdues muito longas. Crie alguns pargrafos de abertura e parta logo para

    as perguntas e respostas.

    Sabe com quem est falando?

    S uma perguntinha antes de partirmos para a criao de um texto: quem o

    pblico-alvo do seu site? Parece simples, mas muitas empresas tm dificuldades

    para responder a quem pretendem se dirigir. Esta definio fundamental para

    que a sua instituio fale a mesma lngua do usurio. Seja claro e evite expresses

    priorizao

  • Manual de Webwriting PDA CNC | Captulo 3 Tcnicas de Redao 25

    que possam deixar o texto pesado e confuso, alm de no abusar de jarges e

    termos tcnicos.

    Agora, e se os clientes forem da rea, tudo bem usar linguagem tcnica? Cuidado,

    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:

    Declaraes: aspas de especialistas ou autoridades entrevistadas;

    Personagens: histrias de pessoas reais para ilustrar e explicar os conceitos;

    Pingue-pongue: entrevista compacta, com perguntas e respostas breves de

    uma pessoa de interesse para o contedo.

    Estes recursos no apenas humanizam o contedo, como tambm representa uma

    recompensa a quem contribuir para sua pesquisa. A exposio no site uma moeda

    social. Use-a.

    Pronto, vamos prxima etapa do seu trabalho: colocar a mo na massa!

    Durante a produo dos textos

    Boas prticas de estilo

    Se voc comea o texto pelo ttulo, fique vontade. Mas saiba que, provavelmente,

    ele ser modificado durante e aps a redao exceto quando for produzir contedo

    de pginas institucionais, que devem ter o mesmo ttulo exibido no menu do site. S

    ao fim da produo, voc saber exatamente qual a principal informao da pgina,

    que dever ser enfatizada no ttulo.

    Para comear a escrever para a web, evite frases longas, voz passiva, ordem indireta

    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:

    Servios teis ao empresrio so oferecidos pelo sindicato Exemplo de

    voz passiva.

    O sindicato oferece servios teis ao empresrio Viu como a frase

    ficou melhor na voz ativa?

    linguagem

    linguagem

  • 26 Manual de Webwriting PDA CNC | Captulo 3 Tcnicas de Redao

    Exemplificando o uso da ordem direta, prefira criar frases como:

    A assessoria est disponvel de segunda a sexta em horrio comercial

    E evite a forma abaixo:

    De segunda a sexta, em horrio comercial, a assessoria est disponvel.

    Agora, aposente de vez o gerundismo (ex.: estarei escrevendo), adjetivos, advrbios

    que no agreguem sentido (como seguramente, extremamente ou exatamente)

    e substantivos abstratos que poderiam ser transformados em verbos de ao por

    exemplo: a considerao do especialista que (...) se converte em o especialista

    considera que (...).

    Voltando ao que levantamos no incio deste captulo: textos para a internet precisam

    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.

    O uso de tpicos outra medida para otimizar a leitura e chamar a ateno do

    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.

    Ao escolher as palavras-chave, procure saber como os usurios se referem a de-

    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.

    Voc trabalhar com base em uma lista de palavras-chave predefinida, ento

    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.

    Leia mais: captulo 4 Tcnicas de Edio e Publicao

    atratividade

    formatao

    Leia mais: Manual do Publicador

    relacionamento

    metadados

  • Manual de Webwriting PDA CNC | Captulo 3 Tcnicas de Redao 27

    Termos estrangeirosCuidado 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.

    Leitores parte, quem escreve diariamente sabe que no so apenas as pala-

    vras estrangeiras que podem causar confuso. Quando se produz um texto,

    normal ficar na dvida sobre a grafia correta de alguns termos. O que se

    deve fazer nesses casos?

    Uma coisa certa: no d para confiar cegamente no corretor ortogrfico do

    Word e outros processadores de texto. Confira normas de ortografia no site

    da Academia Brasileira de Letras (www.academia.org.br) e consulte um bom

    dicionrio com frequncia.

    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.

    Produzi os textos. E agora?Em primeiro lugar, volte ao ttulo para inserir a ideia principal do texto. Use um

    verbo de ao ao escrev-lo. E no se esquea de que, assim como os textos, os

    ttulos tambm devem ser curtos e diretos. Ateno ainda para no usar ponto

    final em ttulos. Esta dica tambm vale para as chamadas.

    Falando nisso, importante lembrar que alguns dos seus textos tero destaque

    na homepage do site. Desta forma, quando redigi-los, produza tambm as suas

    chamadas, que devem descrever claramente o contedo da pgina para a qual

    o link direcionar. Aposte numa linguagem persuasiva, mas evitando frases de

    efeito, trocadilhos e sensacionalismo.

    Ttulos, chamadas e links

    Comeando pelos links, jamais nomeie-os de forma genrica, como:

    Clique aqui para consultar o Manual do Publicador

    Prefira uma definio autoexplicativa e significativa dentro do link. Por exemplo:

    Consulte o Manual do Publicador

    ortografia

    linguagem

    homepage

    chamadas

  • 28 Manual de Webwriting PDA CNC | Captulo 3 Tcnicas de Redao

    Quando for colocar os hiperlinks no corpo do texto, insira-os apenas nas palavras

    ou expresses que remetam ao contedo que voc quer sugerir ao leitor. Tenha o

    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:

    Consulte o Manual do Publicador (formato PDF)

    Consulte o Manual do Publicador (PDF, 1MB)

    Estudos de usabilidade apontam que os usurios se frustram quando passam

    para outro meio sem serem avisados previamente. Isso acontece principalmente

    quando a conexo lenta ou quando a visualizao do arquivo requer a instalao

    de um plug-in.

    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.

    Newsletters e e-mail marketing

    J no caso das chamadas de newsletters, o resumo do assunto deve ser produzido

    sem que voc d toda a informao ao usurio. Assim, voc o deixar curioso e

    estimulado a clicar no link. O campo de assunto deve ser redigido com clareza, sem

    exageros publicitrios.

    Texto, ttulos e chamadas prontos, o momento de dar uma ateno formatao

    e incluso dos links. Alm de transmitir mais credibilidade, assim voc reduz o

    risco de o e-mail ficar preso em um sistema antispam que varre certas palavras

    e formataes frequentes em mensagens promocionais.

    Otimizao para buscadores

    Ferramentas de busca como Google, Yahoo! e Bing tm se tornado portas de entrada

    cada vez mais frequentes para sites empresariais. Por isso, as tcnicas de Search Engine

    Optimization (SEO) so to importantes. Com elas, possvel melhorar a posio do

    link

    navegao

    formatao

    formatao

    hipertexto

  • Manual de Webwriting PDA CNC | Captulo 3 Tcnicas de Redao 29

    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,

    porque repetir demais compromete a qualidade do texto e pode ser entendido por

    buscadores como um artifcio desleal.

    Outra providncia fundamental a edio de metadados. Funciona assim: meca-

    nismos de busca enxergam o contedo pelo seu cdigo-fonte e no como ele

    aparece na tela do seu computador. Nas varreduras dos sites, os buscadores procuram

    pelas palavras-chave usadas tanto no corpo do texto como no ttulo da pgina, entre

    outros elementos de contedo.

    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.

    Leia mais: captulo 4 Tcnicas de Edio e Publicao

  • 30 Manual de Webwriting PDA CNC | Captulo 3 Tcnicas de Redao

    Resumo do captulo

    O que fazer:

    Redigir textos claros, considerando a compreenso do pblico-alvo

    Prezar pela objetividade e conciso

    Usar exemplos para ilustrar explicaes tcnicas

    Humanizar o contedo com declaraes e histrias de pessoas reais

    Concentrar as informaes mais importantes no incio do texto

    Iniciar o texto respondendo: o qu, quem, quando, onde, como e por qu

    Dar preferncia a frases curtas

    Preferir frases em voz ativa

    Optar pelas frases em ordem direta

    Usar listas em tpicos (marcadores) para destacar os itens

    Repetir as expresses mais importantes ao longo da pgina, para aumentar a visibilidade do site em buscadores

    Explicar o signifi cado de abreviaes e siglas

    Conferir normas de ortografia no site da Academia Brasileira de Letras

    Consultar o dicionrio com frequncia

    Redigir ttulos preferencialmente com verbo de ao

    Escrever ttulos curtos e diretos

    Produzir chamadas que descrevam claramente o destino do link

    Usar linguagem persuasiva em chamadas

    Em newsletter, redigir o campo de assunto com clareza, sem exageros publicitrios

    Nas chamadas da newsletter, resumir o assunto sem entregar o ouro

    Usar links tambm no corpo do texto

    Apontar links para pginas especfi cas com o contedo pertinente, e no para uma pgina genrica (ex.: homepage)

    Nomear links de forma especfica e autoexplicativa

    Revisar o contedo com corretor ortogrfico

  • Manual de Webwriting PDA CNC | Captulo 3 Tcnicas de Redao 31

    O que evitar:

    Abusar de jarges e termos tcnicos, sobretudo sem a devida explicao

    Usar gerundismo

    Exagerar nos adjetivos e recursos de nfase

    Usar muitas estruturas em voz passiva e ordem indireta, que retardam a leitura

    Utilizar termos em lnguas estrangeiras, a menos que no haja traduo adequada

    Utilizar ponto final em ttulos e chamadas

    Grafar palavras em maisculas

    Confiar demais no corretor ortogrfico

    Nomear links genericamente (ex.: Clique aqui)

  • Tcnicas de Edio e Publicao

    Como em qualquer publicao, o acabamento faz toda a diferena na web. Alm de contedo

    de qualidade, o seu site precisa de uma formatao que facilite a localizao e compreenso

    das informaes. Mais do que mero capricho visual, uma boa edio contribui para a eficcia da

    comunicao.

    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

    Estratgias para complementar a informao

    Formatando um contedo para publicao

    Metadados: as etiquetas do contedo

    4

  • 34 Manual de Webwriting PDA CNC | Captulo 4 Tcnicas de Edio e Publicao

    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.

    Por falta de tempo, dificuldade em compreender um assunto mais tcnico ou por

    pura preguia, seu leitor potencial deixar de ser capturado e poder nem passar do

    primeiro pargrafo daquela carta to especial do presidente.

    Digamos que voc j tenha revisado a gramtica e a pontuao de um texto e con-

    sidere que ele esteja muito bem escrito. Ser que ele ainda no pode ser encurtado?

    Em alguma sentena ou pargrafo, h ideias se repetindo sem necessidade? vivel

    eliminar palavras em excesso (como adjetivos ou conjunes) sem alterar o sentido

    original da frase?

    Se a resposta for sim, v em frente! Quanto mais conciso ficar o texto, menor a chance

    de o leitor se entediar, desistir da leitura, ou simplesmente se perder em meio a um

    raciocnio muito longo.

    Quebrando a monotonia do texto

    Assim como a vrgula ajuda o leitor a respirar enquanto l e apreende as informaes de

    uma frase, de forma pausada, outros recursos editoriais ajudam a arejar o texto para a web.

    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

    e so bastante teis para realar uma mudana de assunto. Observe, a cada quatro

    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

    ao mesmo tempo so os boxes (em portugus, caixas). Eles servem para condensar

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

    Se a matria est longa e pobre visualmente, tambm interessante extrair deste

    contedo uma frase de impacto, que represente bem o tema central abordado, e

    public-la fora da massa de texto. Este elemento chamado de olho (imagem 2)

    e, quando bem escolhido, pode ser o responsvel por capturar a ateno de um

    potencial leitor.

    Leia mais: captulo 3 Tcnicas de Redao

    edio

    formatao

    Leia mais: Manual do Publicador

  • Manual de Webwriting PDA CNC | Captulo 4 Tcnicas de Edio e Publicao 35

    Imagem 2Exemplo de olho em pgina do Jornal da UFRJ

    Imagem 1Box com cotaes de aes no site da BBC

  • 36 Manual de Webwriting PDA CNC | Captulo 4 Tcnicas de Edio e Publicao

    Imagem 3Relao de nomes e cargos em texto corrido

    Imagem 4Relao 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

    uma edio sofisticada.

    Textos escritos em tpicos e distribudos em bullets (ou marcadores) so outra alter-

    nativa para destacar dados importantes. Usamos este recurso intuitivamente, toda

    vez que elaboramos uma lista de compras, por exemplo.

    Alm de separar as ideias mais importantes do resto do texto, os bullets quebram a

    uniformidade da pgina, ao criar pequenos espaos em branco em meio massa

    de pargrafos. E, por isso, atraem nossa viso na hora, como os produtos na lista do

    supermercado.

    Veja a diferena entre um texto corrido (imagem 3) e uma lista (imagem 4), exatamente

    com o mesmo contedo:

    Sentiu a diferena? No s voc. Pesquisas comprovam que o uso de marcadores

    acelera a leitura, aumenta a absoro do contedo e atrai o olhar do usurio.

    Padronizao

    Se voc for o responsvel pela gesto de contedo web na sua organizao, con-

    sidere padronizar este tipo de regra em um manual de redao e estilo especfico

    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.

    Estratgias para complementar a informaoUm contedo bem trabalhado deve oferecer caminhos para que o leitor tire eventuais

    dvidas sobre o que acabou de ler, ou informe-se sobre assuntos relacionados. As

    informaes complementares podem estar presentes dentro ou fora do seu site e

    vir em forma de imagens, grficos ou tabelas.

    Se a notcia menciona um relatrio financeiro, a assinatura de algum acordo, uma

    reunio importante ou traz aspas de um executivo sobre o desempenho da empresa

    no ltimo ano, vale a pena embas-la anexando ao texto algum material de consulta.

    Leia mais: Manual do Publicador

    formatao

    qualidade

    anexos

    hipertexto

  • 38 Manual de Webwriting PDA CNC | Captulo 4 Tcnicas de Edio e Publicao

    O relatrio, a minuta do acordo, a ata da reunio e o balancete da empresa, respec-

    tivamente, so exemplos de contedos relacionados matria e, sempre que possvel,

    devem ser disponibilizados ao pblico. Alm de dispensarem o redator de repetir

    todos os detalhes destes documentos dentro do texto, tais complementos reforam

    a credibilidade do que foi noticiado.

    Aqui, tambm, o excesso algo prejudicial. Pendurar uma lista de arquivos rela-

    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.

    Procure, ainda, disponibilizar anexos no formato mais adequado para o usurio.

    Alguns exemplos:

    Documentos que precisam ser preenchidos ou adaptados: verses edit-veis, como arquivos do Word e PowerPoint;

    Documentos apenas para leitura e impresso: formatos no-editveis, como Adobe PDF e imagens;

    Tabelas e bases de dados: arquivos que o usurio possa exportar para outros programas, como Excel e Access.

    A informao complementar da sua pgina tambm poder estar em um site

    qualquer. No tem problema apontar para fontes de informao externa, desde

    que voc tome alguns cuidados. Verifique se o site tem credibilidade (prefira fontes

    oficiais, como as do Governo e de entidades de classe), se no tem erros grosseiros

    de portugus e se no fechado para assinantes.

    Por fim, certifique-se de redigir chamadas atraentes, claras e que entregam o que

    prometem. No mande o leitor para uma homepage, mas sim para a pgina interna

    do site indicado, onde ele encontrar a informao especfica da chamada.

    Mais do que mil palavras

    sempre desejvel enriquecer o texto com elementos visuais, cuidando para que eles

    tragam aspectos da informao que o texto no abordou. Mesmo artigos mais densos

    e sem carter factual podem perder o aspecto endurecido com o auxlio de uma

    ilustrao. Inserir uma foto simptica de seu autor tambm pode convidar leitura.

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

    Se algum departamento da sua organizao tiver este tipo material grfico, em con-

    anexos

    hipertexto

    Leia mais: captulo 3 Tcnicas de Redao

    link

    navegao

    Leia mais: captulo 5 Imagens e Multimdia

  • 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 5Infogrfico no site Good MagazineCrdito: http://www.flickr.com/photos/nunoluciano/

    Imagem 6Infogrfico no site Column 5Crdito: http://www.flickr.com/photos/ralphpaglia/

  • 40 Manual de Webwriting PDA CNC | Captulo 4 Tcnicas de Edio e Publicao

    Formatando um contedo para publicaoChegou 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.

    Textos e imagens

    O contedo est no editor de texto? Ou ser importado de outra ferramenta, como

    o Word? Seja como for, comece copiando e colando toda a parte de texto (ttulo,

    corpo, legendas) no Bloco de Notas do Windows. Isto limpar a formatao original

    definida pelo redator (como marcadores e negritos), exigindo, claro, que voc as

    refaa manualmente dentro do publicador.

    Como alternativa, voc tambm pode usar o recurso de importao da ferramenta de

    publicao. Faa alguns testes para decidir qual mtodo funciona melhor no seu dia a dia.

    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

    a leitura que j no l muito confortvel na tela do computador.

    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

    Os links para outras pginas do seu prprio site, indicados como complemento

    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.

    Se voc deseja propor a leitura de assuntos correlatos (mas independentes) do conte-

    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.

    Diversas ferramentas de publicao apresentam um campo de resumo, que voc

    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

    Leia mais: Manual do Publicador

    Leia mais: captulo 2 Usabilidade e Arquitetura de Informao

    hipertexto

    navegao

    Leia mais: captulo 2 Usabilidade e Arquitetura de Informao

    Leia mais: captulo 6 Anlise de Mtricas Bsicas

  • Manual de Webwriting PDA CNC | Captulo 4 Tcnicas de Edio e Publicao 41

    principal (convidando leitura do contedo na ntegra) ou mesmo nos resultados de

    uma busca interna do seu site, ao lado dos ttulos.

    Independentemente de como o resumo for aproveitado na programao e na capa

    do seu site, as palavras que voc usar para redigi-lo tambm sero importantes para

    a visibilidade externa da homepage.

    Enquanto estiver acertando estes ltimos detalhes de formatao, trabalhe no modo

    rascunho de sua ferramenta ou seja, deixe a pgina em edio ainda oculta, na lista

    de no publicadas. Utilize a opo preview (prvia) para visualizar o resultado final antes

    de partir para a publicao. Aqui vo algumas sugestes de passos para o seu controle

    de qualidade, que fundamental para reduzir o risco de erros no ar:

    Clique nos links sugeridos e veja se eles apontam para onde deveriam;

    Observe se as imagens foram carregadas e se no esto grudadas no texto;

    Confira se os tamanhos das fontes do ttulo e do corpo esto no padro correto;

    Veja se elementos externos aparecem corretamente (ex.: vdeo do YouTube);

    S ento, confirme a publicao do contedo.

    Metadados: as etiquetas do contedoVoc 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 seme lhante 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 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.

    Leia mais: Manual do Publicador

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

    De to importante no processo de otimizao de sites (SEO), ela a nica obriga-

    tria: para que um cdigo HTML seja criado, gerando um site, o prprio programa

    preenche uma title tag genrica.

    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.

    Ex.: Construtora Joo de Barro Sobre a organizao

    Construtora Joo de Barro Programa de Estgio

    Imagem 7Exibio do ttulo de uma pgina web

  • Manual de Webwriting PDA CNC | Captulo 4 Tcnicas de Edio e Publicao 43

    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

    algumas ferramentas, esse campo chamado de resumo ou descrio.

    Ex: Histrico da atuao da Construtora Joo de Barro no Brasil, obras

    mais importantes e contratos recm-conquistados

    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

    keywords para cadastrar, mas procure ser especfico: foque em frases ou palavras que

    representem os assuntos de maior destaque na pgina e em seus principais sinnimos.

    Ex: Construtora Joo de Barro, construo, engenharia, histria, trajetria,

    negcios no Brasil, obras, principais empreendimentos, principais projetos

    Ento, agora que voc conheceu os metadados, no h mais desculpas para

    no etiquetar o seu contedo. Tenha sempre em mente que, assim, facilitar

    a navegao do seu usurio e garantir que o seu site aparea cada vez melhor

    posicionado nos buscadores.

    Leia mais: Manual do Publicador

    Leia mais: artigo sobre a importncia das palavras-chave em textos: www.cnc.org.br/webwriting

  • 44 Manual de Webwriting PDA CNC | Captulo 4 Tcnicas de Edio e Publicao

    O que fazer:

    Resumir o texto ao mximo

    Criar entrettulos (frases de destaque em negrito) para quebrar textos longos, como nas revistas

    Usar listas com tpicos (marcadores) sempre que possvel

    Grifar as palavras mais importantes de um texto (negrito)

    Enriquecer o contedo com fotos, tabelas e outros recursos grficos

    Buscar e incluir links para outros contedos relacionados com a pgina publicada

    Avaliar a relevncia e pertinncia de um arquivo antes de anex-lo auma pgina

    Subdividir um contedo extenso em blocos menores, interligados por links

    Redigir chamadas claras e atraentes ao sugerir links para contedo complementar

    Alinhar o texto esquerda, para facilitar a leitura

    Alinhar imagens esquerda ou direita do corpo de texto, com margem entre eles (consulte o Manual do Publicador)

    Programar links para abrir na mesma janela quando a pgina for do seu prprio site (consulte o Manual do Publicador)

    Programar links para abrir em uma nova janela quando a pgina for de um site externo (consulte o Manual do Publicador)

    Preencher o campo resumo de modo claro e sinttico, para fazer sentido inclusive num resultado de busca (consulte o Manual do Publicador)

    Atribuir palavras-chave que facilitem a localizao da pgina pelos termos mais representativos

    Visualizar uma nova pgina pronta (rascunho) antes de public-la no site

    Resumo do captulo

  • Manual de Webwriting PDA CNC | Captulo 4 Tcnicas de Edio e Publicao 45

    O que evitar:

    Subdividir o contedo em pginas sequenciais com navegao apenas por nmeros (paginao), sem chamadas que descrevam ocontedo das telas a seguir

    Copiar textos do Word com recursos avanados de formatao (consulte o Manual do Publicador)

    Inserir imagens soltas na pgina, entre pargrafos, sem alinhamento com o texto

  • Imagens e Multimdia

    Visualize duas lojas do mesmo ramo, uma ao lado da outra. A primeira est bonita, limpa, com

    uma vitrine bem organizada; j a segunda tem rachaduras na pintura e cartazes improvisados na

    vitrine. Em qual delas voc entraria? E mais: a quem confiaria o seu dinheiro para contratar um

    produto ou servio?

    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.

    A mesma lgica vale para o comportamento do cliente na web.

    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.

    To importante quanto a qualidade do texto na web o cuidado reservado seleo e ao tratamen-

    to de fotos, ilustraes, grficos, vdeos e udios. Neste captulo, voc vai aprender fundamentos

    do que preciso fazer para deixar seu site mais atraente. So dicas sobre como editar, salvar e

    publicar imagens com preciso e qualidade.

    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.

    5

    Neste captulo

    Fotos

    Vdeo

  • 48 Manual de Webwriting PDA CNC | Captulo 5 Imagens e Multimdia

    FotosO 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 1Foto em tamanho original

    Imagem 2Detalhe 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-

    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-

    tida. No se engane: a qualidade da imagem vai depender de uma srie de outros

    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.

    Uma opo para quem no tem tempo ou equipa mentos

    adequados para tirar fotos buscar imagens concei-

    tuais em bancos de imagens na internet. Hoje, existe

    uma boa variedade deles, como iStock e Valorpix, onde

    voc pode comprar fotos e ilustraes em diversos

    tamanhos. H tambm bancos de imagens gratuitos,

    como Every Stock Photo e Free Digital Photos.

    Outra alternativa baixar fotos de comunidades virtuais

    novamente, o Flickr um dos exemplos. Mas tome

    cuidado, pois no qualquer imagem que pode ser

    reutilizada. Fique atento s regras de uso de cada site.

    Cuidados para salvar

    Agora que voc j tirou as fotos que pretende publicar

    no site, hora de salv-las em local seguro. Pode parecer

    banal, mas muito comum ouvir casos de pessoas que perderam horas e horas de

    trabalho, simplesmente porque deixaram de fazer backup. No cometa o mesmo erro.

    Essa tarefa, alis, pede algumas regrinhas. Grave sempre uma verso original ou cpia

    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

    imagens

    ACONTECE NO SEU SINDICATO

    Sabe aquela galeria de imagens da nova diretoria do seu

    sindicato? Se voc planeja coloc-las para download no

    site, fique atento para que tenham resoluo acima de 300

    dpi. Isso porque um jornalista, por exemplo, poder us-las

    para ilustrar uma matria de jornal feita com vocs.

    Mas no publique as fotos em alta resoluo no corpo da

    pgina, pois assim ela ficaria pesada demais para carregar.

    Basta disponibilizar os arquivos para download ou public-

    los em um site de compartilhamento gratuito como

    Flickr ou Fotki.

    Leia mais: captulo 7 Direitos Autorais

    imagens

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

    A resoluo de uma imagem indica sua densidade, quantificada pelo o nmero de

    pixels impressos ou exibidos por unidade de medida em geral, polegada. Quanto

    mais pixels (pontos) uma foto tiver, maior a sua resoluo e, consequentemente,

    sua qualidade. Para a exibio de imagens em tela de computadores, devemos ficar

    mais atentos s dimenses da imagem, para sabermos o tamanho relativo que ela

    ocupar na tela.

    J a dimenso nada mais do que o tamanho (rea) da imagem em polegadas ou

    centmetros, relacionando largura x altura. Agora, guarde esta regra: quanto maiores

    as dimenses de uma foto, maior dever ser a sua resoluo.

    Para facilitar a sua compreenso, imagine um suco de fruta concentrado. Quanto

    mais gua voc misturar, mais suco vai ter no copo, s que menos concentrado.

    Resultado: o produto final pode ficar ralo. O raciocnio o mesmo para explicar as

    diferenas entre dimenso e resoluo, como ilustram as imagens 3 e 4.

    Imagem 3Foto com resoluo adequada

    Imagem 4Qualidade prejudicada pela baixa resoluo

    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

    aumen tar 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.

    J o GIF um formato menos refinado, prprio para imagens chapadas, isto ,

    com pouca riqueza de detalhes e variaes de cores. Logotipos, ttulos e tabelas

    em imagem geralmente tm a extenso GIF. Faa voc mesmo o teste e compare

    os dois formatos.

    imagens

  • Manual de Webwriting PDA CNC | Captulo 5 Imagens e Multimdia 51

    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

    mais de 20 pessoas em uma reunio de trabalho, por exemplo, reduzi-la apenas no

    vai adiantar. Mesmo que no distora, a foto ficar incompreensvel para o usurio.

    O melhor escolher um pedao da imagem que faa sentido.

    Por exemplo: recorte o trecho em que um dos participantes aparece claramente

    prestando ateno ao que est sendo apresentado no encontro. Veja as imagens 5,

    6 e 7 para comprovar a diferena de um recorte bem feito em fotos reduzidas.

    Mas, se a foto no ficar boa mesmo assim, no perca tempo. Procure outra imagem

    que funcione melhor em dimenses menores.

    imagens

    redimensionamento

    Imagens 5, 6 e 7Foto original em tamanho maior, com uma verso apenas reduzida ( esquerda) e uma reduzida com recorteFonte: Divulgao/Fecomercio-AM

  • 52 Manual de Webwriting PDA CNC | Captulo 5 Imagens e Multimdia

    importante lembrar que diversas ferramentas de publicao permitem recortar

    imagens e redimension-las no ato da edio da pgina na web. A essa funo d-se

    o nome de crop (recorte, em portugus). Voc tambm pode fazer esses e outros

    ajustes com o auxlio de editores de imagens, como os gratuitos Serif PhotoPlus,

    Gimp ou Microsoft Picture Manager (embutido no Windows).

    Outra opo so os softwares que acompanham algumas cmeras digitais. Tenha

    isso em mente na hora de comprar a sua.

    Publicao e hospedagem

    Para tornar as imagens do site da sua organizao acessveis a mecanismos de

    buscas, como Google e Yahoo!, preencha sempre o atributo ALT. Trata-se de um

    texto alternativo que identifica a foto para os buscadores e aparece quando o

    usurio passa o mouse em cima da imagem. E ainda serve para ferramentas de

    leitura para cegos, um elemento importante de acessibilidade.

    Uma imagem no deve ser meramente ilustrativa. Como vimos anteriormente, um

    recorte bem feito ajuda a dar sentido foto. Mas voc tambm deve se preocupar

    com o seu posicionamento na pgina. Certifique-se de que a imagem ser publicada

    acima da barra de rolagem (scroll). Estudos de usabilidade indicam que o usurio

    presta mais ateno ao contedo exibido na parte superior do site.

    Ah, e no se esquea de incluir a legenda e o crdito da imagem!

    Tudo pronto? Agora ler atentamente ao manual de publicao do site, seguir o

    passo a passo e colocar sua imagem no ar.

    Voc poder turbinar a divulgao de imagens de eventos na empresa para alm do

    seu prprio site. Hoje, existem diversos servios on-line de fotogalerias, como Flickr,

    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.

    imagens

    acessibilidade

    Leia mais: captulo 2 Usabilidade e Arquitetura da Informao

    Leia mais: captulo 7 Direitos Autorais

    ACONTECE NO SEU SINDICATO

    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.

    At existe algum risco de fotogalerias on-line ficarem fora do ar momentanea-

    mente, devido a instabilidades tcnicas. Afinal, as imagens ficam hospedadas em

    servidores externos, de terceiros. Mas, se voc procura uma relao custo x bene-

    fcio imbatvel, esse um risco bem pequeno a assumir.

  • Manual de Webwriting PDA CNC | Captulo 5 Imagens e Multimdia 53

    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

    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.

    Tempo: as pessoas no tm pacincia para vdeos muito longos na web. O

    especialista em usabilidade Jakob Nielsen recomenda que as gravaes no

    ultrapassem um minuto de durao. Achou pouco? Pois , muito mais do

    que isso correr o risco de perder o interesse do usurio na sua mensagem.

    Custo: se voc dispe de recursos para contratar uma equipe ou manter

    equipamentos sofisticados de gravao de vdeo, parabns! Mas se esse no

    o seu caso, para que insistir em solues amadoras? Existem outras manei-

    ras interessantes e eficazes de despertar a ateno de potenciais clientes.

    Atratividade: certos cenrios e formatos so mais atraentes do que outros.

    Um vdeo pode ser bem roteirizado e surpreender o usurio com imagens

    impactantes e uma edio dinmica; por outro lado, tambm pode dar

    sono ao mostrar uma pessoa parada, falando por dez minutos. Alis, uma

    pesquisa de Nielsen enfatiza como vdeos montonos simplesmente passam

    despercebidos.3

    1 Fonte: Nielsen http://blog.nielsen.com/nielsenwire/online_mobile/americans-watch-moremobile-video-now-than-ever/

    2 Fonte: ComScore http://iabbrasil.ning.com/profiles/blogs/audiencia-do-youtube-no-brasil3 Fonte: http://www.useit.com/alertbox/video.html

    vdeos

  • 54 Manual de Webwriting PDA CNC | Captulo 5 Imagens e Multimdia

    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

    WMV (Windows Media Video)

    Pontos fortes: boa relao qualidade x peso

    Pontos fracos: s funciona na plataforma Windows

    MOV (Quicktime Video)

    Pontos fortes: boa relao qualidade x peso, multiplataforma, compatvel com Mac

    Pontos fracos: exige software de reproduo compatvel

    FLV (Flash Video)

    Pontos fortes: arquivos leves, popularidade do Flash, pr-instalado no Windows

    Pontos fracos: exige plug-in na verso compatvel com o vdeo

    Se o seu plano for subir os vdeos para um site de compartilhamento, como YouTube

    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.

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

    Escolhendo ferramentas de edio

    Existe uma infinidade de ferramentas de edio de vdeo, e naturalmente as melho-

    res so pagas. As mais conhecidas so Adobe Premiere Pro, Pinnacle e Sony Vegas

    Movie Studio. Caso esteja na dvida se precisa de um software profissional, voc

    pode baixar verses de teste da internet e comparar essas ferramentas com al-

    ternativas gratuitas.

    vdeos

    compartilhamento

    vdeos

    vdeos

  • Manual de Webwriting PDA CNC | Captulo 5 Imagens e Multimdia 55

    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.

    Na web, tambm h editores on-line como o Video Toolbox e o Stroome. Na maioria

    das vezes, eles so integrados ao YouTube, o que facilita a publicao. Em uma rpida

    pesquisa na web, voc encontrar uma srie de ferramentas gratuitas ou baratas para

    experimentar.

    E se o seu vdeo estiver em um formato incompatvel com o editor ou o publicador?

    Isso acontece em alguns modelos de cmeras e smartphones, mas tem soluo:

    baixe a ferramenta gratuita Any Video Converter, que permite a converso das exten-

    ses mais populares. Se preferir, procure outras opes, que no faltam no mercado.

    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:

    Descrever cada imagem no campo texto alternativo, para melhorar a acessibilidade

    Usar fotos e ilustraes preferencialmente no formato JPG

    Usar cones e grficos preferencialmente no formato GIF

    Publicar arquivos de udio no formato MP3 ou WMA

    Publicar vdeos em WMV, Flash Video ou outro formato compacto

    Subdividir udios ou vdeos extensos em blocos/captulos menores

    Subir imagens em baixa resoluo (consulte o Manual do Publicador)

    Observar as dimenses mximas de imagens, principalmente a largura

    Fazer melhorias bsicas a imagens quando necessrio (brilho, contraste)

    Recortar a foto, quando preciso, para


Recommended