Crear recuadro en HTML y CSS para Moodle, usando ChatGPT o DeepSeek

Mucha gente crea banners o botones utilizando un graficador, y luego inserta la imagen en el Moodle, lo cual no es una buena práctica.

¿Por qué es mejor crear banners y botones utilizando HTML y CSS? Porque se puede seleccionar el texto, copiar y pegar, agrandar y achicar, e incluso desactivar los estilos si uno no llega a ver bien por tener problemas con el contraste, por ejemplo. Poner los títulos como imágenes es similar a enviar una foto del CBU cuando quieren hacerte una transferencia…

En Moodle, como en varias plataformas, podemos agregar contenido en formato HTML y CSS. Estos dos códigos se utilizan para el contenido (HTML) y para el estilo (CSS).

Sin embargo, estos códigos son complejos para aprenderlos rápidamente, por lo cual muestro acá una forma de crear estos códigos utilizando Inteligencia Artificial.

Para continuar aprovechando la inteligencia artificial para crear el diseño de mi aula virtual, le pedí que me brinde el código html y css para crear una cuadrícula con videos de Youtube. Me sorprendió muchísimo ver que como ejemplo puso un video que circula por toda la web… justamente, por eso lo habrá elegido.

Este es el prompt: “Crea el código HTML y CSS para hacer una cuadrícula utilizando DIV. Dentro de cada cuadrícula vamos a incrustar un video de Youtube. La cuadrícula debe ser accesible y adaptarse al tamaño de la ventana. El CSS tiene que estar incrustado en el HTML.”

El resultado:

Código de la cuadrícula de videos:

<body>
    <div class="grid-container" style=" display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;     padding: 16px;
    box-sizing: border-box;">
        <div class="grid-item" style="position: relative;
    width: 100%;
    padding-top: 5%; /* Relación de aspecto 16:9 para los videos */
    overflow: hidden;">
            <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="grid-item" style="position: relative;
    width: 100%;
    padding-top: 5%; /* Relación de aspecto 16:9 para los videos */
    overflow: hidden;">
            <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="grid-item" style="position: relative;
    width: 100%;
    padding-top: 5%; /* Relación de aspecto 16:9 para los videos */
    overflow: hidden;">
            <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="grid-item" style="position: relative;
    width: 100%;
    padding-top: 5%; /* Relación de aspecto 16:9 para los videos */
    overflow: hidden;">
            <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>
</body>
</html>

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *