Mostrando entradas con la etiqueta HTML5. Mostrar todas las entradas
Mostrando entradas con la etiqueta HTML5. Mostrar todas las entradas

domingo, 30 de noviembre de 2025

SAM y ABP un enfoque integrado para microcredenciales (parte tres)

 

En colaboración con Mercedes Leticia Sánchez Ambriz

En el primer comentario nos referimos a las microcredenciales y los archivos HTML; en el segundo se trató sobre la importancia y relevancia de las microcredenciales. En el actual exploramos el enfoque integrado, debido a que  han pasado de ser una tendencia a convertirse en un componente estructural del aprendizaje a lo largo de la vida (OECD, 2023). Sin embargo, la mayoría de las implementaciones actuales presentan tres problemas críticos:

  1. Dependencia de plataformas propietarias
  2. Uso de formatos estáticos que separan la evidencia del certificado.
  3. Metadatos externos o centralizados que impiden la verificación autónoma.

Una alternativa a esto es el enfoque técnico-pedagógico que resuelva simultáneamente estas limitaciones, en este caso, el lenguaje HTML5 semántico se posesiona como artefacto de evaluación y credencial oficial, al tener las siguientes ventajas, como se muestra en la siguiente tabla:

Comparativa de formatos educativos

 Tabla

El contenido generado por IA puede ser incorrecto.

Modelo metodológico propuesto (SAM + ABP + HTML5)

El proceso se estructura en ciclos cortos e iterativos dentro del marco SAM, específicamente adaptado a la producción de microcredenciales:

Tabla

El contenido generado por IA puede ser incorrecto.

¿Por qué este enfoque?

La integración del Successive Approximation Model (SAM) como marco ágil, el Aprendizaje Basado en Proyectos (ABP) como estrategia de evaluación auténtica y, especialmente, el uso de HTML5 semántico con JSON-LD incrustado como contenedor único de la microcredencial constituye el enfoque más avanzado y sostenible actualmente disponible para la producción de credenciales digitales abiertas.

Este modelo no solo supera las limitaciones técnicas y éticas de los formatos tradicionales (PDF/PNG + plataformas propietarias), sino que genera ventajas estratégicas directas tanto para instituciones educativas como para empresas y organizaciones de absorción de talento (obsorching):

  1. Soberanía y portabilidad real del aprendiz. El estudiante o trabajador posee físicamente su credencial (un único archivo HTML5) que puede alojar en cualquier servidor o wallet digital de por vida, eliminando el riesgo de desaparición de la plataforma emisora (Fain & Ward, 2023). Esto responde directamente a la demanda de los empleadores de evidencias verificables y permanentes.
  2. Verificación instantánea y descentralizada sin intermediarios. Los metadatos JSON-LD incrustados según Open Badges 3.0 (IMS Global Learning Consortium, 2022) permiten a los departamentos de RRHH validar automáticamente emisor, criterios, fecha y evidencia con una sola apertura del archivo, sin necesidad de contactar a la universidad o acceder a plataformas externas.
  3. Evidencia rica y demostrable en contexto laboral. A diferencia de un certificado estático, la microcredencial HTML5 puede contener simulaciones interactivas, código ejecutable, portafolios dinámicos o grabaciones reales del desempeño. El reclutador no solo ve que el candidato “sabe” una competencia, sino que puede ejecutarla en tiempo real dentro del mismo archivo.
  4. Coste prácticamente nulo a escala y escalabilidad institucional. Una vez desarrollada la plantilla base (12-18 días con el modelo SAM propuesto), cualquier docente o área de formación puede generar nuevas microcredenciales sin licencias adicionales. Esto representa un ahorro de dinero anual frente a plataformas comerciales.
  5. Alineación directa con las necesidades de obsorching empresarial Las empresas que realizan procesos intensivos de captación y validación de talento valoran especialmente credenciales que:
    • Sean verificables sin intervención humana
    • Incluyan evidencia ejecutable del desempeño
    • Cumplan WCAG 2.1 (accesibilidad) por exigencia legal y de diversidad
    • Puedan integrarse en sistemas ATS (Applicant Tracking Systems) y wallets digitales corporativos

El archivo HTML5 propuesto cumple los cuatro requisitos de forma nativa.

  1. Cumplimiento normativo y ventaja competitiva en mercados regulados Al garantizar accesibilidad universal (W3C, 2018) y metadatos estructurados, las credenciales cumplen automáticamente con la normativa europea (EN 301 549), la Sección 508 estadounidense y la Ley General de Derechos de las Personas con Discapacidad en países de América Latina, convirtiéndose en un diferenciador frente a instituciones que aún emiten PDFs inaccesibles. Un ejemplo:

Ventajas directas para Recursos Humanos y el área de onboarding

Necesidad de RRHH

Solución con esta microcredencial HTML5

Verificar con rapidez que el candidato realmente implementó Kaizen

El reclutador abre el archivo y en 30 segundos ve el video 360° y los datos reales

Evitar fraudes o certificados falsos

Los metadatos JSON-LD están firmados criptográficamente (opcional con clave de RRHH)

Reutilizar la evidencia en promociones internas

El supervisor de línea abre el mismo archivo y puede reproducir la mejora sin pedir más documentación

Cumplir auditorías IATF 16949 y CONOCER

Toda la evidencia está contenida en el archivo y es inalterable (hash verificable)

Reducir coste de emisión masiva

Coste = 0 MXN por credencial después de crear la plantilla (vs. 800-1500 MXN por credencial en plataformas comerciales)

Reducir coste de emisión masiva

Coste = 0 MXN por credencial después de crear la plantilla (vs. 800-1500 MXN por credencial en plataformas comerciales)

El trabajador puede llevarse su historial al cambiar de planta u organización

El archivo lo guarda en su celular, USB o Google Drive por de por vida

 Ventajas inmediatas para aerolíneas y handling companies (Menzies, Swissport, ASUR, GAP, etc.)

  • El supervisor de rampa abre el archivo en su tablet y en 20 segundos ve el video real del trabajador.
  • Seguridad aérea: la evidencia está contenida y no depende de plataformas que puedan caer.
  • Reducción de costes: cero pesos por credencial después de crear la plantilla.
  • El trabajador puede mostrarla al cambiar de aerolínea o handling sin pedir revalidación.
  • Cumple auditorías OACI e IATA porque los metadatos están incrustados y verificables.

Conclusiones

Estos enfoques transforman la microcredencial de un simple “título digital” en un artefacto vivo, verificable, interactivo y propiedad exclusiva del aprendiz, alineándose plenamente con los principios de Open Recognition (Fain & Ward, 2023) y con las demandas reales del mercado laboral del siglo XXI.

Las instituciones y empresas que adopten este modelo no solo reducirán drásticamente sus costes de emisión y verificación, sino que se posicionarán como líderes en la emisión de credenciales verdaderamente abiertas, portables y útiles para el obsorching de talento en un entorno cada vez más competitivo y digital.

Referencias

Fain, M., & Ward, R. (2023). Open recognition and its enemies: A critical perspective. Open Praxis, 15(2), 124-136. https://doi.org/10.55982/openpraxis.15.2.567

IMS Global Learning Consortium. (2022). Open Badges specification v3.0. https://www.imsglobal.org/spec/ob/v3p0/

OECD (2023). Micro-credential innovation in higher education: The state of the art and the future. OECD Publishing. https://doi.org/10.1787/9789264472570-en

W3C (2018). Web Content Accessibility Guidelines (WCAG) 2.1. https://www.w3.org/TR/WCAG21/

Allen, M. W., & Sites, R. (2012). Leaving ADDIE for SAM: An agile model for developing the best learning experiences. ASTD Press.

 

 

 

 

 

 

 

domingo, 26 de octubre de 2025

De la diapositiva a la App didáctica en HTML5

En colaboración con Mercedes Leticia Sánchez Ambriz

No dejes de escuchar el pódcast, superinteresante el diálogo entre dos personas.

En mis clases de Tecnología e Innovación Educativa tomé una decisión sencilla: cambiar la lógica de “mostrar” por la de “hacer”. En lugar de presentaciones en PowerPoint, mis estudiantes diseñan pequeñas aplicaciones en HTML5 que toman en cuenta competencias y objetivos, organizan la interacción y crean cuestionarios para compartir con los demás estudiantes.

De este modo las presentaciones llenas de texto, donde el estudiante repite lo que escribió en pantalla dejan paso a exposiciones multimodales. Este giro desplaza el foco del estudiante repetidor al estudiante diseñador, lo que favorece un diálogo mediado con la inteligencia artificial que mejora ideas, contenidos y medios. La apuesta no es solo técnica, es pedagógica: más actividad cognitiva de orden superior, más evaluación auténtica, más sentido de autoría y menos dependencia de diapositivas secuenciales. Además, al construir y no solo consumir tecnología, reducimos temores y resistencias asociados a la tecnofobia, poniéndola en su justa medida y contexto crítico.

La App que sustituye a la diapositiva

Una presentación lineal optimiza la exposición, pero limita la exploración, disminuyendo el desarrollo del estudiante. Por lo general las presentaciones, están llenas de texto, sin animación, y el contenido se lee directamente. Por el contrario, una app, aunque mínima, incorpora navegación, estados, entradas del usuario, microtareas y hasta evaluaciones que convierten los contenidos en experiencias. Esto obliga a pensar en el sistema de signos del mensaje, en cómo se distribuye la información en el espacio, en el centro óptico, en el contraste y en la legibilidad real de lo que se lee y se hace, cuestiones medulares del buen diseño de medios que la vieja cultura del papelógrafo y la retrotransparencia ya enseñaba y que hoy recontextualizamos en la pantalla interactiva. Partimos del concepto de la ruta crítica en el trabajo con los medios, y todo su recorrido desde la selección hasta su empleo.

Cuando pedimos a los estudiantes que creen un video, que diseñen tarjetas de memoria, que recopilen evidencias o que construyan un flujo de decisiones, forzamos la síntesis, la jerarquía visual y la secuenciación significativa del contenido. El resultado es doble: el mensaje mejora en claridad y el aprendizaje gana en profundidad. No trasladamos el párrafo a la App, sino que convertimos la idea en procedimiento y utilidad. En este proceso, reglas clásicas del diseño siguen vigentes en digital, como atender a la legibilidad de los textos, a la longitud de línea y al equilibrio entre figura y fondo para sostener la comprensión, ahora al servicio de una tarea interactiva y no de una lectura pasiva.

Una ruta metodológica para trabajar en el aula

Existen diferentes formas de crear este tipo de App. Explicaremos como generamos una App en Gemini, a partir de una investigación profunda sobre la importancia de los medios sonoros en el proceso pedagógico. Los pasos desarrollados son los siguientes.

1-    Realizar en Gemini, una petición como esta: “Quiero realizar una investigación profunda sobre los medios sonoros en el proceso de enseñanza. Mi idea es explorar la importancia de la voz del profesor en dicho proceso, pero seguirla con el empleo de los medios sonoros, incluyendo la radio. Terminaría con la creación de pódcast con IA, desde el guion, su elaboración hasta la distribución. Qué prompt me recomiendas”: Con esta solicitud se obtiene el prompt con el que sinicia la investigación profunda y una vez concluida, Gemini da varias opciones, entre ellas crear una App (página web)

2-    El siguiente paso es permitir a Gemini, realizar la App y una vez concluida, empezamos a configurarla. Para ello agregamos videos y audios creados en NotebookLM, o en otras plataformas como YouTube. La App de Gemini permite agregar otras funciones propias, además de otras creadas con anterioridad.

3-    Se somete toda la App a múltiples pruebas de verificación y se puede mejorar el diseño, la disposición entre otras acciones. El estudiante valida, corrige y reescribe hasta alcanzar rigor y pertinencia. No es un trabajo de copiar y pegar como sucede cuando se trabaja con PowerPoint.

4-    El último paso es la exposición en clase, que puede combinarse con un cuestionario a sus compañeros, con opciones de retroalimentación.

En paralelo se atiende la dimensión emocional y ética del uso de la tecnología, incrementando la seguridad en el aprendizaje, incrementando el interés y la motivación por la asignatura. Un ejemplo de este proceso se puede estudiar en esta App creada para un curso de posgrado, donde uno de los temas es el trabajo con los medios sonoros. Otro ejemplo es el de la App: Dislexia: guía interactiva, que fue empleada por tres estudiantes para exponer sus indagaciones sobre el tema. Esta última se envió su dirección por WhatsApp para que los restantes estudiantes pudieran responder el cuestionario y devolver sus calificaciones. De este modo la App supera a las diapositivas, al lograr una interacción imposible con estas.

Finalizando.

Sustituir la presentación por una app en HTML5 no es un recurso técnico, es un cambio de rol. El estudiante deja de escuchar para construir, y el profesor deja de mostrar para acompañar el diseño de experiencias. Recuperamos los contenidos clásicos del diseño de medios, los articulamos con metas de alto nivel cognitivo y con evaluación auténtica, y sumamos la IA como catalizador del diálogo y la mejora continua. En ese sistema, el aula deja de ser una sucesión de diapositivas y se convierte en un taller de pensamiento, donde el producto digital evidencia procesos, decisiones y criterios. Esa es la verdadera innovación: cuando el medio no distrae, sino que piensa con nosotros.

 

domingo, 12 de octubre de 2025

La Revolución docente dejar el pizarrón y construir el futuro con HTML5

En colaboración con Mercedes Leticia Sánchez Ambriz

Quieres sumergirte en una experiencia sonora, escucha el pódcast.

América Latina se encuentra en el umbral de una transformación educativa sin precedentes. La creciente conectividad y el apetito por la digitalización nos han abierto una puerta que no podemos ignorar. Sin embargo, la verdadera revolución no reside en la tecnología por sí misma, sino en cómo los educadores la empuñan para rediseñar la experiencia de aprendizaje.

Este es un llamado a trascender la enseñanza tradicional y convertirnos en arquitectos de conocimiento interactivo. La herramienta para esta magna obra es HTML5, y el plano maestro es una idea simple, pero poderosa: el protagonista del aprendizaje es quien aprende, no quien enseña (Prensky, 2010).

El espejismo de la digitalización: replicando modelos análogos

Con frecuencia, hemos caído en la trampa de digitalizar el pasado: PDFs que son fotocopias de libros, videos que son monólogos grabados y presentaciones que son una mera sucesión de diapositivas. Usamos la tecnología desde nuestra perspectiva, bajo nuestra lógica, replicando el modelo expositivo que conocemos.

Esta manera de utilización, aunque bien intencionado, a menudo ignora los principios fundamentales del aprendizaje multimedia, que sostienen que la participación activa del estudiante es crucial para una cognición profunda (Mayer, 2009). Olvidamos que al otro lado de la pantalla hay una mente ávida de explorar, interactuar y construir su propio conocimiento. Es hora de hacer un esfuerzo consciente por cambiar el foco. No se trata de "explotar un recurso", se trata de diseñar un entorno donde el aprendizaje florezca de manera intuitiva, atractiva y significativa para el estudiante. Se carece de un criterio pedagógico, que en otras publicaciones le llamamos la ruta crítica en el trabajo con medios y recursos. Esta ruta se inicia en la selección bajo criterios pedagógicos, continúa al diseño y elaboración, sigue al empleo, para de nuevo revisar la selección.

Más que docentes: arquitectos de experiencias de aprendizaje (UX)

La misión del educador del siglo XXI trasciende la transmisión de información. Somos diseñadores, curadores y facilitadores, somos arquitectos del conocimiento, sanadores mentales y enriquecedores del alma . Nuestro rol es crear ecosistemas digitales donde los estudiantes no sean espectadores pasivos, sino protagonistas de su propia odisea intelectual. Esto implica adoptar una mentalidad de diseñador de experiencias de usuario (UX), un campo que se centra en la empatía con el usuario final para crear productos intuitivos y satisfactorios (Norman, 2013).

Antes de preguntarnos "¿Qué quiero enseñar con esta herramienta?", debemos cuestionarnos:

·         ¿Cómo quiero que se sienta mi estudiante? ¿Curioso, desafiado, empoderado?

·      ¿Qué quiero que haga mi estudiante? ¿Explorar, experimentar, crear, conectar ideas?

·         ¿Cómo puede la interactividad de HTML5 facilitar este proceso? ¿Cómo puede un elemento arrastrable, un video con preguntas incrustadas o un escenario de decisión ramificado hacer que el concepto "cobre vida"?

Adoptar esta perspectiva es el primer paso para crear recursos que no solo informen, sino que transformen.

HTML5: El lienzo interactivo para la construcción cognitiva

Es fundamental dejar de ver HTML (HyperText Markup Language) como un simple lenguaje para hacer páginas web. En su versión 5, HTML5 es una caja de herramientas de construcción cognitiva que exige una labor creativa y pedagógica mucho más profunda por parte del docente. A diferencia de las herramientas de autor cerradas (como PowerPoint o Genially), que ofrecen plantillas predefinidas, HTML5 proporciona los bloques de construcción cruciales.

La creación de recursos en HTML5, ya sea directamente o a través de plataformas que lo facilitan como H5P.org, implica que el docente debe:

   Estructurar el conocimiento semánticamente: Utilizar etiquetas como <article>, <section>, y <aside> no es solo una cuestión técnica; es un ejercicio pedagógico para jerarquizar y organizar la información de una manera lógica que facilite la comprensión.

Diseñar la interactividad desde cero: La verdadera potencia de HTML5 reside en su capacidad para crear interactividad nativa. El uso de la etiqueta <canvas> permite al docente diseñar desde simulaciones científicas simples hasta juegos educativos que refuercen conceptos matemáticos. La implementación de elementos multimedia con las etiquetas <video> y <audio> permite incrustar puntos de control, subtítulos interactivos o preguntas, convirtiendo el consumo pasivo en una experiencia de diálogo. Asumir un rol de desarrollador-pedagógico: Si bien plataformas como H5P simplifican el proceso, el docente-creador inevitablemente se involucra más en la lógica subyacente del recurso. Debe pensar en secuencias, condiciones y retroalimentación. Entre ellos podemos señalar:

Un video interactivo (<video>): Deteniéndose en puntos clave para hacer preguntas, forzando al estudiante a reflexionar antes de continuar.
Un escenario ramificado (JavaScript + HTML): Donde el estudiante toma decisiones como un personaje histórico y ve las consecuencias de sus actos, fomentando el pensamiento crítico.

Una línea de tiempo interactiva (CSS + JavaScript): Con imágenes, audios y textos desplegables que permiten explorar eventos a diferentes niveles de profundidad.

Un juego de "arrastrar y soltar" (<canvas> o JavaScript): Para relacionar causas con efectos, o personajes con sus roles.

Estos no son simples "adornos". Son mecanismos pedagógicos, construidos por el docente, que se alinean con las teorías constructivistas del aprendizaje, donde el conocimiento se edifica activamente en la mente del aprendiz (Piaget, 1970). Son la diferencia entre memorizar un dato y verdaderamente comprender un proceso.

Manifiesto del docente-creador centrado en el estudiante

Comenzar este camino se basa en un principio clave: la empatía.

1.    Definir el objetivo de aprendizaje, no el contenido: ¿Qué habilidad o comprensión fundamental debe adquirir el estudiante? No pienses en "cubrir el capítulo 3", piensa en "que el estudiante sea capaz de analizar las causas de..." Revisa los objetivos siguiendo la taxonomía de Bloom

2.    Ponerse en sus zapatos: ¿Qué podría resultarles confuso o aburrido? ¿En qué punto del contenido tradicional "se pierden"? Ahí es donde la interactividad de HTML5 puede construir un puente. Si tienes dudas crea una lluvia de ideas

3.    Explorar y experimentar: Entrar a plataformas como H5P.org. Jugar con los diferentes tipos de contenido. Inspirarse con los ejemplos existentes y preguntarse: "¿Cómo podría adaptar esto a mi materia?". Emplea las inteligencias múltiples de Garner

4.    Crear un prototipo simple (MVP): No intentar construir una catedral en un día. Empezar con un solo concepto. Crear un video interactivo corto, un pequeño quiz con retroalimentación inmediata, hasta una sopa de letras.

5.    Probar y recoger feedback: Compartir la creación con un pequeño grupo de estudiantes. Observar cómo interactúan. Pedir su opinión sincera. Sus respuestas son el recurso más valioso para mejorar (Norman, 2013).

Este ciclo de crear, probar y mejorar es el motor de la innovación.

El futuro es ahora: un llamado a la acción para América Latina

Tenemos en nuestras manos la oportunidad histórica de dar un salto cualitativo en la educación de nuestra región. América Latina no necesita esperar a que las grandes editoriales comerciales o las políticas gubernamentales nos dicten el camino a seguir; podemos trazar nuestro propio camino innovador desde las aulas. La capacidad de innovar está, literalmente, al alcance de nuestros dedos en el teclado.

Formémonos y empoderémonos para ser los desarrolladores de contenido que nuestros estudiantes merecen. Aprovechemos cada recurso y cada herramienta, como HTML5 y las plataformas interactivas, no para lucirnos como docentes tecnólogos, sino para hacer que el aprendizaje sea una experiencia inolvidable, efectiva y accesible para ellos.

La CEPAL destaca que, pese a las mejoras en conectividad, aún persisten brechas en el uso efectivo de las herramientas digitales y en las competencias necesarias para beneficiarse de ellas. Somos nosotros, los educadores, quienes podemos cerrar esa brecha desde el frente pedagógico, asegurando que la tecnología educativa se use con intención pedagógica y corazón humano.

La próxima vez que te sientes a planificar una clase, no abras un procesador de textos. Abre tu mente. Piensa en la experiencia que vivirán tus estudiantes. Diseña pensando en el destinatario, en ese estudiante curioso que espera algo más que diapositivas. El futuro del aprendizaje en América Latina depende de que nos atrevamos a innovar hoy. ¡Construyámoslo juntos, dejando atrás el pizarrón y abrazando el HTML5 como puente hacia la educación del mañana!

Referencias

CEPAL (2025). Educación y desarrollo de competencias digitales en América Latina y el Caribe. Comisión Económica para América Latina y el Caribe.

Mayer, R. E. (2009). Multimedia Learning (2nd ed.). Cambridge University Press.

Norman, D. (2013). The Design of Everyday Things: Revised and Expanded Edition. Basic Books.

Piaget, J. (1970). Science of Education and the Psychology of the Child. Orion Press.

Prensky, M. (2010). Teaching Digital Natives: Partnering for Real Learning. Corwin Press.