Inserindo imagens e suas opcoes no modo administrador

Luıs Claudio Lopes de AraujoUniCEUB - Centro Universitario de Brasılia

24 de agosto de 2008

Resumo

Este e um documento que mostra como inserir imagens em textos usando o editor do Moodle quandoesta no modo Administrador/Professor Tutor.

Ha duas formas de se inserir uma imagem em um forum, pagina web, blog ou qualquer ambiente em queesteja presente o editor de texto do Moodle: usando uma imagem da Web ou subindo uma imagem que sequer usar.

Usando uma imagem da Web

Inicialmente, busque a imagem que voce quer inserir no texto. Usando um sistema de busca qualquer(Cade, Yahoo! Google, AltaVista etc) voce localiza a imagem na Web e para acrescenta-la ao texto voceprecisa de seu endereco na Web (veja figura seguinte). Copie este endereco.

Você precisadeste endereço

Figura 1:

Alternativamente, se estiver usando o navegador Firefox (http://baixaki.ig.com.br/download/Mozilla-Firefox.htm) mesmo sem estar diante de uma pagina como a mostrada na figura anterior, e possıvel obter oendereco da imagem. Para isto, clique com o botao do lado direito do mouse sobre a imagem e na janela queaparecera em Copiar endereco da imagem. Feito isto voce tambem obteve o endereco.

No Internet Explorer (http://baixaki.ig.com.br/download/Internet-Explorer.htm) nao ha esta opcao.Para conseguir o endereco da imagem voce deve clicar com o botao do lado direito sobre a mesma e posteri-ormente em Propriedades. Uma nova janela aparecera. Nesta janela ha uma linha escrito: Endereco:(URL).O endereco e o que esta a direita: http://www... Veja uma ilustracao na figura seguinte.

De posse deste endereco, vamos voltar ao Moodle e inserir esta imagem. Para tal clique na ferramentaInserir Imagem . Uma janela aparecera como a mostrada na figura a seguir.

1

Figura 2:

Figura 3:

No campo URL da Imagem cole o endereco copiado anteriormente. Para isto basta clicar com o botaodo lado direito no campo e selecionar Colar ou entao segurar a tecla Ctrl e apertar a tecla v (Ctrl+v). Ocampo texto alternativo deve ser preenchido tambem. Este e o texto que aparece quando apenas pousa omouse sobre a figura. A tıtulo de ilustracao, escreva: Flor desenhada no CorelDraw. Feito isto, clique nobotao OK. Se tudo correu bem uma imagem aparecera em seu editor.

Clique sobre a imagem. Aparecera uma borda e seis pequenos quadrados. Se voce clicar e arrastar qual-quer um dos quadrados a imagem sera redimensionada. Esta opcao e util quando se esta com uma imagemonde o tamanho nao e o que quer. Exercite este redimensionamento. Note que os quadrados que estao nocanto mantem a proporcao, ou seja, a nova imagem e uma reducao ou ampliacao da original. Lembre-se quee possıvel desfazer o que fez segurando a tecla Ctrl e apertando a tecla z (Ctrl+z).

2

Figura 4: Esta e a imagem da tela que aparece quando voce clica na ferramenta Inserir imagem estando nomodo administrador.

Clique sobre a imagem e posteriormente aperte a tecla seta para direita (→). Escreva alguma coisa e vejacomo o texto ficara em relacao a imagem.

Figura 5:

Vejamos como podemos modificar a relacao Texto/Imagem. Clique sobre a imagem e posteriormente naferramenta Inserir Imagem . A janela que usou para inserir a imagem reaparecera. Note a existencia de trescaixas: Layout, Distancia e Tamanho (veja a proxima figura)Da direita para esquerda:

3

Figura 6:

Tamanho Permite que voce diga exatamente com que tamanho a imagem ficara (em pixels1). Nao esquecaque a imagem pode deformar (no sentido de nao manter a proporcao entre as medidas dos lados).Experimente trocar o 300 que aparece na largura por 100 e clique em OK. Veja como a imagem ficou.

Distancia Diz a que distancia da imagem o texto deve ficar (em pixels). Experimente colocar 50 no campoHorizontal e 70 no campo Vertical e clique em OK. Veja como o texto ficou em relacao a figura. Entrenovamente no modo de edicao (Clique na figura e ative a ferramenta Inserir imagem). Volte os camposaos valores iniciais.

Layout No campo Espessura das bordas voce pode colocar uma borda em sua figura com espessura indicadano campo (em pixels). Experimente colocar a imagem com borda de tamanho 10 e clique em OK. Vejao que houve com a imagem. Modifique este numero para 1, 5 etc. Terminando a experiencia, volte parao numero 0 (zero).Com respeito a opcao Alinhamento ela permite que voce diga qual e a posicao da imagem em relacaoao texto. O padrao e o texto nao ficar em volta da figura. Para que o texto fique ao redor da imagemselecione a opcao direita (para a imagem ficar a direita do texto) ou esquerda (imagem a esquerda).

Figura 7:

Uma outra opcao que pode usar e a Centro. Nesta, o texto inicia em uma linha aproximadamenteno ponto medio da altura e muda para debaixo da figura apos o primeiro Enter. Essas tres sao as duasopcoes mais usadas. Selecione a opcao Direita e clique em OK. Devera obter algo como mostra a figuraabaixo

Experimente agora modificar a posicao da figura no texto. Da forma que esta ela e o primeiro objeto. Vamoscoloca-la no meio do texto. Para isto voce pode simplesmente clicar e arrasta-la ou, caso queira mais precisao,clique sobre a figura, segure o Ctrl e aperte x (Ctrl+x), leve o cursor ate onde quer que a figura apareca esegure a tecla Ctrl e aperte v (Ctrl+v). O que observa? Algo semelhante ao que esta abaixo?

1Pixel (aglutinacao de Picture e Element, ou seja, elemento de imagem, sendo Pix a abreviatura em ingles para Picture) e omenor elemento num dispositivo de exibicao (como por exemplo um monitor), ao qual e possıvel atribuir-se uma cor. De umaforma mais simples, um pixel e o menor ponto que forma uma imagem digital, sendo que o conjunto de milhares de pixels formama imagem inteira. Fonte:http://pt.wikipedia.org/wiki/Pixel

4

Figura 8:

Figura 9:

Exercıcio

Explore o que aprendeu. Coloque moldura, modifique o espacamento, o alin-hamento e veja o que ocorre com sua figura. Finalize o exercıcio clicando em Salvarmudancas.

Subindo uma imagem

Usar imagem da Web pode ser interessante por nao gastar espaco de seu servidor,mas tem a desvantagem de depender que a imagem esteja la disponıvel. Se alguemretirar a imagem para onde esta apontando esta desaparece de seu texto. Sendoassim, ha uma forma de se colocar a imagem diretamente no servidor onde o Moodle

5

esta instalado. Para tal e necessario que a imagem esteja em seu computador. Busquepela imagem que deseja inserir e salve em sua maquina.

Aqui você visualiza osdiretórios e arquivos queestão à disposição no servidor.

Aqui você vê a imagemque foi selecionada.

Figura 10:

Clique na ferramenta Inserir imagem. Na janela que aparecera voce vera dois camposcomo mostra a figura anterior. Apos subir alguma imagem ou criar alguma pasta,vera um ambiente bastante familiar. Na parte inferior ha algumas opcoes que saovistas em detalhes na figura a seguir.

Apaga arquivo selecionadoMover arquivo selecionado para outra pasta

Compacta arquivo no formato *zip

Modifica o nome do arquivo

Cria uma pasta com o nome indicado

Abre um navegador que permite encontrara imagem que quer subir para o servidor.

Envia a imagem selecionada.

Figura 11:

Inicialmente, sugerimos que crie uma pasta para colocar figuras. Sendo assim, nocampo ao lado do botao Criar pasta, escreva (por exemplo) figuras e aperte o botaoao lado. Uma pasta com esse nome sera criada. Clique sobre a pasta e entao estaradentro da pasta para onde devera ir a figura.

Estando dentro da pasta criada, podera criar outras pastas, subir arquivos paraesta pasta ou retornar um nıvel. Para esta ultima opcao basta clicar na pastinha comuma pequena seta preta para cima e dois pontos ao lado.

Exercıcio

Volte um nıvel, clique na caixa de selecao e logo apos no botao Mudar o nome. Najanela do Navegador de arquivos aparecera a opcao de edicao. Modifique o nome

6

da pasta e clique no botao Renomear. A pasta ficou com o novo nome? Mude onome dela novamente para figuras. Vale observar o seguinte: se houver algum linkapontando para um arquivo dentro de uma pasta e voce modifica o nome dela o linkpassara a ser quebrado, ou seja, nao encontra o alvo (destino, arquivo etc).

Entre novamente na pasta figuras, clique no botao Arquivo.... Uma nova janelaaparecera. Esta janela permitira que voce navegue ate onde esta a imagem que desejasubir clique sobre ela e se necessario no botao Abrir. O sistema ira preencher o campocom o endereco da imagem em seu computador. Feito isto, basta clicar em Enviar.

Figura 12:

Observe que aparecera uma caixa de selecao e ao lado o nome do arquivo que subiuna cor azul como um link encontrado em paginas da Web. Se clicar sobre o nomeda figura automaticamente o campo URL da imagem sera preenchido cabendo avoce apenas entrar com o Texto alternativo (aquele que aparece quando voce pousao mouse sobre a imagem).Observe que o Moodle tambem mostra a figura que querinserir no campo Ver do lado direito.

Modifique o Layout, Distancia e Tamanho a seu gosto como discutido anterior-mente. Quando clicar no botao OK a imagem sera inserida em seu texto. Simples,nao?

7