Writing HTML | Acerca de | FAQ | Alumnos | Tags | Lecciones | anterior | siguiente |

14. Agrupando vs Dividiendo

Objetivos

• Transformar una p·gina web en una serie de p·ginas enlazadas.
• Crear una plantilla para m™ltiples p·ginas web.
• Incorporar caracterÌsticas de navegaciÛn por el web para conectar m™ltiples p·ginas.

LecciÛn

ø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:

• IntroducciÛn
  [intro.htm]
• TerminologÌa de Volcanes
  [term.htm]
• Lugares Volc·nicos en USA
  [usa.htm]
• Lugares Volc·nicos en Marte
  [mars.htm]
• Proyectos de InvestigaciÛn
  [proj.htm]

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:

1. En primer lugar, haga una copia del archivo index.htm con el que hemos trabajado y llamele old.htm or algo parecido.
2. Ahora abra el archivo index.htm original en su editor de textos. Esta es la lecciÛn con la que hemos estado trabajando hasta ahora.
3. Vamos a usar las im·genes, la apertura y el texto del comienzo y la tabla de contenidos como contenido de nuestra p·gina principal. Para ello quitaremos las secciones que ser·n "divididas" en otras p·ginas web.

   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.

4. Ahora vaya a la secciÛn etiquetada como "En Esta LecciÛn..." Anteriormente us·bamos lnks hipertexto para saltar a anchors con nombre (p.ej. <a name="term">..</a>) en el mismo documento (vea la lecciÛn 8a). Ahora modificaremos estos links de modo que cada uno apunte a otra p·gina web (que crearemos m·s adelante).

   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>

1. En su editor de textos cree un nuevo archivo llamado temp.htm
2. En este archivo ponga el siguiente cÛdigo HTML (si lo desea puede copiarse un archivo a modo de plantilla de ejemplo):

   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

3. Ahora haga 5 copias de este archivo plantilla y efect™e los cambios apropiados para cada uno:

   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>

4. Ahora abra el antiguo index.htm (al que habÌamos llamado old.htm) en su editor de textos. Para cada uno de los nuevos archivos deber· copiar el HTML que estaba contenido en cada secciÛn y pegarlo en los nuevos archivos que acaba de crear. Note que Lugares Volc·nicos en US y Proyectos de InvestigaciÛn, ambos dos, incluyen subsecciones con encabezados <h3>...</h3>.
5. Finalmente tendr· que modificar el link en el archivo msh.htm. Previamente le habÌamos hecho volver a un anchor con nombre en la lecciÛn principal (la secciÛn Lugares Volc·nicos en USA) y ahora debe apuntar al archivo usa.htm. Abra el archivo usa.htm en su editor de textos y edite la lÌnea que dice:

     <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>

Compruebe Su Trabajo

RevisiÛn

1. øCu·les son las ventajas de muchas p·ginas web cortas frente a una ™nica y larga p·gina?
2. øQuÈ habrÌa ocurrido si no hubiÈsemos modificado el link en el archivo msh.htm?
3. øCu·les son las caracterÌsticas de navegaciÛn que hemos aÒadido a nuestra lecciÛn?

M·s InformaciÛn

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.

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.

Pr·ctica Independiente

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?

A ContinuaciÛn....

IR A.... | Õndice de Lecciones | anterior: "Tabulaciones" | siguiente: "HTML Est·ndar y Avanzado" |

URL: