UFCD 0152 – Estrutura de

INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IPDELEGAÇÃO REGIONAL DO NORTE

CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO DE FORMAÇÃO PROFISSIONAL

Formador: Paulo Garrido

UFCD 0152 – Estrutura de um sítio para Internet

25 HorasNoções Sábias - Barcelos

1

Página Web� É uma "página" na world

wide web, geralmente emformato HTML ecom ligações de hipertextoque permitem a navegaçãoque permitem a navegaçãode uma página, ou secção,para outra.

� Também conhecida pelo inglês webpage;

2

Página WebDefinição

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

� Objetivos: Identificação da função que o site vaidesempenhar. ParaPara quê?quê?desempenhar. ParaPara quê?quê?

� Destinatários: Identificação e caracterização dosutilizadores.

3

Página WebOrganograma

� É fundamental criar um diagrama com a estrutura daspáginas, agrupadas por tópicos.

4

Página WebPastas e Ficheiros

� Uma pasta é um “sítio” onde pode armazenarficheiros.� Por exemplo criamos uma pasta para todas as imagens,

outra para documentos, etc.

� Podem conter ficheiros, mas também podem conteroutras pastas(subpastas).

5

Página WebEsquemas de Navegação

� A estrutura deve permitirvisualizar de forma fácil eclara, os conteúdos deum conjunto de páginasWeb.Web.

� Uma estrutura deficientepoderá conduzir aoabandono da página.

� Existem várias estruturaspara organização daapresentação.

6

Página WebEsquemas de Navegação – Estrutura Linear

� Utilizada tradicionalmente;

� A informação linear está organizada de forma a que, paraser recuperada, não necessita referências a si mesma ououtras informações externas;outras informações externas;

� Só existem duas possibilidades de navegação: para a frenteou para trás;

� É perfeitamente fiável, mas monotonamente previsível.

7

Página WebEsquemas de Navegação – Estrutura Árvore

� Estrutura também bastantefamiliar;

� Base da classificação, daorganização administrativa ouorganização administrativa oudas árvores genealógicas;

� Organização do conteúdo faz-sede forma hierárquica;

� Informação mais geral no topo, e amais detalhada, em níveis maisbaixos, submetida à mais geral.

8

Página WebEsquemas de Navegação – Estrutura Estrela

� Possuem um nó central eprincipal, e um conjunto denós ligados a este;

� A passagem de um nó a outro� A passagem de um nó a outrorequer sempre o regresso ao"local central”;

� Mais utilizada quando existeum tópico principal, do qualfazem parte váriossubtópicos.

9

Página WebEsquemas de Navegação – Estrutura Mista

� O utilizador chega a uma página(de uma roda) que é o início deuma sequência que gostaria queele visitasse (o túnel).

Ex:

Considere um site sobre desporto, naseção sobre ténis, há um link para osite de uma escolinha de ténis quetem estrutura de túnel, apresentandoa escola e no final, um formulário deinscrição.

10

Página WebEsquemas de Navegação

11

Página WebLigações entre ecrãs

�Componente da interface,muito dependente daestruturação da informação;

�Constituído por todas as�Constituído por todas asligações e hiperligações;

�Permitem mover-nos atravésdas diferentes páginas,criando as condições eestilos de interatividade.

12

Página WebCoerência e Funcionalidade das Ligações

�Sequências utilizadas para ir para apágina seguinte e anterior (tambémutilizadas pelos browsers);

�Barras de navegação (botões oumenus), podendo ser constituídas poritens de texto, itens gráficos, ou asitens de texto, itens gráficos, ou asduas coisas;

�As barras ou menus não devempossuir demasiadas opções;

�Ligações de deslocação para o início efim de página;

�Ligação de deslocação, em todas aspáginas, para a página principal;

13

Página WebA Interface

� A sua conceção deve obedecer a alguns princípios dacomunicaçã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 WebDesign

�Frame lateral esquerda semprepresente para que o utilizadornão se sinta perdido;

�Separadores entre as imagens;

�Setas personalizadas do mesmopadrão;padrão;

�Cores com ténues diferentesentre o menu esquerdo e aspáginas do lado direito daframe;

�Música apenas com duasrepetições para não maçar outilizador.

15

Página WebCores

�Fundos em tons claros;

�Letras em tons escuros econtrastantes;

�A utilização de fundos commuitos gráficos, imagensanimadas ou cores muitoanimadas ou cores muitoberrantes podem confundir outilizador e tornar difícil aleitura;

�É importante um ambienteharmonioso entre as coresutilizadas nas fontes das letras ea cor utilizada no background dapágina;

16

Página WebCores

� Logotipo em cadapágina com uma corque realce em relação àcor do fundo;

� Separador numapágina entre osSeparador numapágina entre osdiferentes temas ouassuntos (em tomconcordante com ofundo);

� Título de cada páginaem tom contrastantecom o fundo e a cor dorestante texto.

17

Página WebTextos

� Em fonte Verdana (com a alternativa Arial) porque não temserifa, o que facilita a leitura;

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

� Os textos nunca são sublinhados para que o utilizador nãoconfunda com uma hiperligação.

� Evitar a utilização de texto cintilante, animação.

18

Página WebImagens

� Descrição textual queidentifique a imagem.

� Numa página WWW podemutilizar imagens com formato.gif ou .jpg, sendo o primeiro.gif ou .jpg, sendo o primeirogeralmente utilizado parailustrações e o segundo parafotos.

� Manter os ficheiros dasimagens com dimensõesreduzidas por forma a mantero mínimo tempo possível parao carregamento da página.

19

Página WebImagens

� Uma imagem que apoia um texto(método aconselhável para acompreensão do texto) deveaparecer do lado direito, para queo utilizador comece por ler o texto.o utilizador comece por ler o texto.

� A consistência, a nível deimagens, do grafismo e de íconesde navegação utilizados, éimportante para a suaidentificação.

� Os ícones de navegação devem seróbvios, se suscitarem dúvidas épreferível substituí-los por texto.

20

Página WebOutros aspetos

� Inserir uma data de produção em cada página de modo aservir de indicador sobre a atualidade da informação nelacontida;

� No final da página inicial deverá estar visível o contacto comligação direta ao correio eletrónico do responsável pelaligação direta ao correio eletrónico do responsável pelaproduçã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 aspáginas permitindo redirecionar o utilizador para outraspáginas, nomeadamente para a página inicial.

21

Página WebOs 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 quadrosvão contra o modelo fundamental de uma página web. Nãose pode ao mesmo tempo marcar a página corrente e voltara esta.a esta.

� Utilização gratuita da tecnologia mais avançada

� Texto, marcas e constantes animações emmovimento

� URL’s complexas

� Páginas solitárias (todas as páginas devem incluir umaclara indicação de qual o website a que pertencem)

� Páginas com longos textos corridos

22

Página WebOs dez maiores erros em Web Design

� Falta de suporte à navegação - dificuldade em encontrarinformação, necessitam de suporte da sua estrutura elocalização.

� Cores não Standard nos Links - Os links que não tenhamsido utilizados devem ser azuis; os links para páginas quesido utilizados devem ser azuis; os links para páginas quetenham sido anteriormente visitadas devem ser púrpura ouvermelhos

� Informação desatualizada

� Downloads demorados

23

Página WebTipos de Páginas

� Páginas Pessoais

�� ObjetivosObjetivos: partilhar informação pessoal

�� AudiênciaAudiência: alunos, colegas, amigos, etc.

� Páginas Comerciais� Páginas Comerciais

�� ObjetivosObjetivos: Proporcionar novos negócios, vender produtos,

fornecer informações, etc.

�� AudiênciaAudiência: clientes, etc.

� Páginas Informativas

�� ObjetivosObjetivos: transmitir informações

�� AudiênciaAudiência: público em geral24

Página WebEditores 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,

� …

�� NamoNamo WebEditorWebEditor

25

Proposta de AtividadeProposta de Atividade

� Pesquise na Internet diferentes sites;

� Escolha umdos sites pesquisados:

26

� Escolha umdos sites pesquisados:

�Refira pontos fortes do site

�Refira pontos fracos do site

27