Profª Liane TaroucoOrientadora

Personalização da Interface dos OAs produzidos pelaFerramenta de Autoria elearning xhtml editor

Alessandra RodriguesValéria Machado

• 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.

PROBLEMÁTICA

• 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ÇÕES POSSÍVEIS IDEALIZADAS

• Construção de um novo template a partir da edição de um template existente, de forma manual.

SOLUÇÃO ENCONTRADA (PALIATIVA)

A Solução Encontradapasso-a-passo

1º Passo: Criar uma pasta para o novo estilo

Copiamos, colamos e renomeamos a pasta Garden

para IF Sul

ESTILOS

• Copiar a pasta de um estilo existente do eXe• Colar na mesma pasta com o nome do novo estilo

2º Passo: Selecionando o conjunto de cores do novo

template

Esta ferramenta permite identificar as cores usadas

em um site específico.

CORES

CORES

KULER

3º Passo: Editando os arquivos css

Arquivo CSS paraalteração da interface dos idevices e da janela principal

Arquivo CSS responsável pela formatação do menu de navegação

content.cssbody { 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