Página Web

INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO DE FORMAÇÃO PROFISSIONAL
UFCD 0152 – Estrutura de
um sítio para Internet
25 Horas
Noções Sábias - Barcelos
Formador: Paulo Garrido
1
Página Web
É 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.
Também conhecida pelo
inglês webpage;
2
Página Web
Definição
Tema: Identificação do assunto e da ideia principal do site.
Objetivos: Identificação da função que o site vai
desempenhar. Para quê?
Destinatários:
Identificação
e
caracterização
dos
utilizadores.
3
Página Web
Organograma
É fundamental criar um diagrama com a estrutura das
páginas, agrupadas por tópicos.
4
Página Web
Pastas e Ficheiros
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).
5
Página Web
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
poderá
conduzir
ao
abandono da página.
Existem várias estruturas
para organização
apresentação.
da
6
Página Web
Esquemas de Navegação – Estrutura Linear
Utilizada tradicionalmente;
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.
7
Página Web
Esquemas de Navegação – Estrutura Árvore
Estrutura
também
bastante
familiar;
Base
da classificação, da
organização administrativa ou
das árvores genealógicas;
Organização do conteúdo faz-se
de forma hierárquica;
Informação mais geral no topo, e a
mais detalhada, em níveis mais
baixos, submetida à mais geral.
8
Página Web
Esquemas de Navegação – Estrutura Estrela
Possuem 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”;
Mais utilizada quando existe
um tópico principal, do qual
fazem
parte
vários
subtópicos.
9
Página Web
Esquemas de Navegação – Estrutura Mista
O utilizador chega a uma página
(de uma roda) que é o início de
uma sequência que gostaria que
ele visitasse (o túnel).
Ex:
Considere um site sobre desporto, 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.
10
Página Web
Esquemas de Navegação
11
Página Web
Ligações entre ecrãs
Componente da interface,
muito
dependente
da
estruturação da informação;
Constituído por todas as
ligações e hiperligações;
Permitem mover-nos através
das
diferentes
páginas,
criando as condições e
estilos de interatividade.
12
Página Web
Coerência e Funcionalidade das Ligações
Sequências utilizadas para ir para a
página seguinte e anterior (também
utilizadas pelos browsers);
Barras
de navegação (botões ou
menus), podendo ser constituídas por
itens de texto, itens gráficos, ou as
duas coisas;
As barras ou menus não devem
possuir demasiadas opções;
Ligações de deslocação para o início e
fim de página;
Ligação de deslocação, em todas as
páginas, para a página principal;
13
Página Web
A Interface
A sua conceção deve obedecer a alguns princípios da
comunicação visual, tendo em conta:
perceção,
legibilidade,
unidade organizacional,
códigos de cor,
estruturas de acesso à informação.
Uma boa interface pretende tornar a interação do homem
com o documento hipermédia, fácil, agradável, intuitiva,
numa palavra – amigável
14
Página Web
Design
Frame lateral esquerda sempre
presente para que o utilizador
não se sinta perdido;
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;
Música apenas com duas
repetições para não maçar o
utilizador.
15
Página Web
Cores
Fundos em tons claros;
Letras
em tons escuros e
contrastantes;
A utilização de fundos com
muitos
gráficos,
imagens
animadas ou cores muito
berrantes podem confundir o
utilizador e tornar difícil a
leitura;
É importante um ambiente
harmonioso entre as cores
utilizadas nas fontes das letras e
a cor utilizada no background da
página;
16
Página Web
Cores
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.
17
Página Web
Textos
Em fonte Verdana (com a alternativa Arial) porque não tem
serifa, o que facilita a leitura;
Os títulos podem ser em Times ou outro tipo de letra mais
desenhada (com ou sem serifa);
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.
18
Página Web
Imagens
Descrição
textual
identifique a imagem.
que
Numa página WWW 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.
19
Página Web
Imagens
Uma imagem que apoia um texto
(método aconselhável para 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, é
importante
para
a
sua
identificação.
Os ícones de navegação devem ser
óbvios, se suscitarem dúvidas é
preferível substituí-los por texto.
20
Página Web
Outros aspetos
Inserir uma data de produção em cada página de modo a
servir de indicador sobre a atualidade da informação nela
contida;
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.
21
Página Web
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.
Utilização gratuita da tecnologia mais avançada
Texto, marcas e constantes animações em movimento
URL’s complexas
Páginas solitárias (todas as páginas devem incluir uma
clara indicação de qual o website a que pertencem)
Páginas com longos textos corridos
22
Página Web
Os dez maiores erros em Web Design
Falta de suporte à navegação - dificuldade em encontrar
informação, necessitam de suporte da sua estrutura e
localização.
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
Informação desatualizada
Downloads demorados
23
Página Web
Tipos de Páginas
Páginas Pessoais
Objetivos
Objetivos: partilhar informação pessoal
Audiência
Audiência: alunos, colegas, amigos, etc.
Páginas Comerciais
Objetivos
Objetivos: Proporcionar novos negócios, vender produtos,
fornecer informações, etc.
Audiência
Audiência: clientes, etc.
Páginas Informativas
Objetivos
Objetivos: transmitir informações
Audiência
Audiência: público em geral
24
Página Web
Editores de páginas Web
Os editores de páginas web são programas desenvolvidos
para permitirem ao utilizador criar websites e páginas
web.
São exemplos destes editores:
FrontPage,
Dreamweaver,
Easy Website Pro,
BlueVoda,
CoffeeCup,
…
Namo WebEditor
25
Proposta de Atividade
Pesquise na Internet diferentes sites;
Escolha um dos sites pesquisados:
Refira pontos fortes do site
Refira pontos fracos do site
26
27