UFCD 0152 Estrutura de um sítio para Internet

Tamanho: px

Começar a partir da página:

Download "UFCD 0152 Estrutura de um sítio para Internet"

Paula Palmeira Azeredo
8 Há anos
Visualizações:

1 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

CASTELO-SERVIÇO DE FORMAÇÃO PROFISSIONAL UFCD 0152 Estrutura de um

2 É 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

3 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

4 Organograma É fundamental criar um diagrama com a estrutura das páginas, agrupadas por tópicos. 4

5 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

6 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 da apresentação. Página Web Esquemas de Navegação 6

Uma estrutura deficiente poderá conduzir ao abandono da página.

7 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

referências a si mesma ou outras informações externas; Só existem duas

8 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

genealógicas; Organização do conteúdo faz-se de forma hierárquica; Informação

9 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

a outro requer sempre o regresso ao "local central ; Mais utilizada

10 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

Ex: Considere um site sobre desporto, na seção sobre ténis, há um link para o site de uma

11 Esquemas de Navegação 11

12 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

todas as ligações e hiperligações; Permitem mover-nos através

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

13 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

de texto, itens gráficos, ou as duas coisas; As barras ou menus não devem possuir demasiadas opções; Ligações

14 A Interface A sua conceção deve obedecer a alguns princípios da comunicação visual, tendo em conta: perceção, legibilidade, unidadeorganizacional, 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

15 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

padrão; Cores com ténues diferentes entre o menu esquerdo e as páginas do

16 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

o utilizador e tornar difícil a leitura; É importante um ambiente harmonioso entre as

17 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); Página Web Cores Título de cada página em tom contrastante com o fundo e a cor do restante texto. 17

(em tom concordante com o fundo); Página Web Cores Título de cada

18 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

desenhada(com ou sem serifa); Os textos nunca são sublinhados para que o

19 Imagens Descrição textual que identifique a imagem. 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

jpg, sendo o primeiro geralmente utilizado para ilustrações e o segundo para

20 Imagens Uma imagem que apoia um texto (método aconselhável para a compreensão do texto) deve aparecer do lado direito, para que outilizadorcomeceporlerotexto. 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

A consistência, a nível de imagens, do grafismo e de ícones de navegação utilizados, é

21 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; Nofinaldapáginainicialdeveráestarvisívelocontactocom ligação direta ao correio eletrónico do responsável pela produção do site. Evitarfinaisdepáginasdasquaisnãosejapossívelsair. 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

22 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 aesta. 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

23 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

24 Páginas Pessoais Página Web Tipos de Páginas 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 geral 24

25 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, EasyWebsite Pro, BlueVoda, CoffeeCup, NamoWebEditor 25

26 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 27

Documentos relacionados

Tópicos de Ambiente Web Web Design III

Tópicos de Ambiente Web Web Design III Professora: Sheila Cáceres Conteúdo para Web Educacional Entretenimento Comercial Industrial Cientifico Entre outros Tópicos de Ambiente Web - Prof. Sheila Cáceres