Glucia Conceio Ventura

Salvador 2006

Criar meu web site Fazer minha home-page Com quantos gigabytes Se faz uma jangada Um barco que veleje Que veleje nesse infomar Que aproveite a vazante da infomar Que leve um oriki do meu velho orix Ao porto de um disquete de um micro em Taip Um barco que veleje nesse infomar Que aproveite a vazante da infomar Que leve meu e-mail at Calcut Depois de um hot-link Num site de Helsinque Para abastecer Eu quero entrar na rede Promover um debate Juntar via Internet Um grupo de tietes de Connecticut De Connecticut acessar O chefe da Macmilcia de Milo Um hacker mafioso acaba de soltar Um vrus pra atacar programas no Japo Eu quero entrar na rede pra contactar Os lares do Nepal, os bares do Gabo Que o chefe da polcia carioca avisa pelo celular Que l na praa Onze tem um videopquer para se jogar (Pela internet, de Gilberto Gil) 1

SUMRIO
A AUTORA INTRODUO USABILIDADE Navegao Avaliao LAYOUT Imagens Animaes e efeitos especiais Cores CONTEDO BANNERS PROGRAMAO DOMNIO E HOSPEDAGEM DIVULGAO MANUTENO CONCLUSO REFERNCIAS 03 04 05 05 06 07 08 08 09 10 11 12 13 14 15 16 17

A AUTORA
Glucia Conceio Ventura relaes pblicas e especialista em educao e tecnologias da comunicao e da informao pela Universidade do Estado da Bahia (UNEB). Trabalha no setor de gerenciamento de informaes, no qual tambm desenvolve projetos de web sites e sistemas de informaes. Tem diversos trabalhos publicados, dentre os quais o artigo A Aventura do Livro: Vantagens e desvantagens da sua viagem pelo meio eletrnico no jornal portugus A Pgina da Educao e nos sites http://www.revista.unicamp.br/ infotec/artigos/glaucia.html e www.facom.ufba.br/pretextos/glaucia.html e o artigo Educao a Distncia no Brasil e no Canad: Vises, paisagens e perspectivas, na Revista Interfaces, da Associao Brasileira de Estudos Canadenses (ABECAN). E-mail: galventura@ig.com.br

INTRODUO
Na era virtual, fundamental a comunicao de idias, produtos e servios, de maneira dinmica, atravs de um web site. Mas preciso criar um site com um design inteligente e que atenda as necessidades e expectativas dos usurios, o qual exige um planejamento. Antes de comear a planejar um site, preciso pensar em algumas questes, tais como a viso que se pretende passar com o site, a qual pblico se destina, quais as necessidades desse pblico e como disponibilizar as informaes com o mximo de praticidade. O objetivo desta apostila apresentar dicas extradas de livros, manuais e da prpria experincia da autora para orientar aqueles que pretendem fazer um site, fundamentado no conceito de usabilidade, ou seja, que torne mais prtico e fcil o caminho entre o usurio e a informao.

USABILIDADE
O conceito de usabilidade, apesar de pouco percebido em nosso dia-a-dia, fundamental na confeco de produtos e sites, para que eles e a nossa vida fiquem cada vez mais simples. De acordo com a norma ISO 9241 de qualidade, usabilidade a "capacidade que um sistema interativo oferece ao seu usurio, em um determinado contexto de operao, para a realizao de tarefas, de maneira eficaz, eficiente e agradvel". Podemos destacar algumas sugestes que podem aumentar a satisfao do usurio: repetir padres para facilitar a identificao; criar atalhos para diminuir o nmero de cliques at a informao desejada; oferecer respostas rpidas s aes dos usurios para no deix-los com dvidas; e evitar menus muito extensos para que seja possvel memorizar as suas opes.

Seguem alguns endereos de sites que tratam de usabilidade: Useit.com: usable information technology www.useit.com Thinking Critically about World Wide Web Resources www.library.ucla.edu/libraries/college/help/critical/index.htm

Navegao fundamental a um bom web site ter um sistema de navegao eficiente. Para isso, necessrio pensar sobre o que os usurios buscam e de que forma possvel facilitar essa busca. Antes de comear a desenvolver o site, faa um projeto com as sees e subsees que pretende criar e, em seguida, planeje a organizao do site de modo que o usurio chegue o mais rpido possvel informao desejada.
5

Avaliao Seguem alguns endereos que apresentam sugestes de listas de critrios e especificaes para avaliar a usabilidade de um web site: Checklist para avaliar a usabilidade de web sites (em ingls) www3.sympatico.ca/bkeevil/sigdoc98/checklist/WebCheck_Sep13.html Critrios para avaliar o interesse de um site. (em ingls) www.multcolib.org/homework/webeval.html Cinco critrios para avaliar sites. (em ingls) www.library.cornell.edu/okuref/webcrit.html

LAYOUT
Um web site precisa de arte grfica de qualidade para transmitir uma boa impresso e mostrar claramente os seus objetivos. Lima (2001) aborda os quatro princpios do Design, os quais esto inter-relacionados: proximidade, alinhamento, repetio e contraste. Segundo o princpio de proximidade, itens relacionados entre si devem ser agrupados e aproximados, tornando-se uma unidade visual, um conjunto coeso, no devendo ficar as informaes espalhadas na pgina, pois transmite uma aparncia desorganizada e possvel que as informaes no estejam acessveis ao usurio. Do mesmo modo, os itens ou conjuntos de informaes que no estejam relacionados entre si no deveriam estar prximos. Assim, a pgina fica mais organizada e possvel saber por onde comear e onde termin-la. Alm disso, o espao em branco (ao redor das letras) tambm fica mais organizado. Agrupar itens relacionados pode implicar em fazer algumas alteraes como tamanho, peso, posicionamento de texto e de figuras. O texto no precisa estar com 12 pontos e as informaes subordinadas mensagem principal podem ser menores, com 7 ou 8 pontos. Evite muitos elementos separados em uma pgina. No coloque os itens somente nos cantos e no meio da pgina. Evite tambm deixar quantidades iguais de espaos em branco entre os elementos, a no ser que cada conjunto seja parte de um subconjunto. O princpio de alinhamento orienta que nada deve ser colocado arbitrariamente em uma pgina. Cada item deve ter uma conexo visual com algo na pgina. O alinhamento centralizado o mais usado pelos iniciantes. muito seguro e a sensao de us-lo de conforto. Cria uma aparncia mais formal, mais comum e sem brilho. Mas experimente combinar o alinhamento esquerda ou direita com o bom uso da proximidade e poder obter timos resultados. Cuidado com o alinhamento justificado e apenas utilize-o se as linhas do texto puderem ter uma largura tal que evite a formao de vazios entre as palavras, os quais tornam a aparncia desagradvel. O importante estar consciente do posicionamento dos elementos na pgina. Evite usar mais de um alinhamento de texto por pgina. Evite o alinhamento centralizado por automao, exceto se voc
7

tiver o objetivo consciente de criar uma apresentao formal, pacata, que costuma ser bastante comum. Segundo o princpio de repetio, algum aspecto do design deve se repetir no material inteiro. O elemento repetitivo pode ser uma fonte em negrito, uma linha grossa, algum sinal de tpico, etc. A repetio pode ser considerada como consistncia, porm, vai alm disso. Trata-se de um esforo consciente para unificar todos os elementos do design, estabelecer uma continuidade sofisticada e despertar o interesse visual. O recurso da repetio muito til quando for uma s pgina e essencial quando for muitas. No entanto, preciso evitar a repetio excessiva e ter conscincia do valor do contraste, ltimo princpio. Se dois itens no forem exatamente os mesmos, diferencie-os completamente. O contraste uma das maneiras mais eficazes de acrescentar algum atrativo visual a uma pgina, criando uma hierarquia organizacional entre diferentes elementos. um ponto crtico na organizao das informaes; o usurio sempre deve ser capaz de, primeira vista sobre o material, compreender imediatamente o que ele representa. Podemos encontrar os contrates de vrias maneiras: uma letra grande com uma pequena, uma cor fria com uma quente, etc. Os elementos contrastantes no devem confundir o usurio ou criar um foco que no seja o correto. No tenha medo de ousar, ser assimtrico, criar seu prprio design. Imagens Use imagens como paisagens, logotipos ou cones para aprimorar a aparncia das pginas Voc pode criar essas imagens no computador ou copi-las da web (certificando-se se no esto protegidas por copyrigth) ou usar um scanner para digitalizar a partir de um material impresso. Utilize formatos mais leves como o GIF e o JPG. Animaes e efeitos especiais Voc pode dinamizar a apresentao do seu site com animaes em Flash, que aumentam a interatividade, curiosidade e explorao. Porm, cuidado para no deixar o site pesado, demorando no carregamento. O mesmo cuidado serve para os sons de fundo da pgina. Alm do mais, possvel que no seja do estilo do usurio ou que ele j esteja escutando outra msica e isso pode atrapalhar.
8

Cores preciso tomar cuidado com cores extravagantes e com as combinaes. Por exemplo, evitar letras claras em fundos claros ou letras escuras em fundos escuros. O mesmo recomendado para os backgrounds, ou planos de fundo. O importante deixar o site legvel e bonito para passar uma boa impresso. Segue a tabela de cores (RGB) para a linguagem HTML com os respectivos cdigos.
Tabela de Cores
000000 003300 006600 009900 00CC00 000033 003333 006633 009933 00CC33 00FF33 330033 333333 336633 339933 33CC33 33FF33 660033 663333 666633 669933 66CC33 66FF33 990033 993333 996633 999933 99CC33 99FF33 CC0033 CC3333 CC6633 CC9933 CCCC33 CCFF33 FF0033 FF3333 FF6633 FF9933 FFCC33 FFFF33 000066 003366 006666 009966 00CC66 00FF66 330066 333366 336666 339966 33CC66 33FF66 660066 663366 666666 669966 66CC66 66FF66 990066 993366 996666 999966 99CC66 99FF66 CC0066 CC3366 CC6666 CC9966 CCCC66 CCFF66 FF0066 FF3366 FF6666 FF9966 FFCC66 FFFF66 000099 003399 006699 009999 00CC99 00FF99 330099 333399 336699 339999 33CC99 33FF99 660099 663399 666699 669999 66CC99 66FF99 990099 993399 996699 999999 99CC99 99FF99 CC0099 CC3399 CC6699 CC9999 CCCC99 CCFF99 FF0099 FF3399 FF6699 FF9999 FFCC99 FFFF99 0000CC 0033CC 0066CC 0099CC 00CCCC 00FFCC 3300CC 3333CC 3366CC 3399CC 33CCCC 33FFCC 6600CC 6633CC 6666CC 6699CC 66CCCC 66FFCC 9900CC 9933CC 9966CC 9999CC 99CCCC 99FFCC CC00CC CC33CC CC66CC CC99CC CCCCCC CCFFCC FF00CC FF33CC FF66CC FF99CC FFCCCC FFFFCC

0000FF
0033FF 0066FF 0099FF 00CCFF

00FF00
330000 333300 336600 339900 33CC00 33FF00 660000 663300 666600 669900 66CC00 66FF00 990000 993300 996600 999900 99CC00 99FF00 CC0000 CC3300 CC6600 CC9900 CCCC00 CCFF00

00FFFF
3300FF 3333FF 3366FF 3399FF 33CCFF 33FFFF 6600FF 6633FF 6666FF 6699FF 66CCFF 66FFFF 9900FF 9933FF 9966FF 9999FF 99CCFF 99FFFF CC00FF CC33FF CC66FF CC99FF CCCCFF CCFFFF

FF0000
FF3300 FF6600 FF9900 FFCC00

FF00FF
FF33FF FF66FF FF99FF FFCCFF FFFFFF

FFFF00

Fonte: http://www.geocities.com/ensinandohtml/cores_html.htm Acesso em 12 ago 2006.

CONTEDO
O contedo a alma de qualquer projeto, o que motiva o acesso s informaes e o que gera experincias positivas com a idia que se quer transmitir no site. Assim, a produo de contedo tem que ser planejada e apresentar as informaes no tempo e lugar certos para criar fidelidade com o usurio, estreitar o relacionamento e possibilitar o surgimento de novos usos desse canal. As pessoas buscam e esperam obter produtos e servios de valor. Valor quando voc respeita seu pblico e lhe entrega informaes interessantes e confiveis. O trabalho de produo contedo que leva isto em conta traz, naturalmente, retorno e gera crculos virtuosos e novos relacionamentos. Informao relevante e original essencial em todo o processo de produo de contedo. S assim possvel atrair e manter cada vez mais pessoas interessadas em seu site e naquilo que ele est oferecendo. Credibilidade no se inventa, construda no cotidiano. No adianta todo o brilho e movimento de animaes feitas em flash se os usurios no encontram as informaes que desejam. Por isso, procure investir nisso, em trazer informaes de valor aos seus usurios e apresente-as de forma clara e objetiva, identificando as devidas fontes e utilizando a linguagem adequada ao perfil do pblico que freqenta o seu site. Rena as informaes relacionadas ao tema do seu site (glossrios, estatsticas, links afins, etc) e organize em sees, colocando cada seo em uma pgina. Cada pgina dever conter um conceito ou idia diferente e contedo suficiente para preencher em uma nica tela. No esquea de fazer uma reviso ortogrfica e gramatical do texto de suas pginas antes de public-las.

10

BANNERS
Voc pode vender espaos em seu site para publicidade, mas para isso voc precisa ter estatsticas de acesso favorveis, que sejam atraentes aos anunciantes. Normalmente esses anncios so feitos por meio de banners em formatos padronizados de 468 x 60 pixels (full-banner) ou 234 x 60 pixels (halfbanner). Existem trs formas de cobrar por estes anncios em sites: Taxa fixa: o anunciante paga por um perodo fixo de tempo para ter seu banner exposto no site; CPM (Custo Por Mil): o anunciante paga pelo nmero de aparies que ele quer do banner (semelhante ao que ocorre em rdio e televiso); CPC (Custo Por Clique): o anunciante paga pelo nmero de visitantes que o banner receber.

A respeito de banners, recomenda-se cautela para no poluir o site, nem irritar o usurio com pop-ups insistentes.

11

PROGRAMAO
A linguagem de programao da Web a HTML (HeperText Markup Language), que pode ser portada de uma plataforma computacional para outra. Trata-se de uma linguagem bastante simples e que tem como finalidade bsica formatar o texto exibido e criar ligaes entre as pginas, gerando documentos com o conceito conhecido como hipertexto. Como qualquer outra linguagem de programao, o desenvolvedor deve, seguindo as regras de sintaxe da mesma, escrever o cdigo-fonte, que ser interpretado pelo navegador, que, por sua vez, encarregar-se- de executar os comandos ou tags para formatar e acessar os recursos da Web. Esse cdigo fonte pode ser escrito usando os mais simples editores de texto at mesmo o Bloco de Notas (Notepad), do Windows. Para facilitar ainda mais o trabalho com essa linguagem, os editores e gerenciadores de pginas mais utilizados so o Front Page, da Microsoft, e o Dreamweaver, da Macromedia.

12

DOMNIO E HOSPEDAGEM
Registre o seu endereo. Um domnio registrado um patrimnio. Ter um domnio significa ter uma identidade nica e exclusiva em toda a Internet. Escolha nomes simples, que facilitem a divulgao do site. Voc s pode registrar um domnio se j existir na Internet pelo menos dois servidores de DNS que possam se responsabilizar por ele. por isso que voc precisa dos servios de uma empresa de hospedagem, pois ela vai configurar os dois servidores DNS necessrios ao registro. Existem muitos lugares que hospedam sites gratuitamente, mas tambm existem aqueles que cobram, em sua maioria os grandes provedores de acesso, nos quais existe uma maior segurana e que podem ser mais adequados, dependendo do tipo de informao que ser disponibilizada. Seguem alguns endereos que oferecem servio de hospedagem grtis: www.geocities.com www.angelsfire.com www.hpg.com.br

13

DIVULGAO
Para atingir o seu pblico, voc deve dar visibilidade ao seu site atravs da incluso do seu endereo em mecanismos de busca por palavras-chave, indexao nos sites de busca por assunto ou ainda por meio de envio de e-mail marketing a listas de e-mails segmentadas conforme o perfil do pblico que deseja atingir. Seguem alguns dos sites mais utilizados para busca: Google: www.google.com Altavista: www.altavista.com Yahoo: www.yahoo.com.br UOL: www.uol.com.br Terra: www.terra.com.br

14

MANUTENO
Verifique sempre se as pginas esto sendo visualizadas corretamente nos diversos navegadores Netscape, Internet Explorer, etc levando em conta tamanho da tela, texto e imagens e resoluo de cores. A atualizao de um site deve ser constante. Deve-se remover do servidor pginas que se tornem obsoletas e criar novos formatos e servios que visem a satisfao dos usurios, evitando, porm, alteraes no design e nos nomes das sees. Existem sites que disponibilizam testes, buscando erros de programao em suas pginas e problemas de compatibilidade de navegadores ou de links quebrados. Seguem alguns endereos eletrnicos que disponibilizam este tipo de teste: Web Site Garage: http://www.websitegarage.com/ Web Site Clinic: http://www.ambf.com/webclinic/ Seven Twenty Four: http://www.seventwentyfour.com/

15

CONCLUSO
Acredito que um web site ideal deve combinar beleza e usabilidade. Por isso, espero que as dicas aqui apresentadas possam contribuir para o planejamento de um web site bem sucedido, que atenda aos interesses e expectativas do seu pblico. Recomendo tambm que mantenha um registro de seus planos e idias originais e que consulte-o durante o processo de desenvolvimento do site. importante prever futuras expanses do site e assim fazer um projeto de sistema de navegao que possa sofrer pequenas alteraes, sem a necessidade de redefinio de todo o layout. Para finalizar, no podemos esquecer, ao planejar um site, que embora sejam sempre disponveis no mercado recursos cada vez mais avanados, o acesso da populao de um modo geral s novas tecnologias no se d com a mesma rapidez. Por isso, devemos ter cautela e evitar a utilizao de recursos no site que, em vez de facilitar a chegada do usurio informao, acabe impedindo esse processo.

16

REFERNCIAS
101 Dicas: Segredos de Web sites de sucesso. So Paulo: Digest Books, 2004.
LIMA, Veronica. Tcnicas para Web Design & HTML: Projetando e Construindo Home Page. Rio de Janeiro: Book Express, 2001.

http://www.anunciato.com.br/conteudo/conteudos/conteudo_producao_de_cont eudo.htm/ Acesso 12 ago 2006. RICCI, Juliana. Conceito de usabilidade facilita navegao em sites e gera boas opes de trabalho. In: http://carreiras.empregos.com.br/carreira/ administracao/planejamento/131004-usabilidade_internet.shtm Acesso em 12 ago 2006.

Produo de contedo: Na Internet quem tem contedo rei. In:

17