You are on page 1of 23

18-10-2011

Mdulo 3 Criao de Pginas WEB

Tecnologias da Informao e Comunicao 10 Ano

A Internet
Tambm conhecida por Net. A Internet a maior rede mundial de computadores que abrange praticamente todo o globo terrestre.

Conceitos Bsicos

Tcnicas Planeamento Avaliao HTML Resumo

A Internet surgiu em Portugal com maior dinmica por volta de 1994


2

18-10-2011

A Internet
Tambm conhecida por Net. A Internet a maior rede mundial de computadores que abrange praticamente todo o globo terrestre.

Conceitos Bsicos

Tcnicas Planeamento Avaliao HTML Resumo

A Internet surgiu em Portugal com maior dinmica por volta de 1994


3

O que a Web?

Tambm designada por World Wide Web ou simplesmente WWW.

Consiste num sistema de hipertexto ou hipermdia escala planetria.

Documentos que contm: ligaes de uns para os outros; no apenas texto, mas tambm imagens, sons, vdeos,

Conceitos Bsicos

etc. Documentos escritos numa linguagem especfica: HTML

Tcnicas Planeamento Avaliao HTML Resumo

18-10-2011

Hiperligao

Ligao que permite saltar para outro ponto da mesma pgina, ou para outra pgina.

Browser
Conceitos Bsicos

Programa especfico para ler pginas Web, bem como interpretar e apresentar os contedos que nelas se prope mostrar.

Tcnicas Planeamento Avaliao HTML Resumo

URL (Uniforme Resource Location)

Endereo de um recurso (ficheiro, impressora) disponvel numa rede.

http://www.agrupamento-vale-ovil.edu.pt/index.html http://www.agrupamento-vale-ovil.edu.pt/index.html
Protocolo Servidor (mquina) Ficheiro (recurso)

Conceitos Bsicos

Estrutura: protocolo://mquina/caminho/recurso http://www.agrupamento-vale-ovil.edu.pt/ www.agrupamento-vale-ovil.edu.pt


6

Tcnicas Planeamento Avaliao HTML Resumo

18-10-2011

HTTP (HyperText Transfer Protocol)

Protocolo que assegura a comunicao durante a transferncia de informao, num sistema Web.

HTML (HyperText Markup Language)


Conceitos Bsicos

Linguagem mais utilizada para construir paginas Web.

Tcnicas Planeamento Avaliao HTML Resumo

Como funciona um sistema Web?

1 Cliente Web browser 4 Internet

2 Servidor Web Server 3

Legenda:

Conceitos Bsicos

1 2 3 4

Envia um pedido de um documento HTML a um servidor, atravs do envio para a rede de um endereo URL. O pedido canalizado pela rede at ao servidor indicado no endereo. O servidor recebe o pedido procurando a pgina indicada no URL (endereo) enviando-a como resposta. A rede canaliza a pgina para o cliente que fez o pedido.
8

Tcnicas Planeamento Avaliao HTML Resumo

18-10-2011

Pginas Web Vs. Web site


Qual a diferena entre pgina Web e stio Web?

Pgina Web: ficheiro de texto (que pode conter diversos elementos: textos, tabelas, imagens, sons, etc.) alojado num servidor Web que escrito numa
Conceitos Bsicos

linguagem especfica. Stio Web: tambm conhecido por Web site, um

Tcnicas Planeamento Avaliao HTML Resumo

conjunto de pginas Web relacionadas entre si e


alojadas num servidor Web.
9

Tcnicas de implementao um Web site Programao de pginas Web


HTML (HiperText Markup Language) DHTML (Dynamic HTML) VRML (Virtual Reality Modeling Language) XML (Extensible Markup Language)

Tipos de Web sites


Estticos so compostos por pginas ou documentos HTML
Conceitos Bsicos

em que a informao que constitui as pginas enviada sempre da mesma forma. Dinmicos so pginas em que a informao enviada depende de algum tipo de interaco do utilizador com as pginas que lhe so apresentadas.
10

Tcnicas Planeamento Avaliao HTML Resumo

18-10-2011

Tcnicas de implementao um Web site Editores de pginas Web


Editor de texto Bloco de notas

Editores WYSIWYG (What You See Is What You Get O que se v


o que se obtm)

Conceitos Bsicos

Tcnicas Planeamento Avaliao HTML Resumo


11

Tcnicas de implementao um Web site

Editores de imagens e animao


Tratamento de imagens

Criao de animao grfica


Conceitos Bsicos

Tcnicas Planeamento Avaliao HTML Resumo


12

18-10-2011

Tcnicas de implementao um Web site

Ferramentas e utilitrios
Publicao do stio Web (aloj-lo num servidor Web e

atribuir-lhe um URL)
Protocolo FTP (File Transfer Protocol): Permite a transferncia de ficheiros entre dois computadores
Conceitos Bsicos

Tcnicas Planeamento Avaliao HTML Resumo


13

Planeamento de um Web site


Fases da construo de um Web site:
Definio dos objetivos do Web site Caraterizao do pblico alvo Identificao dos contedos a publicar Identificao dos recursos a utilizar Definio da estrutura geral do Web site
Conceitos Bsicos

Questes:
Para qu? Para quem? O qu? Como?

Tcnicas Planeamento Avaliao HTML Resumo

Criao do Web site Publicao do Web site Gesto do Web site

Fases do planeamento de um Web site

14

18-10-2011

Avaliao de um Web site

Clareza e objectividade de um Web site;

Qualidade grfica;
Usabilidade;
Conceitos Bsicos

Tcnicas Planeamento Avaliao HTML Resumo

Utilidade.

15

Resumo da Aula

Conceitos Bsicos

Tcnicas Planeamento Avaliao HTML Resumo


16

18-10-2011

Resumo da Aula

Conceitos Bsicos

Tcnicas Planeamento Avaliao HTML Resumo


17

Planeamento de um Web site


Fases da construo de um Web site:
Definio dos objetivos do Web site Caraterizao do pblico alvo Identificao dos contedos a publicar Identificao dos recursos a utilizar Definio da estrutura geral do Web site Criao do Web site Planeamento HTML Resumo
18

Questes:
Para qu? Para quem? O qu? Como?

Publicao do Web site Gesto do Web site

Fases do planeamento de um Web site

18-10-2011

Planeamento de um Web site


Exemplo
A contaminao e degradao dos ecossistemas uma

problemtica cada vez mais presente na atualidade.


Sendo a reciclagem uma forma de diminuir a degradao dos ecossistemas pretende-se criar um Web site cujo tema a reciclagem.

Planeamento HTML Resumo


19

Planeamento de um Web site


1) Definio dos objetivos do Web site

Para qu? Qual o propsito ou finalidade do Web site?

Exemplo: Objetivos

Dar a conhecer o processo da reciclagem e a sua importncia


Planeamento HTML Resumo
20

Sensibilizar os cidados para que sejam elementos activos no processo da reciclagem

10

18-10-2011

Planeamento de um Web site


2) Caraterizao do pblico alvo

Para quem? Para qualquer pessoa em geral, ou para um determinado tipo de utilizadores?

Exemplo: Pblico alvo

Qualquer pessoa em geral (adultos, crianas, homens, mulheres, etc.)


Planeamento HTML Resumo
21

Planeamento de um Web site


3) Identificao dos contedos a publicar

O qu? Que contedos se pretende publicar no stio Web? Trabalhos pessoais, contedos multimdia, ligaes a outros documentos ou stios Web, etc.

Exemplo: Contedos

Tipo de informao:
Conceito e benefcios 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 Ligao a outros Web sites relacionados com o tema

Planeamento HTML Resumo

Elementos multimdia: textos, imagens, vdeos e som


22

11

18-10-2011

Planeamento de um Web site


4) Identificao dos recursos a utilizar

Como? Que recursos ou meios que vo ser utilizados na construo do Web site a nvel do software de criao de pginas Web, software tratamento de imagens, etc.
Exemplo: Recursos

Macromedia Dreamweaver
Planeamento HTML Resumo
23

Planeamento de um Web site


5) Definio da estrutura geral do Web site

Estrutura do Web site hierarquia da informao Consistncia do Web site

Planeamento HTML Resumo


24

12

18-10-2011

Planeamento de um Web site


Estrutura do Web site hierarquia da informao

Dividir a informao por pginas e estabelecer uma hierarquia entre essas pginas.

Ter em conta o seguinte:

Ligao entre as pginas de modo a permitir a localizao rpida e fcil da informao; Informao dividida de modo a evitar pginas extensas; Ligaes para pginas externas ao Web site devem ser colocadas numa pgina final; Estrutura hierrquica equilibrada.

Planeamento HTML Resumo


25

Planeamento de um Web site


Estrutura do Web site hierarquia da informao
Estrutura hierrquica desequilibradas

Estrutura hierrquica equilibrada

Planeamento HTML Resumo


26

13

18-10-2011

Planeamento de um Web site


Estrutura do stio Web hierarquia da informao
Exemplo: Estrutura (hierarquia da informao) do Web site

Planeamento HTML Resumo


27

Planeamento de um Web site


Consistncia do Web site

Padro consistente em todas as pginas - identidade visual prpria. Identidade visual conseguida atravs:

Utilizao de molduras e/ou tabelas; Disposio da informao e dos objetos em locais estratgicos; Cdigo de cores idntico em todas as pginas; Formatao semelhante dos carateres e dos botes.

Planeamento HTML Resumo


28

14

18-10-2011

Planeamento de um Web site


Consistncia do Web site

Outros aspectos a considerar:


Tamanho da pginas; Contedo do cabealho e do rodap; Ttulos e subttulos devem identificar claramente o contedo da pgina; Legibilidade do texto:

Texto propriamente dito:


Tamanho do texto, no mnimo 10 pontos; Evitar texto em maisculas, porque a sua leitura 10% mais lenta; Alinhamento esquerda; Tipos de letra sem serif como o Arial, Verdana e o Tahoma para leitura no ecr;
29

Planeamento HTML Resumo Sem serif

Com serif

Planeamento de um Web site


Consistncia do Web site

Outros aspectos a considerar:

Legibilidade do texto:

Texto propriamente dito:

Pargrafos separados por uma linha em branco ou indentados; Cor contrastante com a cor de fundo da pgina; Nas listagens aplicar marcas e/ou numerao;

Destacar ttulos e subttulos (maisculas, sublinhado, negrito, tamanho maior, tipo de letra com serif, ); Hiperligaes devidamente identificadas apresentando cores diferentes em funo do seu estado (a visitar, em utilizao e j visitados); Barras de navegao bem visveis.
30

Planeamento HTML Resumo

15

18-10-2011

Planeamento de um Web site


Consistncia do Web site

Outros aspectos a considerar:

Cores:

Contraste elevado entre o fundo e o texto; Evitar usar um nmero excessivo de cores. Em excesso sobrecarregam as pginas e tornam a navegao mais lenta e difcil; Formatos de imagem mais utilizados: GIF, JPEG ou JPG, PNG; Formatos de som mais utilizados: WAVE, MPEG, MIDI; Formatos de vdeo mais utilizados: MPEG, AVI, MOV.

Objetos multimdia:

Planeamento HTML Resumo

31

Planeamento de um Web site


Consistncia do Web site
Exemplo: Estrutura (consistncia) do Web site

Planeamento HTML Resumo


32

16

18-10-2011

Criao de pginas HTML


Estrutura Bsica
<HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> Planeamento HTML Resumo </HTML>
33

Delimita o ttulo (aparece no topo da janela)

</BODY>

Aqui entra o contedo principal da pgina

Criao de pginas HTML


Ttulos e texto <H1> at <H6> - Estas tags permitem criar cabealhos/ttulos e existem 6 nveis diferentes. <BR> - break (mudana de linha). <P> - pargrafo (duas mudanas de linha). <HR> - linha horizontal (divide a pgina HTML em
Planeamento HTML Resumo
34

zonas visualmente distintas).

17

18-10-2011

Criao de pginas HTML


Formatao de texto
<CENTER> - posiciona o texto no centro da pgina. <Hn> - podemos utilizar o atributo align, com este atributo podemos alinhar os ttulos. <H1 align=Left></H1> <H2 align=Right></H2>
Planeamento HTML Resumo
35

<H3 align=Left></H3> (por omisso)

Criao de pginas HTML


Formatao de texto

<B> Este texto vai aparecer a negrito </B> <i> Este texto vai aparecer a itlico </i> <u> Este texto vai aparecer a sublinhado </u>
Planeamento HTML Resumo
36

<!-- Isto um comentrio -- >

18

18-10-2011

Criao de pginas HTML


Formatao de texto - <FONT>
Permite alterar a fonte que se encontra por defeito no Web browser. Por omisso no Internet Explorer: Fonte: Times New Roman; Tamanho: 3; Cor: Preto.

Atributos - <FONT>
Planeamento HTML Resumo

Face define a fonte tipogrfica Size define um tamanho que varia entre 1 e 7. Color define a cor do texto.
37

Resumo da Aula

Planeamento HTML Resumo


38

19

18-10-2011

Resumo da Aula

Planeamento HTML Resumo


39

Tabelas
<TABLE></TABLE> - define o incio e o fim da tabela <TR> - define uma linha dentro de uma tabela <TH> - define cada clula do cabealho da tabela; o contedo da clula fica formatado a negrito <TD> - define o contedo de cada clula da tabela Tabelas Imagens Hiperligaes Frames Resumo Align permite alinhar o texto nas clulas. Valores possveis: left, right, center. Border permite definir as linhas de contorno. Deve ser indicado um valor numrico para a espessura da linha.
40

20

18-10-2011

Imagens
<IMG> - Permite inserir imagens. Esta TAG constituda pelos seguintes atributos:

Src indicao 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 definio do alinhamento da imagem. Valores possveis: left, right, middle, botton e top. Tabelas Imagens Hiperligaes Frames Resumo Border definio da linha de contorno da imagem. Deve ser indicado um valor numrico para a espessura da linha. Height definio da altura da imagem. Whith definio da largura da imagem.
41

Hiperligaes
<A HREF=> </A> - ligaes a outras pginas Web ou a outros documentos. <A HREF=http://www.agrupamento-vale-ovil.edu.pt> Pgina da Escola</A> <A HREF=doc2.htm>Pgina da Escola</A>. Se o documento se encontrar noutra pasta, necessrio mencionar o caminho. Tabelas Imagens Hiperligaes Frames Resumo
42

Definir a hiperligao a partir de uma imagem: <A HREF=http://www.agrupamento-vale-ovil.edu.pt> <IMG Src=logo.png> </A>

21

18-10-2011

Frames

A parte principal de um documento HTML comea na tag <FRAMESET> e acaba na </FRAMESET>, em vez de <BODY> </BODY>

Tabelas Imagens Hiperligaes Frames Resumo


43

Resumo da Aula

Tabelas Imagens Hiperligaes Frames Resumo


44

22

18-10-2011

Resumo da Aula

Tabelas Imagens Hiperligaes Frames Resumo


45

23

You might also like