Ejercicio 1.2: Diseñar la estructura del sitio Web

Mostrar

Antes de poder diseñar la estructura del sitio Web, debe realizar el Ejercicio 1.1: Crear un proyecto Web.

Un sitio Web se compone de una colección de páginas Web. Aunque una página Web incluye contenido real, como por ejemplo elementos HTML, imágenes y enlaces, un sitio Web es el diseño y la organización jerárquica del ensamblado conjunto de las páginas Web. Un sitio Web debe tener un objetivo de alto nivel (por ejemplo, suministrar un área de colecciones organizadas para listados clasificados) y cada página Web puede estar destinada a una finalidad específica para alcanzar el objetivo de alto nivel (por ejemplo, una página que busca en los listados).

La mejor forma de empezar a diseñar el sitio Web es tener en cuenta a qué las funciones debe dar soporte el sitio para alcanzar el objetivo global. En un sitio Web de anuncios clasificados, existen varias funciones que el sitio debe realizar. Por ejemplo, sabemos que los visitantes del sitio deben poder buscar en los listados, así como visualizarlos todos a la vez, y deben poder crear y editar listados nuevos.

Para crear un sitio Web que realice estas funciones, planificaremos cuatro páginas en este ejercicio y las crearemos en el ejercicio subsiguiente.


  1. En la vista Explorador de proyectos, expanda ClassifiedsTutorial.
  2. Efectúe una doble pulsación en Navegación del sitio Web en la vista Explorador de proyectos. Web Site Designer se abrirá en la vista Navegación. Con esta herramienta puede añadir, suprimir y reorganizar las páginas Web que componen el sitio Web.
  3. Al principio, en la vista Navegación no se visualiza ninguna página. Generalmente, la primera página del diseño del sitio Web es la página de presentación, o página inicial del sitio. Es la página por la que los visitantes acceden al sitio Web. Arrastre el componente Página nueva de la vista Paleta y suéltelo en la vista Navegación. Se visualizará un icono de página con el título de navegación de la página en foco.
  4. Esta página será la página inicial que visualizará todos los anuncios de la base de datos. Escriba Ver todos los clasificados como título de navegación de la página. Más adelante aprenderá a utilizar el título de navegación como etiqueta de página a efectos de navegación por el sitio.
  5. Para que los visitantes del sitio puedan poner sus propios listados, necesitan una página para crear listados nuevos. Añada un segundo icono de página arrastrando el componente Página nueva a la vista Navegación inmediatamente debajo del icono de página Ver todos los clasificados
  6. Dé a la página nueva el nombre Colocar un listado. Observe que el icono de página nueva se visualiza debajo del icono de página Ver todos los clasificados y se conecta con una línea. Esto significa que las páginas Colocar un listado y Ver todos los clasificados tienen una relación padre-hijo.
  7. También es necesaria una página en la que los visitantes puedan editar o suprimir listados existentes. Por ejemplo, si un visitante ha añadido un listado correspondiente a una bicicleta y lo ha colocado durante un período largo sin obtener respuesta, puede que el vendedor desee bajar el precio. Añada otro icono de página junto a la página Colocar un listado y denomínelo Actualizar listado. Observe que este nuevo icono de página es hermano de Colocar un listado y también es hijo de Ver todos los clasificados.
  8. A continuación, el sitio Web necesita una función de búsqueda para que los visitantes puedan buscar entre los listados existentes para localizar los que les interesan. Para añadir una página destinada a visualizar los resultados de búsqueda, coloque otro icono de página junto a la página Actualizar listado y denomínelo Listados filtrados.
    Nota: Si accidentalmente coloca una página en una ubicación errónea o desea reorganizar la estructura de las páginas, puede arrastrar los iconos de página en cualquier momento para reorganizar el sitio.
  9. Pulse Control+S para guardar el diseño del sitio. La vista Navegación debe tener este aspecto:
Navegación de sitio Web para el proyecto ClassifiedsTutorial.

Observe que existe una fila de pequeños iconos a lo largo de la parte inferior de cada icono de página. El primero icono, que aún no es visible, representa los archivos reales asociados con el icono y aparecerán una vez creados dichos archivos. Si crea un archivo JSP, el icono es es rombo azul (); si crea un archivo HTML, el icono es un conjunto de corchetes ().El segundo () y tercer () iconos son visibles, indicando que, por omisión, todas las páginas están establecidas para aparecer en la navegación y en los mapas del sitio, respectivamente. El cuarto icono (), que todavía no es visible, se muestra después de asociar un icono de página con un archivo real que no contiene una navegación de sitio Web. El icono (), que todavía no está visible en la parte superior de la página, representa la raíz de navegación. Aprenderá más acerca de estos iconos y de los demás aspectos de la visualización de iconos de página a medida que trabaje en este módulo.

Una vez creada la estructura general del sitio Web, está preparado para empezar el Ejercicio 1.3: Llenar el sitio Web con páginas Web.

Condiciones de uso | Comentarios

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