jueves, 3 de noviembre de 2011

11.- Maquetación de textos

La correcta maquetación de textos, imágenes y listados ayuda a crear una presentación de los contenidos, limpia, clara y precisa. Por ello se recomienda tener control sobre sus principales propiedades, los márgenes, justificados, sangrados, alineaciones, proporciones, etc. Las hojas de estilo en cascada, también denominadas CSS, ayudan en este propósito y por ello se han reseñado las propiedades más importantes a tener en cuenta en el proceso de maquetación de textos.

Las propiedades del texto
Una de las claves para la correcta visualización de la información del sitio web es la definición de los atributos del texto de forma tal que sean perfectamente visibles y legibles en el sitio web. Se recomienda utilizar los atributos relativos al tipo de fuente (utilizar fuentes normalizadas con valores arial, sans serif, serif, tahoma, verdana, times new roman), tamaño de la fuente (utilizar medidas en px, pt ó em), grosor de la fuente (utilizar valores lighter para letra normal ó bold para letra negrita destacada), tipo de decoración (utilizar valores de subrayado o tachado) y color de la fuente (Utilizar código hexadecimal de color), véase tabla1.
.texto {font-family: arial, sans serif; font-size: 12px; font-weight: lighter; font-style: normal; text-decoration: none; color: #000000;}
 Tabla1. Propiedades del texto

Encapsular los textos en capas

Una regla de oro para el control de los textos y contenidos del sitio web es su encapsulado dentro de una capa <div>. Si se desea repercutir un estilo determinado en un texto, se necesitará encapsularlo previamente, véase la tabla2. Este método es aplicable a cualquier elemento textual, imagen, lista e incluso tablas, de cara a lograr una normalización en la representación de los contenidos.
<div class='texto'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor consectetur nisl, nec viverra sapien tincidunt ornare. Suspendisse potenti. In at interdum ligula. Vivamus ligula quam, varius eu placerat eu, porta eu mi. Nam nec felis orci, ac consectetur diam. Praesent quis odio in erat fermentum euismod at vitae odio. Nunc rhoncus dolor ac erat laoreet gravida.</div>
 Tabla2. Encapsulado de un texto en una capa

Las propiedades de las capas

A su vez las capas pueden tener sus propios estilos para la representación de los contenidos. Se recomienda determinar siempre que sea posible el ancho, el alto, los márgenes externos e internos, el color de fondo y el borde, véase capa1 de la tabla3. Además un determinado tipo de capa, puede incluir también las propiedades del texto, véase el estilo de capa2 de la tabla3.
.capa1 {width: 90%; height: auto; margin: 10px; padding: 10px; background-color: #f1f1f1; border: solid 2px #e2e2e2;}


.capa2 {width: 50%; height: auto; margin: 10px; padding: 10px; background-color: #e2e2e2; border: solid 2px #d4d4d4; font-family: arial, sans serif; font-size: 14px; font-weight: lighter; font-style: normal; text-decoration: none; color: #000000;}
 Tabla3. Márgenes externos e internos

Márgenes 
Todos los textos del sitio web deberán constar de márgenes internos y externos, ello se establece con los atributos CSS margin (margen externo) y padding (margen interno). Véase tabla4. El espaciado mínimo recomendado en cada margen deberá ser de 10px como mínimo.
<div style='margin: 20px; padding: 30px;'>texto</div>
 Tabla4. Márgenes externos e internos

Justificados
La alineación de los textos, siempre que sea posible, deberá de ser justificada a ambos lados del margen, por lo que el atributo text-align tomará el valor justify. Véanse las distintas opciones de alineación en la tabla5.
<div style='text-align: left;'>texto</div>
<div style='text-align: right;'>texto</div>
<div style='text-align: center;'>texto</div>
<div style='text-align: justify;'>texto</div>  
 Tabla5. Alineación de textos a derecha, izquierda, centro o justificado

Sangrados
Opcionalmente, se recomienda el sangrado del comienzo de cada apartado, capítulo o sección de la información a fin de determinar que la temática abordada resulta distinta a la del párrafo anterior. Ello se consigue mediante el atributo text-indent. Un valor habitual se sitúa a partir de 30px, véase tabla6.
<div style='text-indent: 30px;'>texto sangrado</div>
 Tabla6. Sangrado de textos

Control de dimensiones
A veces el texto que es contenido dentro de una capa, está embebido en otra a su vez. En tales casos es necesario determinar que anchura, altura y en definitiva dimensiones tendrá. Ello se consigue determinando el ancho y alto de la capa contenedora del texto, véase tabla7.
<div style='width: 80%;'>texto</div>
<div style='width: 200px;'>texto</div>
 Tabla7. Dimensiones de las capas

Imágenes y texto
En muchos casos el texto acompaña imágenes e ilustraciones. En esa situación se necesita establecer un formato flotante si se quieren alinear los textos a las imágenes, ya sea a izquierda o a derecha, véase tabla8. Se recomienda siempre establecer un margen externo para evitar que el texto quede pegado a la imagen, siendo dicho margen superior a 10px.
<div style='width: 50%;'>
<img src='#' style='float: left; margin: 20px;'/> texto
</div>
 Tabla8. Ejemplo de integración de imágenes y texto dentro de la misma capa

Pero por lo general el método más claro y efectivo de presentar la información es mostrando las imágenes en espacios independientes al texto, ocupando todo el ancho de la página o estructura div que se haya predeterminado. En estos casos se hace necesario especificar que no puede haber capas flotantes ni a derecha, ni a izquierda, para ello se utiliza el atributo clear con el valor both, véase tabla9.
<div><img src='#' style='clear: both; margin: 10px;'>pie de foto</div>
<div style='clear: both;'>texto</div>
 Tabla9. Ejemplo de imágenes y textos en capas independientes

Listas
Las listas deberán guardar algunos de los estilos presentados en la tabla10. No se recomienda el uso de imágenes o viñetas para cada elemento de la lista. Además se recomienda encapsular las listas en una capa <div> con márgenes internos y externos.
ul.circulo    {list-style-type: circle;}
ul.cuadrado   {list-style-type: square;}
ol.romanos    {list-style-type: upper-roman;}
ol.alfabetico {list-style-type: lower-alpha;}
<div style='margin: 10px; padding: 10px;'>
   <ul class='circulo'>
   <li>Opción desordenada 1</li>
   <li>Opción desordenada 2</li>
   <li>Opción desordenada 3</li> 
   </ul>
</div>

<div style='margin: 10px; padding: 10px;'>
   <ol class='romanos'>
   <li>Opción ordenada 1</li>
   <li>Opción ordenada 2</li>
   <li>Opción ordenada 3</li> 
   </ol>

</div>
 Tabla10. Aplicación de estilos en listas ordenadas y desordenadas

Tablas
Para toda tabla que se edite, se recomienda reseñar los atributos de ancho máximo, borde, tipo de borde, ancho de borde, color de borde y separación colapsada. Para la fila de encabezamiento de las columnas de la tabla <th> se recomienda aplicar un estilo diferenciador con respecto a las filas que contendrán los datos y textos <td>, véase tabla11.
.tablas {width: 90%; border: solid 2px #cccccc; border-collapse: collapse;}
.filas1 {padding:15px;}
.filas2 {padding:10px;}
<table class='tablas'>
<tr><th class='filas1'>título de columna</th></tr>
<tr><td
class='filas2'>fila con datos</td></tr> 
<tr><td class='filas2'>fila con datos</td></tr>
<tr><td class='filas2'>fila con datos</td></tr> 
<tr><td class='filas2'>fila con datos</td></tr>
</table>
 Tabla11. Alineación de textos a derecha, izquierda, centro o justificado

No hay comentarios:

Publicar un comentario