Diseño de páginas WEB
Contador de accesos.
Composer y NotePad


Introducción.

    Para la composición de páginas Web usaremos el "Composer" del navegador Netscape de distribución gratuita. Esta herramienta es como un procesador de textos en el que se va construyendo la página a la vez que vamos viendo como quedará al visualizarse desde un navegador.

    El Composer crea prácticamente todo el cuerpo del documento (BODY), siendo necesario el NotePad (o el WordPad, teniendo la precaución de guardar nuestro trabajo en modo texto) para editar la cabecera de mismo (HEAD) cuando sea necesario.

    Abra en navegador Netscape sobre cualquier destino y a continuación pase al Composer de alguna de estas maneras.
 

    Puede pasar al Composer desde el menú de principal, tal como muestra la imagen de la izquierda o directamente desde la ventana flotante que muestra la imagen situada a la derecha. En este último caso, esta ventana flotante puede estar incluida en la zona inferior del navegador, pero el icono es el mismo; una pluma estilográfica sobre un papel en blanco.

    Dentro del Composer, el ambiente de trabajo es muy similar al de un procesador de textos. Las barras superiores muestran los menús y los iconos de acceso rápido a las acciones mas habituales, y bajo ellas, la página en blanco sobre la que componer nuestra página Web.

    El verdadero lenguaje en el que se han de escribir los documentos para poder ser visualizados por los navegadores es el HTML o Hiper Text Mark Language, un lenguaje de hipertexto basado en marcas o etiquetas. No hace falta conocer la sintaxis del lenguaje para empezar a trabajar con él, ya que el Composer hará las conversiones necesarias por nosotros.

    Puede empezar a escribir sobre la pantalla en blanco del Composer, cambiando los tipos de letras, sus tamaños, sus colores, etc... , centrando los títulos, etc ... y añadir las "marcas" específicas de este tipo de formato de escritura, la HTML. Estas posibilidades que permiten saltar desde unos lugares del texto escrito (también desde las imágenes, ... ) hacia otro situado en la misma página o en otra alojada en el mismo ordenador o en cualquier otro con el que este conectado. Estos hiperenlaces son la esencia misma del lenguaje HTML, y para colocarlos hay que seguir 2 pasos:

  1. Establecer el destino en primer lugar. Ha de existir un lugar a donde llegar antes de emprender del viaje a través de los hipervínculos. Estas "marcas" no se ven en el navegador, siendo invisibles a todos los efectos. Se pueden poner tantas como se necesiten en cada documento, sin mas restricción que evitar que tengan el mismo nombre. A ellas se puede llegar desde el mismo documento o desde otro.
  2. Decidir desde donde se emprende el salto (viaje) hasta el destino ya establecido de antemano. Estas "marcas" al contrario de las anteriores si son visibles: coloreadas en azul y subrayadas el texto elegido como origen del salto genera el viaje cuando se presiona el ratón sobre el. En algunas ocasiones pueden cambiar estas condiciones habituales, pero siempre es posible localizar los puntos de hiperenlaces (saltos) observando el aspecto del cursor; este cambia a forma de mano con el dedo indice estirado cuando estamos sobre una zona que permite un enlace.
    Los iconos que permiten realizar ambos procesos de forma rapida, son:

    y están situados en la barra de herramientas del Composer, presentando una diana, que queda en el texto del composer cuando se usa, para los destinos (recuerde que es lo primero que ha de establecer) y un cadena de eslabones para los enlaces, lugares desde donde se producirán los saltos a los destinos marcados con las dianas.

    En el primer caso, los destinos, una nueva ventana, permitirá ponerles un nombre identificativo.
 

 
    Aquí puede ver la ventana que le pedirá el nombre que identificará al destino, y a su lado la señal que queda en el Composer, invisible en los navegadores, con el nombre de referencia que posee sobre la etiqueta amarilla. El nombre de la etiqueta destino y el texto junto al que está colocada no tienen porque coincidir, pero ayuda bastante, en textos largos, el que lo hagan.

    Una vez establecidos los destinos deseados, marcando un texto (o gráfico) y pulsando el icono de enlace, accedemos a una tarjeta donde seleccionar el enlace dentro del la misma página o a otro archivo distinto.

    El texto desde el que se salta está arriba señalado como "Texto enlazado", abajo la lista de posibles destinos, y en la zona media el que hemos seleccionado (en azul en la lista inferior). Como es un enlace interno aparece marcado como irá en el texto HTML: con la # delante del nombre del destino. Una vez establecido el texto que inicia el enlace, estará escrito en color azul y subrayado, tal y como el que permite volver al comienzo de este subapartado, en este mismo párrafo.

    Al terminar el trabajo grabe la hoja primero para poder verla despues con su navegador (Guardar) y a continuación visualícela para comprobar como ha quedado (Preliminar). Verá prácticamente lo mismo que con el Composer, excepto algunos detalles como el texto que rodea las imágenes, si ha usado esta posibilidad, o la ausencia de las marcas de destino, que serán invisibles.

    Lo mismo que vea con su navegador leyendo el archivo que ha tiene grabado en el disco de su ordenador, verá cualquier usuario desde Internet si lo coloca en un servidor de páginas de Web. En este caso recuerde que ha de "subir" su archivo al servidor acompañado de todos sus recursos: archivos de imágenes, sonidos, etc ...

    Por último, mientras usted ha estado escribiendo su página HTML el composer la ha traducido para usted al lenguaje de marcas que entienden los navegadores. Puede verlo con el NotePad de Windows y obtendrá algo parecido a esto:
 

<html>

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta name="Author" content="Luis Garcia Diz">
   ...

</head>

<body text="#000000" bgcolor="#C0C0C0" link="#0000EE" vlink="#551A8B" alink="#FF0000">
&nbsp;
<table BORDER=0 CELLSPACING=0 CELLPADDING=0 COLS=3 WIDTH="100%" >
....
 

<hr WIDTH="100%">

<div align=right>
<font face="Comic Sans MS" size=-2>Ultima modificaci&oacute;n: 16-XII-2001.</font>
</div>
</body>

</html>

    Básicamente presenta una estructura de Cabeza, en la parte superior (<head>...  </head>), y a continuación, bajo ella el Cuerpo (<body>...  </body>), y todo ello encerrado entre las marcas del lenguaje que se utiliza (<html>...  </html>). En la cabeza van algunas señas de identidad de la propia hoja y se situaran los programas, mientras que el cuerpo que es los que se enseña esta el contenido de la hoja. Rodeados por paréntesis angulosos ( < > ) están las marcas que dan origen a la denominación del propio leguaje HTML y que son la base de interpretación, por los navegadores, de lo que quería hacer el diseñador de la página.

    Esta hoja es, en si misma, la demostración práctica de como se pueden construir páginas Web con el Composer de Netscape. No es más que un ejemplo de página pasiva, sin ninguna interactividad con el usurio/a, ya que para ello se necesita incluir programas "Script" o "Applet", pero eso es otro cantar.



Ultima modificación: 16-XII-2001.