TIC

Mdulo 3:
Criao de Pginas Web

Curso Profissional de Tcnico de:

- Electrotecnia
- Comrcio

Docente: Jos Pires

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

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 utilizador da internet;
 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, geralmente por paixo por um assunto ou
uma disciplina;
 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 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

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

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

Tcnicas de implantao de pginas na Web

Editores e programas de animao grfica
 18

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
 19

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
 20

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

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

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

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

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 sempre onde est.
 25

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

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

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

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

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

 30

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
 31

Molduras:
Utilizar no caso de haver contedos fixos.

Tabelas:
So excelentes para misturar imagens e texto.
 32

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?
 33

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
 34

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

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

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

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

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

 39

Planeamento de um Web site

Estrutura do Web site

Tipos de Estruturas:

Linear

Hierrquica

Radial

Web
 40

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

Planeamento de um Web site

Estrutura do Web site

Estrutura Radial

De uma pgina central podemos aceder a todas as outras pginas e

retroceder.
 42

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

43
 44

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

Planeamento de um Web site

Estrutura do Web site

Listagem de Web sites mal estruturados

http://www.ikissyou.org/
 46

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

Planeamento de um Web site

Consistncia do Web site

Esta identidade visual conseguida atravs de vrios processos, nomeadamente:

Utilizao de molduras (frames) e tabelas que dividem a pgina em reas

para colocao de informao especfica.

Localizao de ttulos em locais estratgicos.

Disposio e organizao dos menus, dos cabealhos e rodaps.

 48

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
 49

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