Taller de Titulación: Personas y Territorios - Plataforma virtual CODOEN

De Casiopea
TítuloTaller de Titulación: Personas y Territorios - Plataforma virtual autoinstruccional CODOEN - Proyecto PUCV - Interdisciplinario 37.0/2021
Tipo de ProyectoProyecto de Titulación
Período2021-
AsignaturaTaller de Titulación: Personas y Territorios
Del CursoTaller de Titulación: Personas y Territorios
CarrerasDiseño, Diseño Gráfico
Alumno(s)Marcelo Mondaca, Omar Nuñez
ProfesorMichèle Wilkomirsky, Elisabeth Rodriguez
PDFArchivo:Nuñez Omar Mondaca Marcelo carpeta 11.07.22.pdf

Carpeta de ítems

Click para ver la carpeta de ítems

Proceso Producción

Introducción

Problemática y estado actual

ILUST 4 exp-113 oana.jpg

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)[1]

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.

ILUST 4 exp-114 oana.jpg

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)[2]

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).[3]

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).[4]

Marco conceptual

Felix- Mesa de trabajo 1 oana.jpg

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

Benchmark

CMS: Unbounce y Ruby: lenguaje de programación

Kadenze2021 referencia t1.png

CMS: Khoros y Umbraco

Udemy2021 referencia t1.png

CMS: Ruby on rails: web frameworks y Ruby: lenguaje de programación

Codecademy2021 referencia t1.png

CMS: Next.js: frameworks y Node.js: lenguaje de programación

Coursera2021 referencia t1.png

CMS: Expressjs, un web framework, y PHP: Lenguaje de programación

Skill share2021 referencia t1.png

CMS: Gatsby

EdX2021 referencia t1.png
Tutellus2021 referencia t1.png

CMS: Wordpress y PHP: lenguaje de programación

Keepcoding2021 referencia t1.png
  • 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
  • Aplicación "Prepara tu examen de conducir Chile"

Desde la pantalla de inicio de la aplicación móvil, nos muestra las elecciones que podemos tomar dependiendo que licencia se quiera tomar examen, para esto al pasar esta selección nos pregunta si queremos hacer el examen o leer el cuestionario de preguntas para estudiar, de este modo estudiando este cuestionario, podemos hacer el examen que al finalizar se verán los resultados y nuestras respuestas correctas y erróneas

  • Sitio web "Smartick"=

Sitio de test rápidos de matemáticas, en este caso de una manera mas "ludica" al momento de responder, donde se ira marcado de color verde o rojo según sea la respuesta correcta o erronea.

  1. Pantalla inicial que nos pregunta por nuestra edad y estudios
  2. Formulación de pregunta y respuesta correcta
  3. Respuesta marcada errónea y a la vez se marca la respuesta correcta
  4. Pantalla de resultados
  5. Recapitulación de las preguntas marcando en cada una cual era la correcta para la revisión posterior
  • Corrección de portafolio. Existe un método de capacitación para profesores en los cuales a través de este, se evalúa al docente en su desempeño con estos en el aula de clases.

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.

¿Qué es un 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."[5]

"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?

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.[6]

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:[7] 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:[8] Buscar, editar, eliminar u otras acciones sobre las cuentas.
  • Roles y permisos:[9] Añadir permisos y roles a los usuarios de moodle.
  • inscripciones:[10] 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

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.

¿Qué es un Plugin?

"A software plug-in is an add-on for a program that adds functionality to it. For example, a Photoshop plug-in (such as Eye Candy) may add extra filters that you can use to manipulate images. A browser plug-in (such as Macromedia Flash or Apple QuickTime) allows you to play certain multimedia files within your Web browser."[11]

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.

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.

  • 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

Sitios referencia hechos con Moodle

Formatos de salida de imagen

Hoy en día, en la era digital, nos encontramos con distintas maneras en las que vemos una imagen en un sitio web, aplicación móvil, en incluso juegos, pero estos tienen distintas maneras en las que se comportan, desde una imagen estática hasta una con movimiento sin caer en un formato de video, bajando considerablemente el tamaño de este. A estos tipos, les llamamos Formatos Gráficos

Formatos gráficos más utilizados en la web[12]

  • 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

Animación con SVG

Existen varias alternativas para animar en formato SVG y poder adjuntarlos en nuestro sitio web, para esto se encontró un sitio llamado SVGator que nos permite hacer animaciones, exportándolos a un SVG y con una simple línea de código en html se adjunta a donde queremos que vaya.

Pruebas en Moodle

Las siguientes pruebas se llevaron a cabo con moodle, en donde se logra identificar Plugins, como JsxGraph y Plugins de GeoGebra del cual se opta por el primero para realizar testeos en el sitio.

Testeo de Plugin JsxGraph en moodle

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

JsxGraphBook MMA 2021 tit.png

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?

Propuesta 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

Muestra en Github

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:

Propuesta animación

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

Muestra en CodePen


Propuesta en Moodle

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.

Ejemplo con JsxGraph

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

explicación código
Ejemplo jsxgraph item 1 titulo codoen 2021.png

Hoja guía de estilos de mooodle

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.

Estilos moodle prueba 2021 titulo.jpg

Cápsula

Mapa capsula-04.jpg

El apoyo para los conocimientos en deficiencia de los profesores se desarrolla a través de cuestionarios, en estos, cada pregunta cuenta con una capsula de apoyo relacionada con los contenidos en cuestión. A esta capsula se puede acceder de dos maneras, la primera es opcional, si el profesor cree que necesita ayuda en la pregunta puede ir directamente a la capsula para obtener ayuda. El equivocarse al responder es la segunda manera, al ocurrir esto después de ver la capsula se puede volver a la pregunta para contestarla nuevamente. Si este se equivoca nuevamente entonces será dirigido a una capsula de aclaración que explica la respuesta correcta. Una vez terminado el cuestionario se puede acceder a una capsula de refuerzo para los contenidos en deficiencia.

Usuario se equivoca al responder.
Usuario accede a la cápsula de aprendizaje.

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.

Casos Mesa de trabajooana.jpg

Primera iteración

Oana color prueba ilust-02.jpg

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

Oana animacion prueba 1ca.gif
Oana animacion prueba 1pu.gif
Oana animacion prueba 1po.gif

Segunda iteración

En la segunda iteración se baja la cantidad de colores, ahora son dos colores con 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.

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.

Oana animacion prueba 2ca.gif
Oana animacion prueba 2pu.gif
Oana animacion prueba 2po.gif

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: [13]

Ilust2-14 oanatype.jpg

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.

Ilust2-13 type math.jpg

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

Ilust2 oana fira-15.jpg

Comportamientos preguntas

 CODOEN multiples intentos1.png  CODOEN multiples intentos2.png  CODOEN multiples intentos3.png  CODOEN multiples intentos4.png  CODOEN multiples intentos5.png

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

Ilust3 exp oana-01.jpg
Ilust22 detalle oana-01-16.jpg

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
Untitled Project ani1 oana.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.

Oana reta num codoen-05.jpg
  • gif
Untitled Project oana gif recta.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

Ilust22 detalle oana-01-16333333.jpg

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
Untitled Project ani2 oanaf.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.

Profe alumni oana-11-11-11.jpg

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
Ilust3 ilust oana graph2-12.jpg

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
Asdsadas oana jsx.png
Untitled Project3 oana gif.gif

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

Ilust3 oana graf111-12.jpg
Untitled Project oana jsx.gif

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
Ilust3 oana13 formula-13.jpg

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.
Ilust3 oana graph22112-14.jpg

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

Oana animacion prueba 2pu.gif Oana animacion prueba 2po.gif

Oana animacion prueba 2ca.gif

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

Aaaaa oana tabla.png

Presentación Taller de Titulación de Diseño 1

Edición memoria

Grilla diagramación

Formato doble carta apaisada

Grilla diagramación

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.

Portadilla

Desarrollo de investigación

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.

Desarrollo de investigación

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.

Items

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

Portadas

Sistema de producción

ILUST 4 exp-112 oana oana.jpg

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

Exel oana codoen.png

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.
Ya4 oana.png
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

ILUST 4 exp-92 oana.jpg

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.

ILUST 3-40 oana.jpg

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
ILUST 3-41 oana.jpg

Fórmula

ILUST 4 exp-93 oana.jpg

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.

ILUST 4 exp-94 oana.jpg

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

ILUST 4 exp-95 oana.jpg

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.

ILUST 4 exp1-116 oana.jpg

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

ILUST 4 exp-96. oana.jpg

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í.

ILUST 4 exp-117.jpg
ILUST 4 exp-99 oana.jpg

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

ILUST 4 exp-97 oana.jpg

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.

ILUST 4 exp-118 oana.jpg

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.

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

Esquema que representa espectros esenciales que componen el Motion Design

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.[14]

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. [15]

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.[16]

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

Oana-Ezgif-5-5000a92e64.gif
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.

Separacion oana coden.jpg
Oana-Ezgif-5-5f3d939852.gif
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.

Separacion oana coden.jpg
Oana-Ezgif-5-03dcdd67a3.gif
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.

Separacion oana coden.jpg

Efectividad

ILUST 4 exp-130 oana (1).jpg

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.

Oana-dot.gif Transición larga que anima cada parte después de la otra / Transición corta que anima todo a la vez.

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
ILUST 4 exp-132.jpg

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.

ILUST 4 exp-133.jpg
ILUST 4 exp-134.jpg
  • 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.
Separacion oana coden.jpg

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.

ILUST 4 exp-135.jpg
ILUST 4 exp-136.jpg
Escalado de tamaños en distintas pantallas.
ILUST 4 exp-109.jpg
ILUST 4 exp-110.jpg

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.

Separacion oana coden.jpg

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.[17]

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.

Bootstrap wiki codoen1 2022.png
  • 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
Bootstrap wiki codoen 2022.png

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.

Bootstrap wiki codoen2 2022.png

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

Bootstrap wiki codoen3 2022.png
  • 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


Bootstrap wiki codoen 2022 gif.gif

Cápsulas y aclaraciones

Grilla general

Oana-grilla-Capsulas y aclaraciones clasificacion (1).jpg
Oana-grilla-Capsulas y aclaraciones clasificacion (2).jpg

Clasificación Cápsulas

Capsulas y aclaraciones clasificacion-04.jpg
Capsulas y aclaraciones clasificacion Mesa de trabajo 1 copia 2.jpg

Tabla información curricular

Capsulas y aclaraciones clasificacion-tablas-oana.jpg

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.

 jaja  Capsulas 29-37 37-2.jpg  Capsulas 29-37 37-3.jpg  Capsulas - 15-28 15.jpg  Capsulas - 15-28 22.jpg

Centrado pasos de ejercicio

Capsulas y aclaraciones clasificacion-centro paso-oana.jpg

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

 jaja  Capsulas 1-14 12.jpg  Capsulas 29-37 34.jpg  Capsulas 29-37 35.jpg

Navegación opciones

Capsulas y aclaraciones clasificacion-oana-nav.jpg

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

 jaja  Capsulas - 15-28 25-2.jpg  Capsulas 29-37 36.jpg

Comparación de gráficas

Capsulas y aclaraciones clasificacion-comp-graficas-oana.jpg

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.

 jaja  Capsulas 29-37 33.jpg

Gráfica interactiva centrada

Capsulas y aclaraciones clasificacion-grafic-inter-oana.jpg

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.

 jaja  Capsulas - 15-28 17.jpg  jaja  Capsulas - 15-28 20.jpg  Capsulas 1-14 4.jpg  Capsulas 1-14 4-2.jpg  jaja  Capsulas 1-14 8.jpg  jaja  Capsulas 1-14 10.jpg  jaja  Capsulas 1-14 14.jpg  jaja  Capsulas 29-37 32-09.jpg

Gráfica información complementaria

Capsulas y aclaraciones clasificacion-graf-info-oana.jpg

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.

 jaja  Capsulas 29-37 31.jpg

Animación complementaria

Capsulas y aclaraciones clasificacion-animacion-compl-oana.jpg

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.

 jaja  Capsulas 1-14 1.jpg  Capsulas 1-14 2.jpg

Centrada con ejemplos

Capsulas y aclaraciones clasificacion-collapse.jpg

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.

 jaja  Capsulas - 15-28 24-2.jpg  Capsulas - 15-28 26.jpg  Capsulas 1-14 5.jpg  Capsulas 1-14 5-2.jpg  Capsulas 1-14 13.jpg  Capsulas 1-14 13-2.jpg  Capsulas - 15-28 19-3.jpg  Capsulas - 15-28 19.jpg  Capsulas - 15-28 19-2.jpg

Video guía

Capsulas y aclaraciones clasificacion-vid-oana.jpg

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.

Carta Gantt

Láminas

Lamina Mesa de trabajo 1 codoen oana.jpg
Lamina Mesa de trabajo 1 copia codoen oana.jpg
Lamina Mesa de trabajo 1 copia 2 codoen oana.jpg

Prueba Ítems

Carpeta de ítems

Click para ver la carpeta de ítems

Referencias

  1. [Canales, A., & Maldonado, L. (2018, mayo). International Journal of Educational Development. Teacher quality and student achievement in Chile: Linking teachers’ contribution and observable characteristics, 60, 33–50. https://doi.org/10.1016/j.ijedudev.2017.09.009]
  2. [García, M. (2021, 6 octubre). ¿Qué es y para qué sirve la web 2.0? Aula 10 Centro de Formación. Recuperado 25 de junio de 2022, de https://aula10formacion.com/blog/blogque-es-y-para-que-sirve-la-web-2-0/]
  3. [Martínez - Chairez, G. I., Guevara - Araiza, A., & Valles - Ornelas, M. M. (2016). El desempeño docente y la calidad educativa. Ra Xinhai, 12(6), 123-134. Obtenido de http://www.redalyc.org/articulo.oa?id=46148194007]
  4. [Gunka Studios. (2021, 19 julio). En qué consiste el diseño de sitios web interactivos. Recuperado 26 de junio de 2022, de https://gunkastudios.com/diseno-de-sitios-web-interactivos/]
  5. Concepto de CMS Barker, D. (2021). Web Content Management Systems, Features, And Best Practices. Shroff/O’Reilly."
  6. Acerca de Moodle. (2020, 7 noviembre). Moodle. https://docs.moodle.org/all/es/Acerca_de_Moodle
  7. Autenticación - MoodleDocs. (2020, 10 noviembre). Inscripciones - MoodleDocs. https://docs.moodle.org/all/es/Autenticaci%C3%B3n
  8. Gestionando cuentas - MoodleDocs. (2017, 17 abril). Gestionando cuentas - MoodleDocs. https://docs.moodle.org/all/es/Gestionando_cuentas
  9. Roles y permisos - MoodleDocs. (2020, 11 septiembre). Roles y permisos - MoodleDocs. https://docs.moodle.org/all/es/Roles_y_permisos
  10. Inscripciones - MoodleDocs. (2020, 20 noviembre). Inscripciones - MoodleDocs. https://docs.moodle.org/all/es/Inscripciones
  11. Christensson, P. (2006). Plug-in Definition. Retrieved 2021, Aug 29, from https://techterms.com
  12. Los formatos de imagen más importantes en Internet. (2021, 17 septiembre). IONOS Digitalguide. https://www.ionos.es/digitalguide/paginas-web/diseno-web/cuales-son-los-formatos-de-imagen-mas-importantes/
  13. Wolf, K. et al.(1986). Manual de lenguaje y tipografía científica en castellano (1.a ed.). Trillas S. A. de C. V. https://www.fis.unam.mx/~bwolf/Book%27s/Manual/CAP-3.pdf
  14. DESIGN FOR MOTION Fundamentals and Techniques of Motion Design, Austin Shaw (2015)
  15. DESIGN FOR MOTION Fundamentals and Techniques of Motion Design, Austin Shaw (2015)
  16. Nick Babich. (2020). Animation Principles for UX Designers. 12/04/2022, de Adobe Sitio web: https://xd.adobe.com/ideas/principles/human-computer-interaction/animation-principles-for-ux-designers/
  17. Urrutia, D. (2021, 5 agosto). Qué es Bootstrap - Definición, significado y ejemplos. Arimetrics. https://www.arimetrics.com/glosario-digital/bootstrap