Archivos HTML en Moodle no cargan correctamente los recursos CSS y JS

1. Método para resolverlo

Sigue estos pasos para solucionar el problema de carga de hojas de estilo CSS y librerías JS en archivos HTML dentro de Moodle:

1. Verifica que los archivos CSS y JS estén correctamente incluidos dentro del mismo paquete HTML.
2. Comprueba que las rutas relativas dentro del código HTML sean correctas. Evita rutas absolutas externas a Moodle.
3. Accede al servidor de Moodle y revisa los permisos de los directorios donde se encuentran los archivos. Usa el siguiente comando en Linux para cambiar los permisos si es necesario:

chmod -R 755 /ruta/del/curso

4. Si los archivos CSS y JS están bloqueados por la política de seguridad del servidor web, edita la configuración de Apache/Nginx:

• Para Apache, revisa el archivo .htaccess o httpd.conf y permite la carga de estos archivos:

      Header set Access-Control-Allow-Origin "*"
    

location ~* \.(eot|ttf|woff|woff2|svg|js|css)$ {
      add_header Access-Control-Allow-Origin *;
    }

2. Causas del problema

• Los permisos del servidor pueden estar bloqueando la carga de archivos CSS y JS, lo que impide que Moodle los procese correctamente.
• Las rutas dentro del código HTML pueden ser incorrectas, haciendo que los archivos no se encuentren en la ubicación esperada.
• Las configuraciones de seguridad del servidor web pueden impedir la carga de archivos externos o internos debido a restricciones de CORS.
• Moodle podría estar rechazando ciertos archivos por razones de seguridad si no están en la carpeta pluginfile.php.
• Una actualización reciente del servidor o de Moodle podría haber modificado la forma en que se manejan los archivos embebidos.

3. Recomendaciones

• Siempre verifica que los archivos CSS y JS se encuentren en el mismo directorio del paquete HTML antes de subirlos a Moodle.
• Utiliza rutas relativas en el código HTML en lugar de rutas absolutas para evitar dependencias de servidores externos.
• Antes de actualizar Moodle, revisa las notas de la versión y prueba los cambios en un entorno de prueba.
• Si el problema persiste tras una actualización, revisa los logs del servidor y Moodle en busca de mensajes de error.

4. Ejemplos y Casos de Uso

• Si un archivo index.html en un curso de Moodle contiene la siguiente línea para cargar un CSS: y el archivo estilos.css no se encuentra en la misma carpeta, la hoja de estilo no se aplicará correctamente.
• Si un archivo JS externo está bloqueado por CORS, en la consola del navegador aparecerá un error como:

  Access to script at 'https://example.com/script.js' from origin 'https://moodle.example.com' has been blocked by CORS policy

  Para solucionarlo, configura el servidor web para permitir la carga del recurso.

5. Referencias

• Moodle Docs: https://docs.moodle.org/
• Apache HTTP Server Documentation: https://httpd.apache.org/docs/
• Nginx Configuration Guide: https://nginx.org/en/docs/