Laboratorio 04

Estilos globales

En este procedimiento trabajará en estilos que afectan a todas las partes que conforman las páginas de su sitio web.

1. Bajo control de versiones cree una carpeta para alojar las hojas de estilo que afectarán a todo su sitio web, por ejemplo /css. Cree en ella una hoja de estilos, es decir, un archivo de texto con extensión .css, por ejemplo screen.css. Copie el siguiente código inicial en él. Nota: pueda que tenga que cambiar la palabra content por el identificador que haya utilizado para identificar el contenido en todas las páginas de su sitio web. El selector article#content puede escribirse mejor como #content, ya que el nombre del elemento article es superfluo, puesto que sólo un único elemento en el documento puede tener el identificador id="content" indiferentemente de su tipo. Sin embargo, se incluye aquí por claridad.

   header, footer, nav, article, section
   {
   	display: block;
   }
   
   nav
   {
   	float: left;
   	width: 20%;
   }
   
   article#content
   {
   	float: right;
   	width: 79%;
   }
   
   footer
   {
   	clear: both;
   }
   

2. Aplique la hoja de estilos a todas las páginas que conforman su sitio web. Guíese con el material de referencia del curso. Asegúrese de que el medio en que se usará la hoja de estilos sea screen y de que la ruta utilizada sea válida para todas las páginas del sitio, algo como /~a54321/css/screen.css. Sugerencia: algunos editores de texto permiten hacer este cambio en un paso utilizando una funcionalidad típicamente llamada "Buscar/reemplazar en archivos". Luego revise el efecto de aplicar la hoja de estilos con un navegador.
3. El navegador por defecto escoge una fuente con serifas, sin embargo, para pantalla resultan cargadas y difíciles de leer, por lo que son más convenientes fuentes sin serifas (sans-serif). Aplique al cuerpo del documento una familia de fuentes sin serifas (por ejemplo: Verdana, Sans, Helvetica, sans-serif). Estudie el modelo de fuente en la especificación CSS.
4. Quite el subrayado de todos los enlaces, excepto cuando el puntero del ratón pasa sobre ellos. Estudie el concepto de pseudoelementos y la propiedad text-decoration en la especificación CSS.
5. Aplique los colores que guste a su sitio web. Estudie el modelo de color y fondo para cambiar el color del texto, el color de fondo y la imagen de fondo. Por ejemplo, puede cambiar el color de los títulos para diferenciarlos del texto convencional. Si emplea una imagen de fondo, el color de fondo debe ser lo más similar posible. En cualquier caso, los ajustes en el color que realice deben permitir que el texto sea claramente legible.

Estilo del encabezado y pie del sitio

En este procedimiento trabajará en el encabezado y el pie del sitio web.

1. Haga que el encabezado del sitio tenga al menos borde inferior, y el pie tenga borde superior, para separarlos del contenido y del menú. Estudie el el modelo de caja para entender la propiedad border. Aplique diferentes colores, grosores y estilos, y finalmente decida por uno de ellos. Estudie la propiedad box-shadow en la especificación CSS3 para agregar una sombra en el borde inferior del encabezado.
2. Agregue bordes y sombra a la imagen que cumple el papel de logotipo de su sitio web. Utilice la propiedad padding para separar el borde al menos 1 píxel de la imagen.

3. Coloque el texto del encabezado a la derecha (o izquierda) del logotipo del sitio. Para ello puede emplear el siguiente truco: hacer que el relleno izquierdo (padding) del encabezado sea un poco mayor que el tamaño de la imagen logotipo; esto provocará que todo se corra hacia la derecha, incluyendo el logotipo. Luego el logotipo se "arranca" de su posicionamiento natural y se pone a flotar en el relleno izquierdo. El siguiente código muestra un ejemplo para una imagen <img id="site_logo"> de 80 píxeles de ancho:

   #site_header
   {
   	padding: 15px 0 0 90px;
   	position: relative;
   }
   
   #site_logo
   {
   	position: absolute;
   	left: -80px;
   }

4. Haga que el tamaño del texto del título del sitio sea muy prominente y agréguele una sombra. Estudie la propiedad text-shadow en la especificación CSS 3. El lema del sitio por el contrario debe tener una fuente menor, y estar poco separada del título del sitio, es decir, reduzca los márgenes entre el lema y el título del sitio.
5. Cambie el color de fondo del pie de página para distinguirlo del resto del documento (es buena idea utilizar el mismo color de fondo del encabezado del sitio). Haga que el texto esté centrado a lo ancho de la página.

Estilo del menú de navegación

1. Retire las "viñetas" de los elementos de la lista no ordenada con la propiedad list-style-type. Reduzca a gusto los márgenes izquierdos de los elementos que conforman la lista no ordenada, pero siempre mantenga algún apoyo visual para apreciar la jerarquía de secciones de su sitio web.
2. Haga que cada elemento de lista tenga borde y un color de fondo sólido (o una imagen). Provoque que cuando el puntero del ratón pase sobre el elemento de lista li, su color de fondo cambie.

Estilo del contenido del sitio

1. Aplique el mismo truco que utilizó en el logotipo del sitio web, para colocar la imagen de cada entrada de contenido a la izquierda (o derecha) del resto del texto que conforma la entrada.
2. Haga que entre dos entradas haya suficiente separación visual (margen). Si gusta puede utilizar algún borde, pero poco llamativo.

Estilo de otros medios

En este procedimiento definirá otras hojas de estilos que empleará el navegador cuando el usuario quiera imprimir una página, o cuando el visitante está interactuando con su sitio web desde un dispositivo móvil.

1. Cree otra hoja de estilos, por ejemplo, /css/print.css y asóciela a todas las páginas de su sitio web para el medio print.
2. Cree una tercera hoja de estilos, por ejemplo, /css/common.css, la cual tendrá los estilos que son comunes para todos los medios. Incluya la nueva hoja de estilos en las dos existentes (/css/screen.css y /css/print.css) utilizando la regla @import.
3. Haga que la versión para imprimir sea "amigable" con la impresora. Es decir, utilice fondos blancos, texto en negro (incluyendo títulos y enlaces), subraye los enlaces, márgenes razonables (por ejemplo 1.5cm), etc. Recuerde no reiterar código. Si una regla se debe reutilizar tanto en pantalla como en impresora, escríbala en el archivo /css/common.css. Debe al menos reutilizar tres reglas.
4. Oculte el menú de navegación del sitio en la versión para imprimir. Estudie la propiedad display.
5. Cree una última hoja de estilos para el medio handheld, la cual incluye a /css/common.css. Utilice un celular con conexión a Internet para visitar su sitio y trate de hacer que se ajuste a la pequeña pantalla del dispositivo. En especial, evite que el usuario tenga que hacer desplazamiento horizontal (horizontal scroll).

Evaluación

1. [15%] Archivos: Los estilos de todas las páginas son uniformes a lo largo de todo el sitio web. Todos los estilos están en archivos externos: screen.css, print.css y common.css. Los archivos son válidos ante el estándar CSS 3.
2. [10%] Estilos generales: Fuentes sin serifas. Enlaces subrayados únicamente cuando tienen el puntero del ratón sobre ellos. Aplica colores y fondos mientras mantiene el texto legible.
3. [25%] Encabezado del sitio: Borde inferior y sombra. Logotipo del sitio con sombra, relleno y borde. Logotipo situado a la izquierda del título y lema del sitio. Título con fuente grande y sombra. Título y lema con poco margen.
4. [5%] Pie del sitio: Borde superior. Fondo de igual color que encabezado.
5. [15%] Menú del sitio: Retirar las viñetas a cada elemento. Reducir el margen izquierdo de cada elemento. Borde y fondo de cada elemento. Fondo cambia cuando el puntero pasa sobre él.
6. [10%] Contenido: Imágenes al lado del texto de las entradas de contenido. Incrementar margen entre entradas.
7. [15%] Medio de impresión (print.css): Fondo blanco. Texto en negro. Enlaces subrayados. Márgenes de 1.5cm o más. Menú de navegación oculto.
8. [5%] Reutilización. No hay redundancia de reglas de estilo. Las comunes se encuentran en common.css.
9. [Opcional. 5%] Dispositivos móviles (handheld.css). Evita tener que hacer desplazamiento (scroll) horizontal.

Para presentar su solución, comprima su sitio web completo (preferiblemente en formato 7-Zip) y súbalo al Moodle en la asignación con título Laboratorio 04.