Proyecto: CSS: maquetación y estilos alternativos

Resumen

Aprender el lenguaje de estilos CSS. Aprender a emplear estilos alternativos en una página web. Aprender a crear un estilo para la versión impresa de una página web.

Contenido

  1. Objetivos
  2. ¿Qué tengo que hacer?
  3. ¿Cómo lo hago?
  4. Recomendaciones
  5. Recursos

Objetivos


¿Qué tengo que hacer?

Según el Diccionario de la Lengua Española de la Real Academia Española, maquetar es Hacer la maqueta de una publicación que se va a imprimir. Si buscamos maqueta, obtenemos varias acepciones y una de ellas dice Boceto previo de la composición de un texto que se va a publicar, usado para determinar sus características definitivas.

En el desarrollo de las páginas web, se entiende por maquetación a la acción de distribuir o posicionar los distintos elementos que queremos que aparezcan en una página web.

En esta práctica tienes que crear un estilo alternativo al que creaste en la práctica anterior. En este estilo tienes que maquetar la página web para que los elementos que contiene aparezcan en las posiciones adecuadas. En especial, haz una correcta maquetación de los controles de los formularios para que aparezcan alineados.

Intenta que el diseño sea fluido (evita trabajar con tamaños fijos) para que se adapte correctamente a distintas resoluciones de pantalla.

Además, también tienes que lograr que el sitio web se imprima correctamente. Para ello no tienes que crear una versión imprimible (una versión especial para que sea impresa), sino que tienes que crear una hoja de estilo para que sea usada cuando se quiera imprimir el sitio web.


¿Cómo lo hago?

Para indicar que se está usando un fichero CSS en una página web se emplea la etiqueta <link />. Es una misma página web se pueden indicar varios ficheros CSS que se combinan todos ellos o también se puede indicar de forma que definan estilos alternativos. Los estilos alternativos se pueden definir para un mismo dispositivo o se pueden definir para distintos dispositivos (ordenador, impresora, teléfono móvil y otros). Para definir un dispositivo concreto se emplea el atributo media; si no se indica un dispositivo, el estilo CSS se aplica a todos los dispositivos (equivale a media="all").

Por ejemplo, en el siguiente código se define un estilo CSS que se debe emplear cuando se imprima una página web (media="print") y un estilo que se debe emplear cuando se visualiza en pantalla:

<link rel="stylesheet" type="text/css" href="home.css" media ="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

El navegador selecciona automáticamente el estilo definido para la impresora cuando mandamos a imprimir una página web.

Cuando se definen estilos alternativos (rel="alternate stylesheet") para un mismo dispositivo, es necesario indicar un nombre para cada estilo con el atributo title. Pueden existir varias hojas de estilo con el mismo nombre, en cuyo caso se aplicarán todas ellas en conjunto al elegir el nombre que las identifica. Por ejemplo:

<link rel="stylesheet" type="text/css" href="home.css" title="Estilo principal" /> 
<link rel="alternate stylesheet" type="text/css" href="contrast.css" title="Estilo de alto contraste" /> 
<link rel="alternate stylesheet" type="text/css" href="big.css" title="Estilo de tamaño grande" /> 
<link rel="stylesheet" type="text/css" href="print.css" media="print" /> 

En la Figura 1 se muestra como seleccionar un estilo alternativo en Mozilla Firefox a través del menú Ver, Estilo de página. No todos los navegadores ofrecen esta opción.

Figura 1: Selección de estilos alternativos en Mozilla Firefox

En CSS existen tres tipos de hojas de estilo:

Para maquetar con CSS un formulario existen varias técnicas. Una sencilla consiste en definir un tamaño fijo para las etiquetas de los controles. Por ejemplo:

<?xml version="1.0" encoding="iso-8859-1"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Formulario alineado</title> 
<style type="text/css" media="screen"> 
<!-- 
fieldset {width: 300px; padding: 10px;} 
legend {font-weight: bold;}
label {float: left; display: block; width: 100px;} 
input {float: none; display: inline;} 
.centrado {margin: 10px 100px;} 
--> 
</style> 
</head> 
<body> 
<form id="form1" action="" method="get"> 
<fieldset> 
<legend>Datos personales</legend> 
<label for="nombre">Nombre:</label> 
<input type="text" id="nombre" /> 
<br /> 
<label for="apellidos">Apellidos:</label> 
<input type="text" id="apellidos" /> 
<input type="submit" value="Enviar" class="centrado" /> 
</fieldset> 
</form> 
</body> 
</html>

En la Figura 2 podemos observar como se visualiza esta página en Microsoft Internet Explorer 7:

Figura 2: Formulario de ejemplo

Aunque en el ejemplo anterior se han escrito las reglas de CSS directamente en la página web con la etiqueta <style>, recuerda que lo correcto es escribirlas en un fichero separado y enlazarlo con la etiqueta <link />.


Recomendaciones

Algunos consejos para crear una versión impresa correcta de un sitio web:

Por ahora, la selección del estilo alternativo se tiene que realizar a través de la opción correspondiente en el navegador. En aquellos navegadores que no dispongan de dicha opción no se podrá realizar dicha selección. En una próxima práctica veremos cómo hacerlo con JavaScript para que funcione en cualquier navegador.

Además, la selección de un estilo alternativo no se conserva al pasar de página. En una próxima práctica también veremos cómo mantener el estilo seleccionado con JavaScript y cookies.

¿Cómo se puede comprobar el estilo desarrollado para impresión sin tener que imprimir la página web? Hay dos posibilidades:

Por último, ¿hoy en día se accede a la Web exclusivamente desde un ordenador? No, es muy normal acceder a la Web desde un dispositivo móvil como un teléfono inteligente (\emph{smartphone}) y es muy probable que en el futuro se acceda también desde otros tipos de dispositivos que en la actualidad no contemplamos. Un buen diseño y una buena maquetación es aquella que está preparada para adaptarse a diferentes dispositivos. ¿Cómo se puede lograr? Una solución que se aplica en la actualidad es el diseño adaptable o adaptativo (responsive design). ¿Te atreves a aplicarlo a tu práctica?


Recursos

¿Cómo se maqueta con CSS?

¿Cómo se maqueta un formulario con CSS?

¿Cómo se maqueta una tabla con CSS?

¿Cómo puedo seleccionar un estilo alternativo?

¿Cómo puedo hacer un estilo para que se use cuando se imprime una página web? ¿Qué cambios tengo que realizar respecto a un estilo en pantalla?

¿Existe alguna herramienta que me pueda ayudar a escribir el código CSS necesario para maquetar una página web?