PROJETANDO WEBSITES COMPATÍVEIS

LUCIANO HENRIQUE GOMES DE ALMEIDA

Faculdade de Tecnologia de João Pessoa - FATEC.

Rua: José Liberato, 437 - Miramar - João Pessoa - Paraíba, e-mail: falecom@lucianohenrique.com – Website:
http://www.lucianohenrique.com

RESUMO

O objetivo desse artigo é mostra de ma neira bem simples e de forma metodológica o processo
de Planejamento e produção de projetos em ambiente da internet. Pois na construção de um
Website, quando não se usa as regras de Gestão de Projetos, pode gerar perdas de renda ou, o
que é pior, prejuízos incalculáveis para as organizações.

ABSTRACT

The aim of this article is shown on a very simple manner and methodology of the process of
planning and production projects in the Internet environment. Because the construction of a
website, not when the rules of USA Project Management, can generate income or loss, which
is worse, incalculable damage to the organizations.

Palavras-chave: Website, Arquitetura da Informação, Governança em TI Web, Padrões Web

em Websemântica, Usabilidade e Acessibilidade.
INTRODUÇÃO

O ambiente competitivo e globalizado tem levado as organizações a viverem em

permanente estado de mudança, para alcançar um diferencial nas relações comerciais de
produto ou serviços. A forma eficaz de lidar com isso é empreender ações conduzidas na
forma de projetos.
Outra analise que fazemos hoje em dia é a importância do grau de planejamento. Pois
as primeiras experiências na construção de Websites mostraram que uma abordagem informal
no desenvolvimento não era o bastante para se obter sucesso nos processos.
O que mais acontecia era serviços sem qualidade, com orçamentos caros e, além disso,
sofreriam grandes atrasos de cronograma para lançamento. Nesse período não se usava de
metodologias para o desenvolvimento desses serviços e para garantirmos uma qualidade no
processo de desenvolvimento e também no produto final e no mais importante que era o ROI
(Return On Investment - Retorno sobre o investimento) para o cliente.
Segundo o Chaos Report (2004) “somente 1/3 dos projetos de software são concluídos
de forma satisfatória”.
A idéia principal é como desenvolver um Website com qualidade, usando uma
metodologia específica e também com uso de técnicas de engenharia de software, o
desenvolvimento serviços web tem de gerar um produto que por si só seja eficaz, em tempo
hábil, e com orçamento previsível.
TIPOS DE WEBSITES

Os Websites podem ser divididos em duas categorias que se chamam: "estáticos" ou

"dinâmicos". Ou podemos ter, também, Websites estáticos com elementos dinâmicos
inseridos em seu conteúdo.

• Website ESTÁTICO: Aonde as páginas foram previamente montadas e são

atualizadas periodicamente utilizando editores de HTML (linguagem de marcação de
hipertexto).
• Website DINÂMICO: Aonde existe um modelo prévio das páginas, mas seu conteúdo
é montado dinamicamente (em tempo real). Está associado ao uso de Banco de Dados.
Exigem em seu projeto o concurso de um profissional chamado "Desenvolvedor Web"
(programador web). O conteúdo é normalmente gerenciado por um CMS (Sistema de
gerenciamento de conteúdo) com preenchimento de simples formulários. Nesse
modelo o administrador do Website não precisa ter conhecimento da codificação.

Veja abaixo a lista de Websites comerciais, mas comuns na atualidade.

• Institucionais – É a maneira mais rápida e eficiente de transmitir suas informações

institucionais, apresentar sua empresa e seus produtos e abrir um canal de
comunicação com clientes e fornecedores;
• Portais – São as páginas na internet que servem como ponto de acesso direto a um
conjunto de serviços e informações. Os portais podem ser horizontais - permitindo
acesso a vários tipos de informação e serviços - ou verticais - concentrando links para
conteúdo sobre um assunto específico;
• Profissionais Autônomos – Websites relacionados aos serviços do profissional liberal
aonde exibe as informações básicas e processos para aplicação de trabalho;
• Diversão – São Websites de lazer e entretenimento, Humor, Cartoons, Anedotas,
Charadas, Sátiras, Colecionadores e links de empregos, relacionamentos;
• Comércio Eletrônico – Conceitua-se como o uso da comunicação eletrônica e digital,
aplicada aos negócios, criando, alterando ou redefinindo valores entre organizações
(B2B) ou entre estas e indivíduos (B2C), ou entre indivíduos (C2C), permeando a
 aquisição de bens, produtos ou serviços, terminando com a liquidação financeira por
intermédio de meios de pagamento eletrônicos;
• Pessoais – Em geral são mantidos por apenas uma pessoa, com ou sem colaboradores,
cujo conteúdo pode incluir dissertações, poesias, relatos pessoais, comentários sobre
assuntos diversos e etc.
Educação – O Website é uma extensão da sala de aula, aonde observamos informações sobre:
vestibular, banco de imagens, bate-papo, guia de profissões, diversos links, textos e artigos.

AMBIENTES PARA WEBSITES

O Website é o conjunto de arquivos eletrônicos com extensões diversas e tem que

funcionar igualmente bem em vários tipos de Browsers (navegadores de internet), mesmo que
o mais comum seja o Internet Explorer© da Microsoft, mas há também o Opera©, Mozilla©
(hoje Mozila Firefox), Konquerer (um browser do ósmio de Linux) e outros e o meu novo do
grupo de navegadores que é o Chrome da gigante Google. O projeto tem que funcionar em
todas as plataformas (Sistemas operacionais) de computadores, por exemplo, do PC, do
Macintosh, do Linux e do UNIX, também com diferentes das definições de monitores (800 x
600, 1.024 x 768 etc). Outro ponto importante é tempo de carregamento da página, se as
páginas no Website forem desordenadas com gráficos, animações e/ou programação com
erros fazem a página demorar em carregar, isto é péssimo do ponto da opinião o usuário
porque a maioria certamente sairá do seu Website, indo para um Website melhor, assim todas
suas páginas do seu Website deve carregar rapidamente para despertar o interesse do usuário.

ACESSIBILIDADE E USABILIDADE

A acessibilidade é um dos conceitos que ganhou foco da web há pouco tempo, quando
deficientes visuais começaram a ganhar processos judiciais contra empresas que tinham
Websites sem uma versão que pudesse ser acessada por usuários com programas leitores de
tela.
A acessibilidade não contempla apenas à deficiência visual: um Website acessível
deve ter sido construído preocupando-se sempre com o que ele vai exigir também de
capacidade motora, recursos técnicos, largura de banda e capacidade auditiva.
 Vale lembrar que um Website com uma abertura em Flash pesada, sem a opção de
pular esta abertura para exibir o conteúdo, não será acessado corretamente por pessoas que
utilizam conexão discada ou que não tenham instalado o Plugin da Abode Flash player.
As páginas que exigem que o usuário clique em pontos específicos da tela, como a
tecnologia Ajax que arrastem elementos ou movam barras de rolagem estreitas exigem uma
coordenação motora difícil para usuários com braços comprometidos, problemas nervosos ou
visão limitada.
O W3C, que é o consórcio responsável pela criação e homologação de padrões para a
internet, apresenta um conjunto de 14 diretrizes a serem seguidas pelos desenvolvedores para
garantir que o Website seja acessível por qualquer pessoa que esteja interessada nele.
“Se eu não entendo, eu não clico.”
É assim que Sérgio Carvalho (revista Webdesign nº11 - 11 de 2004), um dos mais
respeitados consultores em usabilidade do país, define o pensamento do usuário que utiliza
um Website com informações mal trabalhadas.
A usabilidade deve ser percebida pelo Webdesign não como um conjunto de regras
que restringem a sua criatividade, mas sim como uma forma de dar mais qualidade na
interação entre o seu produto e o usuário que em nosso caso é o internauta. Logo abaixo
vamos verificar alguns pilares de sustentação da usabilidade em ambientes de internet.
Sabendo que a chave é o usuário, suas experiências e a facilidade de interação. Temos
que para desenvolver um ambiente Website que se destaque pela usabilidade é preciso
considerar quatro dos conceitos básicos abaixo:

1. Foco no usuário – é preciso saber, e entender bem como é feito o raciocínio

do usuário e trabalhar com pessoas que representem usuários atuais e
potenciais para o Website.
2. Foco na produtividade – aonde é preciso entender quais são os reais
objetivos dos usuários ao acessar o Website.
3. Foco no tempo – é preciso considerar que as pessoas têm pouca paciência e
quanto mais intuitivo for o Website, maior será o sucesso a ser alcançado
pelo Website.
4. Foco na decisão – não são os desenvolvedores ou designers que
determinam quando um Website é fácil de utilizar.
 Para termos uma idéia do grau da importância da adoção desses padrões, o nosso
mercado governamental realizou um decreto de lei que tem o como número 5.296, que fala da
acessibilidade e usabilidades em Websites governamentais (federal, estadual e municipal),
pois o objetivo de aplicar essas metodologias como lei é dar força ao processo de inclusão e
socialização dos “grupos” ao meio digital. Podemos ver maiores informações sobre esses
padrões nas referências desse artigo.

WEBSITES OTIMIZADOS

A construção de um Website é uma tarefa que consome um determinado tempo

mediante a complexidade do projeto que pode levar alguns minutos ou meses de trabalho. Se
alguém ou alguma empresa deseja uma posição sólida, destacada e duradoura nos
mecanismos de busca da internet deve ter em mente que a construção ou reformulação do seu
Website é uma tarefa complexa. Para dar uma idéia melhor sobre o assunto, vamos ver
resumidamente as etapas de construção de um Website, só existe um procedimento que é feito
em todas as etapas do desenvolvimento que é a coleta de informações (particular em cada
etapa da produção/desenvolvimento), e que o prazo máximo está no prazo do projeto e essas
informações são coletadas dos Stakeholders (todos os envolvidos no projeto, por exemplo,
clientes, colaboradores, investidores, fornecedores, comunidade).
Planejamento – No momento de planning ou planejamento são decididas ações como :
Serviços da empresa, Objetivo/problema a ser resolvido, Principal diferencial a ser explorado,
Público alvo (quem compra/consome), Concorrência direta e indireta (endereço dos
eletrônicos), Instruções específicas/obrigatoriedades-dados técnicos que devem constar no
Website e etc. Todas essas informações são registradas no briefing (primeira documentação
do Website), como também faz parte do planejamento o tamanho aproximado do site, quais
programas serão utilizados nas páginas e no servidor (Computador onde são guardados os
arquivos do Website), que tipo de hospedagem é ideal, se a visita vira de um mecanismo de
busca específico como, por exemplo, os Websites de busca o como Google, Yahoo, Terra,
UOL, Portais locais ou se abrangerá todos eles, estratégia de Webmarkting (Marketing no
ambiente de Internet) que tem ação de fora da página.
Tema do Website – O tema permanece em todas as suas páginas e sua definição é
importantíssima porque os rastros que um Website deixa em outros. O nascimento de um
projeto criativo na internet dificilmente surge do nada e quase sempre passa por um processo
rígido de concepção para alinhar a idéia ao objetivo inicial. Durante a primeira reunião, um
dos primeiros passos é identificar os pontos-chave que serão trabalhados. Depois, começa o
processo de idéias diversas entre os participantes e esse processo chama-se Brainstorm
(momento de compartilhar idéias) aonde idéias não podem ser descartadas e qua nto mais
livres e sem regras for esse processo, melhor. E os melhores amigos nessa hora são o papel e a
caneta.
Escolha das Keywords (palavras-chave) – São conhecidas também como tags, ou seja,
frases que os usuários informam a um mecanismo de busca a procura de certa informação.
Essas palavras devem ser incluídas no código HTML para auxiliar na consulta do Website.
Hoje alguns serviços de buscas já dão um retorno melhor perante as palavras-chave,
como por exemplo, o Google trands (www.google.com/trends) que trans informações de
palavras consultadas com diversos filtros e que vai ajudar e muito os serviços de
Webmarkting.
Os programas de pagamento por clique oferecem listas de palavras e frases
relacionadas com os diversos temas, mas eles não trazem indicação da quantidade de pessoas
que buscam ou digitam tais palavras ou frase. Logo, eles servem apenas para ampliar o leque
de palavras ou frases que poderão ser chave na construção do Website.
Atualmente temos outro modelo de medida para popularidade que são os stickness,
palavra essa que pode ser traduzida como tempo de permanência on- line no Website, e que
também é a métrica que aponta quanto tempo cada visitante interage em cada sessão visitada
pelo internauta. Esse é melhor o indicativo de que seu Website está atraindo audiência, ou
seja, um grupo considerável de pessoas que têm como hábito voltar e ficar um bom tempo
interagindo com seu conteúdo e também é uma maneira de medir o feedback para os
anunciantes.
Projeto do Website – De posse dos dados citados acima, faz-se um projeto preliminar
do Website. Nele estarão estabelecidas coisas como as diversas sessões do Website, as
páginas em cada sessão, a apresentação das sessões, das sub-sessões (e de páginas,
dependendo do caso) na home page (página inicial, página de apresentação que é
desenvolvida em um programa de animação para dar maior emoção ao serviço/produto), os
critérios de navegação dentro do Website, as etapas de desenvolvimento, as imagens que
serão usadas, os textos e autores dos mesmos, representantes da empresa que acompanharão o
desenvolvimento do projeto e suprirão o desenvolvedor com os dados necessários, as
linguagens que serão usadas no código fonte. Depois de executadas algumas páginas verifica-
se se os resultados são bons e, em caso afirmativo, desenvolve-se todo o projeto.
 Escolha do Nome do Domínio – O nome do domínio é importante porque é levado em
consideração por alguns mecanismos de busca na determinação do posicionamento. Sempre
que possível, deve-se colocar alguma(s) palavra(s) da frase-chave primária no domínio.
Entretanto, um nome de domínio desvinculado das palavras e frases-chave, como o nome da
empresa não é impedimento para se chegar ao topo de qualquer mecanismo de busca para
assumir um ranqueamento melhor nos Websites de consulta como o Google e Yahoo, é
necessário registrar também domínios com nomes similares e variações com .com e com.br.
Registro do Domínio – O domínio pode ter apenas a extensão .com ou ter também a
extensão .br Em outras palavras, será registrado nos Estados Unidos ou no Brasil. E como
bem mostrando acima na escolha de nomes similares, também é possível registrar domínios
variados em uma única empresa de registro. Hoje existe uma preferência do registro
internacional .com (Estados Unidos) pelas seguintes razões: é muito mais fácil de ser
registrado (a burocracia brasileira está presente aqui também), são mais flexíveis, as
renovações são mais tranqüilas, é mais barato, é uma extensão universal, tivemos sim um
amadurecimento no registro de .com.br, como o registro com apenas um CPF e maior número
de publicações que agora acontece a cada meia hora para domínios nacionais.
Hospedagem – A escolha da hospedagem deve gastar o tempo que for necessário para
se chegar à conclusão de que foi feita a melhor escolha. Dela resultará, por exemplo, um
acesso rápido ou lento que pode resultar na perda de potenciais clientes, presença constante no
ar ou ausências (também perda de clientes), perda de posição nos mecanismos de busca
porque alguém aplicou golpe sujo na otimização (isso pode ocorrer quando o(s) IP(s) é (são)
compartilhado(s)). Depois de experimentar um servidor virtual com plataforma robusta.
A hospedagem pode ser feita pelo cliente com uma estrutura própria ou alugando um
espaço virtual em empresas especializadas. E hoje em dia é mais comum fazer essa segunda
escolha, pois montar uma estrutura para atender as necessidades do cliente no dia de hoje não
é simples e os custos ainda são muito altos. Por isso devemos planejar os objetivos que
queremos cumprir e os recursos que necessitaremos para implantar o projeto.
Design do Website – O design ou layout como é mais conhecido é um modelo que
será reproduzido em todas as páginas do Website, deve reproduzir uma personalidade da
empresa ou do proprietário e/ou dos visitantes e também criar uma homogeneidade com a
comunicação visual da empresa. Se o público alvo são os jovens, espera-se um design, mas se
a empresa é uma funerária, espera-se algo muito diferente. Se a empresa é sólida e quer passar
ou reforçar a imagem da sua solidez, o design poderá contribuir para isso através da escolha
das cores, do tipo e tamanho das fontes, da disposição dos elementos das diversas páginas. O
design básico deve definir também os menus e suas colocações nas páginas, um exercício
muito bom para focar o layout com a imagem da empresa é a personificação.
Personificar é relacionar as características físicas e de personalidade do público-alvo a
um personagem e a partir desta listagem criar um conceito para o Website, veja logo abaixo
alguns princípios básicos da comunicação visual, aonde se pode seguir para a criação web.

1. O princípio de organização: ofereça ao usuário algo simples, limpo e de

estrutura consistente.
2. O princípio de economia: tente aumentar a eficiência utilizando poucos
recursos ou elementos visuais.
3. O princípio da comunicação: Adapte sua apresentação a capacidade de
compreensão do seu público-alvo.

Outra maneira de desenvolver o layout é realizar o estudo de referência que é uma

pesquisa realizada nos meios digitais para analisar a concorrência em serviços e linguagem
visual. O que deve ser observado que é esse exercício e um estudo para criação e não deve ser
feio uma cópia por conta da proibição do direito autoral.
Montagem das Páginas – a primeira página a ser montada deve ser a home Page
(página inicial), que inevitavelmente sofrerá mudanças no transcorrer do desenvolvimento do
projeto e a outra (as) são páginas ditas como secundárias, pois portam as informações
oriundas de cliques da página principal como também visitas vindas de buscadores (Websites
de busca), outra página que não pode faltar é a de mapa do Website, pois da ao internauta uma
liberdade maior na navegação é importante lembrar que o processo de montagem deve seguir
as normas da W3C com um padrão Web Standard (padrões web).
Segundo Maurício Samy (2003 o Maujor), “Web Standards é um conjunto de normas,
diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pelo
W3C e destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas
que possibilitem a criação de uma Web acessível a todos, independentemente dos dispositivos
usados ou de suas necessidades especiais”.
Testes de validação de código – Além dos testes que são feitos rotineiramente à
medida que se constrói cada página nos navegadores off- line em editores de códigos, é
necessário submeter todo o Website a testes gerais de validação do código (X)HTML. Esses
testes são mais ou menos completos dependendo da complexidade do projeto e podem ser
realizado no CSS Validation Service (http://jigsaw.w3.org/css-validator/).
 Configurar o Servidor – Dependendo do tipo de hospedagem escolhida poderá ser
necessário configurar o servidor, ou adicionar ao servidor programa(s) previamente escolhido
e metodologias de segurança para determinados níveis de informação trafegada, por exemplo,
se o projeto foi uma loja virtual ou e-commercer, é necessário instalar nesse serviço
protocolos de segurança como também softwares (programas) como também selos de
criptografia (conjunto de métodos e técnicas destinadas a proteger uma informação).
Upload – Fazer o upload do Website completo ou de partes. É conveniente colocar o
Website na internet antes de ele estar totalmente pronto. Isso possibilitará que outras pessoas
o acessem e de opiniões. E é também nesta etapa que é realizada testes de usabilidade e
acessibilidade com os stackholds ou grupo de teste previamente selecionado pela empresa
desenvolvedora.
Faze de Testes – Depois que o Website está na internet (on-line) são necessários vários
testes. Nesta faze pode ser utilizado robots (robôs - programas de computador que percorre
automaticamente as páginas da Internet) para testa a existência de links quebrados, além de
testes de desempenho no servidor para os serviços de banco de dados e estabilidade on-line no
Website.

APONTAMENTOS NECESSÁRIOS EM OBSERVAÇÃO

Se depois de realizar a primeira etapa de teste e for encontrado um problema, deve ser
feita uma analise e voltar para a etapa aonde foi identificado o erro. Uma dica é registrar o
problema para criação de uma documentação e assim facilitar a produção e planejamento de
outro projeto.
Como há a dependência de prazos e de aprovação por parte dos clientes, é muito
comum a criação de um layout primário, que depois com as interações aos poucos é
aprimorado. Se for necessária a produção de imagens, por exemplo, usam-se técnicas como
uma criação alguns layout prévios em imagem para aprovação interna. Só depois se avança
para a produção final que é mostrada ao cliente.
A apresentação final deve ser muito cuidadosa possível para não perder um bom
projeto para a gaveta do cliente. É preciso deixar claro para o cliente quais foram as suas
idéias e ver se elas vão ao encontro do objetivo contratado.
Seja seu trabalho profissional ou amador, estruture e trabalhe bem o processo criativo para ter
as melhores soluções. Afinal, não é só com boas idéias que se consegue o sucesso e sim
aplicando boas teorias de criação como foram colocadas acima.
CONSIDERAÇÕES FINAIS

Percebemos que para um projeto de Website ser bem sucedido ele deve ser: facilmente
lido, com o corpo do texto em formato apropriado para que qualquer usuário consiga fazer sua
leia.
Com os títulos bem separados do corpo do texto, os gráficos e as fotos devem ter
qualidade e ao mesmo tempo devem ser leves para que carreguem rapidamente sempre na
mesma página web (fotos bem escolhidas e bem colocadas podem dizer mais que mil
palavras), os fundos devem ser atrativos, mas não podem desviar a atenção do visitante da
informação principal da página.
Os layouts das páginas do Website devem ficar na memória do usuário de modo que
os produtos e serviços (ou informação de referência) tenham a possibilidade de fazer o
mesmo. Pois alguns estilos de página podem expulsar clientes potenciais do seu Website e
outros podem mantê- lo dentro, a razão do sucesso está em conhecer esta diferença e utilizar
das regras de elementos que design que vimos acima.
Para que a navegação do Website possa ser de maneira fácil e amigável ao usuário, de
modo que as informações sejam rapidamente encontradas, a navegação também deve ser
óbvia o bastante para não deixar o usuário ficar perdido dentro do Website. Com uma
navegação bem informativa e escrita para conduzir o usuário a um objetivo final, ou seja, a
venda dos serviços, produtos ou da informação de solicitada pelo usuário internauta.
REFERÊNCIAS

ALMEIDA, Luciano H. Gomes. Coluna de informática e tecnologia web. In. BuscaPB.

Disponível em: <http://www.buscapb.com.br/buscanews/noticias2.php?colunista=9&artigo=9
1>. Acesso: jan. 2008.

DINSMORE, Paul Campbell: SILVEIRA NETO. Gerenciamento de projetos : como

gerenciar seu projeto com qualidade dentro do prazo e custos previstos. Rio de Janeiro:
Qualitymark, 2004.

JEFFREY, Zeldman. Projetando web sites compatíveis. São Paulo: Campus, 2003.

SILVA, Maurício Samy. Construindo sites com CSS e (X)HTML: sites controlados por
folhas de estilo em cascata. São Paulo: Novatec, 2008

W3C. World Wide Web Consortium. Cascading Style Sheets: leve 2 (CSS2 Specification).
W3C Recommendation. Disponível em: <http://www.w3.org/TR/REC-CSS2>. Acesso: jan.
2008.

REPORT, Chaos. Standish Group. Estados Unidos, 2004.