OpcionalUna de las "reglas de oro" de la arquitectura informacional es que el usuario debe estar en todo momento ubicado y saber su progreso.
Para eso, el menú de navegación tiene que tener un esquema claro y debe estar accesible en toda su extensión. Menús y submenús NO se pueden presentar colapsados.
La instrucción para que esto ocurra #siteNav .other-section{display:block}
ya se ha incluido en la hoja de estilos por lo que no hay que hacer nada.
No obstante, si tu tema es muy complejo y su estructura no te permite un menú con pocos niveles y no quieres dividir el tema, podrías presentarlo colapsado, aunque no es lo más aconsejable.
Para ello tienes que anular la instrucción anterior copiando esta sentencia <style>#siteNav .other-section{display:none}</style>
en Propiedades → Paquete → Pie de página.
En este caso y, puesto que eXeLeaning no muestra por defecto los subniveles 3, 4..., habría que incorporar el siguiente código. Este código muestra un signo "+ "para desplegar y un "-" para colapsar. Sirve de ayuda visual ya que eXeLearning no indica los subniveles hasta que haces click en el superior.
<style> #siteNav a.daddy:before{content:"+ "} #siteNav a.main-node:before{content:""} </style>
Usar con precaución Todas las clases y elementos comunes tienen unas características que son comunes en todos los proyectos y que están definidas en la hoja de estilos por lo que generalment no hay que hacer uso de este hack.
Si por una necesidad tienes que cambiar un elemento concreto en un tema, puedes modificar el archivo content.css del estilo y se es para una página concreta puedes emplear este script alojándolo en un iDevice APPLET DE JAVA que hay que situar el primero en la página
<script> $(function(){ //la siguiene instruccción selecciona una clase o un elemento //en este caso vamos a modificar el efecto acordeon $('.fx-accordion-title, .exe-accordion h2').css({ //sustituye lo anterior por lo que quieras // estos son los nuevos colores del acordeon 'background-color':'#ff0000', 'color':'#ffffff' }); }); </script>
Nuevo curso 2024-25El código que ves está incluido por defecto en el pie de página, por lo que cuando lo incluyas, ya no tendrás que hacer nada más.
Su misión es presentar desplegados solamente los iDevices de texto que no tienen título. De esta forma los titulados con PARA SABER MÁS, BIBLIOGRAFÍA, RESUMEN... y todos aquellos que quieras incorporar de objetivos, juegos, cuestionarios, etc. se verán plegados y habrá que pulsar en la cabecera para visualizarlos
Este código NO HACE FALTA instalarlo, ya está incluido.
Este script ahora colapsará todas las secciones iDevice_wrapper
, excepto las antiguas FreeTextIdevice
aquellas que son textIdevice
y no tienen la clase iDeviceTitle
<script> $(function(){ setTimeout(function(){ $(".iDevice_wrapper").each(function(){ if ((!$(this).hasClass("textIdevice") || ($(this).hasClass("textIdevice") && $(this).find(".iDeviceTitle").length)) && !$(this).hasClass("FreeTextIdevice")) { $(".toggle-idevice a", this).trigger("click"); } }); }, 200); }); </script>
Usar con precaución El tema debe presentarse lo más limpio posible. Se deben mantener plegados los elementos accesorios: objetivos, contenido adicional, bibliografía... El fin es mantener el contenido de la página web dentro del diseño visual robusto y no agobiar al lector.
Por defecto, los iDevices de Texto Libre se muestran extendidos y los demás colapsados (forma parte del código del pie de página que debes instalar). El resto de los iDevices muestran sólo el título. El usuario puede expandirlos o contraerlos a voluntad por medio de unos botones llamados toggles. Pero este comportamiento podemos modificarlo según nuestras necesidades
Los scripts que proporcionamos hay que cortarlos y pegarlos incluidos en: Propiedades → Paquete → Pie de página
Este código forma parte del "pie de página" que debes instalar antes de ponerte a trabajar. Así que no tienes que instalarlo, ya lo debes tener.
De todas formas lo incluimos aquí por si lo necesitas para editar un tema antiguo
<script> $(function(){ setTimeout(function(){ $(".iDevice_wrapper").each(function(){ if (!$(this).hasClass("FreeTextIdevice") ) $(".toggle-idevice a",this).trigger("click"); }); },200) }); </script>
Para incluir este código debes borrar el que ya tienes instalado (sólo extendía los de texto libre). Lo debes tener en el código del pie de página
Con este script se quedarán abiertos los iDevices con el contenido del tema (texto libre) y los de BIBLIOGRAFÍA, PARA SABER MÁS o RESUMEN (texto)
<script> $(function(){ setTimeout(function(){ $(".iDevice_wrapper").each(function(){ if (!$(this).hasClass("textIdevice") && !$(this).hasClass("FreeTextIdevice")) $(".toggle-idevice a",this).trigger("click"); }); },200) }); </script>
Este script sólo se utiliza cuando tenemos todos los iDevices desplegados (para ello hemos tenido que borrar en el pie de página el que viene por defecto) y queremos colapsar algunos
Hay que sustituir XX, XX, XXX... por el número id del iDevice, el cual podemos averiguar inspeccionando el código.
Se trata de un identificador numérico que otorga eXeLearning
<script type="text/javascript"> $(window).load(function(){ $.each([XX,XXX,XXX], function(index , value ) { $("p.toggle-idevice a").eq(value).click(); }) }); </script>
Si tienes problemas para localizar los números del iDevice, quizás te sea más sencillo cortar y pegar las etiquetas entera, separadas por comas
<script> $(function(){ $("#idXXX .toggle-idevice a,#idXXX .toggle-idevice a").trigger("click"); }); </script>
OpcionalLos scripts también pueden incluirse en un iDevice denominado APPLET DE JAVA que hay que situar el primero en la página.
Este iDevice no es visible por el usuario y sólo afecta al nodo que estemos visualizando (apartado, subapartado...) Es especialmente util para el script que sólo colapsa determinados iDevices localizados por el código de su id
Esta opción, con sus correspondientes scripts, es de uso restringido y sólo debe usarse para proyectos de eXeLearning particulares. La idea es crear una foto de cabecera diferente y que pueda variar en le resto de páginas o presentarse a modo de carrusel aleatorio. Se muestra aquí toda la documentación para efectuarlo.
La página de inicio de un proyecto eXeLearning es index.html y el resto de las páginas finalizan con .html
A partir de estas dos premisas, un código para mostrar cualquier elemento en la página de inicio y ocultarlo en el resto sería:
<script> $(function({ var path = window.location.pathname; if(!(path.endsWith("/index.html") || !path.endsWith(".html"))) { $('#emptyHeader').hide(); } }); </script>
También sirve para que no sea visible cualquier otro elemento: menú, pie... En ese caso hay que sustituir el identificador #emptyHeader
, por el de elemento que quieras ocultar
Solo se ve el resultado en la previsualización
Si lo que quieres se sustituir la imagen de la cabecera por otra imagen en la páginas que no sean index.html, tienes que tener en cuenta dos cosas:
Suponiendo que quieres que una imagen llamada nombre2.png que has añadido previamente a tu proyecto, se cargue en todas las páginas menos en la de inicio, el script quedaría
<script> window.addEventListener('DOMContentLoaded', function() { // Obtener el nombre del archivo actual var currentFile = window.location.pathname.split('/').pop(); // Verificar si el archivo actual no es "index.html" if (currentFile !== 'index.html') { // Obtener el elemento #emptyHeader var emptyHeader = document.getElementById('emptyHeader'); // Cambiar la propiedad background-image del estilo del elemento emptyHeader.style.backgroundImage = 'url(nombre2.png)'; // Cambiar la propiedad min-height del estilo del elemento emptyHeader.style.minHeight = '250px'; } }); </script>
Por último, mediante este código se presenta aleatoriamente una imagen de un conjunto de ellas en cada carga de página.
Hay que tener en cuenta que todas las imágenes deben estar colocadas en la carpeta de estilo.
<script> window.addEventListener('DOMContentLoaded', function() { // Array de imágenes var images = ['nombre1.png', 'nombre2.png', 'nombre3.png']; // Agrega arriba los nombres de tus imágenes // Obtener una imagen aleatoria del array var randomImage = images[Math.floor(Math.random() * images.length)]; // Obtener el elemento #emptyHeader var emptyHeader = document.getElementById('emptyHeader'); // Cambiar la propiedad background-image del estilo del elemento emptyHeader.style.backgroundImage = 'url(' + randomImage + ')'; }); </script>
Obsoleto para +2.9Es una pequeña adaptación para la BUA de la barra de navegación Batexego de Juan José de Haro (jjdeharo@gmail.com) que decidió cederla con una Creative Commons BY-SA 4.0. Puede ser flotante o fija y posibilita el cambio de letra, tamaño, traducción, lectura, etc. del material. Se debe incluir en la pestaña Propiedades → Paquete → Opciones avanzadas → Personalizar la sección HEAD
Hemos adaptado una interesante función de para todos nuestros materiales elaborados con eXeLearning. Se trata de una barra que se incluye en todas las páginas de los documentos y que supone un gran avance para mejorar la accesibilidad.
Este script ya está incluido en el código facilitado la plantilla para los temas nuevos, pero lo hemos incluido aquí por si lo precisas para los temas antigüos
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&display=swap" rel="stylesheet" type="text/css"> <link href="https://fonts.cdnfonts.com/css/opendyslexic" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" type="text/css"> <style> .z-index { z-index: 999; } .select-container { display: inline-block; position: relative; z-index: 999; } .font-button { padding: 8px 16px; border: 1px solid #b7dce1; border-radius: 5px; cursor: pointer; font-size: 14px; margin: 8px; text-align: center; text-decoration: none; background-color:#f1faee; color: #33455b; z-index: 999; } .fontButtonContainer { z-index: 999; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; /* establece el wrap para que los botones se distribuyan en varias líneas */ gap: 5px; /* ajusta el espacio entre los botones */ position: static; /* fija la barra de botones en la página: static para que aparezca en la parte superior, fixed para que quede flotando */ top: 40px; /* fija la barra de botones en la parte superior de la página */ left: 0; /* fija la barra de botones en el margen izquierdo */ right: 0; /* fija la barra de botones en el margen derecho */ margin: auto; /* centra la barra de botones horizontalmente */ background-color:#457B9D; } /* Estilo para el desplegable */ select { padding: 8px 4px; border: 1px solid #b7dce1; border-radius: 5px; cursor: pointer; font-size: 14px; margin: 6px; text-align: center; text-decoration: none; background-color: #f1faee; } select option { text-align: left; } </style> <script> // BatexeGo v3 Juan José de Haro // Define los textos que se ven en pantalla. Reemplazar el texto entre comillas // Textos del menú desplegable const defaultText = 'Parámetros por defecto:'; //Descripción de la opción por defecto const standardText = 'Fuente estándar'; // Fuente original del documento const dyslexicDesc = 'Dislexia:'; // Descripción de la opción OpenDyslexic const dyslexicText = 'OpenDyslexic'; const hyperlegibleDesc = 'Deficiencias visuales:'; // Descripción de la opción Atkinson Hyperlegible const hyperlegibleText = 'Atkinson Hyperlegible'; const highLegibilityDesc = 'Alta legibilidad:'; // Descripción de las opciones de alta legibilidad const opensansText = 'OpenSans'; const robotoText = 'Roboto'; const latoText = 'Lato'; const montserratText = 'Montserrat'; // Botones aumentar y disminuir fuente const increaseFontText = 'A+'; // Botón para incrementar la fuente const increaseFontTitle = 'Incrementa la fuente'; // Texto emergente al pasar el ratón const decreaseFontText = 'A-'; // Botón para reducir la fuente const decreaseFontTitle = 'Reduce la fuente'; // Texto emergente al pasar el ratón // Botón para traducir const translateText = '🌐'; // Texto para el botón de traducción de Google const translateTitle = 'Traduce la página'; // Texto emergente al pasar el ratón // Botón para leer / detener la lectura en voz alta let readText = 'Leer'; // Botón para leer en voz alta el contenido de la página const readTextTitle ='Lee en voz alta la selección o la página entera'; // Texto emergente al pasar el ratón const stopText = 'Detener'; // Texto del botón para detener la lectura const stopTextTitle = 'Detiene la lectura'; // Texto emergente al pasar el ratón // Botones para que los botones estén siempre visibles let floatingFix = 'Fijar'; // Texto del botón flotante cuando está sobre el texto let floatingFixTitle = 'Fija la barra de botones en la parte superior'; // Texto emergente al pasar el ratón let floatingFloat = 'Flotar'; //Texto del botón flotante cuando está fijo en la parte superior let floatingFloatTitle = 'La barra permanecerá siempre visible'; // Enlace +Info const infoText = '+Info'; // Texto del enlace +Info const infoTextLink = 'https://#'; // Destino del enlace de +Info // Fin readText = `${readText} (${document.documentElement.lang})`; //Se añade el idioma al botón Leer let originalFont; let currentFontSize; let originalFontSize; let isReading = false; let utterance = new SpeechSynthesisUtterance(); let googleTranslateWidgetVisible = localStorage.getItem('googleTranslateWidgetVisible'); function setFont(font) { document.body.style.fontFamily = font; localStorage.setItem('font', font); } function setFontSize(size) { currentFontSize = parseInt(window.getComputedStyle(document.body).getPropertyValue('font-size')); currentFontSize += size; document.body.style.fontSize = currentFontSize + 'px'; localStorage.setItem('fontSize', currentFontSize + 'px'); } function toggleGoogleTranslateWidget() { if (!googleTranslateWidgetVisible) { const script = document.createElement('script'); script.src = 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'; script.id = 'google-translate-script'; document.head.appendChild(script); const googleTranslateElement = document.createElement('div'); googleTranslateElement.id = 'google_translate_element'; googleTranslateElement.style.position = 'fixed'; googleTranslateElement.style.top = '0'; googleTranslateElement.style.right = '0'; googleTranslateElement.style.zIndex = '1000'; document.body.appendChild(googleTranslateElement); window.googleTranslateElementInit = function() { new google.translate.TranslateElement({pageLanguage: 'es', includedLanguages: 'es,ca,en,fr,eu,gl', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element'); }; googleTranslateWidgetVisible = true; } else { const script = document.getElementById('google-translate-script'); script.remove(); const googleTranslateElement = document.getElementById('google_translate_element'); googleTranslateElement.remove(); googleTranslateWidgetVisible = false; } localStorage.setItem('googleTranslateWidgetVisible',googleTranslateWidgetVisible); } document.addEventListener('DOMContentLoaded', () => { googleTranslateWidgetVisible = JSON.parse(localStorage.getItem('googleTranslateWidgetVisible')); if(googleTranslateWidgetVisible) { googleTranslateWidgetVisible = false; toggleGoogleTranslateWidget(); } originalFont = window.getComputedStyle(document.body).getPropertyValue('font-family'); localStorage.setItem('originalFont', originalFont); let font = localStorage.getItem('font'); if (!font) { font = originalFont; } document.body.style.fontFamily = font; let fontSize = localStorage.getItem('fontSize'); originalFontSize = window.getComputedStyle(document.body).getPropertyValue('font-size'); localStorage.setItem('originalFontSize', originalFontSize); if (!fontSize) { fontSize = originalFontSize localStorage.setItem('fontSize', fontSize); } document.body.style.fontSize = fontSize; const fontButtonContainer = document.createElement('div'); fontButtonContainer.classList.add('fontButtonContainer'); const selectContainer = document.createElement('div'); selectContainer.classList.add('select-container'); const select = document.createElement('select'); select.classList.add('z-index'); const standardOption = document.createElement('option'); standardOption.value = 'standard'; standardOption.text = standardText; const defaultFontOptGroup = document.createElement('optgroup'); defaultFontOptGroup.label = defaultText; defaultFontOptGroup.appendChild(standardOption); select.appendChild(defaultFontOptGroup); const dyslexicOption = document.createElement('option'); dyslexicOption.value = 'dyslexic'; dyslexicOption.text = dyslexicText; select.add(dyslexicOption); const dyslexicOptGroup = document.createElement('optgroup'); dyslexicOptGroup.label = dyslexicDesc; dyslexicOptGroup.appendChild(dyslexicOption); select.appendChild(dyslexicOptGroup); const hyperlegibleOption = document.createElement('option'); hyperlegibleOption.value = 'hyperlegible'; hyperlegibleOption.text = hyperlegibleText; select.add(hyperlegibleOption); const hyperlegibleOptGroup = document.createElement('optgroup'); hyperlegibleOptGroup.label = hyperlegibleDesc; hyperlegibleOptGroup.appendChild(hyperlegibleOption); select.appendChild(hyperlegibleOptGroup); const opensansOption = document.createElement('option'); opensansOption.value = 'Open Sans'; opensansOption.text = opensansText; select.add(opensansOption); const robotoOption = document.createElement('option'); robotoOption.value = 'Roboto'; robotoOption.text = robotoText; select.add(robotoOption); const latoOption = document.createElement('option'); latoOption.value = 'Lato'; latoOption.text = latoText; select.add(latoOption); const montserratOption = document.createElement('option'); montserratOption.value = 'Montserrat'; montserratOption.text = montserratText; select.add(montserratOption); const highLegibilityOptGroup = document.createElement('optgroup'); highLegibilityOptGroup.label = highLegibilityDesc; highLegibilityOptGroup.appendChild(latoOption); highLegibilityOptGroup.appendChild(montserratOption); highLegibilityOptGroup.appendChild(opensansOption); highLegibilityOptGroup.appendChild(robotoOption); select.appendChild(highLegibilityOptGroup); // Seleccionar la opción correspondiente al cargar la página if (font === originalFont) { // Nueva condición select.selectedIndex = 0; // Nueva línea } else if (font === 'OpenDyslexic') { select.selectedIndex = 1; } else if (font === 'Atkinson Hyperlegible') { select.selectedIndex = 2; } else if (font === 'Roboto') { select.selectedIndex = 6; } else if (font === 'Lato') { select.selectedIndex = 3; } else if (font === 'Open Sans') { select.selectedIndex = 5; } else if (font === 'Montserrat') { select.selectedIndex = 4; } select.addEventListener('change', () => { const font = select.value; if (font === 'standard') { setFont(originalFont); fontSize = originalFontSize; localStorage.setItem('fontSize', fontSize); document.body.style.fontSize = localStorage.getItem('originalFontSize'); } else if (font === 'dyslexic') { setFont('OpenDyslexic'); } else if (font === 'hyperlegible') { setFont('Atkinson Hyperlegible'); } else if (font === 'Open Sans') { setFont('Open Sans'); } else if (font === 'Roboto') { setFont('Roboto'); } else if (font === 'Lato') { setFont('Lato'); } else if (font === 'Montserrat') { setFont('Montserrat'); } }); selectContainer.appendChild(select); fontButtonContainer.appendChild(selectContainer); const increaseFontButton = document.createElement('button'); increaseFontButton.classList.add('font-button'); increaseFontButton.textContent = increaseFontText; increaseFontButton.setAttribute('title', increaseFontTitle); increaseFontButton.addEventListener('click', () => setFontSize(1)); fontButtonContainer.appendChild(increaseFontButton); const decreaseFontButton = document.createElement('button'); decreaseFontButton.classList.add('font-button'); decreaseFontButton.textContent = decreaseFontText; decreaseFontButton.setAttribute('title', decreaseFontTitle); decreaseFontButton.addEventListener('click', () => setFontSize(-1)); fontButtonContainer.appendChild(decreaseFontButton); const translateButton = document.createElement('button'); translateButton.classList.add('font-button'); translateButton.textContent = translateText; translateButton.setAttribute('title', translateTitle); translateButton.addEventListener('click', toggleGoogleTranslateWidget); fontButtonContainer.appendChild(translateButton); // Botón para leer en voz alta const readButton = document.createElement('button'); readButton.classList.add('font-button'); readButton.textContent = readText; readButton.setAttribute('title', readTextTitle); readButton.addEventListener('click', () => { let selectedText = window.getSelection().toString(); let text = ''; let lang = document.documentElement.lang; if (selectedText !== '') { text = selectedText; let selectedNode = window.getSelection().anchorNode; while (selectedNode && selectedNode.nodeType !== Node.ELEMENT_NODE) { selectedNode = selectedNode.parentNode; } if (selectedNode) { const selectedLang = selectedNode.getAttribute('lang'); if (selectedLang) { lang = selectedLang; } } } else { text = document.body.innerText; const bodyLang = document.body.getAttribute('lang'); if (bodyLang) { lang = bodyLang; } } utterance.lang = lang; utterance.text = text; if (!isReading) { isReading = true; readButton.textContent = `${stopText} (${lang})`; readButton.setAttribute('title', stopTextTitle); speechSynthesis.speak(utterance); } else { isReading = false; readButton.textContent = readText; readButton.setAttribute('title', readTextTitle); speechSynthesis.cancel(); } utterance.addEventListener('end', () => { isReading = false; readButton.textContent = readText; readButton.setAttribute('title', readTextTitle); }); }); fontButtonContainer.appendChild(readButton); // Botón para que la barra esté siempre visible const floatingButton = document.createElement('button'); floatingButton.classList.add('font-button'); floatingButton.textContent = floatingFloat; floatingButton.setAttribute('title', floatingFloatTitle); floatingButton.addEventListener('click', () => { if (floatingButton.textContent === floatingFix) { fontButtonContainer.style.position = 'static'; floatingButton.textContent = floatingFloat; floatingButton.setAttribute('title', floatingFloatTitle); localStorage.setItem('floatState', 'static'); } else { fontButtonContainer.style.position = 'fixed'; floatingButton.textContent = floatingFix; floatingButton.setAttribute('title', floatingFixTitle); localStorage.setItem('floatState', 'fixed'); } }); let floatState = localStorage.getItem('floatState'); if (!floatState) { floatState = 'static'; floatingButton.textContent = floatingFix; floatingButton.setAttribute('title', floatingFixTitle); } if (floatState === 'fixed') { fontButtonContainer.style.position = 'fixed'; floatingButton.textContent = floatingFix; floatingButton.setAttribute('title', floatingFixTitle); } else { fontButtonContainer.style.position = 'static'; floatingButton.textContent = floatingFloat; floatingButton.setAttribute('title', floatingFloatTitle); } localStorage.setItem('floatState', floatState); fontButtonContainer.appendChild(floatingButton); const infoLink = document.createElement('a'); infoLink.textContent = infoText; infoLink.href = infoTextLink; infoLink.target = '_blank'; infoLink.style.marginLeft = '8px'; infoLink.style.fontSize = '12px'; fontButtonContainer.appendChild(infoLink); infoLink.classList.add('z-index'); document.body.insertBefore(fontButtonContainer, document.body.firstChild); }); </script>
Si quieres saber más sobre trucos, códigos y contenido alternativo, échale un vistazo a HackeXe.
Se trata de un proyecto de Juan José de Haro que contiene código que amplía y mejora las posibilidades de eXeLearning.