GoAula |

Editor de Contenidos

Previsualización LMS (Simulado)

Código HTML Limpio (Inline CSS)

Formateador de HTML para Moodle: acordeones, alertas, columnas y botones

El editor de Moodle deja pegar HTML, pero escribirlo a mano es lento y frágil: un estilo mal cerrado y la página del curso queda rota. Este formateador arma por vos los cuatro bloques que más se usan en un aula virtual —acordeón (contenido plegable), alerta de color, columnas y botón— y te devuelve el HTML listo para copiar y pegar. Es gratis, no pide registro y todo el armado ocurre en tu navegador: no hay inteligencia artificial ni se envía nada a un servidor.

Cómo crear un bloque en 3 pasos

  1. Elegí el tipo de bloque. Arriba del editor tenés cuatro pestañas: Acordeón, Alerta, Columnas y Botón. Cada una abre sus propios campos.
  2. Escribí tu contenido. Cargá los títulos, textos y colores; la vista previa se actualiza mientras escribís, así que ves exactamente lo que va a quedar en el curso.
  3. Copiá el código y pegalo en Moodle. Tocá «Copiar Código», entrá al recurso o etiqueta de tu curso, abrí el editor en modo HTML (el botón </> del editor Atto o «Código fuente» en TinyMCE) y pegá.

Qué bloque conviene en cada caso

El acordeón sirve cuando una unidad tiene mucho material y la página del curso se vuelve un muro de texto: cada panel se abre solo si el alumno lo toca. La alerta es para lo que no se puede pasar por alto —una fecha de entrega, un cambio de aula, un requisito previo— y el color comunica la urgencia antes que el texto. Las columnas ordenan material paralelo, como teoría de un lado y práctica del otro. El botón es para la acción principal de la página: entregar el trabajo, entrar a la videollamada, descargar la consigna.

Por qué el HTML generado no se rompe

Los bloques usan estilos en línea y etiquetas estándar, sin clases, sin hojas de estilo externas y sin JavaScript. Eso importa porque Moodle, Canvas y Classroom filtran el HTML que pegás y suelen descartar las etiquetas <style> y <script> y los atributos tipo onclick: un diseño que dependa de ellos se ve perfecto en la vista previa y roto en el curso. Por eso el acordeón se arma con <details> y <summary>, que el navegador abre y cierra por su cuenta. Así el bloque se ve igual en el aula virtual, en el correo y en el PDF exportado, sin depender del tema visual que tenga instalado tu institución.

Preguntas frecuentes

¿El formateador HTML para Moodle es gratis?
Sí. Es 100 % gratis y no pide registro, cuenta ni tarjeta. Abrís la página, armás el bloque y copiás el código. Tampoco usa inteligencia artificial: el HTML se genera en tu navegador.

¿Cómo pego el código en un curso de Moodle?
Copiá el código con el botón «Copiar Código», entrá a editar la etiqueta o página de tu curso y activá la vista HTML del editor (el botón </> en Atto o «Código fuente» en TinyMCE). Pegá ahí y guardá. Si pegás en la vista normal, Moodle va a mostrar las etiquetas como texto.

¿Sirve para Canvas, Classroom o Blackboard?
Sí. El HTML usa estilos en línea estándar, sin clases de Moodle ni CSS externo, así que funciona en cualquier editor que acepte HTML: Canvas, Google Classroom, Blackboard, Chamilo o incluso un correo institucional.

¿El acordeón funciona sin JavaScript?
Sí. El acordeón se arma con las etiquetas nativas <details> y <summary>, que el navegador abre y cierra solo. Como no lleva JavaScript ni atributos onclick, sigue funcionando aunque el aula virtual limpie los scripts del contenido de los cursos.

¿Cómo se ven los bloques en el celular?
El acordeón, la alerta y el botón se adaptan al ancho de la pantalla sin problema. Las columnas se arman con una tabla y se mantienen lado a lado también en el celular, así que para textos largos convení usar dos columnas en vez de tres.

¿Necesitás otra herramienta para tu curso? En GoAula tenés también un planificador de programas y syllabus, una creadora de rúbricas de evaluación y una calculadora de notas y promedios. Todas gratis y sin registro.