profª liane tarouco orientadora personalização da interface dos oas produzidos pela ferramenta de...
TRANSCRIPT
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