En esta práctica se trabajará con FrontPage Express, como ya se ha comentado en la presentación, no obstante las funciones que aquí se describen se podrán encontrar en la mayoría de los editores de páginas html, tanto de Windows como de Linux, por lo que la práctica se puede realizar usando cualquiera de ellos.

Dado el carácter básico de este curso se pretende hacer una introducción muy elemental a la edición de páginas HTML y creemos que FrontPage Express es suficiente para atender este requisito, además de ser un programa de libre distribución que todavía es fácil de conseguir. Se trata de un editor que desarrolló Microsoft y se entregaba junto al paquete del sistema operativo Windows 98.

En el Aula virtual del curso se podrá hallar información relativa a la descarga e instalación de este editor, caso de que no disponga de él, así como de direcciones donde el lector puede hallar cursos y tutoriales que completan esta introducción.

 Aunque en la actualidad la mayoría de procesadores de texto más utilizados permiten editar páginas en formato HTML, caso de Microsoft Word, para usar Descartes se necesita que estos procesadores permitan el acceso al código de la página que se esté creando o modificando.

Los editores específicos presentan funciones muy similares a las de los procesadores de texto típicos:

• Comandos de formato de fuente (color, tipo, estilo...).

• Formatos de párrafo.

• Sangrías, alineaciones, viñetas.

• Inserción de gráficos, tablas, imágenes, etc.

   Junto a estas funciones presentan funciones específicas como son:

• Establecimiento del nombre de la página.

• Inserción de fondo.

• Inserción y modificación de hipervínculos.

• Inserción de applets de Java.

• Herramientas para editar formularios.

• Herramientas para editar marcos (Frames), etc.

Para abrir el programa basta con localizar la referencia al fichero en la carpeta donde se haya instalado o si se creó un acceso directo en el escritorio, p.e., , haciendo doble clic izquierdo sobre él.

En la imagen siguiente se puede observar el aspecto de la ventana del programa FrontPage Express y la similitud con el aspecto de un procesador de texto.  

Las herramientas de edición que se utilizarán para la elaboración páginas Web son pocas pero suficientes para conseguir los resultados deseados. Hacemos aquí un recorrido para indicar, dónde se localizan en el editor FrontPage.

En la la ventana del editor se pueden observar las siguientes barras:

Barra de título

Similar a la de cualquier ventana de Windows, muestra el icono del programa, el nombre del programa, el nombre del archivo abierto por el programa, los iconos para minimizar, maximizar/reducir y cerrar la ventana.

Barra de menús

Cada entrada de esta barra hace referencia a una clase determinada de operaciones o que tienen cierta afinidad y proporciona un submenú con opciones que son cada una de las operaciones que pueden realizarse con el editor.

En las actividades guiadas se explican las opciones que han sido necesarias en la elaboración del proyecto de esta práctica.

A continuación se hace un recorrido por los contenidos de las barras de herramientas que son accesos directos a las operaciones de edición más frecuentes. Estas barras pueden ocultarse desmarcándolas de la lista en el menú Ver.

Barra de herramientas Formato

• De texto

contiene entradas directas a las principales operaciones para cambiar el aspecto o formato del texto.

En la sección Poner formato al texto de las Actividades guiadas se puede ampliar información.

• De párrafo

Todo lo que se inserta en el documento hasta que se pulsa la tecla <Intro> o <Retorno> es considerado un párrafo para un editor de texto.

Para asignar una propiedad de párrafo basta situar el cursor sobre una parte cualquiera del párrafo y activarlo haciendo clic izquierdo.

Son operaciones de párrafo las siguientes:

• Alineación horizontal (izquierda, centro, derecha).

• Numeración/viñetas en los párrafos.

• Viñetas en los párrafos.

• Aumentar sangrado/Disminuir sangrado.

Barra de herramientas Estándar

En esta barra están colocados los accesos directos a las operaciones mas frecuentes en una sesión de edición:

• Abrir, cerrar y guardar  un archivo.

La apertura de un fichero significa poner una copia del mismo que se encuentra grabado en disco en la memoria RAM. La edición del fichero se realiza en memoria RAM y sólo se actualiza el fichero en disco con la operación de cerrar o guardar el fichero.

La operación de guardar actualiza el archivo grabado en disco con los cambios de edición efectuados en la memoria de trabajo RAM. 

La operación de cerrar termina la sesión de trabajo de edición del archivo y libera la memoria RAM. Si el archivo en disco no ha sido actualizado aún, el editor solicita antes de cerrar que se guarde el fichero.

• Imprimir y vista preliminar.

Imprimir hace posible que se pueda hacer una copia en papel del archivo que está viendo en el editor (si hay varios abiertos se imprime el de primer plano). Esta operación llama al programa de impresión de Windows que nos permite seleccionar la impresora y poner las propiedades de impresión características. Se puede imprimir una o varias páginas o una selección hecha en la página, también en orientación vertical u horizontal...

Vista preliminar muestra el aspecto de la página en el papel de la impresora antes de imprimir para poder hacer cambios previos.

• Cortar, copiar y pegar

Todos sabemos la gran utilidad Windows ofrece con las operaciones de cortar, copiar y pegar objetos. Este editor, como la mayoría de las aplicaciones Windows, también lo incorpora como herramienta de trabajo.

Para realizar estas operaciones Windows se vale de un concepto esencial: el portapapeles que actúa como memoria intermedia.

Para que estas operaciones estén activas en la barra estándar es preciso que previamente se haya seleccionado el objeto (texto, imagen, escena, etc.). La forma en como un objeto se  selecciona depende de mismo.

• Imagen o escena. Si es una imagen o una escena de un applet (como Descartes) basta posicionar el curso sobre la misma y hacer clic izquierdo. Se reconoce que hay selección si la imagen o escena aparece bordeado con una línea de puntos.

• Texto. Hay varias técnicas dependiendo de la cantidad de texto que se va a seleccionar. En la sección Poner formato al texto de las Actividades guiadas se da explicación es esto.

Las operaciones de copiar y cortar pone una copia del objeto seleccionado en el portapapeles. Pegar coge la copia del portapapeles y la inserta en el lugar seleccionado o activo que se desee. Dos efectos diferentes se producen después de pegar:

• Si precede a Copiar se conserva el objeto original copiado.

• Si precede a Cortar se elimina el objeto original cortado.

• Deshacer y rehacer. El editor memoriza un determinado número de operaciones realizadas sucesivamente en el trabajo de edición. Por ejemplo, si por error se ha borrado algún objeto de la página se puede volver al estado previo y reponer lo borrado a través de Deshacer. La operación Rehacer rehace la última operación deshecha.

• Insertar tabla. Insertar imagen. Desde la barra de herramientas estándar se puede insertar directamente una tabla sin más opciones que las propiedades activas en este momento para tablas y la selección  por arrastre de las celdas que va a tener (elegidas de entre un cuadro 5x4). El acceso a Insertar imagen abre una ventana de dialogo que permite escribir el nombre del archivo o la dirección del sitio donde se encuentra la imagen. En el caso de ser un archivo local habilita un explorador de árbol de carpetas en el disco.

• Insertar/modificar vínculo. Se puede vincular un texto o una imagen a otro lugar dentro de la misma o distinta página. El vínculo o hipervínculo se reconoce porque el puntero del ratón, al sobreponerlo al texto o imagen, cambia a la forma de una mano. Al hacer clic izquierdo sobre él, el navegador se dirige al sitio convenido. Para crear el vínculo, borrarlo o modificarlo, se selecciona un texto o una imagen y se llama al procedimiento Insertar/modificar vínculo.

• Atrás /adelante, para retroceder o avanzar en la vista de las distintas páginas abiertas en el editor.

• Actualizar una página. Fuerza a que los objetos insertados en la página se vuelvan a cargar en memoria desde el sitio donde están guardados. Más información al respecto se ofrece al final de la sección Editor de código HTML en esta misma página.

• Mostrar/ocultar. La mayor utilidad de esta herramienta es la posibilidad de mostrar u ocultar, en la vista del editor, elementos que normalmente no se visualizan en el navegador como son saltos de línea, esquemas de formularios, líneas de división de celdas en una tabla...

Barra de herramienta Formularios

No se van a utilizar en este curso salvo que el profesor avanzado conozca su utilidad y lo desee en su actividad.

Barra de estado

Cuando se pasa el puntero del ratón por algunos elementos, el editor sitúa en la parte inferior de la ventana información de su estado. Es un texto explicativo de cada opción del menú, o de una operación en las barra de herramienta, o si el teclado numérico está habilitado (después de pulsar la tecla <Bloq Num> aparece la palabra NUM),...

Marcadores

Un marcador es una señal en la página a la que se dirigirá un vínculo o hipervínculo.

El emblema del marcador es una banderita o un texto subrayado con una línea punteada .

Para poner un marcador, se coloca el cursor en el lugar deseado de la página (caso de la banderita) o se selecciona una palabra (caso de la línea punteada); se abre el menú Edición y se selecciona la opción Marcador... La ventana de diálogo que se abre es mostrada en la imagen adjunta.

Un marcador tiene que tener nombre pues es la forma de poder asociarlo a un hipervínculo de la página.

Los distintos marcadores que ya existen en la página son también mostrados y tenemos la posibilidad de borrarlos.

Una vez creado un marcador, éste puede ser editado abriendo la ventana anterior. Para ello, se hace clic derecho sobre dicho marcador y se elige la opción Propiedades del marcador en el menú emergente.

Si se desea, el nombre de marcador puede ser distinto al del texto donde va pegado el marcador.

Hipervínculos

Para asignar un vínculo a un texto o imagen, se selecciona y disponemos de tres caminos:

• Operación Insertar/modificar vínculos en la barra de herramientas estándar.

• Opción Hipervínculo... en el menú Edición

• Opción  hipervínculo... en el menú Insertar

En cualquiera de estos casos se abre la ventana de diálogo

Cada una de las fichas permite definir el hipervínculo con arreglo a las necesidades:

• A una página abierta en el editor. En el ejemplo el hipervínculo se dirige al marcador llamado "Índice" de la página "Entrada_al_curso.htm".

• Word Wide Web. Permite establecer la dirección según el servicio Web que se utiliza. La imagen siguiente muestra la ficha para un hipervínculo que abre la página principal del sitio http://descartes.cnice.mecd.es.

Otros tipos de vínculos que se pueden seleccionar son  mailto:(correo electrónico), news:, ftp:, file:, etc.

• Página nueva. Permite crear en ese momento una nueva página donde establecer el vínculo.

Como ya se ha comentado, los editores de páginas HTML, como FrontPage Express, generan el código HTML, pero también permiten que se pueda ver y editar. Para ello se debe pulsar sobre la orden HTML que se encuentra en el menú Ver de la barra de herramientas, tal como muestra la imagen adjunta.

Cuando se ejecuta dicha orden, se abre una nueva ventana de edición en la que se visualiza el código HTML de la página abierta en ese instante y que está en la memoria. Ahora se puede modificar el contenido, y si se usa el botón Aceptar, se cierra esta ventana y se actualiza en memoria RAM el código de la página con los cambios realizados.

Pero recuerda que esta modificación no quedará almacenada en el disco hasta que se use la orden Guardar del menú Archivo del editor HTML.

Si se ha realizado alguna modificación en el código de la página, el menú Ver tiene activa la opción Actualizar. Si se usa la orden Actualizar y si, en la ventana que aparece preguntando sobre guardar los cambios, se pulsa el botón de respuesta No, se cargará en la memoria el contenido del archivo del disco, perdiéndose la versión modificada en memoria RAM.

Uno de los motivos de esta práctica es incorporar dentro de una página Web escenas de Descartes. Esto conlleva algunos términos, como Java, Applet y máquina virtual, de los que se da una breve explicación a continuación.

Java es un lenguaje de programación  de alto nivel y orientado a objetos. No confundir con JavaScript que es totalmente diferente. Las ventajas que ofrece lo convierten en el lenguaje de programación en Internet por excelencia.

Un applet es un programa escrito en lenguaje Java dentro de una página web y ocupando un espacio rectangular de ella.

Todos los navegadores incorporan en la actualidad una máquina virtual Java encargada de ejecutar el código de los applets. Descartes es un applet fácilmente configurable. Cada una de las configuraciones se llama escena.

Si observamos el código fuente de una escena veremos que éste está comprendido entre las etiquetas <APPLET> y </APPLET>. A continuación tenemos un ejemplo:

CODE indica el nombre del fichero del applet, en este caso "Descartes.class".

WIDTH indica el ancho en píxeles que ocupará el applet.

HEIGHT indica la altura en píxeles que ocupará el applet.

CODEBASE="URL" donde "URL" indica la ruta de la carpeta donde están los archivos class para este applet. En el ejemplo anterior la ruta es C:/Descartes/Curso_Descartes/ que se refiere a la carpeta Curso_Descartes en el disco duro local C.

Hay formas relativas para expresar esta trayectoria en relación con la carpeta donde de encuentra la página Web a la que hace referencia al applet. Así, ../ significa carpeta padre o anterior jerárquica a la que contiene la página, mientras que ../../ sube otro nivel en la estructura jerárquica de carpetas.

La carpeta actual o de nivel 0 se representa ./, así que a veces vemos escrito "./../" en un código para referirse a la carpeta padre o anterior a la actual; es decir, "./../" significa lo mismo que "../".

Algunos applets, en lugar de estar disponible como uno o más archivos class, vienen empaquetados en archivos comprimidos que se reconocen por la extensión .jar. En estos casos en se utiliza el parámetro ARCHIVE="archivo.jar".

En el caso del applet Descartes, este archivo comprimido se llama descartes.jar y puede consultase los ficheros class que contiene utilizando un descompresor como WinZip.

La clave para trabajar en Descartes está en saber indicar la ruta para llegar al archivo descartes.jar.

Para incorporar una escena de Descartes en una nueva página Web se recurre a la técnica de Copiar y Pegar: se copia la escena en la página donde se encuentra y se pega en la página que se está elaborando. Las dos páginas se encontrarán abiertas en el editor HTML.

FrontPage Express permite abrir y disponer simultáneamente de los dos ficheros origen y destino. El menú Ventana del editor nos muestra los ficheros que han sido abiertos.

En la imagen anterior se puede comprobar que se han abierto dos fichero, primero el fichero proyecto_p4.htm y después el fichero regularidades_5.htm. El editor sólo puede mostrar un fichero por eso el que no se muestra se dice que está en segundo plano. Para saber qué fichero está en primer plano y se está viendo basta comprobar la marca a la izquierda en el menú Ventana. Para poner un fichero en primer plano se hace clic izquierdo sobre su nombre y el editor conmuta la vista de un fichero por otro.

Se ha dicho antes que el applet Descartes se ejecuta al abrir la página con el navegador, si tenemos instalada la máquina virtual de Java; es por lo que al abrir la página en el editor, la escena de Descartes no se ve y en su lugar aparece un cuadro con un símbolo J que se refiere a Java y el nombre de la clase, Descartes.class

Las dimensiones de este rectángulo en el editor es justamente la de la escena en el navegador.

Para copiar este rectángulo hay que seleccionarlo haciendo clic izquierdo sobre él: Queda bordeado con una línea de puntos. Los marcadores  del rectángulo en los puntos medios de los lados y en los vértices sirven para el cambio de dimensión arrastrándolos con el ratón.

Se puede consultar y modificar las propiedades de este programa Java haciendo clic derecho sobre el icono J y seleccionando la opción Propiedades del subprograma Java... del menú emergente que resulta.

Pero sólo interesa de esta ventana, en este curso, observar el tamaño de la escena 480x356 y la dirección base del subprograma "../../", aspecto éste muy interesante pues es clave para que la escena se pueda visualizar en el navegador y que un poco más adelante será tratado en estas actividades guiadas. El significado de la Dirección URL base del subprograma (CODEBASE) es que la clase descartes.class se encuentra, dentro del fichero comprimido descartes.jar, en una carpeta dos niveles por encima de la carpeta donde está la escena. Esto ocurre con las unidades didácticas de la Web Descartes.

Los ficheros descartes.jar, correspondiente al applet Descartes 2, y descartes3.jar, correspondiente al applet Descartes 3D, están  en la carpeta principal Descartes y las unidades didácticas se encuentran en carpetas incluidas dos niveles más abajo (o lo que es lo mismo la carpeta principal se encuentra dos niveles mas arriba que la carpetas que contienen las distintas unidades didácticas).

Este detalle es fundamental al realizar la copia del applet desde esta carpeta. Por ejemplo:

Supongamos que el applet copiado tiene que pegarse en una página contenida en una carpeta llamada Ejercicios, como la de este curso, un nivel por debajo de la carpeta principal llamada descartes_basico_cnice donde se encuentra el fichero  descartes.jar.

Es obvio que cuando se abra la nueva página en un navegador la máquina virtual no podrá cargar el subprograma y no se podrá ver la escena pues no coincide el CODEBASE del applet con la ruta  donde realmente se encuentra descartes.jar.

En el supuesto anterior para que pueda verse la escena copiada en la nueva página hay que cambiar el CODEBASE del applet por "../" en vez de "../../".

Hay varias vías para hacer esto:

• Modificando la Dirección URL base del subprobrama en la ventana de propiedades del subprogrma Java.

• Modificando el código correspondiente a CODEBASE en el editor de código HTML de FrontPage Express (menú Ver/HTML...).

• Modificando el código correspondiente a CODEBASE en el Bloc de Notas que se abre desde el navegador (menú Ver/Código fuente).

Esta información se completará en la sección Insertar escenas de Descartes en las Actividades Guiadas