XXIV SEMANA MATEMÁTICA

Transcrição

1 XXIV SEMANA ACADÊMICA DA MATEMÁTICA Minicurso: Produção de Páginas Web para Professores de Matemática Projeto de Extensão: Uma Articulação entre a Matemática e a Informática como Instrumento para a Cidadania e o Emprego, e Acessibilidade às IES. CASCAVEL 2010

2 Sumário 1 O Google Sites Criando o Site Editando o Site Menu Inserir Formatar Menu Tabela Menu Layout Criar Nova Página Editando a barra lateral Mais ações GIMP Redimensionar imagem Recortar imagem

3 Capítulo 1 O Google Sites O Google Sites é mais um serviço disponibilizado pela Google e seu objetivo é facilitar a criação de sites. Os sites auxiliam as pessoas a divulgarem seus trabalhos, empresas, serviços, produtos e etc., através da publicação das páginas na Internet. O processo de desenvolvimento é auto-explicativo e não requer conhecimento na área de programação por parte do usuário. As páginas podem ser criadas desde o inicio ou a partir de modelos prontos fornecidos pelo serviço. Além disso, o usuário conta com a versatilidade de configurar o Google Sites para trabalhar com um domínio (nome que identifica um conjunto de computadores na internet) já existente, por exemplo.com,.net, ou registrar um novo para aqueles que ainda não possuem um. Apesar da página inicial encontrar-se em inglês, o processo de configuração está traduzido para o nosso idioma. As principais características deste serviço são: Possibilita criar páginas para a Internet; Dispensa o conhecimento de linguagens de marcação a exemplo do HTML; Oferece diversas opções para personalizar página; Disponibiliza uma série de modelos prontos para começar; Permite o envio de arquivos de até 10MB; Possibilita que a administração do site seja compartilhada com outras pessoas; Fornece o mecanismo de busca Google para pesquisas dentro da página; É integrado a outros produtos Google. 2

4 1.1 Criando o Site Em seu navegador padrão acesse: sites.google.com. Para começar a criar seu site, você deve possuir uma conta Google, caso não possua, clique em Inscreva-se no Sites, como mostra a figura 1.1, em detalhe. Para criar a conta no Google Sites você precisa possuir uma conta de , não necessariamente do google. Caso já tenha uma conta do Orkut, que é um serviço do google, você já possui um vinculado ao Google, podendo usá-lo para acessar o Google Sites. Escolha sua conta e pronto! Já estará inscrito no Sites. Figura 1.1: Tela Inicial Após ter feito o login no Sites, será mostrada a lista de sites já criados por essa conta. Como é a primeira vez que se está acessando, não aparecerá nenhum site já criado. Então clique em Criar site como mostra a figura 1.2, abaixo. Figura 1.2: Meus Sites 3

5 Na sequência, como mostrado na figura 1.3, primeiramente será escolhido o modelo de site que será usado. Há vários modelos já prontos que poderão ser aplicados. Para isso, clique em Navegue na galeria para ver outros modelos, selecione no lado esquerdo da tela um gênero e clique sobre o modelo escolhido. Caso prefira um modelo em branco para modificá-lo a seu gosto, deixe marcada a opção Modelo em branco. Você poderá alterar o modelo do site a qualquer momento. Figura 1.3: Modelos Em seguida, é solicitado Nomeie seu site:. Aqui será colocado o nome do site que está sendo criado. Este nome, também denominado URL, é o endereço de acesso a um site da internet, por exemplo Propositalmente, neste momento este nome será preenchido de forma automática em decorrência ao que for preenchido em Nomeie seu site:. É possível preencher outro nome, desde que o mesmo siga as normas de construção de um URL válido e desde que não exista um site com o mesmo nome. O endereço do site, depois de criado, não poderá ser mudado. O nome poderá ser alterado a qualquer momento, mas o endereço do site (URL) não. Cso já exista um usuário utilizando o endereço de site que você 4

6 sugeriu o Google Sites irá informar e solicitar que você forneça um outro endereço para sua página. Acompanhe na figura 1.4 abaixo. Figura 1.4: Criando um site Você poderá também escolher um tema para o seu site, ou seja, um conjunto de cores e desenhos que será usado para design do site. Para isso clique em Escolha um tema (fig. 1.4) e selecione o tema que mais lhe agradar (Figura 1.5). Figura 1.5: Temas A aba Mais opções (fig. 1.4, localizada abaixo da escolha do tema, não é obrigatória neste momento. Estas mesmas opções serão encontradas posteriormente clicando na opção Administrar site. Porém, ao clicar sobre esta aba, poderá ser definida uma descrição para o site que está sendo criado, definindo, por exemplo, com quem se está compartilhando o site ou e se o site possui conteúdo adulto. 5

7 Para finalizar a etapa de criação digite o código de verificação que se encontra no pé da página (Veja na Figura 1.4) e clique em Criar site. 1.2 Editando o Site Após ter criado o site você poderá editá-lo postando textos, arquivos, links,gadgets (gadgets são mini-aplicativos que são usados e disponibilizados na internet, que possibilitam, por exemplo, informações sobre clima, guias de navegação, etc.).para isso, clique em Editar página no canto superior direito (veja a Figura 1.6). Note que você já esta acessando seu site na forma de visualização. É dessa forma que as outras pessoas que acessarem seu site irão vê-lo. No modo edição, a tela muda para que você possa modificá-lo e postar novos recursos e objetos. Figura 1.6: Página Inicial Na próxima tela você terá uma gama de opções de edição do seu site (veja a Figura 1.7) como Inserir, Formatar, Tabela, Layout, Editar barra lateral. 6

8 Figura 1.7: Edição do site Menu Inserir No menu inserir (Figura 1.8) você encontrará as opções: Imagem, link, sumário, listagem de subpágina, linha horizontal, alguns aplicativos do google, vídeo e gadgets. Estas opções são o que você poderá inserir em seu site. Para inserir uma imagem, neste menu, clique em Imagem. Abrirá uma janela onde você deverá inserir o endereço da figura (caso seja uma imagem da internet) ou procurar no computador onde a figura está guardada. A figura será enviada para o computador servidor da google e, a partir daí, ela poderá ser apresentada no seu site. Clicando na figura, no modo de edição, irá aparecer uma faixa com algumas opções para que você controle o posicionamento e alinhamento da mesma na página, possa escolher o tamanho ou excluir a mesma. Clicando em Link, você poderá selecionar uma página já criada do seu site ou uma página externa, possibilitando que tal página seja acessada através da sua. Uma opção interessante é a de associar um link à um texto. Para fazer isso você deve selecionar o texto escrito e clicar em link. Você tem a opção de colocar um link de uma página externa ou de uma página do seu site. Assim quando clicarmos sobre esse texto seremos direcionados a página referente ao link. Ao adicionar um link você escolher a opção de abri-lo em nova janela. Uma ferramenta muito interessante e bastante útil, é a postagem de vídeos do Youtube ou do Google Vídeo. Para isso passe o cursor do mouse em Vídeo e clique no site de vídeo de onde quer postar. Por exemplo, clicando em Youtube você deverá inserir o link de algum vídeo que esteja hospedado no Youtube, que ficará visível na sua página. 7

9 Figura 1.8: Menu Inserir Formatar Neste menu, apresentado na Figura 1.9, você pode limpar a formatação, mudar o tipo do texto para Cabeçalho, Sub-cabeçalho, Título menor e texto normal. Pode ainda colocar como taxado, sobrescrito e subscrito, alinhar esquerda, direita ou centro, opção esta que também se encontra na barra de ferramentas. Figura 1.9: Menu Formatar Menu Tabela Para adicionar e modificar uma tabela deve-se utilizar o menu Tabela (figura 1.10). Neste menu você tem todas as ferramentas necessárias para manipular este tipo de objeto em seu site. 8

10 Figura 1.10: Menu Tabela Menu Layout No menu Layout (Figura 1.11), é definido como será o comportamento de sua página, quantas colunas e barras terá e de que forma será exibido. Escolha a forma que achar mais apropriada. E ela será automaticamente modificada. Figura 1.11: Menu Layout Nesta mesma página, com layout padrão, na barra do lado esquerdo notam-se alguns link s, e logo abaixo Editar barra lateral. Esta opção permite adicionar link s. Você poderá colocar ligações com sites externos ou páginas do seu próprio site. Essa funcionalidade você aprenderá a fazer nas próximas seções. 9

11 1.3 Criar Nova Página Na tela inicial, ao lado de Editar Página, há a opção de Criar Página (figura 1.13). Clicando neste link, abrirá uma página onde é possível configurar como será a nova página. Uma nova página é necessária quando se quer separar assuntos, organizar melhor a estrutura do site construído. Podemos a qualquer momento criar uma nova página. Para isso, basta desativar o modo de edição (caso esteja ativo) e/ou simplesmente clicar no botão Criar Página (figura 1.14). Figura 1.12: Criar Página Após clicar, surgirá uma página semelhante a Figura 1.15: Figura 1.13: Criar Página Escolha um Nome que remeta ao conteúdo da página e coloque no campo Nome. Você 10

12 também pode alterar o endereço da página, lembrando que caracteres especiais não são permitidos nos links. A opção Colocar página no nível superior põe a página no mesmo nível da página inicial. As páginas do Nível Superior, em princípio, não possuem nenhum tipo de vínculo entre si. Caso não queira colocar uma página no nível superior (subordinar a página criada a uma outra página), clique em Escolha um local diferente. Surgirá uma janela semelhante à da figura 1.16: Figura 1.14: Criar Página Se clicarmos em Página Inicial, a página criada será vinculada a Página Inicial, se tornando uma página subordinada de Página Inicial. No quadro apresentado na Figura 1.13 (reexibida a seguir) podemos vincular a qualquer página, de acordo com nossa preferência. Como exemplo, vinculamos a página 1 o Ano à Notas. 11

13 1.3.1 Editando a barra lateral Para organizar melhor o site, o Google desenvolveu uma opção de Barras Laterais. Com ela, podemos dividir os assuntos relacionados por conteúdo, facilitando a localização de quem acessa o site. Para editar a barra lateral, clique em Editar barra lateral, no lado esquerdo da página. A página aberta é uma página de administração do site e será semelhante à da figura 1.17: Figura 1.15: Administrar Site Note que em Barra Lateral ele mostrará o que já foi adicionado, possibilitando edição, mover ou remover, e logo abaixo, a opção de Adicionar um item na barra lateral. Nesta opção você poderá adicionar as páginas e nomeá-las. Em Cabeçalho você terá a opção de Alterar Logotipo. Clicando neste link tem-se a opção de colocar um logotipo no cabeçalho do site. Ao lado esquerdo da tela, há Conteúdo do site. Aqui será mostrado, dividido em grupos, basicamente tudo o que está postado no site, suas páginas, anexos e os modelos de página (blog, avisos, arquivos, lista, etc). Em seguida, em Configuração do site, há opções que deixamos de completar ao criar o site. Aqui podemos completá-las, e utilizar muitas outras opções. Finalmente, em Aparência do site, há opções para mudar toda a aparência do site, cores, temas e o layout. Esta página já abre quando se clica em Editar barra lateral. Para que suas alterações sejam válidas, após terminada, clique em Salvar alterações. Esta operação salvará tudo que foi feito e seu site já estará atualizado, automaticamente. Caso queira saber como ficou antes de salvar, clique em visualizar, depois salve. Se clicarmos em Editar na janela Navegação, surgirá uma nova janela igual a figura 1.18, onde podemos escolher quais páginas serão mostradas na barra lateral: 12

14 Figura 1.16: Configurando menu de barra lateral A opção Exibir título exibe um título acima do link para a página desejada, no caso desabilitamos essa opção. A opção Organizar automaticamente a minha navegação faz com que o Google Sites organize automaticamente os menus de barra lateral, porém, é aconselhável que façamos isso de maneira manual. No nosso exemplo de site, temos apenas a seção Notas inclusa na barra lateral. Porém, podemos adicionar mais de um item na barra lateral e/ou criar novos itens. Vamos adicionar a página 1 o Ano na barra lateral. Como ela é uma subpágina de Notas, podemos subordiná-la ao link Notas. Clicamos em Adicionar página (esse comando serve apenas para adicionar páginas do site, se quisermos adicionar uma página de outro site, devemos clicar em Adicionar URL). Em seguida, veremos uma janela com a árvore do nosso site, clicamos no + em Notas para vermos suas subpáginas, e clicamos em 1 o Ano, como na figura 1.19: Figura 1.17: Selecionando uma página para adicionar ao menu de barra lateral 13

15 Em seguida, clicamos OK nas duas janelas, salvamos as alterações e voltamos para o site. Vemos que o link para a página 1 o Ano está abaixo de notas, não necessitando mais clicar primeiramente em Notas para acessá-la. Agora vamos subordinar o link 1 o Ano a aparecer somente se clicar no link Notas. Voltamos ao link da figura 1.18, clicamos em 1 o Ano, e clicamos na seta >. Isso moverá o nome da página um pouco para a direita, significando que os links foram subordinados. Clicamos em OK, salvamos as alterações e voltamos a página. Agora o menu 1 o Ano só aparece abaixo de Notas se Clicarmos na setinha que antecede o link Notas. Caso queiramos retirar essa subordinação, é so selecionarmos 1 o Ano na janela de edição do menu, e clicar na seta <. As setas para baixo e para cima são usadas para definir a ordem em que os links aparecem, para baixo coloca o link selecionado abaixo e o link que estava anteriormente abaixo acima. para cima coloca o link selecionado acimaa e o link que estava anteriormente acima abaixo. 1.4 Mais ações No menu Mais ações (Figura 1.20), há muitas outras ações que podem ser utilizadas no site. Primeiramente, Histórico de revisões mostrará tudo que foi feito na página e lhe oferece a opção de voltar a uma alteração antiga. Clicando em Configurações da página, você pode mudar o nome da página, permissões e o modelo da página. Neste menu ainda há a opção de imprimir, mover e excluir página. Ainda clicando em Visualizar página como visualizador, você terá a visão de quem está acessando seu site. A ação Administrar site, abrirá a mesma página de quando se clica em Editar barra lateral. Figura 1.18: Mais ações Devido ao fato de que é frequente o uso de figuras em sites, na próxima seção se apresen- 14

16 tará uma maneira de trata-las de modo simples e direto, através do GIMP. 1.5 GIMP O GIMP é um editor de imagem, muito usado atualmente. Trata-se de um software gratuito que pode ser encontrado em versão para Windows e já vem pré-instalado no UBUNTU e em algumas distribuições Linux. O GIMP oferece muitas ferramentas de edição de imagem. Aqui daremos umas dicas de utilização de apenas duas funções: o redimensionamento de imagem e o recorte. Escrevemos o pequeno tutorial a seguir pois adiante surgirão problemas com o tamanho das imagens, e muitas vezes será necessário recortar e/ou redimensionar a imagem Redimensionar imagem Se você tem uma imagem, com um tamanho superior ao suportado no site que deseja colocar a figura, você deve fazer um redimensionamento. Redimensionar significa alterar seu tamanho. Para começar, abra o GIMP e clique em Arquivo/Abrir. Procure a sua imagem e clique em Abrir. No exemplo pegamos uma imagem com um resolução de 1920x1200 pixels. O Redimensionamento da imagem é muito simples, depois de aberta, clique no menu Imagem e clique em Redimensionar Imagem (figura 1.21). 15

17 Figura 1.19: Redimensionar imagem Na caixa de diálogo preencha com o tamanho desejado. No exemplo (figura 1.22) vamos colocar 800x600 pixels. Então em Largura colocamos 800 e em Altura 600. Perceba que logo que se coloca um valor o programa automaticamente preenche o segundo, pois sugere a melhor dimensão para a imagem de maneira a não distorcê-la. O programa ainda fornece a opção de dimensionar não somente em pixels. Se clicar na caixa ao lado poderá ver que se pode dimensionar por outros tipos de medida. 16

18 Figura 1.20: Janela de redimensionamento Após preencher os campos, clique no botão Redimensionar e sua imagem ficará menor, no sentido de resolução e em tamanho de armazenamento em disco (Mb). Feito isso basta clicar em Arquivo/Salvar. Caso não queira perder a imagem em seu tamanho original clique em Salvar Como e escolha um nome diferente do original para sua imagem Recortar imagem Se você tem uma imagem e só quer uma parte dela, no GIMP você pode recortar essa parte. Para isso com sua imagem aberta clique na Ferramenta de corte, destacada na figura

19 Figura 1.21: Recorta imagem Agora selecione a área onde quer cortar. No nosso exemplo foi selecionada apenas a região em destaque, presente na figura

20 Figura 1.22: Recortando Perceba que o programa automaticamente escurece toda a imagem e deixa clara apenas a área que foi selecionada. Você ainda pode movimentar esta área, clicando sobre a seleção e arrastando, ou ainda aumentar ou diminuir o tamanho da seleção clicando nos quadrados dos cantos. Depois de selecionar a área, basta apertar a tecla Enter, e sua imagem será recortada. Veja como ficou nosso exemplo na Figura

21 Figura 1.23: Figura recortada Pronto. Sua imagem foi recortada. Clique em Arquivo/Salvar para salvar somente a parte recortada. Caso queira salvar as duas imagens clique em Salvar Como. Assim você terá a figura original e o recorte. 20