Upload
hadiep
View
225
Download
1
Embed Size (px)
Citation preview
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