¿Es usted un arrejuntador o un divisor? ¿Nada de nada? ¿Las dos cosas?
A la hora de organizar la información a veces es mejor "unir" cosas; otras veces es mejor "separarlas". Hacer scroll (desplazarse por una página de arriba a abajo) por una página larga es a veces tedioso. Páginas largas y únicas tardan más en ser cargadas con conexiones lentas comparándolo con páginas pequeñas.
En muchos casos es posible identificar "puntos lógicos" donde "dividir" la información en trozos. No obstante, no hay ninguna "fórmula mágica" y sí variedad de opiniones. Debe sopesar si usar una larga página con puntos a lo largo de su contenido frente a múltiples páginas que provoquen que el lector se sumerja en un mundo de opciones y subopciones antes de llegar a la deseada información. También es importante construir links hipertextos que ayuden a navegar por su web como incluir pistas visuales acerca de su ubicación en el web.
Hasta ahora hemos construido una página con un link a una más pequeña. En la lección 8d habíamos creado una lista de links que funcionan como una tabla de contenidos conectándolos a anchors con nombre de diferentes secciones en nuestra Web de Volcanes. Esa misma división podría ser utilizada como ruptura de una larga página en varias sub-páginas.
Hasta el momento habíamos creado un subdirectorio llamado volc que contiene nuestros dos archivos HTML (index.htm, la lección, y msh.htm, una segunda página web). También teníamos un segundo directorio llamado pictures que contiene nuestros archivos gráficos.
Ahora dividiremos la solitaria página sobre volcanes en una serie de páginas web, enlazadas como se muestra en el diagrama.
El punto de partida es un índice principal/página de portada, index.htm que tiene links apuntando a cada parte de nuestra lección:
NOTA: Para completar esta lección tendremos que crear unos cuantos nuevos archivos y hacer varias veces copy'n'paste desde los archivos con los que ha estado trabajando. Asegúrese de que sabe manejar varias aplicaciones y ventanas de documento en su ordenador.
La primera cosa que vamos a hacer es crear el nuevo archivo index.htm, que será la página principal de nuestra lección sobre volcanes:
Borre las secciones desde la Introducción hasta Referencias, es decir, todo entre:
<hr> <h2><a name="intro">Introducción</a></h2> Un <b>volcán</b> es un lugar donde el magma, o roca caliente y derretida del interior del planeta, alcanza la superficie. :y
: <dt>Lipman, P.W. and Mullineaux (eds). (1981) <dd><I>The 1980 Eruptions of Mount St. Helens, Washington.</I> U.S. Geological Survey Professional Paper 1250. </dl>Quizás quiera comparar su archivo HTML con un ejemplo de cómo debería aparecer en este punto.
Busque el texto que dice:
<B>En Esta Lección...</B> <ul><i> <li><A HREF="#intro">Introducción</A> <li><A HREF="#term">Terminología de Volcanes</A> <li><A HREF="#usa">Lugares Volcánicos en USA</A> <li><A HREF="#mars">Lugares Volcánicos en Marte</A> <li><A HREF="#project">Proyectos de Investigación</A></i> </ul>y edítela de esta forma:
<B>En Esta Lección...</B> <ul><i> <li><A HREF="intro.htm">Introducción</A> <li><A HREF="term.htm">Terminología de Volcanes</A> <li><A HREF="usa.htm">Lugares Volcánicos en USA</A> <li><A HREF="mars.htm">Lugares Volcánicos en Marte</A> <li><A HREF="proj.htm">Proyectos de Investigación</A></i> </ul>Compare su archivo HTML con un ejemplo de cómo debería aparecer en este punto.
NOTA: Asegúrese de haber entendido la diferencia entre un link escrito:<a href="#quest">ir a las preguntas</a>y otro escrito:<a href="quest.htm">ir a las preguntas</a>
| HTML | Notas |
|---|---|
<html> <head> <title>XXXXXXXX</title> </head> <body> |
HEAD: En la sección HEAD de cada documento, XXXXXXXX será el nombre de dicha sección. |
<h5>Web de Volcanes / <a href="index.htm">Indice</a> / <a href="xxxx.htm">anterior</a> / <a href="xxxx.htm">siguiente</a></h5> |
NAVEGACION: En la parte superior de cada página usaremos un pequeño encabezado (h=5) para crear links de navegación. Indice apuntará hacia la página principal; anterior y siguiente a las páginas precedente y posterior. Deberá incluir los nombres de archivo apropiados para los xxxx.htm. Note cómo esto provee una apariencia visual común a cada una de nuestra páginas. |
<h2>XXXXXXXX</h2> : : : |
ENCABEZADO: Use un header=2 para el título de la página. |
<hr> <address> <b><a href="index.htm"> Escribiendo HTML</a> : XXXXXXXX </b><p> creada por Alberto Estrada, <a href="mailto:aestrada@pele.bigu.edu"> aestrada@pele.bigu.edu</a> <br> Estudios Volcánicos, <a href="http://www.bigu.edu/"> Big University</a><p> <tt>última modificación: 1 de Abril de 1995</tt> </address> <p> |
PIE DE PAGINA Y DIRECCION: Note cómo el pie de página se establece de modo que indique el nombre de la página web principal (con un link a ella) y una línea de texto que indica el nombre de la sección actual XXXXXXXX. Colocar el nombre de la página aquí añade otra importante referencia visual a la ubicación real de la página en la estructura del web que hemos creado. |
<tt>URL: http://www.bigu.edu/web/xxxxxxxx.htm </tt> <p <body> </html> |
URL: Asegúrese de modificar la línea que indica la URL del documento y su nombre de archivo xxxxxxxx.htm |
| Nombre de Archivo | Sección | Notas |
|---|---|---|
| intro.htm | Introducción | Como esta es la primera sección, quite la línea de la sección de navegación: <a href="xxxx.htm">anterior</a> |
| term.htm | Terminología de Volcanes | |
| usa.htm | Lugares Volcánicos en USA | |
| mars.htm | Lugares Volcánicos en Marte | |
| proj.htm | Proyectos de Investigación | Como esta es la última sección, quite la línea de la sección de navegación: <a href="xxxx.htm">siguiente</a> |
<a href="usa.htm"> <img src="../pictures/left.gif" alt="** "> Volver a la <i>Web de Volcanes</i></a>Para ser consistentes debería también cambiar el pie de página a:
<hr> <address> <b><a href="index.htm"> Web de Volcanes</a> : <a href="usa.htm"> Lugares Volcánicos en USA</A> : Monte Sta. Elena</B> <p> creada por Alberto Estrada, <a href="mailto:aestrada@pele.bigu.edu"> aestrada@pele.bigu.edu</a><br> Estudios Volcánicos, <a href="http://www.bigu.edu/"> Big University</A><p> <tt>última modificación: 1 de Abril de 1995</tt> </address> <p> <tt>URL: http://www.bigu.edu/web/msh.htm</tt> <body> </html>
En la primavera de 1980 la mayoría de la gente que vivía en la vecindad del Monte Sta. Elena tuvo que prestar atención a las alarmas de los científicos acerca de una inminente erupción volcánica. No obstante, algunos persistieron en quedarse en sus casas y murieron trágicamente ese día 18 de Mayo. Ese mismo año los sismógrafos alertaron a los científicos sobre un posible suceso en Long Valley, California, y se ordenó una evacuación generalizada al área de Mammoth. Sin embargo no ocurrió nada, y los residentes se enfurecieron por lo que entendieron una falsa alarma que causó grandes pérdidas económicas.con
En la primavera de 1980 la mayoría de la gente que vivía en la vecindad del Monte Sta. Elena tuvo que prestar atención a las alarmas de los científicos acerca de una inminente erupción volcánica (Haga click aquí para ver una imagen del Monte Sta. Elena). No obstante, algunos persistieron en quedarse en sus casas y murieron trágicamente ese día 18 de Mayo. Ese mismo año los sismógrafos alertaron a los científicos sobre un posible suceso en Long Valley, California, y se ordenó una evacuación generalizada al área de Mammoth (Haga click aquí para ver un sismógrafo). Sin embargo no ocurrió nada, y los residentes se enfurecieron por lo que entendieron una falsa alarma que causó grandes pérdidas económicas.Las líneas "Haga click..." no sólo interrumpen el flujo normal del texto sino que el texto del link aquí no está relacionado con el elemento. Como sugerencia evite escribir líneas como "haga click aquí para volver a la página principal". Es mejor que escriba un link limpio y sencillo, por ejemplo <a href="home.htm">Página Principal</a>. ¡El hecho de hacer "click" es inherente al uso de un web Browser!
Ahora, pídales a algunos colegas y/o amigos que miren sus páginas. ¿Las prefieren juntas o separadas? ¿Pueden navegar fácilmente por toda la información de su web?
El enlace con el MCLI es Alan Levine --}
Comentarios a levine@maricopa.edu
Traducido al español por agma@usa.net
URL: