Proporcionalidad. Las Espirales VII

Entre las innovaciones producidas en el ámbito de colaboración de la Red Educativa Digital Descartes destacan las aportadas por la Red Educativa Digital Descartes Colombia (colDescartes) y la Red Educativa Digital Descartes España que, coordinadas por el profesor Juan Guillermo Rivera Berrío, han añadido al subproyecto GEOgráfica una importante cantidad de contenidos, lo que ha hecho necesario dividir el subproyecto inicial en varios subproyectos: GEOcapital, GEOdiver y GEOcolor, estando en fase de desarrollo los de: GEOevaluación y GEOrios, los tres primeros se pueden ver y descargar siguiendo el enlace gráfico siguiente.

El potencial formativo de estas unidades queda de manifiesto en la escena anterior y en la que enlazamos a continuación.

En la creación efectiva de las unidades han intervenido:

• Juan G. Rivera Berrío
• Diego Feria Gómez
• Ramiro A. Lopera Sánchez
• José R. Galo Sánchez
• Ángel Cabezudo Bueno
• Ildefonso Fernández Trujillo

Acceso a los contenidos.

Dentro de nuestro ámbito local destacan, entre otras muchas, las siguientes aportaciones:

• La actualización de la profesora Consolación Ruiz Gil de su unidad didáctica titulada "Curvatura", este trabajo ha sido recibido por el presidente de la Red Descartes con un artículo magistral en el blog de la web con el título "¿Cómo observar lo que no podemos ver? Taller y laboratorio de curvatura" en el que ejemplariza algunas acepciones del concepto de curvatura, quizás motivado por la extraordinaria y sutil belleza de la unidad actualizada.
  La siguiente imagen enlaza con dicha unidad.

• Las aportaciones del profesor Eduardo Barbero Corral al proyecto iCartesiLibri, consistentes en varios cuadernos en formato de libro digital interactivo para la práctica con las operaciones de números Enteros.
  El uso de estos materiales en el aula o como referencia para la consolidación de conceptos fuera de ella es altamente recomendable. A continuación observamos una escena de uno de dichos cuadernos que es un enlace al cuaderno completo.

En esta ocasión, en la sección de vídeo, hemos elegido uno donde se muestra la presencia de la espiral en las técnicas de sanación relacionadas con el equilibrado de los hemisferios con objeto de apreciar diferentes formas de enfocar el tema que nos ocupa.

Continuando con la creación de la miscelánea "Las Espirales" hemos añadido al menú de tipos de espiral una nueva opción: "la espiral de Durero" tal y como anunciamos en el artículo del mes pasado.
En esta ocasión hemos procedido igual que en el caso de la espiral Cordobesa:

• De la Miscelánea Espirales generalizadas de Durero hemos extraido la siguiente escena.
• Desarrollo de la gráfica de la espiral de Durero

La escena del proyecto puede verse a continuación:

Desde este enlace puede descargarse el proyecto de miscelánea con la espiral de Durero incluida.

En próximas entradas continuaremos con el paso a paso del proyecto incluyendo la espiral de Fibonacci y otras más entre sus funcionalidades, reseñando las novedades y analizando el subproyecto Misceláneas. Animamos a los lectores a colaborar en el proyecto con contenidos o aportando ideas y sugerencias. Ildefonso Fernández Trujillo

En el presente artículo se explica una técnica empleada por nuestro compañero Eduardo Barbero Corral que permite validar cuando se han distribuido correctamente una serie de nombres sobre un espacio bidimensional. 

Creemos que ya no es necesario detallar, de la misma forma como lo hicimos en los dos proyectos precedentes, las herramientas de edición necesarias, como conseguirlas y como invocarlas a lo largo del proceso de elaboración. Basta remitirse a los primeros pasos indicados en “Escenas con DescartesJS: Técnicas y trucos” y en “Escenas con DescartesJS: Técnicas y trucos (B02)”.

• Suponemos que el lector sabe acceder al editor de escenas de DescartesJS, desplazarse por los distintos paneles de configuración, agregar elementos a la lista en cada panel, rellenar ventanas y casillas correspondientes a cada elemento.

• Recordamos que la escena tiene que ser generada con la opción Librería portable-solo para JS y que habrá que modificar las dimensiones de la escena por defecto, 970x550 píxeles, abriendo la ventana de código desde cualquier panel de configuración.

Figura 1

Idea del proyecto

Actuaciones en el panel Botones

En esta ocasión hay que desmarcar las casillas de los cuatro botones Créditos, Config, Inicio y Limpiar que por defecto ocuparían las cuatro esquinas de la escena. Aunque deben de quedar ocultos, en cualquier momento se pueden ver en una ventana emergente al hacer clic derecho sobre la escena.

Actuaciones en el panel Espacio

En el panel Espacio se escribe el nombre de la imagen, mapacylmudo.jpg, indicando la trayectoria dentro de la carpeta del proyecto, que se verá como fondo de la escena y en posición centrada.

Figura 5

Obsérvese que están desmarcadas las casillas que dibujan la red, los ejes, texto y números. Así es como se desea que quede el espacio finalmente, pero es conveniente que se activen a lo largo del proceso de elaboración de la escena pues facilita las coordenadas de posición que deben ocupar los diferentes textos.

La escala (píxeles de la unidad coordenada) por defecto es 48, por lo que no es necesario explicitar este valor.

Marcaremos la casilla de fijo para que el espacio no se desplace al arrastrar el puntero.

Actuaciones en el panel Controles

Insertamos tantos controles gráficos como número de provincias g1, g2, g3, ..., g9.

Estos controles quedarán alineados en columna, a la izquierda. (-4.5, 3.2), (-4.5, 2.4), (-4.5, 1.6), (-4.5, 0.8), (-4.5, 0), (-4.5, -0.8), (-4.5, -1.6), (-4.5, -2.4), (-4.5, -3.2)

Tienen un tamaño de 20 píxeles, adecuado según la escala para poderlos seleccionar fácilmente y ser arrastrados a la posición correspondiente sobre el mapa.

El control existe, pero no se tiene que ver en la escena pues la idea es que sirva exclusivamente de soporte al nombre de la provincia que le va a acompañar; esto se consigue poniendo valor 0 en la ventana de condición dibujar-si.

Veremos con más detalle en el panel Gráficos la relación que debe de existir entre las coordenadas de esos controles y las de los textos de las provincias.

Figura 6

También ponemos un control numérico, tipo botón, para ejecutar la acción de inicio, que quedará en el ángulo inferior izquierdo, interior, de la escena. Este botón permite reiniciar la escena y practicar de nuevo desde un principio.

Figura 7

Actuaciones en el panel Programa

En esta sección determinamos la forma de averiguar si el control gráfico se ha arrastrado al sitio adecuado en el mapa.

Empezamos por anotar las coordenadas de un punto centrado en la región del mapa correspondiente a cada provincia. Podemos utilizar por ejemplo una hoja de cálculo o un simple editor de texto. Para ver las coordenadas de estos puntos marcamos la casilla texto en el panel Espacio a fin de que se visualicen las coordenadas del punto cuando se hace clic izquierdo sobre el mapa. Una vez registradas las coordenadas de estos puntos se debe desmarcar la casilla texto en el panel Espacio.

Así por ejemplo un punto centrado en la región del mapa correspondiente a la provincia de Ávila tiene las coordenadas (-0.3, -2.56)

Figura 8

Necesitamos una variable auxiliar para cada provincia cuyo valor refleje si el control gráfico se ha aproximado lo suficiente a ese punto centrado en la región del mapa y así poder validar la posición. Basta que este auxiliar tome en cada momento el valor 0 o el valor 1. Estableceremos un margen de aproximación de las coordenadas: Para Ávila, la diferencia de abcisas, en valor absoluto, menor que 0.5 y la diferencia de ordenadas, en valor absoluto, menor que 0.7

avb=(abs(g1.x+0.3)<0.5)*(abs(g1.y+2.56)<0.7)

Si el control gráfico g1 está dentro de esa zona la respuesta es correcta y el auxiliar avb toma el valor 1.

Los márgenes son diferentes para cada provincia dado que la forma y el tamaño de cada región en el mapa es irregular.

Los auxiliares y su correspondiente expresión algebraica para las distintas provincias se pueden observar en la Figura 9.

Han sido escritas en el algoritmo CALCULOS y se evalúan siempre.

Figura 9

Actuaciones en el panel Gráficos

Situar el texto titular

Al inicio, encabezando la escena vemos el texto “Coloca cada nombre en el centro de su provincia”

Figura 10

Utilizamos un gráfico tipo texto para escribirlo y la opción Texto simple para dar formato: SansSerif, Negrita y tamaño 20. El color es turquesa (rojo=00, verde=ff, azul=ff) y lleva borde de color negro.

La posición en escena de un gráfico tipo texto se expresa en píxeles, como ya hemos advertido en las ediciones anteriores. Aquí este texto va situado en [114,10] es decir a 114 píxeles hacia la derecha y 10 píxeles hacia abajo del vértice superior izquierdo de la escena que se toma como origen [0,0].

Para determinar esta posición se visualiza, solo con esta finalidad, la red, ejes coordenados y números del espacio y se tiene en cuenta que la unidad coordenada es de 48 píxeles (escala por defecto).

Podemos hacer un cálculo muy simple para determinar la posición del texto:

114 píxeles=48 píxeles*2.38 (unidades coordenadas hacia la derecha)
10 píxeles=48 píxeles*0.21 (unidades coordenadas hacia abajo)

Figura 11

El texto tiene que verse únicamente cuando los nombres de las provincias no están aún bien situadas en su región en el mapa, así pues, debemos de poner la condición

dibujar-si: avb*bub*leb*pab*sab*seb*sob*vab*zab=0

es decir, mientras algún nombre de provincia no esté bien situado.

Situar los nombres de las provincias .

Insertamos tantos puntos como nombres de provincias haya que distribuir en el mapa. Observemos que un punto puede llevar asociado un texto que se visualiza próximo a modo de etiqueta. Cada texto será el nombre de una provincia y va a estar apoyado en un control gráfico (g1.x, g1.y), (g2.x, g2.y),… (g9.x, gy.9). De esta manera conseguimos que el nombre asociado al punto se desplace al arrastrar el control gráfico.

Figura 12

Modificamos algo la colocación del punto gráfico para que el centro de cada control gráfico coincida con el centro de cada nombre:

(g1.x-0.44, g1.y-0.1), (g2.x-0.65, g2.y-0.1), (g3.x-0.48, g3.y-0.1), (g4.x-0.8, g4.y-0.1), (g5.x-1, g5.y-0.1), (g6.x-0.75, g6.y-0.1), (g7.x-0.5, g7.y-0.1), (g8.x-0.92, g8.y-0.1), (g9.x-0.7, g9.y-0.1)

Al arrastrar el control gráfico que, aunque oculto, queda situado en el centro del nombre de la provincia, arrastramos también el nombre de la provincia cuyas coordenadas están vinculadas a las de aquel.

El formato del texto se consigue con la opción Texto simple, pulsando el botón texto que precede a la ventana donde se escribe el nombre de la provincia: Tipo de letra SansSerif y tamaño 20.

Situar el texto "muy bien"

Figura 13

Se verá solamente cuando todos los nombres estén correctamente colocados, para ello se pone la condición

dibujar-si: avb*bub*leb*pab*sab*seb*sob*vab*zab=1

es decir, si todos los auxiliares de provincias tiene el valor 1 y por lo tanto los controles gráficos correspondientes están bien situados dentro del margen establecido.

Figura 14

El formato del texto es SansSerif, Negrita y tamaño 40 y se obtiene con la opción Texto simple. El color es turquesa, como el texto de encabezado y se bordea, también, con color negro.

Propuesta final

Animamos a la realización de escenas que sigan el mismo principio técnico de elaboración que hemos presentado en este artículo, por ejemplo:

• Posicionar adecuadamente los nombres de los elementos de un polígono regular (radio, apotema, lado, diagonal).

El docente sabrá encontrar enseguida otras aplicaciones relacionadas con la actividad que esté desarrollando con sus alumnos. Se debe entender que el fondo de la escena puede ser una imagen de naturaleza cualquiera, no necesariamente la de un mapa geográfico y los nombres tendrían que ver con el contexto donde deban de ir situados. 

  escena_B03.zip

Autoría:

Eduardo Barbero Corral (Idea del proyecto y técnicas de programación DescartesJS)

Ángel Cabezudo Bueno (Interpretación, edición de la escena, ilustraciones  y redacción)

Este material está publicado bajo una licencia:

Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional

Si te gustan los puzles ¡estás de enhorabuena! ya que hemos publicado una unidad didáctica que te permite elaborarlos de una forma sencilla y cómoda, y contando con diferentes tipos y versiones.

En la unidad didáctica de Juan Guillermo Rivera Berrío, de la Red Educativa Digital Descartes Colombia, titulada "Puzles Descartes" se muestra y detalla, paso a paso, cómo elaborar puzles análogos a los que se presentan como ejemplo. 

Estos atractivos puzles son actividades y test de memoria, de arrastre, de asociación y de intercambio, y se generan sin más que realizar simples y usuales tareas de edición de imágenes y de ficheros de texto. Se aprovecha el potencial educativo y la interactividad intrínseca de Descartes sin necesidad de desarrollar escenas de Descartes. Para ello se usan escenas, previamente desarrolladas, como cajas negras que recibiendo como entrada un conjunto de datos preparados por el profesor o profesora generan una actividad interactiva que pueden utilizarse e incorporarse en el proceso de enseñanza-aprendizaje. El profesorado no necesita conocer cómo elaborar la escena de Descartes sino que la utiliza como soporte para la consecución de su objetivo educativo, su tarea se centra en el diseño y elaboración de los datos e imágenes auxiliares que se usan como entrada o parámetros del puzle. 

Los materiales que pueden elaborarse tienen encuadre en cualquier nivel educativo y materia, ya que es el contenido en sí el que marca su ubicación. Por ejemplo, un test de asociación puede establecerse entre poliedros regulares y sus denominaciones o bien entre imágenes de animales y sus nombres en castellano o en otro idioma; o en un test de memoria es posible identificar figuras geométricas con igual o análoga forma o bien animales de la misma especie, o palabras sinónimas. En definitiva la creatividad docente es la que mueve la herramienta en la consecución de logros educativos.

Las actividades que son necesarias realizar para el desarrollo de estos materiales se encuadran en tres tipos de acciones:

1. Manipulación y transformación de imágenes.
2. Edición de textos sin formato, tipo txt.
3. Preparación de los datos necesarios para el recurso.

Sencillas tareas que utilizan herramientas auxiliares que se explicitan y describen en dicha unidad. Pero la tarea esencial y principal, la que hay que tener siempre presente y la que marca el éxito educativo, se centra en la focalización del objetivo docente, la planificación del mismo y la elección de la estrategia a seguir para su consecución, es decir, abordar el diseño conceptual a partir del cual podremos concretar el diseño material, que a su vez se plasmará en una temática y un tipo de actividad a desarrollar.

Os animamos a elaborar vuestos puzles y a que nos lo enviéis a Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo. para publicarlos en nuestro, vuestro, servidor.

Proporcionalidad. Las Espirales VI

Entre las innovaciones producidas en el ámbito de colaboración de la Red Educativa Digital Descartes destacan las aportadas por la Red Educativa Digital Descartes Colombia (colDescartes), que gracias a la integración de los mapas de Google en las escenas DescartesJS, realizada por Diego Feria Gómez, ha abierto un amplio abanico de posibilidades al proyecto GEOGráfica según muestran las escenas que, creadas por el profesor Juan Guillermo Rivera Berrío, se han añadido al mismo y que se pueden ver y descargar siguiendo el enlace gráfico siguiente.

También es de reseñar la creación, de forma colaborativa, de una Biblioteca virtual formada por libros interactivos y dinámicos con contenido lúdico-formativo adaptado a cada continente y país y que pasan a formar parte del contenido del subproyecto GEODiver dentro de GEOgráfica. El responsable e impulsor de la idea es Juan G. Rivera y han colaborado, además de él mismo:

• Diego Feria Gómez (Oceanía)
• Ramiro A. Lopera Sánchez (Estados de USA y países de Suramérica)
• José R. Galo Sánchez (Países de Europa y Provincias de España)
• Ángel Cabezudo Bueno (Asia)
• Ildefonso Fernández Trujillo (África)

Acceso a los contenidos.

Dentro de nuestro ámbito local destacan las creaciones y adaptaciones de unidades del proyecto ed@d. En esta ocasión enlazamos la creada por: Jesús Muñoz Calle, Joaquín Recio Miñarro y Luis Ramírez Vicente y adaptada por Luis Ramírez Vicente para la asignatura de Física con el título de "Las Ondas".

De la colección de unidades interactivas del subproyecto COMPETENCIA SOCIAL Y CIUDADANA que el profesor Luis Barrios Calmaestra ha creado sobre algunos de los temas curriculares enlazamos el referente a los impuestos.

En esta ocasión en la sección de vídeo aprovechamos el impulso de desarrollo de vídeos lúdico-educativos de la Red Educativa Digital Descartes Colombia para presentar un video-puzle. Consiste, como en un puzle tradicional, en colocar cada pieza en su sitio, pero de fondo, en lugar de una imagen estática se usa un vídeo en reproducción. Se ha simplificado sobremanera el vídeo presentación con objeto de facilitar la toma de contacto, aunque siguiendo los enlaces de la ayuda se puede acceder al código fuente y a la aplicación original. Para acceder, pulsad sobre la siguiente imagen. Nota editores RED Descartes 19 de agosto de 2023: Este vídeo-puzle ya sólo funciona en el navegador Firefox, debe de usar éste si desea ver cómo funcionaba en su momento.
Cuando las adaptaciones educativas estén publicadas dedicaremos nuestra atención a tan interesante innovación.

Continuamos con la creación de la miscelánea que con el título Las Espirales va a contener una serie de escenas donde se introducirán, estudiarán y representarán algunas espirales.  

En el artículo anterior se añadieron al proyecto: la escena de la espiral de Teodoro y la escena sobre como dibujar las espirales de 3, 4, 5 ... 20 centros y se quedó en incluir la espiral Cordobesa, cosa que hemos realizado de la siguiente manera:

• De la Miscelánea Espirales generalizadas de Durero hemos extraido la siguiente escena.
• Desarrollo de la gráfica de la aproximación gnomónica de la espiral Cordobesa

La escena del proyecto puede verse a continuación:

Desde este enlace puede descargarse el proyecto de miscelánea con la espiral Cordobesa incluida.

En próximas entradas continuaremos con el paso a paso del proyecto incluyendo la espiral de Durero, la de Fibonacci y otras más entre sus funcionalidades y analizando el subproyecto Misceláneas.

Animamos a los lectores a colaborar en el proyecto elaborando contenidos o aportando ideas y sugerencias.

Ildefonso Fernández Trujillo

En el vídeo de esta semana presentamos dos libros dinámicos interactivos con actividades para el aprendizaje y la práctica de las operaciones con números enteros.

Estas unidades forman parte del proyecto iCartesiLibri, un proyecto de la Red que se basa en el desarrollo de materiales para el aprendizaje en diversas áreas de conocimiento, promoviendo la autonomía del estudiante y su formación en competencias.

En el primer libro digital, Cuaderno para practicar con los números enteros, primera parte, se introducen los números enteros y las operaciones de la suma y la resta. En el segundo libro digital, Cuaderno para practicar con los números enteros, segunda parte, se definen el producto y sus propiedades, la división y las potencias.

En estos materiales encontramos muchas actividades autocorrectivas que se generan aleatoriamente, permitiendo la realización de los ejercicios tantas veces como se precise. Para ampliar y consolidar los conceptos trabajados, se proponen diversos cuadrados mágicos de cálculo con enteros.

Para su aplicación en el aula, se muestran los pasos a seguir para insertar estas unidades en un aula virtual moodle.

Buscando experimentar con nuevos formatos de recursos interactivos e integrar las escenas interactivas de Descartes en soportes que puedan resultar atractivos para nuestro alumnado, hemos abierto una nueva sección dentro del subproyecto GEOgrafica a la que hemos denominado GEOdiver.

Como indica su nombre, tiene como objetivo el aprendizaje de la Geografía de manera divertida y, para ello, se plantean diversas actividades lúdicas mediante las cuales el alumnado aprende jugando, es decir, lo que actualmente se encuadra en el término "gamificación" (transcripción fónetica al castellano del término inglés gamification) o también con un término de raíz más próxima a nuestra lengua: "ludificación".

Actualmente en GEOdiver hemos incluido siete minilibros cuya temática se centra en los cinco continentes habitados (África, América, Asia, Europa y Oceanía) y en dos países (Colombia y España). Estos recursos han sido elaborados por cartesianos colombianos y españoles siguiendo un esquema y patrón común.

El soporte simula un libro clásico en el que se puede pasar de una hoja a otra bien con las flechas laterales o bien seleccionando el borde de la hoja y desplazándola como es habitual en un libro de papel.

También se dispone de un índice, ubicado en la esquina superior derecha, desde el que puede desplazarse de manera rápida a una página concreta sin necesidad de pasar por las intermedias.

En las diferentes páginas nos encontramos actividades basadas en el clásico juego del ahorcado, puzles de desplazamiento, de emparejamiento, de intercambio y giratorios,  sopas de letras y búsqueda con lupa.

 ¡Puedes empezar a jugar!

"Matemáticas con arte" fue el lema del VI Encuentro Provincial del Profesorado de Matemáticas, que se celebró durante los días 11, 12 y 13 de noviembre de 2015 en la Universidad Pablo de Olavide de la capital hispalense. Este encuentro, que tiene carácter bienal, está organizado por los Centros del Profesorado de la provincia de Sevilla y la Sociedad Andaluza de Educación Matemática "Thales", y pretende ser un lugar de reflexión compartida sobre qué matemáticas enseñamos y cómo, de intercambio de experiencias, de miradas y acercamientos diferentes a la enseñanza de las matemáticas.

Este mes vamos a ver la unidad de 3ºESO correspondiente a "Figuras planas. Propiedades métricas":

En este video hemos tratado los siguientes apartados:

1.Ángulos en la circunferencia
   Ángulo central y ángulo inscrito

2.Semejanza
   Figuras semejantes
   Semejanza de triángulos. Criterios

3.Triángulos rectángulos
   El teorema de Pitágoras
   Aplicaciones del T. de Pitágoras

4.Lugares geométricos
   Definición y ejemplos
   Más lugares geométricos: Cónicas

5.Aplicaciones
   Áreas de figuras planas

Nuestra asociación "Red Educativa Digital Descartes" (RED Descartes) acaba de editar y publicar el volumen primero de la nueva publicación periódica titulada

Recursos educativos interactivos de RED Descartes

Este volumen consta de tres números: Vol. I-Núm 1, Vol. I-Núm. 2 y Vol. I- Núm. 3.

La referencia oficial y administrativa es:

ISSN: 2444-9180 Dep. Legal: CO-2079-2015

y pueden descargarse desde los siguientes enlaces.

Vol. I, enero de 2016
Vol. I - Núm. 1 (3,7 GB)		Vol. I - Núm. 2 (4,7 GB)		Vol. I - Núm. 3 (4,3 GB)
Incluye los materiales de los subproyectos @prende.mx, Pizarra interactiva, Proyecto Canals, Unidades didácticas, Comperetencias, ASIPISA, Misceláneas, iCartesiLibri, Ingeniería y Tecnología, Un_100, Problemas, Estudio Europeo de Comunicación Lingüística y GEOgráfica.		Incluye los materiales del Proyecto ED@D Matemáticas (1º, 2º y 3º de Secundaria) y Aplicaciones de juegos didácticos en el aula.		Incluye los materiales del Proyecto ED@D Matemáticas (4º de Secundaria) y Proyecto ED@D Ciencias Naturales y Física y Química de Secundaria.
Carátulas		Carátulas		Carátulas
Portada Contraportada Galleta		Portada Contraportada Galleta		Portada Contraportada Galleta

 Todas y todos los socios de RED Descartes están de enhorabuena por esta nueva iniciativa que ayudará a la difusión de todo el trabajo altruista que realizan en pro de la Educación en la aldea global, gracias a las TIC. 

Muchas gracias por la atención que ha recibido nuestro primer artículo de nivel básico de “Escenas con DescartesJS: Técnicas y trucos”. Esperamos seguir manteniendo vuestro interés por la ayuda que os podamos prestar desde aquí.

Cuando Eduardo Barbero Corral me proporcionó una lista de títulos de entre su colección de recursos de cosecha propia, enseguida me fijé en este que hoy os presentamos para dar continuidad a la serie: no me cabe duda que os va a gustar. La redacción de este artículo mantiene el mismo método de trabajo con el anterior; he utilizado las ideas de Eduardo, la descripción que él me hace de este recurso según su técnica de programación y las anotaciones en cada etapa para el proceso de elaboración de la escena: Botones, Espacio, Controles, Auxiliares, Cálculos y Gráficos.

La mejor forma de entender su proceso y darlo a conocer a través de este artículo es seguir sus pautas de una forma práctica: me pongo manos a la obra, genero la escena, voy anotando mis propias observaciones en aquellas partes que requieren alguna explicación más amplia, saco imágenes sobre los materiales, la escena y los paneles de configuración del Editor de Escenas para que sirvan de ayuda al lector interesado… Después de un intercambio de opiniones con su autor para la mejora didáctica procedo a la redacción del artículo.

Este trabajo trata los controles numéricos tipo campo de texto para escribir sobre ellos palabras (contenido alfanumérico).

Veremos cómo podemos programar escenas en las que el alumno debe contestar escribiendo una palabra en un control numérico tipo campo de texto.

Los controles numéricos se emplean en muchas escenas; en un principio en ellos solamente se podían escribir números, pero actualmente, la herramienta Descartes también permite que se utilice un control numérico para que el alumno escriba en él una expresión alfanumérica y que se pueda interpretar como texto. Esto nos posibilita crear escenas tipo test.

¡No confundir un control numérico tipo campo de texto con un control texto al manipular el panel Controles o si se consulta la  Documentación técnica!

Cuando tratemos más adelante el panel de Controles para programar la escena si el lector lo considera necesario puede consultar el artículo sobre Controles numéricos en la Documentación técnica.

Idea del proyecto

La siguiente Figura 2 lleva un enlace a la escena ya elaborada a partir de la idea expuesta. Interaccionad con ella para comprender la funcionalidad y después explicaremos los recursos de DescartesJS que se emplean utilizando el Editor de Escenas.

Figura 2

Figura 3

Primeros pasos, herramientas y recomendaciones

Ya dijimos en el artículo anterior cuales son los primeros pasos que hay que dar antes de empezar a programar la escena, las herramientas que se necesitan y algunas recomendaciones para quienes se inician con DescartesJS.

Remitimos a estos preliminares, explicados con detalle y ahora solo hacemos un recordatorio esquemático:

1. El Gestor de escenas de Descartes, denominado Descartes.jar, debe de haberse descargado y disponer de un acceso directo (recomendable) en el escritorio de Windows. Además, es conveniente un editor de texto como Notepad++ que dispone de un modo particular para presentar las líneas de código y facilitar la lectura y edición de los archivos HTML.
   
   
2. Crear la carpeta de contenidos. En este trabajo la hemos denominado escena_B02
   
   
3. Incluir la subcarpeta lib que contiene el archivo intérprete descartes-min.js.
   
   
4. El archivo index.html incluye el código de la escena encerrado entre etiquetas <ajs> </ajs> y la referencia al interprete, <script type='text/javascript' src='lib/descartes-min.js'></script>, delante de la etiqueta de cierre </head>.
   
   
5. Los pasos 2 a 4 se pueden realizar desde el mismo Gestor de Escenas.

El procedimiento preliminar consiste:

1. Abrir el Gestor de Escenas
   
   
2. Seleccionar en el menú Opciones > Librería portable > Sólo para JS (verificando esta elección en la línea de estado, línea inferior en la ventana del Gestor)
   
   

   Figura 4

3. Seleccionar en el menú Archivo > Guardar como, especificando la carpeta destino (creándola en ese momento si no existe) y el nombre que damos al archivo portador de la escena index.html

Figura 5

De esta manera disponemos ya del archivo index.html que contiene el código necesario para poder ver una escena básica que por defecto ha creado el Gestor. La Figura 6 muestra el código del archivo así creado visto desde el editor Notepad++

Figura 6

Para continuar, no olvidar incluir en la carpeta de contenidos escena_B02 el archivo monte.jpg.

Iremos describiendo paso a paso la trasformación de esta escena básica, utilizando el Editor de Escenas del Gestor Descartes.jar hasta culminar el proyecto.

Es importante que las explicaciones que aquí damos se acompañen, si fueran insuficientes, con la consulta puntual del concepto que se esté aportando en la "documentación técnica", sin pretender conocerlo todo desde un principio y solo para entender la aplicación en esta escena en concreto.

Apertura del Editor de Escenas y cambio de las dimensiones de la escena

La escena por defecto tiene un botón básico en cada esquina: créditos (arriba-izq), config (arriba-dcha), inicio (abajo-izq), limpiar (abajo, dcha).

Con la escena básica en la ventana del Gestor, accedemos a configurarla con el Editor de Escenas, de dos formas alternativas:

• Pulsando el botón E (editar) al lado derecho, fuera de la ventana.
• Pulsando el botón config (configurar) en la esquina superior derecha de la escena.

Figura 7

Estos botones pueden desactivarse posteriormente (todos o solo alguno), si creemos que no son necesarios que se muestren en la escena, pero podemos en cualquier momento acceder a ellos haciendo clic derecho sobre cualquier parte de la escena como se muestra en la Figura 8

Figura 8

La figura siguiente muestra el panel Botones del Editor con todos ellos desactivados. Así es como vamos a configurarlo en este proyecto.

Figura 9

Para cambiar el tamaño de la escena, que por defecto es 970x550 píxeles, recordemos que hay que hacerlo desde el código de la escena. Al pulsar el botón código (arriba a la derecha) accedemos al código fuente de la escena y escribimos el ancho (530px) y el alto (296px) especificado para este proyecto

Figura 10

Para proceder con este cambio habrá que aplicar y cerrar (X) la ventana de código para regresar al panel de configuración del Editor de Escenas.

Cambios en el panel Espacio

Figura 11

• En el campo “imagen”, escribimos el nombre del archivo, monte.jpg, incluyendo su trayectoria respecto del archivo index.html, que lleva el código de la escena.
  
  
• Elegimos la opción centrada en el campo “despl_imagen” (desplazamiento de la imagen).
  
  
• La red, los ejes y los números están desactivados.
  
  
• La escala cuando no lleva valor es por defecto 48 píxeles.

Cambios en el panel Controles

Iremos añadiendo (+) sucesivamente los controles numéricos identificados internamente (id) como n1, n2 y n3, seleccionando el tipo “campo de texto” y que utilizamos respectivamente para dar respuesta a cada una de las tres partes de la montaña: cima, cumbre o pico, ladera o falda y pie. Estos controles hay que definirlos como “interiores” y así podremos situarlos donde mejor convenga dentro de la escena. El control tiene forma rectangular.

Las posiciones respectivas sobre la escena serán las siguientes:

• Para la respuesta n1, la posición junto a la cima es (244,10, 70,30)
• Para la respuesta n2, la posición junto a la ladera es (386,100,70,30)
• Para la respuesta n3, la posición junto al pie es (310,210,70,30)

Los cuatro números, leídos ordenadamente y encerrados entre paréntesis, (x, y, w, h), significan:

• x: Distancia horizontal en píxeles del vértice superior izquierdo del control al lado izquierdo de la escena
• y: Distancia vertical en píxeles del vértice superior izquierdo del control al lado superior de la escena.
• w: ancho del control
• h: alto del control

Figura 12

En la Figura 12 se muestra los parámetros del control n1. No mostramos las figuras correspondientes a n2 y n3 dado que son similares a n1 diferenciándose en el campo “pos” y en el auxiliar para la condición “dibujar-si” (b2=0 en el control n2 y b3=0 en el control n3).

El campo “nombre” es el nombre externo que tiene el control, a modo de etiqueta, a la izquierda del control. Si no ponemos nombre la etiqueta en un control numérico de campo de texto, la etiqueta no va a aparecer y solo se muestra el área rectangular del control para recibir el texto como respuesta.

También es posible indicar que el “nombre” es vacío con las expresiones _._, _nada_ o _void_. Estas fórmulas son en cambio necesarias en los controles numéricos tipo pulsador (que trataremos en otros proyectos) pero no en los de tipo campo de texto.

Es importante marcar la opción “solo texto” para que se interprete la entrada como un dato no numérico y escribir el “valor” inicial como cadena vacía, abriendo y cerrando apóstrofos '' (acentos simples) o abriendo y cerrando barras verticales ||. Si no iniciamos el control con cadena vacía, aparecerá el valor 0 por defecto, antes de que podamos escribir un texto: cuando pedimos al alumno que escriba una palabra preferimos que el rectángulo esté totalmente en blanco.

Queremos que los controles desaparezcan cuando el alumno ha contestado bien, por eso en el control n1 se ha puesto la condición dibujar-si='b1=0'. Es decir, desaparecerá cuando el auxiliar b1 toma valor distinto de 0. De esa manera el alumno puede corregir hasta dar una respuesta correcta. Cuando la respuesta es correcta el control desaparece, pero en su lugar debemos hacer que aparezca la palabra que ha escrito el alumno. Para ello, más adelante en el panel de Gráficos añadimos un gráfico tipo texto con el contenido de n1 que se dibuja cuando la respuesta es correcta, ahora con la condición dibujar-si=’b1’

Hemos añadido un cuarto control para que la escena se reinicie y se pueda practicar con ella cuantas veces se quiera desde el principio. En este caso en vez de utilizar el botón básico, seleccionado desde el panel Botones, hemos incluido un control numérico tipo botón interior para configurar a nuestro gusto su posición y tamaño en la escena x=0, x=266, w=80, h=30. El tamaño de la fuente con que se escribe el nombre externo del control, que funciona como etiqueta, es de 20 puntos.

Obsérvese que se ha vinculado la “acción=inicio”, fundamental para nuestro propósito, cuando se pulsa el control tipo botón.

Figura 13

Cambios en el panel Programa

Debemos de definir los valores de las respuestas que vamos a considerar acertadas. Para ello disponemos del panel Programa.

La respuesta que se proporcione a través del control tiene que ser perfectamente coincidente con la palabra que hemos programado, pero a veces nos interesa permitir que también se considere válido si contesta con una palabra sinónima o si esa palabra tiene tilde y el alumno no lo ha puesto.

En la parte más alta de una montaña es válido poner “cima”, “cumbre” o “pico”. Para la parte intermedia, generalmente inclinada, es válido “falda” o “ladera”. Solo aceptaremos “pie” como respuesta correcta de la parte más baja.

Los cálculos deben de evaluarse siempre que se realicen cambios al escribir las respuestas. La figura 14 muestra estos cálculos que se explican en los siguientes dos puntos:

• Auxiliares de respuestas correctas. Una respuesta está bien cuando coincide con cualquiera de las respuestas válidas.
  
  Utilizamos las variables b1, b2 y b3 para registrar cada una de las tres respuestas, para que sean correctas. El valor resultante de cada variable podrá ser 1 o 0. Así pues, b1 valdrá 1 si n1=’cima’ O n1=’cumbre’ O n1=’pico’ y b1 se expresa como una suma de las tres expresiones. Dicho esto, es fácil entender las definiciones que escritas en este panel para b1, b2 y b3. Observar que toda expresión de la forma (A) = (B) tiene un valor booleano {0,1}.
  
  
• Auxiliares de respuestas incorrectas. Una respuesta está mal cuando la respuesta es diferente de todas las posibles respuestas válidas y también es diferente de no haber puesto nada.
  
  Utilizaremos las variables m1, m2 y m3 para registrar la respuesta de cada parte de la montaña cuando es incorrecta o falsa. La variable m1 tomará el valor 1 si ninguna de las respuestas que se den para la parte más alta de la montaña es la convenida: n1#'cima', n1#'cumbre' y n1#'pico'. Es condición necesaria para que se registre una respuesta como incorrecta si además se contesta escribiendo algo, luego también ha de cumplirse que n1#''. Por tanto, m1 se expresa como producto de las cuatro expresiones anteriores. Procedemos análogamente para definir los cálculos de m2 y m3.

Figura 14

Observación:

Para indicar que dos expresiones (A) y (B) toman distinto valor lo expresaremos con el operador binario desigualdad que puede escribirse como # o bien !=. Ver operadores en la Documentación técnica. Por tanto (A) # (B) o (A) != (B) tienen un valor booleano {0, 1}.

Cambios en el panel Gráficos

En las figuras 2 y 3 donde se presenta la idea del proyecto, vemos que hay tres clases de gráficos de tipo texto:

• El texto para el título de la escena: “Partes de una montaña”
• Los tres textos [n1], [n2] y [n3] que contienen las respuestas correctas que reemplazarán a sus respectivos controles n1, n2 y n3
• Los textos con los que el programa responde: “¡Muy bien!” cuando las tres respuestas son correctas y “nombre incorrecto” cuando al menos una de las respuestas es incorrecta.

El texto para el título de la escena (Figura 15)

Escribimos el título de la escena “Partes de una montaña” en el lado izquierdo y más o menos centrado verticalmente, expresión= [10,110].

Figura 15

Observemos en la Figura 2 que el texto está dividido en tres líneas: como consecuencia de haber especificado ancho=90 puntos el texto se tiene que acomodar a este ancho y se ve obligado a saltar 2 veces de línea. Para que esto funcione así hay que escribir el texto con la opción texto simple. El formato elegido es SansSerif, Negrita y 20.

Figura 16

El color del texto es verde estándar (R=00, V=ff, A=00) y se adorna con un borde obscuro de color aditivo Rojo=14, Verde=38, Azul=5C. Este color se ha obtenido mediante una herramienta Cuentagotas seleccionando la zona de sombra producida en los huecos de la ladera de la montaña.

Figura 17

Queremos que los controles desaparezcan cuando el alumno ha contestado bien (Figura 18), por eso en el control n1 se ha puesto la condición dibujar-si='b1=0' Es decir, desaparecerá cuando el auxiliar b1 toma valor 1. De esa manera el alumno puede corregir sobre el control hasta dar una respuesta correcta.

Cuando la respuesta es correcta el control desaparece, pero en su lugar debemos hacer que aparezca la palabra que ha escrito el alumno en la misma posición, expresión= [244,10].

Observar que hay que escribir con la opción texto simple el contenido de la variable [n1] y no el nombre de la variable n1. El formato del texto es SanSerif, 20 y en color blanco (R=ff, V=ff, A=ff).

Figura 18

Análogamente escribiremos con el mismo formato y color que [n1] las respuestas correctas [n2] en la posición expresión= [386,100] con la condición dibujar-si ='b2' y [n3] en la posición expresión= [310,210] con la condición dibujar-si = 'b3'

Texto de respuesta del programa cuando se contesta bien (Figura 19)

El texto “¡Muy bien!” se dibuja cuando se cumple la condición b1*b2*b3=1 >0 por lo que basta escribir dibujar-si=b1*b2*b3 es decir cuando b1=1, b2=1 y b3=1.

Este texto se dibuja en la posición [180,266], con la opción Texto simple y el formato siguiente: SansSerif, Negrita, 28. Color amarillo estándar (R=ff, V=ff, A=00)  y borde negro (R=00, V=00, A=00).

Figura 19

Texto de respuesta del programa cuando se contesta incorrectamente (Figura 20)

El texto “nombre incorrecto” se dibuja cuando se cumple la condición m1+m2+m3>0 por lo que basta escribir dibujar-si= m1+m2+m3 es decir cuando m1=1 o m2=1 o m3=1 (alguno de los nombres es incorrecto).
Este texto se dibuja en la posición [180,266], Texto simple con el formato siguiente: SansSerif, Negrita, 28. Color rosa estándar (R=ff, V=af, A=af) y borde negro (R=00, V=00, A=00).

Figura 20

La condición dibujar-si y propuesta alternativa para dibujar texto con el gráfico tipo punto

La condición dibujar-si

Tanto para dibujar los controles como para dibujar los textos que aparecen en la escena de este proyecto hemos utilizado la condición expresada en el campo dibujar-si. Es oportuno explicar cómo funciona este campo dependiendo de los valores que puede tomar.

• Si el campo se deja vacío (valor por defecto) siempre se dibuja
• Si el campo tiene valor 0 o es negativo no se dibuja.
• Si el campo es mayor que 0 se dibuja.
• Si el campo lleva la condición A = B, se dibujará si A = B es una expresión verdadera y tiene valor lógico 1 (punto 3), en caso contrario es una expresión falsa, tiene un valor lógico 0 y no se dibuja (punto 2).

Escribir texto con el tipo gráfico punto vs tipo gráfico texto

En el primer artículo correspondiente al proyecto Escena_B01 utilizamos el gráfico tipo punto para dibujar texto.

En este artículo hemos utilizado el tipo gráfico texto, cuya expresión para el posicionamiento en la escena es (x, y), donde x=distancia en píxeles al borde izquierdo de la escena e y=distancia en píxeles al borde superior de la escena.

Recordemos que el punto como elemento gráfico tiene la posibilidad de asociar un texto que se escribe próximo. El recurso para escribir solo el texto consiste en dar un tamaño 0 al punto, con lo cual éste no se dibuja.

La posición del punto como elemento gráfico se expresa en coordenadas cartesianas (x, y), no en píxeles y la longitud de la unidad cartesiana es el valor que asignemos a la escala que por defecto es 48 píxeles.

La siguiente imagen es utilizada de fondo del espacio en la escala de nuestro actual proyecto Escena_B02. Se dibujan ahora los ejes, la red y los números para facilitar la localización del punto de tamaño 0 que deberíamos dibujar asociando los textos de contenido [n1], [n2] y [n3]

Figura 21

Proponemos al lector verificar que la posición de los tres puntos para dibujar los textos [n1], [n2] y [n3] asociados podrían ser respectivamente (-0.5, 2.5), (2.5, 0.5) y (1, -1.8) y si está interesado en ver los resultados que elabore una segunda escena donde las respuestas se dibujen como textos de gráficos tipo punto en vez de gráficos tipo texto.

Determinación del espacio:

• Ancho= 530 píxeles, alto=296 píxeles, Escala=48 píxeles.
• Unidades representadas en el eje OX=530/48=11.04, unidades representadas en el eje OY=296/48=6.17

  escena_B02.zip

Autoría:

Eduardo Barbero Corral (Idea del proyecto y técnicas de programación DescartesJS)

Ángel Cabezudo Bueno (Interpretación, edición de la escena, ilustraciones  y redacción)

Este material está publicado bajo una licencia:

Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional