Tomado del libro de José Luis Orihuela y Maria Luisa Santos.
Anaya Multimedia - 1999

Tipos de Herramientas

GUIA PARA EL MANEJO DE CLARIS HOMPAGE

Las posibilidades del ptrogama editor de HTML Claris Home Page son similares a las de la mayoría de los editores web más sencillos del mercado. Este programa permite:

• Introducir texto e imágenes en las páginas web
• Crear tablas
• Crear formularios interactivos
• Crear estructuras con frames o marcos
• Añadir elementos de sonido y animación
• Crear enlaces mediante texto, botones e iconos
• Convertir imágenes en mapas navegables
• Crear "librerías" donde se incluyen los objetos que se repiten con más frecuencia en los proyectos
• Editar código HTML, para llevar a cabo operaciones que la aplicación no incluye por defecto, o para comprobar que las órdenes de programación se ejecutan correctamente.

OPCIONES DE VISUALIZACION

Suele ocurrir que tanto la dimensión, como la disposición y los colores de los elementos que se insertan en un documento HTML se vean de forma distinta en función del navegador que se emplee. También, dependiendo del tamaño, calidad y resolución de pantalla del monitor de cada usuario, una misma página web se verá de forma diferente.

Por ello, mientras se trabaja con un programa editor de HTML es necesario tener activado un navegador para visualizar el trabajo que se está desarrollando.

En el Menú View, Claris Homepage ofrece la posibilidad de ver el trabajo de edición en dos navegadores distintos (Preview in Borwser 1,Preview in Browser 2, All Browsers), así como en tres modos de visualización: modo estándar de "edición" (Edit Page), que es el que se utiliza por defecto para trabajar, modo "previo" (Preview Page), que se asemeja a la manera en que se verá en el navegador, con los enlaces funcionando; y modo "edición html" (Edit HTML Source), en el que se edita directamente el código HTML.

En los tres casos, el programa permite visualizar la ventana de trabajo al tamaño correspondiente a las distintas resoluciones de pantalla más utilizadas (Size Window /640 x 480, 800 x 600, 1024 x 768, Default)

COMENZAR A TRABAJAR

Una vez creada la estructura en directorios que se propone en el apartado anterior (Organización del trabajo); y habiéndose guardado las imágenes, sonidos y vídeos necesarios para el proyecto en sus respectivas carpetas, se está en condiciones de comenzar a editar los documentos html.

El Menú File incluye los comandos estándar para crear, abrir, cerrar, guardar e imprimir documentos.

Para crear un documento se utilizan los comandos New Page o New/Create New-Blank Page.

El programa ofrece la posibilidad de trabajar con un asistente para la creación de documentos (New/Use Assistant) o con plantillas prediseñadas para crear páginas específicas como presentaciones, boletines, páginas personales, (New/Use Template).

Para guardar el documento creado, mediante el comando Save o Save as - hay que asignarle un título y un nombre. El título aparecerá en la barra superior del navegador cuando la página sea publicada en la Web, mientras que el nombre hace referencia únicamente a la designación del archivo. Ambos pueden coincidir o no. Por ejemplo, el nombre del documento deberá ser "index.htm", mientras que su título podrá ser el del propio proyecto.

Si se desea abrir o cerrar un documento ya existente, se utilizan los comandos Open y Close.

Para configurar la presentación de la página (color de fondo, imagen del fondo, color del texto por defecto, de los enlaces, enlaces activos y enlaces visitados) se utilizará el comando Document Options del Menú Tools.

INSERTAR Y MODIFICAR TEXTO.

Para insertar texto en una página web, el modo de trabajo es muy similar al empleado con un procesador de texto. Consiste en teclearlo directamente en el documento o copiarlo y pegarlo de otra fuente (páginas web, documentos de texto, etc.)

El Menú edit incluye (además del comando deshacer) las opciones estándar de edición para texto: cortar, copiar, pegar, borrar y seleccionar todo. También ofrece la posibilidad de buscar palabras y sustituirlas dentro del texto mediante el comando Find/Change.

Los comandos para modificar el formato del texto se encuentran en el Menú Format. Los formatos que ofrece el programa incluyen (aparte del estándar o "normal") distintos niveles de títulos (Heading 1-6), cada uno de ellos con un tamaño de letra diferente, así como distintos tipos de listas de texto: Bulleted List, o lista precedida de puntos; Definition List, o lista de términos y definiciones; Numbered List, o lista numerada; y Numbered List Style, que permite seleccionar entre distintos tipos de numeración.

La alineación del texto (Alignment / Align Left, Center, Right) y el sangrado de las líneas (Increase /Decrease Indent) también están presentes en el Menú Format.

Los comandos para modificar el estilo del texto seleccionado se encuentran en el Menú Style e incluyen el tamaño, el color y el tipo de la fuente, así como estilos normal, negrita, cursiva, subrayado, tachado, subíndice, superíndice, etc.

INSERTAR Y MODIFICAR IMÁGENES

Para insertar una imagen en un documento se debe situar el cursor en el lugar escogido y activar el comando Image del Menú Insert.

Al igual que el texto, las imágenes se pueden alinear seleccionándolas (haciendo clic sobre ellas) y utilizando los comandos que ofrece el Menú Format (Alignment /Align Left, Centere, Rigth), y también pueden colocarse estableciendo un margen a su izquierda mediante los comandos de sangrado del mismo menú (Increase /Decrease Indent).

Una vez seleccionada una imagen, la opción Object Editor del Menú View abre el Editor de Imágenes. La primera de sus pestañas (Appearance) permite: ubicar el directorio en el que está guardada la imagen (location), que debería ser la carpeta de imágenes prevista y creada para el proyecto , añadirle una etiqueta del texto (Alt Label); modificar su tamaño en anchura y altura (Width Height), devolver la imagen a su tamaño original (Original Size), establecer el grosor en pixels de su borde (Border), o la ausencia de borde (Border 0), alinear verticalmente la imagen (Alignment), y definir la transparencia de uno de sus colores (Transparency and Interelacing).

La segunda pestaña del editor de Imágenes (Behaviour) sirve para definir su funcionalidad, ya sea como mera representación gráfica (Picture), como botón de envío de los datos de un formulario a un CGI (Form Submit Button) o como mapa navegable (Image Map - Edit).

La creación de un mapa navegable a partir de una imagen se hace del siguiente modo: mediante las herramientas Rectangular o Circular Link Tool se dibujan zonas rectangulares o circulares en la imagen, asignándoles a cada una la dirección correspondiente del enlace (ver apartado "Crear enlaces"). Estas zonas pueden modificarse una vez dibujadas mediante la herramienta Selection Tool, y superponerse colocando unas delante de otras mediante los botones destinados a tal fin. Si además se desea que las zonas de la imagen no marcadas sirvan como enlace a otra dirección, ésta deberá anotarse en el campo Default URL.

Para que una imagen constituya el fondo de la página y poder situar elementos sobre ella, se debe activar el comando Document Options del Menú Tools, e indicar en el campo Back-ground -Image - Set la ubicación de la imagen escogida. La imagen que se establece como fondo de la página se repetirá tantas veces como sea necesario para llenar el contenido de la ventana. Por ello, si lo que interesa es que aparezca una sola vez, habrá que tener en cuenta su tamaño, para que llene la ventana (640 x 480 pixels, 600 x 800 pixels, etc.)

INSERTAR Y MODIFICAR TABLAS

Las tablas se utilizan, tanto para ordenar y presentar gráficamente una relación de datos, como para fijar la situación de los elementos (texto, imágenes, ventanas de vídeo, etc) en el documento, de forma que los distintos navegadores y monitores reproduzcan la página web de forma similar.

Para crear una tabla se debe situar el cursor en el lugar en el que se desee insertarla y activar el comando Table del Menú Insert. Automáticamente se abre el Editor de Tablas (también accesible en el menú View: Object Editor una vez seleccionada la tabla).

El Editor de Tablas tiene una primera pestaña (Table) que sirve para definir los parámetros generales de la tabla seleccionada: número de filas (Rows), número de columnas (Columns), añadir filas o columnas (Add Row / Column), eliminar filas o columnas (Reomve Row /Column), establecer la anchura (Width) y altura (Height) de las filas y columnas en procentaje o en pixels, el espacio entre las celdas (Spacing), el espacio entre el borde de la celda y su contenido (Padding), el grosor de los bordes de la tabla (Border) o su ausencia (Border 0), y el color de fondo (Table Color) o la imagen de fondo de la tabla (Table Image -Set).

La segunda pestaña del Editor de Tablas (Cells) sirve para definir los parámetros de la celda en la cual se encuentre el cursor: la altura de la fila (Row Height) y la anchura de la columna (Column Width), la unión de dos o más celdas en horizontal (Column Span) o en vertical (Row Span), la alineación horizontal y vertical de los elementos contenidos en la celda (Horizontal / Vertical Aligh), el color de la celda (Cell Color), el color de la fila (Row Color) o la imagen de fondo de la celda (Cell Image - Set).

En tercer lugar, mediante la pestaña Filemaker se puede incorporar a una tabla la información proveniente de una base de datos creada con el programa FileMaker Pro.

La alineación de las tablas en la página se lleva a cabo del mismo modo que la alineación de texto e imágenes: seleccionándolas (haciendo clic sobre ellas) y utilizando los comandos que ofrece el Menú Format. También se les puede aplicar un sangrado mayor o menor con los comandos previstos para sangrado de texto en el mismo menú.

Por último, es posible insertar una tabla dentro de otra situándose en la celda correspondiente y activando nuevamente el comando Table del Menú Insert.

INSERTAR LINEAS DE SEPARACION

Mediante el comando Horizontal Rule del Menú Insert se pueden insertar líneas horizontales para separar gráficamente distintos elementos de la página.

Una vez seleccionada la línea insertada (haciendo clic sobre ella) se puede modificar mediante el Editor de Línea (Menú View: Object Editor). Allí se pueden editar los siguientes parámetros: altura o grossor (Height), Longitud (Lenght) en pixels o en porcentaje de la ventana, alineación horizontal (Alignment) y sombre (Shade).

INSERTAR ELEMENTOS MULTIMEDIA

Del mismo modo que se insertan imágenes, tablas o líneas de separación, el programa permite incluir archivos multimedia (Audio, vídeo, animaciones, Applets de Java) en formatos compatibles con la red Internet.

El Menú Insert ofrece la posibilidad de insertar directamente Applets de java (Applets…) o películas en formato Quick Time (Quick Time Movie…), pero también otros elementos multimedia que requieran en el ordenador del usuario algún otro plug-in específico (Plug-in…).

En este caso, el programa ofrece la posibilidad de crear un mensaje para el usuario que el indique que plug-in necesita instalar y en qué dirección de la Red puede descargarlo. Esto se hace mediante el Editor de Plug-ins que se activa, una vez seleccionado el elemento multimedia insertado en la página, con el comando Object Editor del Menú View.

El editor permite, además, cambiar la ruta de acceso al archivo multimedia y definir su anchura y altura en pantalla.

CREAR FORMULARIOS

Los formularios sirven para solicitar información al usuario (datos personales, encuestas, opiniones, etc.), o bien para facilitar la entrada de información en la consulta de bases de datos (catálogos, bibliotecas, archivos, etc).

Para crear un formulario se utiliza el comando Form/ Form Area del Menú Insert. En el área definida como formulario se configuran las diferentes modalidades de respuesta que se proponen al usuario:

• Check Box: casilla no excluyente
• Hidden Entry: entrada oculta
• Password: campo para introducir una contraseña
• Pop up Menú: menú desplegable
• Radio Button: botón excluyente
• Reset Button: botón de borrado de los datos introducidos en el formulario
• Submit Button: botón de envío del formulario
• Text Area: área de texto
• Text Field: campo de texto

Una vez configurada la presentación del formulario, hay que activarlo, es decir, hay que programar su envío a un CGI (Common Gateway Interface) situado en el servidor, para que procese los datos, es decir, para que envíe la información del formulario a una dirección de correo electrónico. Cada servidor tiene sus propias órdenes de programación (Scripts) para CGI, por lo que es necesario conocer los scripts que utiliza el servidor en el que se va a publicar la página web para poder activar un formulario.

En el campo de texto Action del Editor de Formularios (que se activa mediante el comando Object Editor del Menú View mientras está seleccionado el formulario), hay que escribir la URL del CGI que se va a utilizar, seguida de la dirección de correo electrónico a la cual se van a enviar los datos.

CREAR ENLACES

Los enlaces son órdenes de programación que conectan las páginas del proyecto entre sí y con páginas externas. Los enlaces también permiten activar el envío de mensajes a una dirección de correo electrónico y la transferencia de ficheros desde un servidor FTP.

El crear un enlace es necesario definir su origen y su destino. El origen debe ser siempre un elemento de la página (una palabra o frase, una imagen, un botón, un icono, etc.) El destino puede ser un lugar distinto de la misma página en cuyo caso habrá que insertar en ese lugar un ancla,- o bien otra página web dentro o fuera del site de origen, una dirección de correo electrónico o un servidor FTP:

Las anclas se insertan, allí donde esté colocado el cursor, mediante el comando Anchor del Menú Insert. En un mismo documento cada ancla debe tener su propio nombre, para lo que deben recordarse las normas anteriormente indicadas para la denominación de documentos.

Para crear un enlace, en primer lugar se abre el Editor de Enlaces (Menú View: Link Editor), y a continuación se selecciona el texto, palabra, imagen, botón, etc. de origen. En el campo de texto URL del Editor debe escribirse la dirección de destino del enlace, cuyo enunciado variará en función del tipo de enlace de que se trate:

• Enlace a un lugar distinto dentro de la misma página: #nombre del ancla
• Enlace a otra página incluida en el mismo directorio o carpeta: nombre de la página.htm.
• Enlace a otra página incluida en un subdirectorio distinto dentro de la misma carpeta: subdirectorio/nombre de la página.htm.
• Enlace a un servidor externo o a páginas de otro proyecto en el mismo servidor: http://www.dominio/directorio/página.htm
• Enlace a un ancla de una página guardada en otro directorio: http://www.dominio/directorio/página.htm#nombre del ancla
• Enlace a una dirección de correo electrónico: mailto:usuario@dominio
• Enlace FTP para transferir un archivo: ftp://ftp.dominio/directorio/nombre del archivo

CREAR ESTRUCTURAS CON FRAMES

Estructurar en frames una página consiste en dividirla en áreas, de forma que cada una de ellas sea independiente. Así, cuando el usuario se desplaza por una de las áreas o frames, las demás permanecen fijas.

La utilización de los frames sirve para mantener permanentemente en pantalla un menú de navegación, o cualquier otro elemento que deba permanecer a la vista todo el tiempo, con independencia de los contenidos por los que esté navegando el usuario.

Cuando se trabaja con frames, cada uno de ellos contiene un archivo HTML distinto. El documento estructurado en frames se remite a sus correspondientes rutas de acceso.

Para crear un documento con estructura de frames, hay que seleccionar en el Menú File el comando New - frame Page. (El programa ofrece también la posibilidad de utilizar un asistente para su creación). En el cuadro de diálogo que aparece se define la posición de los frames (horizontal o vertical). Cada frame puede a su vez estar subdividido en otros.

Una vez creada la estructura, hay que indicar en cada frame la ruta de acceso al documento correspondiente. Para ello, y siempre que esté activado el comando Edit Frames del Menú View, se hace doble clic en el interior del frame activando así el Editor de Frames.
En la primera pestaña del Editor (Content), hay un campo de texto (Path) en el cual se debe indicar, mediante texto o mediante el botón Search File, la ruta de acceso al documento correspondiente. Además, se puede asignar un nombre al frame.

En la segunda pestaña del Editor (Appearance), se define el tamaño del frame, en valores absolutos o relativos (porcentaje de espacios que ocupará en la pantalla), se determina si este tamaño debe ser fijo (Fixed Size) -en cuyo caso el usuario no podrá modificarlo durante la navegación se establece un grosor y altura para el margen (Margin Width y Heigth), se define cuándo deben aparecer o no barras de desplazamiento en el frame (Scrollbars), y la presencia o no del borde de separación entre frames (Show Border).

Para crear enlaces cuando se trabaja con frames, debe expandirse el Editor de enlaces mediante la pestaña que aparece en su ángulo inferior izquierdo. En el campo de texto Target Frame hay que indicar el nombre del frame (o frame) en el cual aparecerá la página o destino del enlace, o bien, la palabra blank si se desea que la página se abra en la ventana nueva del navegador. Por lo demás, el enunciado de la dirección del enlace se hará conforme a lo ya expuesto en el apartado "Crear enlaces".

CREAR LIBRERIAS

Las librerías sirven para guardar y organizar elementos (textos, imágenes, tablas, formularios, fragmentos de código HTML., etc.) cuya utilización se repite en varias páginas de un proyecto. Consisten en un catálogo que permite asignar a cada entrada una serie de elementos.

Los elementos guardados en la librería pueden ser fácilmente copiados entre páginas. Sin embargo, cuando se trata de copiar imágenes o elementos multimedia externos (aquellos archivos de los cuales el documento HTML sólo guarda su ruta de acceso), será necesario guardar una copia del elemento en la carpeta en la que se encuentre la librería.

Para crear una librería se activa el comando Library /New del Menú File y a continuación debe guardarse (Menpu File: comando save): Si se desea que la librería aparezca en el listado del comando Library deberá guardarse en el directorio Claris Home Page / Contents.

Para añadir elementos a la librería, en primer lugar hay que establecer las entradas o categorías en las que se ubicarán. Para ello, se debe activar el comando New Entry del Menú Library y se le asigna un nombre a cada entrada. Para copiar elementos dentro de cada entrada o categoría, se pueden utilizar los comandos Copiar y Pegar, o simplemente arrastrar el elemento desde la página -o desde otras librerías- hasta la columna derecha correspondiente a la entrada creada.

Cuando se desea insertar un elemento de una librería en una página, se hace del mismo modo: bien mediante los comandos Copiar y Pegar, bien arrastrándolo a la propia página, o también mediante el comando Insert in Page del Menú Library.

Para borrar elementos de una librería basta con seleccionarlo y pulsar la tecla SUPR.

EDITAR EL SITIO WEB

Claris Home Page permite configurar como un sitio web (site) el conjunto de archivos que integran un proyecto (documentos HTML, imágenes, archivos multimedia, librerías, etc) para facilitar así su organización y la aplicación de determinadas funciones a todos los elementos del sitio web.

Un sitio web puede ser definido con anterioridad a la creación de las propias páginas (Menú File: New/Create New-Empty Site), o bien puede definirse a partir de un directorio que engloba las carpetas y documentos ya elaborados para un proyecto (Menú File: Open Folder as Site). El programa ofrece también la posibilidad de utilizar un asistente para la creación de sitios web.

El programa genera un archivo de definición del sitio web con la extensión.wst que se conserva en el mismo directorio, contiene la información sobre el sitio y sirve para abrir el Editor de Sitios Web (Site Editor).

Mediante el Menú Site, este editor permite crear nuevas páginas HTML dentro del sitio New Page), abrir las existentes (haciendo doble clic sobre ellas), aplicar las opciones de documento (color o imagen de fondo, color del texto y de los enlaces) a varias páginas a la vez (Document Options), ver una estadística sobre lo que ocupan las páginas web y el tiempo estimado para su descarga (Site Download Statistics), verificar el funcionamiento de los enlaces entre páginas (Verify Links and References), agrupar todos los archivos de imágenes y multimedia en una carpeta (Consolidate). Finalmente, el editor permite conservar en memoria la dirección del servidor FTP a la cual se remite el proyecto para su publicación (Upload).