Profª Liane Tarouco Orientadora Personalização da Interface dos OAs produzidos pela Ferramenta de...

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