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

Laboratorio 03

Este laboratorio pretende introducir al estudiante en los conceptos básicos de las hojas de estilos CSS, y en las propiedades de fuente, color y el modelo de caja. En la primera parte del laboratorio el estudiante debe realizar pasos dirigidos y en la segunda tendrá libertad para aplicar formato a un documento creativamente.

Materiales

Procedimiento

Parte 1

Dele estilo de impresión a su curriculum vitae utilizando una hoja de estilos externa. Importante: Todas las reglas de estilo que escriba deben aparecer en hojas de estilo .css, ninguna dentro de su documento XHTML.

  1. Con un editor de texto o un ambiente de desarrollo web, cree una hoja de estilos vacía en la misma carpeta donde se encuentra su currículo de vida. Dele el nombre que guste. Para efectos de este enunciado se usará print.css a modo de ejemplo.
  2. Aplique su nueva hoja de estilos a su currículo. Guíese con el material de referencia del curso.
  3. Haga que el margen superior e inferior del cuerpo del documento sea de 1cm, mientras que el derecho e izquierdo de 2cm. Estudie en la especificación CSS cómo hacer esto en una única asignación y con sólo dos valores.
  4. Haga que el encabezado 1 tenga un borde inferior sólido de 1 píxel. Haga que los encabezados 2 tengan más espacio vertical con el elemento que está arriba de ellos, al menos dos veces el tamaño de la fuente que se esté usando. Estudie el el modelo de caja para entender estas propiedades y los valores de longitud.
  5. Haga que el párrafo que dice "Currículo de vida" y la fecha, esté en una fuente 85% del tamaño de la fuente de su elemento padre; esté alineado a la derecha y que no tenga separaciones superior ni inferior. Recuerde que todas las reglas de estilo deben estar fuera de su documento XHTML.
  6. Agregue un borde del grosor de su agrado a los elementos de imagen. Experimente lo mismo con el relleno (padding) de las imágenes. Finalmente deje borde en su fotografía pasaporte y no en la imagen de su línea de vida.
  7. Haga que los enlaces sean negros en lugar de azules y mantenga el subrayado. Recuerde que la hoja de estilos está optimizada para impresión.
  8. Agregue borde a todas las celdas de las tablas de su currículo. Nótese que el estilo del borde de las tablas o las celdas es none por defecto, y debe cambiarse a algún valor de la enumeración border-style para que se haga visible.
  9. Resalte los encabezados de las tablas con fondo negro y textos blancos.
  10. Haga desaparecer el elemento caption de las tablas con la propiedad display.

Parte 2

En la parte 1 usted creó una forma de presentar su documento cuando va a ser impreso en papel o PDF. En esta sección usted creará una hoja de estilos para impresionar al visitante web que lee su currículo de vida.

  1. Cree otra hoja de estilos vacía, por ejemplo, screen.css y asóciela a su documento XHTML cuando el medio es screen. Haga que la hoja de estilos print.css que hizo en la parte 1, sea usada por el navegador cuando el medio es la impresora.
  2. Para formateo en pantalla use una fuente sin serifas de todo el documento y de un tamaño mayor que el por defecto del navegador.
  3. Haga el que fondo de la página sea negro, y el color del texto muy claro.
  4. Utilice colores diferentes para los encabezados del documento (por ejemplo, verde claro); para los encabezados de las tablas (amarillo claro); y para los enlaces (celeste claro).
  5. Quite el subrayado de los enlaces, excepto cuando el puntero del ratón pasa sobre ellos. Estudie el concepto de pseudoelementos y la propiedad text-decoration, declarados en el capítulo de "Selectors" y "Text" respectivamente de la especificación CSS.
  6. Recorra el procedimiento de la Parte 1 y aplique los estilos que guste a la versión de pantalla. Debe al menos aplicar dos estilos idénticos.
  7. Evite redundancia de código. Las reglas que sean comunes para ambas hojas de estilo, muévalas a una tercera hoja (por ejemplo, common.css). Incluya esta nueva hoja en sus dos anteriores. Estudie la regla @import para satisfacer esta necesidad.
  8. Estudie otras propiedades en la especificación CSS y aplíquelos creativamente a su currículo de vida para hacerlo más atractivo. A cada una de estas reglas escriba un comentario indicando la intención con que la incluyó, antecedido por la palabra extra:, para distinguirlas de las otras que haya realizado o reemplazado en el laboratorio. Por ejemplo: /* extra: produce un efecto de llamas de fuego en el fondo del documento */.
  9. [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 Tarea06.