Categoría: Software libre (Página 1 de 2)

Visor Web-ZIP: Publica y comparte tus recursos educativos desde tu almacenamiento favorito en la nube

29 de enero de 2026 / Juan José de Haro / 1 comentario

Visor Web-ZIP proporciona una dirección de Internet permanente para los recursos creados como página web, eXeLearning, SCORM 1.2, H5p, documentos (PDF, DOCX, Markdown, texto) y cualquier otro tipo de archivo. Estos recursos pueden estar en cualquier parte, siempre que dispongan de un enlace público de descarga como en Google Drive, Dropbox, Nextcloud, un servidor propio, etc.

El objetivo del Visor es actuar como un medio de distribución universal de materiales educativos digitales, sin necesidad de servidores ni servicios web de ningún tipo, solo con los sistemas de almacenamiento en la nube que utilizamos cada día.

El proceso es bien sencillo y se resume en tres pasos:

Subir los recursos educativos digitales al Visor, el cual nos devolverá un único archivo en formato ZIP.
Subir el archivo creado por la aplicación a un sistema de almacenamiento como Drive, Dropbox, etc. y compartirlo públicamente.
Pegar la dirección en el visor y copiar la dirección que nos proporciona para compartirla con otros. De este modo, cualquiera podrá ver nuestro recurso en su navegador.

1. Subir el recurso al Visor

Archivos y carpetas del ordenador

Si tenemos carpetas con documentos, páginas web, etc., o archivos sueltos, deberemos arrastrarlos al espacio «Sube tu recurso», esta acción nos permitirá descargar un archivo comprimido con extensión ZIP que subiremos a nuestro servicio en la nube para compartirlo con todos.

Código HTML, típicamente creado por una inteligencia artificial.

Cuando le pedimos una actividad y otros recursos a una IA, muchas veces nos lo proporciona en forma de código HTML, es decir, en formato de página web. En estos casos podemos copiar y pegar directamente en el visor el código. El visor nos generará un archivo que podremos subir a nuestra nube para compartirlo con todos.

Recursos que no necesitan ser subidos al Visor.

Hay recursos que nos permiten utilizarlos directamente y los podremos subir a nuestra nube para compartirlos sin pasar previamente por el Visor. Aunque, como veremos más adelante, si queremos añadir restricciones de acceso por fecha, cambiar su título, etc., entonces sí que deberemos hacerlo. Entre estos recursos se encuentran los siguientes:

Archivos ZIP, creados por algún medio, que ya contienen nuestro recurso, por ejemplo, con eXeLearning y también los creados en el formato SCORM 2.1.
Archivos ELPX. Son los archivos de trabajo de eXeLearning en la versión 3 y superiores.
Archivos H5p. Son los archivos de actividades creados por programas como Lumi.

Opciones y descarga

Una vez que hemos subido las carpetas y archivos o hemos pegado el HTML, aparecerá más información donde podremos modificar diferentes opciones.

Resumen del contenido cargado. Nos da el listado de archivos que hemos subido, su tipo y el visor que se generará para ellos. Más adelante se habla de los tipos de visores.
Opciones. Aquí podemos modificar:
- El título del recurso, que saldrá en el gestor de recursos y, dependiendo de cuál sea, también en el visor.
- Configurar la disponibilidad del recurso. Nos permite limitar por fechas y horas la apertura y cierre del recurso compartido. También nos permite decidir qué opciones estarán activas en el gestor de recursos del usuario. Una vez se alcanza la fecha de cierre, el recurso es eliminado del navegador, por lo que ya no se podrá volver a abrir.
- Forzar visor de carpetas. Hace que nuestro recurso, cuando es visualizado por los usuarios, aparezca siempre como archivos y carpetas, aunque sea de un tipo que tiene visor propio (por ejemplo, páginas web o documentos DOCX). Esto puede ser útil para que, en lugar de visualizar el contenido, se pueda descargar todo el material de una vez para trabajar con él.

Una vez hemos configurado las opciones (también podemos decidir no hacer nada con ellas), un botón de previsualizar nos permite ver cómo quedará. La opción Aplicar restricciones permite ver qué sucede si el recurso no está abierto, por ejemplo.

El botón Crear y descargar nos permite bajar el recurso a nuestro ordenador, listo para ser subido a la nube y compartido con todos.

Si ya tenemos archivos ZIP, ELPX o H5p, podemos igualmente subirlos al Visor para añadirles alguna de las opciones disponibles, o sea que podemos hacer, por ejemplo, que una actividad H5p tenga fecha de caducidad o que un archivo de eXeLearning se pueda visualizar, pero no descargar. En este caso también debemos pulsar el botón Crear y descargar, y el archivo que obtendremos llevará las restricciones incorporadas.

2. Subir el archivo proporcionado por el Visor a un sistema de almacenamiento y compartirlo públicamente.

El siguiente paso simplemente es subirlo al sistema que habitualmente utilicemos para trabajar en la nube (Drive, Dropbox, Nextcloud, etc.) y compartirlo de forma que todos tengan acceso de lectura.

Para no tener que dar permisos a cada recurso que subamos, lo más sencillo es crear una carpeta con este fin y compartirla para que todos puedan acceder. De este modo, cualquier archivo que coloquemos en ella ya dispondrá de los permisos necesarios.

Hemos comprobado que OneDrive no funciona bien, ya que no permite descargar automáticamente sus archivos aunque sean públicos, cosa que es necesaria para que los usuarios puedan acceder desde el Visor.

3. Pegar la dirección en el Visor y copiar la dirección que nos proporciona para compartirla con otros.

Una vez que tenemos el recurso en formato ZIP, ELPX o H5p compartido, lo pegaremos en el espacio que tiene el Visor en la parte inferior de su página principal:

Pulsamos el botón Crear enlace y al cabo de un rato obtendremos el enlace que deberemos proporcionar a todos los que quieran ver nuestro recurso:

Disponemos de un botón para copiar el enlace, otro para crear un código QR, el tercero es para insertar nuestro recurso en una página web mediante un Iframe y el último para ver el recurso tal como lo verán los usuarios en su estado final.

Tipos de visores

Esto es información adicional y no es necesario conocerla, pero el Visor WebZip dispone de cuatro tipos de visores según los archivos que hemos subido:

Visor web: Este visor no es visible para el usuario, ya que lo que hace es mostrar una página web. Aquí tienes un ejemplo con un Tetris hecho con IA (Codex). En este otro ejemplo tienes un recurso educativo creado con Gemini.
Visor H5p. Es el que aparece cuando hemos cargado un recurso de este tipo. Todos los ejemplos que hemos probado han funcionado bien, pero según Codex podría fallar en algunos casos, por lo que aconsejamos utilizar la vista previa antes de subir el archivo a nuestro sistema de almacenamiento. Puedes ver aquí un ejemplo de este tipo.
Visor de documentos. Cuando subimos al Visor documentos de este tipo: PDF, DOCX, MD (Markdown) o TXT (texto plano) se crea automáticamente. Aquí tienes un ejemplo que incluye varios documentos de este tipo mezclados. El orden en el que aparecerán es alfabético según el nombre del archivo. Si deseamos un orden concreto, lo más sencillo es numerarlos. Los documentos pueden estar en carpetas y subcarpetas, pero estas no se mostrarán al usuario.
Visor de archivos. Cuando subimos una mezcla de diferentes tipos, sean del tipo que sean, ya que admite cualquier tipo, se crea este tipo de visor. Nos muestra la estructura de carpetas y dentro de cada una los archivos que contienen. Algunos, como los PDF, imágenes, sonidos, vídeo, etc., se pueden visualizar directamente, otros solo se pueden descargar. Dispone de un buscador y podremos descargar archivos sueltos, subcarpetas individuales o todo a la vez. Podemos forzar que cualquier recurso se vea de esta forma a través de las opciones que hemos comentado antes. Aquí tienes un ejemplo con los documentos del visor de documentos en diferentes carpetas donde se ha forzado el modo visor de archivos.

Gestor de archivos

En el gestor de archivos tenemos acceso a todos los recursos no caducados que han sido guardados en nuestro navegador, tanto los creados por nosotros mismos, como los que hemos abierto de otras personas. Si el recurso tiene fecha de caducidad, desaparecerá definitivamente de nuestro navegador, sin posibilidad de recuperarlo aunque lo volviésemos a descargar usando su enlace público.

Los recursos caducan cuando hace un mes que no se han abierto o si alcanzamos el 70% del espacio disponible.

Estos límites los podemos modificar a través del icono de configuración. Debemos tener en cuenta que los recursos están almacenados en el navegador con el que lo hemos abierto. Si los hemos abierto en Chrome y cambiamos a Firefox, aparecerán en el primero, pero no en el segundo. Si utilizamos diferentes sesiones en Chrome, solo saldrán en la sesión en la que los hayamos abierto.

Para cada recurso disponemos de una batería de iconos que nos permiten realizar todo tipo de acciones con ellos, desde cambiarles el nombre, hasta visualizarlos, obtener el enlace para compartir o descargar el recurso original de la nube, entre otros. Según los permisos otorgados en las opciones, antes de crear el enlace para compartir, unos iconos estarán habilitados y otros no.

Actualizaciones

Si hemos subido un recurso a nuestro sistema de almacenamiento, bastará con reemplazarlo por una versión nueva para que el usuario reciba un mensaje de actualización (además, se puede forzar la actualización desde el gestor de recursos, aunque esto no es necesario en realidad). Es importante destacar que no debemos eliminar el recurso original y luego subir la actualización, sino que hay que reemplazarlo (subirlo al mismo sitio con el mismo nombre y, cuando nos pregunte si lo queremos reemplazar, responderemos que sí, de este modo nos mantiene el mismo enlace).

Resumen

Con este programa se soluciona el problema de dónde publicar los recursos creados como página web y otros formatos para poder compartirlos libremente, sin problemas y sin dedicarles tiempo.

Nota: El texto de este artículo tiene nivel 0 en el Marco para la integración de la IA generativa.

Licencias libres para docentes: apps educativas y materiales didácticos

5 de septiembre de 2025 / Juan José de Haro / 1 comentario

Como docente que crea materiales digitales, todo lo que produces está automáticamente protegido por derechos de autor. Sin una licencia clara, nadie puede usar legalmente tus creaciones, ni siquiera otros profesores de tu centro.

Las licencias libres son tu manera de decir: «Puedes usar esto, pero bajo estas condiciones».

Dos tipos de creaciones, dos tipos de licencias

En tus proyectos educativos mezclas dos cosas diferentes que necesitan licencias distintas:

Código (la parte técnica)

Todo lo que hace que funcione tu creación digital:

Una aplicación web para que los alumnos practiquen matemáticas.
Un formulario automático que califica ejercicios.
Una plantilla de Moodle personalizada.
Un script que genera gráficas automáticamente.

Contenidos (la parte educativa)

El material didáctico que creates:

Los textos explicativos de la aplicación.
Las actividades y ejercicios.
Los vídeos tutoriales.
Las imágenes y diagramas.
Las rúbricas de evaluación.

¿Por qué licencias diferentes? Porque el código necesita permisos especiales (ejecutar, compilar, redistribuir) que no tienen sentido para un texto o una imagen.

Licencias para contenidos educativos (lo más importante para ti)

CC BY-SA – Atribución + compartir igual

Qué significa: «Úsalo libremente, menciona mi autoría, y si lo modificas, compártelo con la misma licencia».

Ejemplo práctico: Tu infografía del sistema solar puede ser mejorada por otros, pero deben compartir esa versión mejorada con la misma libertad.

Ventaja: Garantiza que las mejoras vuelvan a la comunidad docente. Alineación: Coherente con los principios de participación activa y colaboración.

CC BY – Atribución simple

Qué significa: «Úsalo libremente, solo menciona que soy el autor».

Ejemplo práctico: Creas una infografía sobre el sistema solar. Cualquier profesor puede usarla, modificarla o incluirla en un libro, solo debe poner tu nombre.

Ventaja: Máxima difusión de tu trabajo. Inconveniente: Alguien podría cerrar las mejoras sin compartirlas.

CC BY-NC-SA – Con restricción comercial

Qué significa: Lo mismo que BY-SA, pero prohíbe usos comerciales.

Problema: «Comercial» genera dudas. ¿Puede usarlo un centro privado? ¿En una plataforma con publicidad? ¿En un curso que cobra matrícula? Por eso muchas instituciones la evitan.

Recomendación: Mejor evitar «NC» para no limitar usos educativos legítimos.

Licencias para código (si creas aplicaciones o herramientas)

AGPL v3 – Garantiza reciprocidad también en la web

Qué significa: «Si usas mi código para ofrecer un servicio a través de una red (por ejemplo, una aplicación educativa en un servidor web), debes compartir también las modificaciones con la misma licencia».

Ejemplo práctico: Creas una aplicación web para practicar matemáticas. Si alguien la mejora y la ofrece a sus alumnos desde su propio servidor, debe publicar esas mejoras.

Ventaja: Asegura que las mejoras vuelvan a la comunidad incluso cuando el código no se redistribuye directamente, sino que se usa como servicio online.

Alineación: Refuerza la filosofía de conocimiento abierto en el contexto actual, donde muchas aplicaciones educativas se ofrecen como páginas web.

MPL 2.0 – Copyleft moderado

Qué significa: «Si modificas estos archivos específicos, debes compartir esas modificaciones, pero puedes combinar con código cerrado».

Ejemplo práctico: Si mejoras tu calculadora web, solo debes compartir los archivos que modificaste, no todo el proyecto.

Ventaja: Equilibrio entre reciprocidad y flexibilidad de integración. Alineación: Copyleft parcial, menos restrictivo que AGPL v3.

Apache 2.0 – Máxima adopción, sin reciprocidad

Qué significa: «Usa este código como quieras, pero si contribuyes, no podrás demandarme por patentes después».

Importante: NO obliga a compartir mejoras. Permite que otros cierren las modificaciones.

Ventaja: Muy compatible con proyectos institucionales y comerciales. Inconveniente: Las mejoras pueden no volver a la comunidad.

MIT – Simple pero sin protecciones

Qué significa: «Usa este código como quieras, solo menciona mi autoría».

Limitaciones: No protege contra patentes ni garantiza reciprocidad.

Tablas comparativas

Licencias de código: enfoque en reciprocidad

Licencia	Garantiza retorno a la comunidad	Filosofía	Apreciación educativa
AGPL v3	✅ Sí, total (incluye uso en red)	Conocimiento abierto en la web	Recomendada para apps educativas ofrecidas como páginas web, asegura que las mejoras se compartan aunque no haya redistribución del código
MPL 2.0	✅ Sí, parcial	Copyleft moderado	Adecuada para colaboración entre docentes, equilibrando retorno y flexibilidad
Apache 2.0	❌ No	Adopción sin barreras	Útil para instituciones que buscan adopción amplia sin exigir retorno obligatorio
MIT	❌ No	Simplicidad máxima	Muy práctica para docentes que desean difundir recursos sin condiciones

Licencias de contenidos: enfoque educativo

Licencia	Garantiza retorno	Uso comercial permitido	Modificación permitida	Recomendación para docentes
CC BY-SA	✅ Sí	✅ Sí	✅ Sí	Ideal – Fomenta intercambio educativo
CC BY	❌ No	✅ Sí	✅ Sí	Buena para máxima difusión
CC BY-NC-SA	✅ Sí	❌ No	✅ Sí	Problemática – “Comercial” genera ambigüedades

Licencia	Enlace
CC BY-SA 4.0	https://creativecommons.org/licenses/by-sa/4.0/
CC BY 4.0	https://creativecommons.org/licenses/by/4.0/
CC BY-NC-SA 4.0	https://creativecommons.org/licenses/by-nc-sa/4.0/
AGPL v3	https://www.gnu.org/licenses/agpl-3.0.html
MPL 2.0	https://www.mozilla.org/en-US/MPL/2.0/
Apache 2.0	https://www.apache.org/licenses/LICENSE-2.0
MIT	https://opensource.org/licenses/MIT

Combinaciones recomendadas según tu objetivo

Para garantizar reciprocidad (recomendado)

Contenidos: CC BY-SA
Código: AGPL v3

Para: Proyectos alineados con el conocimiento abierto y la participación activa. Asegura que las mejoras vuelvan a la comunidad educativa.

Para máxima adopción institucional

Contenidos: CC BY
Código: Apache 2.0

Para: Cuando priorizas que tu trabajo se use ampliamente, incluso si las mejoras no regresan.

Opción intermedia

Contenidos: CC BY-SA
Código: MPL 2.0

Para: Copyleft moderado en código (solo archivos modificados deben compartirse) con reciprocidad total en contenidos. Más flexible para integraciones institucionales que AGPL v3.

Casos prácticos para docentes

Caso 1: App de ejercicios de matemáticas

Tu creación: Una aplicación web donde los alumnos resuelven ecuaciones. Licencias:

Código de la aplicación → AGPL v3
Ejercicios y explicaciones → CC BY-SA

Caso 2: Presentación interactiva

Tu creación: Una presentación con animaciones en JavaScript. Licencias:

Scripts de animación → AGPL v3
Contenido de las diapositivas → CC BY-SA

Caso 3: Material imprimible

Tu creación: Fichas de trabajo en PDF. Licencia: Solo CC BY-SA (no hay código)

Preguntas frecuentes de docentes

P: ¿Puedo ganar dinero vendiendo material con CC BY-SA? R: Sí, puedes vender tu trabajo. CC BY-SA no prohíbe ganar dinero, solo obliga a mantener la misma licencia en las modificaciones.

P: ¿Qué pasa si uso imágenes de Internet en mis materiales? R: Debes respetar la licencia de cada imagen. Usa bancos de imágenes con licencias claras como Unsplash (tipo CC BY) o Pixabay.

P: ¿Es obligatorio poner licencias? R: No es obligatorio, pero sin licencia nadie puede usar legalmente tu trabajo. Si quieres que se comparta, pon licencia.

P: ¿AGPL v3 limita la adopción de mi código? R: Puede limitarla en entornos que prefieren cerrar sus modificaciones, pero garantiza que las mejoras vuelvan a la comunidad educativa. Es una decisión de valores: ¿prefieres máxima adopción o reciprocidad?

P: ¿Puedo cambiar la licencia de un material que he creado o adaptado? R: Depende del origen del material. Si es tu trabajo original, puedes cambiar la licencia para versiones futuras, pero las ya publicadas mantienen su licencia. Si has adaptado trabajo de otros, debes respetar la licencia original: adaptar material CC BY-SA obliga a que tu versión sea CC BY-SA también.

P: ¿Qué licencia debo elegir en GitHub si mi repositorio incluye código y materiales educativos? R: Lo más claro es no seleccionar ninguna licencia en el asistente de GitHub. Después, en tu repositorio:

Cómo aplicar las licencias

Para contenidos educativos (Creative Commons u otras):

Añade en la página principal o en un lugar destacado de tu proyecto un texto claro indicando la licencia elegida (por ejemplo: «Esta obra está bajo licencia [nombre de la licencia]»).
Incluye el enlace oficial a la licencia correspondiente.
Si es posible, acompáñalo con el icono oficial de la licencia (Creative Commons, etc.).

Para código (AGPL, Apache, MIT, MPL u otras):

Añade en la misma página principal o en un lugar destacado de tu proyecto una mención clara a la licencia elegida para el código, junto con el enlace oficial.
Incluye el archivo LICENSE.txt con el texto completo de la licencia.
Añade una nota breve al inicio de cada archivo de código indicando la licencia.
Menciona la licencia también en la documentación del proyecto.

Recomendación final

Para docentes comprometidos con el conocimiento abierto y la reciprocidad:

Contenidos educativos: CC BY-SA 4.0
Código: AGPL v3

Esta combinación garantiza que tu trabajo y las mejoras que otros hagan permanezcan abiertas para toda la comunidad educativa, fomentando la participación activa y la colaboración.

Generador de licencias para recursos educativos abiertos (REA)

Aquí tienes una utilidad con la que puedes elegir las licencias que quieres. Obtendrás un texto que puede ser pegado en un documento de texto, un prompt que puedes usar para que la IA cree automáticamente las licencias de uso y un bloque HTML que puedes pegar directamente en una página web.

(Ver la aplicación en una pestaña nueva)

Vídeo resumen creado por NotebookLM

Nota: Este artículo tiene nivel 4 en el Marco para la integración de la IA generativa.

Cómo hacer diagramas en árbol con IA y Markmap (organizadores gráficos)

3 de noviembre de 2024 / Juan José de Haro / 2 comentarios

Hacer diagramas en árbol, como mapas mentales y conceptuales, con el uso de IA generativa de texto como ChatGPT, Claude o incluso en NotebookLM es una tarea muy sencilla si utilizamos Markmap.

En este artículo te explicamos como hacerlo en 3 sencillos pasos: Generar el diagrama con la IA, crear el gráfico con Markmap y bajarlo al ordenador (o hacer captura de pantalla).

Markmap es un programa basado en software libre y está directamente relacionado con el formato Markdown, que es el formato utilizado por todas las IA cuando copiamos el texto que generan a través del botón copiar. Si te interesa saber más sobre Markdown, consulta el artículo Markdown: el formato oculto tras el texto de la IA. Cómo activarlo en Google Docs y otros editores para trabajar con él.

Este código, que copiamos directamente del chat de la IA, lo podemos utilizar para crear un diagrama en árbol con Markmap. Markmap convierte en un gráfico cualquier texto Markdown que le peguemos en el lado izquierdo del editor.

Veamos cómo. Hemos realizado los ejemplos con Claude, pero se puede utilizar ChatGPT y otras IA de texto.

1. Generar el diagrama en árbol en forma de lista

Lo único que necesitamos es pedirle a la IA un mapa conceptual en forma de lista.

Hemos elaborado este prompt con el GPT Úrsula, que está especializada en crear prompts educativos, pero otro prompt también serviría:

Eres un experto en diseño de mapas conceptuales con formación en educación y conocimientos en organización de contenidos de aprendizaje. Tu tarea es ayudar al usuario a crear un mapa conceptual en formato de lista para organizar de forma jerárquica y clara las ideas principales.

1. Pregunta al usuario sobre el tema, concepto o texto específico que quiere estructurar en el mapa conceptual. NO digas nada más y espera la respuesta.

2. Pregunta cualquier otra información adicional que consideres relevante para organizar el contenido de forma lógica y jerárquica.


Con la información proporcionada, organiza el contenido en un mapa conceptual en forma de lista Markdown, encabezada por el título del mapa.

Cuando escribas la lista Markdown, asegúrate de no decir absolutamente nada más y escribir únicamente la lista.
 
Asegúrate de que la estructura esté claramente organizada y jerárquica.

Aquí tenemos un ejemplo con Claude:

2. Crear el diagrama

En la parte inferior de la última respuesta encontraremos el botón para copiarla, y pegaremos la respuesta completa en la web de Markmap.

Si hemos utilizado el prompt anterior, nos saldrá la lista que le hemos pedido limpia, sin más texto. Si has usado otro prompt es posible que salga más texto de la IA dando explicaciones de lo que ha hecho; en ese caso, lo mejor es borrar este texto extra que no aporta nada a nuestro diagrama.

Inmediatamente, aparecerá en el lado derecho el diagrama de árbol.

3. Bajar el diagrama

En este punto podemos hacer una captura de pantalla de lo que nos aparece en el lado derecho, aunque recomendamos bajarlo como HTML (busca donde pone: Download as interactive HTML en la parte inferior de la página) lo que nos proporcionará una página web en nuestro disco duro que podremos usar de varias formas. Si solo nos interesa el gráfico, abriremos la página haciendo doble clic sobre ella y haremos una captura de pantalla o lo imprimiremos como PDF.

Si tenemos los conocimientos suficientes, podremos incluir este mapa interactivo en nuestras páginas web, algo de lo que no nos podemos ocupar aquí porque no es el objetivo de este artículo.

MarkDownload – Markdown Web Clipper

Esta extensión para el navegador nos permite bajar o copiar cualquier texto de una página web en formato Markdown, de forma que bastará con copiar el texto con el que queremos hacer nuestro mapa mental y pegarlo directamente en Markmap.

Podemos instalar esta extensión siguiendo los enlaces:

Pódcast del artículo generado con IA

Si alguna cosa no ha quedado clara, en este pódcast te lo explican.

Uso de IA en este trabajo: Este artículo tiene nivel 1 en el marco MIAE.

HACKeXe: cómo aumentar el poder de eXeLearning

2 de junio de 2024 / Juan José de Haro / Sin comentarios

Guías de eXeLearning hay muchas, comenzando por su completísimo manual oficial. Pero es más complicado buscar soluciones avanzadas, basadas casi siempre en código JavaScript, CSS o HTML, para conseguir cosas que de momento eXe no permite de serie, como puede ser hacer un índice automático de todo el proyecto, o la creación dinámica de un código QR que automáticamente lleve a la página donde se encuentra publicado para que los oyentes lo puedan abrir en su móvil, por ejemplo.

En estos casos lo habitual suele ser consultar con los expertos y eso pasa por lanzar la pregunta en el grupo Telegram de eXeLearning para que lo respondan usuarios con conocimientos avanzados e incluso los programadores encargados de las actualizaciones y puestas al día del programa.

De las consultas y sus soluciones en este grupo surgió la idea de irlas recopilando en una web, soluciones que hemos ido incrementando con aportaciones propias. A estos fragmentos de código que realizan tareas muy concretas les hemos llamado recursos, de los que actualmente cuenta con 40, aunque este número se va incrementando poco a poco.

Aunque sea muy brevemente, quiero justificar la elección de TiddlyWiki en lugar de eXeLearning para alojar estos recursos. TiddlyWiki, que también es software libre como eXeLearning, tiene una especial habilidad y sencillez para trabajar como una base de datos. El uso de etiquetas, permite crear estructuras lógicas de recursos que se pueden agrupar en menús de navegación, lo que hace muy sencillo catalogar un mismo recurso en varias categorías y hacer que podamos llegar a una misma solución desde puntos de partida distintos. Por ejemplo, hay un recurso de código que permite resaltar la ruta de la página actual en el menú de navegación y podremos llegar tanto desde el apartado Accesibilidad, como desde Menú de navegación.

Modo de uso de HACKeXe

Para ir a la aplicación deberemos ir a la dirección: https://hackexe.tiddlyhost.com. En el menú lateral derecho (o en la parte superior si accedemos desde un móvil) veremos su menú principal:

Menú principal de HACKeXe con la categoría **Accesibilidad** desplegada.

Veremos las categorías principales que podemos desplegar para ver las páginas que contienen pulsando sobre el símbolo >. También podremos abrirlas y encontraremos las mismas páginas.

Encima de este menú hay un potente buscador que podremos utilizar para ir directamente a algún tema particular. Este buscador no es sensible a las mayúsculas y minúsculas, pero sí lo es a los acentos. Por lo tanto, si la palabra está acentuada, deberemos incluir su tilde.

Descripción de algunos botones útiles

Con este botón situado sobre el buscador, copiaremos la dirección de todas las páginas abiertas en ese momento. Si deseamos compartir solo una de las páginas, utilizaremos el que hay a continuación.

Este botón aparece en cada una de las páginas abiertas y sirve para copiar su dirección. Si deseamos compartir un recurso determinado, este es el botón apropiado.

El doble círculo aparece en cada una de las páginas abiertas, cerrará todas las páginas excepto la actual.

La gran X que hay en cada página abierta hace el efecto contrario del botón anterior, cierra la página actual y deja las demás abiertas.

El botón con cuatro cruces, situado sobre el buscador, cierra todas las ventanas abiertas. Es útil cuando hemos abierto muchas para no tener que cerrarlas una a una.

Dónde introducir el código de los recursos

En cada uno de los recursos que encontraremos en HACKeXe se indica dónde puede colocarse, a veces en diferentes lugares según el alcance que deseemos. Hay una descripción de cómo introducir el código nada más abrir HACKeXe o pulsando en el enlace bajo el menú principal: ¿Dónde introducir el código?

Básicamente, irán en el HEAD o pie de la pestaña «propiedades» o en el mismo iDevice en el que estemos trabajando.

Códigos de elaboración propia

Todos los códigos que llevan la calificación de «elaboración propia» han sido creados con la ayuda de ChatGPT-4 y 4o.

Conclusión

HACKeXe se presenta como una herramienta innovadora y útil para todos los usuarios de eXeLearning que buscan llevar sus proyectos al siguiente nivel mediante la integración de soluciones avanzadas. La recopilación de recursos y fragmentos de código, cuidadosamente organizada y accesible a través de TiddlyWiki, facilita la implementación de funcionalidades que van más allá de las capacidades estándar de eXeLearning.

Esta plataforma no solo proporciona una solución práctica para problemas específicos, sino que también fomenta la colaboración y el intercambio de conocimientos entre la comunidad de usuarios y expertos, aprovechando la sinergia del grupo de Telegram de eXeLearning.

Invitamos a todos los interesados a explorar HACKeXe, a utilizar los recursos disponibles y a contribuir con sus propias soluciones y sugerencias. Juntos, podemos seguir ampliando las posibilidades de eXeLearning y mejorando la experiencia educativa para todos.

Para comenzar a aprovechar estas herramientas, visita HACKeXe y únete a nuestro grupo de Telegram para estar al tanto de las últimas actualizaciones y compartir tus propias ideas.

Aviso: El artículo ha sido íntegramente ideado y redactado por su autor, excepto el apartado «Conclusión» que ha sido elaborado por ChatGPT 4o.

Tipografías accesibles e inclusivas para los materiales educativos, documentos en papel y digitales

6 de febrero de 2023 / Juan José de Haro / 1 comentario

La accesibilidad e inclusión son conceptos cruciales en la educación y se deben tener en cuenta para la creación de materiales educativos. La accesibilidad se refiere a la facilidad de acceso y uso de los materiales por parte de todas las personas, independientemente de sus capacidades. La inclusión, por su parte, se enfoca en garantizar que todas las personas tengan acceso a la misma información y oportunidades de aprendizaje. En este artículo, hablaremos sobre las tipografías (fuentes) que mejor se adaptan a la diversidad del alumnado, tanto en los documentos para escribir en papel como en los medios digitales.

Fuentes con serif y sans-serif: papel o pantalla

Las fuentes con serif, que en castellano sería fuente con serifa o remates, son las fuentes que tienen pequeñas líneas adicionales al final de los trazos como la Times New Roman. Las fuentes sin serifas, por el contrario, son la que no tienen estos remates, como la Arial.

Arriba fuente Arial, apta para medios digitales. Abajo Times New Roman, apta para papel con texto abundante o pequeño.

Para leer en papel, en general se recomiendan fuentes con serifas, ya que estos trazos adicionales guían la vista y ayudan durante la lectura cuando el texto es abundante o pequeño.

Sin embargo, para la lectura en pantalla, en general, se recomiendan las fuentes sin serifas, porque su estilo simple y sin adornos permite una mejor legibilidad en resoluciones bajas y en diferentes tamaños de texto. Además, las serifas pueden ser confusas y difíciles de leer en pantallas pequeñas o con poca resolución.

Algunas fuentes con serifas, recomendadas por su alta legibilidad para imprimir, son:

Tinos. Esta fuente es equivalente a la Times New Roman, pero de acceso libre, ya que Times no lo es. Es una excelente opción para proyectos que requieren una fuente con serifa de alta calidad y legibilidad. Fue creada por Steve Matteson en 2004.
Garamond. Es una fuente clásica y elegante, con una forma de letra fina y detalles elaborados. Fue diseñada hacia el año 1530, por el impresor francés Claude Garamond.
Baskerville. Esta fuente fue diseñada hacia 1750 por John Baskerville, también es una fuente clara y legible.
Merriweather. Es una fuente con serifa elegante y legible. Además, es accesible y útil para pantallas e impresoras, lo que la hace una gran opción para proyectos que requieren accesibilidad y legibilidad.

De las fuentes sin serifa para pantallas, podemos recomendar las siguientes:

Roboto. Esta fuente sin serifas es ampliamente utilizada y reconocida por su legibilidad en pantalla. Roboto fue creada en 2011 por Christian Robertson, un diseñador de tipografía de Google. La fuente fue diseñada para ser utilizada en el sistema operativo Android, es una de las fuentes más populares y actualmente es una de las más utilizadas.
Lato: Fuente con una legibilidad excelente en pantalla y un diseño moderno. Ha sido diseñada por Łukasz Dziedzic en 2010. La fuente fue creada como un proyecto personal y ha sido liberada bajo licencia de código abierto. Es la utilizada en este blog.
Open Sans. Es conocida por su estilo claro y legible, y es adecuado para una amplia gama de aplicaciones, desde la impresión hasta la web. La fuente se ha utilizado en muchos sitios web y aplicaciones, y ha demostrado ser una fuente fiable y accesible. Fue creada en 2011 por Steve Matteson, un diseñador de tipografía de Ascender Corporation.
Montserrat. Esta fuente fue creada en 2011 por Julieta Ulanovsky, una diseñadora gráfica argentina. Montserrat ha sido ampliamente adoptada y utilizada en todo el mundo, y ha demostrado ser una fuente versátil y accesible.

El número de fuentes es enorme y esto es solo una selección que se caracteriza por su accesibilidad, no obstante, otras muchas fuentes no listadas aquí, con toda seguridad, son comparables e igualmente legibles.

Además, podemos decidir utilizar una fuente sin serifa para imprimir y otra con serifa para pantalla, no hay normas absolutas.

Tipografías adaptadas a necesidades especiales

En este apartado destacamos dos fuentes que han sido diseñadas con finalidades específicas.

OpenDyslexic. Tiene una tipografía especialmente diseñada para ser más legible y ayudar a reducir la confusión visual que a menudo experimentan las personas con dislexia. La tipografía de OpenDyslexic tiene una base más ancha y pesada, lo que hace que cada letra sea más distintiva y fácil de distinguir, lo que puede mejorar la experiencia de lectura para las personas con dislexia. Fue creada por Abelardo González en 2011, un diseñador de software y programador con experiencia en desarrollo de aplicaciones para personas con discapacidad.
Atkinson Hyperlegible. Diseñada especialmente para personas con discapacidad visual. Esta tipografía tiene un diseño de letra con contrastes claros y una forma simple, lo que la hace más fácil de leer en comparación con otras tipografías con un diseño más complejo. Además, también tiene un espacio entre las letras más grande para ayudar a que los caracteres sean más fáciles de identificar. Esta fuente es la recomendada por el Instituto Braille para personas con discapacidad visual.

La fuente Atkinson Hyperlegible es recomendable tanto para su uso por pantalla como en impresión, por lo que pude ser una excelente opción para la accesibilidad de los textos.

Fuentes adaptadas en eXeLearning y TiddlyWiki

Tanto eXeLearning como TiddlyWiki son programas libres para la creación de contenido. Podemos añadir las fuentes OpenDyslexic y Atkinson Hyperlegible en ambos. Siguiendo los enlaces podrás ver cómo hacerlo en cada uno:

Añadir fuentes a d a p t a d a s a eXeLearning.
Añadir fuentes a d a p t a d a s a TiddlyWiki.

Creación de textos inclusivos y accesibles

A continuación damos algunos consejos para la elaboración de textos con las menores barreras posibles:

Tamaño de fuente adecuado: El tamaño de la fuente debe ser suficientemente grande para ser legible para la mayoría de las personas, especialmente para aquellas con discapacidad visual. En textos impresos al menos debe ser de 12 puntos. En pantallas no es posible dar una cifra concreta, ya que depende de la resolución que tengan.
Fuente legible: Ya hemos hablado ampliamente sobre este punto. Deberemos elegir la fuente en función del medio que usemos para mostrar el texto, el tipo de alumnado y nuestra propia experiencia. Utilizar la fuente Atkinson Hyperlegible puede ser una buena forma de empezar.
Contraste adecuado: El contraste es muy importante y será preferible texto negro sobre fondo blanco antes que cualquier otra combinación de colores. No hay nada peor que ver presentaciones de fondo oscuro con letra oscura. Procuremos que la letra destaque claramente sobre el fondo.
Contenido estructurado: Hay que estructurar el contenido empleando títulos, subtítulos, listas y párrafos para hacerlo más fácil de leer y comprender.
Lenguaje claro y conciso: Debe evitarse el lenguaje complejo y usar un lenguaje claro y conciso para hacer que el contenido sea accesible para todos.
Contenido compatible con tecnologías de asistencia: Conviene asegurarse de que el contenido creado para las pantallas sea compatible con tecnologías de asistencia, como lectores de pantalla y tecnologías de ampliación de texto, para hacerlo accesible para personas con discapacidad visual. Una presentación no puede ser leída por un lector de pantalla, una página web o material creado con eXeLearning, sí.
Descripción alternativa para las imágenes: Las imágenes deben tener una descripción alternativa para que las personas con discapacidad visual puedan comprender el contenido.
Uso del color. No se debe basar la información solo en el color, ya que los estudiantes con problemas visuales, como el daltonismo, tendrán dificultades para comprenderla. Si se utiliza el color para señalar algo, se deben añadir otros elementos redundantes para destacarlo. Por ejemplo, si se destaca una frase importante con color rojo, también se debe utilizar el subrayado como elemento redundante.