18-10-2011

Módulo 3 Criação de Páginas WEB

Tecnologias da Informação e Comunicação 10º Ano

1

A Internet

• Também conhecida por Net.

• A Internet é a maior rede mundial de computadores que

abrange praticamente todo o globo terrestre.

Conceitos Básicos

Técnicas

Planeamento

Avaliação

• A Internet surgiu em Portugal com maior dinâmica por volta de

HTML

1994

Resumo

2

1

18-10-2011

A Internet

• Também conhecida por Net.

• A Internet é a maior rede mundial de computadores que

abrange praticamente todo o globo terrestre.

Conceitos Básicos

Técnicas

Planeamento

Avaliação

• A Internet surgiu em Portugal com maior dinâmica por volta de

HTML

1994

Resumo

3

O que é a Web?

• Também é designada por World Wide Web ou simplesmente

WWW.

• Consiste num sistema de hipertexto ou hipermédia

à escala

planetária.

• Documentos que contêm:

– ligações de uns para os outros;

– não apenas texto, mas também imagens, sons, vídeos,

Conceitos Básicos

etc.

Técnicas

• Documentos escritos numa linguagem específica: HTML

Planeamento

Avaliação

HTML

Resumo

4

2

18-10-2011

Hiperligação

• Ligação que permite «saltar» para outro ponto da mesma

página, ou para outra página.

Browser

• Programa específico para ler páginas Web, bem como

Conceitos Básicos

interpretar e apresentar os conteúdos que nelas se propõe

Técnicas

Planeamento

mostrar.

Avaliação

HTML

Resumo

5

URL (Uniforme Resource Location)

•

Endereço de um recurso

(ficheiro, impressora)

disponível

numa rede.

•

http://www.agrupamento-vale-ovil.edu.pt/index.html

http://www.agrupamento-vale-ovil.edu.pt/index.html

Protocolo

Servidor

Ficheiro

(máquina)

(recurso)

•

Estrutura:

Conceitos Básicos

protocolo://máquina/caminho/recurso

Técnicas

Planeamento

http://www.agrupamento-vale-ovil.edu.pt/

Avaliação

www.agrupamento-vale-ovil.edu.pt

HTML

Resumo

6

3

18-10-2011

HTTP (HyperText Transfer Protocol)

• Protocolo que assegura a comunicação durante a transferência de

informação, num sistema Web.

HTML (HyperText Markup Language)

• Linguagem mais utilizada para

Conceitos Básicos

construir paginas Web.

Técnicas

Planeamento

Avaliação

HTML

Resumo

7

Como funciona um sistema Web?

2

1

Cliente

Servidor

Web

Web

Internet

Server

browser

4

3

Legenda:

Conceitos Básicos

1

Envia um pedido de um documento HTML a um servidor, através do envio para a

rede de um endereço URL.

Técnicas

2

O

pedido é canalizado pela rede até ao servidor indicado no endereço.

Planeamento

O

servidor recebe o pedido procurando a página indicada no URL (endereço)

3

Avaliação

enviando-a como resposta.

HTML

4

A rede canaliza a página para o cliente que fez o pedido.

Resumo

8

4

18-10-2011

Páginas Web Vs. Web site

Qual a diferença entre

página Web e sítio Web?

• Página Web: ficheiro de texto (que pode conter

diversos elementos: textos, tabelas, imagens, sons, etc.)

alojado num servidor Web que é escrito numa

linguagem específica.

Conceitos Básicos

Técnicas

Planeamento

• Sítio Web: também conhecido por Web site, é um

Avaliação

conjunto de páginas Web relacionadas entre si e

HTML

alojadas num servidor Web.

Resumo

9

Técnicas de implementação um Web site

Programação de páginas Web

• HTML (HiperText Markup Language)

• DHTML (Dynamic HTML)

• VRML (Virtual Reality Modeling Language)

• XML (Extensible Markup Language)

Tipos de Web sites

Conceitos Básicos

Técnicas

• Estáticos – são compostos por páginas ou documentos HTML

em que a informação que constitui as páginas é enviada

sempre da mesma forma.

Planeamento

Avaliação

HTML

Resumo

• Dinâmicos – são páginas em que a informação enviada

depende de algum tipo de interacção do utilizador com as

páginas que lhe são apresentadas.

10

5

18-10-2011

Técnicas de implementação um Web site

Editores de páginas Web

• Editor de texto – Bloco de notas

• Editores WYSIWYG (What You See Is What You Get – O que se vê é

o que se obtém)

Conceitos Básicos

Técnicas

Planeamento

Avaliação

HTML

Resumo

11

Técnicas de implementação um Web site

Editores de imagens e animação

• Tratamento de imagens

• Criação de animação gráfica

Conceitos Básicos

Técnicas

Planeamento

Avaliação

HTML

Resumo

12

6

18-10-2011

Técnicas de implementação um Web site

Ferramentas e utilitários

• Publicação do sítio Web (alojá-lo num servidor Web e

atribuir-lhe um URL)

• Protocolo FTP (File Transfer Protocol): Permite a

transferência de ficheiros entre dois computadores

Conceitos Básicos

Técnicas

Planeamento

Avaliação

HTML

Resumo

13

Planeamento de um Web site

Fases da construção de um Web site:

Questões:

 Para quê?

 Para quem?

 O quê?

 Como?

Conceitos Básicos

 Criação do Web site

Técnicas

 Publicação do Web site

Fases do

planeamento de

um Web site

Planeamento

Avaliação

 Gestão do Web site

HTML

Resumo

14

7

18-10-2011

Avaliação de um Web site

• Clareza e objectividade de um Web site;

• Qualidade gráfica;

• Usabilidade;

Conceitos Básicos

Técnicas

• Utilidade.

Planeamento

Avaliação

HTML

Resumo

15

Resumo da Aula

Conceitos Básicos

Técnicas

Planeamento

Avaliação

HTML

Resumo

16

8

18-10-2011

Resumo da Aula

Conceitos Básicos

Técnicas

Planeamento

Avaliação

HTML

Resumo

17

Planeamento de um Web site

Fases da construção de um Web site:

Questões:

 Para quê?

 Para quem?

 O quê?

 Como?

 Criação do Web site

 Publicação do Web site

Fases do

planeamento de

um Web site

Planeamento

 Gestão do Web site

HTML

Resumo

18

9

18-10-2011

Planeamento de um Web site

Exemplo

• A contaminação e degradação dos ecossistemas é uma

problemática cada vez mais presente na atualidade.

• Sendo a reciclagem uma forma de diminuir a

degradação dos ecossistemas pretende-se criar um Web

site cujo tema é a reciclagem.

Planeamento

HTML

Resumo

19

Planeamento de um Web site

1) Definição dos objetivos do Web site

 Para quê?

 Qual é o propósito ou finalidade do Web site?

Exemplo: Objetivos

• Dar a conhecer o processo da reciclagem e a sua

importância

• Sensibilizar os cidadãos para que sejam elementos

Planeamento

activos no processo da reciclagem

HTML

Resumo

20

10

18-10-2011

Planeamento de um Web site

2) Caraterização do público alvo

 Para quem? Para qualquer pessoa em geral, ou para

um determinado tipo de utilizadores?

Exemplo: Público alvo

• Qualquer pessoa em geral (adultos, crianças, homens,

mulheres, etc.)

Planeamento

HTML

Resumo

21

Planeamento de um Web site

3) Identificação dos conteúdos a publicar

 O quê? Que conteúdos se pretende publicar no sítio

Web? Trabalhos pessoais, conteúdos multimédia,

ligações a outros documentos ou sítios Web, etc.

Exemplo: Conteúdos

• Tipo de informação:

• Conceito e benefícios da reciclagem

• Como atuar de modo a participar no processo da reciclagem

• Materiais que podem ser reciclados

• Exemplos de produtos que podem resultar da reciclagem

Planeamento

• Ligação a outros Web sites relacionados com o tema

HTML

• Elementos multimédia: textos, imagens, vídeos e som

Resumo

22

11

18-10-2011

Planeamento de um Web site

4) Identificação dos recursos a utilizar

 Como? Que recursos ou meios é que vão ser

utilizados na construção do Web site – a nível do

software de criação de páginas Web, software

tratamento de imagens, etc.

Exemplo: Recursos

•

Macromedia Dreamweaver

•

…

Planeamento

HTML

Resumo

23

Planeamento de um Web site

5) Definição da estrutura geral do Web site

 Estrutura do Web site – hierarquia da informação

 Consistência do Web site

Planeamento

HTML

Resumo

24

12

18-10-2011

Planeamento de um Web site

Estrutura do Web site – hierarquia da informação

 Dividir a informação por páginas e estabelecer uma

hierarquia entre essas páginas.

 Ter em conta o seguinte:

 Ligação entre as páginas de modo a permitir a localização

rápida e fácil da informação;

 Informação dividida de modo a evitar páginas extensas;

 Ligações para páginas externas ao Web site devem ser

colocadas numa página final;

 Estrutura hierárquica equilibrada.

Planeamento

HTML

Resumo

25

Planeamento de um Web site

Estrutura do Web site – hierarquia da informação

Estrutura hierárquica desequilibradas

Estrutura hierárquica equilibrada

Planeamento

HTML

Resumo

26

13

18-10-2011

Planeamento de um Web site

Estrutura do sítio Web – hierarquia da informação

Exemplo: Estrutura (hierarquia da informação) do Web site

Planeamento

HTML

Resumo

27

Planeamento de um Web site

Consistência do Web site

 Padrão consistente em todas as páginas - identidade

visual própria.

 Identidade visual é conseguida através:

 Utilização de molduras e/ou tabelas;

 Disposição da informação e dos objetos em locais

estratégicos;

 Código de cores idêntico em todas as páginas;

 Formatação semelhante dos carateres e dos botões.

Planeamento

HTML

Resumo

28

14

18-10-2011

Planeamento de um Web site

Consistência do Web site

 Outros aspectos a considerar:

 Tamanho da páginas;

 Conteúdo do cabeçalho e do rodapé;

 Títulos e subtítulos devem identificar claramente o conteúdo

da página;

 Legibilidade do texto:

 Texto propriamente dito:

 Tamanho do texto, no mínimo 10 pontos;

 Evitar texto em maiúsculas, porque a sua leitura é 10% mais

lenta;

Planeamento

 Alinhamento à esquerda;

HTML

 Tipos de letra sem serif como o Arial, Verdana e o Tahoma

para leitura no ecrã;

Resumo

Sem serif Com serif

29

Planeamento de um Web site

Consistência do Web site

 Outros aspectos a considerar:

 Legibilidade do texto:

 Texto propriamente dito:

 Parágrafos separados por uma linha em branco ou

indentados;

 Cor contrastante com a cor de fundo da página;

 Nas listagens aplicar marcas e/ou numeração;

 Destacar títulos e subtítulos (maiúsculas, sublinhado,

negrito, tamanho maior, tipo de letra com serif, …);

Planeamento

 Hiperligações devidamente identificadas apresentando cores

diferentes em função do seu estado (a visitar, em utilização

e já visitados);

HTML

 Barras de navegação bem visíveis.

Resumo

30

15

18-10-2011

Planeamento de um Web site

Consistência do Web site

 Outros aspectos a considerar:

 Cores:

 Contraste elevado entre o fundo e o texto;

 Evitar usar um número excessivo de cores.

 Objetos multimédia:

 Em excesso sobrecarregam as páginas e tornam a

navegação mais lenta e difícil;

 Formatos de imagem mais utilizados: GIF, JPEG ou JPG,

PNG;

 Formatos de som mais utilizados: WAVE, MPEG, MIDI;

Planeamento

 Formatos de vídeo mais utilizados: MPEG, AVI, MOV.

HTML

Resumo

31

Planeamento de um Web site

Consistência do Web site

Exemplo: Estrutura (consistência) do Web site

Planeamento

HTML

Resumo

32

16

18-10-2011

Criação de páginas HTML

Estrutura Básica

<HTML>

<HEAD>

<TITLE>

</TITLE>

Delimita o título

(aparece no topo

da janela)

</HEAD>

<BODY>

Aqui

entra

o

conteúdo

principal

Planeamento

da página

</BODY>

HTML

</HTML>

Resumo

33

Criação de páginas HTML

Títulos e texto

• <H1> até <H6> - Estas tags permitem criar

cabeçalhos/títulos e existem 6 níveis diferentes.

• <BR> - break (mudança de linha).

• <P> - parágrafo (duas mudanças de linha).

Planeamento

• <HR> - linha horizontal (divide a página HTML em

zonas visualmente distintas).

HTML

Resumo

34

17

18-10-2011

Criação de páginas HTML

Formatação de texto

• <CENTER> - posiciona o texto no centro da página.

• <Hn> - podemos utilizar o atributo align, com este

atributo podemos alinhar os títulos.

– <H1 align=Left>…</H1>

– <H2 align=Right>…</H2>

– <H3 align=Left>…</H3> (por omissão)

Planeamento

HTML

Resumo

35

Criação de páginas HTML

Formatação de texto

• <B> Este texto vai aparecer a negrito </B>

• <i> Este texto vai aparecer a itálico </i>

• <u> Este texto vai aparecer a sublinhado </u>

• <!-- Isto é um comentário -- >

Planeamento

HTML

Resumo

36

18

18-10-2011

Criação de páginas HTML

Formatação de texto - <FONT>

•

Permite alterar a fonte que se encontra por defeito no Web

browser.

•

Por omissão no Internet Explorer:

– Fonte: Times New Roman;

– Tamanho: 3;

– Cor: Preto.

Atributos - <FONT>

•

Face – define a fonte tipográfica

Planeamento

•

Size – define um tamanho que varia entre 1 e 7.

HTML

•

Color – define a cor do texto.

Resumo

37

Resumo da Aula

Planeamento

HTML

Resumo

38

19

18-10-2011

Resumo da Aula

Planeamento

HTML

Resumo

39

Tabelas

<TABLE>…</TABLE> - define o início e o fim da tabela

<TR> - define uma linha dentro de uma tabela

<TH> - define cada célula do cabeçalho da tabela; o conteúdo da

célula fica formatado a negrito

<TD> - define o conteúdo de cada célula da tabela

Tabelas

• Align – permite alinhar o texto nas células. Valores possíveis:

Imagens

Hiperligações

Frames

left, right, center.

• Border – permite definir as linhas de contorno. Deve ser

indicado um valor numérico para a espessura da linha.

Resumo

40

20

18-10-2011

Imagens

<IMG> - Permite inserir imagens. Esta TAG é constituída pelos seguintes

atributos:

• Src – indicação do local e nome do ficheiro. Este ficheiro deve

estar na mesma directoria ou pasta em que se encontra o ficheiro

HTML que estamos a trabalhar.

• Align – definição do alinhamento da imagem. Valores possíveis:

left, right, middle, botton e top.

Tabelas

• Border – definição da linha de contorno da imagem. Deve ser

Imagens

indicado um valor numérico para a espessura da linha.

Hiperligações

• Height – definição da altura da imagem.

• Whith – definição da largura da imagem.

Frames

Resumo

41

Hiperligações

<A HREF=“…”> … </A> - ligações a outras páginas Web ou a outros

documentos.

<A HREF=”http://www.agrupamento-vale-ovil.edu.pt”> Página da

Escola”</A>

<A HREF=”doc2.htm”>Página da Escola”</A>. Se o documento se

encontrar noutra pasta, é necessário mencionar o caminho.

Tabelas

Definir a hiperligação a partir de uma imagem:

Imagens

Hiperligações

<A HREF=”http://www.agrupamento-vale-ovil.edu.pt”>

<IMG Src=”logo.png”> </A>

Frames

Resumo

42

21

18-10-2011

Frames

A parte principal de um documento HTML começa na tag <FRAMESET>

e acaba na </FRAMESET>, em vez de <BODY> … </BODY>

Tabelas

Imagens

Hiperligações

Frames

Resumo

43

Resumo da Aula

Tabelas

Imagens

Hiperligações

Frames

Resumo

44

22

18-10-2011

Tabelas

Imagens

Hiperligações

Frames

Resumo

Resumo da Aula

45

23