Proceso

Cuando ya se tiene creada una página de una unidad didáctica puede darse el caso que, en algunas de las escenas, sea necesario ajustar su aspecto o realizar alguna variación puntual. Así mismo puede interesar sustituir una escena por otra que resulte más adecuada a los propósitos de la página en cuestión. Una herramienta esencial es el editor que lleva incorporado el propio NIPPE así como el auxilio del editor de páginas HTML.

• En primer lugar se abre con FrontPage Express la página Practica_5.htm, que es sobre la que se realizarán las modificaciones citadas en el proyecto. El archivo se debe encontrar en la carpeta Ejercicios de la carpeta del Curso Descartes.

• A continuación, desde el menú Archivo, se selecciona Guardar como... y se guarda el archivo en la misma carpeta pero con el nombre proyecto_p5.htm. Esto ha sido equivalente hacer una copia del archivo Practica_5.htm, haber cambiado el nombre de esta copia como proyecto_p5.htm y haber abierto finalmente este archivo en el editor FrontPage Express para producir los cambios que se han proyectado. Es importante tener en cuenta que ambos ficheros Practica_5.htm y proyecto_p5.htm comparten la misma carpeta de imágenes Practica_5_archivos.

• Una vez realizadas las acciones anteriores se abre la nueva página con el navegador, supuestamente Internet Explorer, pero sin cerrar FrontPage Express, basta que minimicemos su ventana pulsando el botón en el ángulo superior derecho. En la barra de tareas se podrán ver los botones correspondientes a las tareas o programas abiertos

El botón hundido representa la ventana de la tarea que no está minimizada. Para poner en primer plano la ventana de la tarea FrontPage Express basta hacer "clic izquierdo" sobre el botón correspondiente en la barra.

• Con FrontPage Express se modifica la página en los elementos proyectados: Nombre de página, encabezados, textos y opcionalmente se insertan los marcadores.

• Con el navegador, Internet Explorer, se ven las escenas y se modifican con el editor del Nippe.

• Se copia el código de la escena nueva modificada desde el editor del Nippe.

• Se localiza y selecciona el código antiguo de la escena que hay entre etiquetas <applet..> y </applet> antes de modificar, el que está aun guardado en disco. Esto se hace en la vista HTML del editor FrontPage Express o desde el propio navegador, Internet Explorer, con la opción Ver/Código fuente.

• Se pega el contenido actual del portapapeles en el código seleccionad (resaltado).

• Se actualiza el archivo HTML en disco con la opción Guardar

• Se actualiza  la vista de la página en el navegador para comprobar los cambios producidos. Operación actualizar del navegador

Modificaciones de la Escena A

Para abrir la ventana del editor del Nippe, al no mostrarse en la escena el botón config, se hace doble "clic izquierdo" sobre la escena.

Cambio del color del fondo

La siguiente imagen muestra los pasos ordenados que se debe seguir para cambiar el color gris al color gris oscuro

Al hacer "clic izquierdo" sobre el botón fondo se superpone al Nippe la ventana de color a la que tendremos que acostumbrarnos en esta práctica pues va a ser muy reiterativa.

El paso 2 muestra una lista de colores estándar que es la que utilizaremos para seleccionar en ella el nombre del color de cambio. A la derecha se ve una muestra del color seleccionado.

Para concluir hay que cerrar las ventanas haciendo clic en el botón aceptar correspondiente. No obstante como se va ha seguir haciendo cambios en la escena conviene sustituir el paso 4 por el de hacer "clic izquierdo" en el botón aplicar para que no cierre la ventana del Nippe.

Cambio de las propiedades del texto

El texto es una herramienta de representación gráfica en la escena. Para situar un texto hay que asignarle un punto [x,y], donde x e y es son enteros positivos que expresan en píxeles  la distancia horizontal y vertical respectivamente al [0,0] que ocupa el vértice superior izquierda del área de representación.

1. Para acceder a los elementos gráficos de representación hay que activar Gráficos en la ventana del Nippe.

2. Después en la lista de elementos gráficos que hay en la escena se selecciona el texto que hay en la posición [160,285]. Como está en el último lugar de la lista hay que desplazar la barra vertical hacia abajo hasta localizarlo.

3. En la entrada de posición de texto se cambia el valor 285 por 300 que es una posición más baja. Para ello se resalta el valor 285 arrastrando el ratón y se sobrescribe 300.

4. Haciendo "clic izquierdo" sobre el botón texto se abre la ventana de propiedades del texto y se cambia a los mostrados a continuación

Para cerrar esta ventana aceptando el cambio se pulsa el botón aceptar.

5. Los cambios se validan pulsando aceptar (cierra el editor del Nippe) o pulsando aplicar (para seguir editando)

Actualización del código de la Escena A

Las modificaciones llevadas a cabo sobre la escena han cambiado el código del Applet en la memoria RAM pero el archivo en disco conserva aun el código antiguo. De hecho si actualizamos la página cargada en el navegador obligaríamos a recargar en memoria RAM una copia del archivo en disco y volveríamos a ver la escena antigua: ¡Se han perdido los cambios!

En esta sección se explica como guardar en disco las modificaciones de la escena que han sido realizadas a través del editor del Nippe Descartes.

Copiar el código en el editor del Nippe

Se accede al código pulsando el botón Código en la ventana del editor del Nippe

Hay que asegurar que la escena tiene por nombre "Escena A" y que el codebase es "../". Si se editan estos campos hay que pulsar el botón de aplicar para incluir estos cambios en el código.

Después se copia al portapapeles el código resaltado (seleccionado) pulsando la combinación de teclas <control>C.

Abrir el archivo fuente HTML y reemplazar el código antiguo

Si la página se cargó con el navegador Internet Explorer sabemos que éste dispone de la opción Código fuente en el menú Ver que abre el archivo en el Bloc de notas de Windows y permite localizar el texto "<applet" con la opción Buscar del menú Edición.

También se puede ver el código fuente del archivo en disco proyecto_p5.htm abriéndolo con el editor FrontPage Express y seleccionando la opción HTML... en el menú Ver pero desafortunadamente la ventana de este editor de código no tiene una opción de búsqueda y la localización del texto "<applet" hay que hacerlo recorriendo la vista de arriba abajo (FrontPage 2000 o XP  y otros editores no presentan este inconveniente).

Hay que tener cuidado especial en localizar el texto "<applet" correcto en el caso de que una página tenga mas de un applet Descartes, como es el caso que nos ocupa, donde hay dos escenas.

Por eso es muy conveniente que los applet tengan nombre "Escena A" ó "Escena B". Si esto es así cuando se localiza el applet de la Escena A podemos ve el código siguiente y sabemos que estamos en la escena correcta.

Ahora llega el momento de seleccionar todo el texto que hay entre la etiqueta inicial y final del applet

y pegar sobre la selección, reemplazándola, el código nuevo, p.e. pulsando la combinación de teclas <control>V.

Guardar los cambios en el archivo

Si el fichero fuente se abrió en el Bloc de Notas desde el Navegador, se puede guardar el fichero desde la opción Guardar del menú Archivo del Bloc de Notas. Y finalmente cerrar la ventana del Bloc de Notas

Si el fichero fuente se abrió en el editor FrontPage Express, los cambios de guardan desde la opción Guardar del menú Archivo del propio programa FrontPage Express. Y finalmente cerrar la ventana del editor FrontPage Express.

Modificaciones de la Escena B

Esta escena muestra el botón config en el ángulo superior derecho, por tanto para entrar en el editor del Nippe y hacer modificaciones basta con pulsar este botón. Por defecto está activada la herramienta que permite configurar el espacio de la escena

Cambio de aspecto del espacio

Se cambia a negro el color del fondo, de forma parecida a como se hizo con la Escena A y se demarcan todas las demás opciones salvo la correspondiente al botón inicio. Para quitar/poner la marca sobre la ventanita cuadrada asociada a la opción hay que hacer "clic izquierdo" dentro de la misma. Después de estos cambios deberá comprobarse que el resultado es el siguiente:

Como hay que seguir haciendo cambios en la escena se pulsa el botón aplicar. Se puede comprobar como cambia el aspecto del espacio de la escena.

Cambio de color de las series 1 y 5

Las series que se muestran en la escena son conseguidas utilizando las herramientas de representación gráfica texto y punto. No es lugar ahora para explicar esto.

Tomando una actitud práctica se trata de localizar en la lista de elementos gráficos, a la izquierda de la ventana de la herramienta Gráficos del Nippe,  aquellos que tienen asignado el color "teja", correspondiente a la serie 1  y el color "azul" correspondiente a la serie 5.

Sólo hay que cambiar el color "teja" por el "blanco" y el color "azul" por el  "rosa"

Los elementos de la lista que tienen que modificarse son:

Actualización del código de la Escena B

Todo lo dicho en la sección de "Actualización del código de la Escena A" se puede aplicar a la Escena B por lo que no procede repetir la explicación.

Solamente insistir una vez más en que hay que asegurarse que el texto "<applet" que sirve expresión de búsqueda sea en este caso el que aparece en segunda repetición dentro de la página.