Construo Websites

http://www.unicamp.br/~everaldo/websites/arquitetura_websites.html

Arquitetura de Websites
Antes de iniciar a construo de um website importante que haja um
planejamento do projeto dividindo-o em etapas para melhor organizar a
execuo das tarefas. Apresentamos a seguir uma sugesto de metodologia
para este desenvolvimento dividindo o processo nas seguintes etapas:
Definio, Arquitetura, Design, Implementao
A diviso do trabalho nestas etapas no significa a existncia exata de uma
fronteira entre elas. Na verdade, no decorrer do processo as etapas interagem
enquanto so redefinidos detalhes do projeto.
O trabalho de webdesign, assim como tudo que se refere Internet, ainda
uma novidade e se encontra em constante evoluo. Metodologias, tcnicas,
tecnologias em geral ainda esto em fase de experimentao. nesse
contexto que encontramos profissionais de diferentes reas atuando na criao
de websites.
Grandes empresas geralmente tm equipes formadas por especialistas nas
diversas tarefas de criao de um site. Cada um deles responsvel por um
assunto especfico no projeto.
No lado extremo temos tambm pequenas empresas onde por vezes o
webdesigner exerce todas as tarefas da criao.
Evidentemente o tamanho e complexidade de um projeto determina o tamanho
da equipe e o grau de especializao dos integrantes.
Definio
Esta a primeira etapa do projeto de um website e tem incio na primeira
reunio 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
solues comeam a se delinear. Aqui j podemos ter uma idia incial dos
mdulos que teremos dentro do site.
importante ressaltar que nesta fase o projeto deve se adequar s exigncias
de oramento e prazos impostas e assim podemos limitar o escopo do projeto,
considerando os diferentes mdulos e tecnologias a serem empregadas.
Pontos importantes :
Objetivos X Oramento
importante definir qual o objetivo do site e o que o cliente est esperando de
retorno deste trabalho; tambm precisamos definir o tempo estimado para

finalizao e disponibilizao do site na rede. Estes parmetros nos ajudam a

delimitar o escopo do projeto e o tamanho do site em termos gerais.
Levantamento de Fontes
As informaes passadas pelo cliente nas reunies iniciais devem ser anotadas
para posterior discusso pela equipe, assim como devemos coletar todo o
material disponvel na forma de impressos ( folders, manuais, guias, etc ) ou j
digitalizados em diferentes formatos eletrnicos ( textos em fomatos doc , pdf,
outros; planilhas Excel ; etc ) . Da mesma forma devemos coletar imagens
como fotografias (digitalizadas ou no ), logotipos , e tambm , se for o caso
imagens em vdeo.
Anlise do Contedo
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 mdia tem sua especifidade e peculiaridades. Devemos ter em
mente as limitaes e recursos da Web ao selecionarmos o material passado
pelo cliente.
Observar tambm a qualidade de conservao do material, o que pode
compremeter o resultado final da digitalizao, e a atualidade das informaes
contidas em impressos.
Nesta etapa podemos identificar diferentes ferramentas necessrias para
manipular o material coletado e tambm para converter o que j est
digitalizado.
Anlise de Contexto
Uma vez que j temos definido o objetivo do nosso site devemos observar
tambm em que cenrio o trabalho estar sendo inserido. Para tanto
aconselhvel 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.
Pblico Alvo e Tecnologias Empregadas
Estar usando as ltimas tecnologias disponveis na rede nem sempre o ideal
em um site, uma vez que muitas destas tecnologias dependem de um plug-in
instalado ou de uma configurao mnima de processador, vdeo,
etc. Precisamos ter uma idia do perfil do nosso pblico alvo no que se refere
ao tipo de equipamento e de software que utiliza, o tipo de resoluo de vdeo
mais comum (800x600 ou 480x640), alm de situar este pblico em termos
scio-culturais e econmicos. Conhecer o pblico alvo um fator determinante
no s na escolha das tecnologias, como tambm na linguagem que o site
deve transmitir.
Prottipo e Aprovao
Considerados os pontos citados acima, a equipe de projeto tem condies de
apresentar um prottipo do site proposto contendo j alguns dos elementos de
design e um primeiro nvel de navegao para que o cliente possa ter uma
idia mais concreta sobre o produto que estar sendo desenvolvido. Uma vez
aprovado este prottipo a equipe pode passar s novas fases do projeto.
Arquitetura
Nesta fase a equipe de projeto analisa as informaes levantadas na etapa
anterior , determinando a relevncia do material recolhido, a estrutura da
informao, os diferentes grupos de informao que sero tratados no site, a
prioridade como estas informaes devem ser apresentadas.

Aqui devemos ter um bom senso em privilegiar as informaes mais

relevantes, considerando o objetivo do site, e colocar em destaque as sees
mais importantes para o pblico alvo, facilitando ao mximo o acesso s
informaes procuradas.
Pontos Importantes :
Definio da "Mensagem do site"
O que consideramos como objetivo do site deve aparecer de forma bem
definida pela estrutura proposta.
Estrutura da Informao
Esta tarefa consiste em agrupar as informaes, identificando-as e separando
em blocos organizados por sees ou assuntos principais. Aqui podemos
utilizar grficos que representem toda a rvore de navegao onde podemos
identificar a profundidade em nveis de hierarquia da informao e a largura do
site referente ao nmero de blocos de informao em cada um dos nveis.
interessante que haja um certo equilbrio entre largura e profundidade, pois
sites com grande largura significam opes e sadas em excesso a partir de
uma mesma pgina (o que pode confundir o navegante) , e sites com muitos
nveis de profundidade representam muitas pginas a serem carregadas at se
chegar informao 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 informao definidos devemos aproveitar os
recursos que a interface nos oferece, determinando a melhor maneira de
apresentar estas informaes considerando diferentes mdias. No devemos
esquecer das possibilidades de integrao do site com recursos de Bancos de
Dados que podem enriquecer o site propiciando um maior nmero de servios
a oferecer; tecnologias como ASP, Active Server Pages, da Microsoft
possibilitam a gerao de pginas dinmicas a partir de informaes
previamente cadastradas em um banco de dados Access. Programao Cgi (
C++,Perl, Java, ... ) , e outros recursos e tecnologias proprietrias ou abertas
, so de grande ajuda na implementao de funes mais complexas e
tarefas mais sofisticadas.
Outra possibilidade a incluso de mdulos de Comrcio Eletrnico onde o
visitante poderia estar adquirindo produtos e servios on-line.
Interatividade
Pensar como a interatividade deve estar presente no site quando ela se fizer
necessria, e de que maneira, ou a que nveis. A interatividade deve estar
presente se encaixar perfeitamente no contexto do site.
Navegabilidade
Tambm definimos como ser o processo de navegao pela interface, como o
visitante poder navegar pelo site. Podemos definir o trajeto como exploratrio
onde ao interagir com o site o navegante vai aos poucos descobrindo suas
diversas informaes, funes e servios, ou explanatrio, onde de incio j
aparecem informadas e descritas de forma explcita o que se pode conseguir
do site. As duas formas so vlidas dependendo da situao em que
apresentam.
Ainda em relao ao trajeto podemos definir diferentes formas de ligao entre

os mdulos definidos na estrutura do site permitindo possibilidades diferentes

aos navegantes.
Podemos chamar de navegao de "circular" onde de qualquer ponto
podemos chegar diretamente aos outros mdulos do site; neste caso a partir de
qualquer pgina podemos alcanar as demais existentes no site , ou as
pginas das sees principais. Isto, a princpio, e o que mais facilitaria ao
navegante percorrer o site.
Outro tipo de estrutura permite a navegao de forma sequencial, como se
estivssemos lendo um livro pgina aps pgina. Em alguns casos isso pode
ser interessante.
Podemos ainda pensar em estruturas rigidamente hierrquicas o que a
princpio no 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 grfica apresentada pelo designer. Aqui temos o encaixe da
Arquitetura das Informaes com o Projeto Grfico, onde as metforas visuais
so incorporadas ao site auxiliando e melhorando a navegao proposta na
fase anterior.
Pontos Importantes :
Tipografia
Este um detalhe de extrema importancia que muitas vezes no levado em
conta. Existe uma srie de estudos em relao ao uso de diferentes tipos de
fonte possveis. O tipo de fonte usado em seu site deve-se adequar
mensagem que voc est querendo transmitir. Considere tambm o aspecto
legal que rege a utilizao e veiculao.
A lnguagem bastante limitada no que se refere tipografia. Alguns tipo de
fonte so definidos no Html padro e outras podem ser utilizadas atravs de
diretivas especficas 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 disponibilizao de imagens na forma de grficos contorna este problema
mas depara em outros como descrito a seguir. Via de regra utilizamos grficos
para representar textos quando se trata de ttulos, banners ou outras chamadas
na forma de cones dentro do site.
Redao de textos
Na fase de definio levantamos parte do material na forma de textos que
devero ser revistos, algumas vezes redigitados, ou importados de diferentes
formatos. Devemos nos lembrar que a forma de apresentao de textos na
rede tem suas peculiaridades; geralmente o visitante do site no dispe de
tempo e pacincia para ler textos demasiadamente extensos na frente de um
monitor. aconselhvel ento 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 apresentao do texto em colunas
que no preencham toda a extenso horizontal da tela tambm facilitam a
leitura.
O tipo de fonte utilizado tambm devem seguir alguns padres. Sugerimos a

utilizao da fonte Arial ( ou Helvtica ) , tamanho 10 para textos genricos, 12

para textos em destaque, e 8 para observaes sem muito
destaque. Tambm possvel disponibilizar textos na forma de imagem,
eliminando assim o problema de visualizao caso o visitante no possua a
fonte usada no site; no entanto esse procedimento recebe algumas crticas
devido ao tamanho das imagens e impossibilidade de pesquisa por palavra
chave dentro destes textos.
Criao de Imagens
As imagens utilizadas em um site so, 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 padres citados.
Para visualizao das imagens no vdeo no necessitamos de alta resoluo
nas imagens, sendo aconselhvel a densidade de 72 dpi, o que resulta em
imagens mais reduzidas em bytes que facilitam o trfego pela rede.
As imagens coletadas na fase inicial e que ainda no esto digitalizadas devem
ento ser escaneadas ( observando a densidade de 72 dpi j citada ) e tratadas
em softwares especficos como Adobe Photoshop , Paint Shop Pro , ou
similares.
Veremos mais detalhes sobre criao de imagens em :
Ferramentas Grficas - http:/www.ccuec.unicamp.br/treinamentos/ferramentas
Tratamento de outras mdias
Tambm podemos ter em nosso site pginas com som e vdeo; para tanto
necessitamos de ferramentas especficas de captao, tratamento e
disponibilizao.
Os formatos WAV e MIDI ( Musical Instrument Digital Interface) so
amplamente utilizados para sons e apresentam diferentes caractersticas de
funcionamento em relao ao tratamento da informao sonora digitalizada, e
tambm de timbre, sonoridade, tamanho em bytes. Arquivos em MIDI so
pequenos e prticos mas no tem um resultado muito satisfatrio.
A digitalizao de vdeos um processo de certa forma complexo onde se
trabalha com alguns algoritmos proprietrios tanto na codificao como para a
decodificao. Podemos usar diferentes formatos proprietrios como MPEG (
Moving Pictures Expert Group ) , ou o formato do QuickTime, que permite a
sincronia entre animaes, vdeo e som.
O formato AU da Real Player , apresenta melhor qualidade de som e tambm
possibilita a disponibilizao de vdeo mas exige do visitante o plug-in
especfico para execuo.
Outras tecnologias
Podemos usar muito mais do que apenas a linguagem HTML para desenvolver
as pginas de nosso sites. Atualmente temos no mercado algumas tecnologias
que substituem o cdigo HTML tornando mais especfico o trabalho de
incluso 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 incluso de
animaes vetoriais programadas em relao do tempo e da ao do
navegante pode-se pode-se transformar o simples clique em um link em

uma sequencia de cenas e eventos que vo tomando conta de todo o

vdeo. Isto nem sempre tem sido usado de forma adequada pelo projetistas de
site.
VRML , Virtual Rality Modelling Language, possibilita a criao de "pginas 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 especfico.

Implementao
Esta a fase final do desenvolvimento do site que j aprovado pelo cliente
deve ser ento ser disponibilizado na rede. Temos assim uma finalizao da
criao de todas as pginas, imagens, e outras mdias.
O site finalizado deve ser testado em diferente Browsers e ajustado se
necessrio.
Pontos Importantes :
Programao
Nesta etapa temos a finalizao e integrao de todas as pginas
e programao cgi , verificao de todos os links, etc. Uma especial ateno
deve ser dada ao caminho dos links que eventualmente no sero os mesmo
no servidor.
Teste da Interface
importante uma verificao final de todo o site enfim de analisar se a
interface est correspondendo ao esperado na fase de Definio. Verficar a
visualizao em diferentes browsers e verses e tambm em diferentes modos
de configurao de monitor considerando resoluao (800x600 e 640x480 ) e
definio de cores. Observar se no h falhas na lgica de navegao.
Definio do servidor
Faa um estudo prvio das necessidades de hardware e software antes de
decidir por um ou outro servidor.
Empresas que hospedam pginas tm diferentes polticas de preos de acordo
com tamanho do site e o tipo de servios disponveis, como endereos e-mail,
contadores de acesso, tratamemto de formulrios, integrao com banco de
dados, etc. A definio do endereo tambm interfere no preo como descrito
a seguir.
Alm do preo , devemos considerar as especificaes tcnicas sem as quais o
site se tornar deficiente. Existem diferentes servidores Web disponveis no
mercado; o uso de certas tecnologias como disponibilizao de bancos de
dados integrados ao site por exemplo, depende de servidores especficos de
determinados fabricantes; o mesmo para disponibilizao de outras mdias
como som e vdeo. Tambm questes referentes velocidade do link devem
ser levadas em conta.
Definio do endereo (URL)
O endereo do site (URL - Uniforme Resource Locator) indica o entrada inicial
de nosso site.
Pode aparecer como um domnio prprio (www.suaempresa.com.br) ou

sublocado (www.servidor.com.br/suaempresa) ; as duas formas de

disponibilizao so vlidas sendo que o endereo com domnio prprio
depende de cadastramento junto aos rgos que controlam a definio de
endereos (Fapesp , no Brasil e Internic nos Estados Unidos).
Upload de arquivos
Uma vez definido o servidor e o domnio devemos tranferir todos os arquivos
para a mquina onde ficar instalado nosso site. Via de regra isso acontece
utilizando diferentes programas de FTP.
Lanamento do site
Existem milhares de sites disponveis na rede. Para que seu trabalho no
passe desapercebido neste mar de informaes necessrio um trabalho de
divulgao utilizando vias impressas convencionais como mala direta, revistas,
jornais, outdoors, panfletos, etc, e at mesmo propaganda em televiso.
A divulgao via eletrnica atravs de listas, ou grupos de discusso deve ser
feita de forma criteriosa para no criar spams indesejveis o que pode
comprometer a imagem do cliente.