Real Web type in real Web context.

Cualquier diseñador se puede encontrar con problemas a la hora de elegir la tipografía adecuada para su proyecto Web, incluso diseñadores experimentados se sienten un tanto perdidos ante como responderá un determinado tipo en diferentes aplicaciones Web y con diferentes estilos Web.

Tim Brown ha realizado u magnífico trabajo que facilita gratuitamente a todos los diseñadores que quieran ver de forma rápida como puede funcionar una tipografía en una página Web.

Para ello sólo hay que seguir unos sencillos pasos perfectamente explicados en Web Font Specimen, en donde puedes acceder al archivo comprimido y bajártelo. En la carpeta encuentras tanto las instrucciones de uso –README-, como el documento HTML y los CSS con los diferentes estilos creados.

Es tan sencillo como cambiar la tipografía predeterminada en las propiedades del documento, sustituirla por la que quieras comprobar y se aplicará en todos los estilos CSS creados, por lo que fácilmente podrás comprobar si la tipografía que has elegido es adecuada o no para la Web y dependiendo de que estilos.

El ejemplo está creado con la tipografía Georgia y muestra diferentes tipos de listas y distintos tamaños. Comparaciones de tamaños y cuerpos, tamaños CSS y altura de línea, muestra de glifos, diferentes tamaños con mayúsculas, el texto en escala de grises, de luz sobre el texto oscuro y variedad de combinaciones de colores.

La verdad es que me parece un trabajo exhaustivo y bastante completo que nos facilita mucho a la hora de examinar la utilización de cualquier tipografía.

Como dice Tim “Todo lo que queda por hacer es probar el resultado y decidir por ti mismo si el tipo es aceptable en sistemas operativos y navegadores”.

También recomiendo la lectura del artículo Real Web Type in Real Web Context, del mismo autor.

Tim Brown trabaja en el Vassar College y escribe en Nice Web Type.

Enhorabuena Tim y gracias!!!!

Esta semana hemos tenido el seminario “Creación de una plantilla de WordPress con CS4″ impartido por Cristian Eslava y al que han podido asistir tanto alumnos presenciales como telemáticos.

Cristian Eslava es formador, diseñador gráfico, web, editorial y blogger no necesariamente por este orden.
Licenciado en Publicidad y Master en Creación de Productos Multimedia es un profesional de acreditada solvencia en el ámbito formativo. Su cartera de clientes también está dicomotizada, la del diseño con proyectos para entidades privadas y públicas, y los clientes de formación con miles de horas impartidas online y presencialmente a estudios de diseño, profesionales del sector y futuros diseñadores.

Este seminario� se encuentra ahora colocado en el grupo que estamos formando en Adobe Group, además de otros contenidos que esperamos ir aumentando paulatinamente.

Te invitamos a que visitesparticipar en el nuevo Adobe Group creado como red de intercambio profesional.

En este grupo podrás encontrar:

- eSeminarios de aprendizaje y debates en directo.
- Tutoriales.
- Vídeos de formación.
- Debates con expertos de las distintas herramientas.
- Promociones: libros, revistas, y otros elementos que se nos irán ocurriendo.

Para poder participar en las actividades del Adobe User Group debes crearte un ID de Adobe, mediante este identificador puedes acceder a muchos servicios de la plataforma de Adobe, y la información de tu perfil queda asegurada en su privacidad, spam, etc, puesto que es gestionada por Adobe.

- Puedes crear tu ID de Adobe.

- Accede a nuestro grupo.

- Para sumarte al grupo.

Una vez que seas miembro del grupo es una buena idea que incluyas la mayor cantidad de información posible en tu perfil, incluyendo una fotografía o avatar.

Estamos seguros de que juntos podemos hacer más cosas. Te esperamos.

Descargarse la plantilla

Plantillas CSS by css iav is licensed under a Creative Commons Reconocimiento-No comercial 3.0 España License.

Es muy posible que no queramos todos lo párrafos exactamente iguales, o que un encabezado en particular tenga una regla estilística diferente. Para ello, es posible definir clases dentro de los selectores para poder tratar estas excepciones de manera correcta.

¡A esto se le llama flexibilidad!

P {font-size: 11pt} p.cita { font-size: 10pt; font-style: italic }

En una primera definición del selector p, el cuerpo asignado es de 11 puntos tipográficos, sin embargo si el párrafo en cuestión es de la clase “cita”, éste adoptaría la segunda regla como suya, poniendo el cuerpo algo más pequeño, y en cursiva.

Una vez declarada esta excepción hay que indicar su uso. La clave está en el atributo class Aquí se muestra: <p class=”cita”> xxxxxxxxxx </p>

¿Estilos personales?

Es posible querer definir una clase en particular pero no aplicársela a un selector concreto. Sea:

.grande {font-size: 36pt}

Así le podemos aplicar la clase a cualquier etiqueta, simplemente indicándolo en su atributo class:

<ul class=”grande”>

Muchos programas de creación web tratan a estos estilos como “estilos personales” (Dreamweaver), pero en realidad son simplemente clases de uso genérico.

Bloque o carácter

Es posible que queramos aplicar un estilo a una selección de caracteres más que a un bloque delimitado por etiquetas HTML estándares como <p>, <h1> o <ul>.

Para ello tenemos la estupenda etiqueta <span>.

<p> Esto es <span class=”grande”> grande </span> y el resto no. </p>

Como se puede adivinar, las clases genéricas tienen aquí una de sus principales aplicaciones.

Selectores contextuales

Una curiosa aplicación es la de aplicar estilos a una determinada etiqueta siempre que esté dentro de los dominios de otra. Veamos.

strong {color: blue} h1 strong {color: green}

Tenemos una etiqueta como <strong>, que habitualmente pone los textos en negrita. Mediante la primera regla indicamos que ponga el texto en azul, además de su comportamiento habitual. Pero además le indicamos que en el caso que tenga como etiqueta padre a <h1> es decir, que el texto en negrita esté dentro de un encabezado de este tipo, el texto se escriba en verde.

La idea original era que el CSS fuera un lenguaje de estilo de propósito general, aplicable a otros formatos como el XML, el cual se extenderá masivamente en un futuro no muy lejano.

EL principal uso hoy en día es la vinculación con el formato inmortal HTML. Veremos como indicarle al explorador de la existencia una hoja de estilos

La etiqueta <style>

Dentro de la sección del encabezado, podemos declarar una hoja de estilos entre estas etiquetas:

<style>
<!—-
p {font-size: 11pt}
h1 {
color: green;
font-size: 18pt
}
–>
</style>

Esta hoja de estilos se compone de dos reglas, con dos selectores habituales: la etiqueta para los párrafos y la de encabezados de primer nivel.

El hecho de incluir la hoja entre comentarios estándar de HTML es para que navegadores antiguos que no reconozcan la etiqueta <style> no incluyan las reglas como contenido del cuerpo de la página, es decir, que simplemente la ignoren.

<link> o la hoja vinculada

En el ejemplo anterior la hoja está embebida o incrustada en el propio documento HTML, sin embargo, la auténtica potencia de los estilos CSS es la posibilidad de vincular los mismos estilos a múltiples páginas. Se indicaría así:

<link href="estilos.css" rel="stylesheet" type="text/css">

Siendo “estilos.css” el archivo que contiene exclusivamente las reglas que constituyen la hoja de estilos.
El uso de la etiqueta <link> también debe indicarse antes de que se cierre la etiqueta <head>.

Estilos sobre la marcha

Una práctica poco aconsejable, pero posible, es definir estilos en el propio cuerpo del documento, tal como se indica:

<h1 style=”color: red”>Primera parte</h1>

La auténtica potencia de los estilos reside en una premisa básica del mundo de la informática: sacar factor común de situaciones similares, por lo que definir un estilos para un sólo uso tiene escasas ventajas.

Bueno pues además de explicar éstos conceptos fundamentales sobre CSS aquí te dejo una plantilla diseñada con dos columnas.

Mediante sucesivas entradas iremos desglosando diferentes conceptos acerca de CSS, que podemos definirlo como (Cascade Style Sheet) Hoja de Estilo en Cascada conjunto de instrucciones escritas en HTML que definen las apariencias de una página web. El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirá de estándar para los navegadores.

Por lo tanto CSS es un lenguaje, y como tal es un conjunto de símbolos descritos junto a una gramática. A continuación se muestra el esquema básico de una regla CSS, elemento indivisible, y la definición de algunos términos básicos.

 
selector: cadena de caracteres que identifica a qué elemento del lenguaje se aplica la regla.
propiedad: un elemento del lenguaje CSS que representa una unidad estilística como el color (en la figura) o el interlineado. Hay unas cincuenta.
valor: el dato que indica la cantidad en la que se dimensiona la propiedad. Éste dependerá de la naturaleza de la ésta.
declaración: es un par propiedad-valor separado por dos puntos.,
regla: es la unidad básica del CSS y se compone de selector más declaración. La declaración/es se enmarca entre llaves.
Una regla puede contener más de una declaración, las cuales irían separadas por punto y coma:

p {
color: green;
font-size: 18pt;
 }

La plantilla de esta entrada, haz clik sobre la imagen y bájate la página a tu ordenador, el estilo está incrustado en la cabecera de la misma.