Fases de Diseño de un sitio Web: IV. Fase Post-Producción

Motivación

HTML fue diseñado originalmente para intercambiar información textual en entornos académicos por tanto sus etiquetas sólo contenían información sobre la organización lógica del contenido (titulo, párrafo, etc.) y no sobre su presentación. Debido a esto una misma página podía verse de forma distinta dependiendo del navegador, el ordenador y sistema operativo sobre el que estuviese instalado y la configuración del usuario.

A medida que Internet creció y fue adquiriendo popularidad el diseño de la páginas web comenzó a adquirir más importancia y se hicieron patentes algunos problemas del lenguaje. Como ya hemos visto en HTML es difícil controlar la presentación de los elementos en pantalla (márgenes, sangrado de texto, interlineado, colocación de las imágenes, etc.) las soluciones más ampliamente aceptadas por los diseñadores de páginas web consistían en:

• Utilizar tablas, listas e imágenes transparentes para la distribución espacial de los elementos en pantalla
• Abusar de las etiquetas asociadas al aspecto físico (font-face, font-size, etc.) en detrimento de las étiquetas lógicas.

El estandar CSS (Cascading Stylesheets)

Para solucionar los problemas de control sobre los aspectos de presentación el W3C : World Wide Web Consortium (organismo responsable de la web) incluyo la definición de estilos de presentación en HTML 4.0 mediante la especificación CSS (del inglés Cascading Stylesheets que significa hojas de estilo en cascada).

CSS permite definir como se presentan en pantalla cada uno de los elementos definidos en HTML. Esto permite:

• Separar el estilo de la presentación.
• Especificar el estilo una vez en un documento separado y vincularlo a varios documentos que tengan el mismo estilo. De esta forma cuando se quiera modificar el estilo de todos los documentos sólo habrá que modificar un fichero.
• Disminuir el tamaño de las páginas y hacerlas más sencillas y por tanto más rápidas de descargar en el navegador.

Declaración de reglas de estilo

Las hojas de estilo están formadas por reglas. Cada regla define un estilo y el contexto en el que se aplica.

• El estilo se define mediante una pareja atributo-valor separados por ":" por ejemplo:

          color:red
          font-size:12pt
        

• El contexto al que se aplica el estilo se define mediante un selector que puede ser el nombre de una etiqueta en HTML , un conjunto de etiquetas separadas por comas, una etiqueta con un determinado atributo, etc.

Las reglas de estilo pueden definirse en distintos sitios:

• En el elemento al que se aplican
• En la cabecera del documento HTML
• En un fichero aparte (fichero.css) que se referencia en la cabecera del documento HTML

Agrupación y diferenciación de reglas de estilo

Las reglas de estilo se pueden agrupar y diferenciar de varias formas:

• Agrupación de estilos: Se pueden agrupar distintos atributos para una misma etiqueta separándolos con un punto y coma.
  En la siguiente figura puedes ver un ejemplo que indicaría que todos los títulos de nivel 1 (h1) deben mostrarse de color rojo (red) con un tamaño de fuente (font-size) de 20 puntos y fondo azul (blue):
  
  

  Hola

  
  
• Agrupación de selectores: Se pueden agrupar etiquetas que tengan estilos comunes separándolas mediante comas. Esto indicaría que los títulos de nivel 2, 3 y 4 se verán todos ellos utilizando la familia de fuentes arial. Como ves el primer hola que corresponde a un título 1 que no tiene aplicado ningún estilo se ve con un tipo de fuente distinto.
  
  

  h2, h3, h4 {font-family:impact}

  Hola Hola Hola Hola

  
  
• Herencia: El estilo aplicado a una etiqueta se aplica también a todas las que se encuentren dentro de ella. En este ejemplo solo hemos aplicado reglas de estilo a la etiqueta <b> pero sus efectos también se reflejan en la etiqueta <i> por estar anidada dentro de ella. (Observa que los comentarios en CSS son distintos a los comentarios en HTML y se insertan mediante los separadores /* comentario */)
  
  

  b {color:red} /* i no tiene reglas de color*/

  El texto en Itálica aunque no se le ha aplicado ningún estilo se ve también en rojo porque está rodeado por las etiquetas <b>...</b>

  
  
• Diferenciación de estilos: Se pueden aplicar dos reglas de estilo a una misma etiqueta utilizando el valor del atributo class en el selector para diferenciarlos.
  
  

  p.introduccion {color:blue} p.normal {color:black}

  Este párrafo etiquetado mediante <p class="introduccion>...</p> se ve de color azul y en itálica. Este otro párrafo etiquetado mediante <p class="normal>...</p> se ve de la forma habitual.

  
  

Mediante el atributo style se puede alterar el aspecto del elemento al que se le aplica. Se suele utilizar cuando se aplica un estilo al documento en su conjunto y se quiere hacer una modificación puntual en un elemento. Sólo se recomienda su uso de forma puntual y no para dar estilo a un documento ya que supondría sobrecargar el código con demasiadas etiquetas de estilo.

En este caso el selector es la propia etiqueta y el estilo se declara en el atributo style.

<etiqueta style="atributo:valor; atributo2:valor2">Contenido</etiqueta>

Cuando el estilo no se quiere aplicar a todo el contenido de una etiqueta se suele utilizar la etiqueta <div>...</div> para seleccionar la porción del código HTML a la que queremos dotar de estilo. En el siguiente ejemplo tenemos un párrafo rodeado por las etiquetas <p>...</p> si aplicamos el atributo style al párrafo todo su contenido se vería en azul, pero como sólo queremos que se vea una palabra la seleccionamos mediante las etiquetas <div>...</div>

<p style="color:blue">Contenido del parrafo</p>
	  

<p>Contenido del <div style="color:blue">parrafo</div></p>
	  

Ejercicio

Tarea

Practica la aplicación de estilos a elementos individuales

Procedimiento

1. Abre el editor interacctivo seleccionando este enlace.
2. Escribe el siguiente texto en el lado izquierdo de la pantalla:

   <html>
     <body>
       <h4>1.Estilo de fuente</h4>
       <p style="font-style:bold">Negrita</p>
       <p style="font-style:italic">Itálica</p>
   
       <h4>2.Familia de fuente</h4>
       <p style="font-family:serif">
         "serif" es lo que en windows llamamos Times
       </p>
       <p style="font-family:sans-serif">
         "sans serif" equivale a Arial o Helvetica
       </p>
       <p style="font-family:monospace">
         "monospace" Equivale a Courier
       </p>
   
       <h4>3.Tamaño de fuente</h4>
       <p style="font-size:16pt">
         El tamaño se puede expresar en puntos
       </p>
       <p style="font-size:1,5em">
         El tamaño se puede expresar en ems que es 
         una medida relativa a la letra "m" del estilo que había antes
         de aplicar este.
       </p>
       <p style="font-size:150%%">
         El tamaño se puede expresar en porcentaje que es una
         medida relativa al estilo preexistente
       </p>
       <p style="font-size:16px">
         El tamaño se puede expresar en pixels
       </p>
       <p style="color:red; text:decoration:underline">
         Existen otras medidas de tamaño  como cm (centímetros), mm (milímetros), 
         pc(picas), etc.
       </p>
     </body>
   </html>
   	

3. Pulsa el botón enviar para ver el resultado en el lado derecho.

Solución:

Debería verse

Observaciones

• Observa que hay diferentes atributos asociados con las fuentes (tamaño, estilo, familia, ...)
• Observa que hay varias formas distintas de especificar el tamaño.
• Observa en el último párrafo como pueden agruparse dos estilos para un mismo elemento separándolos mediante punto y coma.
• Recuerda que esta forma de aplicar el estilo sólo es recomendable en casos excepcionales cuando queremos modificar un estilo en una zona concreta del documento pero no cómo forma habitual de definir la presentación ya que sobrecarga demasiado el código HTML.
• En este ejemplo hemos visto principalmente estilos aplicados a las fuentes del documento. También existen estilos aplicables al color, imagen de fondo, distribución del espacio en los bloques de texto (márgenes, interlineado, sangrado), etc. Algunos de ellos los practicaremos en otros ejercicios pero puedes encontrar un listado completo de todos los atributos aplicables a cada elemento y los valores que puede tomar cada uno de ellos en la siguiente dirección: http://www.htmlhelp.com/es/reference/css/properties.html

Todas las reglas de estilo aplicables a un documento se puden definir conjuntamente al principio del mismo, en la cabecera (<head>). De este modo el estilo definido para un elemento se aplica todas las veces que el elemento aparezca en el interior del documento evitando tener que añadir un atributo style a cada elemento individual. Las reglas de estilo así definidas aplican a todo el documento pero no se pueden reutilizar para documentos distintos. En la siguiente imagen se puede ver un ejemplo de uso.

Las etiquetas <style>...</style> definen el principio y fin de la declaración de las reglas de estilo. El atributo type indica al navegador el tipo de contenido MIME que va a encontrar a continuación. El contenido de la hoja de estilo viene encerrado entre comentarios HTML (<!--comentario-->) esto permite que el navegador ignore la hoja de estilo si no tiene soporte para el tipo de contenido indicado en el atributo type

Ejercicio

Tarea

Practica la aplicación de estilos en la cabecera del documento.

Procedimiento

1. Abre el editor interacctivo seleccionando este enlace.
2. Escribe el siguiente texto en el lado izquierdo de la pantalla:

   <html>
    <head>
     <style type="text/css">
      <!--
       h1{text-align:center;color:red}
       h2{color:blue}
       p.resumen{text-indent:0; font-style:italic}
       p{text-indent:2em; font-size:10pt}
      -->
     </style>
    </head> 
    <body>
      <h1>Titulo del art&iacute;culo</h1>
      <h2>Resumen</h2>
      <p class="resumen">Aqui vendría el resumen del articulo que hemos decido ponerlo en
      italica y sin sangrar para que sea mas facilmente reconocible
      </p>
      <h2>Introduccion</h2>
      <p>Este parrafo corresponderia a la introduccion podemos hacerlo tan largo como queramos
      para comprobar que hemos sangrado la primera linea hacia la derecha.</p>
      <h2>Capitulo central</h2>
      <p>Parrafo central</p>
      <h2>Conclusiones</h2>
      <p>Parrafo final</p>
    </body>
   </html>
   

3. Pulsa el botón enviar para ver el resultado en el lado derecho.

Solución:

Debería verse

Observaciones

• Observa que es necesario poner el atributo type y los comentarios dentro del elemento <style>. De este modo si el navegador no entiende hojas de estilo o si el usuario las ha deshabilitado se ignorará esta parte del código.
• Observa que el estilo para la etiqueta <h2> se declara una sola vez pero se aplica a las cuatro instancias de ese elemento que aparezcen en el documento.
• Observa que hemos aplicado dos estilos distintos a la etiqueta <p> para hacerlo sólo hemos tenido que distinguir los párrafos entre sí mediante el atributo class
• En este ejemplo además de las propiedades de color y fuente hemos visto como sangrar el texto. Existen otras propiedades aplicables a la distribución espacial del texto. Puedes encontrar un listado completo en esta dirección: http://www.htmlhelp.com/es/reference/css/properties.html

Todas las reglas de estilo aplicables a un documento se puden definir en un fichero aparte (fichero.css) que denominaremos hoja de estilo. Para aplicar este estilo a un documento HTML será necesario establecer un vínculo entre el documento html (fichero.html) y la hoja de estilo (fichero.css). Esto se hace por medio de la etiqueta <link> y los atributos rel, href y type tal y como se indica a continuación. Donde el atributo rel hace referencia que el enlace es a una hoja de estilo. El atributo type indica el tipo de hoja de estilo (en este caso texto) y el atributo href hace referencia a la dirección URL donde está ubicado el fichero.css. Esta dirección puede ser absoluta, relativa, local o remota.

<html> <head> <link rel="stylesheet" href="fichero.css" type="text/css"> </head> <body> <p>Contenido del documento HTML</p> </body> </html>

Las reglas de estilo así definidas permiten agrupar el estilo de un conjunto de documentos en un único fichero. Para aplicar el estilo a un conjunto de documentos sólo habría que crear un enlace en la cabecera de cada uno de ellos que referenciase el fichero.css tal. Si posteriormente se quiere modificar el estilo de todos los documentos sólo sería necesario modificar el fichero.css evitando tener que retocar cada documento HTML por separado y facilitando por tanto el mantenimiento. En la siguiente figura puedes ver un ejemplo:

Ejercicio

Tarea

Practica la creación de hojas de estilo en ficheros independientes y la vinculación de documentos HTML con hojas de estilo externas.

Procedimiento

1. Crea en un mismo directorio 3 ficheros de texto con los nombres Libro.html, Articulo.html y fichero.css. Para ello abre el explorador de windows y sitúate en el directorio donde los quieras almacenar. Pulsa con el botón derecho del ratón y selecciona la opción nuevo | Documento de texto. A continuación pon nombre al fichero que acabas de crear incluyendo la extensión (.html o .css).
2. Abre los ficheros uno por uno con el wordpad o cualquier otro editor de texto plano, añádeles el contenido que se indica en la imagen superior para cada uno de ellos y guardalos.
3. Abre los ficheros Libro.html y Articulo.html con el navegador (Internet Explorer o Netscape Navigator).
4. Comprueba que los ficheros muestran el aspecto que se indica en la figura.
5. Modifica el estilo para que aparezcan los títulos de primer nivel en azul, los de segundo nivel en rojo y los párrafos indentados.

Solución:

Observaciones

• Observa que la etiqueta <link> no tiene etiqueta de cierre </link> igual que ocurre con otras etiquetas en HTML como <hr> o <br>.
• Observa que el estilo de la etiqueta <h2> se declara una sola vez en el fichero.css pero se aplica:
  • a todos los documentos que tengan vinculada la hoja de estilo fichero.css.
  • a todas las instancias del elemento <h2> dentro de cada uno de esos documentos.
• Observa que cuando cambias el estilo en el fichero.css el cambio afecta a las dos páginas que lo vinculan (Libro.html y Articulo.html) sin necesidad de volver a editarlas. Para poder ver el efecto del cambio de estilo tienes que volver a cargar la página en el navegador. Para hacerlo pulsa simultáneamente la tecla de mayúsculas (en tu teclado) y el botón recargar (en el navegador). Se pulsa la tecla mayúsculas para evitar que el navegador vuelva a cargar la página antigua que tiene almacenada en el caché del ordenador.
• En este ejemplo sólo hemos visto algunas propiedades de estilo. Puedes encontrar un listado completo en esta dirección: http://www.htmlhelp.com/es/reference/css/properties.html

En esta fase del proyecto trataremos de separar la estructura lógica de las páginas de los aspectos relacionados con su presentación. Para ello crearemos una hoja de estilo telemaco.css en la que añadiremos los aspectos de formato comunes a todas las páginas:

• La imagen de fondo y el color de texto por defecto para todas las páginas.
• El tamaño de los márgenes izquierdo y derecho
• El color y tipo de fuente de los títulos h1 y h2 asi como su alineación con respecto a la página.
• Definiremos tres tipos de párrafo:
  • Los párrafos normales (sin etiqueta class) se mostrarán justificados.
  • Los párrafos etiquetados como "primero" (<p class="primero">...</p>) se mostrarán con la primera linea sangrada hacia la derecha.
  • Los párrafos etiquetados como "resumen" (<p class="resumen">...</p>) se mostrarán centrados
• Definiremos la forma en que deben mostrarse los textos etiquetados mediante <em>...</em> y <strong>...</strong> para difernciarlos del texto en negrita y en itálica.

Para vincular cada una de las páginas con la hoja de estilo utilizaremos la etiqueta
<link rel="stylesheet" type="text/css" href="telemaco.css"> que colocaremos entre las etiquetas <head>...</head> que definen la cabecera de cada uno de los ficheros.html de nuestro web.

Modificaremos la página principal index.html para eliminar los elementos de formato que incluimos en los párrafos y en su lugar los etiquetaremos como "primero" y "resumen". En a figura puedes ver la hoja de estilo comentada y el resultado de aplicar la hoja de estilo sobre la página principal.

Aplicación práctica

Tarea

Crea una hoja de estilo para agrupar los aspectos de formato comunes a todas tus páginas y vincula cada página con la hoja de estilo utilizando la etiqueta
<link rel="stylesheet" type="text/css" href="telemaco.css">

Procedimiento

1. Observa la definición de la hoja de estilo para el web de Telémaco.
2. Crea un fichero de texto fichero.css para añadir todas las reglas de estilo para tu sitio web. Para hacerlo sitúate en el directorio donde tengas almacenadas las páginas de tu sitio web. Pulsa con el botón derecho del ratón y selecciona la opción nuevo | Documento de texto. A continuación pon nombre al fichero que acabas de crear. Recuerda que el fichero debe tener extensión .css para que el navegador lo interprete como una hoja de estilo. Evita los espacios en blanco en los nombres de ficheros.
3. Abre con el wordpad el fichero.css que acabas de crear. A continuación añadiremos distintas reglas de estilo para aplicar formato a nuestros documentos todas las reglas de estilo tendrán una sintaxis similar a esta:

       
   selector{atributo1:valor1;
       atributo2:valor2
       }    
   	
   

   Donde "selector" indica la etiqueta a la que aplicaremos el estilo (por ejemplo p si queremos aplicar el estilo a un párrafo), "atributo" indica la propiedad (por ejemplo: color) y "valor" indica el valor que toma la propiedada para esa etiqueta (por ejemplo blue si queremos que el texto de los párrafos se muestre en color azul). El atributo y el valor se separan mediante dos puntos y las diferentes reglas aplicadas a un mismo selector se separan entre sí mediante punto y coma.
4. Añade a la etiqueta body reglas de estilo para indicar el color por defecto del texto, la imagen del fondo y los margenes izquierdo y derecho. En lugar de "fichero.gif" pon la dirección URL de la imagen que quieras poner como fondo de tus páginas. Puedes utilizar cualquiera de las imágenes de fondo que encontrarás en esta página

       body{color:black;
       background-image:url(fichero.gif);
       margin-left:5%;
       margin-right:5%
       }
   	

5. Indica el tipo de letra y el color que prefieras para los títulos utilizando los nombres en inglés para los colores: blue (azul), red (rojo), yellow (amarillo) y para los tipos de letra (serif, sans serif, monospace, etc.)

       h1, h2{color:blue;
       font-family:serif
       }
   	

6. Indica el tipo de alineación que prefieras para tus párrafos: justify (si quieres que el texto se ajuste a ambos márgenes), left (si quieres que esté alineado a la izquierda), right (si quieres que esté alineado a la derecha.

       p{text-align:justify}
   	

7. Guarda el fichero.css
8. Abre cada una de las páginas de tu sitio web con el wordpad.
9. Vincula cada una de las páginas con la hoja de estilo utilizando la etiqueta
   <link rel="stylesheet" type="text/css" href="URL"> entre las etiquetas <head>...</head> de cada una de las páginas de tu web. Sustituye URL por la dirección en la que se encuentra tu fichero.css
10. Guarda cada uno de los ficheros.html y ábrelos con el navegador (Internet Explorer o Netscape Navigator) para comprobar el resultado.
11. Comprueba que se ve la imagen de fondo y que los colores, tipos de letra y alineación se corresponden con las que has definido en la hoja de estilo.
12. Si el resultado no es como esperabas revisa de nuevo el contenido de tu página.
13. Si tienes alguna duda coméntala con tus compañeros en el foro titulado "HTML"

Solución:

Observaciones

• Comprueba el aspecto de las páginas de Telémaco en el navegador pulsando sobre cada una de ellas (index.html, Fotos.html, Aficiones.html , DireccionesDeInteres.html)
• Observa que cuando cambias el estilo en el fichero.css el cambio afecta a las dos páginas que lo vinculan sin necesidad de volver a editarlas. Haz la prueba modificando por ejemplo la imagen de fondo y volviendo a cargar las páginas en el navegador. Para recargar las páginas pulsa simultaneamente la tecla mayúsculas (de tu teclado) y el botón recargar (de tu navegador) para evitar que coja la página almacenada en el caché.
• En este ejemplo sólo hemos visto algunas propiedades de estilo. Puedes encontrar un listado completo en esta dirección: http://www.htmlhelp.com/es/reference/css/properties.html
• Puedes consultar el código HTML de esta página (o de cualquier página que consultes en Internet) desde tu navegador para hacerlo:
  • Si utilizas Internet Explorer: Selecciona la opción de menú (Ver|Código Fuente)
  • Si utilizas Netscape Navigator: Selecciona la opción de menú (Ver|Origen de la página)