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

Transcrição

1 - MÓDULO IV - Da minha Escola para o Mundo. Criar e Publicar o Site da Escola. Santarém, Março de 2002 Cristina Novo/João Galego/Maurício Dias/Nuno Pacheco/Teresa Pacheco

2 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: Sinta-se igualmente à vontade para imprimir o seu cunho pessoal em todo este trabalho as propostas que faremos são apenas exemplos! 1 PREPARAÇÃO DAS PÁGINAS DOS SUBTEMAS DO SITE 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 Exemplo desta situação Secção Localidade, subtema Locais de interesse da região. Cristina Novo/João Galego/Maurício Dias/Nuno Pacheco/Teresa Pacheco Escola Superior de Educação de Santarém

3 Situação B O subtema remete para diversas páginas, contendo cada uma delas um trabalho de um aluno: Portas do Sol, Museu do Alporão, etc. 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! ACTIVIDADES: 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! ACTIVIDADES: Veja como se faz: 1 Consulte o Tutorial demonstrativo Inserção de ficheiros num documento do Word Cristina Novo/João Galego/Maurício Dias/Nuno Pacheco/Teresa Pacheco Escola Superior de Educação de Santarém

4 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ÁGINA INICIAL No final das actividades seguintes, o seu trabalho deverá ficar com um aspecto semelhante ao da figura seguinte: Cristina Novo/João Galego/Maurício Dias/Nuno Pacheco/Teresa Pacheco Escola Superior de Educação de Santarém

5 Figura 2 - Aspecto final da Página Inicial do Site! ACTIVIDADES: Veja como se faz: 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 6 Faça um ou dois parágrafos Cristina Novo/João Galego/Maurício Dias/Nuno Pacheco/Teresa Pacheco Escola Superior de Educação de Santarém

6 7 Insira uma imagem da sua escola: Inserir/Imagem/Do ficheiro 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 SECÇÃO LOCALIDADE 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 permitirnos-á 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! ACTIVIDADES: Veja como se faz: 1 Consulte o Tutorial demonstrativo Construção da página principal da secção Localidade Cristina Novo/João Galego/Maurício Dias/Nuno Pacheco/Teresa Pacheco Escola Superior de Educação de Santarém

7 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 12 Formate o título que digitou, utilizando os botões respectivos da Barra de Formatação: Cristina Novo/João Galego/Maurício Dias/Nuno Pacheco/Teresa Pacheco Escola Superior de Educação de Santarém

8 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 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: Inserir/Imagem/Do Ficheiro... Cristina Novo/João Galego/Maurício Dias/Nuno Pacheco/Teresa Pacheco Escola Superior de Educação de Santarém

9 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 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 SECÇÃO PROJECTO 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: Cristina Novo/João Galego/Maurício Dias/Nuno Pacheco/Teresa Pacheco Escola Superior de Educação de Santarém

10 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.! ACTIVIDADES: 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 página album.htm que se encontra na pasta projecto. Cristina Novo/João Galego/Maurício Dias/Nuno Pacheco/Teresa Pacheco Escola Superior de Educação de Santarém

11 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! ACTIVIDADES: Veja como se faz: 1 Consulte o Tutorial demonstrativo Construção da página da secção Ligações Agora que já viu como se faz... 2 Abra o ficheiro: Cristina Novo/João Galego/Maurício Dias/Nuno Pacheco/Teresa Pacheco Escola Superior de Educação de Santarém

12 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 HIPERLIGAÇÃO DE RETORNO À PÁGINA DE ROSTO DAS SECÇÕES 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. Cristina Novo/João Galego/Maurício Dias/Nuno Pacheco/Teresa Pacheco Escola Superior de Educação de Santarém

13 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.! ACTIVIDADES: 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 Saia da Caixa de Diálogo Inserir hiperligação com OK Cristina Novo/João Galego/Maurício Dias/Nuno Pacheco/Teresa Pacheco Escola Superior de Educação de Santarém

14 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.! ACTIVIDADES: Veja como se faz 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: 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 Figura 6 - Janela de Diálogo do WS-FTP, Propriedades da sessão, separador General 4 - Na Caixa de Diálogo Session Properties, no separador General, opte por: Profile name: digite o nome que entender Cristina Novo/João Galego/Maurício Dias/Nuno Pacheco/Teresa Pacheco Escola Superior de Educação de Santarém

15 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: Cristina Novo/João Galego/Maurício Dias/Nuno Pacheco/Teresa Pacheco Escola Superior de Educação de Santarém

16 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: Cristina Novo/João Galego/Maurício Dias/Nuno Pacheco/Teresa Pacheco Escola Superior de Educação de Santarém

17 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 Digite index.html Cristina Novo/João Galego/Maurício Dias/Nuno Pacheco/Teresa Pacheco Escola Superior de Educação de Santarém

18 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. Para encerrar a ligação e sair do programa: Cristina Novo/João Galego/Maurício Dias/Nuno Pacheco/Teresa Pacheco Escola Superior de Educação de Santarém

19 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. Por exemplo - Cristina Novo/João Galego/Maurício Dias/Nuno Pacheco/Teresa Pacheco Escola Superior de Educação de Santarém

20 Í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 Figura 8 - Janela de Diálogo do WS-FTP depois de localizado o site a enviar...17 Cristina Novo/João Galego/Maurício Dias/Nuno Pacheco/Teresa Pacheco Escola Superior de Educação de Santarém

21 ÍNDICE GERAL A. CRIAR O SITE DA ESCOLA Preparação das páginas dos subtemas do Site Página Inicial Secção Localidade Secção Projecto Secção Ligações Hiperligação de retorno à página de rosto das secções...12 B. PUBLICAR O SITE DA ESCOLA O WS-FTP...14 Cristina Novo/João Galego/Maurício Dias/Nuno Pacheco/Teresa Pacheco Escola Superior de Educação de Santarém