Sunteți pe pagina 1din 23

1.

Sítio Para Internet

Uma página web, também conhecida pelo no inglês webpage, é uma "página" na world wide
web, geralmente em formato HTML e com ligações de hipertexto que permitem a navegação
de uma página, ou secção, para outra. As páginas web usam com frequência ficheiros
gráficos associados para fins de ilustração, e também estes ficheiros podem
ser ligações clicáveis. Uma página web é apresentada com recurso a um navegador,

ou browser, e pode ser construída por forma a recorrer a applets (subprogramas que correm
dentro da página), que muitas vezes fornecem gráficos em movimento, interação com o utilizador
e som.
É difícil conseguir uma receita mágica capaz de assegurar que um Web Site vá agradar a todos
os utilizadores. Existem contudo, algumas orientações e princípios, que podem contribuir para
a conceção de Web Sites eficazes.

Definição

Tema: identificação do assunto e da ideia principal do site.


Objetivos: identificação da função que o site vai desempenhar. Pretende-se dar resposta a
questão: para quê? Como em qualquer projeto temos de ter em mente determinados objetivos
a atingir.
Destinatários: Identificação e caracterização da "audiência" (utilizadores), que idade, que

experiência possuem, porque razões podem visitar o site. Pretende-se dar resposta à questão:
para quem? Deve fazer-se com que os visitantes da nossa página não se sintam defraudados,

1
para tal a página deve conter conteúdo significativo. Temos de ter consciência que quem visita
a nossa página, procura alguma informação. É fundamental que o visitante localize essa
informação. Se a página não a possuir, deve orientar no sentido de ser localizada.

2
Organograma
Uma vez conhecidos os objetivos e a audiência da página, é altura de ver como vamos

apresentar a informação. Criamos então um diagrama com a estrutura das páginas,


agrupadas por tópicos.

3
Pastas e Ficheiros

Depois de termos as páginas construídas, devemos guardá-las em pastas, por tópicos.


Uma pasta é um “sítio” onde pode armazenar ficheiros.
Por exemplo criamos uma pasta para todas as imagens, outra para documentos, etc. Podem
conter ficheiros, mas também podem conter outras pastas (subpastas).

Esquemas de navegação

A estrutura deve permitir visualizar de forma fácil e clara, os conteúdos de um conjunto de


páginas Web. Uma estrutura deficiente, pode produzir no espectador a sensação de estar

4
perdido e incapacidade de encontrar a informação procurada, o que conduzirá ao abandono da
página.
A estrutura deve dar uma ideia geral da organização da informação e consequentemente situar
melhor os utilizadores. Uma boa estrutura, facilita a navegação, porque requer menos esforço
cognitivo e ajuda a uma melhor assimilação da informação.
A estruturação da informação pode depender muito do conteúdo do site, das finalidades e do tipo
de utilizadores (deficiências, experiência, etc.)
São várias as estruturas para organização da apresentação.

A seguir apresentam-se algumas:

Linear

Este tipo de organização é a forma que tradicionalmente tem sido usada, desde as inscrições em
pedra, até ao vídeo dos nossos dias.
O hipertexto/hipermedia é intrinsecamente não linear, o que não é sinónimo de incapacidade
para suportar a sequencialidade. A informação linear está organizada de forma a que, para ser
recuperada, não necessita referências a si mesma ou outras informações externas. Só existem
duas possibilidades de navegação: para a frente ou para trás. É perfeitamente fiável, mas
monotonamente previsível, seguindo a lógica tradicional da transmissão da informação.

5
Árvore

Este tipo de estrutura é também bastante familiar. Esta estrutura simples é a base da classificação,
da organização administrativa ou das árvores genealógicas. A organização do conteúdo, na base
hipertexto faz-se de forma hierárquica, com a informação mais geral no topo, e a mais detalhada,
em níveis mais baixos, submetida à mais descendem de uma raiz comum. De cada nó podem sair
múltiplas ligações para outros nós de nível inferior na hierarquia.

Imagem 5 - Estrutura em Árvore

A organização hierárquica resultante, ajuda o utilizador a criar um modelo mental coerente da base
da informação.

6
Estrela

Estas estruturas caracterizam-se por possuírem um nó central e principal, e um conjunto de nós


ligados a este. A passagem de um nó a outro requer sempre o regresso ao "local central". Adapta-se
a conteúdos, onde, por exemplo, existe um tópico principal, do qual fazem parte vários sub-tópicos.
Ícones nesse nó principal, podem estabelecer ligações a conteúdos mais específicos desse assunto,
regressando de novo ao local central para o estabelecimento de
uma nova ligação.

Mista

O diagrama mostra um túnel colocado numa estrutura de roda. Isto é, o utilizador chega a
uma página (de uma roda) que é o início de uma sequência que você gostaria que ele
visitasse (o túnel).

Poderá até combinar sites distintos num esquema de navegação mista. Considere um site
sobre desporto que tem estrutura de roda ou cadeias de rodas. Na seção sobre ténis, há um
link para o site de uma escolinha de ténis que tem estrutura de túnel, apresentando a escola
e no final, um formulário de inscrição. Assim combina os sites estrategicamente.

7
Imagem 7 - Estrutura Mista

Não Linear

8
Ligações entre ecrãs
Uma etapa importante na conceção do Web site é a conceção do sistema de navegação. É um
componente da interface, muito dependente da estruturação da informação e é constituído por
todas as ligações e hiperligações. É o sistema de navegação que permite mover-nos através das
diferentes páginas, criando as condições e estilos de interatividade.

Imagem 8 - Ligações entre ecrãs

Coerência e funcionalidade das ligações

Os sistemas de navegação podem ser constituídos por:


Sequências utilizadas para ir para a página seguinte e anterior, também utilizadas pelos
browsers.

9
Barras de navegação (botões ou menus), podendo ser constituídas por itens de texto,
itens gráficos, ou as duas coisas. Contém apenas as ligações principais. As barras de
navegação podem estar sempre presentes em todas as páginas, estar apenas na
principal, ou nos níveis fundamentais.
As barras ou menus não devem ser muito extensas, isto é, não devem possuir
demasiadas opções.

1
0
Ligações de deslocação para o início e fim de página, no caso desta necessitar de barra
de deslocação vertical.
Ligação de deslocação, em todas as páginas, para a página principal.

Existem outras estruturas de navegação que se podem usar, como os índices,

formulários de pesquisa, mapas ou esquemas do site, que podem ser utilizadas para que o

utilizador recupere rapidamente a informação e não se desoriente no site.

Depois de concebido o sistema de navegação, devem ser testadostodas as ligações e

verificar se funcionam como se esperava. Verificar que todas as ligações fazem sentido, isto é,

existem por uma razão lógica. Não colocar ligações que conduzam a mensagens de erro (404

File Not Found). Evitar estabelecer ligações que conduzam a páginas em construção.

Não colocar a página na Internet sem tudo estar funcional.

Deve convidar alguém, outra pessoa (ou pessoas) para fazer o teste da funcionalidade,
verificar as dificuldades encontradas, a correção ortográfica, e se tudo funciona

corretamente considera-se o Web site validado.

A Interface

O desenho visual da interface, descrevendo as ferramentas que o utilizador possui para


aceder e navegar ao longo do documento hipermédia, consiste nos elementos gráficos,

como a organização do ecrã, a apresentação da informação e os comandos do ecrã.

A sua conceção deve obedecer a alguns princípios da comunicação visual, tendo em conta

fatores de perceção, legibilidade, unidade organizacional, códigos de cor e estruturas de


acesso à informação.

1
1
Conseguir assim, boas ideias para o desenho de interfaces é algo que se reveste de certa
complexidade, pois são vários os aspetos a ter em conta.

O que se pretende com uma boa interface é tornar a interação do homem com o documento
hipermédia, fácil, agradável, intuitiva, numa palavra – amigável -.

Design

Frame lateral esquerda sempre presente de modo que o utilizador não se sinta
perdido e possa em qualquer momento alterar a sua navegação;

Separadores entre as imagens;

Setas personalizadas do mesmo padrão;

Cores com ténues diferentes entre o menu esquerdo e as páginas do lado direito da
frame;

1
2
Música apenas com duas repetições para não maçar o utilizador e colocada na

página esquerda da frame para que possa ser ouvida até ao fim.

Cores

Fundos em tons claros;


Letras em tons escuros e contrastantes (preto ou azul) com o fundo;

A utilização de fundos de páginas com muitos gráficos, imagens animadas ou cores

muito berrantes podem funcionar como dispersantes, podendo confundir o utilizador e


tornar difícil a leitura do texto que se encontra sobre o background.

É importante que se crie um ambiente harmonioso entre as cores utilizadas nas fontes
das letras e a cor utilizada no background da página. Atenção que o uso de cores claras
(branco, por exemplo) em backgrounds escuros impossibilita ao utilizador a impressão
do texto, pois o branco das letras não vai aparecer na impressão de uma folha branca.

Logotipo em cada página com uma cor que realce em relação à cor do fundo;

Separador numa página entre os diferentes temas ou assuntos (em tom concordante
com o fundo);

Título de cada página em tom contrastante com o fundo e a cor do restante texto.

Textos

Em fonte Verdana (com a alternativa Arial) porque não têm serifa, o que facilita a
leitura;

Os títulos podem ser em Times ou outro tipo de letra mais desenhada (com ou sem
serifa);

1
3
Os textos nunca são sublinhados para que o utilizador não confunda com uma
hiperligação.

Evitar a utilização de texto cintilante, animação só por si, desviam a atenção do

utilizador daquilo que é essencial para o acessório.

1
4
Imagens
Nas imagens deverá proceder-se à introdução de uma descrição textual que
identifique a imagem.

Numa página WWW apenas se podem utilizar imagens com formato .gif ou .jpg, sendo
o primeiro geralmente utilizado para ilustrações e o segundo para fotos.

Manter os ficheiros das imagens com dimensões reduzidas por forma a manter o
mínimo tempo possível para o carregamento da página.

Uma imagem que apoia um texto (método aconselhável para ajudar a compreensão
do texto) deve aparecer do lado direito, para que o utilizador comece por ler o texto.
A consistência, a nível de imagens, do grafismo e de ícones de navegação utilizados,
ao longo de todo o site é importante para a sua identificação.

Os ícones de navegação deverão ser óbvios, se suscitarem dúvidas é preferível


substituí-los por texto, ou acompanhá-los por texto.

Outros

O site pode ter um formulário para que os utilizadores possam: enviar uma mensagem
ao autor do site; escrever algumas opiniões sobre um tema pré-definido; responder a
um questionário sobre um tema;

O site pode ter um fórum com um tema pertinente;


O site deve ter um pesquisador interno para facilitar a pesquisa;

A página do lado esquerdo da frame, ou shared border (o menu) deve estar totalmente
observável, deste modo, evita-se de ter a barra de deslocamento vertical;

1
5
A página do lado direito da frame (a primeira a aparecer) deve e star 90% observável.

Ao deslocar para baixo a barra de navegação vê-se informações complementares, tais


como o contador ou a data;

O site deverá ter um contador na página principal para informar o webmaster e os


utilizadores da frequência e quantidade de utilizadores que a consultam;

Inserir uma data de produção em cada página de modo a servir de indicador sobre a
atualidade da informação nela contida;

1
1
No final da página inicial deverá estar visível o contacto com ligação direta ao correio
eletrónico do responsável pela produção do site.

Evitar finais de páginas das quais não seja possível sair. As barras de navegação
devem surgir no final de todas as páginas permitindo redirecionar o utilizador para
outras páginas, nomeadamente para a página inicial.

Os dez maiores erros em Web Design

Utilização de quadros- Uma página dividida em quadros é muito confusa para os utilizadores,
uma vez que os quadros vão contra o modelo fundamental de uma página web. Não se pode
ao mesmo tempo marcar a página corrente e voltar a esta, os URL’s param de trabalhar e as
impressões tornam-se difíceis. A previsibilidade da reação dos utilizadores deixa de fazer
sentido quando estes não sabem que informação será disponibilizada quando clicam num link.

Utilização gratuita da tecnologia mais avançada- Não se deve atrair os utilizadores para um
site, fazendo menção de que utiliza a última tecnologia web. Pode atrair alguns fanáticos pela
informática, mas a maioria dos utilizadores prestam mais atenção aos conteúdos e à

possibilidade do site oferecer um bom serviço.


Utilizar a melhor e última tecnologia mesmo antes de ser lançada no mercado irá certamente
desencorajar os utilizadores: se os seus sistemas forem abaixo enquanto visitam o site, pode-
se apostar que muitos deles não voltarão a consultar o site. A não ser que se comercialize
produtos ou serviços na net, torna-se mais favorável aguardar até que se obtenha experiência
relativamente à forma mais apropriada de utilizar essas técnicas. Quando apareceu o desktop
as pessoas colocaram vinte fontes nos seus documentos, logo há que evitar que aconteça uma
situação similar relativamente à web.

Texto, marcas e constantes animações em movimento- Nunca se deve incluir numa página
elementos que se movam incessantemente. As imagens em movimento têm um efeito nefasto
na visão dos humanos. A página web deve dar ao utilizador alguma paz e serenidade para que
este possa efetivamente ler o texto.

URL’s complexas- As URL’s nunca devem estar expostas no interface do utilizador, é


previsível que os utilizadores tentem descodificar as URL’s das páginas para perceber a
estrutura do site. Os utilizadores tomam esta atitude devido à grande falta de apoio na navegação
e sentido de orientação no browser corrente. Então, a URL deve conter diretorias de leitura
acessível aos utilizadores e nomes que reflitam a natureza da informação contida no site.
Páginas solitárias- Assegurar que todas as páginas incluem uma clara indicação de qual o
website a que pertencem, uma vez que os utilizadores podem aceder a páginas diretamente,
sem ter de passar pela página inicial. Pela mesma razão, todas as páginas deverão ter um link
para a página inicial, bem como alguma indicação sobre a sua localização dentro da estrutura do
site.

Páginas com longos textos corridos- Apenas 10% dos utilizadores, acedem à informação
que está disponível para além da que está visível no ecrã quando surge a página. Todos os
conteúdos importantes e opções de navegação devem estar no topo da página.

Falta de suporte à navegação - Nunca se deve assumir que os utilizadores sabem tanto
acerca do site como o designer. Eles têm sempre dificuldade em encontrar informação, logo
necessitam de suporte no que diz respeito à sua estrutura e localização.
Começar o design com uma boa compreensão da estrutura espacial da informação e
comunicar explicitamente essa estrutura ao utilizador. Disponibilizar o mapa do site para que os
utilizadores saibam onde estão e para onde se podem encaminhar. É necessário, também, um
bom motor de busca, uma vez que o melhor de navegação nunca é suficiente.

Cores não Standard nos Links - Os links que não tenham sido utilizados devem ser azuis; os
links para páginas que tenham sido anteriormente visitadas devem ser púrpura ou vermelhos.
Não se deve misturar estas cores, uma vez que a possibilidade de perceber quais os links que
já foram utilizados é uma das poucas ajudas para a navegação e é standard na maioria dos
browsers. A consistência é a chave para ensinar aos utilizadores o significado das cores dos
links.

Informação desatualizada- É necessário contratar um “jardineiro” web para fazer parte da

equipa, torna-se necessário que alguém retire as “ervas daninhas” e plante novamente “flores”
enquanto o website se altera, mas a maioria das pessoas preferem criar novos conteúdos em
detrimento da manutenção do site. Na prática, a manutenção do site é uma forma barata de
realçar o conteúdo do website uma vez que muitas das páginas antigas mantém a sua
relevância e devem ter um link para novas páginas. Claro que algumas páginas deverão ser
totalmente removidas do server uma vez que se tornam obsoletas.
Downloads demorados- Este erro é referido em último lugar porque muitas pessoas já têm
conhecimento sobre o mesmo; e não por ser menos importante. As premissas tradicionais
indicam um máximo de resposta de10 segundos até que os utilizadores percam interesse. Na
web, os utilizadores têm sido treinados para suportar tanto sofrimento que se torna aceitável
aumentar esse limite para 15 segundos nalgumas páginas.

Tipos de Páginas

Páginas Pessoais
Objetivos: partilhar informação pessoal
Audiência: alunos, colegas, amigos, etc.

Páginas Comerciais
Objetivos: Proporcionar novos negócios, vender produtos, fornecer informações,
etc.
Audiência: clientes, etc.

Páginas Informativas
Objetivos: transmitir informações
Audiência: público em gera
VIDA ATIVA
Emprego Qualificado