Está en la página 1de 23

18-10-2011

Módulo 3 Criação de Páginas WEB Tecnologias da Informação e Comunicação 10º Ano 1

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

18-10-2011

A Internet • Também conhecida por Net. • A Internet é a maior rede mundial
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
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

18-10-2011

Hiperligação • Ligação que permite «saltar» para outro ponto da mesma página, ou para outra
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. •
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

18-10-2011

HTTP (HyperText Transfer Protocol) • Protocolo que assegura a comunicação durante a transferência de informação,
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
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

18-10-2011

Páginas Web Vs. Web site Qual a diferença entre página Web e sítio Web? •
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)
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

18-10-2011

Técnicas de implementação um Web site Editores de páginas Web • Editor de texto –
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
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

18-10-2011

Técnicas de implementação um Web site Ferramentas e utilitários • Publicação do sítio Web (alojá-lo
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
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

18-10-2011

Avaliação de um Web site • Clareza e objectividade de um Web site; • Qualidade
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
Resumo da Aula
Conceitos Básicos
Técnicas
Planeamento
Avaliação
HTML
Resumo
16

18-10-2011

Resumo da Aula Conceitos Básicos Técnicas Planeamento Avaliação HTML Resumo 17
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
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

18-10-2011

Planeamento de um Web site Exemplo • A contaminação e degradação dos ecossistemas é uma
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ê?
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

18-10-2011

Planeamento de um Web site 2) Caraterização do público alvo  Para quem? Para qualquer
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
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

18-10-2011

Planeamento de um Web site 4) Identificação dos recursos a utilizar  Como? Que recursos
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
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

18-10-2011

Planeamento de um Web site Estrutura do Web site – hierarquia da informação  Dividir
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
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

18-10-2011

Planeamento de um Web site Estrutura do sítio Web – hierarquia da informação Exemplo: Estrutura
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
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

18-10-2011

Planeamento de um Web site Consistência do Web site  Outros aspectos a considerar: 
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: 
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

18-10-2011

Planeamento de um Web site Consistência do Web site  Outros aspectos a considerar: 
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 de um Web site
Consistência do Web site
Exemplo: Estrutura (consistência) do Web site
Planeamento
HTML
Resumo
32

18-10-2011

Criação de páginas HTML Estrutura Básica <HTML> <HEAD> <TITLE> </TITLE> Delimita
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
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

18-10-2011

Criação de páginas HTML Formatação de texto • <CENTER> - posiciona o texto no centro
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
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-10-2011

Criação de páginas HTML Formatação de texto - <FONT> • Permite alterar a fonte que
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
Resumo da Aula
Planeamento
HTML
Resumo
38

18-10-2011

Resumo da Aula Planeamento HTML Resumo 39
Resumo da Aula
Planeamento
HTML
Resumo
39
Tabelas <TABLE>…</TABLE> - define o início e o fim da tabela <TR> - define uma
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

18-10-2011

Imagens <IMG> - Permite inserir imagens. Esta TAG é constituída pelos seguintes atributos: • Src
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.
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

18-10-2011

Frames A parte principal de um documento HTML começa na tag <FRAMESET> e acaba na
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
Resumo da Aula
Tabelas
Imagens
Hiperligações
Frames
Resumo
44

18-10-2011

Tabelas Imagens Hiperligações Frames Resumo
Tabelas
Imagens
Hiperligações
Frames
Resumo
Resumo da Aula
Resumo da Aula
18-10-2011 Tabelas Imagens Hiperligações Frames Resumo Resumo da Aula 45 23

45