![Page 1: Profª Liane Tarouco Orientadora Personalização da Interface dos OAs produzidos pela Ferramenta de Autoria elearning xhtml editor Alessandra Rodrigues Valéria](https://reader035.vdocuments.mx/reader035/viewer/2022070507/570638461a28abb8238f3025/html5/thumbnails/1.jpg)
Profª Liane TaroucoOrientadora
Personalização da Interface dos OAs produzidos pelaFerramenta de Autoria elearning xhtml editor
Alessandra RodriguesValéria Machado
![Page 2: Profª Liane Tarouco Orientadora Personalização da Interface dos OAs produzidos pela Ferramenta de Autoria elearning xhtml editor Alessandra Rodrigues Valéria](https://reader035.vdocuments.mx/reader035/viewer/2022070507/570638461a28abb8238f3025/html5/thumbnails/2.jpg)
• 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
![Page 3: Profª Liane Tarouco Orientadora Personalização da Interface dos OAs produzidos pela Ferramenta de Autoria elearning xhtml editor Alessandra Rodrigues Valéria](https://reader035.vdocuments.mx/reader035/viewer/2022070507/570638461a28abb8238f3025/html5/thumbnails/3.jpg)
• 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
![Page 4: Profª Liane Tarouco Orientadora Personalização da Interface dos OAs produzidos pela Ferramenta de Autoria elearning xhtml editor Alessandra Rodrigues Valéria](https://reader035.vdocuments.mx/reader035/viewer/2022070507/570638461a28abb8238f3025/html5/thumbnails/4.jpg)
• Construção de um novo template a partir da edição de um template existente, de forma manual.
SOLUÇÃO ENCONTRADA (PALIATIVA)
![Page 5: Profª Liane Tarouco Orientadora Personalização da Interface dos OAs produzidos pela Ferramenta de Autoria elearning xhtml editor Alessandra Rodrigues Valéria](https://reader035.vdocuments.mx/reader035/viewer/2022070507/570638461a28abb8238f3025/html5/thumbnails/5.jpg)
A Solução Encontradapasso-a-passo
![Page 6: Profª Liane Tarouco Orientadora Personalização da Interface dos OAs produzidos pela Ferramenta de Autoria elearning xhtml editor Alessandra Rodrigues Valéria](https://reader035.vdocuments.mx/reader035/viewer/2022070507/570638461a28abb8238f3025/html5/thumbnails/6.jpg)
1º Passo: Criar uma pasta para o novo estilo
![Page 7: Profª Liane Tarouco Orientadora Personalização da Interface dos OAs produzidos pela Ferramenta de Autoria elearning xhtml editor Alessandra Rodrigues Valéria](https://reader035.vdocuments.mx/reader035/viewer/2022070507/570638461a28abb8238f3025/html5/thumbnails/7.jpg)
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
![Page 8: Profª Liane Tarouco Orientadora Personalização da Interface dos OAs produzidos pela Ferramenta de Autoria elearning xhtml editor Alessandra Rodrigues Valéria](https://reader035.vdocuments.mx/reader035/viewer/2022070507/570638461a28abb8238f3025/html5/thumbnails/8.jpg)
2º Passo: Selecionando o conjunto de cores do novo
template
![Page 9: Profª Liane Tarouco Orientadora Personalização da Interface dos OAs produzidos pela Ferramenta de Autoria elearning xhtml editor Alessandra Rodrigues Valéria](https://reader035.vdocuments.mx/reader035/viewer/2022070507/570638461a28abb8238f3025/html5/thumbnails/9.jpg)
Esta ferramenta permite identificar as cores usadas
em um site específico.
CORES
![Page 10: Profª Liane Tarouco Orientadora Personalização da Interface dos OAs produzidos pela Ferramenta de Autoria elearning xhtml editor Alessandra Rodrigues Valéria](https://reader035.vdocuments.mx/reader035/viewer/2022070507/570638461a28abb8238f3025/html5/thumbnails/10.jpg)
CORES
![Page 11: Profª Liane Tarouco Orientadora Personalização da Interface dos OAs produzidos pela Ferramenta de Autoria elearning xhtml editor Alessandra Rodrigues Valéria](https://reader035.vdocuments.mx/reader035/viewer/2022070507/570638461a28abb8238f3025/html5/thumbnails/11.jpg)
KULER
![Page 12: Profª Liane Tarouco Orientadora Personalização da Interface dos OAs produzidos pela Ferramenta de Autoria elearning xhtml editor Alessandra Rodrigues Valéria](https://reader035.vdocuments.mx/reader035/viewer/2022070507/570638461a28abb8238f3025/html5/thumbnails/12.jpg)
3º Passo: Editando os arquivos css
![Page 13: Profª Liane Tarouco Orientadora Personalização da Interface dos OAs produzidos pela Ferramenta de Autoria elearning xhtml editor Alessandra Rodrigues Valéria](https://reader035.vdocuments.mx/reader035/viewer/2022070507/570638461a28abb8238f3025/html5/thumbnails/13.jpg)
Arquivo CSS paraalteração da interface dos idevices e da janela principal
Arquivo CSS responsável pela formatação do menu de navegação
![Page 14: Profª Liane Tarouco Orientadora Personalização da Interface dos OAs produzidos pela Ferramenta de Autoria elearning xhtml editor Alessandra Rodrigues Valéria](https://reader035.vdocuments.mx/reader035/viewer/2022070507/570638461a28abb8238f3025/html5/thumbnails/14.jpg)
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;
![Page 15: Profª Liane Tarouco Orientadora Personalização da Interface dos OAs produzidos pela Ferramenta de Autoria elearning xhtml editor Alessandra Rodrigues Valéria](https://reader035.vdocuments.mx/reader035/viewer/2022070507/570638461a28abb8238f3025/html5/thumbnails/15.jpg)
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; }
![Page 16: Profª Liane Tarouco Orientadora Personalização da Interface dos OAs produzidos pela Ferramenta de Autoria elearning xhtml editor Alessandra Rodrigues Valéria](https://reader035.vdocuments.mx/reader035/viewer/2022070507/570638461a28abb8238f3025/html5/thumbnails/16.jpg)
CABEÇALHO
![Page 17: Profª Liane Tarouco Orientadora Personalização da Interface dos OAs produzidos pela Ferramenta de Autoria elearning xhtml editor Alessandra Rodrigues Valéria](https://reader035.vdocuments.mx/reader035/viewer/2022070507/570638461a28abb8238f3025/html5/thumbnails/17.jpg)