Archivo para Julio, 2010

¿Es la paleta de colores web del navegador realmente necesaria?

31 de Julio de 2010

¿Qué es una paleta de colores Web?
Uso de la paleta de colores del navegador es una opción segura que necesitamos cuando estamos creando una página Web o una imagen Web. Es especialmente importante que sepamos cuáles son las consecuencias de no usarla.

Por ejemplo, podríamos utilizar el color #dddddd para el fondo de una tabla. En el monitor probablemente se vmostraría como un gris claro neutro y agradable. Pero cuando lo viéramos en el monitor de un amigo, podría parecer muy diferente. Dependiendo de cómo interpretase su monitor el color podría parecer gris o podría verse verde o de algún otro color.

Esto se debe a que #dddddd no es un color con explorador seguro. Los colores seguros para el navegador son los 216 colores que se pueden ver en el PC de 8-bits y en los monitores de Macintosh y tienen el mismo aspecto, o casi el mismo. Si utilizamos la paleta de colores seguros para el navegador al menos sabremos que en todas las máquinas se verán iguales.

¿Qué es el tramado?
Cuando un monitor se encuentra con un color que no puede mostrar de forma nativa, trata de igualar de la mejor manera posible. Los monitores muestran elementos como puntos diminutos en la pantalla, y los colores nativos se muestran con todos los puntos del el mismo color. Aparece un color interpolado con algunos puntos como un color, otros puntos como otro color, y así sucesivamente para intentar igualar el color solicitado.

Hoy en día la mayoría de ordenadores vendidos se venden con monitores y tarjetas de video que pueden soportar millones de colores. Sin embargo, en muchos de estos sistemas el valor predeterminado es de 640×480 píxeles en la pantalla y 256 colores. Muchas personas no saben que pueden cambiar esta configuración, y mucho menos saben cómo hacerlo.

Los colores que funcionan bien en la mayoría de los navegadores
Si usas colores los que aparecen en esta página, tu página web se verá igual en los monitores que pueden mostrar 256 colores o más, en las plataformas Macintosh y PC.

colores_seguros

Tipografía Web

29 de Julio de 2010

Si has usado HTML,  probablemente habrás llegado a través de la etiqueta <font>. Esta es una etiqueta que te permite definir el tamaño de fuente, el color y la familia. Pero hay inconvenientes con la etiqueta <font>

1. No te permiten cambiar todos los aspectos de la tipografía.
2. No te da mucha flexibilidad en las opciones que admite.
3. Se mezcla la presentación visual en la estructura del documento, haciendo las cosas difíciles para editar más tarde.

Por suerte las hojas de estilo “Cascading Style Sheets” (CSS) te permiten hacer la tipografía de tu Web más precisas.

Familias de fuentes / Font Families
La determinación de la fuente que vas a utilizar es el primer paso para la tipografía adecuada en la Web. El método más común es la definición de la familia de fuentes ya sea como una fuente genérica o específica, y, a continuación una lista de varias fuentes como las copias de seguridad (separados por comas).

Por ejemplo:

p { font-family: Geneva, Arial, Helvetica, sans-serif;

Tamaño fuente / Font Size
Una vez que hayas definido la familia de la fuente, tendrás que ajustar el tamaño de la fuente. Hay muchas unidades de medida que puedes utilizar con  CSS:

  • inches (in)
  • centimeters (cm)
  • millimeters (mm)
  • points (pt)
  • picas (pc)
  • pixels (px)
  • ems (em)
  • X-height (ex)
  • percentages (%)

Los cinco primeros tipos son absolutos (fijos) y los ajustes no funcionan muy bien en las páginas Web porque las páginas Web son vistas por las personas con muchas configuraciones diferentes. La segunda son cuatro tamaños relativos de fuente y se trabajan mejor en la Web. Yo prefiero usar ems.

p { font-size: 1em; }

Colores de fuente / Font Colors
Curiosamente, la propiedad no es color de fuente font-color, es sólo del color. Elige los colores de fuente de la misma manera que lo harías con cualquier otro color. Luego, lo defines en tu CSS:

p { color: #330000; }

Linea de altura, espacio, y resaltado
Algunas de las cosas que puedes hacer con CSS que no se puede hacer con la etiqueta de fuente son lineas de altura, eapacios, y destacar texto. Las líneas de altura en CSS se llaman line-height. Utiliza las mismas unidades de medida que usas para tus fuentes de tu line-height:

p { line-height: 1.25em; }

Espacio es la cantidad de espacio entre las letras. Aunque a menudo no tiene que cambiar esta en las páginas Web, puede que desees espacio más estricto o más flojo para conseguir un efecto. Esto se hace con la propiedad de espaciado entre letras:

p { letter-spacing: -0.1em; }

Y puedes resaltar el texto con varias propiedades de la fuente:

  • background-color: Para resaltar el texto con un fondo de color.
  • font-weight: Establece la audacia de una fuente.
  • font-style: determina la letra cursiva de la fuente.
  • font-variant: Cambia la fuente a versalitas.

p {
background-color: #ccc;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
}

Saca el máximo provecho a tu tipografía Web.

Y para los usuarios la tipografía con CSS ofrece una gran cantidad de opciones y flexibilidad. Hay que aprovecharse de ella.