Plataforma autoinstruccional CODOEN

Título	Taller de Titulación: Personas y Territorios - Plataforma virtual autoinstruccional CODOEN - Proyecto PUCV - Interdisciplinario 37.0/2021
Tipo de Proyecto	Anteproyecto de Titulación, Proyecto de Financiamiento Externo o Fondo Concursable
Período	2021-2022
Asignatura	Taller de Titulación: Personas y Territorios
Del Curso	Taller de Titulación: Personas y Territorios
Carreras	Diseño
Alumno(s)	Omar Nuñez, Marcelo Mondaca
Profesor	Michèle Wilkomirsky, Elisabeth Rodriguez
PDF	Archivo:Nuñez Omar Mondaca Marcelo carpeta 11.07.22.pdf

Carpeta de ítems

Click para ver la carpeta de ítems

Introducción

Problemática y estado actual

Diversos estudios nacionales e internacionales evidencian la gran relación entre los niveles de logros de los estudiantes y la calidad de los profesores, como el estudio realizado en el Instituto de Sociología de Pontificia Universidad Católica de Chile del 2017:

“Los análisis de características específicas de los profesores indicaron que la experiencia de los profesores incidía significativamente en el rendimiento en matemáticas de los estudiantes. Los resultados sugieren que no solo los profesores más jóvenes sino también los de mayor experiencia contribuyen importantemente al rendimiento escolar en matemáticas en el sistema educacional.”(Canales, Maldonado, 2018)

Al igual que el estudio difundido por PREAL (GTD-PREAL, 2009), que abarcó veinticinco sistemas educativos de todo el mundo, incluidos diez de los sistemas con mejor desempeño.

En Chile hay evidencia sobre las deficiencias respecto a este conocimiento del profesor de matemática (MINEDUC, 2015), lo que conlleva una discusión sobre la calidad de los centros de formación.

Con el fin de mejorar la calidad docente, en Chile se crea el Programa de Acreditación para la Asignación de Excelencia Pedagógica que tenía un carácter voluntario, en el año 2014 (MINEDUC, 2015) postularon 2294 docentes, de los cuales alrededor del 25% (571 docentes) no acreditaron, el 32% (735 docentes) se encasilla en el tramo III (suficiente), 751 en el tramo II (competente) y 237 en el tramo I (destacado), lo que muestra también un panorama complejo de atender, dado además el perfil voluntario que tenía esta evaluación.

También existe la problemática del poco tiempo que los profesores tienen disponibles para el perfeccionamiento o formación continua, que conlleve una mejora en su desempeño disciplinar y didáctico. Existen iniciativas que tratan describir el conocimiento especializado del profesor de matemática en Chile y otras que buscan desarrollar sus conocimientos.

Los estudios del MTSK (Mathematics Teacher’s Specialized Knowledge) (Carrillo et al., 2018) se centran en el diseño de tareas para mejorar la formación docente y la incorporación de los dominios de conocimiento disciplinar y didáctico de las matemáticas, determinando con ello el conocimiento especializado pretendido que se espera alcanzar por parte de los profesores en formación inicial y continua.

A la fecha, no existe una plataforma que tenga las características que esta propuesta exige, que se dedique exclusivamente a ayudar a identificar y desarrollar los saberes de los dominios que implica el conocimiento profesional del docente de matemáticas en el sistema educativo chileno, tomando en cuenta las directrices exigidas por el gobierno.

De esto se propone el desarrollo e implementación de una plataforma virtual autoinstruccional que permita ayudar a identificar el perfil de Conocimiento Especializado del Profesor de Matemática y fortalecer el conocimient o específico del profesor de matemáticas. Esta plataforma se denomina CODOEN, como acrónimo de “COnocimiento DOcente para la ENseñanza”.

Perspectiva gráfica

Cómo diseñadores, ¿de qué manera aportamos a la solución de esta problemática?

Los recursos gráficos se caracterizan por facilitar la comprensión de contenidos complejos, a través de una línea gráfica clara capaz de sintetizar información, guiar su lectura, simplificar y sobre todo, presentar ideas claras y concisas.

Nuestra tarea como diseñadores en este proyecto es la de facilitar la interacción entre el profesor y la plataforma, debemos establecer cómo el docente se relaciona con el reforzamiento de contenidos pedagógicos. Debemos tener presente que esta plataforma va dirigida a docentes que tienen experiencia en la materia y por lo tanto hay que crear un sistema gráfico que les facilite el análisis del contenido. El uso de recursos gráficos en la educación presencial se puede ver principalmente en los libros de los estudiantes, se utilizan para visualizar datos complejos o apoyar en el análisis con ejemplos reales, a través de estas gráficas estáticas se facilita la enseñanza pero cuando se trata de enseñanza virtual se puede hacer un mejor uso de estos. Con el apoyo de herramientas Web 2.0 el proceso educativo se torna más interactivo, proporcionando nuevas maneras de ver, abordar un problema matemático para refuerzo y también traspasar el conocimiento.

Web 2.0

La Web 2.0 entrega nuevos medios y técnicas que permiten mejorar el proceso curricular y garantiza su constante mejoramiento, “esta incorpora al usuario como un agente activo en su funcionamiento, y no como un mero cliente o receptor de la información. Esto pasa por sitios web dinámicos, en los que al usuario se le permita interactuar, generar contenido, o formar parte de comunidades virtuales.” (García, M. 2021)

Las herramientas web 2.0 son aquellas que se encuentran alojadas en internet y que nos permiten desarrollar trabajos en la nube, algunos ejemplos son las Redes Sociales que nos permiten establecer conexiones con otros usuarios para compartir ideas y conocimientos, sistema de gestión de contenidos (CMS) que permiten publicar y gestionar contenidos en la web de forma intuitiva como Wordpress, E-Learning que permite a los profesores ser más flexibles en cuanto a la manera de impartir sus clases.

Esto da paso a la Educación 2.0 “en la que el estudiante es quién se propone metas a alcanzar de tal forma que sean ellos quienes interactúen y exploren y de esa manera hacerse de nuevos conocimientos y adaptarlos a los existentes y así, arribar a un aprendizaje significativo (…) Los beneficios de la Web para la pedagogía parecen alentar hacia metas significativas.” (Rosique, R. 2015)

A nivel nacional no existen muchas plataformas que implementen las herramientas disponibles de la web 2.0 en la educación, sin embargo, la facilidad para acceder a estas innovaciones tecnológicas en la actualidad nos alienta y facilita el camino.

Objetivos del proyecto

Objetivo principal

Diseñar y elaborar herramientas gráficas e interactivas para el reforzamiento de los conocimientos pedagógicos a través de una plataforma digital alojada en un sitio web para profesores de matemática de educación media.

Objetivos especificos

1. Comparar distintas iniciativas web o de aplicación que comparten parte de los principios del proyecto, en este proceso se intenta investigar y comparar los distintos rendimientos de cada sistema y ver qué comportamientos son adecuados y cuáles pueden ser evitados.

1. Familiarizarse con la plataforma Moodle en la que se trabajará, entender sus limitaciones, fortalezas y qué complementos externos son los necesarios para complementarla.

1. Establecer una identidad gráfica que abarque los aspectos formales de las matemáticas, ilustraciones, animaciones, diagramación.

1. Producción de elementos individuales como gráficos, ilustraciones, elementos interactivos, animación digital.

1. Front-end(html, css, javascript) y diagramación de los elementos visuales o interactivos en la plataforma.

1. Validación y retroalimentación del prototipo propuesto en la plataforma Moodle, para conocer la interacción con el docente.

Hipótesis

Sabemos que en la primera parte del proyecto la plataforma será desarrollada en un sistema de gestión de contenidos llamado Moodle, del cual ya se tiene experiencia con el desarrollo de cuestionarios y esto agiliza las pruebas necesarias para comenzar a trabajar en la interacción que se espera lograr con el usuario que en este caso serían profesores. Al ser dirigida específicamente para profesores de matemáticas estará relacionado con planos cartesianos, expresiones algebraicas, representaciones gráficas de funciones y geometría. A partir de estas directrices creemos que el estilo visual se debe enfocar en formas regulares. Al ser dirigida a docentes en un ámbito académico el estilo visual debe respetar los conceptos formales de las matemáticas. Se debe recalcar que los profesores no están aprendiendo de nuevo, sino que refuerzan su conocimiento por lo tanto se les debe tratar de una manera formal y sensata.

Marco teórico

Relación entre los logros del estudiante con un buen desempeño del profesor

Los colegios y escuelas necesitan contar con buenos profesionales que tengan claros los conceptos, conocimientos y la preparación para traspasarlos a sus estudiantes en pos de generar un buen ambiente y los estímulos suficientes para que el alumno se interese por los temas y así demostrar un buen desempeño.

Se propone que la labor del profesor en el aula es clave a la hora de ver los resultados del estudiante ya que estos están constantemente en contacto con los alumnos y el cómo se desempeñan en ella está directamente relacionada con esto:

“El desempeño docente es un factor que se asocia de manera directa a la calidad de la educación”(Martínez-Chairez, Guevara-Araiza, & Valles-Ornelas, 2016).

La formación y el constante reforzamiento del profesor se relaciona directamente con su desempeño profesional y a la vez con la calidad de la educación. El desempeño docente es muy importante y debe estar a la altura de las necesidades del presente y de la sociedad actual.

Es necesario poner énfasis en que la profesión y el desempeño del profesor es uno de los encargos de gran responsabilidad y de significancia a nivel social.

Reforzar el conocimiento del docente a través de medios digitales

La internet cada vez se hace más accesible y su universalidad se vuelve una mayor necesidad. Los medios de comunicación han cambiado la cotidianeidad y han modificado conductas y hábitos de las personas en muchos aspectos, la web, como medio de Comunicación y de gestión de recursos, facilita el acceso al conocimiento y al continuo desarrollo de este a tal punto que llega a ser una necesidad.

Los medios digitales representan una potencialidad significativa para cambiar los modos en que se enseña, se aprende y se colabora. El aprendizaje dejó de ser una exclusividad del espacio físico que demarca la institución educativa.

“La formación de competencias digitales es cada vez más importante en el ámbito educativo como una necesidad para la inclusión en la sociedad del conocimiento: las TIC no son solo un potente recurso para el aprendizaje, son herramientas cada vez más relevantes para la vida. El potencial de las TIC no se refiere solo a la alfabetización digital, ellas pueden ser utilizadas para promover competencias modernas y mejorar el desempeño educativo del estudiantado en términos generales.”(Oficina Regional de Educación para América Latina y el Caribe (OREALC/UNESCO), 2013).

Desarrollo de herramientas para el fortalecimiento del conocimiento

Este proceso de desarrollo se dedica a la recopilación y validación de distintas herramientas necesarias para el reforzamiento de conocimiento del profesor de matemáticas, para garantizar un constante mejoramiento del docente, es decir, a través del uso de elementos interactivos utilizando las ventajas de la web 2.0.

Una página web interactiva es una plataforma que permite al emisor (la web) y el receptor (el usuario) comunicarse e interactuar en ellas. El atractivo visual sigue siendo relevante pero el diseño siempre debe tener en cuenta primero al usuario, la usabilidad ofrecida y su interacción con él son el pilar principal.

El diseño de páginas web interactivas ofrece actualmente ventajas como:

• Coherencia y orden acompañando al usuario durante su navegación.

• Mayor unión o relación con el usuario mediante contenidos adaptados.

• El usuario se siente más partícipe.

Gunka Studios. (2021, 19 julio).

Marco conceptual

La experiencia y conocimientos del profesor de matemáticas tiene relación directa con el desempeño y logros del alumno, por esto el profesor debe estar en constante perfeccionamiento de sus habilidades, también existe la problemática del tiempo, la actividad académica de un profesor requiere de un sistema rápido y eficiente como los que se pueden lograr con los medios digitales.

De esta necesidad surge la idea de una plataforma que le permita describir y desarrollar su desempeño didáctico y disciplinar, esta plataforma debe incluir herramientas y recursos gráficos que interactúen con el profesor, esta interacción debe ser medida cuidadosamente en el campo del diseño gráfico.

Aproximación metodológica

Objetivo específico	Fuente de información	Técnica de recolección	Técnica de análisis de información	Utilización de software	Resultado esperado / producto esperado
Comparar distintas iniciativas web o de aplicación que comparten parte de los principios del proyecto.	Benchmarks	Recoger características visuales e interactivas de distintos sitios web.	Comparación entre las distintas plataformas.	Captura de imágenes / Illustrator	Identificar qué elementos son necesarios para un buen desarrollo web.
Familiarizarse con la plataforma Moodle en la que se trabajará	Documentación Moodle Foros Moodle	Recopilación de información de fuentes oficiales de Moodle	Pruebas de funcionalidad	Servidor local Moodle / Navegador web	Entender sus limitaciones, fortalezas y qué complementos externos son los necesarios para complementarla.
Establecer una identidad gráfica	Elaboración propia	Prueba de colores, formas, proporciones, tipografía	Observación y comparación de elementos gráficos en la plataforma	Illustrator / Visual studio code	Crear un orden y estilo acorde a las necesidades de la plataforma
Producción de elementos individuales	Elaboración propia / Documentación de animación / Documentación de JsxGraph / Elaboración propia	Recolección de documentación en wiki casiopea / Tabla de datos	Pruebas de funcionalidad / Bitácora de avance	Illustrator / Visual studio code / Svgator.com / JsxGraph / Geogebra / Google Sheets	A través de esta documentación se espera crear distintos elementos interactivos funcionales en la plataforma.
Front-end y diagramación de los elementos visuales o interactivos.	Documentación web de html y css	Recolección de documentación en wiki casiopea.	Elaboración de pruebas para testear funcionalidad	WinSCP / Visual studio code / Bootstrap	Congruencia del estilo gráfico y funcionalidad en la plataforma
Validación y retroalimentación del prototipo	Feedback proporcionado por el equipo de pruebas	A través de un documento de texto que describe las experiencias por parte del equipo de pruebas	Lectura y análisis del documento	Word / Google docs	Se espera que el feedback proporcionado ayude a observar y encontrar problemas visuales e interactivos para mejorarlos

Investigación

Benchmark

Como paso inicial en la investigación del proyecto se parte por comparar distintas iniciativas web o de aplicación que comparten parte de los principios del proyecto. Un Benchmark como se le denomina es indispensable en la primera parte del proyecto ya que se investigará y comparará distintos rendimientos, servicios, interfaces, interacciones que proporcionan diversas plataformas en el área de la educación.

La intención de esta comparativa se centra en observar los comportamientos de las demás plataformas, distinguir buenas y malas prácticas para recoger nuestras experiencias y aplicarlas a las futuras propuestas del proyecto. Es por esto que las siguientes plataformas deben contar con cuestionarios(Preguntas, quizzes, etc), de los cuales describimos nuestra experiencia como usuarios y anotamos sus aspectos más sobresalientes en los cuales ir acotando y centrando las ideas. No se trata de copiar sino de observar y crear opciones de diseño para un proyecto como este.

Cambridge Assessment

“Cambridge Assessment es un sitio web dedicado al apoyo del aprendizaje del ingles para estudiantes y profesores, esta organización trabaja con instituciones educativas y gobiernos tanto locales como regionales de todo el mundo.” (Cambridge Assessment International Education 2021)

Pagina de inicio

Pruebas

Las pruebas que ofrece el sitio están etiquetadas según el tipo de contenido a evaluar, nivel de dificultad y tiempo aprox. de duración de la prueba y estas mistas etiquetas son utilizadas para el sistema de búsqueda. La información esta organizada para mostrar el nivel de dificultad junto al tema de la prueba seguido por una breve descripción del tipo de evolución. Debajo se muestra las especificaciones mas técnicas, como lo son el marco de referencia y el tiempo.

Desarrollo de prueba

Cada prueba cuenta con una barra de progreso y permite la obtención de feedback preguntando por una opción sobre la dificultad de la prueba.

Material de apoyo para profesores

El material de apoyo también cuenta con selectores como los vistos antes pero añade nuevos factores como el tipo de recurso de apoyo (como tareas, listas, actividades, etc)

En este ejemplo se demuestra la importancia de un sistema de etiquetado eficiente en tipo y cantidades dentro de estas divisiones que facilite el acceso y busca de material especifico.

Brilliant | Learn to think

“Con la propósito de crear una cultura de aprendizaje en torno a la indagación, la curiosidad y la apertura al fracaso. Todos los cursos están escritos con estos principios de aprendizaje en mente.” (Our principles for learning | Brilliant, 2021)

Seleccion de tema

Al entrar por primera vez se pregunta que tipo de matemáticas es la que se quiere fortalecer y desde esa elección sumergen mas subdivisiones de las cuales elegir. Cada sección tiene una ilustración que le acompaña con un estilo, paleta y tonos muy notables que guían fácilmente la lectura.

Cursos

Los cursos están estructurados en partes que se van desbloqueando a medida que se avanza, de esta manera se debe seguir el orden dado por el sitio web.

Desarrollo de preguntas

La preguntas tienen una "narrativa" cada pregunta tiene relacion con la siguiente, se parte de algo simple que se va complejizando poco a poco, el progreso esta dividido en secciones, que son grupos de preguntas.

Modelo PDT 2021, DEMRE

La primera referencia o búsqueda de sitios que estén en un orden de evaluación de contenidos, se encuentra el modelo PDT o prueba de transición de DEMRE. Sitio dónde evalua y puntua a modo de practica el examen PDT para la selección universitaria.

La primera pantalla corresponde a la selección de materia, de manera sencilla y guiada a los contenidos a evaluar:

Página de inicio y selección de materia

La segunda pantalla, nos lleva a la evaluación, dónde, en un espacio se sitúa la pregunta con selección de puntos para marcar la alternativa correcta,mientras que en la parte superior se ve un contador de tiempo el cual nos dice cuanto tenemos para finalizar el ensayo:

Página de preguntas

La página de resultados nos muestra cuales preguntas hemos tenido correctas, erradas y omitidas, marcándose con un color respectivo para cada situación, verde: correcta, rojo: incorrecta y naranjo: omitidas. De esta manera se puede ver en cuales hemos tenido errores y desde ahí reforzar cierto contenido debilitado.

Página de resultados

Conclusiones

	Cambridge Assessment	Brilliant | Learn to think	Pruebas DEMRE
Puntos positivos	Muestra Avance / Muestra dificultad / Tiempo / Cuestionarios y actividades	Guía intuitiva / Ilustrativo / Muestra dificultad / Muestra avance / Cuestionarios y actividades /Fácil navegación	Retroalimentación / Tiempo / Fácil navegación / Cuestionarios
Puntos negativos	No es muy intuitiva al navegar / Propuesta visual débil	No contempla otros idiomas	Evalúa contenidos pero no invita a reforzarlos / No tiene una propuesta visual

La estrategia tanto visual como de arquitectura de web de Brilliant sobresale sobre las demás, tiene un enfoque gráfico muy fuerte que está en servicio a la educación con intenciones muy claras y efectivas. Este sitio le da importancia de la gráfica, esta tiene una identidad muy clara y ese es el efecto que tenemos que lograr.

Plataforma Moodle

CMS(Content management system) o Sistema de Gestión de Contenido

"A content management system (CMS) is a software package that provides some level of automation for the tasks required to effectively manage content. A CMS allows editors to create new content, edit existing content, perform editorial processes on content, and ultimately make that content available to other people to consume it."

"Un sistema de gestión de contenidos (CMS) es un paquete de software que proporciona cierto nivel de automatización de las tareas necesarias para gestionar eficazmente los contenidos. Un CMS permite a los editores crear nuevos contenidos, editar los existentes, realizar procesos editoriales sobre el contenido y, en última instancia, poner ese contenido a disposición de otras personas para que lo consuman."

Sistemas de gestión de contenido más populares

Ranking basado en la información puesta en W3techs al 1 de julio de 2021:

• 1.WordPress
• 2.Shopify
• 3.Joomla
• 4.Wix
• 5.Squarespace

¿Qué es Moodle?

Para agilizar la primera etapa del proyecto, y con una decisión colectiva debido al tiempo que se requiere, se optó por utilizar la plataforma Moodle, esta, al ser un sistema de manejo de contenido nos entrega un sitio predefinido en que podemos empezar a manejar el contenido. Aquí primero nos familiarizamos con el modo de trabajo, buscamos herramientas que podrían facilitar las interacciones y cómo podíamos editar la apariencia del sitio.

“Moodle es una plataforma de aprendizaje diseñada para proporcionarle a educadores, administradores y estudiantes un sistema integrado único, robusto y seguro para crear ambientes de aprendizaje personalizados.” (Acerca de Moodle. 2020)

Que permite Moodle

En la documentación, como administrador Moodle nos muestra una variedad de elementos que permiten el manejo del sitio en distintas áreas como:

Usuarios y cursos:

• Autenticación: Ofrece diferentes métodos para añadir nuevos usuarios, como registro con correo electrónico, cuentas creadas manualmente por el administrador, suspender ingreso a cierto usuario en particular, etc.

• Gestión de cuentas: Buscar, editar, eliminar u otras acciones sobre las cuentas.

• Roles y permisos: Añadir permisos y roles a los usuarios de moodle.

• inscripciones: Añadir usuarios a cursos.

Servidores y seguridad:

• Herramientas de administrador: Buscar y reemplazar dentro de la base de datos y transferencia de datos

• Respaldo: Respaldar o hacer "copias de seguridad" del sitio

• Herramientas para desarrolladores: Depurar el sitio, borrar caché y herramientas para sitios de prueba y desarrollo

• Desempeño: Revisar la eficiencia y funcionamiento de Moodle

• Seguridad: Mantener el sitio seguro

• Servicios web: Conectar Moodle con otros sistemas y aplicaciones.

Configuración de sitio:

• Apariencia del sitio: Formas de cambiar la visualización y navegación del sitio

• Idioma: Idiomas por defecto y personalizar las que se usan por defecto

• Reportes del sitio: Lista de reporte para administradores

• Configuración del servidor: Registro, mantenimiento y configuraciones por defecto

Sitio web por defecto

Al configurar el servidor de Moodle y crear el administrador se comienza con esta version por defecto del sitio. La administración del sitio se hace atreves de la misma plataforma, por lo que al modificar la apariencia con un tema también cambian todos los menús de configuración.

Temas disponibles

Para personalizar moodle se debe hacer a atraves de temas y plugins, el tema le cambia la cascada de estilo y por lo tante el estilo visual completo, los plugins añaden nuevas funcionalidades al sitio.

Personalizacion de tema

Si bien cada tema tiene una gran variedad de personalización, esta siempre se mantiene en el contexto de aula online.

Nueva interfaz

Sitios referencia hechos con Moodle

• University of the people

• Dulwich College

• Aula Virtual PUCV

Plugins

Moodle nos permite adicionar una gran cantidad de Plugins que nos ayudarán en nuestro sitio a desarrollar, pero para comenzar se necesita saber que es un plugin.

"Un plug-in de software es un complemento de un programa que le añade funcionalidad. Por ejemplo, un plug-in de Photoshop (como Eye Candy) puede añadir filtros adicionales que puedes utilizar para manipular imágenes. Un plug-in de navegador (como Macromedia Flash o Apple QuickTime) permite reproducir determinados archivos multimedia dentro del navegador web."

Para la elaboración de gráficas matemáticas primero probamos herramientas como GeoGebra, pero nos encontramos con limitaciones visuales, queremos que estilo del sitio, ilustraciones y gráficas estuvieran en la misma línea. Con esta meta llegamos a JsxGraph que nos permite modificar el estilo visual libremente a través del código.

Edición en geoGebra

Moodle nos permite buscar plugins de GeoGebra para adicionarlas a los cuestionarios de matemáticas para una manera mas grafica y didáctica en el cuestionario.

• Plugins de GeoGebra: https://moodle.org/plugins/?q=geogebra

• GeoGebra Question type: Permite al profesor establecer preguntas que pueden ser resueltas y verificadas automaticamente.

https://www.youtube.com/watch?v=7Ol7J5M7IIs&ab_channel=TomKilloran

La importación de la gráfica a través del plugin de GeoGebra es sencilla ya que esta se debe hacer en la plataforma de GeoGebra y traspasar el link a Moodle pero esta solo funciona dentro de la pregunta, tampoco se puede modificar las dimensiones en la que aparece, siempre ocupará el ancho completo. Aunque es sencilla de usar esta no se puede modificar a gusto.

Gráfica a través de GeoGebra

Edición de cuestionario con GeoGebra

Edición en JsxGraph

JsxGraph es una herramienta mas compleja ya que se utiliza completamente a traves de codigo, pero ofrece muchas opciones para personalizar el estilo visual como grosor de linea, colores, tipografia, dimensiones y escalas.

Gráfica a través de JsxGrph

Edición de cuestionario con JsxGrph

JsxGraph nos permite agregar un grafico en una pregunta y a la vez interactuar con el sin salir del sitio moodle en que nos encontremos.

• 
• 

El código mostrado permite crear el espacio de trabajo y dentro de el comenzar a hacer lo que se quiere mostrar, un pro es que podemos interactuar de diferentes maneras con el gráfico, y su contra es que se debe hacer un código complejo para mostrar lo que se quiere, aunque se cuente con una librería online de JsxGraph en el cual se puede ver cada ejemplo matemático.

Además de el plugin especifico para moodle, esta la versión para html, en el cual tiene un manual para aprender a usarlo en este lenguaje de programación.

JSXGraph Book

Del mismo modo, existe una biblioteca de ejemplos matemáticos con código para el plugin de moodle, JsxGraph, en este caso, no todos se lograron mostrar en moodle para ejemplo ya que estos no siempre se mostraban en la caja del gráfico

• 
• 
• 

Las preguntas que surgen de estas pruebas o testeos en moodle, dejan para pensar por ejemplo, ¿por qué no se muestran en la caja o ¿por qué un código puede entrar en conflicto con el ya puesto en otra pregunta?

La siguiente imagen muestra como el código de JsxGraph, nos permite construir una gráfica para mostrar "items" que requieran este tipo ejemplos.

aaaaaa

Personalización del sitio web

Moodle cuenta con temas preestablecidos que nos permiten cambiar el estilo visual rápidamente manteniendo la funcionalidad del sitio, utilizamos uno llamado degradé que contaba con una buena estructura y sobre este comenzamos a modificar el código, el etiquetado de cada una de las partes del código se encontraba en distintas partes del servidor, por lo que mientras los íbamos encontrando dejábamos nota de ello para volver a modificarlos. Estas pruebas fueron realizadas en un servidor local que luego transferiremos al servidor final donde se harían las pruebas de funcionalidad.

En illustrator visualizamos los cambios que queríamos hacer, que después logramos con algunas limitaciones, queremos resaltar el espacio en el que se responde la pregunta por eso los grises actúan como capas donde el fondo se vuelve más oscuro fuera del espacio de la pregunta.

Tema degradé original.

Tema degradé modificado desde el código.

Prueba Gráfica

La siguiente propuesta, toma desde la idea de usar este tipo de preguntas en moodle, y el como se mostraria la explicación de la pregunta

Error al crear miniatura: Archivo más grande que 25 MP

Error al crear miniatura: Archivo más grande que 25 MP

Para la prueba de como se muestra en navegador se opta por hacer una vista previa utilizando github pages y animación en SVG, El siguiente link da una pequeña prueba: Muestra en Github

Desde la primera propuesta gráfica, se traslado la idea hacía moodle. En este sitio, se edito un "tema" base de moodle, en el cual desde la carpeta del tema y el tema base de moodle se cambiaron parámetros para llegar a lo que se propone.

En las siguientes imágenes, se muestra una diferencia desde el tema base, con el editado:

Tema editado de Moodle

Hoja guía de estilos de mooodle

La siguiente "hoja guía" dejamos en cuenta las ubicaciones de variables que se editaron para llegar a lo que se quería mostrar como propuesta gráfica de moodle.

Cápsula

El apoyo para los conocimientos en deficiencia de los profesores se desarrolla a través de cuestionarios, en estos, cada pregunta cuenta con una cápsula de apoyo relacionada a los contenidos. Cuando el profesor se equivoca en su respuesta puede acceder a la primera cápsula y puede volver a la pregunta para contestar nuevamente. Si este se equivoca otra vez entonces será dirigido a una cápsula de aclaración que explica la respuesta correcta. Una vez terminado el cuestionario se puede acceder a una cápsula de refuerzo para los contenidos en deficiencia.

Usuario se equivoca al responder.

Usuario accede a la cápsula de aprendizaje.

Cápsulas de contenido

• Formato JPG:

Es un formato de compresión que por lo general modifica la estructura habitual de las imágenes de pixeles, por lo que a veces este formato en función del grado de compresión puede llegar e generar perdida de calidad de imagen. El esquema de colores que trabaja es, RGB, escala de grises, CMYK

• Formato PNG:

El formato PNG o mas bien Portable Network Graphics es un formato de imagen universal, se caracteriza por ser capaz de soportar la transparencia o semitransparencia, lo que puede aplicarse para todo tipo de imágenes, las cuales trabaja en el esquema de RGB, escala de grises y colores indexados,

• Formato GIF:

GIF o Graphics Interchange Format, puede agrupar varias imágenes en un único archivo permitiendo crear pequeñas animaciones, a pesar de esto, no es recomendable para ver fotografías, trabaja con colores indexados.

• Formato SVG:

El formato SVG o Scalable Vector Graphics tiene grandes ventajas en el uso web, una escalabilidad sin perdida y bajo volumen de datos, además en sitios web móviles y responsivas. Se puede editar mediante CSS, por ejemplo, colores, tipo de letra, tamaño, etc. Se puede trabajar tanto en rgb como nombres de colores SVG(Ej: "Blue").

Su uso se recomienda para todo tipo de graficos en sitio web, desde iconos, logotipos, botones, iconos, etc

Este ultimo es el mas recomendable por su gran flexibilidad, este tiene una gran ventaja respecto a los demás en que puede hacer lo que todos los anteriores hacen a la vez, puede ser una imagen estatica, puede tener transparencia, puede ser animado e incluso puede ser interactivo, al ser puro codigo se adapta de manera perfecta al trabajo web.

svgator

svgator es una herramienta muy buena para crear animaciones en formato svg que da varias opciones de interaccion web como:

• Loop continuo de animación.
• Cantidad especificas de ciclos de animación.
• Animación empieza con el click.
• Animación empieza cuando el mouse esta sobre la imagen.
• Animación empieza en el momento que es visible al bajar por la pagina.
• Pausa o reset al click.

Sitio web svgator

Prueba de svg en github

Animación

El siguiente link muestra la animación en SVGator para el gráfico

Muestra en CodePen

Contenidos matemáticos

• Números: multiplicación y la división de fracciones, Potencias

• Álgebra y Funciones

• Geometría

• Probabilidad y Estadística

Identidad gráfica

Ítem de prueba

Con la siguiente pregunta sobre las catenarias y parábolas comenzamos a prototipar el tipo de ilustraciones que haremos. Aquí la cápsula debe destacar las semejanzas y, sobre todo, las diferencias. Para mostrar esto se visualiza algunas de las opciones, la característica colgante de la catenaria en la que animaremos los detalles en el entorno para enfatizar su forma estática y el movimiento de la trayectoria de un proyectil para la parábola.

1. La profesora Mónica desea abordar situaciones que se modelen a través de la función cuadrática, ¿Cuál sería el mejor ejemplo para presentar a sus estudiantes?

• a. Problema de puente colgante.
• b. Problemas de arco en un túnel de tren.
• c. Problema de un cable entre dos postes.
• d. Problema de lanzamiento de proyectil.

Respuesta correcta: d

Las alternativas a, b y c representan gráficamente catenarias. La única que representa una parábola es la alternativa d.

Visualización en cápsula: La capsula debe destacar las semejanzas y, sobre todo, las diferencias entre las catenaria y parábolas. Además de presentar aplicaciones de las funciones cuadráticas como el lanzamiento de una piedra o proyectil y el estudio del área de un rectángulo.

Primera iteración

En la primera iteración de la ilustración se crea una grilla en la cual a partir de la combinación formas básicas como cuadrados, rectángulos, triángulos y líneas. Cada una de las piezas que componen las figuras utilizan un tono distinto y se ocupan tonos pasteles

Pruebas de animación

Segunda iteración

En la segunda iteración se baja la cantidad de colores, ahora son dos colores divididos en dos tonalidades cada uno, una mas y otra menos saturada además de un gris. La intención es que los azules creen el cuerpo de la ilustración y que el rojo marque el elemento esencial respecto a la metería de la pregunta, el gris se ocupara para elementos menos importantes que contextualizan mejor las figuras. El blanco relaciona las figuras, aunque estén separadas el grosor constante las mantiene unidas.

La grilla se vuelve mas minuciosa, seguimos combinando figuras geométricas básicas pero ahora están separadas por trazos blancos, de esta forma podemos marcar con este relaciones de distancia, la posición que ocupan unos elementos respecto a otros. Al usar el trazo blanco las formas quedan dentro de la grilla ya que el grosor pasa por el medio del trazo, lo mantenemos de esta forma para asegurar la consistencia de este grosor cuando dos formas quedan juntas, en algunos lugares este grosor puede variar para darle mas importancia a algún elemento.

Pruebas de animación

Tipografía

Debemos prestar mucha atención a las tipografía que usaremos, sobre todo en la que usaremos para los números y formulas matemáticas, hay que tener en cuenta que algunos caracteres pueden confundirse con ciertos símbolos matemáticos que son parecidos pero significan cosas muy distintas, estos son algunos ejemplos:

Cambria Math

Con esto en mente decimos utilizar la tipografía Cambria Math la cual esta especializada para el uso matemático, cuenta con mas de cuatro mil glifos, con espaciado vertical y horizontal que permite reflejar la jerarquía exacta en las formulas, es una tipografía con serif por lo que hace mas fácil la diferenciación entre los números y algunas letras con formas parecidas.

Fira Sans

En el sitio web y el texto descriptivo en las ilustraciones se utiliza Fira Sans, su palo seco se utilizara para tener un texto fluido que se separe de las instancias descriptivas de las matemáticas marcadas por el serif

Comportamientos preguntas

Primer acercamiento a la construcción de ítems

Recta numérica

2.3.5

Item	Pregunta	Tipo de apoyo
2.3.5 Resolver inecuaciones lineales y sistemas de inecuaciones lineales.	Si 0<c<d , ¿cuál es el conjunto solución del sistema cx+d<0 en x? c+dx>0 con x,c, d ∈R	La pregunta requiere de una fórmula ilustrada. Capsula: A Través de intervalos en una linea recta demostrar visualmente los conjuntos, sobre la recta se debe ver la inecuación y con una animación mostrar la dirección que abarca. Requiere: Ilustración y animación

Elementos

Animación: Para este tipo de ejercicio es importante destacar el área que abarcan los conjuntos numéricos, la animación debe marcar el punto en el que parte la inecuación y la dirección que toma.

• gif

2.3.4

Item	Pregunta	Tipo de apoyo
2.3.4 Resolver inecuaciones cuadráticas, fraccionarias y con valor absoluto.	Plantea la siguiente inecuación cuadrática como sistema (s) de inecuación (es): x2-6x<0	Analizar las posibilidades de la expresión general A*B<0, cápsula: Fórmula ilustrada. Aclaración texto sobre conectivos , animación del proceso y animación de inecuación,

Secuencia del orden en el que se resuelve el ejercicio hasta llegar a la recta numérica que visualiza cuales son los conjuntos resultantes, cuando los dos conjuntos se sobreponen la parte que se combina se rellena completamente.

• gif

Ejercicio en clase

1.2.1

Item	Pregunta	Tipo de apoyo
1.2.1 Relacionar potencias, raíces y logaritmos.	Un profesor comienza la clase mostrando la siguiente tabla a sus estudiantes: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 2 4 8 16 32 64 128 256 512 1024 2048 4096 8192 16384 32768 Luego les pide que multipliquen dos números de la fila inferior, por ejemplo 32*256, pero que para ello consideren los números de la fila superior que están justo encima de estos factores (5 y 8) y luego que sumen estos últimos números. El resultado así obtenido lo ubican en la fila superior (13) y debajo de él se encontrará el resultado de la multiplicación (8192). ¿Con qué objetivo de aprendizaje relacionaría usted la actividad mostrada por el profesor?	La pregunta requiere una animación que muestre el procedimientos. Capsula: un texto que explique concepto de logaritmo a partir de su revisión histórica que involucra la comparación entre una progresión aritmética y una progresión geométrica las cuales son animadas, sucesión casos en progresión geométrica y aritmética a través de figuras que se repiten.

Elementos

Animación: Consta de dos partes, una del profesor en la sala explicando a los alumnos y otra de la "pizarra" donde se ve la secuencia que esta explicando

• gif

2.2.10

Item	Pregunta	Tipo de apoyo
2.2.10 Resolver problemas de diversos ámbitos que involucran en su solución ecuaciones cuadráticas.	Un profesor presenta la siguiente situación: Un equipo de trabajadores es capaz de fabricar E1t=t2-5t accesorios de celular en t horas, y otro equipo logra fabricar E2t=2t+8 los mismos accesorios en t horas. Si ambos grupos trabajan 8 horas al día. ¿Habrá alguna cantidad de horas donde la producción sea la misma? Un estudiante llama a su profesor para mostrar la solución al desafío planteado, le indica que sus soluciones son: La producción será la misma a las 2 y 12 horas. De acuerdo con lo presentado por el estudiante: ¿Cuál es el error que manifiesta?	Aclaración sobre los dominios en el problema a través de Texto explicativo y formula ilustrada

Animación: El globo de texto se desliza desde el alumno hacia el profesor, partiendo por el rabillo que se expande equitativamente hacia el cuadro.

En el uniforme del estudiante se simplifica la forma de la corbata, la forma V del cuello de se con combina con esta.

Gráficas

2.3.1

Item	Pregunta	Tipo de apoyo
2.3.1 Identificar bajo qué condiciones un sistema de ecuaciones lineales tiene solución única, infinitas soluciones o no tiene solución.	Con respecto a las soluciones de un sistema lineal 2x2 ¿cuál de las siguientes afirmaciones es verdadera? (Considere la ecuación de la recta en la forma: y=mx+b, en donde m es la pendiente y b es el coeficiente de posición)	Cápsula: Recordar la relación de los sistemas 2x2 con su representación gráfica, indicando la clasificación de los sistemas de ecuaciones. Tres tablas que muestran las posibles combinaciones

2.2.15

Item	Pregunta	Tipo de apoyo
2.2.15: Relacionar las raíces de la ecuación cuadrática con la gráfica de la función cuadrática correspondiente y con los parámetros de la ecuación (discriminante).	La figura adjunta ilustra la parábola asociada a una función cuadrática f, donde V es su vértice ¿Cuál de las siguientes funciones representa la función cuadrática asociada a la parábola?	Requiere una Formula graficada en JsxGraph. Cápsula: Mostrar comportamiento a través de JsxGraph identificar la ecuación cuadrática

2.2.11-1

Item	Pregunta	Tipo de apoyo
2.2.11 Relacionar e interpretar los parámetros de la función cuadrática y su gráfico.	¿Cuál de las siguientes figuras representa mejor al gráfico de la función cuadrática, sea m>0, fx=(x-m)2 ?	Requiere Formula ilustrada y gráficas alternativas Cápsula: Demostrar el movimiento de la parábola al modificar las variables, Jsxgpraph: interacción de variables, La interacción solo permitirá mover hacia una dirección

Para las alternativas se simplifica la cantidad de detalles en la grafica, la parábola se encuentra en distintos cuadrantes del plano, para que el conjunto de alternativas no se carguen demasiado en alguna dirección se les da un fondo gris claro que las deja en igualdad de espacio

Fórmula

En esta categoría lo único requerido es la formula como imagen, para que queden bien ordenadas con la tipografía Cambria Math

1.2.2

Item	Pregunta	Tipo de apoyo
1.2.2 Resolver operaciones con potencias, raíces enésimas y logaritmos, aplicando propiedades.	Un (a) estudiante resuelve el siguiente ejercicio de raíces usando las propiedades vistas en clase: 416=4-24=-244=-21=-2 El procedimiento y la solución obtenida por el (la) estudiante ¿son correctos? En caso contrario, ¿cuál es el error que comete?	Requiere una Formula ilustrada/animación del proceso. Cápsula: Diferenciar raíz y radical, mostrando sus definiciones y un ejemplo, secuencia del procedimiento del estudiante

2.2.11-2

Item	Pregunta	Tipo de apoyo
2.2.11-2 Relacionar e interpretar los parámetros de la función cuadrática y su gráfico	El profesor Juan entrega la siguiente actividad a un grupo de estudiantes: Un equipo de trabajadores es capaz de fabricar E1t=t2-5t accesorios de celular en t horas, y otro grupo logra fabricar E2t=2t+8 accesorios de celular en t horas. Si ambos grupos trabajan 8 horas al día. ¿Habrá alguna cantidad de horas donde la producción sea la misma? ¿Cuál de las siguientes alternativas menciona contenidos previos que debería tener el estudiante para determinar el conjunto solución de la tarea entregada por el profesor Juan?	Cápsula: Mostrar el paso de la resolución de este problema, mediante la alternativa de la ecuación de segundo grado y la factorización, además el dominio contextualizado del problema.

2.3.8

Item	Pregunta	Tipo de apoyo
2.3.8 Resolver sistemas de ecuaciones lineales con dos incógnitas.	De acuerdo a los siguientes sistemas de ecuaciones lineales 2x2, ¿cuál cree usted que es el método de solución más probable que utilicen las (los) estudiantes al resolverlos, considerando la forma en que el sistema está planteado? Relacione cada sistema con un método.	Requiere formula ilustrada, Cápsula: Mostrar la cantidad de pasos para cada uno de los sistemas con ilustración de los procesos y texto explicando cada método

Ilustración de objetos

2.2.13-1

Item	Pregunta	Tipo de apoyo
2.2.13 Reconocer el tipo de situaciones que se modelan aplicando la función cuadrática.	La profesora Mónica desea abordar situaciones que se modelen a través de la función cuadrática, ¿Cuál sería el mejor ejemplo para presentar a sus estudiantes?	Capsula: Visualización de las opciones incorrectas (catenaria), Ejemplo de una parábola con animación de trayectoria de lanzamiento marcando puntos relevantes para las ecuaciones y en la catenaria animar lo que sucede alrededor, en la parábola animar su trayectoria. Requiere: -Sobreposición de las ilustraciones anteriores, para la mostrar clara diferencia entre ellas

Tabla de contenidos

2.2.11-3

Item	Pregunta	Tipo de apoyo
2.2.11-3 Relacionar e interpretar los parámetros de la función cuadrática y su gráfico	En el programa de segundo medio, se presenta el siguiente Objetivo de Aprendizaje referido a Función Cuadrática: Mostrar que comprenden la función cuadrática f(x)=ax2+bx+c :a≠0 determinando puntos especiales en su gráfica. ¿Cuál de las siguientes alternativas sería un buen indicador de evaluación de ese Objetivo?	Capsula: Que el profesor reconozca los objetivos de aprendizajes y su/s respectivo/s objetivos de aprendizaje. En la catenaria animar lo que sucede alrededor, en la parábola animar su trayectoria. Aclaración Sobreposición de las ilustraciones anteriores, para la mostrar clara diferencia entre ellas y texto

La tabla solo esta dividida por dentro, la parte exterior no esta cubierta para que el texto no quede muy apretado ya que es extenso

Edición memoria

Grilla diagramación

Formato doble carta apaisada

Propuestas

Distinción portadillas que contendrán títulos de investigación, propuestas, producción de ítems junto a una descripción de esta seccion.

Desarrollo de investigación

Ítem: Distintos tipos de pregunta podrían requerir mas espacio tanto en texto como en los espacios para cápsulas y aclaraciones, pero esto irá dependiendo del tipo de ítem. El texto técnico sobre la pregunta, su área, y respuestas va en el área izquierda de la doble hoja, las iustraciones en el centro de esta junto a sus respectivas anotaciones, a la izquierda descripción de la intención general de la capsula y sus partes.

Se piensa en distinguir cada tipo de ítems y separarlos para agruparlos en cada tipología, por ej: recta numérica, números complejos, etc.

Una portadilla a la izquierda con una imagen muy suave que contenga una recopilación y combinación del tipo de imagen que utiliza este tipo de ítem. A la derecha un titulo acompañado de un icono que represente a este, este titulo se irá ajustando dependiendo de la extensión del texto al margen derecho de la descripción que irá centrada entre las tres columnas.

Las portadillas para las secciones se basan en las ilustraciones utilizadas en las capsulas, para dividir las secciones generales se utilizaría la versión azul oscuro, la versión clara se usaría para la división de tipo de ítem

Sistema de producción

La producción de ítems requiere de muchos pasos y algunos de estos pueden suceder al mismo tiempo, ya que somos dos personas trabajando en este lado del proyecto dividimos el trabajo para avanzar más rápido al mismo tiempo. Después de ordenar la información uno de nosotros hará las ilustraciones mientras el otro hace el código para las gráficas interactivas o anima ilustraciones ya hechas que lo necesiten. Una vez hechos todos los elementos necesarios se pasa a la diagramación en código que los ordena.

Datos

Programas utilizados: Google Sheets, Google Docs

Este proyecto involucra personas de distintas áreas, como Investigadores del área de estadística, informática y didáctica de la matemática, estos últimos son los encargados de diseñar los cuestionarios basándose en el modelo MTSK.

Los cuestionarios nos llegan en grupos, el primer grupo con 37 ítems y el segundo con 40, estos son la base en la que debemos trabajar. Primero comenzamos ordenando toda la información a nuestra disposición, con una tabla hecha en Google Sheets enumeramos cada ítem para utilizar como bitácora de avance. En esta damos un primer adentramiento a la materia, clasificamos qué tipo de apoyo es el necesario para cada ítem, que elementos son necesarios para la cápsula de aprendizaje y para la aclaración, si es necesario animar, ilustrar o hacer código para gráficas interactivas. Comentar puntos específicos que pueden ser problemáticos o que necesitan más atención y dentificar información externa que puede ser de utilidad

La pregunta y alternativas son lo primero en pasar a Moodle, se pasa todo el grupo junto para luego ir completando cada una con su respectiva cápsula y aclaración. Este proceso es el más rápido ya que solo se trata de mover la información desde el archivo a la plataforma.

La cápsula debe ser analizada cuidadosamente, esta puede ser simple como copiar, estilizar y reorganizar o muy complicada dependiendo de como esta esté planteada, los encargados de hacer los ítems pueden ser directos o ambiguos en sus indicaciones.

La aclaración suele ser más sencilla ya que entrega información extra que de la respuesta de manera clara.

Ingreso de pregunta y alternativas/ cápsula de aprendizaje y aclaración.

Total de ítems

Ilustraciones

Programas utilizados: Illustrator

Mientras se avanzaba con las ilustraciones necesarias para cada ítem se vuelve aparente que existen similitudes entre ellas, de estas hemos creado las siguientes tipologías que se pueden replicar entre si o usar como base para otra.

Gráficas

Estas pueden ser en dos tipos, una gráfica estática que demuestra algún caso y otra interactiva hecha en Jsxgraph(se verá mas adelante en la sección gráfica interactiva) para mostrar el comportamiento de variables. Este tipo de ilustración es el más sistemático, cuenta con una cuadrícula que describe un plano de coordenadas, estableciendo su eje vertical y y eje horizontal x.

Para su utilización rápida se agregan a la librería del programa illustrator para utilizar en los trazos, además de ajustar el tamaño de esta automáticamente dependiendo del tamaño del trazo. Para esto se debe modificar el archivo que contiene las puntas de flechas disponibles en el menú de trazo.

C:\Program Files\Adobe Illustrator [version]\ Support Files\
Required\Resources \[language version]\arrowhead.ai

Fórmula

Requiere ilustrar la fórmula con la tipografía Cambria Math que está especializada para el uso matemático, cuenta con serif que hace más fácil la diferenciación entre los números y algunas letras con formas parecidas. Para todos los elementos algebraicos se utiliza la versión itálica de la tipografía. Las fórmulas y ecuaciones se hacen en illustrator para resaltar la resolución o pasos de los ejercicios, por lo tanto no se utiliza para cada situación en la que se debe usar números.

El signo igual “=”, símbolo matemático utilizado para indicar la igualdad matemática, se le da el tono azul con la finalidad de identificar facilmente las partes de las ecuaciones o funciones, este tono tambien lo tienen otros elementos como los sistema de ecuaciones para enmarcar bien los limites, este tono no se marca demasiado conjunto al negro y mantienen una combinación sutil.

Ilustración de objetos

No son muchos los ítems que necesitan este tipo de ilustración, pero cuando son necesarios estos requieren de mas cuidado, algunos se hacen con grilla y otros no dependiendo del nivel de detalle y el tipo de objeto, ilustraciones mas pequeñas no necesitan una grilla ya que sus características se pierden. La característica más relevante que une todas las ilustraciones es el uso del blanco y los tonos que configuran las formas.

Recreación de ejercicio indicado como referencia en el documento de la cápsula 1.2.3-1 con la intención de mantener coherente y constante el estilo visual de cada parte del cuestionario.

Ficha ilustrativa

Este tipo combina ilustraciones y figuras con texto, juntos intentan explicar o visualizar un ejercicio o situación, es una representación gráfica de la asociación de ideas o conceptos que se relacionan entre sí.

Recreación de ejercicio indicados como referencia en el documento de la cápsula, algunos son recreados de la misma forma mientras otros cambian drásticamente dependiendo del contexto de la cápsula y la adaptabilidad al estilo gráfico.

Iconos

Los iconos mantienen el principio gráfico de las ilustraciones, el blanco separa las partes pero el trazo es más grueso ya que van en un tamaño más reducido. Todas mantienen la misma estructura, son rodeadas por un rectángulo que representa la pantalla ya que son indicaciones del sistema para enfatizar algún elemento de la cápsula o aclaración. Las partes dentro de este rectángulo sobresalen de él para enfatizar su significado (el cual es apoyado por el contexto de la cápsula y lo que está dice) y para darle más dinamismo ya que estas son animadas con movimientos leves.

Este caso es más bien una ilustración pero se construye de la misma manera que los iconos sin la separación por el blanco, estas son usadas en la aclaración cuando el usuario ya se ha equivocado dos veces, en la aclaración se intenta alivianar la experiencia con una sensación de esfuerzo y superación.

Gráficas interactivas

Programas utilizados: JsxGraph y Geogebra

JsxGraph

“JsxGraph es una librería multi navegador Javascript para geometría interactiva, trazado de funciones, gráficas y visualización de datos en el navegador web”(Team, J.)

Esta librería de código abierto nos permite crear un espacio de trabajo y dentro de él comenzar a graficar lo que se requiere, desde rectas, círculos, parábolas, y diferentes elementos interactivos.

Para comenzar a trabajar con este plugin se requiere un conocimiento previo de html, css y Javascript, pero que se puede adquirir utilizando su documentación en su sitio web, donde podemos encontrar los elementos básicos para crear los ejemplos que se requieran en los ítems. Esto último es un pro de utilizar un plugin como JSXGraph ya que podemos cambiar parámetros en sintonía con la propuesta gráfica.

Estructura básica del código de JsxGraph que crea el lienzo en el que se grafican las funciones, esta división contiene todos los elementos de la gráfica.

A continuación un listado de los tipos de objetos que más utilizamos para crear gráficas interactivas:

Define el sistema de coordenadas dentro del lienzo inicial, hay que asegurarse de que estas dos sean proporcionales entre sí para mantener la forma cuadrada. En este caso, el eje x aparece desde el -7 hasta el 7 mientras que el eje y desde el -5 hasta el 5.

El punto es uno de los objetos más básicos, para definirlos solo se debe definir sus coordenadas, estas pueden ser otras variables también.

El objeto “slider” da la posibilidad de interactuar con la gráfica, la hace cambiar dependiendo del valor que toma la cual está definida por el rango total, este fija un valor mínimo, inicial y final. La posición en la que el slider se encuentra también se puede definir fijando coordenadas para los dos puntos que la posicionan.

En el objeto “line” se definen dos coordenadas por los que pasa la recta. Cualquier objeto puede ser personalizado, para esto existen etiquetas para el color, color al ser seleccionado, grosor, línea discontinua, nombre, etc

El objeto “functiongraph” permite graficar distintas funciones en el lienzo(cuadráticas, logarítmicas, etc). Estas pueden ser dinámicas y se utilizan junto a otros objetos, por ejemplo: tomando el objeto “slider”(var a) podemos utilizar esta variable para que el valor que toma en la función cambie a medida que se interactúa con el slider.

El objeto “intersection” permite marcar las intersecciones entre dos funciones o líneas, se debe definir las dos funciones, en este caso la “var f” y “var l1” vistas anteriormente. Para marcar más de una intersección se debe repetir esta línea de código diferenciando las con el último dígito.

El objeto ‘’arrow” es una flecha que representa un vector que se puede conectar entre dos puntos ya definidos anteriormente.

El objeto ‘’Angle” se utiliza para mostrar en el lienzo el valor del ángulo entre 3 puntos. el ángulo se dibuja desde el primer punto al tercero alrededor del segundo, el último dígito define el sentido de este ángulo, puede ser +1 o -1. En este ejemplo el nombre de este ángulo es dinámico de esta manera el número cambia si algún punto cambia también.

El objeto “glider” crea un punto que que se desliza por una función, se define con una coordenada de la cual el punto es ajustado a una posición en la función en este caso “var f”.

Animación

Programas utilizados: svgator

Motion Design

Este esquema representa los dos espectros esenciales que componen el Motion Design. El eje horizontal representa la relación entre el movimiento y la gráfica, mientras que el eje vertical representa la relación entre el arte y el diseño

Movimiento y gráfica

La cualidad definitoria de los medios de movimiento es el cambio que ocurre en el tiempo. Los medios gráficos no cambian con el tiempo, estos aparecen estáticos a través de una ventana definida. Debido a que el cambio ocurre con el tiempo, al Motion Design a menudo se le denomina como un medio basado en tiempo. El cambio puede ocurrir en el transcurso de unos pocos cuadros, segundos, minutos, horas o incluso días.

El movimiento ofrece la oportunidad de jugar con cualidades de ritmo y tensión, independientemente de la duración real, la comprensión de cómo crear contrastes interesantes a lo largo del tiempo es esencial para un diseño de movimiento fuerte.

Diseño y Arte

Hay dos extremos diferentes del motion design: el que se parece más a las bellas artes y el que se parece más al diseño o al arte comercial. El movimiento en el ámbito de las bellas artes evoca cualidades de misterio o ambigüedad. El movimiento en el ámbito del diseño tiene como objetivo comunicar certeza. Por supuesto, hay motion design que tiene aspectos tanto de bellas artes como de diseño. Por ejemplo, un comercial puede comenzar con arte y misterio, pero terminará con diseño y certeza. Esta transición y viaje entre el arte y el diseño a través del movimiento es solo un aspecto de lo que hace que el diseño de movimiento sea atractivo tanto para los creadores como para la audiencia.

Nuestro proyecto definitivamente se mueve más hacia el lado de diseño o comercial, el enfoque matemático que tiene nos aleja del lado de las bellas artes, y aunque las matemáticas pueden ser esenciales para las bellas artes el proyecto va más enfocado al lado funcional que facilita y aliviana la experiencia del usuario, el docente que quiere medir y reforzar sus conocimientos.

Animación en la Experiencia de Usuario

El Motion Design puede guiar toda la interfaz de usuario. Crea una experiencia más natural al agregar un nuevo nivel de profundidad a la interacción del diseño. Todo esto sucede cuando implementa el lenguaje de movimiento correctamente.

No debemos animar solo por animar. Tanto las animaciones funcionales como las agradables deben ser significativas para los usuarios. Las animaciones siempre deben tener un propósito. Cuando una animación no tiene un propósito, puede parecer incómodo o molesta, especialmente cuando está ralentizando un proceso que podría ser más rápido sin ninguna animación. Una buena animación se alinea con los objetivos de los usuarios; permite a los usuarios comprender qué esperar de la interfaz.

En nuestro caso debemos analizar que tipo de ítem requiere una animación, cuales requieren una grafica interactiva en jsxgrph y cuales solo necesitan imágenes o texto. La animación debe facilitar la comprensión de la materia a reforzar y no entorpecer este proceso.

Ejemplos

Transición entre pantallas

Transición de pantallas

Los cambios de pantalla en la interfaz de usuario a menudo implican cortes bruscos (el cambio de una pantalla a otra sin efectos de transición intermedios) de forma predeterminada, lo que puede dificultar su seguimiento. En el mundo real, la mayoría de las cosas no aparecen o desaparecen de inmediato. Cuando conduces un coche y quieres parar en un semáforo en rojo, vas cada vez más lento, y solo después de eso, te detienes. Las mismas reglas se aplican a los productos digitales. Cuando algo tiene dos o más estados, los cambios entre estados serán mucho más fáciles de entender y seguir para los usuarios si las transiciones son animadas en lugar de ser instantáneas.

Corrección del sistema animada

Señales visuales

La animación nos ayuda a entender cómo interactuar con la interfaz de usuario. Cuando el usuario comienza a usar un producto, es posible que no tenga claro dónde buscar y qué hacer (especialmente si su producto tiene muchas características diferentes). El papel de la animación es crear las señales visuales necesarias para que el usuario sepa dónde está y qué está haciendo. Una transición animada bien diseñada guía la atención de su usuario, ayuda a dirigir el enfoque del usuario al lugar correcto en el momento correcto. Enfatiza los elementos correctos dependiendo de cuál sea el objetivo. Es por eso que la animación es especialmente buena para incorporar nuevos usuarios.

Retroalimentación visual de una acción

Retroalimentación visual (acción y reacción)

Las interfaces gráficas de usuario son reactivas por naturaleza. Cuando los usuarios interactúan con productos digitales, algo cambia constantemente en su pantalla. Los usuarios quieren saber su contexto actual en un sistema en un momento dado, y los productos no deben hacer que sigan adivinando: deben decirle al usuario lo que está sucediendo a través de retroalimentación visual apropiada. La animación es una herramienta excelente para proporcionar información visual sobre las acciones del usuario. La retroalimentación visual te hace sentir como si estuvieras interactuando con elementos reales en la pantalla y demuestra el resultado de esta interacción (si fue exitosa o no). Casi cualquier interacción del usuario puede beneficiarse del uso de animación. Por ejemplo, cuando presiona un botón, espera una reacción y la animación puede hacer que esta reacción sea más memorable.

Efectividad

Cantidad

Menos es más con respecto a la animación y las transiciones en particular. Cada movimiento en la pantalla llama la atención, por lo que demasiada animación al mismo tiempo crea caos. Se vuelve difícil para el usuario rastrear el movimiento si ve más de un objeto en movimiento. Por lo tanto, si tiene varios elementos que desea animar, debe definir claramente la secuencia de su movimiento y animar la menor cantidad de objetos posible a la vez.

Por lo tanto se debe examinar cuidadosamente el orden en el que cada animación aparece en la capsula, para nuestro caso no debería de haber mas de una animación a la vez para esto podemos recurrir a la interacción del click para activar una animación y después otra si es necesario

Varias animaciones a la vez / Solo una animación.

Velocidad

Se podría decir que el tiempo es una de las consideraciones más importantes al diseñar transiciones. Desempeña un papel muy importante en la creación de animaciones realistas. Una animación funcional debe tener un equilibrio. Independientemente del estilo de una animación, las transiciones no deben ser demasiado rápidas ni tan lentas que hagan esperar al usuario. La animación debe ser lo suficientemente lenta para dar a los usuarios la opción de notar el cambio, pero lo suficientemente rápida como para no causar espera.

En este caso la animación debe ser rápida y precisa, con poco o ningún retraso entre la acción de inicio del usuario y el comienzo de la animación. La animación en el ejemplo superior hace que el usuario espere el contenido y esto causa una mala experiencia de usuario. También existen otros casos en los que la animación no es un puente entre dos partes del contenido si no que la animación es y apoya al contenido en sí, cuando este es el caso la duración y velocidad dependerá de esto.

Curvas de animación

Comparación movimiento con desaceleración y continuo

En la realidad, la mayoría de las cosas no aparecen o desaparecen de inmediato. Cuando se mueve un auto y este para en un semáforo en rojo, cada vez va mas lento hasta que se detiene. Las mismas reglas se aplican en las animaciones.

Curvas de animación y como afectan el movimiento.

Podemos hacer animación digital al mover un objeto de una posición a otra, a estas posiciones le llamamos fotogramas claves y el espacio entre estos son los fotogramas intermedios, a través de las curvas de animación podemos manejar como se comporta el movimiento entre estas dos posiciones.

Si queremos que nuestras animaciones se sientan naturales debemos utilizar lineas bézier(curvas de animación), estas nos permiten controlar el estado de los objetos en el tiempo, con estas podemos acelerar o frenar a medida.

Utilizando SVGator

Las ventajas de utilizar el formato svg es que puede ser escalado sin perder calidad ya que a diferencia del formato jpg y png, se caracteriza por ser vectorizado y además en la aplicación SVGator puede ser utilizado como base para animar ya que todas los elementos del archivo svg quedan separados y pueden ser editados dentro de esta app.

SVGator es una aplicación web que se centra en crear animaciones en formato svg de manera sencilla e intuitiva por lo que utilizar esta app facilita en muchos sentidos la propuesta de animar ciertos contenidos para la plataforma ya que nos permite crear:

• Loops continuos de animación.

• Cantidad específicas de ciclos de animación.

• Animaciones que empiezan:

1. Al cliquear.
2. Cuando el cursor está sobre la imagen.
3. En el momento que es visible al bajar por el sitio web.

• Pausar o resetear animaciones.

• Exportar a otros formatos como .svg, .dart y .js

Interfaz: Esta aplicación cuenta con una interfaz fácil de manipular en los aspectos básicos para empezar a crear una animación, además de permitirnos subir un archivo ya hecho en otro programa como illustrator.

• 1. Canvas: Cuenta con una separación por capas y grupos de los cuales podemos ir ordenando al gusto que se necesite.

• 2. Línea de tiempo: En este apartado podemos tener a la vista el tiempo que demora la animación, además de ir modificar el orden en que un objeto aparece, manejar el cambio de posición, escala, etc.

• 3. Edición: Se puede editar el objeto cambiando color, tamaño, opacidad, etc.

• 4. Animación: Aquí podemos elegir que tipo de animación tendrá el objeto como:

1. Posición (mover de un lado a otro)
2. Escala (cambiar el tamaño)
3. Rotar (girar el objeto)
4. Opacidad (transiciones)
5. Sesgar (deformar el objeto)
6. Ancla (modificar las lineas)

• 5. Curva de animación: En esta parte podemos decidir la aceleración que tiene el objeto en un determinado tiempo.

• Exportar: Este menú nos ofrece la posibilidad de exportar nuestra animación con distintos tipos de interacción mencionados anteriormente, además elegir la velocidad de reproducción de la animación.

Front-end y diagramación

Programas utilizados: Visual studio code, CSS, Boostrap, HTML y WinSCP

Grillas

Contar con diferentes plantillas de este componente facilita el proceso de diagramación de las cápsulas y aclaraciones, ademas de mantener un espacio en común entre ellas.

Escalado de tamaños en distintas pantallas.

El diseño responsivo es un enfoque del diseño web que hace que el contenido de la web se adapte a los diferentes tamaños de pantalla y ventana de una variedad de dispositivos. (Duò, M. 2022)

No podemos pensar en el diseño para web con un tamaño especifico, existen muchos tipos de pantallas con proporciones especificas y debemos incluir a la mayor cantidad posible.

Con este objetivo en mente cada medida se hace a través de porcentajes de la pantalla, cuando se especifica porcentaje como medida de algún elemento, el navegador calcula su tamaño dependiendo del elemento que lo contiene, en este ejemplo podemos ver cómo al utilizar un medida en pixeles crea un diseño que no es constante a través de distintos tamaños de pantalla, si utilizamos un porcentaje el ancho de este elemento se ajustará al ancho total de la pantalla.

Este principio es llevado a cada elemento, cuando se trabaja con porcentajes hay que tener en cuenta que los subelementos toman el tamaño total de su contenedor.

Por esto debemos ser cuidadosos al calcular los espacios entre las partes de la cápsula, etiquetas cómo padding, border margin nos permiten controlar estos aspectos.

Bootstrap

¿Qué es?

Bootstrap es un framework CSS de código abierto que favorece el desarrollo web de un modo más sencillo y rápido. Incluye plantillas de diseño basadas en HTML y CSS con la que es posible modificar tipografías, formularios, botones, tablas, navegaciones, menús desplegables, etc.

Modal

Es una manera de agregar diálogos, notificaciones o contenidos que se requieran para el sitio. Consiste en una caja o ventana que aparece por sobre el sitio, permitiendo agregar contenido deseado en ésta.

• Un ejemplo en el sitio de Moodle sería el siguiente: Al apretar el botón "AYUDA" una ventana emergente aparece mostrando el contenido de la cápsula. Así mismo esta ventana contiene un botón de cerrar tanto arriba (x) y abajo(cerrar) para mejorar la navegación del usuario por la cápsula

Navs

Este componente permite a los usuarios cambiar entre 2 o mas tipos de "tarjetas" que nos permite navegar entre ellas en el mismo espacio de trabajo y así evitar usar otras ventanas del navegador.

Collapse

Permite crear elementos colapsables y que al hacer clic este abre una ventana en un espacio determinado por el contenido

Accordion example

Complementando a los elementos colapsables, como se ve en bootstrap es apilar varias tarjetas y que en el clic estas se abran mostrando el contenido en su interior

• Ejemplo en Moodle: En este punto se combinan los dos componentes anteriores para crear una mejor interacción dentro de la "cápsula de aprendizaje", ya que permite movernos entre distintas "ventanas" y objetos colapsables que contienen las dos explicaciones que necesitaba este ítem

Previsualización elementos para ítems

Cápsulas y Aclaraciones

Grilla general

Clasificación Cápsulas

Tabla información curricular

Este tipo de capsula contiene tablas con el contenido curricular que debe saber el profesor, estas provienen directamente del curriculum establecido por el gobierno de chile. El tipo de grilla que utiliza varía dependiendo de los objetivos de aprendizaje establecidos.

Centrado pasos de ejercicio

Aquí solo hay una columna de texto, este puede ir justificado o centrado dependiendo del tipo de ejercicio al que haga referencia, las fórmulas conectan los párrafos y le dan continuidad mostrando cada paso para resolver el ejercicio

Navegación opciones

Esta capsula da la opción de ver contenidos separados por secciones uno a la vez, usualmente lleva grandes imágenes o formulas.

Comparación de gráficas

Texto centrado en el cual se comparan 3 graficas en 3 columnas, estas pueden salir de la grilla general de la capsula para una mejor comparación en un tamaño mas apropiado.

Gráfica interactiva centrada

El punto central de esta capsula es la gráfica interactiva que va centrada, puede ir acompañada de texto centrado para explicación sobre la gráfica y también texto alineado junto a un icono para dar indicaciones para posibles actividades en clase.

Gráfica información complementaria

Dos columnas, la derecha mas grande contiene la grafica interactiva que es complementada con información a la izquierda, esta información da indicaciones sobre como funciona la grafica o puede ser rellenada a partir de esta.

Animación complementaria

La animación es pequeña y va en la columna izquierda, esta complementa la información a la derecha visualizando como se comporta el problema. Este orden puede invertirse dependiendo del caso.

Centrada con ejemplos

Lleva grandes imágenes explicativas al igual que tarjetas desplegables, hay mucha información en este tipo de capsula y por eso se separa en secciones que se pueden ver una a la vez, cuando se abre una tarjeta nueva la anterior se cierra automáticamente.

Video guía

Esta va dividida en 2 columnas una para iconos y otra que propone una actividad a través de un video tutorial que ocupa el ancho máximo, abajo tiene instrucciones generales.

Clasificación Aclaraciones

Láminas

Prueba Ítems

Carpeta de ítems

Click para ver la carpeta de ítems