Ejercicio 1.6: Realizar la navegación dinámica del sitio Web

Mostrar

Antes de empezar a realizar la navegación dinámica del sitio Web, debe realizar el Ejercicio 1.5: Aplicar una plantilla de página al sitio Web.

Cuando ha diseñado la estructura del sitio Web en el Ejercicio 1.2, ha tomado algunas decisiones acerca de las relaciones entre las páginas. Recuerde la forma en que ha diseñado los iconos de página con líneas que los conectan:

Estructura del sitio.

Existen varias formas diferentes de relacionar una página con otra. Estas relaciones se conocen como relaciones de familia. En este ejemplo, Ver todos los clasificados en la página padre, y las otras tres páginas son sus páginas hijas. Estas tres páginas son hermanas entre sí.

Estas relaciones de página se utilizan para generar enlaces de navegación, como barras y pestañas de navegación. Cada página crea automáticamente sus enlaces de navegación en función de las páginas con las que se relaciona. Este proceso se denomina navegación dinámica.

Comprobar la estructura del sitio

Es necesario asegurarse de que la estructura del sitio se ha configurado para especificar qué páginas deben incluirse en la navegación. En Web Site Designer puede especificar qué páginas deben incluirse como enlaces en la navegación dinámica, así como algunas otras opciones de navegación que se basan en la estructura del sitio y en las relaciones de página. Esto resulta de utilidad si tiene páginas que deben incluirse en el sitio, pero no tiene sentido como parte de las características de la navegación. Por ejemplo, puede que tenga una página de error que aparece cuando el sitio encuentra un problema; sin embargo, no desea que la página de error se muestre como parte de la navegación.
  1. Efectúe una doble pulsación en Navegación del sitio Web en la vista Explorador de proyectos para ver la estructura del sitio.
  2. Puede observar que todas las páginas tienen seleccionada por omisión la opción Mostrar en navegación, ya que el icono Mostrar en navegación () es visible. Esta opción debe seleccionarse en cada página que deba aparecer en una barra de navegación. También puede inhabilitar una página para que no aparezca en la navegación. Es necesario inhabilitar de la navegación la página de resultados de búsqueda, Listados filtrados, ya que se enviará allí al usuario desde la opción de búsqueda de la página Ver todos los clasificados.
    1. Pulse el icono de página Listados filtrados con el botón derecho del ratón.
    2. Seleccione Navegación > Mostrar en navegación para deseleccionarlo. Ahora, el icono Mostrar en navegación no debe estar disponible en el icono de página Listados filtrados.
  3. También es necesario inhabilitar de la navegación la página Actualizar listado, ya que se enviará allí al usuario desde la opción de actualización de la página Ver todos los clasificados. Pulse el icono de página Actualizar listado con el botón derecho del ratón. A continuación, seleccione Navegación > Mostrar en navegación para deseleccionarlo. Ahora, el icono Mostrar en navegación no debe estar disponible en el icono de página Actualizar listado.
  4. Debe establecer una Raíz de navegación para el sitio. La página superior, generalmente la primera página creada en el sitio, se establece con frecuencia como Raíz de navegación. Pulse el icono de página Ver todos los clasificados con el botón derecho del ratón y pulse Navegación > Establecer raíz de navegación. El icono () en  la parte superior del icono de página es el icono Raíz. La raíz de navegación es importante, ya que determina los niveles de enlace utilizados al generar la navegación del sitio Web, como por ejemplo las barras de navegación.
    Nota: Las opciones por omisión establecidas por la navegación del sitio para las páginas Ver todos los clasificados y Colocar un listado deben permanecer seleccionadas.
  5. Pulse Control+S para guardar sus cambios.

Añadir un componente de navegación a la plantilla de página

  1. Vuelva a la plantilla de página efectuando una doble pulsación sobre el archivo template.jtpl en la vista Explorador de proyectos.
  2. En la vista Paleta, pulse Navegación del sitio Web para abrir la bandeja que contiene los componentes de navegación. Existen muchos tipos diferentes de componentes de navegación dinámica que pueden añadirse al sitio Web, incluido un mapa del sitio. El componente más básico es la barra horizontal (Horizontal Bar), que comprende una fila de enlaces basados en la estructura del sitio.
  3. Aunque sabemos que es necesaria una fila de enlaces en la parte superior de cada página que permita a los usuarios acceder a las demás páginas del sitio, también deseamos añadir elementos visuales de interés a la navegación. Arrastre el componente Pestañas horizontales a la segunda fila de la plantilla de página; este componente crea los enlaces dinámicos en una fila con pestañas. Se abrirá el asistente Insertar pestañas horizontales.
  4. Acepte el valor por omisión para utilizar un componente de navegación de Ejemplo.
  5. Acepte el valor por omisión de imágenes Miniatura (horizontal-tab01.jsp) y observe que el campo Nombre de archivo se llena automáticamente. Pulse Siguiente.
  6. Seleccione el tipo de enlaces que deban aparecer en la barra de navegación en función de las relaciones de página. Para especificar que la página superior del sitio y todas las hermanas e hijas de cada página aparecerán en la navegación, asegúrese de seleccionar las páginas siguientes: Tenga en cuenta que, si selecciona enlaces anteriores o siguientes, puede suministrar una etiqueta para que aparezca en dichos enlaces, como por ejemplo Atrás y Adelante.
  7. Pulse Siguiente. Acepte los valores por omisión en la página del asistente Valores opcionales para archivo de especificación. Si desea generar los enlaces en tiempo de ejecución utilizando códigos personalizados JSP, seleccionará Navegación JSP. Si desea generar los enlaces en tiempo de diseño utilizando los códigos personalizados de HTML, seleccione Navegación HTML. Si está añadiendo un código personalizado HTML a una página JSP Faces, marque el recuadro de selección Utilizar enlace Faces para crear un código outputLink para Faces.
  8. Pulse Finalizar. El icono Componente de navegación () se visualiza en la plantilla de página.
  9. Guarde los cambios realizados en la plantilla de página. Cuando guarde la plantilla de página, los cambios realizados en la navegación dinámica se aplicarán a todas las páginas del sitio.
  10. Efectúe una doble pulsación en Navegación del sitio Web en la vista Explorador de proyectos para ver la estructura del sitio. Puesto que las páginas Web tienen un componente de navegación, el icono () que indica que la página no tiene una navegación de sitio Web no aparece en el icono de página.
    Navegación de Sitio Web con componente de navegación.

El componente de navegación añade varios archivos al proyecto Web. Después de guardar la plantilla, observe que la vista Explorador de proyectos contiene un nuevo archivo .jsp y varios archivos .gif. Estos archivos visualizan las pestañas de las páginas:

Explorador de proyectos con navegación

Previsualizar la navegación

Si desea ver un ejemplo del aspecto de la navegación en las páginas reales en lugar de en la plantilla, efectúe una doble pulsación en el archivo all_records.jsp en la vista Explorador de proyectos y pulse la pestaña Vista previa de Page Designer. Podrá observar que los nombres que aparecen en las pestañas son las etiquetas de navegación de las páginas, en lugar de los nombres de archivo. Observe también que la página actual se visualiza como pestaña resaltada; al navegar por el sitio, la página actual será siempre la pestaña resaltada en la parte superior.

Consejo: Si cambia la estructura del sitio en la vista Navegación, los enlaces de navegación dinámica se actualizarán automáticamente para reflejar la estructura nueva.

Pestañas de navegación

Una vez configurada la navegación dinámica, está preparado para empezar el Ejercicio 1.7: Previsualizar el sitio Web.

Condiciones de uso | Comentarios

(C) Copyright IBM Corporation 2000, 2005. Reservados todos los derechos.