Acceso rápido:
Bootstrap 5
Moodle proporciona la plataforma para que su contenido de aprendizaje se rediseñe y evolucione con su institución. Con tantas opciones de colores, fuentes, gifs e imágenes, puede ser difícil saber por dónde empezar. Para este post, quería ofrecer 5 maneras fáciles de mejorar la apariencia de su curso Moodle.
A continuación he proporcionado algunos consejos sobre cómo puedes mejorar la apariencia de tu curso Moodle. Algunos implican saber cómo añadir código HTML copiado en el editor ATTO, y otros necesitarán la ayuda de tu equipo de soporte de Moodle, ya que implican añadir plugins (yo mismo no soy desarrollador, ¡pero todo el contenido de las capturas de pantalla ha sido creado por mí!) Las 5 sugerencias se pueden ver en este curso de demostración aquí (que también luce nuestro propio tema CatAwesome Moodle).
Recuerda: Cuando utilices el editor de texto siempre debes adherirte a los estándares de accesibilidad y utilizar los encabezados preformateados para enfatizar la información importante. Puedes leer más sobre diseño de cursos accesibles en Moodle.org.
Cuando se introdujo el seguimiento de la finalización con Moodle 2.0 fue algo revolucionario, ya que influyó en la forma en que creamos itinerarios para los alumnos. El beneficio de tener actividades del curso que pudieran ser rastreadas o restringidas no puede ser subestimado en su beneficio para nosotros, los diseñadores del curso.
¿Qué hace Bootstrap?
¿Qué es Bootstrap? Bootstrap es un marco de desarrollo front-end gratuito y de código abierto para la creación de sitios y aplicaciones web. Diseñado para permitir el desarrollo responsivo de sitios web mobile-first, Bootstrap proporciona una colección de sintaxis para diseños de plantillas.
¿Cómo puedo crear un tema en Moodle?
Elija su nuevo tema desde Moodle a través de Administración > Apariencia > Temas > Selector de temas. ¡Tu nuevo tema! Debido a los miles de elementos HTML en Moodle es imposible tener en cuenta todos los posibles cambios que quieras hacer en tu tema.
Elementos Bootstrap moodle
Cuando se estilizan páginas y componentes en Moodle – se recomienda reutilizar siempre los componentes de Bootstrap en lugar de inventar cosas nuevas que necesiten un estilo personalizado. Esto significa que los temas que extienden Boost pueden cambiar el estilo de los componentes nativos de Bootstrap y los cambios se reflejarán en todas las páginas de Moodle.
Stuart está interesado en todo lo relacionado con el e-learning, con intereses específicos en Moodle, la estrategia de e-learning y el desarrollo de negocios. Su experiencia en educación de más de 30 años, MBA en Negocios Internacionales, y el conocimiento de la implementación de sistemas de e-learning, junto con el diseño gráfico de fondo, le dan un conjunto de habilidades únicas para proyectos de e-learning.
Stuart está interesado en todo lo relacionado con el e-learning, especialmente en Moodle, la estrategia de e-learning y el desarrollo empresarial. Su experiencia en educación de más de 30 años, su MBA en Negocios Internacionales y su conocimiento de la implementación de sistemas de e-learning, junto con su formación en diseño gráfico, le confieren unas habilidades únicas para los proyectos de e-learning.
Theme_bootstrapbase falta moodle
Imagínate esto: Estás trabajando duro para aprender un lenguaje de back-end como Python, y te estás centrando en frameworks como Flask o Django. Quieres mostrar la funcionalidad de tu sitio web, pero no tienes mucho tiempo para aprender diseño web front-end junto con las habilidades de back-end en las que estás trabajando. Ah, y también necesitas que este front-end sea mobile-first y responsive – una obviedad en una época en la que cada vez más gente ve tu sitio web en sus dispositivos móviles.
Bootstrap funciona con un sistema de cuadrícula de 12 columnas. Hay 12 columnas y un elemento del sitio web puede ocuparlas todas. Por ejemplo, un párrafo entero puede ocupar 12 columnas, o una imagen puede ocupar cuatro columnas y el texto ocho columnas.
Bootstrap es mobile-first y utiliza principios de diseño responsivo. «Mobile-first» significa que el CSS se escribe teniendo en cuenta los dispositivos móviles. Cada vez más personas consumen contenido en sus dispositivos móviles, por lo que es crucial que cualquier sitio web que construyas priorice a los usuarios móviles, lo que significa que tu front-end se puede navegar fácilmente utilizando un dispositivo móvil.
Cómo utilizar bootstrap en moodle
Para configurar tu tema, necesitarás saber qué colores quieres usar. Deberías tomar nota de qué colores quieres usar, una lista completa de colores universalmente soportados está disponible en [1]. Ten en cuenta que CSS es un lenguaje exacto – Gris Oscuro funcionará mientras que Gris Oscuro no.
Las mejores prácticas para elegir un esquema de color es hacer que tu fondo sea de un color claro, tu texto de un color oscuro, y los colores de tus enlaces algo intermedio entre los dos. Nunca debe haber dos colores iguales o casi iguales. También debe evitar los colores de alto contraste, como un fondo rojo con texto azul, que puede ser increíblemente difícil de leer.
Ahora que has copiado el tema por defecto, y elegido los colores para tu nuevo tema, es el momento de empezar a dar estilo a la nueva página. Abre el archivo ‘styles_color.css’ dentro de la carpeta que creaste en el primer paso dentro de tu editor de texto. Si desea utilizar el editor integrado en Windows, puede acceder a este programa visitando Inicio > Todos los programas > Accesorios > Bloc de notas.
