Entrada al curso

 

   

Configuración: Edición, espacio y controles

Práctica 5:

Se presentan  los conceptos de configuración del entorno, anunciados anteriormente, a través de la descripción de una escena de la unidad didáctica para Primer Ciclo de la ESO titulada Triángulos.

Nos referimos  a la segunda escena del apartado Construcción de triángulos que mostramos en la siguiente imagen:

El autor de dicha unidad didáctica explica brevemente el concepto que pretende ejemplificar en la escena y también da indicaciones de como tiene que actuar con los controles y propone dos actividades.

El lector puede visitar  esta Unidad Didáctica en la Web de Descartes o en su disco local si la tiene descargada e instalada. Alternativamente se presenta, después de la imagen, el nippe con la escena real en una nueva ventana que permitirá examinar cómo su autor ha resuelto la configuración del entorno.

Pulse aquí para abrir una nueva ventana en la que aparece la escena. No la cierre hasta que no haya terminado de leer esta página. Cuando la necesite, búsquela en la barra de tareas.

Observar que la ventana del Nippe Descartes de esta escena muestra los siguientes elementos:

Botones: créditos, config, inicio y limpiar (están situados uno en cada esquina) de la ventana.

Controles:

  • Numéricos: B y C (en la zona sur). Las flechas arriba y abajo situadas junto a la ventana correspondiente que muestra su valor sirven para incrementarlo positiva o negativamente cada vez que se pulsan.

  • Especiales: Escala (zoom), Ox  y Oy (Posición del origen de coordenadas del plano XY). En este caso están en la zona norte.

  • Gráficos: El punto C se puede controlar para cambiar su posición haciendo clic sobre su dibujo y arrastrándolo hasta  la nueva posición. Luego hay que soltarlo.

Experimente el lector con los botones y controles de la escena y saque su conclusión, pero siga el orden recomendado a continuación:

Pulse el botón créditos.
Pulse los controles de nombres zoom (escala), O.x (posición Ox del origen)  y O.y (posición Oy del origen).
Pulse el botón inicio para reponer los valores de los controles a sus condiciones iniciales.
Ponga valores diferentes a los mostrados inicialmente a los ángulos con vértices en  B y C.
Reponga los valores iniciales de los ángulos B y C.
Compruebe que el botón limpiar no produce ningún resultado nuevo en esta escena. Es posible conseguir que los gráficos dejen un rastro cuando se desplazan y tenemos opción de limpiar este rastro. En la escena del ejemplo como los gráficos no dejan rastro se puede prescindir del botón, haciéndolo invisible. Veremos cómo hacerlo más adelante.
Antes de pulsar el botón config se debe leer completamente este apartado.  Cuando se pulsa el botón config aparece una ventana de configuración de la escena. Esta ventana de configuración, como las demás de Windows, se pueden mover sobre la pantalla, arrastrando la barra de título (generalmente de color azul) para colocarla de forma que permita ver la página actual. Si se observa la barra de tareas se verá que ha aparecido una referencia mostrando el icono correspondiente a la tarea que se ejecuta en esta ventana.

Si se hace clic fuera de la ventana emergente, ésta desaparece y para hacerla emerger de nuevo basta con hacer clic sobre el icono de la barra de tareas.

Existen cinco aspectos en la configuración

Para activar cada panel de configuración tenemos que marcar la ventana circular de selección junto al nombre del panel


Panel de ESPACIO
 

Estos tres botones al final del panel sirven respectivamente para salir desde este panel de configuración aceptando los cambios, cerrar ignorando los cambios o aplicar los cambios realizados y continuar dentro del panel.
Se refiere al color del fondo de la escena, en este caso es blanco. Para modificarlo se hace clic sobre el cuadro de color anexo; en este momento emerge la herramienta de color que nos permitirá configurarlo.
No está activada. Pues la ventanita cuadrada de selección (selector ) no está marcada. Si se activa haciendo clic y luego se pulsa el botón aplicar vemos que se instala una red cartesiana con el color que tiene asociado , grisClaro. El color se puede cambiar  haciendo clic en el cuadro de color correspondiente.
Se refiere a una red cartesiana auxiliar que se marca cada 10 unidades de un color diferente al color de la red normal. El color que vemos en el panel es grisObscuro pero no está activado.
No están representados en esta  escena. Los ejes coordenados se pueden dibujar activando la ventanita de selección. En el panel está seleccionado el color grisObscuro y como en los apartados anteriores también se puede cambiar este color.

Está activado y es de color negro. Significa que si hacemos clic en punto del plano, en la escena, se muestran las coordenadas cartesianas del punto, como texto de color negro.

No están activados. Si se activa el selector (haciendo clic en la ventanita) se escribirán  algunos valores sobre los ejes con el mismo color que estos tengan.

Sirve para escribir un nombre o etiqueta en el  eje X de abscisas. Aunque esté activado el selector sólo funciona si está activado el selector de ejes. Hacer clic sobre la ventana rectangular para entrar en modo edición y escribir la etiqueta que deseemos.

Similar al anterior pero referido, en este caso, al eje Y de ordenadas.

Este selector, en nuestro ejemplo está activado, sirve para hacer visible el botón de créditos en la esquina superior izquierda de la escena.

Este selector, en nuestro ejemplo está activado, sirve para hacer visible el botón de inicio en la esquina inferior izquierda de la escena.

Este selector, en nuestro ejemplo está activado, sirve para hacer visible el botón de limpiar en la esquina inferior derecha de la escena.

Este selector, en nuestro ejemplo está activado, sirve para hacer visible el botón de config en la esquina superior derecha de la escena.

Observaciones

En el supuesto de que algún botón de esquina no sea visible siempre podemos hacerlo emerger haciendo clic derecho sobre la escena.
Antes de seguir experimentando con la escena del ejemplo haciendo modificaciones en el panel de espacio, tenga en cuenta la utilidad de los siguientes botones de edición

Haga los cambios que quiera sin temor a estropear nada del original, al que siempre podrá volver, mientras no actualice el código en el fichero htm.

Después de aplicar algún cambio puede que se arrepienta de haberlo hecho y quiera volver al estado anterior al cambio: puede ignorar la última acción de edición pulsando el botón de edición  deshacer. Aun puede desear recuperar la acción que acaba de ser ignorada, puede conseguirse con rehacer.

Si quisiera ignorar todos los cambios hechos hasta el momento y recuperar el estado original de la escena, se dispone del botón de edición original. Esto es debido a que, al modificar algo de la escena, el código cambia pero no así en el fichero html donde va insertado el Nippe Descartes. Ya aprendió en la práctica anterior que para fijar definitivamente los cambios realizados en una escena es necesario sustituir sobre el fichero htm la parte del código correspondiente a la escena Descartes.

 

Propuestas de modificación de la escena del ejemplo

 

1  Cambie según le convenga el color del fondo.

2  Active la red, los ejes y ponga números y etiquetas en los mismos.

3  Ponga colores adecuados.

4  Haga invisibles algunos botones de esquina en la escena.


Panel de CONTROLES

Recuerde los controles numéricos y gráficos de la escena del ejemplo. Para acceder a su configuración tenemos que pulsar el botón de esquina config y después seleccionar controles.

 

Se pueden distinguir en ellos dos partes: el cuadro de edición  y el cuadro de configuración.

En el cuadro de configuración se definen las instrucciones concretas de ese panel y en este caso hay dos modelos de configuración: la de los controles numéricos y la de los controles gráficos.

Estos controles son las herramientas más importante del nippe Descartes. Son los que hacen a esta aplicación interactiva ya que las representaciones que aparecen en la escena pueden cambiarse modificando sus valores.

El número de controles que pueden definirse en una escena está limitado por el espacio que hay asignado para situarlos; hay tres posiciones posibles: en la parte superior (norte), en la inferior (sur) y en un ventana externa (exterior) a la que se accede con el botón secundario del ratón, haciendo clic sobre la escena.

El efecto en la escena de un control numérico es la aparición los pulsadores que permiten modificar su valor con un clic sobre alguno de ellos. Si se mantiene pulsado el botón del ratón mientras el puntero se encuentra sobre un pulsador, se produce un cambio permanente que produce, con una programación del incremento adecuada, un efecto de movimiento y animación muy útil en muchas ocasiones.

Hay tres controles especiales que se suelen usar en la mayor parte de las escenas: escala, Ox y Oy. Todos los controles pueden usarse como variables en el resto de las herramientas del nippe.

Los controles gráficos se caracterizan porque en la escena aparece un punto que puede arrastrarse con el puntero del ratón. Además, otros elementos de la escena que dependan de ellos actualizan su valor y se produce un efecto de animación.

 Expliquemos seguidamente el contenido de cada cuadro en el panel de control a partir de la escena del ejemplo.

Cuadro de edición

En este cuadro vemos que el autor de la escena ha  añadido seis controles: Escala (numérico), Ox (numérico), Oy (numérico), B (numérico), C (numérico) y C (gráfico).

Los controles Escala, Ox y Oy son especiales en tanto que sus nombres están reservados en Descartes y tienen un significado exclusivo como ya sabemos.

Adviértase que es posible añadir controles con el mismo nombre si son de clase diferente.

En la parte superior del cuadro de edición podemos ver los botones de edición

Estos botones servirán para añadir un control , duplicar un control ya existente (se emplea para ahorrar tiempo en la edición cuando se quiere añadir un control que se parece mucho al que está seleccionado), mover el control seleccionado en la lista de controles añadidos , eliminar el control seleccionado de la lista , editar en una ventana aparte el código de las instrucciones correspondiente al control seleccionado .

Cuadro de configuración

 

Para cada control añadido en el cuadro de edición tenemos un cuadro de configuración.

Ya hemos dicho que hay dos tipos de controles: numéricos y gráficos. A continuación veremos el significado de su configuración.


valor: La unidad cartesiana tiene 20 puntos (píxeles).
nombre: Es el nombre externo o como se ve en la escena, según convenga y a criterio del autor. En este caso, "zoom", no coincide con el identificador del control, que es "escala" o nombre interno. El parámetro escala, de ser utilizado en operaciones internas de Descartes, tendría que referirse con su nombre interno que además es un nombre reservado.
decimales: En este ejemplo 4*(escala<10) es una expresión variable que depende de la escala. Si la expresión "(escala<10)" es verdadera vale 1 y si es falsa vale 0. Así pues el número de decimales que veremos en la escena será 4 ó 0.
región: Indica que el control escala aparecerá en la zona norte de la escena.
incr: Cada pulsación de la flecha arriba/abajo que hay junto al control hace aumentar/disminuir 10 puntos el valor que tenga el parámetro escala.
min: El menor valor que puede alcanzar el parámetro escala es 5.
max: El mayor valor que puede alcanzar el parámetro escala es 1000000. Realmente este valor es tan alto que el autor podía no haber puesto máximo.
visible: Significa que el valor actual del parámetro escala será visto en la ventana asociada al control escala. Si se desactiva esta opción solo se verán los pulsadores arriba/abajo pero no el valor de la escala.

valor: -120 significa que la posición la abscisa del origen Ox está situada dentro de espacio de representación gráfica en el punto -120. Como la escala es 20 puntos (píxeles) significa que hemos desplazado horizontalmente el espacio gráfico 6 unidades cartesianas a la izquierda (-120/20=-6). El centro del espacio de representación es el punto de corte de las diagonales del marco de representación de la escena.
  Obsérvese que un incremento positivo del parámetro Ox desplaza horizontalmente hacia la derecha el origen de coordenadas mientras que un incremento negativo lo desplaza horizontalmente  hacia la izquierda.
nombre: Este control especial se nombra externamente (como se ve en la escena) como O.x. El parámetro Ox , de ser utilizado en operaciones internas de Descartes, tendría que referirse con su nombre interno que además es un nombre reservado.
incr: Cada vez que se pulsa el origen de coordenadas se desplazará 20 puntos a la derecha. Al valer la escala 20 esto significa que el origen de coordenadas se podrá desplazar horizontalmente una unidad cada vez que pulsemos el control (consecuentemente todo objeto gráfico representado en la escena).
min y max: Al dejar estos valores en blanco no se pone límite mínimo y máximo al valor que pueda desplazarse.

valor:

100 significa que la posición de la ordenada del origen está situada dentro del espacio de representación gráfica en el punto (pixel) 100. Como la escala es 20 significa que hemos desplazado verticalmente hacia abajo 5 unidades cartesianas el punto origen de coordenadas.

Obsérvese que un incremento positivo del parámetro Oy desplaza verticalmente hacia abajo el origen de coordenadas mientras que un incremento negativo lo hace hacia arriba.


 

Este control numérico mostrado en la región sur de la escena tiene por identificador B (igual que su nombre externo).

Representa la medida del ángulo B. Es un parámetro cuyo valor puede ser modificado a voluntad por el usuario/alumno de la escena. Inicialmente tiene un valor de 45º y se puede incrementar de 1º en 1º. ¿Por qué el autor no habrá puesto límites a su valor? Observa cómo se modifica el triángulo al aumentar o disminuir sin límite este parámetro.

Aquí se descuidó al poner 1 decimal puesto que el incremento del parámetro es 1 y esto hace inoperante la posición decimal. ¿Qué pretendió, aumentar de 1 en 1 o de 0.1 en 0.1?


 

Este control numérico mostrado en la región sur de la escena tiene por identificador C (igual que su nombre externo).

Representa la medida del ángulo C. Es un parámetro cuyo valor puede ser modificado a voluntad por el usuario/alumno escena. Inicialmente tiene un valor de 60º y se puede incrementar de 1º en 1º.

Aquí podemos hacer los mismos comentarios que en control anterior.


 

Ya sabemos que los controles numéricos y gráficos tienen modelos de configuración diferentes. Lo podemos apreciar en el siguiente control gráfico con identificador C. Ya se dijo que aunque coincide el nombre del identificador con el de otro control numérico, no hay incompatibilidad, pues los controles son de naturaleza diferente. Implícitamente Descartes reserva los controles numéricos C.x y C.y como valores actuales de las coordenadas del control gráfico C. Así que aunque no se definan explícitamente en el cuadro de controles Descartes los tendrá en cuenta por si queremos hacer uso de ellos en cualquier cálculo.

Este control gráfico es un punto visible de tamaño 3 (medida del diámetro en píxeles), que inicialmente está situado en el espacio de representación en las coordenadas [a,0]. La abscisa a es un parámetro auxiliar variable (de valor inicial 12 unidades). Ya analizaremos en la siguiente práctica la herramienta auxiliares.

Los dos cuadros de color entre las ventanas de posición y tamaño sirven para poner color al borde (cuadro color izquierdo) y al relleno (cuadro color derecho) del control gráfico. Esta posibilidad permite distinguir los controles gráficos de entre un conjunto de puntos que no son controles y no tienen esta posibilidad de doble color. En la escena del ejemplo que estamos analizando no hay más puntos que el control y el autor ha preferido poner el mismo color rojo al borde y al relleno.

Constricción:

Limita el movimiento del control a los puntos del grafo de ecuación y=0 (es decir el vértice C del triángulo sólo se podrá desplazar sobre el eje de abscisas.

Texto:

El autor podía haber puesto la etiqueta C al control en este apartado pero ha utilizado otro recurso que ya se verá.

Decimales:

El valor 2 que se ha fijado no es operativo ya que afecta a las expresiones numéricas que a acompañan a la etiqueta del texto. Se puede dejar en blanco este apartado.
 

Propuestas de modificación de la escena del ejemplo

Haga los cambios que quiera sin temor a estropear nada del original, al que siempre podrá volver, mientras no actualice el código en el fichero htm.

1 Modificar el control escala: nombre "ampliar", valor inicial 15, incremento 5, máximo 35, mínimo 10, decimales 0.
2 Modificar el control Ox: valor inicial -220, incremento 5, máximo 0, mínimo -220, invisible.
3 Modificar el control Oy: valor inicial 150, incremento 5, máximo 150, mínimo 0, invisible.
4 Modificar control B: mínimo 45, máximo 90, decimales 0.
5 Modificar control numérico C: mínimo 45, máximo 90, decimales 0.
6 Modificar control gráfico C: decimales 0, tamaño 4, color borde azul, dibujar si C.x > 5.
Observar:

El usuario puede mover el control gráfico arrastrándolo con el ratón o usando las flechas del teclado. Para que las pulsaciones de las flechas del teclado actúen sobre un control gráfico es necesario que éste tenga el foco. Cuando un control gráfico tiene el foco aparece una circunferencia blanca o negra en su interior. Para que un control gráfico adquiera el foco hay que seleccionarlo con el ratón o haciendo un clic sobre la escena y pulsando el tabulador.  Si hay varios controles en una escena, la tecla tabulador pasa el foco de un control a otro siguiendo un orden cíclico.

7 Insertar un control gráfico para el vértice B: identificador B. Configurarlo así:  posición (0,0) situación del vértice B del triángulo, decimales 0, tamaño 4, color borde azul, restricción y=0.
Observar:
  •  Este control es independiente del verdadero vértice B del triángulo y en consecuencia no tiene ningún efecto sobre el triángulo al moverlo. Habría que relacionar la posición de este vértice a las coordenadas de posición B.x, B.y del nuevo control gráfico B.

  • Pulsar sucesivamente el tabulador <TAB> para cambiar la selección entre controles gráficos B y C.


     
© Ministerio de Educación y Ciencia. Año 2004