Páginas de estilos
Diseño y distribución de contenidos
Diseñar y distribuir elementos que determinan el contenido es absolutamente esencial. De hecho, este concepto de distribución se está convirtiendo en una de las claves para el desarrollo de la nueva Internet. Con el fin de entender lo que es esta distribución, le daremos un ejemplo:
He aquí un ejemplo de etiquetado HTML que fue ampliamente utilizado en los años 90.
<table width="148" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr valign="middle">
<td width="21" align="center"><img src="web/verde.gif" width="12" height="10" alt=""></td>
<td height="17" class="menua"><a href="mantenimiento.php">Mantenimiento</a></td>
</tr>
<tr valign="middle">
<td width="21" align="center"><img src="web/verde.gif" width="12" height="10" alt=""></td>
<td height="17" class="menu"><a href="equipamiento.php">Equipamiento</a></td>
</tr> <tr valign="middle">
<td width="21" align="center"><img src="web/verde.gif" width="12" height="10" alt=""></td>
<td height="17" class="menu"><a href="irudia.php">Imagen digital</a></td>
</tr>
</table>
Si miramos de cerca el código, nos daremos cuenta de que lo que quieres decir es sólo una pequeña lista de enlaces. Pero había muchos códigos adicionales que no eran necesarios para este propósito, por ejemplo:
Como se puede ver, el propósito de la mayoría de las etiquetas es determinar el diseño. Es difícil cambiar el título automáticamente y diferenciar el enlace, y deberíamos cambiar todas las etiquetas para reutilizar esta información en otro sitio web o contexto.
Ahora diríamos el mismo contenido de la siguiente manera:
<ul>
<li><a href="mantenimiento.php">Mantenimiento</a></li>
<li><a href="equipamiento.php">equipamiento</a></li>
<li><a href="imagen.php">Imagen digital</a><li>
</ul>
Entonces sólo tenemos que poner una hoja de estilo CSS en la pantalla del navegador.
li{
margin: 3px 0px 5px 0px;
line height: 1.4em;
}
ul{
font size: 85%;
list style image: url(verde.gif);
margin: 0px 5px 3px 27px;
padding: 0px;
}
Para ello, solo necesitamos vincular el archivo CSS apropiado (como global.css) y el encabezado XHTML:
<link href="./img/global.css" type="text/css" rel="stylesheet" media="screen" />
Las ventajas de esta forma de trabajar son horribles, si hemos etiquetado con éxito el contenido XHTML, podemos integrarlo sin ningún cambio. El ejemplo dado es una lista de enlaces, pero podría ser el mismo que un documento multimedia más jugoso, en cualquier caso, después de todo.
La aplicación más rápida que tenemos para usted es aplicar diferentes diseños para la pantalla y la impresora. Es bien sabido que muchos colores y fondos se pueden utilizar en la pantalla, que no son adecuados para el papel. Además, al imprimir una página web hay ciertos elementos que no son necesarios. Estas especificaciones se pueden colocar en un segundo archivo CSS, y un buen enlace a la cabecera XHTML, por ejemplo:
<link href="/img/print.css" type="text/css" rel="stylesheet" media="print"/>
Como podemos ver, hemos cambiado dos parámetros:
Utilizamos media = "print" en lugar de media = "screen"
En el parámetro href hemos proporcionado una nueva URL de archivo.
Este sistema es muy popular en nuestro sitio web actual, y es una prueba rápida:
Vaya a una página web como esta y haga clic en Archivo - Vista preliminar. Estos son algunos ejemplos que usan esta opción:
El ejemplo más importante de diseño y distribución de contenido es el proyecto CSS ZenGarden (http://www.csszengarden.com/). Manteniendo el mismo XHTML, la esencia de este proyecto es lograr los diseños más atractivos y únicos posibles. Cientos de diseñadores ya han participado en este proyecto, y al navegar por los enlaces, se puede entender la flexibilidad que ofrece este sistema.
Otro ejemplo de diseño.
Siempre tenga en cuenta que estamos viendo el mismo archivo XHTML, y el único que cambia es el archivo CSS.
Como hemos visto, los antiguos sitios web de la WEB se han disuelto.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Ejemplo de estilos sin CSS</title></head> <body> <h1><font color="red" face="Arial" size="5">Titular de la página</font></h1> <p><font color="gray" face="Verdana" size="2">Un párrafo de texto no muy largo.</font></p></body></html>
Utiliza etiquetas <font> y atributos de color, cara y tamaño para definir el aspecto y el diseño del texto en la página. Esta metafísica del diseño causa mucho daño a la capacidad de la representación de la página. Veamos a través del ejemplo de fondo. Si la página contiene 50 textos diferentes, debemos escribir 50 etiquetas de tipo <font>. Si el sitio Web contiene 100 páginas, deberíamos agregar etiquetas 50x100 y atributos 5000x3.
Además de los sitios web en constante cambio, sería imposible para ellos seguir este sistema.
Para este propósito, las hojas de estilo fueron inventadas con precisión, pero ¿cuál es su propósito?
"Las hojas de estilo intentan volver a distinguir el estilo lógico y el estilo físico en un documento y dejar el estilo físico en la estructura del documento distinto de los bloques de definición de estilo".
Los acrónimos de Cascade StyleSheet son CSS. Es una especificación sobre estilos físicos que se pueden aplicar a un documento HTML y tiene como objetivo separar permanentemente la lógica (estructura) y física (presentación) del documento.
El estilo lógico corresponde a la lógica del documento: encabezados, párrafos ... no es evidente en la apariencia final, sino más bien con la estructura del documento. Por el contrario, el estilo físico no es responsable de la estructura del documento, sino de la aparición final: párrafos de un tipo particular de letra, tablas de un color de fondo específico ...
La hoja de estilo tiene como objetivo crear algunos estilos físicos, separados de las etiquetas HTML (en lugar de etiquetas como un parámetro) y aplicados a los bloques de texto deseados. A veces, estos estilos se pueden cambiar de JavaScript, lo que nos dará más interacción.
Enlaces