Esse conteúdo foi desenvolvido para ser melhor visualizado em navegadores modernos.

Para um melhor aproveitamento, por favor atualize o seu navegador ou utilize o Chrome, Firefox ou Edge atualizado.

Elementos de diagramação

A construção dos elementos do editor foi pensada levando em consideração a acessibilidade e a sua compatibilidade com leitores de tela. Por conta disso, os elementos disponíveis devem ser utilizados pela sua semântica e não pela aparência.

Parágrafo

Tem como propriedade os tipos:

Parágrafo comum.
Parágrafo "lead" – o parágrafo ganha uma formatação diferente a fim de criar textos em destaque.
Conteúdo para acessibilidade – o conteúdo deste parágrafo não será visível na tela final (preview ou exportação), porém será "lido" por meio de programas de leitura de tela.

Dentro do elemento parágrafo, os textos podem ser formatados com as seguintes propriedades:

	Abreviação: utilizado em Siglas. Permite a inclusão do termo por extenso na sua propriedade. Ao incluir o texto por extenso, é criado um sublinhado na sigla selecionada e, ao passar o mouse, é exibido o termo informado na propriedade em uma pop-up.
	Anexo: adiciona link para arquivo anexo. Ao selecionar esta opção, clique em escolher arquivo no menu lateral esquerdo. Você poderá escolher fazer o upload de um arquivo ou escolher algum que já esteja disponível.
	Autor ou fonte: utilizado para inserir nome de um autor ou fonte. Cria um elemento <cite>. O elemento HTML representa uma referência a um trabalho artístico. Deve incluir o título do trabalho ou uma URL de referência, que pode ser em uma forma abreviada de acordo com as convenções usadas para a adição dos metadados de citação.
	Código: exibe formatação em padrão da web para textos de códigos.
	Destacado: cria um destaque visual no texto selecionado.
	Ênfase: destaca o texto com negrito. Leitores de tela darão uma ênfase na leitura de textos com essa propriedade.
	Figura de linguagem: destaca o texto com itálico.
	Grifo: destaca o texto com um sublinhado.
	Língua estrangeira: destaca o texto com itálico, porém com atributo de escolha do idioma. Os leitores de tela farão a leitura do texto destacado com o idioma escolhido.
	Tachado: cria uma linha que transpassa o meio do texto.
	Tecla do teclado: exibe formatação em padrão da web para teclas do teclado.
	Sobrescrito: reduz o tamanho do texto e desloca um pouco para cima da linha.
	Subscrito: reduz o tamanho do texto e desloca um pouco para baixo da linha.
	*Link: cria um link* para página externa. A selecionar esta opção, será necessário informar o endereço do site pretendido.

Tooltip: cria um hipertexto para textos curtos e sem formatação que são cadastrados nas propriedades do componente. Pode-se cadastrar título e descrição ou apenas a descrição. O tamanho é fixo e é definido pelo render escolhido na configuração da disciplina.

	*Pop up*cria um hipertexto para bloco de conteúdo em texto com formatação e imagens. O hipertexto pode ser endereçado para uma url ou para um conteúdo extra (Id) configurado em propriedades. O tamanho da janela também pode ser configurado na propriedade do componente.
	Autor ou fonte: Atribui uma propriedade de autoria de citação para o texto do parágrafo. A apresentação gráfica deste elemento é controlada pelo render escolhido para a disciplina.
	Nota de revisão: Destaca o texto em vermelho no texto selecionado na página de edição. Este recurso é utilizado para adicionar comentários ou informações úteis para determinados pontos da tela e que servem apenas como orientação para a confecção da mesma. Os textos classificados como "nota de revisão" não são apresentados no preview e na exportação.
	Imagem: Adiciona uma imagem dentro de um parágrafo.

Título

Pode ser classificado com principal, secundário ou terciário a fim de criar uma hierarquia de títulos. Possui como opções de formatação a ênfase, grifo, língua estrangeira, abreviação e nota de revisão.

Destaque

O destaque adiciona um bloco para textos em destaque. No tipo de destaque, é possível indicar um bloco de destaque ou um bloco de citação.

Bloco HTML

Permite a adição direta de códigos HTML que são interpretados pelo navegador.

Lista comum

Adiciona à página um componente de lista com um item de lista já adicionado. Tem como propriedade o estilo de marcador (bullets, números, letras etc.). Possibilita a adição de novos itens de lista dentro dele.

Item de lista: são adicionados apenas dentro de componentes de lista e permite a adição de parágrafo ou novo componente de lista dentro deles.

Tag

Cria um bloco com características de um rótulo, no qual podem ser configuradas algumas propriedades. São elas:

Estilo: As propriedades de estilo alteram as cores de borda e fundo do bloco, além de adicionar ícone relacionado ao estilo escolhido. As características são dadas pelo Render escolhido na configuração da disciplina.
Alinhamento: posiciona o Tag à esquerda, ao centro ou à direita da coluna em que ele está imerso.
Tipo: pode ser de quatro tipos (Texto, Link externo, Link anexo e Link pop up). Os três últimos dão características de botão ao Tag.

Além disso, é possível indicar se o Tag será do tipo complementar ou não.

Quando um Tag funcionar como botão para um Link externo ou Link pop up, é necessário indicar no campo "url ou id" o endereço da página ou o "id" da seção, configurado na tela de conteúdos extras.

Quando uma Tag funcionar como botão para um Link anexo, é necessário clicar no botão "escolher arquivo".

Ao clicar em "escolher arquivo", você será redirecionado para a tela de anexos. Clique em "Inserir Arquivo". Em seguida, clique no botão "Escolher" para "linkar" o arquivo ao Tag.

Tabela

Adiciona uma tabela com 3 colunas, 3 linhas, cabeçalho e rodapé. A retirada do cabeçalho e do rodapé pode ser feita desmarcando essa opção em propriedades.

Além disso, é possível modificar configurações de linhas e fundo da tabela.

Existe a possibilidade de configurar cada célula da tabela. Para isso, selecione a célula desejada para visualizar as propriedades de células.

Para excluir uma linha ou uma coluna, também é necessário selecionar uma célula.

Componente de lista

Adiciona um componente que lista itens de forma interativa. Cada item é chamado de slide e pode conter um título e um conteúdo diagramado (texto e/ou imagem) qualquer.

A exibição do componente pode ser configurada em forma de accordion, carrossel, abas, pills ou etapas escolhida nas propriedades do componente de lista.

O componente, por padrão, é adicionado com três slides contendo um título e uma linha com coluna e parágrafo. Para adicionar um novo componente dentro do slide, selecione o bloco do slide e adicione uma linha.

Para adicionar um slide, clique no bloco do componente de liste e clique em "slide".

Para excluir um slide, selecione-o e clique na lixeira na parte superior do menu à esquerda.

Questionário

Adiciona um bloco que questionário à tela. Para que esse componente funcione é necessário carregar o arquivo .xml com as informações do questionário. Não é possível criar um questionário sem o arquivo .xml.

Minicards

Adiciona um componente interativo, que exibe "cartões" animados com uma face visível e outro oculta. A face oculta é exibida com a interação do usuário. A exibição dos Minicards pode ser configurada em Flip, Slidedown e Iris.

Inicialmente, o componente é adicionado com um cartão. Para adicionar mais cartões, selecione o bloco de minicards e clique em adicionar minicard-item.

Dentro de cada item do Minicard, é possível editar a face visível e a face oculta (escondido).

Clique no item que deseja editar e adicione os elementos do Minicard.

Observe o exemplo a seguir, em que a face visível é constituída por uma imagem e a face oculta contém um parágrafo de texto.

Áudio com descrição

Adiciona um player de áudio à tela com a opção de selecionar um arquivo em formato .mp3 e possibilidade de adicionar uma imagem com descrição para acessibilidade.

Imagem com descrição

Adiciona uma imagem com campo para descrição para acessibilidade. O que define o tamanho da imagem é a largura configurada na coluna em que ela está inserida.

Para inserir uma imagem, clique no campo "imagem" dentro de "elemento de mídia". Em seguida, no menu lateral à esquerda, clique em "Escolher arquivo".

Você será redirecionado para a tela de anexos, em que poderá selecionar inserir um arquivo já existente na disciplina ou na tela, ou escolher um novo. Deverá ser realizado o mesmo processo apresentado ao inserir um link anexo em um Tag.

Gráfico vetorial com descrição

Adiciona componente de imagem vetorial. Para que o componente funcione, é necessário um arquivo de imagem vetorial (.svg), um de códigos (.js) e um de estilo (.css).

Infográfico interativo

Adiciona espaço para inclusão de infográfico interativo. Para que o componente funcione, é necessário um arquivo de template (.svg, .html ou .xhtml), um de códigos (.js), um de estilo (.css) e um de .xml.

Vídeo com descrição

Adiciona um player de vídeo à tela com a opção de selecionar um arquivo em formato .mp4 e possibilidade de adicionar uma descrição para acessibilidade.

Ao inserir o elemento "vídeo com descrição", clique em "elemento de mídia" e, em seguida, em "vídeo". No campo "endereço", indique o endereço do vídeo.

O player default para as videoaulas é: player.vimeo.com/video/165579271.

Para inserir um vídeo externo, é necessário inserir no campo "endereço" o código para incorporação do vídeo.

Observe, no exemplo a seguir, como incorporar um vídeo do YouTube.

Acesse, em seu navegador, o link do vídeo que deseja inserir no elemento e clique em "compartilhar".

No pop up, clique em "incorporar".

No código exibido, copie apenas o endereço do vídeo.

No Editor de Conteúdo, insira o link no campo "endereço".

Animação com legenda

Componente que permite a inclusão de animações em canvas. Para que o componente funcione, é necessário adicionar um arquivo de script (.js) e informar um nome de função e largura e altura na animação.