TIC Mdulo 3

Criao de Pginas Web

Curso Tcnico de Manuteno Industrial

Mecatrnica Automvel

Hlio Vilas
Setembro 2016

Como Planear um Website?

Prof. Hlio Vilas

Planear um Website

Conjunto de etapas:
1) Estabelecer os objetivos;
2) Refletir sobre a audincia;

3) Listar as caractersticas pretendidas para o site;

4) Organizar a estrutura do site;
5) Definir a estrutura das pginas;

Prof. Hlio Vilas

Estabelecer os seus objetivos

estabelecimento

dos

objetivos

do

website

na

fase

de

planeamento permite estruturar todo o seu desenvolvimento;

Antes necessrio efetuar um estudo prvio, em que a equipa de

desenvolvimento procura conhecer todos os aspetos relacionados
com a inteno de criar o website;

necessrio identificar, de forma clara, uma resposta a questes

como a sua finalidade, os objetivos principais a atingir, a quem se

destina e quais as informaes a divulgar;

necessrio descrimin-los por ordem da sua importncia,

devendo ser divulgados a todos os elementos envolvidos.
Prof. Hlio Vilas

Fase 1 Definir os objetivos do Web Site

Para qu?

Qual o propsito ou finalidade do Web Site?

Uma definio sucinta dos objetivos necessria e til

para fundamentar as decises que se tomam quanto
sua estrutura, contedo e manuteno.

Prof. Hlio Vilas

Refletir sobre a audincia

A reflexo sobre a audincia do website a desenvolver

deve permitir conhecer melhor os potenciais futuros

utilizadores;

Deve ser feito em conjunto com os clientes e

procurar respostas para questes como quem so os

potenciais utilizadores, que idades tm, qual o seu

nvel econmico, que nvel de instruo possuem,
quais os seus interesses, quais as suas competncias
tcnicas, quais as atividades desempenhadas e quais
os novos utilizadores que podem ser fidelizados.

Prof. Hlio Vilas

Fase 2 Caracterizar o pblico-alvo

Para quem?

A quem se dirige?

Para qualquer pessoa em geral, ou para um

determinado tipo de utilizador?

Prof. Hlio Vilas

Listar as caractersticas e os contedos

pretendidos para o site

Deve ser efetuada tendo por base os dados das duas

etapas anteriores, identificando a marca principal e

outras propriedades que caracterizam o site e

permitem diferenci-lo dos demais;

Exemplo: O google, apesar do logtipo sofrer

alteraes de acordo com os diferentes momentos, o
website continua a manter as suas caractersticas de
marca, que o permitem identificar facilmente.

Prof. Hlio Vilas

Fase 3 Identificar os
contedos a publicar

O qu?

Que informao deve conter?

Devem ter em conta os objetivos

definidos, o pblico alvo.

Trabalhos pessoais, imagens,

contedos multimdia,...

Prof. Hlio Vilas

Organizar a estrutura do site

Passa pela definio das ligaes entre as pginas que o

compem;

Deve ser intuitiva e fcil de compreender pelo utilizador;

De acordo com as ligaes que so estabelecidas entre as pginas

de um site, podem existir diferentes tipos de estruturas:

Hierrquico;
Rede;
Combinao dos dois, com maior ou menor complexidade.

A situao ideal encontrar um ponto de equilbrio, para evitar que, por um lado, o

utilizador efetue muitos cliques para atingir a informao pretendida e, por outro lado,
tenha de escolher uma opo de entre muitas opes possveis

Prof. Hlio Vilas

10

Fase 4 Estruturar o site

Trata-se de pensar o site em termos globais ou de

estrutura (no ainda em relao aos detalhes).

Executar um esboo ou esquema das pginas que

vo integrar o site;

Organizar o site por seces;

Definir relaes ou ligaes entre as pginas estrutura hierrquica.

Prof. Hlio Vilas

Esquema de
Navegao

11

Desenhar o esquema de navegao

Existem vrios esquemas de navegao:

Global as hiperligaes encontram-se, normalmente, em todas as

pginas do site e no topo destas; permitem o acesso s principiais reas

do website.

Local as hiperligaes encontram-se, habitualmente, no lado esquerdo

do site; permitem o acesso a locais mais especficos dentro da rea em
que o utilizador se encontra.

Contextual as hiperligaes permitem o acesso a locais no

abrangidos pelos esquemas de navegao global e local.

As navegaes externas permitem navegar para outras pginas do mesmo

site; as navegaes internas permitem navegar dentro da mesma pgina
Prof. Hlio Vilas

12

Desenhar o esquema de navegao

Esquema
de
navegao
global

Esquema
de
navegao
local

Esquema
de
navegao
contextual

Prof. Hlio Vilas

13

Desenhar o esquema de navegao

Prof. Hlio Vilas

14

Definir a estrutura das pginas

a ltima etapa do planeamento de um website antes da sua

implementao, publicao e manuteno;

Pode ser feito em papel, um esquema da estrutura de pginas com

a disposio dos seus componentes e avaliando as vrias

hipteses;

So definidas as resolues das pginas para impresso e

visualizao por diferentes equipamentos;

A definio da estrutura das pginas no pode perder de vista o

objetivo de obter um equilbrio entre o aspeto esttico, a
funcionalidade e o contedo informativo das mesmas.

Prof. Hlio Vilas

15

Fase 5 Estrutura das pginas

Manter uma identidade visual prpria que se

deve manter ao longo de todas as pginas
para que o utilizador encontre a informao
que procura utilizando sempre os mesmos
procedimentos.

Prof. Hlio Vilas

16

Deste modo, antes de elaborar o site deve ser

definido o especto visual das pginas (Layout).

Prof. Hlio Vilas

17

Alguns cuidados a ter:

Destacar o ttulo utilizando formatos maiores, maisculas ou negrito;

Aplicar nas listagens marcas e/ou numerao;

Identificar claramente os links e a pgina para onde remete;

No sobrecarregar as pginas com muitas cores, de forma a no

distrair o utilizador. No usar mais de trs cores.

Escolher uma cor de fundo neutra que garanta legibilidade.

O excesso de objetos multimdia sobrecarrega as pginas e torna a

navegao lenta e difcil.

Prof. Hlio Vilas

18

Imagens, Sons e Vdeo

As imagens devem ser gravadas em formatos adequados s

suas caractersticas:
GIF: imagens com poucas cores.
JPG ou JPEG fotografias, imagens com muitas tonalidades.

Os sons:
WAVE: utilizado apenas em ambiente Windows, ocupa muito
espao e torna a pgina lenta.
MPEG: ficheiros mais leves.

Os vdeos introduzem muita lentido na visualizao das

pginas. Os formatos mais utilizados so:
MPEG: relativamente pouco pesados e com qualidade.
AVI: ocupa muito espao.

Prof. Hlio Vilas

19

Exerccio

Utilizando um processador de texto, elabore o plano de um site com

o mximo de seis pginas. Nesse documento deve definir:
1) O tema

2) O pblico-alvo
3) A informao a integrar em cada pgina
4) As imagens/sons/vdeos a incluir
5) O layout da pgina mais adequado
6) O esquema hierrquico das pginas

Prof. Hlio Vilas

20