Universidad de Costa Rica
Escuela de Ciencias de la Computación e Informática
CI-2413 Desarrollo de aplicaciones web
Profesor: Jeisson Hidalgo Céspedes
27-Setiembre-2011

Laboratorio 05

Este laboratorio pretende ayudar al estudiante a crear un pequeño sitio web personal, cuya apariencia es uniforme utilizando hojas de estilo CSS. La navegabilidad entre los distintos recursos del sitio debe ser construida sin redundar código. Finalmente el sitio web debe ser publicado para que sea accesible a través del protocolo HTTP.

Materiales

Procedimiento

Primero se debe definir la estructura del sitio y el diseño de las páginas que lo componen. Luego creará la página principal, una sección de aficiones en la que deberá reutilizar código, otra sección para las tareas del curso. Finalmente publicará su sitio en un servidor web disponible al mundo. Todos los documentos web que cree deben ser de tipo XHTML 1.0 strict y válidos.

Parte 1. Estructura y diseño del sitio web

  1. Una de las primeras actividades que se debe realizar a la hora de crear un sitio web es definir su estructura, algo similar a lo que se llama "mapa del sitio". Elabore un bosquejo de la estructura que le gustaría que su sitio web personal tenga. He aquí un ejemplo: 
    index.html
encabezado.html
menu.html
css/
   imprimir.css
   pantalla.css
   comun.css
img/
autor/
   curriculo.html
   curriculo.css
   foto.jpg
   linea_vida.svg
aficiones/
   ciclismo.html
   videojuegos.html
   musica.html
computacion/
   appweb/
      index.html
      universidad/
         index.html
         tarea1.xml
         tarea1.css
      estadisticas/
         index.html
   agentweb/
      index.jsp

  2. En una hoja de papel haga un bosquejo del diseño (estilo) general que usted quiere tener en cada página de su sitio personal. Los siguientes son dos ejemplos:

    Diseños de página propuestos

Parte 2. La página principal

  1. Cree un documento de tipo XHTML 1.0 strict con nombre index.html como página principal de su sitio web en una carpeta vacía, la cual será la raíz de su sitio personal. En este laboratorio se le hará referencia a esta carpeta como /, y por ende su página principal será /index.html. Asegúrese como siempre de usar un título adecuado para el documento web.
  2. En el cuerpo (body) de su página principal /index.html, cree una división (div) para cada una de las secciones que componen su diseño, por ejemplo: encabezado, menú y contenido.
  3. Escriba el contenido de cada una de las secciones de su página principal. Por ejemplo:
    1. Encabezado. Agregue una imagen que identifique su sitio. Puede ser algo a lo que es muy aficionado/a, una fotografía suya, o una ilustración vectorial. Las compañías suelen usar el logotipo de la empresa en este lugar. Guarde esta imagen en una subcarpeta /img. Luego escriba su nombre completo, a modo de sugerencia, en un título 1. Finalmente, incluya un lema; puede ser una frase célebre suya o el texto "Página personal".
    2. Menú. En una lista no ordenada, agregue una entrada para cada una de las partes que componen su sitio web, por ejemplo: Inicio, Aficiones, Computación y Autor. Convierta al texto "Inicio" en un enlace hacia "/". Para poder probar esto, debe montar su sitio en un servidor web, sea local o remoto. De lo contrario deberá usar /index.html. ¿Cuáles son las ventajas y desventajas de cada uno de estos destinos?.
    3. Contenido. Puede proveer cualquier texto dándole la bienvenida al visitante, presentándose a usted mismo, y darle un vistazo rápido de las partes que componen su sitio web. Para efectos de este laboratorio, esto último es obligatorio y debe proveer una imagen y un párrafo por cada una de dichas partes, por ejemplo: Aficiones, Computación y Autor. Las imágenes pueden ser fotografías o ilustraciones, pero deben mantener la uniformidad (apariencia, tamaño, origen) (sugerencia: capture fotografías con una cámara digital y edítelas para que ocupen el menor ancho de banda pero sin verse mal, o bien haga ilustraciones vectoriales). El texto adyacente debe incluir enlaces hacia las partes respectivas del sitio, y no de la forma "pinche aquí".
  4. Aplique estilo a cada una de las secciones de su página principal:
    1. Cree una subcarpeta para almacenar hojas de estilo comunes a todo el sitio web, por ejemplo: /css. En ella cree una hoja de estilos para uso en pantalla, como /css/pantalla.css. Aplique esta hoja de estilos a su página principal /index.html.
    2. Escriba estilos en /css/pantalla.css para que las secciones de encabezado y menú aparezcan en las posiciones que usted escogió en su diseño.
    3. Encabezado. Con estilos controle la ubicación del logotipo del sitio para que aparezca en una posición agradable, por ejemplo, a la izquierda de su nombre. Ubique también el lema del sitio.
    4. Menú. Use los estilos CSS para deshabilitar los "puntos" que el navegador asume para los elementos de lista, y hágalos más prominentes de algún modo (fuentes más grandes, fondos sólidos, bordes, lo que quiera). Haga que cuando el puntero del ratón pasa sobre un ítem del menú, se resalte su fondo. Tenga cuidado de no afectar otras listas que hayan en su sitio web.
    5. Contenido. Con estilos CSS haga que las imágenes estén a la izquierda o derecha de sus párrafos respectivos para ahorrar espacio vertical. Haga que los enlaces se resalten cuando el puntero del ratón pasa sobre ellos.
    6. Aplique otros estilos a los elementos de cada sección hasta que adquieran la apariencia que usted desea. Por ejemplo: fuentes, colores, imágenes en el fondo, etc.

Parte 3. Aficiones

  1. Cree una carpeta /aficiones para almacenar los documentos que componen esta sección de su sitio web. Haga que la segunda entrada del menú del sitio (en su archivo /index.html) sea un enlace apuntando hacia esta carpeta.
  2. Cree una página de índice para la sección de aficiones: /aficiones/index.html, también de tipo XHTML 1.0 Strict. Esta página debe mantener el diseño de su sitio web, y por ende, debe incluir el encabezado y el menú exactamente igual a las otras páginas que componen su sitio. La única diferencia es la sección de contenido de dicha página.
  3. Investigue mecanismos para incluir el encabezado y menú del sitio en cada página que lo compone. Compare las ventajas y desventajas de al menos los siguientes:
    1. Redundancia de código.
    2. Uso del elemento object.
    3. Programación en el cliente: JavaScript.
    4. Server side includes.
    5. Programación en el servidor: CGI, PHP, etc.
    Si hace redundancia de código, será un hastío cuando quiera hacer una modificación en una de estas divisiones, por ejemplo, cuando quiera agregar una nueva sección al menú de su sitio web. Para este laboratorio debe utilizar alguna de las anteriores (excepto la primera). El resto de este procedimiento asume la segunda. Estudie el elemento object en la especificación HTML 4.01, para incluir documentos web dentro de otros documentos.
  4. Extraiga del /index.html el encabezado de su sitio a un archivo externo /encabezado.html, y el código del menú a un archivo externo /menu.html. Incluya estos archivos con un elemento object tanto en el índice del sitio /index.html como el índice de las aficiones /aficiones/index.html.
  5. Ajuste los estilos CSS para que se apliquen al cambio anterior y sus documentos se vean adecuadamente.
  6. Complete el contenido de la página /aficiones/index.html, haciendo entradas a cada una de las aficiones que quiera publicar en su sitio personal, como lo hizo en el índice del sitio. Recuerde utilizar fotografías o ilustraciones.
  7. Por cada afición cree una página XHTML 1.0 strict que reutilice el encabezado y el menú del sitio. Llene el contenido de dicha página con detalles de su afición con el fin de araer otros seguidores. Incluya fotografías, en qué forma ejerce su afición, o lo que guste.
  8. Modifique el menú principal del sitio /menu.html para subdividir el ítem "Aficiones" en otra lista no ordenada, cuyos ítemes son enlaces hacia las aficiones que acaba de crear. Aplique estilos para que la sublista se vea diferenciada y con menor pominencia. Al modificar el menú, todo el sitio debería ver el cambio de inmediato.

Parte 4. Tareas del curso

  1. Repita el procedimiento de la Parte 3 para crear una sección que contenga las tareas y laboratorios que haya realizado durante el curso. No es necesario que cree un achivo .html para cada tarea, basta con que los referencie desde un index.html para el curso.
  2. Si desea publicar en su página personal asignaciones hechas en otros cursos, puede hacerlo también. En tal caso, agregue una entrada a un submenú para cada curso. No es necesario incluir una entrada del menú por cada tarea que haya hecho.
  3. Agregue una entrada "Autor" al menú principal y enlace su currículo de vida.
  4. Asegúrese de que los estilos del sitio completo sean uniformes, es decir, que las tareas se ajusten a ellos también (a excepción del documento XML de la base de datos Universidad y su DTD).

Parte 5. Publicación del sitio

  1. Si no dispone de algún servicio de alojamiento web, cree uno gratuito. Puede fundamentar su decisión utilizando el buscador Free Web Hosts. Luego "suba" los archivos a dicho servidor.
  2. Establezca un icono para los favoritos en su sitio web. Revise el material de referencia del curso para hacer esto. Asegúrese de que el navegador lo utilice en la barra de direcciones, en la respetiva pestaña o en los favoritos.
  3. Estudie la implementación actual de los navegadores de los estilos CSS 3 (por ejemplo, en la Wikipedia). Escoja dos estilos que sean ampliamente implementados y aplíquelos en sus hojas de estilo. El cambio debería impactar a todo el sitio de golpe.
  4. [5%] Asegúrese de que los documentos web y las hojas de estilo que creó sean válidos (puede ignorar los mensajes de warning que genera el validador sobre los estilos).

Evaluación

Los porcentajes entre corchetes que aparecen en el Procedimiento indican el peso de cada actividad en la evaluación.

Para presentar su proyecto, envíe el enlace hacia su sitio publicado al profesor mediante correo electrónico. Además comprima su sitio web y súbalo a la plataforma educativa (Moodle) de la ECCI, en la asignación con título Proyecto01.