SuperMag - Weblog de Armando Sosa

Viste con estilo - 3era lección

Bienvenidos, sean todos ustedes a la tercera entrega de su tutorial favorito. Si estan por aquí por primera vez, tal vez quieran visitar la primera y segunda parte antes de continuar Pero si ya están listos, pues adelante, vamos a seguir confeccionando vestiditos.

Tipos de buen gusto

Uno de los principales elementos que hacen que un diseño sea un buen diseño es la composición tipográfica. Igualmente una mala elección en este campo puede hacer que un diseño que pudo ser bueno se deslice inevitablemente en los terrenos de lo mediocre y amateur. En el diseño web estamos tipográficamente hablando, bastante limitados ya que tenemos a nuestra disposición una reducida selección de fuentes que la mayoría de lo susuarios tengan instaladas en su sistema. Y aunque por un lado esa es una desventaja, también es cierto que nos obliga a ser más creativos con las tipografías que están a nuestra disposición.

El cuerpo del delíto

Empezaremos con el cuerpo del post. Como dijimos en la lección pasada nuestro layout es semilíquido por lo cual, el texto de las entradas se ajusta al tamaño de ventana del navegador. Sin embargo esto puede presentar un problema para aquellas personas con un monitor grande ya que el texto se ajustaría a líneas de texto larguísimas muy dificiles para la lectura.
Dentro de las especificaciones de CSS existe una propiedad muy util para estos casos: max-width por medio de la cual es posible definir de antemano la anchura maxima que debe alcanzar un determinado elemento cuando el contenedor se ensanche.
Asi que si añadimos un selector para la clase .blogbody y le indicamos que no importa cuan enorme sea la anchura de su contenedor la suya no excedera la anchura de 50 letras “M” (max-width:50em;). ¿Fácil no?
La mala noticia es que Internet Explorer no soporta esta propiedad por lo que a los usuarios de este navegador que tengan monitores grandes le sera mas dificil la lectura. ¡Lástima! pero el resto de navegadores buenos desplegaran el contenido como se debe.
Para que el texto quede justificado usamos la propiedad text-align:justify; despues ajustamos un poco los margenes para separar cada post del siguiente (margin:30px 0 10em 0;) y listo!

Encabezados (como éste)

Ahora vamos a aplicarle algo de estílo a los títulos. En esta ocasión, para contrastar con el cuerpo del texto vamos a utilizar un tipografía serif para todos los títulos. Aplicamos, en nuestra hoja de estilo la siguiente regla

h2,h3,h4,h5{
font-family:georgia, "times new roman", serif;
color:#960;
}

Como ven, es posible aplicar una regla a varios selectores a la vez, esto para evitar redundancias en el código. En este caso queremos que todos los encabezados, excepto el h1 del que nos ocuparemos después, tengan la misma tipografía y color. Una vez establecidas las características generales podemos afinar cada uno de los detalles, por ejemplo para los títulos de cada post (h3) aplícaremos la siguiente regla.

h3{
font-size:250%;
letter-spacing:-.05em;
text-indent:10%;
width:100%;
border-bottom:1px solid #330;
}

¿Muchas cosas nuevas aqui verdad? Vamos a explicarlas una por una.
font-size:250%; significa que el tamaño de la fuente será 250% del tamaño definido en el body. Queremos encabezados grandes.

letter-spacing:-.05em; Aqui definimos el espaciado entre caracteres (lo que cualquier tipógrafo conoce como tracking ) y le definimos un valor negativo de -0.5em para que los caracteres se vean mas unidos entre si. Cuestión de gustos, a mi me agradan los títulos con un tracking reducido. Tal vez te estés preguntado que reyos significa ese em. Pues bien, los ems son unidades relativas y representa el ancho de una letra “M” en la fuente actual.

text-indent es el valor de identacion o sangría de un texto. En este caso le asignamos un valor relativo de 10% del ancho total de la linea. Definimos que la línea debe ser tan ancha como el bloque que lo contiene (width:100%; ) y debe presentar un borde inferior de 2 pixeles de espesor y que sea una línea continua (border-bottom:1px solid #330;)

Vean el resultado

Los enlaces

Ahora vamos a ver un concepto nuevo: Las pseudo-clases.
Las pseudo-clases son utilizadas para distinguir entre diferentes estados de un mismo elemento. Un mismo enlace presenta cuatro estados distintos:

1. El enlace en su estado normal
2. Cuando ya ha sido visitado
3. Cuando el puntero del mouse le pasa por encima
4. Cuando está activo

Cada uno de estos estados puede ser tratado de manera diferente en nuestra hoja de estilos por medio de las pseudo-clases que son a:link, a:visited, a:hover y a:active donde cada una corresponde respectivamente a uno de los enlistados arriba. Para nuestro diseño, nosotros utilizaremos el siguiente código:

a:link{
text-decoration:none;
color:#369;
}

a:visited{
text-decoration:line-through;
color:#666;
}

a:hover{
text-decoration:underline;
color:#ce3554;
}

a:active{
text-decoration:none;
color:#ce3554;
}

Para el estado normal del enlace (a:link) seleccionamos un bonito color azul (#369) y desactivamos el subrayado que tiene por defecto (text-decoration:none;) . Los enlaces ya visitados (a:visited) aparecerán en un gris mas tenue que el del cuerpo del texto y tachados (text-decoration:line-through;).
Una cosa muy importante en términos de usabilidad es agregar siempre a los enlaces un estado de hover para que el usuario sepa que se trata de un elemento interactivo. En este caso, cuando el puntero del mouse pase por un enlace (a:hover) reparecera el subrayado (text-decoration:underline;) y el texto cambiará de color. Y para cuando el enlace se encuentre activo(a:active) , dejaremos el mismo color del hover, solo que sin el subrayado.

Miren, vean como quedó.

Ahora… los otros enlaces.

El problema con el estílo anterior, es que mientras se ve muy bien en el cuerpo del texto, no se ve tan bien en la barra lateral (#links) que además esta llenísima de enlaces. Pero bueno, esto con CSS no representa ningun problema.
Como lo que queremos hacer es aplicarle estilo a los enlaces contenidos dentro de el elemento con el identificador #links solo tenemos que crear un selector dodne escribiremos la ruta hasta ese elemento. Primero, el elemento contenedor de mayor jerarquía seguido por el de menor separados por un espacio y asi consecutivamente hasta llegar al elemento objetivo. En este caso el código sería el siguiente:

#links a:link{
text-decoration:none;
display:block;
margin:0;
padding:2px 15px;
color:#c93;
}

#links a:visited{
text-decoration:none;
color:#000;
background:#666;
}

#links a:hover, #links a:active {
text-decoration:none;
color:#000;
background:#960;
}

No hay mayores novedades aquí. Seguramente ahora ya pueden ver el código e imaginarse como luce. Esta vez jugamos tambien con los colores de fondo y utilizamos la misma regla para a:hover y para a:visited .

Antes de dejar por la paz la barra de lateral, vamos a añadir algo de espacio entre las distintas secciones , esto lo lograremos facilmente modificando el margen superior margin-top de la clase .sidetitle que corresponde dentro de nuestro código al título de cada sección. YA que estamos aquí, aprovechamos para hacer que dichos títulos aparezcan centrados ( text-align:center;) y todos en mayusculas (text-transform:uppercase;.

.sidetitle{
text-transform:uppercase;
text-align:center;
margin-top:30px;
margin-bottom:5px;
}

Y así es como queda

Detalles finales.

Al final de cada post viene un elemento div con clase .posted que contiene la información sobre esa entrada: el autor , el enlace permanente, los comentarios y los trackbacks . Es importante diferenciarlo del cuerpo del post y para ello vamos a utilizar la siguiente regla:

.posted{
font-size:90%;
padding:15px;
margin-top:50px;
background:#eee;
border: 1px solid #930;
}

Ahora vamos a hacer algo creativo con los encabezados de fecha que como sabemos, en nuestro código pretence al elemento h3. Escribamos la siguiente regla:

h2{
font-size:110%;
position:relative;
padding:5px;
left:-75px;
top:6em;
width:50px;
color:#ce3554;
}

La propiedad position:relative;nos permite colocar un elemento en una posoción relativa a la que le corresponde en el flujo normal del documento. Así nosotros movemos nuestro elemento 75 pixeles a la izquierda, 6 ems hacía abajo y asignamos una anchura de 50 pixeles. Lo que provocará que quede alineado con el título del post en el espacio del margen izquierdo. Se ve bien ¿no?

Asi es como quedó nuestra plantilla hasta ahorita, como ven no hemos utilizado ni una sola imagen aún, sin embargo solo mediante la tipografía estamos dotando a nuestra página de una personalidad propia.

Nos vemos en la siguiente.