Aula 3

Disciplina: PROGRAMAÇÃO
WEB (PW)

Docente: Higino Malate

E-mail: h-gino@hotmail.com
Projecto de Web Sites

Higino Malate
Desafios do Projecto de Sites
A metáfora de interacção dos leitores com uma página
HTML é diferente da sua experiência com livros.

Os usuários não se limitam a olhar a informação na web,

eles interagem com a mesma.

Alguns desafios para os web designers:

Como subdividir, organizar e apresentar a informação;
É necessário fornecer ao leitor ferramentas de busca e
navegação, assim como “dicas” de onde ele está;
Qual o tamanho óptimo para uma página;
Que tipo(s) de mídia utilizar e em que combinação;
É importante conhecer a audiência do site e suas
expectativas.
Higino Malate
Fases do Projecto
No projecto de sites da web, pode-se encontrar as
seguintes fases:
Determinação dos objectivos do site e o retorno
esperado;
Identificação da audiência do site;
Determinação do tipo de informação que se quer
armazenar(escopo);
Projecto do site: a metáfora de navegação utilizada;
Projecto das páginas: o visual do site.

Higino Malate
Páginas do Site
Páginas web diferem das páginas de um livro fundamentalmente
num aspecto: os hyperlinks permitem o acesso a elas sem nenhum
preâmbulo, logo, páginas web precisam ser mais “independentes”
que as páginas de um livro.

As páginas precisam conter informações para situar o leitor:

Quem–Sempre informe ao leitor qual a fonte da informação, quem
está falando com ele;
O Quê–O documento deve ter um título explicativo que resuma seu
conteúdo. Este título também se tornará o texto dos bookmarks feitos
pelos usuários;
Quando–A informação na web é bastante volátil, logo, é importante
informar a data de criação ou revisão de um documento;
Onde–Uma página deve informar onde está localizada, a que
organização pertence, qual a sua vizinhança.

Higino Malate
Páginas do Site

Uma página web precisa, no mínimo, de:

Um título informativo (que se tornará também um
bookmark);
A identidade do seu criador (autor ou instituição);
Uma data de criação ou revisão;
Um link para uma página anterior ou menu;
Um link para a “home page” do site (em suas principais
páginas);

Higino Malate
Projecto de Interface
As interfaces gráficas surgiram para dar aos
usuários um controle maior sobre as tarefas
realizadas no computador;
Uma boa interface deve se adaptar às necessidades
dos usuários e não o contrário;
Por isso é tão importante saber para quem se está
projectando o site, conhecer sua audiência;

Higino Malate
Projecto do Site
O projecto do site irá determinar sua estrutura
organizacional, ou seja, como arranjar seu
conteúdo a fim de melhor atender às necessidades
dos usuários;

Lembre-se: o objectivo principal de um site é

prestar serviços à sua audiência;

Higino Malate
Subdivisão da Informação
Sem uma organização lógica e coerente da informação, um site
não será bem compreendido;

Sabe-se que o ser humano consegue guardar cerca de quatro a

sete unidades discretas de informação em sua memória de curto
prazo. Portanto, pequenas porções de informação são mais
fáceis de lembrar e manipular do que longos tratados;

Passos básicos para organizar a informação de um site:

Divida o conteúdo em pequenas unidades lógicas;
Estabeleça uma hierarquia entre as unidades;
Use a hierarquia para estruturar relações entre as unidades;
Construa o site segundo a estrutura de sua informação;
Analise o site sob o ponto de vista estético e funcional.

Higino Malate
Subdivisãoda Informação -Menus
Uma ferramenta poderosa para a organização de um
site é a utilização de menus.
Os menus relacionam os grandes tópicos do site com
suas unidades individuais de informação;
Você não quer que o usuário tenha um modelo mental
de seu site como a figura abaixo:

Higino Malate
Subdivisãoda Informação -Menus
Tome cuidado para evitar:
Menus do tipo “lista de supermercado”.

Higino Malate
Subdivisãoda Informação -Menus
Tome cuidado para evitar:
Hierarquias de menus muito profundas.

Higino Malate
Estrutura de um Site
Grandes sites são demasiadamente grandes para
depender unicamente de navegação por menus;

As páginas mais acessadas são susceptíveis de aparecer

nos menus de navegação;

Porém, as páginas obscuras e de muita profundidade

dentro do site só será encontrada e lida através de
mecanismos de busca na web.

Higino Malate
Estrutura de um Site
Embora na web seja possível ligar qualquer coisa a
qualquer coisa, devemos evitar essa tentação;

Sem uma organização lógica do site, os usuários irão

procurar a informação de que precisam em outro
lugar;

Formas principais de organização:

Sequências
Hierarquias
Teias(Webs)

Higino Malate
Estrutura de um Site -Organização
Sequencial
É um dos tipos mais comuns e tradicionais de organização;
O projecto consiste em um conjunto de páginas organizadas
em uma sequência pré-definida pelo autor do texto;
Cada documento aborda uma parte do assunto principal e
tem links para o nó anterior e o próximo, com alguns
possíveis desvios da narrativa;
O padrão de leitura (navegação) é similar ao de um livro,
com capítulos, seções e subsecções. O leitor pode, às vezes,
querer imprimir o conteúdo do site;
Recomendado para a apresentação de conteúdos extensos,
como: apostilas, manuais, listas indexadas, glossários,
informação cronológica, etc.

Higino Malate
Estrutura de um Site -Organização
Sequencial

Higino Malate
Estrutura de um Site -Organização
Hierárquica
Muito utilizada para a organização de conjuntos
complexos de informação;
Impõe uma disciplina maior ao autor do site;
O padrão de navegação se baseia em uma sequência de
caminhos que partem de um ponto comum, a página
principal do site;
O leitor, então, percorre a informação segundo uma
hierarquia top-down;

Higino Malate
Estrutura de um Site -Organização
Teia
Pode ser muito difícil de entender ou prever;
Impõe poucas restrições aos relacionamentos entre as
páginas;
Para que um conjunto de informação possa ser
organizado desta forma, é preciso que ele seja altamente
uniforme, com tópicos e sub-tópicos bem definidos;
A audiência desse tipo de site é especializada e deve ser
treinada para esta forma de interação;
Destina-se à elaboração de manuais de procedimentos,
descrições de casos médicos, listas de cursos, etc.

Higino Malate
Estrutura de um Site -Organização
Teia

Higino Malate
Diagrama de Site
Um bom diagrama do site, de preferência feito em
uma grande folha de papel, é uma excelente forma de
documentar o projecto e a sua evolução.

Higino Malate
Elementos de um Site
Home pages
Menus
Guias
Novidades
Busca
Informações de contacto e feedback
FAQs
Referências
Páginas de erro

Higino Malate
Elementos de um Site
Os principais objectivos do design gráfico são:
Criar uma hierarquia visual clara e de contraste, assim
você pode perceber o que é importante e o que é
periférico;
Definir as regiões funcionais da página;
Agrupar os elementos da página que estão relacionados,
de modo que você possa ver toda a estrutura do
conteúdo;

Higino Malate
Projecto de Páginas
Um bom design de página pode conferir a um site
maior clareza, legibilidade, organização e confiança
por parte dos usuários;

A finalidade principal do design gráfico é criar uma

hierarquia visual forte e consistente, logicamente
organizada, que dirija a atenção dos usuários à
informação que se quer veicular;

Higino Malate
Projecto de Páginas
As unidades funcionais da página “atlantic.com”
utiliza princípios de proximidade para organizar e
manter o complexo campo visual legível.

Higino Malate
Projecto de Páginas
Coerência
Uma abordagem coerente para o layout e navegação
permite que os usuários se adaptem rapidamente a seu
projecto;
Prever com confiança a localização de controles da
informação e navegação através das páginas do seu site;

Higino Malate
Projecto de Páginas
Contraste
A primeira impressão dos leitores é um conteúdo no
formato grande de muita cor, com elementos de
primeiro plano em contraste com os campo de fundo.
A partir deste primeiro plano, o usuário começa a pegar
informações específicas, a partir de gráficos e ou figuras,
e só depois é que eles começam analisar detalhes do
texto.

Higino Malate
Projecto de Páginas
Contraste
O usuário tem uma percepção muito geral de contraste
através de níveis mais sutis de atenção e, finalmente, a
própria leitura das manchetes principais.
Os projectos mais eficazes empregam um cuidadoso
equilíbrio de texto e links com gráficos relativamente
pequenos.

Higino Malate
Projecto de Páginas
Cor e contraste em tipografia
Cor e contraste são os principais componentes de
usabilidade universal.
A legibilidade do texto depende da capacidade do leitor
para distinguir de letra do campo de fundo.
Certifique-se de suas escolhas de cores não irá a
distinção do texto como fundo.
Evite o uso excessivo de contraste
O uso excessivo de destaques gráficos leva a um efeito
em que tudo é igualmente extravagante e nada é
enfatizado.

Higino Malate
Projecto de Páginas
Cor e contraste em tipografia

Higino Malate
Projecto de Páginas
Espaços em Branco
Use o espaço em branco para evitar a aglomeração nas
bordas das janelas do seu navegador com importantes
elementos do conteúdo da página;
Em layouts de largura fixa, flutuante considerar a página
no centro da janela do navegador;
Para os layouts, considere as páginas que usam 90-95%
da tela ao invés do 100% completo;

Higino Malate
Projecto de Páginas
Espaços em Branco
Deixar algum fundo em torno das áreas funcionais da
página para prestar socorro visual;

Higino Malate
Projecto de Páginas
Estilo
Não começou a desenvolver um "estilo“ em seu site, deve
se ter cuidado com simplesmente importar os elementos
gráficos de outro site ou publicação impressa para
decorar suas páginas;
O estilo gráfico e editorial do seu site deve evoluir como
uma consequência natural do tratamento coerente e
adequado de seu conteúdo e layout de página;
Prefira o convencional ao excêntrico, e nunca deixe o
enquadramento sobre carregar o conteúdo;
O melhor estilo é aquele que os leitores nunca reparam,
onde tudo parece lógico, confortável e bonito.

Higino Malate
Projecto de Páginas – Dicas!
Estabeleça uma hierarquia visual;
É preciso que a página tenha uma hierarquia visual forte
e consistente, que enfatize os elementos importantes;
Guie o olhar do leitor
A parte superior de qualquer página é a mais
importante, especialmente no caso de informações lidas
na tela do computador. Atenção aos primeiros 10 cm!
Distracções gráficas
Evite gráficos “bonitinhos” e desnecessários. Cuidado
também com letras muito grandes e excesso de fontes;
Consistência é fundamental
Crie um layout básico para o seu site e seja fiel a ele.

Higino Malate
Projecto de Páginas – Dicas!
Cabeçalhos: identidade do site
O cabeçalho da página deve fornecer informações úteis
para a localização do usuário:
 Identificação da organização ou instituição responsável pelo
site;
 Indicação da posição daquela página no contexto geral do site;
 Links de navegação para as principais seções do site.

Higino Malate
Projecto de Páginas – Dicas!
Rodapés: proveniência
Os rodapés também são importantes na concepção de
uma página e podem conter informações como:
 Origem da página
 Data de criação/actualização
 Autor
 Forma de contacto
 Links para as principais secções do site

Higino Malate
Projecto de Páginas – Dicas!
Agora já sabes como fazer um projecto de web site.
Depois de indentificares o teu grupo e os seus colegas
de grupo, leia o guião para fazer o trabalho
obedecendo algumas regras.

Higino Malate
?
Higino Malate
É o suficiente por hoje!

Higino Malate