TIC

Mdulo 2:
Criao de Pginas Web
Curso Profissional de Tcnico de:
- Auxiliar de Sade
- Secretariado
- Eletrnica e Automao

Docente: Ana Batista

Conceito de Web site

Umwebsite(tambm chamado stioInternetpor
abuso de linguagem) um conjunto de
ficheirosHTML,
vinculados
por
relaes
hipertextuais, armazenados numservidor 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 representa para as
empresas uma formidvel oportunidade de recolher dados
sobre os seus clientes ou de atrair novos clientes;

 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 um mximo de informaes comerciais ou
tcnicas, a baixo custo.

Distinguem-se
habitualmente
vrias
categorias de sites, de acordo com o
objetivo
dos
mesmos:
Ossites exposiotm por objetivo promover a
imagem de marca da empresa, apresentando. por
exemplo, os seus produtos ou os seus servios;
Ossites catlogoso sites destinados a apresentar a
oferta da empresa;
Ossites de informaoso sites que fornecem uma
informao especfica a um tipo de utilizador da
internet;

 Ossites comerciaisso sites que vendem diretamente

produtos ao utilizador da internet e permitem
eventualmente pagar em linha;
Ossites institucionaisso 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;
Ossites pessoais(ou pginas pessoais) so sites
realizados por particulares a ttulo de lazer, geralmente
por paixo por um assunto ou uma disciplina;

 Ossites comunitriosso sites que renem

cibernautas ao redor de um interesse comum.
Ossites intranetso 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-sewebmaster(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;
Promooereferenciaes,
aumentar a sua audincia;

permitindo

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 termowebmasteringdesigna 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
dinmicos.

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

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 acesso informao.

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

26

Design - Layout:
Layout elaborado de forma clara e compreensiva.
A

apresentao

atractiva.

da

informao

deve

ser

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 funcionamento
tcnico.

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)
(2)
(3)
(4)
Empresa
Instalaes
Servios
Produtos
(10)

(11)

(6)

(7)

Stand Contactos

(8)

(9)

(12)

(13)

A/C

udio TunningAlarmes GPL Novos Usados

44

(14)

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

sempre os mesmos procedimentos.

utilizando

50

Planeamento de um Web site

Consistncia do Web site

Definio do planeamento do layout

Cor do fundo
Ttulo da pgina
Separador

Caixa para imagens,

ndices ou menus

Barra de 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 com melhor aspecto
grfico.

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