- MÓDULO IV - Da minha Escola para o Mundo. Criar e Publicar o Site da Escola.

- MÓDULO IV -

Da minha Escola para o Mundo. Criar e Publicar o Site da Escola.

Santarém, Março de 2002

CURSO DE FORMAÇÃO EM TIC

A. CRIAR O SITE DA ESCOLA

Está na fase final do seu Curso. Para terminar “em beleza” vai publicar o Site da sua Escola. Vamos exemplificar o processo com as secções que propusemos. Deverá, no entanto adaptar o nosso exemplo à sua realidade. Assim, comece por consultá-lo:

http://nonio.eses.pt/curso_cedes/cursos/tic/pagina/

Sinta-se igualmente à vontade para imprimir o seu “cunho pessoal” em todo este trabalho – as propostas que faremos são apenas exemplos!

1 P

S

Para uma melhor compreensão do que se prentende realizar, consulte a Figura 1 e leia a sua legenda:

Figura 1 - Site da Escola: hiperligações entre páginas Legenda:

As hiperligações entre as páginas do Site estão representadas pelas linhas de união. Estas hiperligações funcionam nos dois sentidos. Por exemplo: na página principal da secção Localidade existirá uma hiperligação para a página Portas do Sol e, nesta última existirá uma hiperligação para a primeira.

Página Inicial – esta página irá conter apenas uma imagem e texto.

Secção Localidade – a página principal desta secção vai conter várias imagens e texto alusivos aos diversos subtemas tratados: no nosso exemplo, locais de interesse, receitas tradicionais e provérbios. O texto relativo a cada subtema terá hiperligações para as páginas correspondentes.

Secção Projecto – a página principal desta secção vai conter várias imagens e texto alusivos aos diversos subtemas tratados: no nosso exemplo, desenhos dos alunos, textos dos alunos e referência a outros projectos em que a classe esteja envolvida. O texto relativo a cada subtema terá hiperligações para as páginas correspondentes.

Secção Ligações – esta página irá conter imagens com hiperligações para outros Sites e um pequeno texto sobre o conteúdo de cada um deles.

Conforme verificou, no Site que apresentamos como exemplo, organizámos os subtemas de duas formas:

Situação A

CURSO DE FORMAÇÃO EM TIC

O subtema remete para diversas páginas, contendo cada uma delas um trabalho de um aluno: Portas do Sol, Museu do Alporão, etc.

Situação B

Exemplo desta situação – Secção Localidade, subtema Provérbios.

O subtema remete para diversas páginas, contendo cada uma delas trabalhos de diversos alunos: Página 1, Página 2, etc.

Como é que vai organizar Site da sua Escola? Tudo depende do número de trabalhos que os seus alunos realizaram sobre cada subtema.

Ao tomar a sua decisão, deverá ter em conta que as páginas a publicar na Internet não deverão conter demasiado texto e, muito menos, demasiadas imagens. Como sabe, o tempo de carregamento não pode ser muito longo: não afugente os visitantes!

Relativamente ao número de imagens por página, pensamos que três ou quatro é um número aceitável, desde que estas não sejam demasiado grandes.

Depois de decidir este aspecto, deverá gravar os documentos finais na pasta pagina, em formato HTML.

Nas actividades seguintes, vamos descrever os procedimentos a efectuar nas duas situações possíveis:

Situação A

! A

:

• 1 – No Word, abra cada um dos trabalhos dos seus alunos

• 2 – Grave-o em formato HTML e guarde-o na pasta pagina (se não se recorda dos

procedimentos a efectuar, consulte o Manual do Módulo III – Gravação de um documento Word em formato HTML)

Nota importante: tenha muita atenção ao nome que atribuir ao ficheiro. Já sabe que não deve

utilizar caracteres portugueses, espaços ou outros caracteres especiais!

Situação B

! A

:

CURSO DE FORMAÇÃO EM TIC

Agora que já viu como se faz...

• 2 – No Word, inicie um documento novo

• 3 – Digite um título (subtema da secção) e formate-o • 4 – Coloque o cursor onde pretende inserir o documento • 5 – Accione os comandos:

Inserir/Ficheiro...

• 6 – Na Caixa de Diálogo Inserir Ficheiro: Seleccione o trabalho de um dos alunos

Saia da Caixa de Diálogo Inserir Ficheiro clicando em Inserir • 7 – Coloque o cursor no final do texto que foi inserido

• 8 - Faça um ou dois parágrafos

• 9 – Repita os procedimentos 4, 5, 6 e 7 para inserir os restantes trabalhos • 10 – No final, grave o trabalho em formato HTML e guarde-o na pasta pagina

Agora que já tem todas as páginas gravadas na pasta pagina em formato HTML , pode realizar as “páginas de rosto” de cada secção.

2 P

I

No final das actividades seguintes, o seu trabalho deverá ficar com um aspecto semelhante ao da figura seguinte:

CURSO DE FORMAÇÃO EM TIC

Figura 2 - Aspecto final da Página Inicial do Site

! A

:

• 1 – Consulte o Tutorial demonstrativo “Construção da Página Inicial do Site”

Agora que já viu como se faz...

• 2 – Inicie o Word através do Menu Iniciar • 3 – Abra o ficheiro relativo à Página Inicial:

Ficheiro/Abrir...

Na Caixa de Diálogo Abrir seleccione o ficheiro

C:\pagina\inicio.htm

• 4 – Digite o título de boas-vindas ao Site da Escola

• 5 – Formate o título, utilizando os botões respectivos da Barra de Formatação: Centre-o na página

Aumente o tamanho do tipo de letra Escolha a cor do tipo de letra

CURSO DE FORMAÇÃO EM TIC

• 7 – Insira uma imagem da sua escola:

Inserir/Imagem/Do ficheiro...

• 8 - Na Caixa de Diálogo Inserir imagem: Seleccione o ficheiro que pretende inserir

Saia da Caixa de Diálogo Inserir Imagem clicando em Inserir

3 S

L

A página principal desta secção (localidade.htm) vai conter uma tabela invisível (sem contornos) com duas colunas e tantas linhas quantos os subtemas da secção. Esta tabela permitir-nos-á colocar, de forma simples, texto e imagens lado a lado na página. No nosso exemplo, os subtemas são três. Na célula da esquerda de cada linha colocaremos um texto informativo sobre o subtema e uma imagem. Na célula da direita da mesma linha, colocaremos o título de cada página do subtema com a respectiva hiperligação.

No final das actividades seguintes, o seu trabalho deverá ficar com um aspecto semelhante ao da figura seguinte:

Figura 3 - Aspecto final da página inicial da Secção Localidade

! A

:

• 1 – Consulte o Tutorial demonstrativo “Construção da página principal da secção

CURSO DE FORMAÇÃO EM TIC

Agora que já viu como se faz...

• 2 – Inicie o Word através do Menu Iniciar

• 3 – Abra o ficheiro da página principal desta secção:

Ficheiro/Abrir...

Na Caixa de Diálogo Abrir seleccione o ficheiro

C:\pagina\localidade.htm

• 4 – Coloque o cursor no local onde pretende inserir a tabela

Para inserir a tabela:

• 5 – Accione os comandos:

Tabela/Inserir/tabela...

• 6 – Na Caixa de Diálogo Inserir Tabela opte por:

Número de colunas: 2

Número de linhas: escolha um número igual ao número de subtemas desta secção do Site da

sua Escola

Saia da Caixa de Diálogo Inserir Tabela com OK

Para eliminar o contorno da tabela:

• 7 – Coloque o cursor numa das células da tabela • 8 – Accione os comandos:

Formatar/Limites e sombreado...

• 9 – Na Caixa de Diálogo Limites e sombreado, no separador Limites, opte por:

Definição: Nenhuma

Saia da Caixa Diálogo Inserir Imagem com OK

Para anunciar o primeiro subtema desta secção:

• 10 – Coloque o cursor na célula da esquerda da primeira linha da tabela • 11 – Digite o título que entender

CURSO DE FORMAÇÃO EM TIC

Centre-o na célula

Escolha o tamanho do tipo de letra Escolha a cor do tipo de letra

Para inserir a imagem relativa ao subtema:

• 13 – Faça um parágrafo depois do título • 14 – Accione os comandos:

Inserir/Imagem/Do Ficheiro...

• 15 – Na Caixa de Diálogo Inserir Imagem:

Seleccione a imagem que escolheu para este efeito

Saia da Caixa de Diálogo Inserir Imagem com OK

Para centrar a imagem na célula:

• 16 - Seleccione a imagem com um clique

• 17 – Clique no botão Ao centro da Barra de Ferramentas Formatar

A célula da esquerda está completa. Vai agora colocar os títulos das páginas deste subtema, na célula da direita.

Para colocar os títulos das páginas do subtema:

• 18 – Coloque o cursor na célula

• 19 – Digite os títulos das páginas do subtema, separados por parágrafos

• 20 – Formate o texto, utilizando os botões respectivos da Barra de Formatação: Escolha um alinhamento à direita

Aumente o tamanho do tipo de letra Escolha a Cor do tipo de letra

Para colocar a imagem à esquerda de cada título:

• 21 – Coloque o cursor à esquerda do primeiro título • 22 – Accione os comandos:

CURSO DE FORMAÇÃO EM TIC

• 23 – Na Caixa de Diálogo Inserir Imagem:

Seleccione a imagem que escolheu para este efeito

Saia da Caixa de Diálogo Inserir Imagem com OK

• 24 – Repita os procedimentos 21, 22 e 23 para inserir as restantes imagens

Para estabelecer as hiperligações para as páginas do subtema:

• 25 – Seleccione o título do subtema

• 26 – Clique no botão Inserir hiperligação da Barra de Ferramentas Padrão • 27 – Na Caixa de Diálogo Inserir hiperligação:

Clique no botão Ficheiro...

• 28 – Na Caixa de Diálogo Ligar ao Ficheiro:

Seleccione o ficheiro para o qual deseja estabelecer a hiperlogação Saia da Caixa de Diálogo Ligar ao Ficheiro com OK

• 29 – Saia da Caixa de Diálogo Inserir hiperligação com OK

• 30 – Repita os procedimentos 25, 26, 27, 28 e 29 para estabelecer as restantes hiperligações

4 S

P

A página principal desta secção (projecto.htm) vai conter uma pequena descrição do projecto e uma tabela com duas colunas e uma linha. Na célula da esquerda da tabela colocaremos uma imagem. Na célula da direita, colocaremos o título de cada página do subtema, com a respectiva hiperligação.

No final das actividades seguintes, o seu trabalho deverá ficar com um aspecto semelhante ao da figura seguinte:

CURSO DE FORMAÇÃO EM TIC

Figura 4 - Aspecto final da página inicial da Secção Projecto

Os procedimentos para construir esta página são semelhantes aos utilizados na construção da página da secção Localidade. Assim, vamos indicar apenas a sequência das actividades. Sempre que lhe surgirem dúvidas, consulte os procedimentos descritos no ponto 3 deste Manual.

! A

:

• 1 – Escreva um pequeno texto sobre o projecto

• 2 – Formate o texto (tipo de alinhamento, tamanho do tipo de letra e cor do tipo de letra) • 3 – Insira uma tabela com duas colunas e uma linha

• 4 - Insira uma imagem alusiva ao projecto na célula da esquerda

• 5 – Na célula da direita, digite os títulos (ou um texto descritivo) dos subtemas desta secção • 6 – Formate o texto da célula (tipo de alinhamento, tamanho do tipo de letra e cor do tipo de

letra)

• 7 – Coloque uma imagem à esquerda de cada subtítulo

• 8 – Estabeleça as hiperligações para as páginas respectivas dos subtemas

Nota importante: a hiperligação para os desenhos dos alunos deverá ser estabelecida para a

CURSO DE FORMAÇÃO EM TIC

5 SECÇÃO LIGAÇÕES

Esta secção contém apenas uma página (ligacoes.htm). Vai conter um texto introdutório e uma tabela com duas colunas e tantas linhas quantos os sites recomendados nesta secção. Nas células da esquerda da tabela colocaremos uma imagem reduzida da página inicial do site respectivo. A hiperligação para o site será estabelecida na imagem. Na célula da direita, colocaremos o nome do site e uma pequena descrição do seu conteúdo.

Quando o utilizador clicar na imagem que contém a hiperligação, o site deverá ser mostrado numa nova Janela e não na moldura do Site da Escola. Para se conseguir este efeito no Word, é necessário estarmos a trabalhar com a página ligacoes.htm na moldura respectiva. Assim, deverá abrir a página default.htm, e a partir desta, aceder à página da secção Ligações. Só então deverá realizar os procedimentos que se descrevem em seguida.

No final das actividades seguintes, o seu trabalho deverá ficar com um aspecto semelhante ao da figura seguinte:

Figura 5 - Aspecto final da página inicial da Secção Ligações

! A

:

• 1 – Consulte o Tutorial demonstrativo “Construção da página da secção Ligações”

Agora que já viu como se faz...

CURSO DE FORMAÇÃO EM TIC

C:\pagina\default.htm

• 3 – Aceda à página da secção Ligações:

Clique em Ligações na moldura da esquerda (menu)

• 4 - Coloque o cursor à direita do separador da página da secção Ligações (na moldura da direita)

• 5 – Faça dois parágrafos

• 6 – Digite um texto introdutório para esta secção

• 7 – Formate o texto (tipo de alinhamento, tamanho do tipo de letra e cor do tipo de letra) • 8 – Faça um parágrafo

• 9 – Insira uma tabela com duas colunas e tantas linhas quantos os Sites que quer divulgar • 10 – Elimine o contorno da tabela

• 11 – Coloque o cursor na célula da esquerda da primeira linha da tabela

• 12 – Insira a imagem reduzida da página principal do primeiro site que quer anunciar • 13 – Estabeleça a hiperligação para esse site da Internet:

Seleccione a imagem

Clique no botão Inserir hiperligação da Barra de Ferramentas Padrão • 14 – Na Caixa de Diálogo Inserir hiperligação:

Em Escreva o nome...: digite o endereço do Site Em Clique na moldura... : opte por Nova Janela

Saia da Caixa de Diálogo Inserir hiperligação com OK

• 15 – Coloque o cursor na célula da direita da primeira linha da tabela • 16 – Digite o texto que entender sobre o site que está a anunciar

• 17 – Formate o texto (tipo de alinhamento, tamanho do tipo de letra e cor do tipo de letra) • 18 – Coloque o cursor à esquerda do texto

• 19 – Insira a imagem que escolheu

• 20 – Repita os procedimentos 11 a 19 para anunciar os restantes Sites

6 H

Conforme verifica no site que criámos como exemplo, todas dos subtemas contêm uma hiperligação que remete o utilizador para a página de rosto da secção respectiva. Esta funcionalidade torna mais amigável a visita ao Site.

CURSO DE FORMAÇÃO EM TIC

Nas actividades seguintes vamos descrever os procedimentos para se estabelecer a hiperligação entre uma das páginas do subtema Locais de interesse para a página de rosto da secção Localidade.

! A

:

• 1 – Abra uma das páginas do subtema Locais de interesse • 2 – Insira um parágrafo depois do título do documento • 3 - Digite: [VOLTAR]

• 4 – Centre o texto e formate-o

• 5 – Estabeleça a hiperligação para a página de rosto da secção respectiva: Seleccione o texto

Clique no botão Inserir hiperligação da Barra de Ferramentas Padrão • 6 – Na Caixa de Diálogo Inserir hiperligação:

Clique no botão Ficheiro

Seleccione o ficheiro localidade.htm

CURSO DE FORMAÇÃO EM TIC

B. PUBLICAR O SITE DA ESCOLA – O WS-FTP

Chegou finalmente o momento de enviar o seu Site para o servidor da FCCN. Antes de realizar as actividades seguintes, coloque ao seu lado a carta que lhe foi enviada pela FCCN com as informações relativas ao seu espaço no servidor: servidor, username, password e URL.

! A

:

• 1 - Consulte o Tutorial demonstrativo “Envio de ficheiros por FTP”.

Agora que já viu como se faz...

• 2 – Inicie o programa WS-FTP

Para parameterizar o programa e estabelecer a ligação:

• 3 – Observe atentamente a Caixa de Diálogo Session Properties, separador General:

Figura 6 - Janela de Diálogo do WS-FTP, Propriedades da sessão, separador General

Legenda: Profile Name- Designação da configuração de acesso. Host Name/Address-Endereço do computador remoto. Host Type-Tipo de computador remoto User ID-Designação do utilizador Password-Password do utilizador

• 4 - Na Caixa de Diálogo Session Properties, no separador General, opte por: Profile name: digite o nome que entender

CURSO DE FORMAÇÃO EM TIC

Host Name/Address: ftp.por.rcts.pt

User id: digite o username que lhe foi fornecido Password: digite a password que lhe foi fornecida

Se quiser gravar a password, active a opção Save Pwd • 5 – Clique no separador Advanced

• 6 - Na Caixa de Diálogo Session Properties, no separador Advanced: Desactive a opção Passive transfers

Se não estiver a trabalhar numa rede ou se o seu computador for o servidor, o programa já está configurado: avance para a actividade nº9. Caso contrário, prossiga com a actividade seguinte. • 7 – Clique no separador Firewall

• 8 - Na Caixa de Diálogo Session Properties, no separador Firewall:

Preencha as diversas opções deste separador com as instruções que lhe forem dadas pelo administrador do sistema, ou com a ajuda do seu formador

O programa já está configurado. Pode agora estabelecer a ligação e enviar os ficheiros correspondentes ao Site da sua Escola.

• 9 – Estabeleça a ligação:

Clique no botão OK da Caixa de Diálogo Session Properties Depois de estabelecida a ligação, o ecrã terá o seguinte aspecto:

CURSO DE FORMAÇÃO EM TIC

Figura 7 - Janela de Diálogo do WS-FTP após a ligação

Legenda:

Conforme verifica, esta janela está dividida em duas áreas:

– a área do lado esquerdo: representa o Sistema Local (o seu computador onde está guardado o site que pretende enviar). – a área do lado direito: representa o Sistema Remoto (para onde pretende enviar o site).

A seta verde que existe em qualquer das áreas permite subir de nível no esquema de pastas. Repare que no Sistema Remoto já existem diversos ficheiros e pastas. A pasta projecto foi criada por si e contém os ficheiros relativos à secção Projecto do site. A outra pasta e os ficheiros que pode visualizar foram aí colocados pela FCCN. Irá eliminar alguns desses ficheiros.

Para localizar o site que vai enviar:

• 10 – Na área do Sistema Local:

Clique sucessivamente na seta verde (para subir de nível no esquema de pastas) até chegar à raiz do disco C:\

• 11 – Faça duplo clique sobre a pasta pagina No final o ecrã deverá ter o seguinte aspecto:

CURSO DE FORMAÇÃO EM TIC

Figura 8 - Janela de Diálogo do WS-FTP depois de localizado o site a enviar

Legenda:

Entre a área do Sistema Local e a Área do Sistema Remoto existem duas setas que indicam o sentido da transferência de ficheiros.

Para transferir ficheiros do seu computador para o servidor da FCCN, deverá clicar na 2ª seta (depois de seleccionar os ficheiros a enviar).

Para transferir ficheiros da FCCN para o seu computador, deverá clicar na 1ª seta (depois de seleccionar os ficheiros a enviar). Os botões MKDir existentes em cada área permitem criar pastas nos Sistemas Local e Remoto.

Para renomear o ficheiro default.htm:

Como sabe, o ficheiro default.htm é aquele que deve ser executado quando se pretende visualizar o site. Porém, o servidor da FCCN exige que este ficheiro tenha a designação

index.html. Vai agora renomear o ficheiro:

• 12 – Na Área do Sistema Local:

Seleccione o ficheiro default.htm com um clique Clique no botão Rename

• 13 – Na Caixa de Diálogo que lhe é mostrada: Apague o texto default.htm

CURSO DE FORMAÇÃO EM TIC

Saia da Caixa de Diálogo com OK

Para apagar ficheiros no Sistema Remoto:

Alguns dos ficheiros que estão alojados no servidor da FCCN já não são necessários: correspondem à página que é mostrada enquanto a Escola não enviar o seu Site. Porém, o ficheiro teste.htm e a pasta counter serão necessários quando quiser colocar um contador de acessos na página inicial do Site da Escola. Vai eliminar todos os outros.

• 14 – Na Área so Sistema Remoto seleccione todos os ficheiros a eliminar: Clique no primeiro da lista: barra.gif

Pressione a tecla <SHIFT> e, mantendo-a pressionada, clique no último ficheiro a eliminar:

rcts.gif (note que os ficheiros a eliminar deverão ficar realçados a azul)

Clique no botão Delete

• 15 - Na Janela de Diálogo Verify Deletion que entretanto lhe é mostrada: Clique no botão Delete All

Para enviar o site para o Sistema Remoto:

Vai enviar todos os ficheiros e pastas, excepto a pasta projecto. A forma mais fácil de o fazer é seleccionar de uma só vez todos os ficheiros e pastas. Note, porém, que poderia enviar um e cada vez. Como os ficheiros e pastas a enviar não estão contíguos – a pasta projecto está no meio deles – vai utilizar outro métode de selecção.

• 16 – Na Área do Sistema Local seleccione a primeira pasta a enviar com um clique • 17 – Clique na tecla <CTRL>

• 18 – Mantenha a tecla <CTRL> pressionada e seleccione as restantes pastas e ficheiros com um clique (um de cada vez)

No final, os ficheiros e pastas a enviar deverão ficar realçados a azul.

• 19 – Para enviar os ficheiros e pastas, clique na segunda seta existente entre a área do Sistema Local e a área do Sistema Remoto

• 20 – Na Janela de Diálogo que entretanto lhe é mostrada: Clique no botão Yes

O processo de transferência de ficheiros vai demorar um pouco. Quando terminar, encerre a ligação e saia do programa WS-FTP.

CURSO DE FORMAÇÃO EM TIC

• 21 – Clique no botão Close • 22 – Clique no botão Exit

Convém agora verificar se o seu trabalho está correctamente publicado. Para isso, abra o Internet Explorer e digite o endereço da sua Escola.

CURSO DE FORMAÇÃO EM TIC

ÍNDICE DE FIGURAS

Figura 1 - Site da Escola: hiperligações entre páginas ...2

Figura 2 - Aspecto final da Página Inicial do Site ...5

Figura 3 - Aspecto final da página inicial da Secção Localidade...6

Figura 4 - Aspecto final da página inicial da Secção Projecto ...10

Figura 5 - Aspecto final da página inicial da Secção Ligações ...11

Figura 6 - Janela de Diálogo do WS-FTP, Propriedades da sessão, separador General ...14

Figura 7 - Janela de Diálogo do WS-FTP após a ligação ...16

CURSO DE FORMAÇÃO EM TIC

ÍNDICE GERAL

A. CRIAR O SITE DA ESCOLA...2

1 Preparação das páginas dos subtemas do Site ...2

2 Página Inicial ...4

3 Secção Localidade ...6

4 Secção Projecto...9

5 Secção Ligações ...11

6 Hiperligação de retorno à página de rosto das secções ...12

B. PUBLICAR O SITE DA ESCOLA – O WS-FTP...14