construção de website.pdf

7/23/2019 Construção de Website.pdf

http://slidepdf.com/reader/full/construcao-de-websitepdf 1/7

Construção Websiteshttp://www.unicamp.br/~everaldo/websites/arquitetura_websites.html

Arquitetura de Websites

Antes de iniciar a construção de um website é importante que haja umplanejamento do projeto dividindo-o em etapas para melhor organizar aexecução das tarefas. Apresentamos a seguir uma sugestão de metodologiapara 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 umafronteira entre elas. Na verdade, no decorrer do processo as etapas interagemenquanto 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. É nessecontexto que encontramos profissionais de diferentes áreas atuando na criaçãode websites.

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

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

Evidentemente o tamanho e complexidade de um projeto determina o tamanhoda 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 primeirareunião com o cliente, onde a equipe de projeto tem o primeiro envolvimentocom 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 dosmódulos que teremos dentro do site.

É importante ressaltar que nesta fase o projeto deve se adequar às exigênciasde 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 deretorno deste trabalho; também precisamos definir o tempo estimado para



finalização e disponibilização do site na rede. Estes parâmetros nos ajudam adelimitar 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 anotadaspara 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 imagenscomo fotografias (digitalizadas ou não ), logotipos , e também , se for o casoimagens em vídeo. Análise do Conteúdo

A equipe de projeto deve decidir num primeiro momento , frente ao materialcoletado , o que é interessante para constar no site e o que pode ser deixadode lado. Cada mídia tem sua especifidade e peculiaridades. Devemos ter emmente as limitações e recursos da Web ao selecionarmos o material passadopelo cliente.Observar também a qualidade de conservação do material, o que podecompremeter o resultado final da digitalização, e a atualidade das informaçõescontidas em impressos.Nesta etapa podemos identificar diferentes ferramentas necessárias paramanipular o material coletado e também para converter o que já estádigitalizado. Análise de ContextoUma vez que já temos definido o objetivo do nosso site devemos observartambé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 eeventualmente amior valor ao produto veiculado.Público Alvo e Tecnologias Empregadas Estar usando as últimas tecnologias disponíveis na rede nem sempre é o idealem um site, uma vez que muitas destas tecnologias dependem de um plug-ininstalado 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 refereao tipo de equipamento e de software que utiliza, o tipo de resolução de vídeomais comum (800x600 ou 480x640), além de situar este público em termossócio-culturais e econômicos. Conhecer o público alvo é um fator determinantenão só na escolha das tecnologias, como também na linguagem que o site

deve transmitir.Protótipo e AprovaçãoConsiderados os pontos citados acima, a equipe de projeto tem condições deapresentar um protótipo do site proposto contendo já alguns dos elementos dedesign e um primeiro nível de navegação para que o cliente possa ter umaidéia mais concreta sobre o produto que estará sendo desenvolvido. Uma vezaprovado este protótipo a equipe pode passar às novas fases do projeto.

ArquiteturaNesta fase a equipe de projeto analisa as informações levantadas na etapaanterior , determinando a relevância do material recolhido, a estrutura da

informação, os diferentes grupos de informação que serão tratados no site, aprioridade como estas informações devem ser apresentadas.



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

Pontos Importantes :

Definição da "Mensagem do site"

O que consideramos como objetivo do site deve aparecer de forma bemdefinida pela estrutura proposta.

Estrutura da InformaçãoEsta tarefa consiste em agrupar as informações, identificando-as e separandoem blocos organizados por seções ou assuntos principais. Aqui podemosutilizar gráficos que representem toda a árvore de navegação onde podemosidentificar a profundidade em níveis de hierarquia da informação e a largura dosite 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, poissites com grande largura significam opções e saídas em excesso a partir deuma mesma página (o que pode confundir o navegante) , e sites com muitosníveis de profundidade representam muitas páginas a serem carregadas até sechegar à informação procurada o que pode fazer com que o visitante desista dechegar ao final de sua busca.Recursos da InterfacePara cada um dos blocos de informação definidos devemos aproveitar osrecursos que a interface nos oferece, determinando a melhor maneira de

apresentar estas informações considerando diferentes mídias. Não devemosesquecer das possibilidades de integração do site com recursos de Bancos deDados que podem enriquecer o site propiciando um maior número de serviçosa oferecer; tecnologias como ASP, Active Server Pages, da Microsoftpossibilitam a geração de páginas dinâmicas a partir de informaçõespreviamente 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 etarefas mais sofisticadas.Outra possibilidade é a inclusão de módulos de Comércio Eletrônico onde ovisitante poderia estar adquirindo produtos e serviços on-line.

InteratividadePensar como a interatividade deve estar presente no site quando ela se fizernecessária, e de que maneira, ou a que níveis. A interatividade deve estarpresente se encaixar perfeitamente no contexto do site.NavegabilidadeTambém definimos como será o processo de navegação pela interface, como ovisitante poderá navegar pelo site. Podemos definir o trajeto como exploratório onde ao interagir com o site o navegante vai aos poucos descobrindo suasdiversas 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 conseguirdo 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 diferentesaos navegantes.Podemos chamar de navegação de "circular " onde de qualquer pontopodemos chegar diretamente aos outros módulos do site; neste caso a partir dequalquer 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 aonavegante percorrer o site.Outro tipo de estrutura permite a navegação de forma sequencial, como seestivéssemos lendo um livro página após página. Em alguns casos isso podeser interessante.Podemos ainda pensar em estruturas rigidamente hierárquicas o que aprincípio não parece ser interessante pois exige um excesso de vai e vem nosite até que o navegante chegue ao final de sua busca.DesignUma vez definida a estrutura do site e sua funcionalidade, passamos a pensarna proposta gráfica apresentada pelo designer. Aqui temos o encaixe da

Arquitetura das Informações com o Projeto Gráfico, onde as metáforas visuaissão incorporadas ao site auxiliando e melhorando a navegação proposta nafase anterior.


Tipografia

Este é um detalhe de extrema importancia que muitas vezes não é levado emconta. Existe uma série de estudos em relação ao uso de diferentes tipos defonte possíveis. O tipo de fonte usado em seu site deve-se adequar àmensagem que você está querendo transmitir. Considere também o aspectolegal que rege a utilização e veiculação. A lnguagem é bastante limitada no que se refere à tipografia. Alguns tipo defonte são definidos no Html padrão e outras podem ser utilizadas através dediretivas específicas que referenciam fontes supostamente instaladas nocliente; como nem sempre o cliente tem a fonte especificada perdemos ocontrole sobre o que será apresentado. A disponibilização de imagens na forma de gráficos contorna este problemamas depara em outros como descrito a seguir. Via de regra utilizamos gráficospara 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 quedeverão ser revistos, algumas vezes redigitados, ou importados de diferentesformatos. Devemos nos lembrar que a forma de apresentação de textos narede tem suas peculiaridades; geralmente o visitante do site não dispõe detempo e paciência para ler textos demasiadamente extensos na frente de ummonitor. É aconselhável então apresentar textos na forma resumida epossibilitar o acesso a textos na íntegra no forma de documentos no formatoPDF ( Adobe ) ou DOC ( Microsoft ). A apresentação do texto em colunasque 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, 12para textos em destaque, e 8 para observações sem muitodestaque. Também é possível disponibilizar textos na forma de imagem,eliminando assim o problema de visualização caso o visitante não possua afonte usada no site; no entanto esse procedimento recebe algumas críticas

devido ao tamanho das imagens e impossibilidade de pesquisa por palavrachave 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çãonas imagens, sendo aconselhável a densidade de 72 dpi, o que resulta emimagens 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 tratadasem softwares específicos como Adobe Photoshop , Paint Shop Pro , ousimilares.

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 tantonecessitamos de ferramentas específicas de captação, tratamento e

disponibilização.Os formatos WAV e MIDI ( Musical Instrument Digital Interface) sãoamplamente utilizados para sons e apresentam diferentes características defuncionamento em relação ao tratamento da informação sonora digitalizada, etambém de timbre, sonoridade, tamanho em bytes. Arquivos em MIDI sãopequenos 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 setrabalha com alguns algoritmos proprietários tanto na codificação como para adecodificação. Podemos usar diferentes formatos proprietários como MPEG (Moving Pictures Expert Group ) , ou o formato do QuickTime, que permite asincronia entre animações, vídeo e som.

O formato AU da Real Player , apresenta melhor qualidade de som e tambémpossibilita a disponibilização de vídeo mas exige do visitante o plug-inespecífico para execução.Outras tecnologias

Podemos usar muito mais do que apenas a linguagem HTML para desenvolveras páginas de nosso sites. Atualmente temos no mercado algumas tecnologiasque substituem o código HTML tornando mais específico o trabalho deinclusão de recursos assim proporcionados em nosso site. Citando algunsexemplos : Sites desenhados em Flash da Macromedia requerem um empenhodiferenciado 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 donavegante 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 ovídeo. Isto nem sempre tem sido usado de forma adequada pelo projetistas desite.

VRML , Virtual Rality Modelling Language, possibilita a criação de "páginas em

3D" , ou mais corretamente falando, mundos ou ambientes, onde o navegantepode circular por entre os objetos colocados na cena. Esta tecnologia podeestar integrada ao site exigindo um plug-in específico.

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


Programação

Nesta etapa temos a finalização e integração de todas as páginase programação cgi , verificação de todos os links, etc. Uma especial atençãodeve ser dada ao caminho dos links que eventualmente não serão os mesmono servidor.

Teste da Interface

É importante uma verificação final de todo o site enfim de analisar se ainterface está correspondendo ao esperado na fase de Definição. Verficar avisualização em diferentes browsers e versões e também em diferentes modosde configuração de monitor considerando resoluçao (800x600 e 640x480 ) edefiniçã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 dedecidir por um ou outro servidor. Empresas que hospedam páginas têm diferentes políticas de preços de acordocom 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 descritoa seguir. Além do preço , devemos considerar as especificações técnicas sem as quais osite se tornará deficiente. Existem diferentes servidores Web disponíveis nomercado; o uso de certas tecnologias como disponibilização de bancos dedados integrados ao site por exemplo, depende de servidores específicos dedeterminados fabricantes; o mesmo para disponibilização de outras mídiascomo som e vídeo. Também questões referentes à velocidade do link devemser levadas em conta.Definição do endereço (URL)O endereço do site (URL - Uniforme Resource Locator) indica o entrada inicialde nosso site.Pode aparecer como um domínio próprio (www.suaempresa.com.br) ou



sublocado (www.servidor.com.br/suaempresa) ; as duas formas dedisponibilização são válidas sendo que o endereço com domínio própriodepende de cadastramento junto aos órgãos que controlam a definição deendereç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 arquivospara a máquina onde ficará instalado nosso site. Via de regra isso aconteceutilizando diferentes programas de FTP.Lançamento do site

Existem milhares de sites disponíveis na rede. Para que seu trabalho nãopasse desapercebido neste mar de informações é necessário um trabalho dedivulgaçã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 serfeita de forma criteriosa para não criar spams indesejáveis o que podecomprometer a imagem do cliente.

construção de website.pdf

Documents