Evolución en los estilos de eXeLearning

Vie, 12 diciembre 2014, 11:27

Desde la última versión de eXeLearning (2.0 y 2.0.1) el sistema de estilos se ha renovado completamente. Los estilos base se mantienen, pero su estructura interna así como su comportamiento y la forma de importación sufren cambios sustanciales.

Los estilos renovados cuentan con un archivo .xml en donde figura su autor, sus características básicas, su compatibilidad con las diferentes versiones…, siendo más sencilla su adaptación, importación y exportación, a la espera de la creación de un repositorio remoto de estilos en eXeLearning.net en donde todos los usuarios puedan compartir sus creaciones y adaptaciones.

Estilos adaptables (RWD, responsive web design)

El diseño web adaptable o adaptativo, conocido por las siglas RWD (del inglés, Responsive Web Design) es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla. Hoy día las páginas web se visualizan en multitud de tipos de dispositivos como tabletas, smartphones, libros electrónicos, portátiles, PCs… Además, aún dentro de cada tipo, cada dispositivo tiene sus características concretas: tamaño de pantalla, resolución, potencia de CPU, capacidad de memoria… Esta tecnología pretende que con un solo diseño web, tengamos una visualización adecuada en cualquier dispositivo (de Wikipedia).

pc
Vista de exportado HTML en un PC
Vista de un exportado HTML en un tablet
Vista de un exportado HTML en un tablet
vista móvil
Vista de un exportado HTML en un Smartphone

Teniendo en cuenta esta filosofía, desde eXeLearning.net se han evolucionado los estilos INTEF, EducaMadrid y Max para que las exportaciones HTML y HTML5 de los contenidos creados con estos estilos se adapten al dispositivo en el que son visualizados, ajustando el menú o índice, el tamaño de la letra, así como las imágenes y contenidos multimedia que incorporen.

Gestor de estilos.

Dentro del menú Utilidades > Gestor de estilos se ha incorporado una herramienta visual para importar, exportar, borrar y acceder a la información básica de cada estilo.

gestor de estilos
Gestor de estilos

De una manera sencilla podremos gestionar el número de estilos que vamos a utilizar, pudiendo borrar aquellos que no queremos que estén presentes para facilitar su selección sin necesidad de instalarlos accediendo a carpetas del sistema como se hacía anteriormente.

Modificar y personalizar un estilo.

Aunque pueden existir soluciones diferentes para personalizar un estilo (cambiar los iconos, colores, tamaño de letra…) utilizando el gestor de estilos podremos crear uno nuevo con unos sencillos pasos. Para ello, abrimos el gestor de estilos y exportamos el que queramos modificar. Nos pedirá el nombre del archivo zip con el que queremos exportarlo.

Una vez exportado y antes de hacer cualquier modificación, deberemos abrir el archivo config.xml y en la línea 3 modificar el nombre que se encuentra entre las etiquetas “name”.

Con estos sencillos pasos tendremos un nuevo estilo. Ahora podremos modificar los iconos incorporando los nuevos con el nombre de los anteriores, por ejemplo, y si conocemos CSS, modificar colores, tamaño de letra…, haciendo los cambios correspondientes en content.css y nav.css.

Por último, y una vez realizadas todas las adaptaciones, lo incorporaremos a eXeLearning utilizando el gestor de estilos y el botón “Importar”.

La evolución.

Desde eXeLearning se está trabajando en dos vías para mejorar el trabajo con los estilos, facilitando su adaptación y difusión.

Por un lado se está creando un repositorio de estilos accesible online a través de la herramienta instalada, de manera que cualquier persona desde el gestor de estilos pueda descargarse los existentes del listado e incorporarlos a su aplicación de manera automática.

importador de estilos
Importador de estilos desde repositorio.

Otra de las vías de desarrollo es la creación de una herramienta de adaptación de estilos en donde el usuario de manera automática pueda seleccionar colores, tamaño y tipo de letra, fondos, dimensiones, encabezados, iconos… todo de una manera visual, sencilla y sin conocimientos de CSS. Podrás crear estilos personalizados de una manera rápida y sin esfuerzo.

estilos personalizados
Creación de estilos personalizados

Pero todo esto lo veremos en el próximo año 2015 gracias al trabajo del equipo de eXeLearning.net y de los colaboradores que hacen las pruebas y aportan ideas.

¿Es un buen regalo de los Reyes Magos?

Más información en el manual de eXeLearning 2.0

Micrófono cabecera: Shure SM58Elías Gómez. CC by sa

Si quiere más información o consultarnos dudas sobre esta entrada póngase en contacto con nosotros.