curso basico 2010 practica4recursostic.educacion.es/.../curso_basico_2009_practica4.pdfcurso...

Curso Descartes Básico 139

Presentación

El Gestor de Escenas es una aplicación que permite realizar todas las operaciones de edición y actualización de las escenas interactivas de las páginas de la web Descartes.

La edición y modificación de las escenas tratadas en esta práctica se hará sobre escenas realizadas con el applet Descartes 2 porque es más sencillo que Descartes 4 y, por tanto, más idóneo para los objetivos que se pretenden alcanzar en este curso.

En esta práctica se mostrará cómo cambiar el aspecto de una escena (tamaño, colores, posición y formato de los textos, ejes, botones) y se presentarán algunas herramientas de representación gráfica.

El objetivo de esta práctica es utilizar el Gestor de Escenas para realizar cambios sencillos en las escenas de las páginas de la Web Descartes.

Al finalizar la práctica se habrán adquirido las habilidades que permitan:

• Editar escenas. • Modificar las órdenes del panel espacio. • Modificar las órdenes de los controles numéricos y gráficos de una escena interactiva. • Modificar los colores de los componentes de la escena para que se vea adecuadamente. • Utilizar algunas herramientas de representación gráfica. • Añadir escenas a una página y sustituir una escena por otra. • Guardar las modificaciones realizadas en una escena.

Objetivos

El objetivo de esta práctica es utilizar el Gestor de Escenas para realizar cambios sencillos en las escenas de las páginas de la Web Descartes.

Al finalizar la práctica se habrán adquirido las habilidades que permitan:

• Editar escenas.

• Modificar las órdenes del panel espacio.

• Modificar las órdenes de los controles numéricos y gráficos de una escena interactiva.

• Modificar los colores de los componentes de la escena para que se vea adecuadamente.

• Utilizar algunas herramientas de representación gráfica.

• Añadir escenas a una página y sustituir una escena por otra.

• Guardar las modificaciones realizadas en una escena.

Contenidos

• Configurar la ventana de Edición: Idioma, deshacer, rehacer, original, nueva y código.

• Configurar la ventana Espacio: colores, fondo, fondo10, ejes, texto, números, eje-x, eje-y, créditos, config, inicio, limpiar.

• Configurar los Controles numéricos: valor, nombre, decimales, región, incr, min, máx, exponencial-si, visible.

• Configurar los Controles gráficos: pos, colores, tamaño, constricción, texto, decimales, rastro, color del rastro, dibujar-si.

• Configurar Gráficos: Punto, segmento, ecuación, arco, relleno y texto.

• Configurar Auxiliares: Variables, constantes, funciones, funciones matemáticas y operadores.

• Uso del Gestor de Escenas y localización de archivos.


• Copiar, cortar y pegar escenas.

• Añadir y sustituir escenas.

Requisitos y sugerencias

En esta práctica conviene probar el efecto de las la distintas herramientas, ya que en muchos casos la mejor explicación de su funcionalidad se obtendrá de la experimentación con ellas.

A lo largo de la lectura de la Introducción de esta práctica se recomienda abrir el Gestor de escenas para ir practicando a medida que se explican las herramientas de edición de la escena. Conviene en este punto, si va a serguirse esta recomendación utilizando el navegador Internet Explorer, cerrar este curso si se abrió a través de index.html en la carpeta Curso_basico y volver a entrar mediante Entrada_al_curso.html puesto que Index.html abre el curso a ventana completa y en el caso de Internet Explorer se oculta la barra de título de las ventanas con lo que imposibilita utilizar los botones de minimizar, restaurar y con ello alternar entre la ventana del curso y la ventana del Gestor de escenas.

Después de leer la Introducción a la práctica se debe mirar el Proyecto de la misma e intentar realizarlo sin utilizar otra guía. Las Actividades guiadas indican un procedimiento guiado para realizar el proyecto y son útiles hasta adquirir seguridad o si se prefiere un aprendizaje gradual y progresivo.

Introducción

Se llama applet a un pequeño programa que pueden incluirse en páginas Web, realizado en un lenguaje de programación denominado Java. Descartes es un applet configurable, y cada configuración de Descartes da lugar a un programa interactivo diferente que se llama escena.

Los cambios más sencillos en las escenas son los relacionados con la configuración del entorno (paneles de Espacio y de Controles) y con algunas herramientas de representación (puntos, segmentos, rellenos, textos). Estos cambios se realizarán en la ventana de configuración de la escena con el programa Gestor de Escenas que guardará el código HTML apropiado para que la escena se vea con el Navegador.

Supuesto que se pretende hacer modificaciones en alguna escena a través del propio editor del applet y también alguna modificación de la página con el editor HTML, los siguientes contenidos que se abordan siguen un orden, desde que se abre el archivo HTML que contiene la escena pasando por las modificaciones indicadas hasta que se guardan las actualizaciones en el archivo.

Gestor de escenas

En la Práctica 2 se han descargado unidades didácticas de la Web Descartes y se ha podido trabajar con las escenas. Fue necesario antes instalar un plug-in, sin él las escenas no pueden funcionar.

El instalador del plug-in era un archivo diferente para cada plataforma. Recordemos sus nombres:

Plataforma Instalador / Gestor

Windows DescartesWeb2.0.exe

Linux DescartesWeb2.0.sh y DescartesWeb2.0.jar

Mac SO X DescartesWeb2.0.jar

Una vez instalado el plug-in, este archivo actúa como gestor de escenas y editor de discursos de Descartes (DescartesWeb2.0.jar también es el gestor para todos los sistemas), es decir el programa que permite crear nuevas escenas o modificar las existentes. Se supone que este archivo se encuentra en la carpeta Descartes, donde también está la carpeta del curso y es posible que en su momento se creara un acceso directo o lanzador de este programa en el escritorio.

En esta práctica se va suponer que la plataforma es Windows. Salvo en el nombre del Gestor de Escenas, una vez ejecutado no va a encontrarse diferencia alguna entre distintos sistemas operativos.


Al hacerlo aparece una ventana con un sencillo menú de opciones: Archivo, Editar, Insertar y HTML.

Se usará el menú Archivo - Abrir


que permite buscar la carpeta donde está el archivo y seleccionarlo, como es habitual, por ejemplo en Descartes/Curso_basico/proyectos se encuentra la página escena_ejemplo.html con una única escena con la que se puede practicar la edición.

Al abrir el archivo aparecerán todas las escenas de la página en la ventana de Gestor de escenas, en este caso solo hay una. Se trata del archivo escena_ejemplo.html.


El menú Insertar del Gestor de Escenas permite:

• Agregar escena que la colocará después de todas las que haya en la página.

• Insertar escena, sólo disponible si está seleccionada alguna, y colocará la nueva por encima de la seleccionada. Para seleccionar la escena se pulsa el botón de selección

asociado

También se puede insertar escenas en el modo Mostrar HTML, para lo cual basta colocar el cursor en el punto del código HTML donde se quiere hacer la inserción. Al hacer esto se activan también las opciones de Insertar párrafo e insertar párrafo con escena en el menú Insertar. Se puede insertar una escena dentro de un párrafo, algún sitio entre etiquetas <p> y </p> o dentro de una celda de tabla ya existente, entre etiquetas <td> y </td>.

• Insertar párrafo, sirve para insertar un nuevo párrafo en el lugar donde está el cursor. Agrega sólo el código HTML de apertura y cierre de párrafo <p> y </p> (esto se puede editar también manualmente). La alineación por defecto es a la izquierda.

• Insertar párrafo con escena, inserta donde está el cursor una nueva escena centrada dentro de un párrafo.

Las escenas nuevas, obtenidas agregando o insertando Descartes2 o Descartes4, aparecen vacías con red cartesiana, totalmente operativas. Una escena del sistema es aquella que está en otra página y del portapapeles se trata de una escena que se copió en el Gestor y ahora se puede pegar, de una página a otra o dentro de la misma página.

Sin dejar la lectura de esta práctica, ejecutar el Gestor de escenas y abrir el archivo escena_ejemplo.html para continuar con los contenidos.

Con las indicaciones que se dan en esta Introducción y en las Actividades Guiadas relacionadas con el uso del Gestor de escenas es suficiente para

poder hacer las actividades del curso, no obstante, si se tiene experiencia en el uso del ordenador, se puede consultar el manual técnico de esta aplicación en la Web Descartes para tener más información.

Editor de escenas

No cierres el Gestor de escenas hasta que no hayas terminado de leer todos los contenidos.

Si la ventana del Gestor de escenas quita visibilidad para leer el texto se puede mover arrastrando la barra superior de título, también se puede minimizar, no cerrar, cuando se necesite, basta con seleccionarla en la barra de tareas y volverá a emerger.

El editor de escenas de esta referencia es el de Descartes 2.

Entorno de trabajo


La ventana del Nippe Descartes de esta escena muestra los siguientes elementos:

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

6 Controles:

2 Numéricos: B y C (en la zona su). 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.

3 Especiales: Escala (zoom), O.x y O.y (posición del origen de coordenadas del plano XY). En este caso están en la zona norte.

1 Gráfico: 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.

Si no se ha hecho con anterioridad se recomienda experimentar con los botones y controles de la escena.

Se puede hacer los cambios que se quiera sin temor a estropear nada del original, siempre que no se guarden los cambios en el mismo archivo.

Cuando se pulsa el botón config aparece una ventana de configuración o edición de la escena, que se analiza en la sección siguiente. Esta ventana de configuración,

como las demás de Windows, se pueden mover sobre la pantalla, arrastrando la barra superior de título, 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.


Acceso al editor de escenas

Hay tres formas de abrir el editor de una escena:

• Con el botón config de la escena, si aparece, como en la escena del ejemplo (página 144).

• Al pulsar con el botón derecho del ratón sobre la escena aparecen todos los botones, entre ellos está config como muestra la imagen adjunta. Utilizar la escena del ejemplo anterior para comprobarlo. Esta forma es útil cuando el botón config está oculto. Se verá como ocultar cualquiera de estos botones.

• Haciendo "doble clic" sobre la escena desde el Gestor de escenas (no así desde el navegador web)

Ventana del editor de escenas

La siguiente imagen representa la ventana que se observa cuando se abre el editor de escenas de Descartes 2. Se trata del panel de configuración del Espacio:

Existen cinco paneles u opciones en la configuración:

Para activar cada panel de configuración tenemos que marcar la ventana circular de selección junto a su nombre.

Por defecto, al abrir la ventana del editor de configuración, está activado el panel Espacio.

Paneles de configuración


En este apartado se muestran todas las herramientas disponibles en el editor de escenas de Descartes 2. No se pretende que se estudien en profundidad todos sus detalles, más bien se trata de tener una visión general que permita localizar las herramientas para acudir a ellas cuando se necesite durante la realización de la práctica, en particular en la realización del Proyecto.

Todas las herramientas se han diseñado pensado en que los usuarios serán profesores de matemáticas, por lo que su denominación y significado será, generalmente, muy intuitivo, de forma que en la mayor parte de los casos no será necesario recurrir a las explicaciones, lo más recomendable es probar las distintas opciones de configuración sobre la escena ejemplo para comprobar su funcionalidad (Consultar la página 156)

Funciones matemáticas y operadores

Ésta es la lista de funciones matemáticas y operadores que se usan en Descartes.

Las funciones matemáticas que reconoce el analizador de expresiones de Descartes, aparte de las que esté explícitamente definidas en una escena, son las siguientes:

Funciones de una variable (x):

sqr sqr(x)=x*x sqrt sqrt(x)=raíz cuadrada de x raíz sqrt(x)=raíz cuadrada de x exp exp(x)=exponencial natural de x=e^x log log(x)=logaritmo natural de x log10 log10(x)=logaritmo base 10 de x abs abs(x)=valor absoluto de x ent ent(x)=mayor entero n tal que n<x sgn sgn(x)=signo de x (1 si x>0,-1 si x<0,0 si x=0) ind ind(b)=indicadora de b (1 si b=true, 0 si b=false) sin sin(x)=seno de x sen sen(x)=seno de x cos cos(x)=coseno de x tan tan(x)=tangente de x cot cot(x)=cotangente de x sec sec(x)=secante de x csc csc(x)=cosecante de x sinh sinh(x)=seno hiperbólico de x=(exp(x)-exp(-x))/2 senh senh(x)=seno hiperbólico de x=(exp(x)-exp(-x))/2 cosh cosh(x)=coseno hiperbólico de x=(exp(x)+exp(-x))/2 tanh tanh(x)=tangente hiperbólica de x=sinh(x)/cosh(x) coth cot(x)=cotangente hiperbólica de x=cosh(x)/sinh(x) sech sech(x)=secante hiperbólica de x=1/cosh(x) csch csch(x)=cosecante hiperbólica de x=1/senh(x) asin asin(x)=ángulo cuyo seno es x asen asen(x)=ángulo cuyo seno es x acos acos(x)=ángulo cuyo coseno es x atan atan(x)=ángulo cuyo coseno es x

Funciones de dos variable (x,y):

min minx,y)=mínimo de x e y max max(x,y)=máximo de x e y

También hay un número aleatorio con distribución uniforme en el intervalo [0,1]:

rnd

Los operadores y otros símbolos que el analizador de expresiones reconoce son:

( paréntesis izquierdo ) paréntesis derecho = igualdad, operador binario que da un resultado booleano.


# desigualdad, operador binario que da un resultado booleano | operador binario de disyunción equivalente a OR ( O ) & operador binario de conjunción equivalente a AND ( y ) > mayor que, operador binario que da un resultado booleano < menor que, operador binario que da un resultado booleano + signo mas, operador binario de suma - signo menos: binario de resta o unario de cambio de signo * por, operador binario de multiplicación / entre, operador binario de división ^ operador binario de exponenciación (a^b=ab ) % módulo, operador binaro, resto de una división entera ~ operador unario booleano de negación. ? pregunta, sólo para asignaciones condicionales (P)?a:b : separador, sólo para asignaciones condicionales (P)?a:b

Guardar la escena

Cuando se cambia la configuración en los paneles de edición se modifica la escena pero los cambios no se guardan en el archivo del disco, solo han modificado la copia en la memoria RAM del ordenador. Para que los cambios queden almacenados de forma permanente hay que utilizar la opción Guardar o Guardar como... del menú Archivo del Gestor de Escenas.

La opción Guardar, como es habitual, graba en el archivo del disco que se abrió los cambios que se han realizado, con lo que se pierde lo que ese archivo contuviera hasta ese momento.La opción Guardar como, como también es habitual, permite guardar la nueva configuración de la escena en un archivo nuevo, con un nuevo nombre y en la misma carpeta o otra diferente.

Habitualmente se trabaja con dos editores para hacer cambios en la misma página, el Gestor de Escenas para gestión de la escena y Writer/Web OOo, o el editor HTML que se esté usando, para modificar el texto u otros componentes de la página.

En este caso, después de Guardar los cambios hechos con el Gestor de Escenas, hay que Actualizar la página en Writer/Web OOo, para que vuelva a leer la versión del archivo que se ha guardado y no use la anterior, la que había antes de hacer los cambios.

Y viceversa, si se hacen cambios con el editor HTML y se Guardan en el disco, antes de hacer ningún cambio en el Gestor de Escenas hay que Actualizar, porque el Gestor de Escenas no solo abre las escenas sino todo el contenido de la página.

Se ha incluido en este curso la documentación técnica de Descartes 2∗ que se encuentra en la Web Descartes para facilitar el acceso a quienes deseen ampliar la información que se aporta en esta Introducción.

Proyecto

En esta práctica se modificarán las dos escenas de la página ejercicio4.html y se añadirá una nueva escena contenida en la página escena_ejemplo.html que está en la carpeta proyectos de Curso_basico. De forma similar a como se hizo en la práctica 3, los cambios se realizarán no en ejercicio4.html sino sobre una copia de la misma que se llamará trabajo4.html y es la que se enviará al tutor/a para su evaluación junto con las imagenes correspondientes en la carpeta imagenes4.

∗

Descartes2_doc/index.html


La copia trabajo4.html puede hacerse abriendo el original ejercicio4.html con el Gestor de escenas y acto seguido Guardar como... desde el menú Archivo

Será conveniente preparar la página trabajo4.html, donde se van a producir los cambios, usando el editor HTML y después trabajar con el Gestor de escenas donde se adaptarán las escenas según las siguientes propuestas.

Editor HTML

La adaptación de la página a los cambios que se proponen se hará con Writer/Web OOo.

Propuesta

La imagen adjunta representa el aspecto que deberá tener la página del proyecto trabajo4.html una vez terminada.

Se observan los siguientes cambios:

• Se añade un título de cabecera: "PROYECTO 4" de mayor tamaño que el texto existente"ESCENAS" que quedará como subtitulo del encabezado.

• Se añaden 3 filas a la tabla que sirve de estructura para contener la tercera escena y su nombre.

• Se escribe un título, en la primera fila, para el apartado que contiene la tercera escena: "Escena 3"

• La tercera escena que se ve agregada final de la página, se hace a través del Gestor de escenas y está situada en el centro de la tercera fila añadida.

• Debajo de la fila que contiene la línea horizontal, se inserta una nueva fila y se escribe en ella el nombre del autor del proyecto: "Autor: Nombre Apellido1 Apellido2".


Planificación de la Actividad

1 Crear una subcarpeta en proyectos que se llame imagenes4 y copiar en ésta las imágenes logo.gif (Descartes 2) y 88x31.png (Icono de la licencia Creative Commons)

2 Abrir con el editor Writer/Web OOo la página trabajo4.htm situada en la carpeta proyectos.

3 Modificar los vínculos del logotipo de Descartes (logo.gif) y del icono de la licencia 88x31.png. Estos vínculos han de referirse a las imágenes que están en la carpeta imagenes4.


4 Escribir el título "PROYECTO 4" y dejar "ESCENAS" como subtítulo.

5

Escribir "Escena 3" por encima de la escena correspondiente que deberá quedar centrada horizontalmente, como lo están las otras dos, para lo cual habrá que añadir nuevas filas y subdividir las celdas de la tabla diseño de la página, para acomodar en sus celdas los elementos agregados.

6

Poner centrado el contenido de la celda que deberá contener la tercera escena. En este mismo instante, Writer/Web OOo y tambien FrontPage permiten poner esta escena, insertando el archivo escena_ejemplo.html. Observar que esto no se hace así con otros editores HTML.

7 Identificar el autor del proyecto al final de la página, debajo de la linea horizontal, con su nombre y apellidos.

8 Guardar la página trabajo4.htm en la misma carpeta.

Primera escena

La siguiente imagen muestra la escena por defecto que proporciona el nippe Descartes y que se obtiene tras pulsar el botón config cuando se selecciona al opción nueva en la ventana de configuración. Precisamente la escena por defecto del nippe Descartes es la primera escena contenida en el archivo ejercicio4.htm

Propuesta

Modificar en la configuración anterior hasta obtener el siguiente aspecto en la escena (no se modifican las dimensiones de la escena):


Se puede observar en la nueva escena los siguientes cambios

Espacio

• Se hacen invisibles los botones config y limpiar. • Fondo: negro; red: grisOscuro; red10: gris; ejes: grisClaro; texto: blanco. • Se activan números en los ejes y se ponen en estos las etiquetas correspondientes X e Y.

Controles

• Escala (numérico especial): valor inicial 20; visible; nombre externo: Ampliar/reducir. • Ox, Oy (numérico especial): se eliminan. • m (numérico), representa el valor de la pendiente de la recta: valor inicial 1; incremento 0.1;

decimales 1.

Para que surta el efecto de cambiar la inclinación de la recta, la ecuación de ésta se define y=m*x en el panel de configuración Gráficos. El color de la gráfica se cambia a rojo.

• P (gráfico): se trata de un punto de color rojo con borde resaltado en blanco, de tamaño 3 cuyo desplazamiento está restringido a la recta y=m*x. Inicialmente se situa en las coordenadas (3,3).


1 Abrir con el Gestor de Escenas la página trabajo4.htm situada en la carpeta proyectos

2 Modificar la Escena 1 para producir los cambios propuestos.

3 Guardar la página con el nombre trabajo4.htm en la misma carpeta proyectos


Las actividades propuestas anteriormente se corresponden con las desarrolladas en las Actividades Guiadas (página 159). Si se desea se puede seguir las indicaciones que se dan allí o consultar alguno de los pasos que no se sepa resolver.

- Configuración del Espacio (colores) - Configuración del Espacio (números y ejes) - Configuración del Espacio (botones) - Configuración de los controles especiales Escala, Ox y Oy - Configuración de controles numéricos

- Configuración de controles gráficos

Segunda escena

Se parte de la Segunda Escena contenida en la página trabajo4.htm y creada en la actividad propuesta en la Primera escena.

Propuesta

Modificar la configuración anterior hasta conseguir el siguiente aspecto en la escena.


Se puede observar en la nueva escena las siguientes cambios

Relleno Gráfico

• Se rellena el triángulo con color negro .

Nombres de los vértices

Se mejora la presentación de los nombres dados a vértices.

• Los nombres de los vértices en la Segunda escena se escriben en la orden texto al configurar cada uno de los tres arcos. Estos nombres se sitúan de forma predeterminada a la derecha, dentro del triángulo. En este Proyecto, se quitará este texto del vértice del arco en B y se reemplazará por un punto situado a la izquierda del vértice a una distancia fija de 15 pixeles independientemente de la variación del zoom.

• La orden texto de estos elementos gráficos se configura para el tipo Helvética, tamaño 14 y estilo negrita.

Segmentos

Cambia el formato de la orden texto del segmento en el panel Gráficos.

• Texto: Helvética, 14, negrita.

Texto gráfico

El texto gráfico, que representa la expresión del Teorema de Pitágoras referido al triángulo de la escena, está condicionado al valor que toma un control numérico t, con nombre externo Teorema. Si t vale 1 se hace visible en caso contrario no es visible.

• Posición [300,150].


• Color: turquesa. • Texto: Helvética, 18, negrita.


1 Abrir la página trabajo4.htm en el Gestor de Escenas

2 Modificar la Escena 2 para producir los cambios propuestos.

3 Guardar la página con el nombre trabajo4.htm en la misma carpeta proyectos


- Configurar el relleno gráfico - Configurar los nombres de los vértices - Configurar segmentos - Configurar texto gráfico controlado

Tercera Escena

Insertar en la misma página donde están las dos primeras escenas una tercera escena copiándola desde otro archivo.

Propuesta

Al final de la página se añadirá la escena que está en la página escena_ejemplo.html de la carpeta proyectos. Además se cambiará el tamaño de la escena para que sea de 500x400.


Los pasos siguientes se aplicarán en el supuesto de que el editor utilizado no sea Writer/Web OOo, pues ya se ha indicado en el apartado anterior de este proyecto, Editor HTML, cómo insertar la escena en la celda correspondiente y se ve con detalle en las actividades guiadas. Con FrontPage es posible emplear cualquiera de los procesos que se indican para insertar escenas.

1 Abrir la página escena_ejemplo.html que contiene la tercera escena original en el Gestor de Escenas .

2 Copiar la escena original

3 Abrir la página trabajo4.htm en el Gestor de Escenas.

4 Agregar la escena copiada al final de la página trabajo4.htm

5 Cambiar el tamaño de la escena agradada.

6 Guardar la página trabajo4.htm


- Añadir una escena - Redimensionar una escena


Actividades guiadas

En estas Actividades Guiadas (página 159) se ofrece en detalle los pasos que se requiere para la consecución del Proyecto 4

Evaluación

Al concluir el Proyecto de esta práctica se habrá creado una nueva página llamada trabajo4.html modificando las escenas de la página ejercicio4.htm y añadiendo la única escena que se encuentra en el archivo escena_ejemplo.html.

Se habrán realizado las actividades siguientes con el editor de escenas:

Configuración del Espacio (colores)

Configuración del Espacio (números y ejes)

Configuración del Espacio (botones)

Configuración de los controles especiales Escala, Ox y Oy

Configuración de controles numéricos

Configuración de controles gráficos

También se habrán realizado actividades con algunas de las herramientas de representación gráfica:

Configuración del relleno gráfico

Configuración de segmentos

Configuración de arcos

Configuración texto gráfico

Configuración del auxiliar ecuaciones

Y como complemento, se habrán cambiado las dimensiones de una escena y se habrá escrito con el editor de páginas Web el título del proyecto y el nombre del autor.

Se ha podido resolver el Proyecto consultando cada contenido en el apartado Introducción y las Actividades Guiadas.

No se pide que el resultado sea idéntico, basta con que las respuestas satisfagan los objetivos propuestos. Las diferencias entre resultados se deberán a una clara intencionalidad del autor que deberá justificar y no a despistes o a falta de los conocimientos necesarios.

Cuando se considere que se han conseguido los objetivos de esta práctica es obligatorio enviar el proyecto al tutor o tutora para su corrección y poder proseguir con el curso.

De forma similar a como se hizo en la Práctica 3, hay que comprimir el archivo trabajo4.html y la carpeta imagenes4 con el nombre codigo_sp4.zip, donde código será el asignado en el curso al alumno (por ejemplo mperez5_sp4.zip) y subirlo a través

de esta plataforma al tutor o tutora.

Curso Descartes Básico

156

Espacio

En este panel de Espacio se refleja el aspecto general de la escena, el color de fondo, si se quiere o no que aparezcan la cuadrícula, los ejes, los botones..., y los colores que se desea asignar a esos elementos.

En este enlace∗ se explica la utilidad de cada opción.

Controles

Este panel contiene los elementos interactivos de la escena, como los dos paneles siguientes está dividido en dos partes, el cuadro de edición donde se insertan, se copian, se colocan, se eliminan o se editan nuevos elementos y el cuadro de configuración que contiene los parámetros que configuran cada uno de esos elementos. Los controles pueden ser numéricos o gráficos.

En este enlace se explica la utilidad de cada opción

∗

Se refiere al correspondiente en el índice de la documentación técnica de Descartes 2 (Descartes2_doc/index.html)


157

Auxiliares

Aquí se incluyen todos aquellos elementos que facilitan la configuración de la escena, como son por ejemplo la definición de constantes, funciones, algoritmos..., que simplifican las expresiones que dan lugar a las representaciones que se producen en la escena. Hay cinco tipos de auxiliares: constante, variable, vector, función y algoritmo.

Por ejemplo es más sencillo usar pi que 3.14159, en el caso de que este número tenga que parecer varias veces en las expresiones que se quieren representar; o definir la función f(x)=sen(x)/x o el algoritmo que calcula el máximo común divisor de dos números... para utilizarlos luego en la representación de la escena.

Como en le caso anterior el panel también está dividido en dos partes.

En este enlace se explica cada uno de ellos.

Gráficos

En este panel deben figurar todos los elementos que se quieren representar en la escena: puntos, segmentos, vectores, polígonos, arcos, gráficas de funciones, textos... Estos elementos se podrán definir usando los controles y los auxiliares.

Hay diez herramientas diferentes que permiten construir todas los elementos matemáticos: ecuación, curva, sucesión, punto, segmento, flecha, polígono, arco relleno y texto, cada uno con su propio cuadro de configuración.

En el ejemplo se ha definido un triángulo mediante tres segmentos, el que se ve en la imagen tiene un extremo en el (0,0) y el otro sobre el eje X, en la abscisa que indique el control C.


158

Este enlace explica cada uno de ellos.

Animación

Aquí se define, mediante un algoritmo que es un bucle repetitivo, la variación de algún parámetro que permita modificar algunos elementos de la escena, produciéndose entonces un efecto animado.

Es un algoritmo especial y en este enlace se explica su funcionamiento.


159

Editor HTML (Página 159)

Primera escena (Página 163)

Segunda escena (Página 172)

Tercera escena (Página 177)

Editor HTML

Antes de modificar las escenas 1 y 2 e insertar la escena 3 con el programa Gestor de Escenas, se realizarán las adaptaciones en la página usando el editor HTML, en nuestro caso Writer/Web OOo. Una vez abierto el archivo ejercicio4.html y guardado como trabajo4.html, se comprueba que el diseño de la página está facilitado por una tabla en cuyas celdas están insertados distintos elementos: logotipo de Descartes, textos y escenas. Pues bien, procede ampliar la tabla para acomodar la tercera escena y su correspondiente nombre de apartado añadiendo 3 filas y una fila más debajo de la linea horizontal cuyo contenido identifica al autor. Una vez creada esta estructura:

1 Se escriben los textos indicados en el proyecto: El título "PROYECTO 4" dejando "ESCENAS" como

subtítulo; el nombre de apartado "Escena 3" por encima de la escena correspondiente y el nombre y apellidos del autor del proyecto en la parte inferior, debajo de la línea horizontal.

2 Se centra el contenido de la celda que contendrá la tercera escena.

3 Además hay que cambiar el vínculo actual del logotipo de Descartes por imagenes4/logo.gif y el

vínculo del icono de la licencia Creative Commons por imagenes4/88x31.png

4 Finalmente hay que Guardar los cambios. Vamos a ver con algún detalle el proceso de insertar nuevas filas en la tabla de diseño para acomodar en ellas el título de la escena 3 y la propia escena 3 y también para insertar la fila que llevará la identificación del autor.

Insertar nuevas filas en la tabla diseño de página

Hacer clic para sobre la siguiente fila en la que está situada la escena 2. La celda queda activada.

Después abrir el menú contextual con el botón derecho del ratón para elegir las opción de Fila -> Insertar.

En la ventana de diálogo que

aparece indicar "3" para Número

y seleccionar "Detrás" en

Posición


160

La imagen muestra las tres filas ya insertadas.

Cada fila debe tener tres columnas. Se puede dividir simultáneamente las tres filas de una sola celda si se seleccionan primero arrastrando el ratón desde la primera a la tercera. Se hace clic derecho sobre la selección para abrir el menú

contextual y se elige la opión Celda -> Dividir. En la ventana de diálogo se indica "3" en Dividir celda y se marca "Verticalmente".

Además de la filas insertadas para la Escena 3, hay que insertar una fila debajo de la que lleva la línea horizontal; ésta será la últila fila de la tabla que debe llevar la identificación "Autor: Nombre Apellido1 Apellido2". No se utilizará el procedimiento de Tabla -> Insertar -> Filas...(1, Detras) de la última línea de la tabla, para evitar que herede la línea horizontal como formato de párrafo. Se va a crear a continuación de la tabla otra tabla de una fila y luego unimos las dos:

Posicionar el cursor en el párrafo fuera de la tabla, debajo de la fila que lleva la linea

horizontal.

Seleccionar en el menú Tabla la entrada Insertar -> Tabla...

En la ventana de diálogo, poner "1" en Filas y "1" en Columnas (el cursor queda dentro de la nueva tabla).

Seleccionar en el menú Tabla la entrada Unir tablas

Este es el aspecto que tendrá la tabla después de esta adaptación y el destino que se dará a las nuevas celdas


161

Insertar la escena en una celda

Para insertar la escena 3 en la celda correspondiente, se debe seguir un camino diferente condicionado al editor HTML con el que trabajamos. En este curso se toma como referencia Writer/Web OOo pero cualquiera puede usar el editor con el que esté más familiarizado (FrontPage, Kompozer/Nvu, Dreamweaver, etc)

Writer/Web OOo en el momento de redactar este curso no consigue pegar la escena en su destino, copiada o cortada de otra parte de la página donde se encuentra, cosa que si hacen los otros editores mencionados. Así pues, se sigue otro camino posible, que consiste en insertar en la celda creada para tal fin el archivo escena_ejemplo.html cuyo contenido es exclusivamente una escena, la Escena 3 del proyecto; para lo cual:

1.- Se posiciona el cursor en la celda destino de la Escena 3 y se centra el contenido

2.- Se selecciona la opción Insertar -> Archivo en la barra de menús del editor, y se busca el archivo escena_ejemplo.html dentro de la carpeta proyectos


162

Este procedimiento también lo pueden seguir los usuarios de FrontPage y es francamente simple. Pero KompoZer/Nvu o Dreamweaver no tienen esta opción de insertar el archivo así que se utilizará la técnica más generalizada de copiar/cortar el objeto (escena) en origen y pegar en destino. En este caso usamos previamente el Gestor de escenas para agregar la escena contenida en escena_ejemplo.html al final de la página trabajo4.html, para lo cual se debe consultar el apartado Tercera Escena de estas actividades guiadas y a continuación seguir la siguiente explicación.

El Gestor de Escenas agregó la escena 3 al final de la página, fuera de la tabla estructura del diseño. Hay que llevar esta escena a la celda correspondiente.


163

Cortar y pegar la escena 3, que está fuera de la tabla, a la segunda celda de la tercera fila insertada.

Se centra la escena en la celda, haciendo clic fuera de la escena y seleccionando en la barra de Herramientas Formato el icono de

alineación centrada

Guardar los últimos cambios en el editor HTML y abrir la página en el navegador para ver el resultado.

Primera escena

Gestor de la escena

Hay que modificar la primera escena de la página ejercicio4.html en la carpeta proyectos Se realizan los pasos en el orden siguiente: Iniciar Gescenas

Para cambiar la configuración de una escena se debe iniciar el Gestor de Escenas que se encuentra en la carpeta Descartes; en el menú Archivo se selecciona la opción Abrir para acceder al archivo que tiene la primera escena del proyecto


164

Localizar y abrir la página

En este caso hay que localizar el archivo ejercicio4.html de la subcarpeta proyectos dentro de la carpeta Curso_basico

Mostrar sólo las escenas

Se aconseja trabajar con la opción Ocultar HTML del menú Html, para que sólo se vean y editen las escenas.


165

Guardar como...

La primera vez que se abre ejercicio4.html no se debe de hacer ningun cambio e inmediatamente guardar con la opción Guardar como... para hacer una copia del mismo en trabajo4.html que es con el que tenemos que trabajar en el proyecto. Así preservamos el original.

Es normal no terminar las modificaciones de escenas en una única sesión de trabajo. Se guarda y se sigue en otro momento. Para seguir con el proyecto, partir de ahora ya se tendrá que abrir el archivo trabajo4.html.


166

Llamar al editor de escenas

A continuación, para cambiar la configuración de la primera escena se realizará alguna de las siguientes acciones:

• Doble clic sobre la escena. • Clic en el botón config que hay en la esquina superior derecha de la escena. • Clic con el botón secundario sobre la escena y un clic con el botón principal sobre el botón config que

aparece en una pequeña ventana emergente.

Al hacerlo se abre el editor que muestra por defecto el panel de configuración del Espacio


167

Configuración del Espacio: Colores

La herramienta colores aparece en numerosas ocasiones, es un pequeño editor que permite modificar el color de diferentes elementos con mucha facilidad.

Color de fondo

En el panel Espacio se hace clic sobre el botón del color del fondo para elegir negro y se pulsa Aceptar.

Para ver el cambio de la escena, sin cerrar la ventana de edición, se pulsa el botón Aplicar.

Color de red, red10, ejes y texto

La cuadrícula con color actual grisClaro resalta demasiado junto al fondo negro que se ha puesto, por ello conviene cambiar el color de la red, se hace de forma similar al cambio del color de fondo aunque, en este

caso, además, hay que marcar el selector de red

Después se hace clic sobre el botón del color y se selecciona grisObscuro.

Después se repite la operación con la red10, se marca el selector y se cambia el color a gris. Lo mismo con los ejes (gris claro) y con el texto (blanco).


168

Guardar los cambios

Se recomienda guardar los cambios de vez en cuando para evitar que por algún fallo del ordenador se pierda el trabajo realizado. A partir de ahora, en esta práctica, si se ha abierto el archivo trabajo4.html bastará usar la opción Guardar para que se guarden los cambios que se vayan realizando.

Al hacerlo el archivo del disco queda actualizado con los últimos cambios.

Configuración del Espacio: Números y ejes

Se trata ahora de indicar que se desea escribir algunos valores de las coordenadas, números, sobre los ejes y también las etiquetas correspondientes a cada eje coordenado.

• Se marcan los selectores de números, eje-x y eje-y. • Se escriben las etiquetas de los ejes: X en eje-x e Y en eje-Y

Configuración del Espacio: Botones

Se ocultan los botones que no son necesarios: el botón config porque evitará que el alumno se distraiga usándolo y limpiar porque no es funcional aquí.


169

Para desactivar estos botones, cuando están marcados, basta posicionar el cursor sobre el selector correspondiente y hacer clic; desaparecen las marcas. Finalmente se pulsar aplicar para que se vean los cambios.

Una vez que el botón config no es visible, para poder acceder a la configuración basta hacer doble clic sobre la escena.

También, haciendo clic con el botón secundario sobre la escena, aparece una ventana con los botones de la escena.

Configuración de los controles especiales: escala, 0x y 0y

En la primera escena se eliminan de la región norte los controles Ox y Oy que sirven para colocar los ejes de coordenadas.

La eliminación de estos controles, en esta escena, no afectan la posición de los ejes puesto que, si no se asigna otro valor a estos controles, se coloca el origen de coordenadas en el centro de la escena.

Sólo queda visible en la región norte el control Escala que adopta el nombre externo Ampliar/Reducir

La eliminación de estos controles, en esta escena, no afectan la posición de los ejes puesto que, si no se asigna otro valor a estos controles, se coloca el origen de coordenadas en el centro de la escena.

Sólo queda visible en la región norte el control Escala que adopta el nombre externo Ampliar/Reducir.

En primer lugar hacer doble clic para ver la ventana de configuración (recordar que ya no es visible el botón config) y a continuación seleccionar el panel Controles.

Los pasos para eliminar un control se muestran en la siguiente imagen.

Se asignará la siguiente configuración al parámetro Escala en la primera escena.


170

Si se pulsa el botón Aplicar los cambios quedarán reflejados en la escena, como se puede comprobar buscando los límites de la escala y observando su incremento.

Configuración de los controles numéricos

Cuando se crea un control numérico se le asignan unos valores por defecto en aquellos parámetros que no pueden estar vacíos, pero lo más frecuente, es tener que modificarlos como se hace en las siguientes actividades.

En las dos imágenes siguientes se muestran los pasos que hay que seguir para añadir un control numérico, así como los valores que asigna el editor.

En la Escena 1, se asignará a la configuración del parámetro m los siguientes valores.

Para crear el efecto de cambio en la inclinación de la recta hay que configurar Gráficos.

Se define como control numérico la pendiente de la recta m y luego, en Gráficos, se emplea este control m en la ecuación de la recta: y=m*x


171

• Se seleccionar el panel de configuración Gráficos. • Se modifica la ecuación de la recta poniendo en su lugar y=m*x. • Se establece el color rojo para la recta.

La siguiente imagen refleja los pasos de esta configuración.

Configuración de los controles gráficos

En la Escena 1 hay que hacer visible un control gráfico obligado a moverse sobre la recta de ecuación y=m*x.

• Se activa el panel de Controles. • Se añade (+) un control Gráfico. • Se asigna a ese control el nombre P.

Las siguiente imagen refleja los pasos para hacer posible todo lo anterior.

Luego se establecen los siguientes valores de configuración del control gráfico P: pos, color de contorno del control (blanco), tamaño, constricción y texto (el orden en que se haga no es relevante). Se observará que el color del texto es el mismo que el asignado al contorno.


172

Se observará que al agregar el control gráfico P, se agregan automáticamente, los controles numéricos P.x y P.y correspondientes a las coordenadas del punto donde se encuentre el control gráfico P.

Como en esta escena no van a usarse estos controles P.x y P.y se pueden eliminar.

Después hay que pulsar el botón Aceptar para que la escena adopte esos cambios.

Se debe probar la funcionalidad del control gráfico P, haciendo clic sobre el punto y arrastrándolo.

Guardar los cambios en el Gestor de Escenas

Para que los cambios realizados con el editor de escenas se hagan permanentes hay que guardar la página con el Gestor de Escenas como se indicó en el apartado de "Configuración del espacio: Colores"

"Se recomienda guardar los cambios de vez en cuando para evitar que por algún fallo del ordenador se pierda el trabajo realizado. A partir de ahora, en esta práctica, bastará usar la opción Guardar para que se guarden los cambios que se vayan realizando en el archivo trabajo4.htm."

Segunda escena

Gestor de la escena

Para cambiar la configuración de la segunda escena, como ya se hizo en la primera, hay que llamar al editor del nippe, por ejemplo haciendo doble clic sobre la escena, una vez que se ha abierto la página correspondiente el Gestor de Escenas.

Configuración del relleno

Para rellenar el interior del triángulo hay que buscar la herramienta que lo hace. Está en el panel de Gráficos, como todas las herramientas de representación, se denomina Relleno.

Para activar esta orden se pulsa agregar (+) y, en la ventana agregar que se muestra, se selecciona el tipo de gráfico Relleno. Como se quiere rellenar el interior del triángulo ABC hay que indicar las coordenadas de un punto que esté en el interior, que no pertenezca a los lados, y asignar el color de relleno.


173

La coordenadas del vértice B son (0,0), así que un punto del triángulo es, por ejemplo (0.1,0.1). Cambiar el color de relleno a negro.

En la lista de elementos insertados hay que situar esta orden por encima de los arcos para que el relleno cubra todo el triángulo. Para conseguirlo, se selecciona la orden Relleno y se pulsa tres veces sucesivas el

botón de desplazamiento hacia arriba, flecha azul, en el encabezado de la lista.

La representación de los objetos se hace siguiendo el orden que se muestra en la lista, por eso es importante organizarla de forma que se produzca el efecto deseado.

Hay que recordar la conveniencia de Aplicar los cambios para comprobar el resultado en la escena y Guardar la página cuando ese resultado sea correcto.

Configuración de los nombres de los vértices

Se selecciona el gráfico arco con el texto de vértice B en la lista de gráficos insertados en la escena y se quita el texto. Más adelante se insertará un punto próximo al vértice, a la izquierda, con texto B que lo reemplazará.

Sucesivamente se seleccionan los otros dos arcos con vértices C y A respectivamente y se modifica el formato de la orden texto como indica la figura siguiente.


174

Es el momento de añadir el punto a distancia fija del vértice B(0,0). Esto significa que si se cambia el zoom, la posición del punto B respecto del vértice en la posición (0,0) no cambia. Si esta distancia es 1 unidad en desplazamiento a la izquierda y el valor inicial del zoom (escala) es 15, bastará definir la posición del punto como (−15/escala,0).

Se puede declarar una variable auxiliar s = −15/escala y definir el punto B en la posición (s,0).


175

El tamaño del punto es 0 para que sólo salga representado el texto, que es lo único que interesa.

Configuración de los segmentos

Se refiere al formato del texto asociado al segmento. Los segmentos de esta escena son los lados del triángulo ABC.

En el panel de gráficos, se va seleccionando uno a uno los segmentos y en cada caso se configura la orden texto.

La imagen siguiente muestra el panel de configuración del texto, el mismo para los tres segmentos.

Configuración del texto gráfico

El texto contiene la expresión del teorema de Pitágoras referido al triángulo ABC

b2= a2 + c2

Se insertarán dos textos gráficos: b = a + c y 2 2 2 Estos textos se hacen visibles si el valor del control t es 1 y no es visible si t vale 0. Las imágenes sucesivas muestran las configuraciones de los paneles de Controles y Gráficos que permiten obtener el resultado deseado.


176


177

Tercera escena

Añadir una escena con el Gestor

Este proceso no se utilizará si se está editando la página del proyecto con Writer/Web OOo.

Para añadir la tercera escena, se abre la página escena_ejemplo.html con el Gestor de escenas y se

selecciona la escena pulsando el botón que está a la derecha. La escena quedará enmarcada en rojo. Se copia con la combinación de teclas Control + c o bien desde el menú Editar.

Ahora la escena también está en el Portapapeles. Se abre en el Gestor de escenas la página trabajo4.html y, en el menú Insertar, se elige Agregar escena con la opción del portapapeles.

Otro procedimiento alternativo al descrito consiste en abrir en el Gestor primeramente el archivo trabajo4.html y después se elige Agregar escena con la opción del sistema, buscando ahora el archivo del sistema escena_ejemplo.html en la carpeta proyectos dentro de Curso_basico

Este proceso ha agredado la escena al final de la página pero no ha quedado situada en la celda correspondiente. Para situar la escena en un lugar bien concreto de la página, como es una celda de tabla, se podría hacer sin salir del Gestor de escenas, mostrando el código HTML, copiando la escena y pegándola entre etiquetas de la celda <tab> </tab>. El profesor que sigue este curso, y al que no le suponga un problema localizar esta etiqueta de celda dentro del código HTML, podrá hacerlo si es su deseo. En el apartado "Editor HTML" de estas actividades se explica como llevar la escena a la celda usando el editor HTML pero sin tener que consultar código.

Redimensionar la escena


178

Para cambiar las dimensiones de una escena se pulsa en el botón código de la ventana de configuración:

En la ventana que aparece se cambian los valores de width y height, y se pulsa en aplicar como muestra la siguiente imagen:

Se cierra esta ventana y cuando se pulse Aceptar en la ventana de configuración de la escena se producirá el cambio de tamaño. Guardar los cambios.

No debe olvidarse Guardar la página desde el Gestor de Escenas para que todos los cambios que se hayan realizado queden reflejados en el archivo de la página.

curso basico 2010 practica4recursostic.educacion.es/.../curso_basico_2009_practica4.pdfcurso...

Documents