06 Tutorial - Editor Html

Prévia do material em texto

Tutorial de utilização do editor HTML
Neste tutorial, você vai entender como utilizar o editor HTML na plataforma 
Moodle.
Quando já logado(a) na disciplina de interesse na plataforma Moodle da 
Fundação CECIERJ/Consórcio CEDERJ, siga os passos abaixo e, em caso de 
dúvida, deixe sua pergunta na sala de tutoria.
Utilizaremos aqui a disciplina Oficina como exemplo. Veja:
Figura 1 - Sala de aula virtual após login.
O Editor HTML será utilizado por você em diversos locais da plataforma
Moodle/CEDERJ sempre que precisar escrever ou publicar algum material.
Ele é uma ferramenta que permite construir uma publicação em HTML
sem precisar conhecer esse código. Então, vamos conhecer como utilizar
esse editor? Clique em um dos fóruns da sua disciplina.
01
Como exemplo, vamos postar uma mensagem em um dos fóruns da
disciplina Oficina, utilizando o editor HTML para escrever uma
mensagem no fórum. Para isso, clique em responder abaixo de uma
mensagem.
Figura 2 – Exemplo da página de fórum. 
Figura 3 - Exemplo de editor HTML.
Dentro do editor HTML, você encontra as ferramentas de edição
normais de qualquer editor de texto, tais como família da fonte,
tamanho da fonte, formatação, negrito, itálico, sublinhado,
alinhado, etc. Vamos destacar, a seguir, as mais úteis para você.
03
02
Para inserir uma imagem, clique no ícone Inserir/editar imagem.
Figura 5 - Janela para inserir/editar imagem.
Figura 4 - Ícone para inserir/editar imagem no editor HTML. 
Clicando nesse botão, você abrirá a tela abaixo. Nessa janela, você
tem o link “Encontrar ou enviar uma imagem ...”.
05
04
Figura 6 - Janela File picker. Anexar um arquivo.
Figura 7 - Janela para inserir/editar imagem com uma imagem inserida.
Clicando nesse link, abrirá a janela do File picker, na qual você terá
a opção de inserir imagens já arquivadas dentro da plataforma ou de
fora dela, de sites como Picasa e Flickr. Caso queira subir um novo
arquivo, clique em Anexar um arquivo e, depois, em Selecionar
arquivo, para incluir uma imagem do seu arquivo. Dê um nome para
o seu arquivo em Salvar como e clique em Enviar este arquivo.
Você voltará para a janela Inserir/editar imagem; escreva a
Descrição da imagem e clique em Inserir.
07
06
Clique agora em Enviar mensagem ao fórum, para finalizar o
processo de inclusão da imagem.
Figura 8 – Finalização da inserção de imagem pelo editor HTML.
Figura 9 - Ícone Moodle Mídia para inclusão de vídeos. 
Agora, para inserir um vídeo, som ou applet, clique no botão Moodle
Mídia.
09
08
10 Na janela Inserir/Editar mídia, clique em “Encontrar ou enviar um
som, vídeo ou applet ...” e, depois, em Inserir.
Figura 10 – Janela para inserir/editar mídia.
Figura 11 – Janela File picker para inserir um vídeo.
11
Na janela do File picker, você pode inserir vídeos já incluídos em arquivos
do servidor ou buscar vídeos em sites externos, como o do You Tube.
Para isso, clique em You Tube, escreva o nome ou assunto que deseja
em Buscar vídeos e clique no botão Buscar. Abrirão várias opções de
vídeo; clique no vídeo de seu interesse.
Figura 12 - Janela File picker para anexar um vídeo.
12 Depois de escolher o vídeo, clique em Selecionar este arquivo.
13 O vídeo aparecerá na janela de inserir/editar mídia. Clique em Inserir.
Figura 13 - Janela de Inserir/ Editar mídia com um vídeo do You Tube incluído.
Figura 14 – Editor HTML com um link de vídeo incluso.
14 No editor HTML, aparecerá o link do You Tube. Clique em Enviar
mensagem ao Fórum, para finalizar a inclusão do vídeo.
15 Quando ele for publicado, o vídeo será incorporado ao site do You Tube e
mostrado diretamente na local de postagem.
Fulano
Beltrano
Olá, meu nome é fulano e espero aprender muito com esse curso.
Abraços
Figura 15 – Publicação do vídeo no fórum.
16
17
Outra ferramenta importante do Editor HTML é a possibilidade de lincar
uma palavra ou uma imagem. Para fazer isso, selecione a palavra ou
imagem. Assim que você selecionar, os três ícones relacionados à criação
de links ficarão habilitados. Clique no primeiro ícone.
Figura 16 - Ícones relacionados à criação de links.
Figura 17 – Janela para Inserir/editar link.
Abrirá uma janela para você digitar um endereço ou selecionar o arquivo
que deseja lincar à palavra ou imagem. Agora, clique no ícone ao lado do
campo URL do link.
18
Abrirá a janela File picker, na qual você terá a opção de lincar arquivos
de diferentes locais. Para lincar um novo arquivo, você pode clicar em
Anexar um arquivo e em Selecionar arquivo. Dê o nome em Salvar
como e clique em Enviar este arquivo.
Figura 18 - Janela File picker para lincar um arquivo.
19
Com a janela File picker, é possível também anexar ou lincar arquivos
que estão armazenados na sua conta do Dropbox ou do Google Docs. Ao
clicar em uma dessas opções pela primeira vez, aparecerá o botão para
seu Login inicial.
Figura 19 - Janela File picker para lincar um arquivo do Dropbox pela primeira vez.
20
Ao clicar nele, você será direcionado para o site do Dropbox, para fazer
seu login. Depois que fizer seu login pela primeira vez, o sistema vai
identificar automaticamente a sua conta, sem precisar se logar
novamente.
Figura 20 - Site do Dropbox para fazer o login.
21 Então, na próxima vez em que você clicar em dropdox no file picker, o
sistema irá listar todas as suas pastas e documentos que estão na sua
conta do dropbox.
Figura 21 – Acesso às pastas do dropbox depois do login.
22
23 Caso você não tenha ainda instalado esse aplicativo, aparecerá uma
janela de aviso; clique em Executar, para abrir o aplicativo.
Figura 23 – Janela de aviso para executar o aplicativo.
Figura 22 – Editor HTML - ícone inserir equação.
Com o editor HTML, você também pode usar fórmulas matemáticas de
duas formas. A primeira, é clicando no ícone Inserir equação.
24
25
Veja que há possibilidade de inserir diferentes notações matemáticas.
Para aprender mais, aproveite e explore esta ferramenta!
Figura 25 – Exemplos de uso do DragMath.
Figura 24 – Editor de equações DragMath com a área de edição demarcada em vermelho.
Na tela do DragMath, edite as suas equações. Você pode utilizar o
recurso de arrastar os ícones para a área de edição.
26 A segunda forma, é digitando código Latex (um robusto sistema de
edição matemática) no editor HTML. Na plataforma CEDERJ/Moodle,
comece e termine o código com dois cifrões, como no exemplo abaixo.
Figura 26 – Editor HTML com um código de fórmula Latex.
27 Após o envio da mensagem, a fórmula matemática aparecerá.
Figura 27 – Imagem da fórmula postada com código Latec.
28
Caso queira editar e colocar conteúdo diretamente no código HTML,
clique no ícone HTML. Abrirá uma nova janela em que você poderá
desenvolver o código ou colar um que já tenha utilizado outras vezes.
Figura 22 – Ícone para abrir janela de edição com códigos HTML.
29 Você pode utilizar o editor HTML configurando-o para ocupar toda a tela
do seu computador, facilitando assim sua visualização. Clique no ícone
Tela Inteira e veja que o editor aumentará de tamanho.
Figura 23 – Ícone Tela Inteira do editor HTML.
Figura 28 - Editor HTML.
Veja que existem vários recursos e funcionalidades para edição da sua
publicação, usando o editor HTML. Explore suas funções e recursos, pois
quanto mais você dominar essa ferramenta, mais possibilidades você
terá de criar um ótimo layout na sua publicação.
30
	Slide Number 1
	Slide Number 2
	Slide Number 3
	Slide Number 4
	Slide Number 5
	Slide Number 6
	Slide Number 7
	Slide Number 8
	Slide Number 9
	Slide Number 10
	Slide Number 11
	Slide Number 12
	Slide Number 13
	Slide Number 14
	Slide Number 15
	Slide Number 16