\n<\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Para continuar aprovechando la inteligencia artificial para crear el dise\u00f1o de mi aula virtual, le ped\u00ed que me brinde el c\u00f3digo html y css para crear una cuadr\u00edcula con videos de Youtube. Me sorprendi\u00f3 much\u00edsimo ver que como ejemplo puso un video que circula por toda la web… justamente, por eso lo habr\u00e1 elegido.<\/p>\n\n\n\n<p>Este es el prompt: “Crea el c\u00f3digo HTML y CSS para hacer una cuadr\u00edcula utilizando DIV. Dentro de cada cuadr\u00edcula vamos a incrustar un video de Youtube. La cuadr\u00edcula debe ser accesible y adaptarse al tama\u00f1o de la ventana. El CSS tiene que estar incrustado en el HTML.”<\/p>\n\n\n\n<p>El resultado:<\/p>\n\n\n\n<body>\n <div class=\"grid-container\" style=\" display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 16px; padding: 16px;\n box-sizing: border-box;\">\n <div class=\"grid-item\" style=\"position: relative;\n width: 100%;\n padding-top: 5%; \/* Relaci\u00f3n de aspecto 16:9 para los videos *\/\n overflow: hidden;\">\n <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>\n <\/div>\n <div class=\"grid-item\" style=\"position: relative;\n width: 100%;\n padding-top: 5%; \/* Relaci\u00f3n de aspecto 16:9 para los videos *\/\n overflow: hidden;\">\n <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>\n <\/div>\n <div class=\"grid-item\" style=\"position: relative;\n width: 100%;\n padding-top: 5%; \/* Relaci\u00f3n de aspecto 16:9 para los videos *\/\n overflow: hidden;\">\n <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>\n <\/div>\n <div class=\"grid-item\" style=\"position: relative;\n width: 100%;\n padding-top: 5%; \/* Relaci\u00f3n de aspecto 16:9 para los videos *\/\n overflow: hidden;\">\n <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>\n <\/div>\n <\/div>\n<\/body>\n<\/html>\n\n\n\n<p>C\u00f3digo de la cuadr\u00edcula de videos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><body>\n <div class=\"grid-container\" style=\" display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 16px; padding: 16px;\n box-sizing: border-box;\">\n <div class=\"grid-item\" style=\"position: relative;\n width: 100%;\n padding-top: 5%; \/* Relaci\u00f3n de aspecto 16:9 para los videos *\/\n overflow: hidden;\">\n <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>\n <\/div>\n <div class=\"grid-item\" style=\"position: relative;\n width: 100%;\n padding-top: 5%; \/* Relaci\u00f3n de aspecto 16:9 para los videos *\/\n overflow: hidden;\">\n <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>\n <\/div>\n <div class=\"grid-item\" style=\"position: relative;\n width: 100%;\n padding-top: 5%; \/* Relaci\u00f3n de aspecto 16:9 para los videos *\/\n overflow: hidden;\">\n <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>\n <\/div>\n <div class=\"grid-item\" style=\"position: relative;\n width: 100%;\n padding-top: 5%; \/* Relaci\u00f3n de aspecto 16:9 para los videos *\/\n overflow: hidden;\">\n <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>\n <\/div>\n <\/div>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mucha gente crea banners o botones utilizando un graficador, y luego inserta la imagen en el Moodle, lo cual no es una buena pr\u00e1ctica. \u00bfPor qu\u00e9 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 … <a href=\"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/2025\/03\/14\/crear-recuadro-en-html-y-css-para-moodle-usando-chatgpt-o-deepseek\/\" class=\"more-link\">Continuar leyendo<span class=\"screen-reader-text\"> “Crear recuadro en HTML y CSS para Moodle, usando ChatGPT o DeepSeek”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,9,47,13],"tags":[],"class_list":["post-6946","post","type-post","status-publish","format-standard","hentry","category-educacion-tecnologia","category-htmlcss","category-inteligencia-artificial","category-moodle"],"_links":{"self":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/6946","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/comments?post=6946"}],"version-history":[{"count":8,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/6946\/revisions"}],"predecessor-version":[{"id":6960,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/6946\/revisions\/6960"}],"wp:attachment":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/media?parent=6946"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/categories?post=6946"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/tags?post=6946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}