TIC

Mdulo 3:
Criao de Pginas Web

Curso Profissional de Tcnico de Multimdia:

Conceito de Web site

Um website (tambm chamado

stio Internet por abuso de linguagem) um
conjunto de ficheiros HTML, vinculados por
relaes hipertextuais, armazenados
num servidor web, ou seja um computador
permanentemente ligado Internet, alojando as
pginas web.
A criao de um site justifica-se
por vrias razes :
A necessidade de visibilidade: um site, se
for alvo de uma boa campanha de promoo,
pode ser um meio para uma marca ou uma
organizao aumentarem a sua visibilidade;

A melhoria da notoriedade: graas a um

site institucional ou um mini site web relativo
aos acontecimentos, uma marca pode
desenvolver a sua popularidade junto do
pblico;

O recolhimento de dados: a Internet

 A venda em linha: receosos no incio da
Internet, os cibernautas rapidamente
compreenderam o interesse da Internet
para a compra de certos produtos de
consumo. Um site pode representar, para
certas empresas, uma oportunidade em
termos de comercializao;

Implementao de um apoio aos

utilizadores: cada vez mais empresas
utilizam a Internet como suporte
privilegiado para o servio pr ou ps-
venda. Com efeito, com um site,
possvel pr disposio dos cibernautas
Distinguem-se habitualmente vrias
categorias de sites, de acordo com o
objetivo dos mesmos:

Os sites exposio tm por objetivo promover a

imagem de marca da empresa, apresentando.
por exemplo, os seus produtos ou os seus
servios;

Os sites catlogo so sites destinados a

apresentar a oferta da empresa;

Os sites de informao so sites que fornecem

uma informao especfica a um tipo de
 Os sites comerciais so sites que vendem
diretamente produtos ao utilizador da internet e
permitem eventualmente pagar em linha;

Os sites institucionais so sites que apresentam

a organizao e os seus valores. Este tipo de site
descreve geralmente a atividade da organizao,
e d informaes necessrias aos clientes ou aos
beneficirios;

Os sites pessoais (ou pginas pessoais) so sites

realizados por particulares a ttulo de lazer,
 Os sites comunitrios so sites que renem
cibernautas ao redor de um interesse comum.

Os sites intranet so sites acessveis a partir do

interior de uma empresa ou de uma direo,
tendo por objectivo a disponibilizao e partilha
de informaes profissionais.
O que o webmastering ?
Chama-se webmaster (em portugus webmestre)
pessoa responsvel por um ste, ou seja, geralmente a
pessoa que concebe um site e o atualiza.

A vida de um site possui duas facetas principais, e cada

uma pode dividir-se em fases especficas:

A criao, correspondendo concretizao de uma

ideia num site em linha, remetido e visitado;

A explorao, correspondendo gesto diria do site,

a sua evoluo e a sua atualizao.
A criao de um site um projeto global
que compreende um grande nmero de
fases:

Concepo, que corresponde formalizao da

ideia;

Realizao, que corresponde ao desenvolvimento

do site;

Alojamento, que a colocao em linha do site, de

maneira permanente.
A explorao do site engloba,
nomeadamente, as atividades seguintes:
Acompanhamento, das tecnologias, do
posicionamento do site e do dos concorrentes;

Promoo e referenciaes, permitindo

aumentar a sua audincia;

Manuteno e atualizao, representando a

animao diria do site e a manuteno do seu
bom funcionamento.
A criao de site por conseguinte uma atividade
multidisciplinar que recorre a um grande nmero
de competncias. De acordo com a organizao, a
funo de webmaster poder passar por
encarregado de todas as atividades, da concepo
referenciao.

O termo webmastering designa o conjunto das

tarefas necessrias para a explorao de um site
web.
 13

Tcnicas de implantao de pginas na Web

Linguagens de Programao

O HTML a linguagem mais utilizada para criar

pginas Web com hipertexto.

Utilizando a linguagem HTML podemos criar pginas

em que certos itens (palavras e/ou imagens) contm
uma ligao link ou hiperligao a outra zona da
mesma pgina ou a outros documentos.

DHTML (Dynamic HTML) Linguagem que torna os

elementos da uma pgina (texto, imagens, etc.) mais
 14

Tcnicas de implantao de pginas na Web

Linguagens de Programao
Java e Java Script
Visual Basic Script
JSP Java Server Pages
ASP Active Server Pages
PHP Personal Home Page

Este tipo de linguagens esto interligadas com o

HTML e permitem incluir efeitos dinmicos e
interactivos (por exemplo, interaco com bases
de dados).
 15

Tcnicas de implantao de pginas na Web

Criao de uma pgina atravs do Bloco

de Notas, utilizando cdigo HTML:
<HTML>
<TITLE> A minha primeira pgina </TITLE>
<BODY>
<H1> TIC Mdulo 3 Criao de pginas Web</H1>
<P> Esta a minha primeira pgina Web! </P>
</BODY>
</HTML>
 16

Tcnicas de implantao de pginas na Web

Editores de pginas Web

Editores mais utilizados na criao de pginas

Web: SharePoint e Dreamweaver

Os editores de criao e gesto de pginas

permitem inserir e formatar o contedo de forma
grfica.
 17

Tcnicas de implantao de pginas na Web

Editores de Imagens e efeitos especiais

O Corel Draw um programa que
permite manipular imagens vectoriais.

O Paint Shop Pro um programa que permite

fazer tratamento de imagem.
 18

Tcnicas de implantao de pginas na Web

Editores e programas de animao grfica

 19

Tcnicas de implantao de pginas na Web

Ferramentas e utilitrios

FTP (File Transfer Protocol) Protocolo utilizado

para transferir ficheiros entre dois computadores.
Programas que implementam este protocolo:

Cute FTP

WS FTP
 20

Ergonomia e amigabilidade de uma pgina Web:

Aspectos a ter em ateno antes de iniciar o

desenvolvimento de um Web site:

Contedo
Factores de design
Navegao
Layout
Apoio tcnico e processo de actualizao
 21

Contedo das pginas:

Resumir os contedos ao fundamental.

A informao deve estar organizada tendo em
ateno a sua importncia.
Textos com uma linguagem simples e com
pargrafos curtos (5 a 8 linhas).
 22

Contedo das pginas:

A origem do contedo deve ser conhecida.

Disponibilizar apenas a informao necessria,
evitando redundncias.
A pgina principal do Web site ser a mais
visitada. Por isso nela deve tentar resumir o
que o visitante vai encontrar no Web site.
 23

Design - Navegao:

A estrutura do site deve manter-se simples e

de fcil navegao.
Disponibilizar um mapa do Web site para o
utilizador se situar.
Disponibilizar uma seco de Ajuda com a
descrio dos passos a efectuar para visualizar
a pgina correctamente.
 24

Design - Navegao:

O Web site deve conter um campo para

pesquisa.
Disponibilizar uma seco de Contactos.
Possibilitar em qualquer altura o acesso
pgina inicial.
Definir menus de acordo com os contedos
principais e secundrios de forma a facilitar o
 25

Design - Layout:

As cores a utilizar e os efeitos grficos

devem ser escolhidos com cuidado.
As imagens a incluir em cada pgina,
bem como o seu formato, devem ser
escolhidas cuidadosamente.
Utilizar ttulos para que o utilizador saiba
 26

Design - Layout:

Layout elaborado de forma clara e

compreensiva.
A apresentao da informao deve ser
atractiva.
As imagens, som ou vdeo devem estar
de acordo com a informao veiculada.
 27

Apoio tcnico e processo de

actualizao

O Web site deve incluir informao

acerca da ltima actualizao.
O contedo deve ser actualizado
regularmente.
No deve haver problemas de
 28

Pgina principal:
Topo: poder aparecer o logtipo, nome,
endereo, nmero de telefone, etc.
Rodap: data da ltima actualizao, contacto
do responsvel pela pgina.
Fontes:
Devem escolher-se fontes como Arial e
Verdana para visualizaes, e Times New
Roman para impresses.
 29

Tamanho da letra:
Texto: 2 (10 pontos);
Subttulos: 3 (12 pontos);
Ttulos: 4 (14 pontos).

Cores:
Deve existir contraste entre o fundo e o texto.
No se deve usar um nmero excessivo de
cores.
 30

Imagens:
Apresentar as imagens com o mnimo
tamanho possvel resoluo de 72 dpi.
Optimizar a imagem de preferncia, nos
formatos JPG, GIF ou PNG.
No se deve abusar de GIF animados.

JPG ou PNG GIF animado

 31

Vdeo e udio:

Deve incluir-se o tamanho dos ficheiros e indicar o

plug-in necessrio para ver/ouvir/manipular o
ficheiro e o endereo da pgina onde se pode
obter esse plug-in.
Formatos de ficheiros que devem ser utilizados:
Vdeo - MPEG, AVI ou MOV
Som - WAVE, MPEG ou MIDI
 32

Molduras:
Utilizar no caso de haver contedos
fixos.

Tabelas:
So excelentes para misturar imagens e
texto.
 33

Planeamento de um Web site

Conjunto de questes que se devem colocar

aquando da criao de um Web site:

Para qu?
Para quem?
O qu?
Como?
 34

Planeamento de um Web site

Fase 1: Definir os objectivos do Web site

Fase 2: Caracterizar o pblico-alvo
Fase 3: Identificar os contedos a publicar
Fase 4: Identificar os recursos a utilizar
Fase 5: Estruturao geral do Web site
Fase 6: Construir o Web site
Fase 7: Publicar o Web site
Fase 8: Gerir o Web site
 35

Planeamento de um Web site

Fase 1: Definir os objectivos do Web site:

Para qu?
Qual o propsito ou finalidade do Web site?
Trata-se de identificar os objectivos do Web site.

Fase 2: Caracterizar o pblico-alvo:

Para quem?
Trata-se de identificar quais a pessoas que vo visitar o Web site,
bem como os recursos que utilizam (computador, velocidade
ligao Internet, etc) .
 36

Planeamento de um Web site

Fase 3: Identificar os contedos a publicar:

O qu?
Que contedos que pretendo incluir ou publicar no
Web site?

Fase 4: Identificar os recursos a utilizar:

Como?
Quais os recursos necessrios para a construo do
Web site (software de criao de pginas, software de
tratamento de imagens, etc).
 37

Planeamento de um Web site

Fase 5: Estruturao geral do Web site:

Elaborar um esboo ou esquema das pginas que vo

integrar o Web site, definir o contedo de cada
pgina, definir as ligaes entre as pginas, etc.

Fase 6: Construir o Web site:

Criar as pginas do Web site, de acordo com o que foi

estipulado nos pontos anteriores.
Reunir e dar forma aos diversos contedos que se
pretende incluir no site, utilizando as ferramentas mais
adequadas para conseguir uma boa apresentao.
 38

Planeamento de um Web site

Fase 7: Publicar o Web site:

Transferir as pginas que constituem o Web site para

um servidor na Web.

Fase 8: Gerir o Web site:

Actualizao do Web site:

Actualizar contedos e hiperligaes;
Efectuar alteraes que se revelem necessrias.
 39

Planeamento de um Web site

Estrutura do Web site

Objetivo principal: estruturar a informao e

facilitar o acesso rpido informao,
permitindo uma navegao fcil e rpida:

Diviso da informao em unidades a incluir em cada

pgina;

Estabelecimento de uma hierarquia entre esses blocos

de informao;

Determinao das ligaes entre esses blocos de

 40

Planeamento de um Web site

Estrutura do Web site

Tipos de Estruturas:

Linear

Hierrquica

Radial

Web
 41

Planeamento de um Web site

Estrutura do Web site

Estrutura Linear

As pginas vo surgindo sequencialmente ao longo do Web site.

O utilizador limita-se a avanar para a pgina seguinte ou a
recuar para a anterior.
Navegao muito simples em que o utilizador no se perde.
 42

Planeamento de um Web site

Estrutura do Web site

Estrutura Radial

De uma pgina central podemos aceder a todas as

outras pginas e retroceder.
 43

Planeamento de um Web site

Estrutura do Web site

Estrutura Hierrquica

Existe uma pgina de entrada ou principal (homepage) que

contem ligaes (links) para outras pginas.
Por sua vez, estas pginas podem conter sub-tpicos que do
acesso a outras pginas hierarquicamente mais baixas.
No devem existir mais de quatro nveis hierrquicos.
Deve existir sempre a possibilidade de o utilizador saltar para a
homepage.
Planeamento de um Web site
Estrutura do Web site

Exemplo da estrutura do Web site:

(1)
HOME

(5) (6) (7)

(2) (3) (4)
Empresa Instalaes Servios
Produtos Stand Contactos

(8) (9) (10) (11) (12) (13) (14)

A/C udio Tunning Alarmes GPL Novos Usados

44
 45

Planeamento de um Web site

Estrutura do Web site

Estrutura Web

Nesta estrutura predomina uma aparente anarquia na navegao.

Qualquer pgina pode estar ligada a outra, bem como a Web
sites com estruturas diferentes.
Encontramos este tipo de estrutura em Web sites com a
consequente dificuldade na navegao.
 46

Planeamento de um Web site

Estrutura do Web site

Listagem de Web sites mal estruturados

http://www.ikissyou.org/
 47

Planeamento de um Web site

Consistncia do Web site

a identidade visual prpria que se deve manter

ao longo de todas as pginas para que o leitor
encontre informao que deseja utilizando sempre
os mesmos procedimentos.
 50

Planeamento de um Web site

Consistncia do Web site

Definio do planeamento do layout

Cor do fundo

Ttulo da pgina
Barra de menus
Separador

Caixa para imagens,

ndices ou menus rea de insero de
texto

Rodap para insero

de links ou outras
informaes
 51

Planeamento de um Web site

Consistncia do Web site

Aspetos relevantes a ter em conta so, ainda:

Os cabealhos e rodaps, locais onde a informao

se repete ao longo das pginas do Web site;
Os ttulos e subttulos devem identificar claramente o
contedo das pginas;
A legibilidade do texto, isto , a formatao dos
caracteres e dos pargrafos;
As cores a utilizar devem privilegiar o que mais
relevante e importante na pgina.
Os objectos multimdia (imagens, grficos,
animaes, sons, vdeos) so objectos muito utilizados
para tornar as pginas e Web sites mais atraentes e
Sites que permitem a criao de Web
sites de forma gratuita

Pt.wix.com
Sites que permitem a criao de Web
sites de forma gratuita
http://www.webnode.pt/
Sites que permitem a criao de Web
sites de forma gratuita
http://www.123paginaweb.pt/
Sites que permitem a criao de Web
sites de forma gratuita
http://criecom.ucoz.com.br/
E mais...