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
23-Setiembre-2011

Laboratorio 04

Este laboratorio continúa el trabajo del laboratorio 03, guiando al estudiante a aplicar estilos del modelo de formateo visual a algunos elementos de su currículo de vida.

Materiales

Procedimiento

Reubique algunas secciones de su currículo de vida utilizando el modelo de formato visual de CSS.

  1. Para reubicar varios elementos debe agruparlos. Divida su currículo en las siguientes grandes secciones empleando elementos div, cada una de las cuales debe estar identificada con un atributo id:
    1. Todo. Es común crear un único div que contenga todo el documento, de tal forma que el cuerpo (body) controla el fondo y tiene libertad para crecer de acuerdo al tamaño de la ventana, y el div global sirve para evitar que el contenido total se contraiga o expanda tanto que desfigure el diseño.
      1. Foto pasaporte.
      2. Título principal. Incluye su nombre y el párrafo "currículo de vida" con fecha.
      3. Información personal.
      4. Línea de tiempo.
      5. Contenido. Subdivídala en las secciones de contenido que haya creado, por ejemplo:
        • Educación formal.
        • Experiencia laboral.
        • Intereses y habilidades.
        • Etc.
    Consejo: agregue un comentario en cada etiqueta de cierre </div> indicando el nombre de la sección que está cerrando.
  2. Si quiere evitar que el ancho de todo el contenido se desproporcione, mueva las propiedades del margen del elemento body al div que contiene todo. Establezca el porcentaje que usted quiere que el contenido total ocupe del elemento padre body, por ejemplo: width: 90%. Para que el navegador centre el contenido total en el cuerpo del documento, debe asignar auto a los márgenes izquierdo y derecho. Para fijar el tamaño mínimo o máximo que el contenido total pueda reducirse o crecer, asigne las propiedades min-width o max-width con un valor absoluto (como centímetros) o relativo (como pixeles, tamaño de fuente o porcentajes).
  3. Con reglas de estilo CSS posicione su foto pasaporte alineada a la derecha exactamente encima del párrafo que contiene el texto "Currículo de vida" y la fecha. La imagen debe quedar unos pixeles sobre el borde inferior del título que lleva su nombre. Si la ventana del navegador cambia de tamaño, la imagen debe conservar su posición. Investigue en la especificación CSS cómo hacer esto.
  4. Con estilos CSS posicione la sección de Información personal a la derecha de la sección de Contenido, la cual debe desplazarse (scroll) con el resto del documento. La sección de contenido y la de información personal deben estar una al lado de la otra, como si estuvieran en columnas. Debe estar separadas un centímetro y si gusta puede dibujar una línea vertical en medio de esta separación.
  5. Haga que cada término de la sección Información personal (Cédula, Edad, Estado civil, etc.) aparezca en negritas versales, y tengan una separación con el elemento superior de 85% el tamaño de la fuente. Usando estilos inserte dos puntos después de cada término. Quite el espaciado que el navegador asigna por defecto a la definición de cada término. Haga que todo el texto de la sección Información personal esté alineado a la derecha.
  6. [5%] Asegúrese de que su documento XHTML y las hojas de estilo que creó sean válidas (puede ignorar los mensajes de warning que genera el validador).

Evaluación

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

Comprima su archivo XHTML, las imágenes que haya usado y las hojas de estilo. Súbalos a la plataforma educativa (Moodle) de la ECCI, en la asignación con título Tarea07.