plugin

Moderniza el diseño de tus aulas virtuales con Bootstrap

Actualizar el estilo o añadir nuevas funcionalidades a los recursos de tus aulas virtuales puede resultar muy sencillo. Tan solo necesitas copiar y pegar el diseño de Bootstrap que más te guste en el editor de texto de los recursos de tu aula virtual.

Bootstrap es un conjunto de estilos y componentes visuales listos para usar que permite mejorar el aspecto de cualquier página web sin necesidad de escribir CSS desde cero.

En Aules, Bootstrap ya está incluido en el tema visual de la plataforma, lo que significa que sus clases están disponibles directamente en cualquier recurso que permita editar HTML: páginas, etiquetas, secciones del curso, etc.

A continuación, algunos ejemplos de estilos y componentes con el código para que los puedas copiar y utilizar en tus recursos:

Código fuente:

<!-- Información general (gris oscuro) -->
<div class="alert alert-dark" role="alert"><strong>Información general</strong>
</div>
<!-- Aviso de tarea o plazo (amarillo) -->
<div class="alert alert-warning"><strong>¡Atención!</strong> La entrega de esta
  tarea es el viernes.</div>
<!-- Información general (azul) -->
<div class="alert alert-info">Recuerda revisar los materiales antes de la clase.
</div>
<!-- Confirmación o logro (verde) -->
<div class="alert alert-success">¡Unidad completada! Ya puedes pasar al
  siguiente bloque.</div>
<!-- Aviso crítico (rojo) -->
<div class="alert alert-danger">Esta actividad es <strong>obligatoria</strong>
  para superar el módulo.</div>

Código fuente:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      <h5>Teoría</h5>
      <p>Enlace a los apuntes del tema 1.</p>
    </div>
    <div class="col-md-6">
      <h5>Práctica</h5>
      <p>Ejercicios para entregar esta semana.</p>
    </div>
  </div>
</div>

Código fuente:

<div class="card mb-3" style="border-left: 4px solid #6F42C1;">
  <div class="card-body">
    <h5 class="card-title">Unidad 2: La célula</h5>
    <p class="card-text">Estudiaremos la estructura celular, los orgánulos y los
      procesos de división celular.</p>
    <a class="btn btn-outline-primary btn-sm" href="#">Ver contenidos</a>
  </div>
</div>

Y un ejemplo del estilo «Cards». Solo tienes que reemplazar el src de la imagen, el título, el texto y el enlace del botón.

Código fuente:

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Código fuente:

<!-- CABECERA DEL BLOQUE -->
<div class="p-3 mb-4 rounded"
  style="background: #EDE7F6; border-left: 5px solid #6F42C1;">
  <h4 style="color: #3d1d6e; margin: 0;">📖 Bloque 1 — Título del tema</h4>
</div>
<!-- AVISO IMPORTANTE -->
<div class="alert alert-warning"><strong>Recuerda:</strong> La entrega es el
  viernes a las 23:59 h.</div>
<!-- DOS COLUMNAS: teoría y práctica -->
<div class="container-fluid px-0">
  <div class="row">
    <div class="col-md-6">
      <div class="card h-100 shadow-sm">
        <div class="card-body">
          <h5 class="card-title">📘 Teoría</h5>
          <p class="card-text">Apuntes y materiales de lectura.</p>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card h-100 shadow-sm">
        <div class="card-body">
          <h5 class="card-title">✏️ Práctica</h5>
          <p class="card-text">Ejercicios y actividades de esta semana.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- SEPARADOR -->
<hr class="my-4">
<p class="text-center text-muted small">— Fin del Bloque 1 —</p>
📌📄  PDF:
En este documento encontrarás información más detallada sobre el uso de Bootstrap en Aules y la solución de problemas frecuentes. ¡Click aquí!

🔗 Enlace:
En la web de Bootstrap puedes encontrar muchos ejemplos más: https://getbootstrap.com/docs/

 

Plugin JSXGraph

JSXGraph es una librería JavaScript que permite insertar construcciones geométricas interactivas, trazar funciones matemáticas, generar gráficos y visualizar datos en cualquier recurso de texto (páginas, etiquetas, preguntas de cuestionario, etc.), sin necesidad de instalar ningún software adicional.

📌  Nota técnica: Evitar el editor TinyMCE y usar preferiblemente el editor de texto plano para evitar que Moodle modifique el código al guardar.

💡  Consejo de uso
Aunque su uso más habitual es en Matemáticas y Física, JSXGraph puede emplearse en cualquier área donde se necesite comunicar información de forma gráfica e interactiva.
Con este modelo interactivo los parámetros a, b, c se pueden cambiar arrastrando los deslizadores.

El código utilizado se especifica a continuación:

<jsxgraph width="500" height="500" box="mybox"> 

JXG.Options.slider.snapValues = [-5, -2, -1, 0, 1, 2, 5];
JXG.Options.slider.snapValueDistance = 0.2;

const board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-10, 10, 10, -10], axis: true });

var a = board.create('slider', [[2, -5], [7, -5], [-5, 1, 5]], { name: 'a' });
var b = board.create('slider', [[2, -6], [7, -6], [-5, 0, 5]], { name: 'b' });
var c = board.create('slider', [[2, -7], [7, -7], [-5, 0, 5]], { name: 'c' });

var f = board.create('functiongraph', [(x) => a.Value() * x * x + b.Value() * x + c.Value()]);

var txt = board.create('text', [-9, -5,
       () => JXG.Math.Numerics.generatePolynomialTerm([c.Value(), b.Value(), a.Value()], 2, 'x', 2)
], { fontSize: 18 });
 
</jsxgraph> 

💡 Consejo de productividad
Se tienen a disposición ejemplos exportables listos para pegar en Moodle, lo que permite reutilizar construcciones sin necesidad de escribir el código desde cero.
🔗 Enlace:
Biblioteca de ejemplos exportables: https://jsxgraph.org/share
💡¿Sabías que puedes combinar JSXGraph y STACK en Aules?💡
    Puedes crear preguntas matemáticas interactivas donde el estudiante arrastra elementos en un gráfico y STACK evalúa su respuesta automáticamente.

📌📄  PDF:
En esta guía encontrarás información más detallada sobre el uso de JSXGraph en Aules, algunos ejemplos prácticos para que los puedas aplicar y la solución a algunos problemas frecuentes. ¡Click aquí!

Nuevo plugin de gamificación en Aules: El Cofre

¿Alguna vez has ganado un premio en un sorteo, has encontrado un billete olvidado en el bolsillo de un viejo abrigo o has recibido un vale para una comida gratis? ¡Pequeñas sorpresas que realmente alegran tu día! Los diseñadores de juegos incorporan sorpresas similares, y estos tesoros escondidos se pueden recoger, almacenar o intercambiar a medida que los jugadores avanzan a través de varios niveles.

Si este es el plugin que estabas esperando para gamificar tus cursos… ¡ya está disponible en Aules!

Para más información sobre su uso, sigue estos enlaces:

Próximamente dispondrás de información sobre el uso de este plugin en los manuales del curso «Formació Aules per a Docents» en el sabor Aules Docent.

Desactivación botón Teams en Aules

Por motivos técnicos se ha deshabilitado el botón que hay al editor Atto que permite, sin salir de Aules, iniciar sesión con las credenciales de la identidad digital para crear una nueva reunión de Teams y obtener el enlace a la reunión.

En su lugar, te rogamos que crees las reuniones desde la aplicación Teams (en esta guía tienes detalles de cómo hacerlo), o también desde el aplicación Outlook.

Visualización de actividades HotPotatoes en Aules

Varias incidencias comunicadas a gvaSAI nos han advertido de problemas a la hora de visualizar algunas actividades (por ejemplo elección múltiple) de HotPotatoes en Aules, llegando al punto de no poderlas realizar en absoluto.

Si bien el módulo que integra HotPotatoes en Aules presenta algunos problemas actualmente (no soporta la versión 7, que es la más reciente del programa HotPotatoes de Windows, por ejemplo), sí hemos podido comprobar que funciona correctamente con la versión 6.1.0.1 beta del programa HotPotatoes que viene incluida en el software de LliureX, siempre y cuando el archivo de la actividad que se suba a Aules sea el nativo del programa (extensión .JQZ, .JCL, etc.), en lugar de los que tienen la extensión .HTM y que se pueden visualizar directamente en el navegador web haciendo doble clic en el archivo.

Moderniza el diseño de tus aulas virtuales con Bootstrap

Actualizar el estilo o añadir nuevas funcionalidades a los recursos de tus aulas virtuales puede resultar muy sencillo. Tan solo necesitas copiar y pegar el diseño de Bootstrap que más te guste en el editor de texto de los recursos de tu aula vitrtual y guardarlo después.

Bootstrap es un framework de código abierto muy conocido y empleado en el diseño de multitud de sitios y aplicaciones web. Al ser en código abierto, podemos ver y utilizar sus diseños ya hechos de elementos web (una combinación de código HTML, CSS, etc) como botones, cards, mensajes de alerta, presentación de contenido en «pestañas», en carrusel, etc en nuestras páginas web o en este caso, en el editor de texto que tenemos disponible en los recursos de Aules.

Un ejemplo de cómo añadir botones con diferentes estilos que enlazan a diferentes URLs:

Estilos de botones para saltar a actividades o págines.
Bootstrap añadido en el editor de texto del recurso «enlace»

Ejemplo de tipos de mensaje con Bootstrap: aviso, alerta, importante, etc

Estilos para mensajes de aviso, alerta, etc
Estilo de Bootstrap añadido en el editor de texto del recurso «tarea»

Y un ejemplo del estilo «Cards»:

Bootstrap para añadir el estilo «cards» al recurso «etiqueta»

 

En la web de Bootstrap podéis encontrar muchos ejemplos más. Echad un vistazo!

https://getbootstrap.com/docs/

 

Ya puedes hacer uso del plugin «Availability-Language»

Actualmente hemos incorporado a Aules el plugin «Availability Language» que permite visibilizar los recursos de tu aula virtual en función del idioma seleccionado en la plataforma (valenciano, castellano, inglés o francés).

Podrás utilizar ya esta nueva funcionalidad añadiendo una restricción de acceso por idioma en el recurso que desees mostrar en función del idioma seleccionado.

Nota: Para apoder utilizar este plugin, el ajuste del curso «Administración del curso -> Editar ajustes -> Apariencia->Forzar Idioma», no debe estar activado («No forzar»).

Tienes más información de esta funcionalidad en:
https://moodle.org/plugins/availability_language

Instalación del plugin JSXGraph

Se ha procedido a la instalación del plugin JSXGraph. Se trata de una funcionalidad que permite desde el editor html crear diferentes figuras geométricas, trazar funciones y gráficos, insertar puntos y visualizar datos. Interesante, no sólo para profesores de matemáticas. A continuación mostramos un ejemplo sencillo para que el usuario observe la potencialidad de la herramienta:

El código utilizado se especifica a continuación y se pueden encontrar numerosos ejemplos y formación en la red:

<jsxgraph width=»500″ height=»500″ box=»mybox»>
(function() { var brd = JXG.JSXGraph.initBoard(‘mybox’, {boundingbox:[-5,5,5,-5], axis:true}); var p = brd.create(‘point’, [1,2]); var q = brd.create(‘point’, [2,2]); })();
</jsxgraph>

Avís de privacitat

Este lloc web utilitza només cookies tècniques necessàries per al seu funcionament. No s’emmagatzemen dades amb finalitats publicitàries ni es comparteixen amb tercers. S’utilitza analítica interna sense cookies, i només es recull la IP amb finalitats de seguretat.

Veure política de cookies