Construção Websites
Arquitetura de Websites 

Antes de inciar a construção de um website é importante que haja um planejamento do projeto dividindo-o em etapas para melhor organizar a execução das tarefas. Apresentamos a seguir uma sugestão de metodologia para este desenvolvimento dividindo o processo nas seguintes etapas:  

Definição,  Arquitetura, Design, Implementação 
A divisão do trabalho nestas etapas não significa a existência exata de uma fronteira entre elas. Na verdade, no decorrer do processo as etapas interagem enquanto são redefinidos detalhes do projeto.  

O trabalho de webdesign, assim como tudo que se refere à Internet, ainda é uma novidade e se encontra em constante evolução. Metodologias, técnicas, tecnologias em geral ainda estão em fase de experimentação. É nesse contexto que encontramos profissionais de diferentes áreas atuando na criação de websites.  

Grandes empresas geralmente têm equipes formadas por especialistas nas diversas tarefas de criação de um site. Cada um deles responsável por um assunto específico no projeto.   

No lado extremo temos também pequenas empresas onde por vezes o webdesigner exerce todas as tarefas da criação.  

Evidentemente o tamanho e complexidade de um projeto determina o tamanho da equipe e o grau de especialização dos integrantes.  
 
Definição  
Esta é a primeira etapa do projeto de um website e tem início na primeira reunião com o cliente,  onde a equipe de projeto tem o primeiro envolvimento com o material que deve ser disponibilizado no site.    

O material coletado nesta fase deve ser analisado pela equipe e os objetivos e soluções começam a se delinear. Aqui já podemos ter uma idéia incial dos módulos que teremos dentro do site.    

É importante ressaltar que nesta fase o projeto deve se adequar às exigências de orçamento e prazos impostas e assim podemos limitar o escopo do projeto, considerando os diferentes módulos e tecnologias a serem empregadas.  

Pontos importantes :  

Objetivos X Orçamento  

É importante definir qual o objetivo do site e o que o cliente está esperando de retorno deste trabalho; também precisamos definir o tempo estimado para finalização e disponibilização do site na rede. Estes parâmetros nos ajudam a delimitar o escopo do projeto e o tamanho do site em termos gerais. 
Levantamento de Fontes  
As informações passadas pelo cliente nas reuniões iniciais devem ser anotadas para posterior discussão pela equipe, assim como devemos coletar todo o material disponível na forma de impressos ( folders, manuais, guias, etc )  ou já digitalizados em diferentes formatos eletrônicos ( textos em fomatos doc , pdf, outros;  planilhas Excel ; etc ) . Da mesma forma devemos coletar  imagens como fotografias (digitalizadas ou não ), logotipos , e também , se for o caso imagens em vídeo. 
Análise do Conteúdo 
A equipe de projeto deve decidir num primeiro momento , frente ao material coletado , o que é interessante para constar no site e o que pode ser deixado de lado. Cada mídia tem sua especifidade e peculiaridades. Devemos ter em mente as limitações e recursos da Web ao selecionarmos o material passado pelo cliente.  
Observar também a qualidade de conservação do material, o que pode compremeter o resultado final da digitalização, e a atualidade das informações contidas em impressos.    
Nesta etapa podemos identificar diferentes ferramentas necessárias para manipular o material coletado e também para converter o que  já está digitalizado. 
Análise de Contexto  
Uma vez que já temos definido o objetivo do nosso site devemos observar também em que cenário o trabalho estará sendo inserido. Para tanto é aconselhável uma visita a alguns  sites "concorrentes"  na procura de um certo diferencial que traria maior notoriedade ao site em desenvolvimento e eventualmente amior valor ao produto veiculado. 
Público Alvo e Tecnologias Empregadas   
Estar usando as últimas tecnologias disponíveis na rede nem sempre é o ideal em um site, uma vez que muitas destas tecnologias dependem de um plug-in instalado ou de uma configuração mínima de processador, vídeo, etc.  Precisamos ter uma idéia do perfil do nosso público alvo no que se refere ao tipo de equipamento e de software que utiliza, o tipo de resolução de vídeo mais comum (800x600 ou 480x640),  além de situar este público em termos sócio-culturais e econômicos. Conhecer o público alvo é um fator determinante não só na escolha das tecnologias, como também na linguagem que o site deve transmitir. 
Protótipo e Aprovação  
Considerados os pontos citados acima, a equipe de projeto tem condições de apresentar um protótipo do site proposto contendo já alguns dos elementos de design e um primeiro nível de navegação para que o cliente possa ter uma idéia mais concreta sobre o produto que estará sendo desenvolvido. Uma vez aprovado este protótipo a equipe pode passar às novas fases do projeto.  
 
Arquitetura   
Nesta fase a equipe de projeto analisa as informações levantadas na etapa anterior , determinando a relevância do material recolhido, a estrutura da informação,  os diferentes grupos de informação que serão tratados no site, a prioridade como estas informações devem ser apresentadas.   

Aqui devemos ter um bom senso em privilegiar as informações mais relevantes, considerando o objetivo do site, e colocar em destaque as seções mais importantes para o público alvo, facilitando ao máximo o acesso às informações procuradas.   

Pontos Importantes :   

Definição da "Mensagem do site"  

O que consideramos como objetivo do site deve aparecer de forma bem definida pela estrutura proposta. 
Estrutura da Informação  
Esta tarefa consiste em agrupar as  informações, identificando-as  e separando em blocos  organizados por seções ou assuntos principais. Aqui podemos utilizar  gráficos que representem  toda a árvore de navegação onde podemos identificar a profundidade em níveis de hierarquia da informação e a largura do site referente ao número de blocos de informação em cada um dos níveis. É interessante que haja um certo equilíbrio entre largura e profundidade, pois sites com grande largura significam  opções e saídas em excesso a partir de uma mesma página (o que pode confundir o navegante) , e sites com muitos níveis de profundidade representam muitas páginas a serem carregadas até se chegar à informação procurada o que pode fazer com que o visitante desista de chegar ao final de sua busca.  
Recursos da Interface  
Para cada um dos blocos de informação definidos devemos aproveitar os recursos que a interface nos oferece, determinando a melhor maneira de apresentar estas informações considerando diferentes mídias.  Não devemos esquecer das possibilidades de integração do site com recursos de Bancos de Dados que podem enriquecer o site propiciando um maior número de serviços a oferecer; tecnologias como ASP, Active Server Pages, da Microsoft possibilitam a geração de páginas dinâmicas a partir de informações previamente cadastradas em um banco de dados  Access. Programação Cgi ( C++,Perl, Java, ... ) , e outros recursos e tecnologias proprietárias ou abertas ,  são de grande ajuda na implementação de funções mais complexas e tarefas  mais sofisticadas.   
Outra possibilidade é a inclusão de módulos de Comércio Eletrônico onde o visitante poderia estar adquirindo produtos e serviços on-line. 
Interatividade  
Pensar como a interatividade deve estar presente no site quando ela se fizer necessária, e de que maneira, ou a que níveis. A interatividade deve estar presente se encaixar perfeitamente no contexto do site.   
Navegabilidade  
Também definimos como será o processo de navegação pela interface, como o visitante poderá navegar pelo site. Podemos definir o trajeto como exploratório onde  ao interagir com o site o navegante vai aos poucos descobrindo suas diversas informações, funções e serviços, ou explanatório, onde de início já aparecem informadas e descritas de forma explícita o que se pode conseguir do site. As duas formas são válidas dependendo da situação em que apresentam.   
Ainda em relação ao trajeto podemos definir diferentes formas de ligação entre os módulos definidos na estrutura do site permitindo possibilidades diferentes aos navegantes.   
Podemos chamar de  navegação de  "circular"  onde de qualquer ponto podemos chegar diretamente aos outros módulos do site; neste caso a partir de qualquer página podemos alcançar as demais existentes no site , ou as páginas das seções principais.  Isto, a princípio, e o que mais facilitaria ao navegante percorrer o site.   
Outro tipo de estrutura permite a navegação de forma sequencial, como se estivéssemos lendo um livro página após página. Em alguns casos isso pode ser interessante.   
Podemos ainda pensar em estruturas rigidamente hierárquicas o que a princípio não parece ser interessante pois exige um excesso de vai e vem no site até que o navegante chegue ao final de sua busca.  
Design    
Uma vez definida a estrutura do site e sua funcionalidade, passamos a pensar na proposta gráfica apresentada pelo designer.  Aqui temos o encaixe da Arquitetura das Informações com o Projeto Gráfico, onde as metáforas visuais são incorporadas ao site auxiliando e melhorando a navegação proposta na fase anterior.   

Pontos Importantes :   

Tipografia   

Este é um detalhe de extrema importancia que muitas vezes não é levado em conta.  Existe uma série de estudos em relação ao uso de diferentes tipos de fonte possíveis. O tipo de fonte usado em seu site deve-se adequar à mensagem que você está querendo transmitir. Considere também o aspecto legal que rege a utilização e veiculação.   
A lnguagem é bastante limitada no que se refere à tipografia. Alguns tipo de fonte são definidos no Html padrão e outras podem ser utilizadas através de diretivas específicas que referenciam fontes supostamente instaladas no cliente; como nem sempre o cliente tem a fonte especificada perdemos o controle sobre o que será apresentado.   
A disponibilização de imagens na forma de gráficos contorna este problema mas depara em outros como descrito a seguir. Via de regra utilizamos gráficos para representar textos quando se trata de títulos, banners ou outras chamadas na forma de ícones dentro do site. 
Redação de textos  
Na fase de definição levantamos parte do material na forma de textos que deverão ser revistos, algumas vezes redigitados, ou importados de diferentes formatos. Devemos nos lembrar que a forma de apresentação de textos na rede tem suas peculiaridades; geralmente o visitante do site não dispõe de tempo e paciência para ler textos demasiadamente extensos na frente de um monitor. É aconselhável então apresentar textos na forma resumida e possibilitar o acesso a textos na íntegra no forma de documentos no formato PDF ( Adobe )  ou  DOC ( Microsoft ).   A apresentação do texto em colunas que não preencham toda a extensão horizontal da tela também facilitam a leitura.   
O tipo de fonte utilizado também devem seguir alguns padrões. Sugerimos a utilização da fonte Arial ( ou Helvética ) , tamanho 10 para textos genéricos, 12 para textos em destaque, e 8 para observações sem muito destaque.   Também é possível disponibilizar textos na forma de imagem, eliminando assim o problema de visualização caso o visitante não possua a fonte usada no site;  no entanto esse procedimento recebe algumas críticas devido ao tamanho das imagens e impossibilidade de pesquisa por palavra chave dentro destes textos. 
Criação de Imagens  
As imagens utilizadas em um site são, via de regra, nos formatos .GIF (Graphics Interchange Format)  e .JPG ( Joint Photographics Experts Group )  , assim sendo , algumas das imagens já digitalizadas , obtidas na fase incial, talvez devam ser transformadas para os padrões citados.   
Para visualização das imagens no vídeo não necessitamos de alta resolução nas imagens, sendo aconselhável a densidade de 72 dpi, o que resulta em imagens mais reduzidas em bytes que facilitam o tráfego pela rede.   
As imagens coletadas na fase inicial e que ainda não estão digitalizadas devem então ser escaneadas ( observando a densidade de 72 dpi já citada ) e tratadas em softwares específicos como  Adobe Photoshop ,  Paint Shop Pro , ou similares.  

Veremos mais detalhes sobre criação de imagens em :  

Ferramentas Gráficas - http:/www.ccuec.unicamp.br/treinamentos/ferramentas
Tratamento de outras mídias  
Também podemos ter em nosso site páginas com som e vídeo; para tanto necessitamos de ferramentas específicas de captação, tratamento e disponibilização.   
Os formatos WAV   e  MIDI ( Musical Instrument Digital Interface)  são amplamente utilizados para sons e apresentam diferentes características de funcionamento em relação ao tratamento da informação sonora digitalizada, e também de  timbre, sonoridade, tamanho em bytes.  Arquivos em MIDI são pequenos e práticos mas não tem um resultado muito satisfatório.   
A digitalização de vídeos é um processo de certa forma complexo onde se trabalha com alguns algoritmos proprietários tanto na codificação como para a decodificação. Podemos usar diferentes formatos proprietários como  MPEG ( Moving Pictures Expert Group ) , ou o formato do QuickTime, que permite a sincronia entre animações, vídeo e som.      
O formato AU da  Real Player ,  apresenta melhor qualidade de som e também possibilita a disponibilização de vídeo mas exige do visitante o plug-in específico para execução. 
Outras tecnologias  
Podemos usar muito mais do que apenas a linguagem HTML para desenvolver as páginas de nosso sites. Atualmente temos no mercado algumas tecnologias que  substituem o código HTML tornando mais específico o trabalho de inclusão de recursos assim proporcionados em nosso site. Citando alguns exemplos :
Sites desenhados em Flash da Macromedia requerem um empenho diferenciado  nesta fase. Uma vez que esta tecnologia permite a inclusão de animações vetoriais programadas em relação do tempo e da ação do navegante pode-se pode-se transformar o simples clique em um link em uma  sequencia de cenas e eventos que vão tomando conta de todo o vídeo.  Isto nem sempre tem sido usado de forma adequada pelo projetistas de site.   

VRML , Virtual Rality Modelling Language, possibilita a criação de "páginas em 3D" , ou mais corretamente falando,  mundos ou ambientes,  onde o navegante pode circular por entre os objetos colocados na cena. Esta tecnologia pode estar integrada ao site exigindo um plug-in específico.  
 

Implementação     
Esta é a fase final do desenvolvimento do site que já aprovado pelo cliente deve ser então ser disponibilizado na rede.  Temos assim uma finalização da criação de todas as páginas, imagens, e outras mídias.   
O site finalizado deve ser testado em diferente Browsers e ajustado se necessário.   

Pontos Importantes :   

Programação  

Nesta etapa temos a finalização e integração de todas as páginas e  programação cgi , verificação de todos os links, etc.  Uma especial atenção deve ser dada ao caminho dos links que eventualmente não serão os mesmo no servidor.   
Teste da Interface  
É importante uma verificação final de todo o site enfim de analisar se a interface está correspondendo ao esperado na fase de Definição. Verficar a visualização em diferentes browsers e versões e também em diferentes modos de configuração de monitor considerando resoluçao  (800x600 e 640x480 ) e definição de cores. Observar se não há falhas na lógica de navegação.  
Definição do servidor  
Faça um estudo prévio das necessidades de hardware e software antes de decidir por um ou outro servidor.  
Empresas que hospedam páginas têm diferentes políticas de preços de acordo com  tamanho do site e o tipo de serviços disponíveis, como endereços e-mail, contadores de acesso, tratamemto de formulários, integração com banco de dados, etc.  A definição do endereço também interfere no preço como descrito a seguir.  
Além do preço , devemos considerar as especificações técnicas sem as quais o site se tornará deficiente.  Existem diferentes servidores Web disponíveis no mercado; o uso de certas tecnologias como disponibilização de bancos de dados integrados ao site por exemplo, depende de servidores específicos de determinados fabricantes; o mesmo para disponibilização de outras mídias como som e vídeo. Também questões referentes à velocidade do link devem ser levadas em conta.  
Definição do endereço (URL)   
O endereço do site (URL - Uniforme Resource Locator)  indica o entrada inicial de nosso site.   
Pode aparecer como um domínio próprio  (www.suaempresa.com.br)  ou sublocado (www.servidor.com.br/suaempresa) ; as duas formas de disponibilização são válidas sendo que o endereço com domínio próprio depende de cadastramento junto aos órgãos que controlam a definição de endereços (Fapesp , no Brasil e Internic nos Estados Unidos). 
Upload  de  arquivos   
Uma vez definido o servidor e o domínio devemos tranferir todos os arquivos para a máquina onde ficará instalado nosso site. Via de regra isso acontece utilizando diferentes programas de FTP.  
Lançamento do site  
Existem milhares de sites disponíveis na rede. Para que seu trabalho não passe desapercebido neste mar de informações é necessário um trabalho de divulgação utilizando vias impressas convencionais como mala direta, revistas, jornais, outdoors, panfletos, etc, e até mesmo propaganda em televisão.  
A divulgação via eletrônica através de listas, ou grupos de discussão deve ser feita de forma criteriosa para não criar spams indesejáveis o que pode comprometer a imagem do cliente.  
A Internet e o World Wide Web|A Linguagem HTML|Editores de Webpages|Arquitetura de Websites
Applets Java e Javascripts|Frames|Formulários|Mapas Clicáveis|Validando  Sites|Hospedando Sites|Links e Referências
Construção de Websites
Everaldo Luis Silva  e Magali Barcellos