Sección fuera de línea

• Seleccionar sección Componentes HTML

  Componentes HTML
  

  Contraer todo Expandir todo

  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.

  

  • • Contraer Expandir

      Tarjeta Docente
      

      • Seleccionar actividad Nombre y Apellido Prof. Titular Contacto docente@i...

        
        

        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.)
  • • Contraer Expandir

      Alerta Simple
      

      • Seleccionar actividad Alerta simple primaria!

        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>

  • • Contraer Expandir

      Subtítulos
      

      • Seleccionar actividad Subtítulo Rojo Descripción breve.

         

        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)