Creación de una escena sencilla en una página web
Esta lección ofrece una introducción al “habitat” de las escenas de Descartes y explica cómo integrarlas y guardarlas en una página web.
Contenido de esta lección:
Creación de una escena sencilla
Introducción
de objetos gráficos
Introducción
de controles
Grabación de la escena en la página web
Los applets de Descartes residen en páginas web y se tienen que incrustar en el código de éstas. Las páginas web tienen un código fuente en el lenguaje HTML, en el cual se tiene que insertar el código del applet para incluir el applet en la página web y para que se vea en la página.
Al código HTML de una página web se puede acceder mediante el enlace “Código fuente” que se encuentra en la opción “Ver” del menú del navegador Internet Explorer. En otros navegadores la opción para ver el código puede ser diferente.
Si pulsamos sobre este enlace y miramos el código fuente, veremos que el código HTML de una página web vacía se ve por ejemplo así:
La parte donde se inscribe el texto y todos los elementos gráficos de una página web es el “body”. Por ejemplo, si quisieramos crear una página web con algunos contenidos sobre figuras geométricas, con el título “Figuras geométricas”, el código fuente se vería así:
La letra P se refiere a párrafo y <P> quiere decir que en el lugar donde se escribe está comenzando un nuevo párrafo, que termina donde se encuentra el código </P>. Para editar textos en páginas web, no se tiene que trabajar directamente sobre el código: hay editores de HTML, como OpenOffice en que se puede editar textos en páginas web de manera muy similar a la manipulación de textos en Word. Recomendamos usar OpenOffice, un software libre de Sun Microsystems que se puede descargar gratis en http://www.OpenOffice.org porque presenta los applets en funcionamiento mientras que otros editores de HTML sólo muestran un recuadro donde va el applet.
Para insertar un applet Descartes en una página web, se tiene que trabajar con el código, pegando el código HTML del applet en el “body” del código fuente de la página, entre los símbolos <P> y </P> para indicar el inicio y el final del applet, como se ilustra aquí:
Si hacemos clic sobre este enlace a la página web con el código mostrado arriba, veremos que ésta tiene un applet de Descartes vacío con fondo turquesa. Al hacer un doble clic sobre el área turquesa del applet se abrirá la ventana de edición de Descartes, que tiene este aspecto:
(El uso de esta ventana de edición se estudiará detalladamente a lo largo del curso.) De esta manera, para simplificar el trabajo y el contacto con el código HTML a un mínimo, para crear escenas de Descartes se suele partir de un template de una página HTML con un applet de Descartes vacío. Este template se encuentra en la carpeta “paginasweb” de este proyecto, junto con las otras páginas web a las cuales nos hemos referido. Concretamente se encuentra en la subcarpeta paginasWeb y se llama appletVacio.html.
Creación de una escena sencilla
Como ya indicamos antes, las escenas de Descartes se suelen crear a base de escenas ya hechas que residen en una página web y que se modifican para crear una nueva escena. Así que, para editar nuestra primera escena de Descartes, vamos a analizar una escena existente para después editarla. Empezamos con la creación de un objeto gráfico con unos controles.
Los objetos gráficos son todos los objetos que se pueden dibujar en una escena: puntos, segmentos, curvas, arcos, (lugares geométricos de) ecuaciones, textos, imágenes, macros, etc... .
La versión actual de Descartes tiene dos tipos de objetos gráficos: los objetos gráficos en 2 dimensiones – llamados “gráficos” -, y los de 3 dimensiones – los “gráficos 3D”.
Para este ejercicio vamos a estudiar la siguiente escena con gráficos 3D:
Recapitulando lo anteriormente explicado, esta escena es un applet de Descartes cuyo código se ha pegado en el código fuente de esta página:
El applet es totalmente funcional e interactivo dentro de esta página, y como se mostró antes, haciendo doble clic sobre la escena, se abrirá su ventana de edición.
Primero, miremos los gráficos 3D, los cuales pueden editarse usando el panel de configuración de objetos gráficos 3D, al que se accede seleccionando el botón con este mismo nombre en la ventana de edición.
El panel de configuración de gráficos 3D de la escena en cuestión tiene este aspecto:
Se puede ver que a la izquierda aparece la lista de todos los gráficos de la escena, y a la derecha aparece un panel - que será diferente para cada tipo de gráfico - en el que se pueden editar todos los parámetros que definen al objeto gráfico seleccionado en la lista.
Como puede verse, los gráficos que se han seleccionado aquí son un tetraedro, un octaedro, un dodecaedro y un icosaedro. Para ver la lista entera de todos los gráficos 3D y agregar uno, se pulsa el botón [+]:
En el panel a la derecha hay una serie de campos para configurar los aspectos visuales de los gráficos. Por ejemplo, se pueden cambiar los colores pulsando el cuadro coloreado, o la posición inicial (“posini”) del gráfico sobre la escena. Esta funcionalidad se estudiará con más detalles en las sesiones más avanzadas.
Por ahora, queremos prestar atención al campo llamado “dibujar-si”. Este campo hace que la aparición del gráfico esté condicionala al criterio “caras=4”. De la misma manera, verán que la condición para dibujar el cubo es “caras=6”, el tetraedro “caras=4”, etc.
La condición “caras” es un control que está visible en la escena, cuyos parámetros puede cambiar el usuario y que por tanto hace que la escena sea interactiva. Si regresamos a la escena en cuestión, vemos que ésta tiene 4 controles: caras, h, ry y rz. Para estudiar la configuración de estos controles en la ventana del applet, pulsamos sobre el botón “controles” y veremos este panel:
Para que un control sea visible, se tiene que activar el interruptor con el mismo nombre a la derecha, y se le da un nombre al control (“nombre”). Hay varias maneras de desplegar los controles en la escena, por ejemplo como un menú del cual el usuario puede escoger una opción, que es el caso del control caras, como barra de desplazamiento (ry y rz), etc. También se puede configurar la posición del control en la escena, si éste se tiene que desplegar al “norte”, al “sur”, etc.
El control “caras” se despliega como un menú con una serie de opciones (las figuras geométricas), las cuales están especificadas en el campo “opciones”. En este caso, además, se ha añadido otra información que es el número de caras que tiene cada una de estas figuras. De este modo, el usuario puede seleccionar una figura de dos maneras: seleccionando el nombre de la figura en el menú, o bien escribiendo el número de caras en el campo al lado y pulsando “enter”. El campo “valor” se refiere al valor inicial del control, o sea que al abrirse el applet siempre se mostrará el tetraedro. Si cambiaramos este valor a 6, el applet se iniciaría con el cubo.
Los otros tres controles se manejan como barras de desplazamiento. En el caso del control con nombre “ry”, que es la rotación de la figura seleccionada sobre el eje y, ésta se mueve entre los valores -90 y 90.
Grabación de la escena editada en la página web
La única manera de guardar los cambios que se han hecho sobre una escena existente, es copiar el código HTML de la escena (el applet) y pegarlo en el código fuente de la página web en que reside la escena. El código del applet es el código en lenguaje HTML de las configuraciones que se han realizado en el editor de la escena.
Para acceder al código del applet, se pulsa el botón “código” que se encuentra en la parte superior derecha de la ventana de edición. Al hacerlo parecerá una ventana con el código entero del applet, que se ve así:
Podremos ver que, cuando hacemos un cambio en uno de los paneles de edición de los objetos de la escena, por ejemplo si agregamos un objeto gráfico y aplicamos, este cambio se podrá ver en el código del applet.
Ahora, para guardar la escena en la página web, se tiene que seleccionar el texto entero, y se hace una copia pulsando <Ctrl> y <c>. Después se abre el código fuente de la página web, como se mostró anteriormente, y se reemplaza el código existente con el nuevo código, seleccionando este primero y después pegando el nuevo pulsando <Ctrl> y <v>. Hay que tener cuidado de siempre seleccionar el código entero, desde <applet name...> hasta </applet>.
Y lo más importante: el nuevo código fuente de la página web se tiene que guardar mediante el botón “guardar” de la opción “archivo” en el menú del texto del código.
El código de los objetos de la escenas
Cada panel de configuración tiene su propio código que forma parte del código del applet y que se puede ver y editar si se pulsa el botón con el mismo nombre del panel en que se está trabajando. Este botón se encuentra encima de la lista de los objetos del panel. Por ejemplo, en el panel de gráficos, el código HTML de los gráficos se encuentra aquí:
>
A veces conviene trabajar sobre este código para cambiar, añadir o eliminar objetos. Por ejemplo cuando se trata de borrar una serie de objetos a la vez, se puede hacer simplemente borrando el código de estos objetos en la ventana del código.
La ventana del código, donde se encuentra el código HTML de la escena, tiene algunos campos para, entre otros, configurar el aspecto de la escena en la página. La documentación completa de todos los campos de la ventana del código se encuentra en el apartado código de la documentación técnica de Descartes.
Por ejemplo, si quisieramos cambiar el tamaño de la escena, esto se haría simplemente escribiendo los nuevos valores en los campos width y height, pulsar “aplicar”. Y naturalmente, para guardar los cambios permanentemente, hay que copiar y pegar el nuevo código del applet en el código fuente de la página web.
Es importante recordar que los cambios ejecutados sobre esta ventana sólo se implementarán sobre el código de la escena al pulsar el botón “aplicar”. Además, el cambio de tamaño de la escena no se verá hasta que se haya recargado o actualizado la página web después de cambiar el código (mediante el botón “actualizar” con dos flechas verdes curvadas en el menú de la página).
También es posible incluir la escena en la página web como un botón que al pulsarlo hará aparecer la escena. El botón que vemos abajo es la escena de las figuras 3D, pero con el aspecto en la página como botón “pop out”. Cuando pulsamos el botón, veremos la misma escena, pero en un tamaño más grande.
La ventana del código de esta escena se ve así:
Podemos ver que el interruptor “pop” esta activado y que el tamaño del botón es de 100 x 25. Además, se cambió el nombre de la escena, que aparece como etiqueta sobre el botón. Finalmente, el interruptor código HTML está desactivado, por lo cual los carácteres “raros” del texto del código, como las vocales acentuadas, se escriben sin codificar (a diferencia de la versión anterior del código en la imagen más arriba), lo que simplifica la búsqueda de palabras.
Importante: Las versiones finales de los applets que van a publicarse siempre deben llevar el código HTML activado pues en algunos navegadores o en diferentes sistemas operativos los caracteres “raros” hacen abortar la lectura del código del applet y éste aparece incompleto.
Ejercicios
Cree una página vacía en la misma carpeta donde se encuentra esta página copiando el template vacio.html. Llámela “poliedros.html”. Inserte en ella el código del applet de la escena de los poliedros extrayéndolo de la ventana del código. Guarde la página con el código insertado y ábrala con el navegador. Compruebe que la escena aparece en la nueva página.
Realice algunos cambios en la escena, por ejemplo cambie los colores de los objetos gráficos, y guarde los cambios en el código de la página, luego compruebe que la página presenta la escena con lasd modificaciones realizadas.
Partiendo del template “appletvacío.html” construyamos una escena con 3 figuras en 3 dimensiones de su propia elección cuya aparición sobre la escena se maneja mediante un control numérico, y de los cuales se pueden modificar los siguientes parámetros mediante controles de diferentes aspectos:
Posición sobre el eje y
Rotación sobre el eje x
Tamaño
Agregue a esta nueva escena los objetos gráficos de la escena de los poliedros, copiando el código HTML de estos objetos y pegándolo en la ventana del código de los objetos gráficos de la nueva escena. Configure el control numérico para que el usuario pueda manipular la aparación de estas nuevas figuras sobre la escena.
Autores: José Luis Abreu León y Tine Stalmans