Curso: Kit de Recursos

Sección fuera de línea

Seleccionar sección Recursos de diseño

Recursos de diseño
- Seleccionar actividad Anuncios
  
  Anuncios Foro

Tarjeta Presentación docentes

Seleccionar actividad Con esta tarjeta podrá agregar información...

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

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>

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/221393/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: #9c0f18; 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: #9c0f18; 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>

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/221394/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: #7d0e51; 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: #7d0e51; 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>

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/221395/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: #252074; 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: #252074; 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>

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/221396/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: #255a7e; 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: #255a7e; 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>

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/221397/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: #2d6f62; 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: #2d6f62; 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>

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/221398/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: #2e6a2d; 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: #2e6a2d; 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>

Tarjeta con imagen

Seleccionar actividad Descripción
Son fichas visuales que le permiten incorporar imágenes con una breve descripción de la misma. Tienen la función de evocar estímulos visuales que ayudan a los estudiantes a captar conceptos y conectar ideas sobre el tema.

Podrá utilizar esta tarjeta para:

Presentar un tema de manera atractiva y contextualizada.

Incluir imágenes ilustrativas que acompañen explicaciones o conceptos.

Dar indicaciones o recomendaciones visualmente llamativas.

Introducir una unidad temática al insertar una imagen representativa del tema con una breve introducción.

Tarjeta con imagen

Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer.

<div
  style="background-color: #e5e5f7; border: 1px solid #B4B4D5; padding: 15px; border-radius: 5px; margin-bottom: 15px; color: #2f2f4f; display: flex; align-items: center;">
  <img class="img-fluid atto_image_button_text-bottom"
    style="width: 100px; height: 100px; object-fit: cover; border-radius: 5px; margin-right: 15px;"
    role="presentation"
    src="https://aulaabierta.ingenieria.uncuyo.edu.ar/pluginfile.php/221403/mod_label/intro/line_art_g1_07.jpg"
    alt="Descripción de la imagen" width="2000" height="2000">
  <div>
    <h4 style="margin-top: 0; color: inherit;">Tarjeta con imagen</h4>
    <p>Es un hecho establecido hace demasiado tiempo que un lector se distraerá
      con el contenido del texto de un sitio mientras que mira su diseño. El
      punto de usar Lorem Ipsum es que tiene una distribución más o menos normal
      de las letras, al contrario de usar textos como por ejemplo "Contenido
      aquí, contenido aquí". Estos textos hacen parecerlo un español que se
      puede leer. </p>
  </div>
</div>

Tarjeta con imagen

<div
  style="background-color: rgba(235, 126, 126, 0.5); border: 1px solid #9C0F18; padding: 15px; border-radius: 5px; color: #9c0f18; display: flex; align-items: center;">
  <img class="img-fluid atto_image_button_text-bottom"
    style="width: 100px; height: 100px; object-fit: cover; border-radius: 5px; margin-right: 15px;"
    role="presentation"
    src="https://aulaabierta.ingenieria.uncuyo.edu.ar/pluginfile.php/221403/mod_label/intro/line_art_g1_07.jpg"
    alt="Descripción de la imagen" width="2000" height="2000">
  <div>
    <h4 style="margin-top: 0; color: inherit;">Tarjeta con imagen</h4>
    <p>Es un hecho establecido hace demasiado tiempo que un lector se distraerá
      con el contenido del texto de un sitio mientras que mira su diseño. El
      punto de usar Lorem Ipsum es que tiene una distribución más o menos normal
      de las letras, al contrario de usar textos como por ejemplo "Contenido
      aquí, contenido aquí". Estos textos hacen parecerlo un español que se
      puede leer. </p>
  </div>
</div>

Tarjeta con imagen

<div
  style="background-color: rgba(137, 208, 236, 0.5); border: 1px solid #255A7E; padding: 15px; border-radius: 5px; color: #255a7e; display: flex; align-items: center;">
  <img class="img-fluid atto_image_button_text-bottom"
    style="width: 100px; height: 100px; object-fit: cover; border-radius: 5px; margin-right: 15px;"
    role="presentation"
    src="https://aulaabierta.ingenieria.uncuyo.edu.ar/pluginfile.php/221403/mod_label/intro/line_art_g1_07.jpg"
    alt="Descripción de la imagen" width="2000" height="2000">
  <div>
    <h4 style="margin-top: 0; color: inherit;">Tarjeta con imagen</h4>
    <p>Es un hecho establecido hace demasiado tiempo que un lector se distraerá
      con el contenido del texto de un sitio mientras que mira su diseño. El
      punto de usar Lorem Ipsum es que tiene una distribución más o menos normal
      de las letras, al contrario de usar textos como por ejemplo "Contenido
      aquí, contenido aquí". Estos textos hacen parecerlo un español que se
      puede leer. </p>
  </div>
</div>

Tarjeta con imagen

<div
  style="background-color: rgba(163, 111, 174, 0.5); border: 1px solid #441755; padding: 15px; border-radius: 5px; color: #441755; display: flex; align-items: center;">
  <img class="img-fluid atto_image_button_text-bottom"
    style="width: 100px; height: 100px; object-fit: cover; border-radius: 5px; margin-right: 15px;"
    role="presentation"
    src="https://aulaabierta.ingenieria.uncuyo.edu.ar/pluginfile.php/221403/mod_label/intro/line_art_g1_07.jpg"
    alt="Descripción de la imagen" width="2000" height="2000">
  <div>
    <h4 style="margin-top: 0; color: inherit;">Tarjeta con imagen</h4>
    <p>Es un hecho establecido hace demasiado tiempo que un lector se distraerá
      con el contenido del texto de un sitio mientras que mira su diseño. El
      punto de usar Lorem Ipsum es que tiene una distribución más o menos normal
      de las letras, al contrario de usar textos como por ejemplo "Contenido
      aquí, contenido aquí". Estos textos hacen parecerlo un español que se
      puede leer. </p>
  </div>
</div>

El Sol

<div
  style="background-color: rgba(137, 208, 236, 0.5); border: 1px solid #255A7E; padding: 15px; border-radius: 5px; margin-bottom: 15px; color: #255a7e; display: flex; align-items: center; justify-content: space-between;">
  <div style="flex: 1; text-align: left;">
    <h4 style="margin-top: 0; color: inherit;">El Sol</h4>
    <p>Es un hecho establecido hace demasiado tiempo que un lector se distraerá
      con el contenido del texto de un sitio mientras que mira su diseño. El
      punto de usar Lorem Ipsum es que tiene una distribución más o menos normal
      de las letras, al contrario de usar textos como por ejemplo "Contenido
      aquí, contenido aquí". Estos textos hacen parecerlo un español que se
      puede leer.</p>
  </div>
  <img class="img-fluid align-bottom"
    style="width: 100px; height: 100px; object-fit: cover; border-radius: 5px; margin-left: 15px;"
    role="presentation"
    src="https://aulaabierta.ingenieria.uncuyo.edu.ar/pluginfile.php/221422/mod_label/intro/5385944.jpg"
    alt="Descripción de la imagen" width="2000" height="2000">
</div>

Alertas simples primarias

Seleccionar actividad Descripción
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>

Títulos

TÍTULO

Descripción

<p></p>
<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; position: relative;">
    <h4
      style="margin-top: 0px; font-size: 25px; color: rgb(66, 66, 66); font-weight: bold; text-align: center;">
      TITULO </h4>
    <p
      style="margin: 0px; font-size: 15px; color: inherit; text-align: center;">
      Descripción </p>
    <div
      style="background-color: #e75959; width: 20px; max-width: 20px; border-radius: 0 5px 5px 0; position: absolute; top: 0; bottom: 0; right: 0;">
       </div>
  </div>
</div>

TÍTULO

Descripción

<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; position: relative;">
    <h4
      style="margin-top: 0px; font-size: 25px; color: rgb(66, 66, 66); font-weight: bold; text-align: center;">
      TITULO </h4>
    <p
      style="margin: 0px; font-size: 15px; color: inherit; text-align: center;">
      Descripción </p>
    <div
      style="background-color: #c5358c; width: 20px; max-width: 20px; border-radius: 0 5px 5px 0; position: absolute; top: 0; bottom: 0; right: 0;">
       </div>
  </div>
</div>

TÍTULO

Descripción

<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; position: relative;">
    <h4
      style="margin-top: 0px; font-size: 25px; color: rgb(66, 66, 66); font-weight: bold; text-align: center;">
      TITULO </h4>
    <p
      style="margin: 0px; font-size: 15px; color: inherit; text-align: center;">
      Descripción </p>
    <div
      style="background-color: #853d90; width: 20px; max-width: 20px; border-radius: 0 5px 5px 0; position: absolute; top: 0; bottom: 0; right: 0;">
       </div>
  </div>
</div>

TÍTULO

Descripción

<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; position: relative;">
    <h4
      style="margin-top: 0px; font-size: 25px; color: rgb(66, 66, 66); font-weight: bold; text-align: center;">
      TITULO </h4>
    <p
      style="margin: 0px; font-size: 15px; color: inherit; text-align: center;">
      Descripción </p>
    <div
      style="background-color: #8374b5; width: 20px; max-width: 20px; border-radius: 0 5px 5px 0; position: absolute; top: 0; bottom: 0; right: 0;">
       </div>
  </div>
</div>

TÍTULO

Descripción

<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; position: relative;">
    <h4
      style="margin-top: 0px; font-size: 25px; color: rgb(66, 66, 66); font-weight: bold; text-align: center;">
      TITULO </h4>
    <p
      style="margin: 0px; font-size: 15px; color: inherit; text-align: center;">
      Descripción </p>
    <div
      style="background-color: #59c4ed; width: 20px; max-width: 20px; border-radius: 0 5px 5px 0; position: absolute; top: 0; bottom: 0; right: 0;">
       </div>
  </div>
</div>

TÍTULO

Descripción

<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; position: relative;">
    <h4
      style="margin-top: 0px; font-size: 25px; color: rgb(66, 66, 66); font-weight: bold; text-align: center;">
      TITULO </h4>
    <p
      style="margin: 0px; font-size: 15px; color: inherit; text-align: center;">
      Descripción </p>
    <div
      style="background-color: #c5358c; width: 20px; max-width: 20px; border-radius: 0 5px 5px 0; position: absolute; top: 0; bottom: 0; right: 0;">
       </div>
  </div>
</div>

TÍTULO

Descripción

<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; position: relative;">
    <h4
      style="margin-top: 0px; font-size: 25px; color: rgb(66, 66, 66); font-weight: bold; text-align: center;">
      TITULO </h4>
    <p
      style="margin: 0px; font-size: 15px; color: inherit; text-align: center;">
      Descripción </p>
    <div
      style="background-color: #c5358c; width: 20px; max-width: 20px; border-radius: 0 5px 5px 0; position: absolute; top: 0; bottom: 0; right: 0;">
       </div>
  </div>
</div>

TÍTULO

Descripción

<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; position: relative;">
    <h4
      style="margin-top: 0px; font-size: 25px; color: rgb(66, 66, 66); font-weight: bold; text-align: center;">
      TITULO </h4>
    <p
      style="margin: 0px; font-size: 15px; color: inherit; text-align: center;">
      Descripción </p>
    <div
      style="background-color: #cddf52; width: 20px; max-width: 20px; border-radius: 0 5px 5px 0; position: absolute; top: 0; bottom: 0; right: 0;">
       </div>
  </div>
</div>

Subtítulos

Seleccionar actividad Descripción
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

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

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

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

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>

Unidad 2- Desarrollo

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;">
      Unidad 2- Desarrollo</h4>
    <p style="margin: 0; font-size: 15px; color: inherit;">Descripción breve.
    </p>
  </div>
</div>

Subtítulo

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>

Seleccionar actividad Subtítulo 7

Subtítulo

Descripción breve.
Seleccionar actividad Subtítulo 8

Subtítulo

Descripción breve.

Seleccionar sección Iconos

Iconos
- Seleccionar actividad Descripción
  El uso de íconos proporciona una representación visual atractiva que permite identificar de forma rápida y sencilla un objeto.
  
  A través de los mismos podrá representar objetos como archivos, carpetas, accesos directos, aplicaciones, documentos, etc.
  
  Estos son algunos de los beneficios de su uso:
  
  Favorece la navegación intuitiva dentro del aula virtual.
  
  Aporta un diseño más visual y atractivo para los estudiantes.
  
  Facilita la organización y jerarquización de la información.
  
  Reduce la sobrecarga de texto y mejora la comprensión de las instrucciones.

Tarjetas

Seleccionar actividad Tarjeta introductoria/de texto
¡Info!

El docente carga la planificación de actividades y/o el cronograma de la cátedra en formato PDF en donde se vean reflejadas:

Fechas

Actividades

Evaluaciones de todo el cursado

Esto facilita el desarrollo posterior de las clases para el docente y la organización y optimización del tiempo de los estudiantes.

¡Info!

El docente carga la planificación de actividades y/o el cronograma de la cátedra en formato PDF en donde se vean reflejadas:

Fechas
Actividades
Evaluaciones de todo el cursado

Esto facilita el desarrollo posterior de las clases para el docente y la organización y optimización del tiempo de los estudiantes.

<div class="card"
  style="background-color: #dde1e6; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin-top: 20px;">
  <div class="card-body">
    <h5 class="card-title" style="color: #00000;">Info!</h5>
    <p class="card-text" style="color: #00000;">El docente carga la
      planificación de actividades y/o el cronograma de la cátedra en formato
      PDF en donde se vean reflejadas:</p>
    <ul style="color: #00000;">
      <li>Fechas</li>
      <li>Actividades</li>
      <li>Evaluaciones de todo el cursado</li>
    </ul>
    <p class="card-text" style="color: #00000;">Esto facilita el desarrollo
      posterior de las clases para el docente y la organización y optimización
      del tiempo de los estudiantes.</p>
  </div>
</div>

¡Info!

El docente carga la planificación de actividades y/o el cronograma de la cátedra en formato PDF en donde se vean reflejadas:

Fechas
Actividades
Evaluaciones de todo el cursado

Esto facilita el desarrollo posterior de las clases para el docente y la organización y optimización del tiempo de los estudiantes.

<div class="card"
  style="background-color: #fff3cd; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin-top: 20px;">
  <div class="card-body">
    <h5 class="card-title" style="color: #856404;">Info!</h5>
    <p class="card-text" style="color: #856404;">El docente carga la
      planificación de actividades y/o el cronograma de la cátedra en formato
      PDF en donde se vean reflejadas:</p>
    <ul style="color: #856404;">
      <li>Fechas</li>
      <li>Actividades</li>
      <li>Evaluaciones de todo el cursado</li>
    </ul>
    <p class="card-text" style="color: #856404;">Esto facilita el desarrollo
      posterior de las clases para el docente y la organización y optimización
      del tiempo de los estudiantes.</p>
  </div>
</div>

Sección fuera de línea

Recursos de diseño

Tarjeta Presentación docentes

Nombre y Apellido

Nombre y Apellido

Nombre y Apellido

Nombre y Apellido

Nombre y Apellido

Nombre y Apellido

Nombre y Apellido

Tarjeta con imagen

Tarjeta con imagen

Tarjeta con imagen

Tarjeta con imagen

Tarjeta con imagen

El Sol

Alertas simples primarias

Títulos

TÍTULO

TÍTULO

TÍTULO

TÍTULO

TÍTULO

TÍTULO

TÍTULO

TÍTULO

Subtítulos

Subtítulo

Subtítulo

Subtítulo

Subtítulo

Unidad 2- Desarrollo

Subtítulo

Subtítulo

Subtítulo

Iconos

Tarjetas

¡Info!

¡Info!

¡Info!