Section outline

  • Dale vida a tus aulas con componentes visuales

    Accedé a una biblioteca de componentes HTML listos para incorporar en Moodle.


    Carteles informativos, tarjetas temáticas y otros elementos visuales que mejoran la navegación y la comunicación en tus aulas.

    Ilustración decorativa de componentes visuales en Moodle
    • Información importante

      A continuación encontrarán una selección de componentes de HTML, listos para ser incorporados en el curso de cada espacio curricular.

      Allí podrán acceder a los siguientes elementos visuales:

      • Tarjeta docente
      • Alertas primarias
      • Títulos
      • Subtítulos

      En cada sección al final tienen instrucciones detalladas sobre como copiar el código e introducirlo en su curso.

      Estos componentes enriquecen la experiencia de los estudiantes, mejorando la organización, la comunicación y la estética del entorno virtual.

      • Collapse Expand

        Tarjeta Docente

        • Con esta tarjeta podrá agregar información de contacto para mantener la comunicación con los estudiantes. 

        • Foto de perfil
          Nombre y Apellido

          Prof. Titular

          Contacto

          docente@ingenieria.uncuyo.edu.ar

          Horario y Metodología de Consulta

          Aquí puedes agregar la información de horario y metodología de consulta

          <div
  style="margin: 10px; border: 1px solid #ddd; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
  <div class="card" style="border: none;">
    <div class="card-body" style="text-align: center;">
      <img
        class="img-fluid align-bottom"
        style="border-radius: 50%; width: 100px; height: 100px; object-fit: cover; margin-bottom: 10px;"
        role="presentation"
        src="https://aulaabierta.ingenieria.uncuyo.edu.ar/pluginfile.php/221384/mod_label/intro/Avatar_01.png"
        alt="Foto de perfil"
        width="256"
        height="225"><br>
      <h5 class="card-title">Nombre y Apellido</h5>
      <p class="card-text">Prof. Titular</p>
      <div
        style="background-color: #055a9d; color: #fafafa; padding: 10px; border-radius: 5px; margin-bottom: 10px;">
        <strong>Contacto</strong>
      </div>
      <p style="color: #424242;">docente@ingenieria.uncuyo.edu.ar</p>
      <div
        style="background-color: #055a9d; color: #fafafa; padding: 10px; border-radius: 5px; margin-bottom: 10px;">
        <strong>Horario y Metodología de Consulta</strong>
      </div>
      <p style="color: #424242;">Aquí puedes agregar la información de horario y
        metodología de consulta</p>
    </div>
  </div>
</div>

          Instrucciones de uso:

          1. Copia todo el código
          2. En Moodle, añade un nuevo "Recurso - Área de texto y medios"
          3. Haz clic en el botón "<>" (código fuente) en el editor
          4. Pega el código copiado
          5. Personaliza el contenido (nombre, correo, imagen, etc.)
      • Collapse Expand

        Alerta Simple

        • Esta tarjeta de alerta es un recurso útil para resaltar información importante. Su color llamativo permite captar rápidamente la atención del estudiante sobre un mensaje relevante. 

           De esta manera, podrá utilizarla para:  

          • Advertir sobre fechas límites de entrega.
          • Resaltar cambios en la planificación o actividades del curso.
          • Brindar instrucciones urgentes o recomendaciones clave sobre el tema que se presenta.
          • Avisos urgentes.
          • Correcciones.
        • Alerta simple primaria!
          <div
    style="background-color: rgba(235, 126, 126, 0.5); border: 1px solid #9C0F18; padding: 15px; border-radius: 5px; margin-bottom: 15px; font-style: italic; color: #9c0f18;">
    Alerta simple primaria!
  </div>
          Alerta simple primaria!
          <div
    style="background-color: rgba(200, 100, 166, 0.5); border: 1px solid #7D0E51; padding: 15px; border-radius: 5px; margin-bottom: 15px; font-style: italic; color: #7d0e51;">
    Alerta simple primaria!
  </div>
          Alerta simple primaria!
          <div
    style="background-color: rgba(163, 111, 174, 0.5); border: 1px solid #441755; padding: 15px; border-radius: 5px; margin-bottom: 15px; font-style: italic; color: #441755;">
    Alerta simple primaria!
  </div>
          Alerta simple primaria!
          <div
    style="background-color: rgba(125, 119, 183, 0.5); border: 1px solid #252074; padding: 15px; border-radius: 5px; margin-bottom: 15px; font-style: italic; color: #252074;">
    Alerta simple primaria!
  </div>
          Alerta simple primaria!
          <div
    style="background-color: rgba(137, 208, 236, 0.5); border: 1px solid #255A7E; padding: 15px; border-radius: 5px; margin-bottom: 15px; font-style: italic; color: #255a7e;">
    Alerta simple primaria!
  </div>
          Alerta simple primaria!
          <div
    style="background-color: rgba(143, 206, 196, 0.5); border: 1px solid #2D6F62; padding: 15px; border-radius: 5px; margin-bottom: 15px; font-style: italic; color: #2d6f62;">
    Alerta simple primaria!
  </div>
          Alerta simple primaria!
          <div
    style="background-color: rgba(133, 197, 109, 0.5); border: 1px solid #2E6A2D; padding: 15px; border-radius: 5px; margin-bottom: 15px; font-style: italic; color: #2e6a2d;">
    Alerta simple primaria!
  </div>
      • Collapse Expand

        Subtítulos

        • El subtítulo es un breve texto que referencia el contenido a abordar. Podrá incluir una descripción que le permita introducir la información que se presentará a continuación. Esta tarjeta ayuda a los estudiantes a identificar rápidamente los temas o secciones del curso, facilitando la navegación.  

          Podrá utilizar esta tarjeta para incluir información relativa a: 

          • Títulos de módulos o unidades

          • Trabajos prácticos

          • Anuncios sobre evaluaciones parciales o finales 

          • Presentación de material de estudio o recursos

          • Repositorio bibliográfico

        •  

          Subtítulo Rojo

          Descripción breve.

          <div style="display: flex;">
  <div
    style="background-color: #e75959; width: 20px; max-width: 20px; border-radius: 5px 0 0 5px;">
     </div>
  <div
    style="background-color: #dde1e6; flex-grow: 1; padding: 15px; border-radius: 0 5px 5px 0;">
    <h4
      style="margin-top: 0; font-size: 22.5px; color: #424242; font-weight: bold;">
      Subtítulo</h4>
    <p style="margin: 0; font-size: 15px; color: inherit;">Descripción breve.
    </p>
  </div>
</div>
           

          Subtítulo Rosa

          Descripción breve.

          <div style="display: flex;">
  <div
    style="background-color: #c5358c; width: 20px; max-width: 20px; border-radius: 5px 0 0 5px;">
     </div>
  <div
    style="background-color: #dde1e6; flex-grow: 1; padding: 15px; border-radius: 0 5px 5px 0;">
    <h4
      style="margin-top: 0; font-size: 22.5px; color: #424242; font-weight: bold;">
      Subtítulo</h4>
    <p style="margin: 0; font-size: 15px; color: inherit;">Descripción breve.
    </p>
  </div>
</div>
           

          Subtítulo Púrpura

          Descripción breve.

          <div style="display: flex;">
  <div
    style="background-color: #853d90; width: 20px; max-width: 20px; border-radius: 5px 0 0 5px;">
     </div>
  <div
    style="background-color: #dde1e6; flex-grow: 1; padding: 15px; border-radius: 0 5px 5px 0;">
    <h4
      style="margin-top: 0; font-size: 22.5px; color: #424242; font-weight: bold;">
      Subtítulo</h4>
    <p style="margin: 0; font-size: 15px; color: inherit;">Descripción breve.
    </p>
  </div>
</div>
           

          Subtítulo Lila

          Descripción breve.

          <div style="display: flex;">
  <div
    style="background-color: #8374b5; width: 20px; max-width: 20px; border-radius: 5px 0 0 5px;">
     </div>
  <div
    style="background-color: #dde1e6; flex-grow: 1; padding: 15px; border-radius: 0 5px 5px 0;">
    <h4
      style="margin-top: 0; font-size: 22.5px; color: #424242; font-weight: bold;">
      Subtítulo</h4>
    <p style="margin: 0; font-size: 15px; color: inherit;">Descripción breve.
    </p>
  </div>
</div>
           

          Subtítulo Azul

          Descripción breve.

          <div style="display: flex;">
  <div
    style="background-color: #59c4ed; width: 20px; max-width: 20px; border-radius: 5px 0 0 5px;">
     </div>
  <div
    style="background-color: #dde1e6; flex-grow: 1; padding: 15px; border-radius: 0 5px 5px 0;">
    <h4
      style="margin-top: 0; font-size: 22.5px; color: #424242; font-weight: bold;">
      Subtítulo</h4>
    <p style="margin: 0; font-size: 15px; color: inherit;">Descripción breve.
    </p>
  </div>
</div>
           

          Subtítulo Verde Turquesa

          Descripción breve.

          <div style="display: flex;">
  <div
    style="background-color: #68c0a8; width: 20px; max-width: 20px; border-radius: 5px 0 0 5px;">
     </div>
  <div
    style="background-color: #dde1e6; flex-grow: 1; padding: 15px; border-radius: 0 5px 5px 0;">
    <h4
      style="margin-top: 0; font-size: 22.5px; color: #424242; font-weight: bold;">
      Subtítulo</h4>
    <p style="margin: 0; font-size: 15px; color: inherit;">Descripción breve.
    </p>
  </div>
</div>
           

          Subtítulo Verde

          Descripción breve.

          <div style="display: flex;">
  <div
    style="background-color: #67ba47; width: 20px; max-width: 20px; border-radius: 5px 0 0 5px;">
     </div>
  <div
    style="background-color: #dde1e6; flex-grow: 1; padding: 15px; border-radius: 0 5px 5px 0;">
    <h4
      style="margin-top: 0; font-size: 22.5px; color: #424242; font-weight: bold;">
      Subtítulo</h4>
    <p style="margin: 0; font-size: 15px; color: inherit;">Descripción breve.
    </p>
  </div>
</div>
           

          Subtítulo Amarillo

          Descripción breve.

          <div style="display: flex;">
  <div
    style="background-color: #cddf52; width: 20px; max-width: 20px; border-radius: 5px 0 0 5px;">
     </div>
  <div
    style="background-color: #dde1e6; flex-grow: 1; padding: 15px; border-radius: 0 5px 5px 0;">
    <h4
      style="margin-top: 0; font-size: 22.5px; color: #424242; font-weight: bold;">
      Subtítulo</h4>
    <p style="margin: 0; font-size: 15px; color: inherit;">Descripción breve.
    </p>
  </div>
</div>

          Instrucciones de uso:

          1. Copia todo el código
          2. En Moodle, añade un nuevo "Recurso - Área de texto y medios"
          3. Haz clic en el botón "<>" (código fuente) en el editor
          4. Pega el código copiado
          5. Personaliza el contenido (subtítulo y descripción)
        •  

          Subtítulo Rojo

          Descripción breve.

          <div style="display: flex;">
  <div
    style="background-color: #e75959; width: 20px; max-width: 20px; border-radius: 5px 0 0 5px;">
     </div>
  <div
    style="background-color: #dde1e6; flex-grow: 1; padding: 15px; border-radius: 0 5px 5px 0;">
    <h4
      style="margin-top: 0; font-size: 22.5px; color: #424242; font-weight: bold;">
      Subtítulo</h4>
    <p style="margin: 0; font-size: 15px; color: inherit;">Descripción breve.
    </p>
  </div>
</div>
           

          Subtítulo Rosa

          Descripción breve.

          <div style="display: flex;">
  <div
    style="background-color: #c5358c; width: 20px; max-width: 20px; border-radius: 5px 0 0 5px;">
     </div>
  <div
    style="background-color: #dde1e6; flex-grow: 1; padding: 15px; border-radius: 0 5px 5px 0;">
    <h4
      style="margin-top: 0; font-size: 22.5px; color: #424242; font-weight: bold;">
      Subtítulo</h4>
    <p style="margin: 0; font-size: 15px; color: inherit;">Descripción breve.
    </p>
  </div>
</div>
           

          Subtítulo Púrpura

          Descripción breve.

          <div style="display: flex;">
  <div
    style="background-color: #853d90; width: 20px; max-width: 20px; border-radius: 5px 0 0 5px;">
     </div>
  <div
    style="background-color: #dde1e6; flex-grow: 1; padding: 15px; border-radius: 0 5px 5px 0;">
    <h4
      style="margin-top: 0; font-size: 22.5px; color: #424242; font-weight: bold;">
      Subtítulo</h4>
    <p style="margin: 0; font-size: 15px; color: inherit;">Descripción breve.
    </p>
  </div>
</div>
           

          Subtítulo Lila

          Descripción breve.

          <div style="display: flex;">
  <div
    style="background-color: #8374b5; width: 20px; max-width: 20px; border-radius: 5px 0 0 5px;">
     </div>
  <div
    style="background-color: #dde1e6; flex-grow: 1; padding: 15px; border-radius: 0 5px 5px 0;">
    <h4
      style="margin-top: 0; font-size: 22.5px; color: #424242; font-weight: bold;">
      Subtítulo</h4>
    <p style="margin: 0; font-size: 15px; color: inherit;">Descripción breve.
    </p>
  </div>
</div>
           

          Subtítulo Azul

          Descripción breve.

          <div style="display: flex;">
  <div
    style="background-color: #59c4ed; width: 20px; max-width: 20px; border-radius: 5px 0 0 5px;">
     </div>
  <div
    style="background-color: #dde1e6; flex-grow: 1; padding: 15px; border-radius: 0 5px 5px 0;">
    <h4
      style="margin-top: 0; font-size: 22.5px; color: #424242; font-weight: bold;">
      Subtítulo</h4>
    <p style="margin: 0; font-size: 15px; color: inherit;">Descripción breve.
    </p>
  </div>
</div>
           

          Subtítulo Verde Turquesa

          Descripción breve.

          <div style="display: flex;">
  <div
    style="background-color: #68c0a8; width: 20px; max-width: 20px; border-radius: 5px 0 0 5px;">
     </div>
  <div
    style="background-color: #dde1e6; flex-grow: 1; padding: 15px; border-radius: 0 5px 5px 0;">
    <h4
      style="margin-top: 0; font-size: 22.5px; color: #424242; font-weight: bold;">
      Subtítulo</h4>
    <p style="margin: 0; font-size: 15px; color: inherit;">Descripción breve.
    </p>
  </div>
</div>
           

          Subtítulo Verde

          Descripción breve.

          <div style="display: flex;">
  <div
    style="background-color: #67ba47; width: 20px; max-width: 20px; border-radius: 5px 0 0 5px;">
     </div>
  <div
    style="background-color: #dde1e6; flex-grow: 1; padding: 15px; border-radius: 0 5px 5px 0;">
    <h4
      style="margin-top: 0; font-size: 22.5px; color: #424242; font-weight: bold;">
      Subtítulo</h4>
    <p style="margin: 0; font-size: 15px; color: inherit;">Descripción breve.
    </p>
  </div>
</div>
           

          Subtítulo Amarillo

          Descripción breve.

          <div style="display: flex;">
  <div
    style="background-color: #cddf52; width: 20px; max-width: 20px; border-radius: 5px 0 0 5px;">
     </div>
  <div
    style="background-color: #dde1e6; flex-grow: 1; padding: 15px; border-radius: 0 5px 5px 0;">
    <h4
      style="margin-top: 0; font-size: 22.5px; color: #424242; font-weight: bold;">
      Subtítulo</h4>
    <p style="margin: 0; font-size: 15px; color: inherit;">Descripción breve.
    </p>
  </div>
</div>

          Instrucciones de uso:

          1. Copia todo el código
          2. En Moodle, añade un nuevo "Recurso - Área de texto y medios"
          3. Haz clic en el botón "<>" (código fuente) en el editor
          4. Pega el código copiado
          5. Personaliza el contenido (subtítulo y descripción)