Moodle y Bootstrap 4

Jueves, 14 Noviembre 2019 03:54

¡Moodle nunca se ha visto mejor! Adaptable a todos los dispositivos y navegadores, sobre la interfaz de usuario más popular de la red

Además de las nuevas características y mejoras, los usuarios de Moodle 3.5 pueden disfrutar de la rapidez y simplicidad de Bootstrap.

Moodle y Bootstrap 4
 

Estas mejoras están disponibles a través de Bootstrap 4, la versión más nueva de Bootstrap que se incluye en Moodle 3.5 como estándar.

Moodle 3.5 se puede descargar de forma gratuita desde moodle.org.

¿Qué es Bootstrap?

Bootstrap es el marco de trabajo HTML, CSS y JavaScript más popular para desarrollar sitios web adaptables a dispositivos móviles.

Hoy en día los elementos UI para el diseño de interfaz de usuario toman una gran importancia en el diseño web. Frameworks como Bootstrap y Foundation son un ejemplo claro de ello, con un diseño de interfaz que tiene acabados minimalistas, estilos flat, colores brillantes, tipografías claras, botones con un minimalismo y simpleza que nos da un enfoque más claro hacia el diseño web centrado más en las necesidades del usuario sin permitir distracciones. Bootstrap es el marco de trabajo HTML, CSS y JavaScript más popular para desarrollar sitios web Responsive para dispositivos móviles.

La inclusión de Bootstrap 4 en el entorno moodle mejora la experiencia del usuario de forma significativa con respecto a versiones anteriores. Esta versión está basada en el trabajo de diseño del equipo UX de Moodle y los comentarios de la amplia comunidad de usuarios que presenta la plataforma de código abierto.

¿Cómo puede mejorar Moodle?

Los usuarios de Moodle 3.5 pueden disfrutar de mejoras que incluyen:

  • Cursos matriculados mejorados por imágenes
  • Opciones de tema mejoradas
  • Imágenes del curso en el tablero
  • Aparecen patrones de colores si no se ha subido ninguna imagen a la configuración del curso
  • Nuevos íconos para enlaces de cursos y resaltados en enlaces al hacer clic en
  • Nuevas fuentes

¿Cómo se usa Bootstrap en Moodle 3.5?

Al usar Moodle 3.5, al ver su tablero, un maestro puede ver qué cursos inscritos se han mejorado con imágenes. Si no se ha cargado ninguna imagen, aparecerá un patrón de color en su lugar.

Moodle 3.5 bootstrap

Moodle 3.5

La ruta de navegación de Moodle 3.5 tiene nuevos íconos que continúan en el curso. Además, para mejorar la usabilidad, los enlaces se resaltan cuando se hace clic en ellos.

Moodle 3.5

Moodle 3.5 bootstrap

Para experimentar los beneficios de Bootstrap 4, puedes descargar Moodle 3.5 de forma gratuita desde moodle.org. o explorar la cantidad de temas gratuítos basados en Bootstrap que ha desarrollado la comunidad.

El tema que usemos en Moodle es de suma importancia para el proyecto educativo que queramos desarrollar.

Entre las características que debe tener un tema, estas son las que considero importantes:

  1. Ligero: que cargue lo más rápido posible. Moodle es bastante pesado, no le agregues más carga al servidor.
  2. Siempre actualizado: Moodle está en constante cambio, es necesario un tema que vaya de la mano.
  3. Agradable a la vista: reconozcámoslo, Moodle es un tanto simplón y feo. Aunque ha mejorada mucho en la versión 3, le falta mucho ? . Recuerda todo entra por la vista.
  4. Que sea libre: aunque libre no siempre es gratis, es necesario que podamos modificarlo de acuerdo a nuestras necesidades, con un poco de dedicación y conocimiento.
  5. Diseño responsivo: debe ser adaptable a dispositivos móviles. ¿Quién quiere dejar de lado a los millones de personas que acceden por tabletas o celulares?

El tema predeterminado de Moodle a partir de la versión 3.2 es de los mejores, por su simplicidad y sencillez.

Boost se basa en el famoso framework Bootstrap 4, lo que le concede rapidez y actualidad a todos sus elementos de diseño y componentes.

Entre sus ventajas tenemos:

  1. No es necesario instalarlo, viene de serie con Moodle.
  2. Código limpio y bien optimizado.
  3. Adaptable: es como un libro abierto, el cielo es el límite.
  4. A quienes les fascine el blanco como color principal de un tema, lo amarán.
  5. La barra superior es fija (sticky bar) y nos acompaña durante la navegación. Esto permite que los elementos que estén en ella, estén siempre disponibles.
  6. Me gusta la adaptabilidad de la barra izquierda, permitiendo plegarla y tener así el ancho completo de la pantalla a la disposición.
  7. Es totalmente adaptable y busca armonizar la experiencia entre la versión de escritorio y dispositivos móviles.

Como desventaja (si así se les puede llamar), te diría que por ser un tema estándar lo encontrarás en muchos Portales, parecen clones. Te recomiendo lo personalices al menos un poco.

Si este artículo te pareció interesante, compártelo en las redes sociales!      

L. Javier Gil

Programador web Freelance.
Ingeniero en Telecomunicaciones.
Comparto curiosidades y noticias del mundo digital desde el corazón de Chapinero, en la lluviosa Bogotá, o desde un rinconcito de la vieja España llamado Benavente.
Blog de Este Gráfico

https://www.estegrafico.com

Artículos relacionados:

Diseño Web
Diseño Web para institución educativa
L. Javier Gil

Diseño de página web imagen corporativa y publicidad para redes sociales

Diseño Web para institución educativa
Noticias de proyectos
Curso online, diseño web
L. Javier Gil

El pasado mes he estado desarrollando un sitio web un tanto marketer, orientada a conseguir matrículas en un curso presencial, tipo master class para profesional sanitario. He integrado una pasarela de pago y orientado los estilos de Twitter Bootstrap a la captación de Leads.

Curso online, diseño web
Noticias de proyectos
Plataforma de formación online
L. Javier Gil

Este mes de noviembre he estado desarrollando, entre otros, el sitio web fedefarmaformacio.cat, la edición del 2014. Se trata de una plataforma de formación online para farmacéuticos.

Plataforma de formación online