Martes, 09 Enero 2018 15:32

Calculadora para la Normal

Escrito por
Valora este artículo
(9 votos)

En este artículo se pone de manifiesto la conveniencia y utilidad de contar con una herramienta, la calculadora de la Normal, que nos permita dar respuesta de manera cómoda y rápida a múltiples y rutinarios problemas de probabilidad que surgen en estudios con poblaciones que se ajustan a cualquier distribución normal. Se evita el paso de tipificación a la N(0, 1) y se mejora la precisión usual obtenida.

Calculadora de la distribución Normal


 

LA DISTRIBUCIÓN NORMAL

Pensemos en voz alta:

  • ¿Me gustan los problemas de probabilidad?
  • ¿Es difícil plantear y resolver situaciones en las que se requiere contar y recontar casos utilizando técnicas de combinatoria?
  • ¿Se parecen mucho algunos problemas de probabilidad a otros?
  • ¿Puede pensarse que resolver muchos problemas de probabilidad consiste en realidad en medir de forma aproximada áreas de un aspecto muy determinado?

probabilidad versus área

  • Cuando resuelvo un problema de probabilidad siempre tiendo a "dudar" de mi respuesta… y es que siempre he tenido mala "pata" con eso de la suerte.

La estructuración, orden, entendimiento y control en ese escurridizo e inestable mundo, parece llegar en el momento que las Matemáticas clásicas intervienen en el azar con toda su “potencia de fuego” y cuando también, por qué no, se adentran en él con todo su rigor. La introducción del concepto de variable aleatoria —que no es más que el de función— y su ubicación en este contexto con un carácter protagonista supone un primer paso básico y fundamental que conviene tener presente.

Variable aleatoria, funciones de probabilidad y de distribución

El concepto de variable aleatoria como función numérica y su aplicación en la Estadística y la Probabilidad supone un extraordinario avance en estas dos disciplinas. Muchos problemas y situaciones prácticas procedentes de experimentos aparentemente muy diferentes se pueden modelar en un mismo marco teórico mediante variables aleatorias con sus respectivas funciones de probabilidad y de distribución.

  • En los casos en que la variable aleatoria sea discreta ―valores aislados―, existen modelos teóricos como la distribución Binomial, la distribución Hipergeométrica, la distribución Geométrica, la Binomial Negativa , la Multinomial,… que permiten la adaptación y estudio de muchos problemas relacionados con experimentos aleatorios procedentes de situaciones muy distintas.
  • En los casos en los que la variable aleatoria sea continua ―que pueda tomar, al menos teóricamente, cualquier valor de un intervalo―, sin duda es el modelo de la distribución Normal el que se adapta a un mayor número de situaciones. Caracteres morfológicos como peso, estatura, diámetros, perímetros de la mayoría de especies tanto animales como plantas, errores cometidos en la medición de la mayoría de las magnitudes, caracteres fisiológicos, psicológicos o aquellos que se obtengan en general como suma de otros factores, se distribuyen siguiendo un modelo cuya función de densidad adopta una particular forma y que se conoce como modelo de la distribución Normal.

Funcion de densidad de la Normal

Función de densidad de la distribución normal de media µ y desviación típica σ

Cada modelo de distribución normal va a depender numéricamente de dos parámetros fundamentales que son la media aritmética μ y la desviación típica σ. Es decir, hay una infinidad de distribuciones normales. Por ejemplo: 

  • Se dice que el cociente intelectual de las personas sigue una distribución normal de media 100 y desviación típica 15. ¿Cuál sería la probabilidad de que una persona tenga un cociente entre…?
  • La estatura de los varones de entre 35 y 55 años en España sigue una distribución normal de media 172,9 cm y desviación típica 3,55 cm. ¿Cuál sería la probabilidad de que un varón…?
  • La distribución de las notas de selectividad en la asignatura de matemáticas sigue una distribución normal de media 5,85 y desviación típica 2,25. ¿Cuál sería la probabilidad de que un alumno…?
  • La distribución de pesos de una ganadería sigue una distribución normal de media 540 kg y desviación típica 15 kg. ¿Cuál sería la probabilidad de que en un grupo de 20 reses al menos la mitad…?

Por otro lado, en Estadística Inferencial el modelo de distribución normal aparece en resultados tan importantes como el Teorema Central del Límite, en las distribuciones en el muestreo de algunos parámetros como las medias muestrales o las proporciones muestrales, así como en aproximaciones de otros modelos teóricos como la distribución binomial o la de Poisson.

Así pues, con la distribución Normal, estamos ante un tema estratégico clave sobre el que se fundamentan y desarrollan otros muchos y que, por tanto, conviene cuanto menos familiarizar a cualquier persona que se "asome" al mundo de la estadística y probabilidad y, por supuesto, que han de conocer y entender todos aquellos que intenten profundizar en él en un futuro.

 

La distribución normal N(0, 1)

Aunque hay una infinidad de distribuciones normales, tantas como valores toman los dos parámetros anteriores,  µ y σ, obviamente todas se corresponden a un único tipo de función o familia de funciones con propiedades comunes en las que µ genera una traslación y σ un cambio de escala. Por ello, dentro de todas las posibles distribuciones normales se considera la que tiene por media cero y desviación típica uno, que usualmente se denota como N(0, 1), y que se establece como referente para hacer manejable este tipo de distribución. Todas las demás podrán relacionarse con la N(0, 1) y, por tanto, basta centrarse en el análisis de ésta y posteriormente trasladar su conocimiento al resto.

Funcion de densidad de la Normal

Función de densidad de la distribución normal de media 0 y desviación típica 1, la N(0, 1)

Por tanto, es la N(0, 1) es objeto  de minucioso y pormenorizado estudio cuando se busca investigar las diferentes probabilidades que toma su función de distribución.

Funcion de distribución de la Normal

Probabilidad para valores menores o iguales que zα

 La integral anterior no es elemental, es decir no existe una primitiva que pueda expresarse como un conjunto finito de operaciones de funciones elementales y consecuentemente no puede calcularse mediante la aplicación de la regla de Barrow. Por ello, usualmente lo que se aborda es la construcción de una tabla de valores aproximados ―la tabla de la normal cero uno― en la que se refleja el valor de p(z ≤ zα para un conjunto de valores de zα.

Tabla N(0, 1)Fragmento de la Tabla de la N(0, 1)

En la primera columna de la tabla se refleja el valor de desde 0 a 3,9 con incrementos de una décima (el extremo superior depende de la precisión empleada en el cálculo de valor de p(z ≤ zα )), y en la primera fila se consideran diez columnas etiquetadas desde 0,00 hasta 0,09, de manera que si zα = 0,76 entonces la p(z ≤ zα ) queda reflejada en la fila de etiquetada como 0,7 y en la columna 0,06 (0,76=0,7+0,06). Generalmente el valor de esta probabilidad se refleja con cuatro cifras decimales y cuando éstas no son suficientes hay tablas en la que se consideran cinco decimales. Indiquemos, de nuevo, que el cálculo de esa integral definida no es inmediato y, por ello, la precisión del valor reflejado en la tabla será dependiente del método de cálculo aproximado usado. Para valores de zα del orden de las milésimas o inferior puede considerarse una interpolación, por ejemplo si zα = 0,752 se realizaría una interpolación entre los valores correspondientes a zα = 0,75 y zα = 0,76, es decir, una interpolación posiblemente lineal (aunque no sería la más ajustada) entre los correspondientes valores que son 0,7734 y 0,7764.

Construida la tabla, también es posible plantearse el problema inverso, es decir, dada una probabilidad identificar el valor de zα correspondiente. Para ello se localiza el valor de dicha probabilidad en la tabla, y una vez encontrado entonces la fila y columna donde se ubica nos aporta dicho zα = fila+columna, pudiéndose abordar también una interpolación en caso de que la probabilidad dada no se localice exactamente en la tabla, sino que se encuentre entre dos elementos de la misma. 

Para valores negativos de zα,  para probabilidades asimilables a barridos a la derecha p(z > zα ) o franjas de probabilidad determinadas entre dos valores p(z-α ≤ z ≤ zα ), se recurre a ciertas estrategias sencillas basadas en razonamientos más o menos directos que utilizan como elementos fundamentales  la simetría de la curva y el valor unitario del área global bajo la misma.

 

Tipificación

Lo obtenido para esa distribución normal particular, la N(0, 1), es muy significativo y extrapolable a cualquier otra distribución normal, pues mediante una fácil transformación en la variable aleatoria Tipificación convertiremos cualquier pregunta directa o inversa sobre una normal cualquiera en una cuestión planteada sobre la N(0, 1) con su correspondiente respuesta rápida.

TipificaciónTipificación de una variable aleatoria

Consecuentemente la importancia de la N(0,1), de la tabla de valores asociada y de la tipificación es evidente. Las técnicas y estrategias que permiten la localización de cualquier valor de probabilidad de manera directa o las que se utilizan para la localización de valores críticos que dejan una determinada probabilidad a la izquierda, a la derecha o en una franja central manejo inverso, deben ser comprendidas y utilizadas perfectamente por los alumnos de bachillerato o de primeros cursos de estudios universitarios. Pero, esto no es óbice para preguntarse:  ¿la vigencia de la tabla de la N(0,1) es incuestionable?

 Preguntémenos y respondamos:

  • ¿Cántas veces realizamos el mismo tipo de razonamiento y estrategia en problemas de distribuciones normales?
  • ¿Cuántas veces repetiremos el procedimiento hasta automatizarlo?
  • ¿Cuántas veces llegaremos a cansarnos de tipificar y consultar la tabla, e interpolar valores?

La respuesta puede ser variable dependiendo de las circunstancias, del número de problemas y de preguntas que desee o necesite responder, pero estamos seguros de que si trabaja o estudia en este contexto la cuantificación será elevada. Por tanto, ¿no estima necesario y conveniente evitar este proceso? y simplemente ¿no desea proceder a realizar una consulta rápida y automática? Posiblemente esté pensando o diciendo ¡Sí! y aquí trataremos de dar satisfacción a su deseo con "La calculadora de la Normal". Quienes ya tengan cierta edad, recordarán lo imprescindibles que también eran las tablas de logaritmos o las tablas trigonométricas hace no mucho tiempo y quienes tengan menos edad podrán indagar por su cuenta y riesgo o en el enlace anterior.

 

La calculadora de la Normal

La calculadora de la Normal es una escena desarrollada con DescartesJS y lo que pretendemos es que cualquiera con conocimientos teóricos básicos, disponga de una herramienta fácil, directa y rápida que le permita abordar y resolver problemas relacionados con la distribución normal.


Somos conscientes que las calculadoras de gama alta con cierto nivel científico disponen de la posibilidad de cálculo de valores de probabilidad de cualquier distribución normal e incluso en algunos casos de cálculo de valores críticos, (z-valores). Sin embargo el interfaz o la secuencia de cálculo no suelen ser naturales y a menudo muy diferentes de unos modelos a otros. A nuestro entender no se produce esa estrecha comunión entre el modelo teórico que proporcionan el profesor o el libro y el escueto y solitario número con que responde la calculadora. Es por esto, entre otras cosas, por lo que decidimos emprender el desarrollo de una escena sencilla y útil, rápida y con aspectos muy elementales, tanto gráficos como algebraicos que mantengan al menos una mínima conexión necesaria en nuestra opinión con el desarrollo teórico clásico. Y aquí la tienen a su disposición:

Calculadora de la distribución Normal

 

El manejo es intuitivo y sencillo, no obstante puede consultar las indicaciones.

 

Finalmente, sólo nos queda indicaros que esperamos que la utilización de esta escena, de esta calculadora de la Normal, os resulte interesante desde el punto de vista didáctico y útil desde el punto de vista técnico y, en particular, para nuestros colegas docentes que les ayude a implementar el aprendizaje significativo de este tema que consideramos estratégico en Estadística y Probabilidad.

 


Nota bene técnica

Para aquellos interesados en las consideraciones y criterios matemáticos adoptados en el desarrollo de esta herramienta y sólo para ellos por ser cuestiones que, posiblemente, no interesen al usuario habitual― indiquemos algunos detalles técnicos:

  • El usuario establece la media y desviación típica y la calculadora realiza la tipificación a la N(0, 1) o viceversa. Aunque no sería necesario mostrar esta tipificación, se refleja por cuestión metodológica en entornos de aprendizaje donde conviene que ésta quede explicitada. Es una calculadora para cualquier media y desviación típica, por lo que representa una mejora respecto a lo habitual.
  • Internamente se contruye una tabla para la N(0,1) en la que se ha considerado como intervalo significativo [-4, 4], es decir, p(z<=-4)=0 p(z<=4)=1.
  • En el intervalo [-4, 4] se considera un partición regular de paso una diezmilésima, es decir los valores zα aportados por el usuario o determinados por la calculadora tienen una precisión de cuatro cifras decimales. Esto representa una mejora respecto a la tabla usual que suele estar restringida a dos decimales. Puede ampliarse a más cifras, pero en esta versión se ha ajustado a esta precisión buscando que la necesidad computacional no ralentice el tiempo de respuesta y sea adecuado para la mayoría de dispositivos actuales.
  • El cálculo de p(z ≤ zα ), para los valores de zα de esa partición comprendidos en [-4, 0], se realiza calculando la integral definida correspondiente mediante integración numérica aplicando la regla de Simpson compuesta que en este caso tiene una cota de error inferior a 1·10-19. En las escena se reflejan sólo 9 cifras decimales, pero podrían incluirse más (al menos hasta doce correspondientes a la precisión de cálculo interna de Descartes). Esto representa una mejora respecto a lo usual en las tablas que son cuatro o cinco cifras decimales.
  • El cálculo de p(z ≤ zα ), para los valores de zα de esa partición comprendidos en (0, 4] se determinan por simetría con los del intervalo [-4, 0] como 1-p(z ≤ -zα ).
  • En Inferencia Estadística, por ejemplo en intervalos de confianza o en contraste de hipótesis, es fundamental el manejo inverso de la tabla de la normal. En esta escena se ofrece la posibilidad de localización directa de valores que determinan ciertas probabilidades, tanto franjas de áreas entre dos valores (zα/2) como barridos a la izquierda o a la derecha (zα). La precisión es de cuatro cifras decimales, lo que representa una mejora respecto a lo usual.
Domingo, 17 Diciembre 2017 18:10

Feliz Navidad con Descartes

Escrito por
Valora este artículo
(17 votos)

Desde RED Descartes Colombia y desde la Institución Universitaria Pascual Bravo os deseamos una Feliz Navidad para todos los cartesianos y pascualinos.

Valora este artículo
(6 votos)

Escenas con voz y sonido. Secuenciación temporal.

nivel medio

Introducción

El programa Descartes nos permite elaborar escenas incluyendo voces y sonidos. Podemos hacer que aparezcan en determinadas circunstancias según la actuación del alumno y pueden servir como explicación, como mensajes de ayuda o como felicitación cuando se ha resuelto bien una actividad.

También podemos hacer que sea el alumno quien ponga en marcha esos sonidos mediante controles, pero no trataremos con detalle en este artículo este tipo de controles de audio sino los eventos que darán origen a la reproducción de audio cuando se cumple cierta condición en el programa.

Hay que tener en cuenta que muchos ordenadores tienen deshabilitado el audio, por ello es conveniente que la actividad que se pide al alumno en la escena no dependa exclusivamente de los mensajes de voz que en ella se den.

Un programa interesante de uso libre que permite grabar voz y editar sonido para incorporar en las escenas de Descartes es Audacity. Puede exportarse el audio producido en diferentes formatos. Lo usual es el formato mp3 aunque en principio se puede utilizar cualquier formato compatible con HTML y el navegador Web utilizado.

Conviene tener en cuenta que el actual Editor de Escenas de Descartes no reproduce sonidos, aunque se puedan programar. Para comprobar que el sonido programado con Descartes funciona correctamente debemos guardar la escena en un archivo HTML y abrirla en un navegador Web – consultar este enlace sobre compatibilidad-.

Como se programan los sonidos en la escena

Podemos hacer que un sonido se escuche a través de un control de tipo audio.

 M06 01a M06 01b 
Aspecto con Google Chrome Aspecto con Mozilla Firefox

Figuras 1a-b

Por ser de sobra conocido por todos no es necesario describir el funcionamiento de reproducción, pausa y parada proporcionado por este elemento multimedia.

La siguiente imagen muestra el panel Controles y los parámetros que se han establecido para el control de audio que se ha añadido en una escena. El control ha quedado identificado en este ejemplo por el nombre “sonido”.

M06 02

Figura 2

Los parámetros de este control son los referidos a la posición, el espacio, la condición dibujar-si y la trayectoria donde se encuentra el archivo de sonido p.e. "audio/musica.mp3" -ver documentación http://reddescartes.org/documentacion/audio-video/ -

Por lo general suele interesar que el sonido se escuche en situaciones especiales y por tanto se programa como auxiliar evento. En el artículo anterior, Escenas con DescartesJS: Técnicas y trucos (M05) - Adaptación de escenas. Librería de proyecto. Espacios HTMLIframe, se producía un sonido característico cuando un puzle quedaba armado correctamente. Este sonido se había programado como evento.

M06 03

Figura 3

Verificar dicho sonido, desde este enlace, después de armar el puzle.

En la condición ponemos una expresión lógica que cuando es verdadera se reproduce el sonido. La acción que hay que seleccionar es "reproducir". El parámetro que se declara es la trayectoria donde se encuentra el archivo de audio, "sonido/correcto.mp3". En el apartado ejecución elegimos de entre las opciones "una-sola-vez", "alternar" o "siempre" que determina el modo de ejecución de la acción del evento, esto es:

  • Una-sola-vez, sólo se ejecuta la primera vez que se cumple la condición.
  • Alternar, se ejecuta la primera vez que la condición se cumple, pero si la condición deja de ser válida y vuelve a serlo luego, entonces vuelve a ejecutarse la acción.
  • Siempre, se ejecuta siempre que se cumpla la condición.

El valor por defecto es "alternar".

Ejercicio práctico

Como práctica de la inclusión de sonidos te proponemos que selecciones una de tus escenas o bajes una de las cuatro escenas que ya han sido publicadas en esta sección del blog e incluyas en ella voz y sonido.

Los temas que hemos tratado son:

  1. Escenas con DescartesJS: Técnicas y trucos (B01) – Situar puntos en el plano cartesiano
  2. Escenas con DescartesJS: Técnicas y trucos (B02) – Identificar nombres en una imagen
  3. Escenas con DescartesJS: Técnicas y trucos (B03) – Distribución de nombres en un mapa
  4. Escenas con DescartesJS: Técnicas y trucos (M04) – Puzle de arrastre con efecto imán

Puedes grabar tu voz o buscar voz y sonido ya publicado, grabarlo y editarlo. También te aportamos los sonidos “correcto.mp3” y “Error.mp3” que se utilizan en las unidades “La suma 1” y “La resta 1” y que puedes descargar desde el enlace al final de este artículo.

  • Primeramente, coloca la carpeta "audio", que contiene los sonidos, junto al archivo de la página HTML en la que está la escena donde vas a incluirlos.
  • Vamos a poner un sonido para indicar que se ha resuelto bien la actividad de la escena.
  • Abre el Editor de escenas y con él la página con la escena que vas a modificar.
  • En el Panel programa haz clic sobre el signo + para añadir un auxiliar evento. En condición observa y pon lo mismo que hay en el mensaje de felicitación en el apartado dibujar-si.
  • Puesto que con el Editor de escenas no se reproducen los sonidos, guarda los cambios y comprueba su funcionamiento abriendo la página con el navegador Web.

Sonido secuenciado

Cuando se incluyen varios sonidos que se deben de reproducir de forma sucesiva, si no queremos que se solapen uno con otro, tenemos que producir una secuenciación de los mismos y separarlos en el tiempo mediante una animación, asignando a cada uno de ellos el momento en el que debe comenzar a reproducirse.

Vamos a utilizar un ejemplo muy sencillo de secuenciación programado para esta ocasión. El diseño está inspirado en la escena Sumando con los dedos de la unidad didáctica de Eduardo Barbero Corral titulada “La suma 1” para 2º curso de Primaria, que como se podrá observar atiende aspectos didácticos más amplios. Se utilizan los mismos sonidos de voz para contar (1a.mp3, 2a.mp3, 3a.mp3, …, 10a.mp3) y las imágenes de las manos han sido coloreadas. También puede consultarse, del mismo autor, la escena similar Restando con los dedos de la unidad didáctica “La resta 1”.

En la escena del ejemplo una animación ha hecho posible la secuenciación temporal de los distintos sonidos y también de la representación gráfica de los números 1 al 10.

Figura 4

Figura 4 (Abre la escena)

En el Editor de Descartes disponemos de un panel para configurar la animación. Una animación en Descartes es un algoritmo especial que refresca la escena cada vez que realiza un ciclo. Como todo algoritmo tiene la estructura inicio – hacer – mientras que se corresponde con la estructura de bucle “do… while” de los lenguajes C y Java y “repeat… while” de Pascal.

M06 05

Figura 5

Interesa ver la documentación referida a Animaciones

Animación

La animación funciona como los algoritmos de Descartes, pero tiene sus propias singularidades. Se pone en marcha cuando se activa la acción de animar, ejecuta al principio las operaciones reflejadas en la casilla inicio, separadas por “;”, transforma sus valores según lo que se le indica en hacer y se detiene cuando deja de cumplirse la condición que se pone en mientras. Pero eso lo realiza no de forma instantánea, sino ralentizada por lo indicado en pausa. La pausa indica los milisegundos que espera el programa entre dos pasos sucesivos de la animación que por defecto vale 60.

La figura anterior es el panel animación de la escena de “contar hasta 10”.

Hay que seleccionar la casilla Animación para que esta esté activada y se puedan editar sus parámetros. Si esta casilla no se selecciona no se puede editar los campos del panel ni se puede activar la animación en el programa, aunque esté editada.

El bucle se inicia poniendo el contador a cero, t=0 y en cada ciclo o paso se incrementa en una unidad t=t+1. Cuando el contador supera el valor 10 la animación finaliza.

Es importante entender que una animación se puede poner en marcha de dos formas:

  • De forma automática al iniciarse la escena. Para ello tiene que haberse seleccionado la casilla “auto”.
  • Cuando se ejecuta la acción animar. Esta acción es una posible opción que tienen los controles numéricos en el panel Controles y también los eventos en el panel Programa.

En la siguiente imagen se muestra cómo se consigue poner en marcha la animación de la escena “contar hasta 10”

M06 06

Figura 6

Se ha añadido a la escena un control numérico de tipo botón identificado por la variable c, rotulada con el nombre “contar hasta diez” y lleva la acción “animar” cuando se pulsa, en cuyo caso toma el valor 1 (este valor puede utilizarse para averiguar, p.e, si el control de botón ha sido pulsado).

En la ventana de activo-si se ha escrito la condición "(t=0)|(t=11)"; esto supone que el botón se puede pulsar y activar la animación cuanto t=0 ó t=11. En consecuencia, el botón queda desactivado a lo largo de la animación. Por defecto activo-si está en blanco.

Sonidos y gráficos secuenciados

Sonidos

La animación lo que produce es que una variable t se incrementa cada cierto tiempo, indicado  por el parámetro pausa. En nuestra escena del ejemplo, t es un contador que se incrementa cada 1000 ms (1 segundo). Este tiempo es suficiente para que se reproduzca de forma secuenciada (para cada valor de t) cada uno de los 10 archivos de voz independientes: “uno”, “dos”,…, “diez”. Cada sonido se reproduce para un valor determinado del contador. Un evento, en este contexto, consiste en reproducir un archivo de voz cuando el contador t toma cierto valor.

M06 07

Figura 7

Un sonido de felicitación, "muy_bien.mp3" se reproduce cuando se termina de contar (condición t=11)

M06 08

Figura 8

Gráficos

La misma animación que reproduce sonidos como eventos puede llevar aparejada la representación simultánea de gráficos de imágenes, textos, etc., que se vinculan con el valor del contador t.

En la escena de “contar hasta 10”, para cada valor de t, se representa la composición de las dos manos (derecha e izquierda) mostrando el número de dedos que señalan cada cantidad contada.

M06 09

Figura 9

Así, para contar del 1 al 5, la mano izquierda tiene que estar cerrada, representada por "i0.png".

M06 10

Figura 10

Antes de empezar a contar, t=0,  la mano derecha está cerrada y queda representada por "d0.png".

M06 11

Figura 11

De t=1 a t=5 la mano derecha va mostrando sucesivamente el mismo número de dedos: d1.png,... , d5.png.

M06 12

Figura 12

 A partir de 5, la mano derecha tiene que mostrar los 5 dedos.

M06 13

Figura 13

De t=6 a t=10, la mano izquierda va mostrando sucesivamente i1.png,... , i5.png.

M06 14

Figura 14

 A partir de 10 la mano izquierda mostrará 5 dedos.

M06 15

Figura 15

Un gráfico tipo texto reproduce el valor de la variable t en cada momento.

M06 16

Figura 16

Cuando se termina de contar, t=11, por lo que hay que reproducir el valor de t-1 para mantener el valor 10 del texto.

M06 17

Figura 17

Una imagen acompaña al sonido de felicitación cuando se termina de contar (condición t=11).

M06 18

Figura 18

M06 19

Figura 19

Proyecto

Escena_M06: Escenas con voz y sonido. Secuenciación temporal


Como viene siendo habitual en esta serie de artículos vamos a proponer un proyecto relacionado con la secuenciación y el uso de la animación de Descartes para aquellos lectores que estén interesados en practicar y progresar un poco más en la programación con DescartesJS.

Se trata de conseguir una escena lo más parecida a la siguiente.

Figura 20

Figura 20 (Abre la escena)

Como podrá observase está inspirada en la escena Sumando con los dedos de la unidad didáctica “La suma 1”. Pero se ha simplificado para quedarnos solo con los elementos de la programación relacionados con la secuenciación temporal de eventos producida por una animación, motivo de este artículo. He pretendido conseguir los mismos efectos de la escena original pero sin poner empeño alguno en que coincidieran sus respectivos códigos de programación. 

Se trata de practicar la suma de dos cantidades n1 y n2 que toman valores espectivos de 1 a 9. Para ello la escena tiene que contar con los dedos desde la composición con ambas manos para representar n1 hasta n1+n2: “Contar desde n1 otros n2 más”.

Los sumandos n1 y n2 se generan aleatoriamente cada vez que se pulsa el control numérico de botón que lleva la acción de inicio (rotulado con el nombre “otra cuenta”).

La expresión de DescartesJS que genera un número natural entre 1 y 9 es ent(rnd*9+1)

M06 21a

Figura 21-a

Es decir, calcula la parte entera de rnd*9+1, siendo rnd una variable reservada en DescartesJS que cuando se invoca obtiene un valor real alatorio en el intervalo [0, 1).

El control numérico de botón etiquetado con el nombre “contar” ejecuta la acción animar cuando se pulsa. La animación realiza un contador t=t+1 mientras t<n2+1.

Los sonidos de voz se corresponden con los valores n1+1, n1+2, …, n1+n2 y en la práctica se utilizan desde 2a.mp3 (cuando n1=1) hasta 18a.mp3 (cuando n1=n2=9).

M06 21b

Figura 21-b

Incluimos la posibilidad de contar sin reproducir la voz. Para ello se utiliza un control numérico de botón id="sonido", sin etiquetado de nombre “_._”, que lleva asociada la imagen de un altavoz "sonido-on.png". En la casilla pos de posición que ocupa el control se pone las dimensiones de la imagen 56x50 píxeles.

Se muestra con la condición (dibujar-si) "sonido=1". Al pulsarlo toma el valor 0, acción calcular "sonido=0".

M06 21

Figura 21-c

Al pulsar el control id="sonido" se muestra en su lugar el control id="sinsonido", que lleva la imagen de un altavoz tachado "sonido-off.png". Este control al ser pulsado calcula "sonido=1", con lo que se activa la voz y se dibuja el control id="sonido".

M06 22

Figura 22

El siguiente tríptico indica tres detalles que se deben de conseguir al programar la escena:

M06 23

Figura 23-a

  1. Se dibuja la cantidad contada sobre el dedo correspondiente. Utilizamos la representación de un gráfico tipo punto de color amarillo de tamaño=15 al que se superpone otro gráfico también tipo punto pero tamaño=0 que lleva asociado un texto que representa el valor del contador, [t].
  2. Al finalizar la cuenta se dibuja una imagen de felicitación y se representa la cantidad final contada.
  3. Se posibilita que la voz no se reproduzca.

Para asignar posiciones de los controles y los elementos gráficos (imágenes, puntos, textos,…) en la escena hay que configurar en primer lugar el tamaño que tendrá la escena, asignar un valor de escala y determinar dónde tiene que aparecer el origen de coordenadas cartesianas.

Cada punto amarillo, cuya posición es la de su centro,  debe ir por encima de la punta del dedo correspondiente y el punto asociado de tamaño 0 cuya misión es la de poner texto [n1+t] sobre aquel, se posiciona teniendo en cuenta que este texto se muestra a cierta distancia del centro del punto correspondiente. 

M06 23b

Figura 23-b

M06 23c

Figura 23-c

En la solución que damos a este proyecto, se puede comprobar que la escena tiene dimensión 600x500 píxeles. La imagen siguiente muestra el panel Espacio del Editor de Descartes de dicha escena.

M06 24

Figura 24

Las marcas redejes y números muestran un espacio con cuadrícula y ejes cartesianos numerados. Una vez situados los controles y gráficos se pueden desactivar. Este es el aspecto que presenta el espacio después de programado.

M06 25

Figura 25

El espacio debe quedar fijo. El origen de coordenadas se ha desplazado hacia abajo 245 px y hacia la izquierda -298 px La unidad cartesiana (escala) es de 48 px.

Recuérdese que las posiciones de los controles y los gráficos tipo texto se hace en píxeles tomando como origen [0, 0] el vértice superior izquierdo de la escena mientras que los gráficos tipo punto y tipo imagen se posicionan en coordenadas cartesianas con origen en (O.x, O.y).

Como el tamaño de las imágenes de las manos es de 199x199 px y el posicionamiento de las mismas en el espacio es el del vértice superior izquierdo de la imagen podemos verificar en la figura anterior que la mano izquierda está posicionada en (1, 8) y la derecha en (7,8).

Animamos a que con esta descripción y las herramientas de DescartesJS facilitadas en la serie de artículos publicados hasta este momento, el lector interesado sea capaz de programar la escena de este proyecto.

Facilitamos en los enlaces siguientes las descargas de las carpetas de contenidos de los materiales para que se pueda hacer uso de los archivos de sonido e imágenes y servir de ayuda al comprobar la estructura de carpetas y revisar o estudiar el código de las escenas con el Editor de Descartes.

icono zip
  • Descarga del material utilizado en este artículo escena_M06.zip
  • Descarga de las escenas “Contar con los dedos” de la unidad didáctica "La suma 1"  y “Restar con los dedos” de la unidad didáctica "La resta 1" contenidas en Suma_y_resta_con_dedos-JS.zip

Autoría:

Eduardo Barbero Corral

  • Propuesta del proyecto.
  • Técnicas de programación contenidas en las unidades didácticas inspiradoras “La suma 1” y “La resta 1” para 2º de Primaria

Ángel Cabezudo Bueno

  • Interpretación, ilustraciones y redacción.
  • Programación y edición de las escenas contenidas en la carpeta del proyecto “escena_M06”

Este material está publicado bajo una licencia:
Licencia Creative Commons
Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional

Valora este artículo
(5 votos)

nivel medio

Una cualidad muy importante de la herramienta Descartes es que nos permite elaborar nuevas escenas, modificando otra que ya es funcional, con el objeto de conseguir diferentes resultados: cambiando, añadiendo o eliminando el correspondiente código mediante los paneles de configuración del Editor de Escenas. No se descarta la intervención directa sobre el código HTML en el archivo que contiene la escena, con un editor de texto externo tipo Bloc de notas o Notepad++. Otras veces el cambio de la escena es producido sin alterar el código, simplemente al cambiar los archivos de contenido multimedia que acompañan. Esta es la forma habitual de proceder de los desarrolladores de escenas de Descartes. En este artículo tratamos precisamente como llevar a cabo todo esto.

Contenidos que se abordan

Adaptación de escenas BalloonsLc4

  • Basándonos en la escena M04 del puzle 2x2 de arrastre con efecto imán, que desarrollamos en el artículo precedente vamos a elaborar nuevos puzles de tamaño 3x3.
  • Después produciremos un determinado número de puzles 3x3 obtenidos a partir del primero utilizado de modelo: todos ellos tienen en común el mismo código de la escena, pero difieren en el conjunto de piezas para montar un puzle particular.

 Proyecto para visualizar de forma selectiva una colección de puzles BalloonsLc4

  • Reuniremos todos los puzles en un mismo proyecto que será gestionado desde otra escena que llamaremos principal. Esta escena principal facilita que podamos seleccionar a voluntad desde un determinado espacio R2 los diferentes puzles que hemos producido para tal fin. Tendremos ocasión de conocer la opción Librería de proyecto del Gestor de Escenas y el espacio HTMLIframe, que es común, donde se visualizan los puzles.

Autoría

  • La adaptación de un puzle 2x2 a puzle 3x3 es una propuesta de Eduardo Barbero Corral. Aparte de hacer los cambios propios para redimensionar el puzle y tener en cuenta ahora las 9 piezas en vez de 4, se dan nuevas instrucciones para la detección de piezas montadas (superpuestas) y para controlar las acciones cuando el puzle ha sido armado correctamente.
  • La idea de utilizar un espacio HTMLIframe donde presentar las diferentes escenas de los puzles procede de un documento instructivo redactado por nuestro maestro cartesiano Juan Guillermo Rivera Berrío
  • La interpretación de estas fuentes, la selección de las imágenes para cada uno de los puzles, la elaboración de las piezas, la edición de las escenas y finalmente la redacción de este artículo es de Ángel Cabezudo Bueno.

Enlaces a los artículos precedentes de esta serie

Dejamos los enlaces a los artículos anteriores por si alguien necesita repasar algún detalle de procedimiento que en este obviamos:

  1. Escenas con DescartesJS: Técnicas y trucos (B01) – Situar puntos en el plano cartesiano
  2. Escenas con DescartesJS: Técnicas y trucos (B02) – Identificar nombres en una imagen
  3. Escenas con DescartesJS: Técnicas y trucos (B03) – Distribución de nombres en un mapa
  4. Escenas con DescartesJS: Técnicas y trucos (M04) – Puzle de arrastre con efecto imán

 Idea del proyecto

Escena_M05: Adaptación de escenas. Librería de proyecto. Espacios HTMLIframe

Adaptación de escenas


 Se trata de modificar esta escena, motivo del artículo anterior (la Figura 1 lleva un enlace)

Figura 1

Figura 1

Por esta otra (la Figura 2 lleva enlace a la nueva escena)

Figura 2

Figura 2

Cuando se superponen dos piezas y también cuando el puzle ha quedado armado debe de indicarse mediante sendos mensajes de texto. También, este segundo caso tendrá que ir acompañado de una señal acústica.

 M05 F03

Figura 3

 M05 F04

Figura 4

La nueva estructura de carpetas es la que se muestra en la figura 5

 M04 F04  M05 F05

Figura 5

La carpeta piezas contiene 9 archivos: 1.jpg, 2.jpg,.. , 9.jpg.
La carpeta lib sigue sin cambios conteniendo el intérprete descartes-min.js
Se añaden dos nuevas carpetas: 

  • img: contiene los archivos de imagen fondo.jpg que irá como fondo del espacio E1 donde situamos la escena y feliz.png  la sonrisa que aparece cuando el puzle queda armado (ver figura 4)
  • sonido: contiene el archivo de sonido correcto.mp3 que se ejecuta cuando el puzle queda armado.

BalloonsLe4

 

nivel basico pEl Editor de Escenas dispone de un cuadro de herramientas para gestionar el listado de elementos en cada panel de configuración de Espacio, Controles, Definiciones, Programa y Gráficos

La figura muestra el caso para el listado del panel Controles que es similar al de los demás.

M05 F06

Figura 6

mas Añade un nuevo elemento al final de la lista
asterisco Copia el elemento de la lista seleccionado (el que está marcado con fondo azul) y lo añade al final. Después puede ser adaptado cambiando el nombre. Es práctico, como en este ejemplo, si solo van a diferir en el nombre y no cambian los parámetros.
menos Elimina el elemento seleccionado de la lista.
subir bajar Desplaza al elemento seleccionado una posición arriba o abajo cada vez que se pulsa, permitiendo cambiar el orden actual de los elementos en la lista. El orden de los elementos es importante pues se incorporan a la escena por capas que se superponen en ese orden.
Abre uncontrolesa ventana con la lista de controles hasta ese momento añadidos con sus definiciones que pueden ser editadas como en un editor de texto (ver Figura 7)

M05 F07

Figura 7

M05 F08

Figura 8

En esta ventana es posible seleccionar un bloque de elementos, por ejemplo desde g1 a g4 inclusive, copiarlos con ctrl+C, abrir una línea después de g4 y pegarlos con ctrl+V;  a continuación se puede modificar uno a uno los elementos de la copia.

 

Transformaciones que producen la adaptación del puzle 2x2 al puzle 3x3

Es fundamental repasar las explicaciones que se dieron para elaborar la escena 2x2 del artículo anterior y entender bien el significado de los auxiliares que se utilizaron:

  • c1, c2, c3, c4: toman el valor 1 cuando la correspondiente pieza está casi colocada en una casilla, no necesariamente la correcta. Así p.e., c1=(g1.x<0)*(abs(g1.x-ent(g1.x)-0.5)<0.05)*(abs(g1.y-ent(g1.y)-0.5)<0.05)
  • s12, s13, s14, s23, s24, s34: toman valor 1 cuando están montadas la pareja de piezas que indican los subíndices. P.e en  

    s12=c1*c2*(ent(g1.x)=ent(g2.x))*(ent(g1.y)=ent(g2.y)) las piezas 1 y 2 está encajadas en una casilla c1=c2=1 y además sus posiciones coinciden.

  • montadass12+s13+s14+s23+s24+s34 vale 0 si ninguna pieza está montada. Si al menos un sumando vale 1 hay piezas montadas.
  • armado,  vale 1 si todas las piezas están encajadas en su corresopondiente casilla. Así p.e. la pieza 1 debe de encajarse en la casilla cuyo vértice superior izquierda es (-2,1) y en consecuencia (ent(g1.x)=-2)*(ent(g1.y)=1) tiene que vale 1. Cada pieza bien encajada se evalúa a través de una expesión similar a la anterior y armado se define como el producto de las cuatro expresiones. 

En la adaptación al puzle 3x3 se ha cambiado la lógica y no se utilizan las expresiones s12, s13, ... En su lugar, Eduardo Barbero Corral, propone una definición de los auxiliares p1, p2, p3,.., p9, de tal manera que cada casilla queda identificada por un número diferente y las expresiones para montadas y armado vienen dadas como veremos más adelante en función de estos nuevos auxiliares. 

La escena ya adaptada se puede descargar desde aquí y verificar las trasformaciones que se explican a continuación. 

1.

 Creación de la carpeta escena_M04-adaptada

Simplemente se copia la carpeta escena_M04 que puede descargarse desde aquí  y se renombra.

2.

 Creación de las subcarpetas img y sonido

Se incorporan a las mismas los archivos correspondientes.

3.

Sustitición de las imagenes en la carpeta piezas

Las nuevas imagenes se denominan segun el lugar (fila, columna) que ocupan en la cuadrícula,  1.jpg para la casilla (1,1), 2.jpg para la (1,2),... , 9.jpg para la (3,3). Se obtienen troceando una imagen de 450x450 píxeles con alguna herramienta específica. En el artículo anterior explicábamos como se hace con PhotoScape 3.7. Las piezas o trozos obtenidos tienen el tamaño 150x150px. Para la elaboración de este artículo hemos elegido el tema de animales y en particular la adaptación del puzle 2x2 a 3x3 que estamos explicando se basa en la imagen de una ardilla.

4.

Actuaciones en el Gestor de Escenas

Configuración: Cambiar las dimensiones a 800x510

Espacio

Escala 150 (no cambia), O.x=80, O.y=225,

Imagen de fondo img/fondo.jpg, despl_imagen='expand.' Se expande dado que la imagen tiene menor tamaño que el espacio que debe ocupar.

Controles:

Eliminar el control de Inicio. La adaptación de esta escena está orientada a poder formar parte de una colección de puzles dentro del mismo proyecto. Cada puzle podrá ser seleccionado y por tanto iniciado de otra forma.

Añadir g5,…, g9, g5.x, g5.y,… , g9.x, g9.y y mantener separada cada agrupación de controles. 
Utilizar las herramientas del listado de controles y añadir copiando controles existentes que solo cambian en el nombre. 

Modificar los valores min y máx de los controles numéricos para acomodarlos al nuevo tamaño del espacio. Desplazar finalmente los controles añadidos a la posición correcta en el listado segun el grupo al que pertenezca (Ver figura 9)

'g1.x' expresión='(0,0,0,0)' valor='rnd+0.6' min='-3.3' max='2.3' antes era min=’ -2.3’ y max=’2.3’
'g1.y' expresión='(0,0,0,0)' valor='rnd*2' min='-0.3' max='3.3' antes era min=’ -0.3’ y max=’2.3’

M05 F09

Figura 9

Gráficos

Imágenes: Añadir las piezas 5.jpg a 9.jpg (para reducir esfuerzos se puede utilizar las herramientas de gestión del listado similar a Controles, copiando una imagen ya existente y modificando nombres).
Tener en cuenta que hay dos series la primera se dibuja-si c1=… =c9=0 y la segunda si c1=… c9=1

Cambio de las dimensiones del tablero:

  • Polígono: (0,0)(-3,0)(-3,3)(0,3)(0,0), relleno='9000ffff' donde transparencia=90, rojo=00, verde=ff, azul=ff. El grado de trasparencia permite que el fondo del espacio se traparente combinado con el color turquesa 00ffff.
  • Familia de segmentos verticales: (-1-s,0)(-1-s,3),  intervalo [0,2], pasos 2.
  • Familia de segmentos horizontales: (-3,s)(0,s),  intervalo [0,2], pasos 2.

Imagen: dibujar-si='armado', expresión='(1.1, 2, 0.5, 0.5)', archivo='img/feliz.png’ 

nivel basico pPara representar la imagen feliz.png utilizamos el segundo tipo de expresión posible para la posición y tamaño de la misma (consultar la documentación sobre Imágenes en Gráficos 2D). La expresión (1.1, 2, 0.5, 0.5) se ajusta al formato (x, y, w, h). Este modelo permite añadir a las coordenadas x e y de posición de la imagen, el tamaño relativo de la imagen, ancho (w)  y alto (h). Además las coordenadas aquí son las del centro de la imagen y no la del extremo superior izquierdo como expresan en el modelo sin tamaño (x, y).

M05 F14b

(x, y, 1, 1) presenta la imagen al tamaño real, mientras que (x, y, 0.5, 0.5) la presenta al tamaño reducido a la mitad.

La imagen adjunta muestra la escena con la red, ejes y números activados a fin de poder verificar el efecto de definir la expresión (1.1, 2, 0.5, 05) para feliz.png

 

 

felizFigura 10

 

Programa

M05 F12

Figura 11

  • Algoritmo INICIO No se utiliza y se podría eliminar del listado.
  • Algoritmo CALCULOS:
    • Añadir variables c5 a c9 Se puede reducir esta tarea si copiamos una de la variables existentes p.e. c1 cinco veces y se modifican para acomodarlos a los indices a 5, 6, 7, 8 y 9
    • Eliminar las expresiones s12, s13, s14, s23, s24, s34
    • Añadir nuevas expresiones para verificar montadas y armado:

p1=c1*(ent(g1.x)+10*ent(g1.y))
p2=c2*(ent(g2.x)+10*ent(g2.y))
...............................................
p9=c9*(ent(g9.x)+10*ent(g9.y))

Si cada pieza ocupa su posición correcta se obtiene un valor diferente para cada expresión: p1=17, p2=18, p3=19, p4=7, p5=8, p6=9, p7=-3, p8=-2, p9=-1

montadas=c1*((p1=p2)+(p1=p3)+(p1=p4)+(p1=p5)+(p1=p6)+(p1=p7)+(p1=p8)+(p1=p9))+c2*((p2=p3)+(p2=p4)+(p2=p5)+(p2=p6)+(p2=p7)+(p2=p8)+(p2=p9))+c3*((p3=p4)+(p3=p5)+(p3=p6)+(p3=p7)+(p3=p8)+(p3=p9))+c4*((p4=p5)+(p4=p6)+(p4=p7)+(p4=p8)+(p4=p9))+c5*((p5=p6)+(p5=p7)+(p5=p8)+(p5=p9))+c6*((p6=p7)+(p6=p8)+(p6=p9))+c7*((p7=p8)+(p7=p9))+c8*(p8=p9)

armado=(p1=17)*(p2=18)*(p3=19)*(p4=7)*(p5=8)*(p6=9)*(p7=-3)*(p8=-2)*(p9=-1)

    • Evento:

evento='sí', condición='armado', acción='reproducir', parámetro='sonido/correcto.mp3', ejecución='alternar'

nivel basico p

Los eventos son condiciones booleanas que, cuando se cumplen, pueden realizar una acción. En consecuencia, tienen asociado un identificador, una condición (expresión booleana) y la acción a realizar: un mensaje, un cálculo, reprodudir un archivo de audio,…
Consultar la documentación correspondientes a Eventos

Los eventos se declaran añadiendolos en en el panel Programa. La figura 12 muestra como se declara el evento que produce la ejecución del audio correcto.mp3 cuando el puzle ha quedado armado y se cumple por tanto que el auxiliar armado toma un valor lógico verdadero. 

M05 F13

Figura 12

La opción alternar en ejecución significa que la acción se ejecuta una vez cuando la condición se cumple y no se vuelve a ejecutar hasta que la condición ha dejado de ser verdadera y vuelve a ser verdadera otra vez.

 

Proyecto para visualizar de forma selectiva una colección de puzles


Nuestro objetivo ahora es reunir una colección de puzles similares al adaptado en escena_M04-adaptada y utilizar un espacio HTMLIframe de DescartesJS donde poderlos visualizar de una forma selectiva y controlada.

Puede resultar interesante para algún propósito educativo reunir una colección de puzles que trate un mismo tema, por ejemplo “animales”. Una vez elaborado un puzle con la imagen de cierto animal, como la ardilla, es muy sencillo transformarlo en otro puzle con diferente imagen, ya que bastaría tomar una imagen del mismo tamaño 450x450 píxeles y trocearla en 9 cuadrados de 150x150px con la misma numeración 1.jpg, 2.jpg,.. 9.jpg que reemplazarían las correspondientes de la ardilla.

Los distintos puzles así obtenidos los guardaríamos en carpetas con nombres diferenciados: puzle1, puzle2, puzle3,…

Como cada puzle va a ser consultado desde una misma escena, es conveniente que el mismo interprete descartes-min.js se comparta con lo que se ahorra espacio. Tiene sentido hablar de Librería de proyecto y que otorguemos esta categoría a dicho intérprete. Basta sacarlo de cada carpeta en los diferentes puzles, eliminando la carpeta lib y situando esta al mismo nivel que las carpetas de aquellos.

La estructura de carpetas del proyecto sería como la mostrada en la figura 15

M05 F15

Figura 15

M05 F16El archivo index.html lleva la escena que controla la visualización de cada uno de los puzles en un único espacio HTMLIfame que enseguida pasaremos a explicar.

La carpeta lib lleva el intérprete descartes-min.js común para todos los puzles.

La carpeta imagenes lleva las imágenes propias vinculadas a la escena en index.html: el fondo y los botones para la selección de los puzles. 

Actuaciones sobre los archivos puzle.html 

Tenemos que cambiar la referencia al lugar que ahora ocupa el intérprete descartes-min.js:

Donde dice:

<script type='text/javascript' src='lib/descartes-min.js'></script>

hay que escribir

<script type='text/javascript' src='../lib/descartes-min.js'></script>

Ya que la carpera lib está situada ahora fuera de la carpeta que contiene el puzle,  un nivel por encima.

Esto se puede hacer modificando directamente cada archivo con un editor de texto plano o bien abriéndolo a través del Gestor de Escenas de Descartes, seleccionando la opción Librería de proyecto > solo para JS y guardando, sin más que hacer.

M05 F17
Figura 17

nivel basico p

La opción de librería de proyecto del Gestor de Escenas  busca compartir un único archivo del intérprete para un conjunto de páginas ubicadas a diferente nivel. 

Esta opción señala que el intérprete se direccione y ubique en una carpeta lib un nivel por encima al correspondiente archivo que se está editando (../lib).

Para la opción DescartesJS la línea incluida en la página de cada escena es:

<script type=’text/javascript’ src=’../lib/descartes-min.js’></script>

Consultar Opción menú “Opciones” en el Gestor de escenas


Escena contenedora del espacio HTMLIframe para visualizar los puzles

La Figura 18 lleva un enlace al proyecto resultante

Figura 1

Figura 18

Interaccionar con la escena y observar los resultados facilita la comprensión del objetivo del proyecto.

BalloonsLe4

 

Actuaciones en el Gestor de Escenas

Accedemos al Gestor de Escenas, Descartes.jar. Por defecto obtenemos una escena dimensión 970x550 píxeles con la opción Librería Portable solo para JS. Esta opción es la que nos interesa ahora para la escena que debe contener el archivo index.html según la estructura mostrada en la Figura 15. Abramos el Editor de Escenas para proceder a configurarla.

  • Redimensionado de la escena

En primer lugar, abrimos la ventana del código, pulsando el botón código desde cualquiera de los paneles de configuración (por defecto al abrir el Editor de escenas está activo el panel de Espacio).
La dimensión de la escena debe de llevar los valores width=970 y height=610

  • Panel Botones

Desmarcar los cuatro botones créditos, config, inicio y limpiar

  • Panel Espacio

El espacio por defecto E1 (2-D) lo ocupa todo y lleva por fondo la imagen imagenes/fondo2.jpg que debe expandirse pues el tamaño de esta es menor que el del espacio. 

M05 F18

Figura 19

Desmarcar la red, los ejes, el texto y los números.

Se añade el espacio E2 (HTMLIframe) y queda superpuesto a E1.

M05 F19
Figura 20

nivel basico p Los espacios HTMLIframe permiten la visualización de todo el contenido incluido en un fichero html. Los parámetros en este tipo de espacio pueden consultarse con más detalle en la documentación técnica sobre Espacios HTMLIframe 

 

Observar que el ancho 810 píxeles y alto 510 píxeles coincide con la dimensión de la escena de cada puzle que tiene que ser representada en este espacio.

Situamos el comienzo de la representación en x=30 píxeles (distancia al borde izquierdo de E1) y en y=70 píxeles (distancia al borde superior de E1). Es decir hemos dejado un margen lateral de 30 píxeles y un margen en la cabecera donde situar en otro momento el título de la escena “PUZLES DE ANIMALES”

Obsérvese que nos queda a la derecha un margen de representación para E1 de 970 – (810 +30) = 130 píxeles con suficiente holgura para situar los controles de botón rotulados como Puzle1, Puzle2, Puzle3,…

El margen al pie de E1 es 610-(70+510) = 30 píxeles donde se escribirá el nombre del animal cuya imagen representa el puzle seleccionado. (ver Figura 18)

El parámetro archivo lleva la expresión [file], file es una variable que en todo momento contiene la trayectoria al archivo puzle.html que ha sido seleccionado. [file] explicita el contenido actual de la variable file.

La figura 21 muestra la escena tal como se ve en el Editor de escenas hasta este momento de la configuración

M05 F25

Figura 21

  • Panel Controles

M05 F20
Figura 22

Este panel lleva los controles de botón identificados respectivamente como Puzle1, Puzle2, Puzle3,… tantos como puzles tengamos en la colección, en este caso son tres.

Consultar documentación Imágenes en controles numéricos tipo botón.

El nombre o rótulo que lleva el botón se ha hecho coincidir con el identificador.

La expresión de posición pos=’(855,100,100,30)’ para Puzle1 se ajusta al formato (x,y,w,h) donde x= distancia (píxeles) al borde lateral izquierdo de E1, y= distancia al borde superior de E1, w= ancho del botón, h=alto del botón.

Para Puzle2, y=150 y para Puzle3, y=200. Vamos desplazando 50 píxeles hacia abajo los sucesivos botones.

Valor = 1 es el valor que toma la variable identificada por Puzle1, Puzle2, Puzle3,… cuando se pulsa el botón correspondiente.

El texto del rótulo lleva formato: se escribe con color de relleno y borde y se selecciona un valor (18 puntos) para la fuente.

El archivo imágenes/btn100.png se utiliza en lugar del botón y coincide en tamaño. En la misma carpeta imagenes hay otras dos con el mismo nombre seguido de “_over” y “_down” , en este caso estás imágenes aparecerán en vez de btn100.png cuando el cursor del ratón se encuentra sobre el botón o cuando se pulsa respectivamente.

La acción “calcular” se realiza cuando el botón es pulsado y el parámetro  contiene las tres asignaciones separadas por ; que se ejecutan: file='puzle1/puzle.html'; Puzle2=0; Puzle3=0. Las asignaciones para el botón Puzle2 son file='puzle2/puzle.html'; Puzle1=0; Puzle3=0 y para Puzle3, file='puzle3/puzle.html'; Puzle1=0; Puzle2=0.

  • Panel Programa

M05 F21
Figura 23

El algoritmo INICIO establece los valores cuando se inicia la escena. Establece que puzle debe de visualizarse al inicio asignando file='puzle1/puzle.html' y Puzle1=1.

El algoritmo CALCULOS (añadido por defecto a Programa) no se utiliza y puede eliminarse.

  • Panel Gráficos

Añadimos cuatro elementos gráficos tipo texto. El primero para poner título a la escena “PUZLES DE ANIMALES” en el espacio de cabecera

M05 F22
Figura 24

El color de relleno del texto (fondo) es ‘ffa800’ sin trasparencia. Lleva formato Texto simple, tipo de letra SansSerif, negrita, 28 ptos y borde negro.

Los restantes tres textos sirven para informar en el pie de la escena el puzle que se ha seleccionado y el nombre del animal representado en la imagen.

M05 F23
Figura 25

El color de relleno del texto (fondo) es ‘ffa800’ sin trasparencia. Lleva formato Texto simple, tipo de letra SansSerif, negrita, 18 ptos y borde negro.


La diferencia entre estos tres textos está en el identificador que lleva dibujar-si y en el texto que se escribe.

 

Autoría:
Eduardo Barbero Corral (Programación de la adaptación al puzle 3x3)
Ángel Cabezudo Bueno (Interpretación, elaboración de las escenas, ilustraciones y redacción)

 icono zip escena_M05.zip

 

Este material está publicado bajo una licencia:
Licencia Creative Commons
Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional

Página 1 de 9
SiteLock

Módulo de Búsqueda

Frase Clave

Título del artículo

Categoría

Etiqueta

Publicador

Ayuda

Acceso

Canal Youtube

Calculadora Descartes

Versión 3.1 con estadística bidimensional

ComparteCódigo para embeber

Utilizamos cookies para mejorar nuestro sitio web y su experiencia al usarlo. Las cookies utilizadas para el funcionamiento esencial de este sitio ya se han establecido. Para saber más sobre las cookies que utilizamos y cómo eliminarlas , consulte nuestra Política de Privacidad.

  Acepto las Cookies de este sitio.
EU Cookie Directive Module Information