Logo

Better Aules

Ver Better Aules
Tipo
Personalización de interfaz
Periodo
2023 — Actualidad

Hoja de estilos CSS que mejora la experiencia de la plataforma Aules de la GVA con una interfaz más limpia y personalizable.

Tecnologías

  • CSS
  • Stylus

Dos vistas, un mismo proyecto.

Interfaz de Better Aules
Interfaz original de Aules
Aules originalBetter Aules

El problema de Aules

La interfaz original de Aules contiene demasiado ruido visual, ofrece pocas opciones de personalización y le falta un modo oscuro para aquellos que no queremos comprometer nuestra visión al acceder a la plataforma en ambientes oscuros. Así que por 2023 decidí embarcarme en una aventura.

Comienzo de Better Aules

Por allá en 2023, estaba aburrido en clase y, al estar tan cansado de ver la misma interfaz blanca y fea, me puse a trastear con el inspeccionar elemento del navegador cambiando poco a poco el estilo de la dashboard de Aules.

La prueba que hice tocando el inspeccionar elementoLa prueba que hice tocando el inspeccionar elemento

Es ahí cuando se me enciendo una bombilla y dije "¿por qué no hacer un estilo incrustable que cambié toda la página de Aules?".

Así que eso es lo que hice. El mismo día en el que hice lo de inspeccionar elemento, es cuando decidí comenzar a construir esa extensión y, en solo una tarde, ya había cubierto la pantalla de inicio de sesión y la dashboard de usuario. Así que, en días posteriores, mi misión se enfocó totalmente en abarcar todas las zonas posibles de Aules para estilizarlo todo en modo oscuro y, en general, mejorar el diseño de Aules.

Aunque, en algún punto de 2024, este estilo dejó de servir, ya que la Generalitat actualizó la versión de Moodle que usaba Aules y, asimismo, actualizaron el diseño de la plataforma, por lo que la mayoría de cosas se rompieron. Además, hubo otro problema y es que cuando este tema aún era usable, solo estaba el modo oscuro. Sí es verdad que hice una versión en modo claro, pero nunca le llegué a dar el mismo mimo que al modo oscuro.

El renacimiento: Better Aules V2

Después de un año de inactividad, decidí meterme (de nuevo) en la aventura de estilizar Aules, pero esta vez lo iba a hacer desde cero y bien pensado. Buscaba cumplir unas cuantas cosas:

  • Mejorar tanto la interfaz como la experiencia de usuario.
  • Soportar tanto un modo claro como un modo oscuro.
  • Soportar distintas fuentes.
  • Poder elegir el color de acento.

Y, efectivamente, lo cumplí.

Con Better Aules V2, toda la lista de checks fue cumplida. Gracias a la extensión Stylus es que es posible esta hazaña, ya que gracias a su UserCSS es que se han podido realizar cosas como un selector de color de acento, elegir entre que aspecto quieres, elegir que tipografía quieres usar y, adicionalmente, un modo en el que se desactivan todos los border-radius que hayan en toda la página.

El menú de Stylus que aparece con el estiloEl menú de Stylus que aparece con el estilo

Actualidad

Al no ser ya un estudiante, mi Aules está vacío y como tal no tengo la necesidad de usarlo o, siquiera, de seguir manteniéndolo. Pero, gracias a mis amigos, es que voy a intentar mantener este estilo y arreglar si en cualquier momento la Generalitat sigue tocando cosas y fastidiando de forma indirecta el estilo. De igual forma, el estilo es totalmente open-source, ya que al descargar el estilo mismamente puedes ver el código entero.

Siguiente proyecto / 01

Taskly