Módulo 4

Desenvolvimento de Páginas
Web Estáticas

Fundamentos do planeamento de um
website

Regras para um website eficaz

 Sobre o conteúdo;
 Sobre a forma;
 Modelos de páginas.

1
Regras para um website eficaz
sobre o conteúdo

Um website é composto por um conjunto mais ou menos

numeroso de páginas web.

Nas páginas web podem existir diversos conteúdos

apresentados em diversos formatos, como texto, imagem,
vídeo e som.

Regras para um website eficaz

sobre o conteúdo (cont.)

Efetuar um estudo prévio onde são definidos:

• os objetivos;

• os utilizadores a que se destina.

Definir os conteúdos do website tendo em conta:

• a categorização dos conteúdos;

• a sua condensação.

2
Regras para um website eficaz
sobre o conteúdo (cont.)

Categorização dos conteúdos

O desenvolvimento de um website é efetuado a partir de
um tema previamente definido.
Depois de conhecido o tema, é necessário decompô-lo nos
diversos conteúdos do site.
Realizando a estrutura lógica dos conteúdos, organizar
os conteúdos em diferentes categorias e subcategorias.

Regras para um website eficaz

sobre o conteúdo (cont.)

Categorização dos conteúdos (continuação)

Quando o site resulta de uma adequada categorização dos
conteúdos apresenta:
• maior flexibilidade;
• escalabilidade;
• convertibilidade.
Que permite no futuro, a sua expansão ou renovação.

3
Regras para um website eficaz
sobre o conteúdo (cont.)

Condensação
Os conteúdos a apresentar numa página web devem ser
orientados aos utilizadores que são o público-alvo.
Os conteúdos para além da sua utilidade, devem ser
apresentados de uma forma condensada (simples e
direta).
Estas características permitem não afastar os utilizadores,
conduzindo-os à consulta dos conteúdos do site de uma
forma agradável.

Regras para um website eficaz

sobre a forma

Consistência e previsibilidade
A consistência e a previsibilidade de um website
correspondem a um conjunto de características que são
definidas para os elementos que constituem as páginas de
um website, como:
• o esquema organizativo;
• os tipos de letra;
• e o tamanho dos tipos de letra.

4
Regras para um website eficaz
sobre a forma (cont.)

Consistência e previsibilidade (continuação)

Relativamente à consistência, a definição das
características permitem ao utilizador identificar, de forma
mais fácil, as páginas como pertencentes ao mesmo
website.

Regras para um website eficaz

sobre a forma (cont.)

Consistência e previsibilidade (continuação)

Relativamente à previsibilidade, a definição das
características permitem ao utilizador localizar, de forma
mais fácil e rápida, os principais elementos que podem
estar presentes em todas as páginas, como:
• o menu de navegação;
• botões;
• imagens (criação de folhas de estilo).

10

5
Regras para um website eficaz
sobre a forma (cont.)

Uso racional da tecnologia

Inicialmente, o desenvolvimento das páginas web,
utilizando apenas o HTML (Hipertext Markup Language),
resultava em páginas com conteúdos estáticos.
O desenvolvimento de páginas com conteúdos dinâmicos
e interativos era feito recorrendo à tecnologia CGI
(Common Gateway Interface).

11

Regras para um website eficaz

sobre a forma (cont.)
Uso racional da tecnologia (continuação)
A tecnologia CGI é suportada pela maioria dos servidores
web e define a interface que as aplicações devem utilizar
de forma a estender as funcionalidades do servidor web.
A alteração do conteúdo das páginas é efetuada do lado
do servidor (as páginas são reescritas e enviadas para o
browser).
Esta forma leva a um maior processamento do lado do
servidor, o que vai levar a uma sobrecarga de tráfego na
rede, tornando os processos mais lentos.

12

6
Regras para um website eficaz
sobre a forma (cont.)

Uso racional da tecnologia (continuação)

Hoje em dia existe um conjunto de novas tecnologias,
tanto do lado do servidor como do lado do cliente, que
permitem criar conteúdos dinâmicos e interativos de forma
diferente.

13

Regras para um website eficaz

sobre a forma (cont.)
Uso racional da tecnologia (continuação)
Do lado do cliente, a utilização de tecnologias como:
o Java Applet – é necessário existir máquina virtual Java
(JVM – Java Virtual Machine);
o ActiveX – os controlos deste funcionam principalmente
com browsers da Microsoft;
e os plug-ins – estes têm que ser descarregados,
instalados e atualizados;
permitem adicionar conteúdos ativos às páginas em HTML,
mas requerem browsers e plataformas próprias.
14

7
Regras para um website eficaz
sobre a forma (cont.)
Uso racional da tecnologia (continuação)
Para ultrapassar as limitações das tecnologias
apresentadas para criação de páginas web, foram
definidos novos standards pelo W3C (World Wide Web
Consortium), como por exemplo:
DHTML (Dynamic HTML);
XML (Extensible Markup Language) e outros.

15

Regras para um website eficaz

sobre a forma (cont.)
Uso racional da tecnologia (continuação)
DHTML (Dynamic HTML) é interpretado pelo browser, tal
como o HTML, permitindo adicionar interatividade às
páginas web sem necessidade de recorrer às tecnologias
anteriores.
Para obter páginas web com esta tecnologia, é necessário
utilizar:
• a linguagem HTML,

• uma linguagem de scripting (por ex: JavaScript)

• e em substituição dos atributos de formatação do HTML,

as folhas de estilo CSS (Cascading Style Sheets).
16

8
Regras para um website eficaz
sobre a forma (cont.)

Uso racional da tecnologia (continuação)

XML (Extensible Markup Language) utiliza o HTML que
permite interativamente trocar dados entre aplicações e
organizações e é muito utilizado em websites de comércio
electrónico.
Foi concebido apenas para estruturar o conteúdo dos
dados, enquanto que o HTML lhe dá o formato e a
apresentação.

17

Regras para um website eficaz

sobre a forma (cont.)

Uso racional da tecnologia (continuação)

Recentemente, surgiu o XHTML (Extensible Hypertext
Markup Language), que combina as duas tecnologias
anteriores, HTML e XML, isto é, consiste nos elementos
do HTML 4.01 combinados com a sintaxe do XML.

18

9
Regras para um website eficaz
sobre a forma (cont.)

Uso racional da tecnologia (continuação)

O W3C (World Wide Web Consortium) é um consórcio
internacional.
Criado com o objetivo de tornar universal o acesso à web,
através do desenvolvimento de normas e padrões abertos
que conduzem à sua evolução e asseguram a
interoperacionalidade entre as várias tecnologias.

19

Regras para um website eficaz

sobre a forma (cont.)

Uso racional da tecnologia (continuação)

Por exemplo, as recomendações do W3C indicam que,
caso usem tecnologias recentes, deve ser criada uma
versão alternativa para que todos os utilizadores possam
ter acesso e não se criem barreiras tecnológicas.

20

10
Regras para um website eficaz
sobre a forma (cont.)

21

Regras para um website eficaz

sobre a forma (cont.)

Uso racional da tecnologia (continuação)

Os objetivos transversais presentes nas várias áreas de
trabalho do W3C:
• a acessibilidade;
• a internacionalização;
•a independência da plataforma e dos dispositivos
utilizados;
• a segurança da qualidade.

22

11
Regras para um website eficaz
sobre a forma (cont.)
Uso racional da tecnologia (continuação)
A arquitetura web é descrita nas seguintes camadas:
• URI/IRI, HTTP;
• Web Architectural Principles;
• XML Infosets; RDF Graphs;
• XML, Namespaces, Schemas, XQuery/XPath, XSLT,
DOM, XML Base, XPointer, RDF/XML, SPARQL.

23

Regras para um website eficaz

sobre a forma (cont.)
Uso racional da tecnologia (continuação)
Os grupos de maior atividade da W3C:
• Interação;
• Mobilidade Web;
• Voz;
• Serviços Web;
• Semântica Web;
• Privacidade.

24

12
Regras para um website eficaz
sobre a forma (cont.)

Recurso a imagens

Vantagens da utilização de imagens:

• as páginas web ficam mais atrativas e legíveis;
• aumento do número de utilizadores.

25

Regras para um website eficaz

sobre a forma (cont.)

Recurso a imagens (continuação)

Desvantagens da utilização de imagens:
• a página web que contenha muitas imagens, cujos
tamanhos dos ficheiros seja grande, torna-se lenta;
• diminuição do número de utilizadores;
• a representação de texto através de imagens deve ser
evitada, pois dificulta a pesquisa de informação e o
redimensionamento do texto ao ser visualizado nos
navegadores.

26

13
Regras para um website eficaz
sobre a forma (cont.)

Recurso a imagens (continuação)

As limitações impostas pelo tamanho das imagens a

utilizar na Internet podem ser minimizadas através da
utilização de formatos de imagens mais indicados (PNG,
JPEG e GIF).

27

Regras para um website eficaz

sobre a forma (cont.)

Combinação de cores

As cores, ao serem selecionadas, podem transmitir, à

partida, muita informação relacionada com o assunto a
tratar.
Estas podem inicialmente aproximar ou afastar os
utilizadores da página onde foram aplicadas.

28

14
Regras para um website eficaz
sobre a forma (cont.)
Combinação de cores (continuação)

As cores e as suas combinações devem ser selecionadas

com cuidado, para criar conjuntos mais harmoniosos.
Estas combinações podem ser efetuadas segundo um
conjunto de regras, tais como cores com o mesmo tom,
cores com o mesmo nível de saturação e luminosidade.
O fundo de uma página web deve contrastar com o texto e
os elementos gráficos da mesma.

29

Regras para um website eficaz

sobre a forma (cont.)

Uso de frames

As frames ou molduras são elementos estruturais e de

navegação de uma página web.

30

15
Regras para um website eficaz
sobre a forma (cont.)

Uso de frames (continuação)

São estruturais porque permitem a definição de uma
estrutura dividindo o espaço de uma página web num
conjunto de espaços retangulares mais pequenos.

Este conjunto é também conhecido por frameset que,

depois de implementado, consiste num espaço com
múltiplas páginas web.

31

Regras para um website eficaz

modelos de página

Um modelo de página é um conjunto predefinido de

formatos de texto e gráficos, a partir do qual se criam as
páginas do website.
Os modelos de páginas web podem incluir:
• tabelas de esquema;

• estilos;

• formatação;

• gráficos ou outros elementos de página.

32

16
Regras para um website eficaz
modelos de página (cont.)

Páginas de abertura

A página de abertura corresponde à primeira página que é

carregada no browser quando se acede a um website.

33

Regras para um website eficaz

modelos de página (cont.)

Páginas iniciais

A página inicial corresponde à página que é carregada no

browser após a página de abertura, quando se acede a um
website.

Em alguns websites, devido à inexistência da página de

abertura, a página inicial e a página de abertura são a
mesma.

34

17
Regras para um website eficaz
modelos de página (cont.)

Páginas iniciais (continuação)

Os ficheiros onde são guardados os dados das páginas de

abertura ou inicial são, normalmente, designados por
default ou index e têm extensões htm ou html.

No entanto, no caso da utilização de tecnologias mais

recentes, podem apresentar outros nomes e extensões.

35

Regras para um website eficaz

modelos de página (cont.)

FAQ

A página de FAQ (Frequently Asked Questions) é utilizada

nos websites para apresentar um conjunto de questões e
as respetivas respostas.

As questões são formuladas de acordo com o contexto e o

assunto em que se insere o website.

36

18
Regras para um website eficaz
modelos de página (cont.)

Contactos

A página de contactos permitem divulgar dados sobre a

empresa, a instituição ou outras entidades. Normalmente,
os dados referidos nesta página podem ser a direção, o
telefone, o e-mail, o fax e outros.

37

Regras para um website eficaz

modelos de página (cont.)

Mapa do site

A página Mapa do site mostra aos utilizadores a

organização hierárquica das páginas do website, através
de uma representação esquemática.

A partir desta página é possível navegar nas páginas do

website, através dos seus links, à semelhança do índice de
um livro.

38

19
Regras para um website eficaz
modelos de página (cont.)

Livro de visitas

A página Livro de visitas é constituída por um formulário,

que depois de preenchido é enviado para o servidor do
website.

Através do preenchimento do formulário, a entidade pode

requerer dados do utilizador e, em alguns casos,
comentários ao website.

39

Regras para um website eficaz

modelos de página (cont.)

Páginas de conteúdo

As páginas de conteúdo correspondem às páginas web

utilizadas para divulgar informação relacionada com os
objetivos do site, sob a forma de texto, gráfico, vídeo e/ou
som.

40

20