Personalização da Interface dos OAs produzidos pela

Ferramenta de Autoria elearning xhtml editor

Alessandra Rodrigues
Valéria Machado

Profª Liane Tarouco

Orientadora
 PROBLEMÁTICA
• Produção de Materiais Educacionais
Digitais através de Ferramentas de
Autoria
– Escolha da ferramenta: elearning XHTML editor
• Dificuldades encontradas no momento da
produção:
– Padrões de interfaces (ícones, cores, navegação)
pré-estabelecidos na ferramenta, sem a possibilidade
de alteração desses elementos.
 SOLUÇÕES POSSÍVEIS IDEALIZADAS

• Programar um módulo para o eXe que

possibilite a importação de novos
templates
• Edição dos templates existentes através
da própria ferramenta
• Construção de um novo template através
da própria ferramenta
 SOLUÇÃO ENCONTRADA (PALIATIVA)

• Construção de um novo template a partir

da edição de um template existente, de
forma manual.
A Solução Encontrada
passo-a-passo
1º Passo: Criar uma pasta
para o novo estilo
 ESTILOS

• Copiar a pasta de um estilo existente do eXe

• Colar na mesma pasta com o nome do novo estilo

Copiamos, colamos e
renomeamos a pasta Garden
para IF Sul
2º Passo: Selecionando o
conjunto de cores do novo
template
 CORES

Esta ferramenta permite

identificar as cores usadas
em um site específico.
CORES
KULER
3º Passo: Editando os
arquivos css
Arquivo CSS para
alteração da interface
dos idevices e
da janela principal

Arquivo CSS responsável

pela formatação do menu
de navegação
 content.css
body {
background: #FFFFFF; !ALTERA A COR DE FUNDO DA PÁGINA
}

a { color: #CC0000; !COR DOS LINKS NO TEXTO

text-decoration: none;
border: 0;

p#nodeTitle {
color: #6EA028; !COR DO TÍTULO INICIO
font-size: 20px;
font-weight: bolder;
}

div#nodeDecoration {
padding: 2px;
border-bottom: 2px solid #FF0000; !É A LINHA ABAIXO DO TÍTULO.
.emphasis1 {
background-color: #FAFFE6; !ALTERA A COR DE FUNDO DOS IDEVICES
padding-left: 10px;
border: 1px solid #FF0000; !É A BORDA DOS IDEVICES.
margin: 10px;

.iDeviceTitle {
color: #6EA028; !TROCA A COR DOS TÍTULOS DOS IDEVICES.
font-size: medium;
font-family: Arial, Helvetica, sans-serif;
 nav.css
#navcontainer {
width: 169px;
float: left;
margin-top: 40px; ! AUMENTA ESPAÇO DO MENU PARA O CABEÇALHO
}

#navcontainer a {
display: block;
padding: 6px 0 6px 6px; !ALTERA OS ESPAÇOS DO MENU LATERAL
background-color: #FFF;
border-bottom: 1px solid #CCC;
width: 163px;
}

#navcontainer a:link, #navlist a:visited {

color: #96852C; !MUDA A COR DO LINK DA BARRA DE NAVEGAÇÃO
text-decoration: none;
}

#navcontainer a:hover {
color: #51778A; !MUDA A COR DO LINK QUANDO PASSA O MOUSE
background-color: #FFEDBF;
}
CABEÇALHO