CSS, Clases e Identificadores

General

Continuando con la explicación sobre el uso de id y class en HTML, ahora corresponde revisar la segunda parte, cómo utilizamos estos atributos en CSS para aplicar diseño al contenido.

CSS utiliza selectores para identificar a qué parte de un documento se aplican los estilos. Los selectores son declaraciones de diversos tipos que permiten indicar con un nivel de detalle bastante preciso a qué se aplicarán las reglas de estilo. El selector más simple es el de elemento. Este selector identifica un elemento de HTML y aplica las reglas a todas las instancias de ese elemento en el documento. Por ejemplo:

p { font-size: 1em; }

En este caso, el selector determina que todos los elementos p utilizarán la regla indicada, según el ejemplo, su texto tendrá un tamaño de 1em. En consecuencia, este selector es uno genérico, que no permite un nivel de discriminación muy detallado. Se aplicará a todos los elementos que definamos, sin excepción.

Pero frecuentemente necesitamos seleccionar elementos con un grado de discriminación más refinado. Aquí es cuando entran los selectores id y class.

Cuando necesitamos seleccionar un elemento único dentro del documento para asignarle una regla específica, lo haremos a través del atributo que los identifica de modo exclusivo: el id. Como vimos en el post anterior, id permite identificar de modo único a un elemento, no puede haber dos elementos con un id con el mismo valor. Si por ejemplo tenemos un elemento definido como id="contenido", en CSS nos referiremos él del siguiente modo:

#contenido { margin: 1em 2em; }

Siempre que deseemos referirnos en CSS a un elemento con un id n, antepondremos el caracter # y luego, sin espacios, el id: #n.

En otras ocasiones necesitamos referirnos a un grupo de elementos que comparten una clase común. En el ejemplo del post anterior, mencionábamos una clase nota para identificar a párrafos usados como notas al pie. En este caso seleccionaríamos a estos elementos del siguiente modo en CSS:

p.nota { border: 1px solid #CCCCCC; }

El uso de class nos permite seleccionar un rango mayor de elementos. Hay una serie de usos más avanzados de este selector, además de otros más avanzados. Incluso es posible combinar diferentes tipos de selectores, pero eso queda para otro post, recordemos que esto es una introducción.

Para finalizar, en un post anterior titulado CSS y Semántica traté este tema un poco más profundamente.

Contenido y Presentación, Clases e Identificadores

General

Hace un par de días me escribió un lector de EFH para preguntarme la diferencia entre id yclass. Según mi experiencia en capacitaciones a equipos de diseño y clases en la universidad puedo decir que éste es uno de los conceptos que más cuesta asimilar cuando comienzas a trabajar en el esquema de HTML/CSS. Por lo tanto, aquí va mi aporte para aclarar las dudas.

Presentación y Contenido

Lo primero que tenemos que entender es que la idea tras el uso de CSS, es separar el diseño o presentación, del contenido. Esto suena simple pero es un concepto que toma tiempo dimensionar. Partamos por hacer algunas definiciones.

¿Qué es presentación? Todo aquello que sea una característica visual es presentación. Colores, espaciado, alineamiento, fuentes, tamaños, disposición, etc., son todos factores de diseño, que nada tienen que ver con el contenido.

Por otro lado, ¿qué es el contenido? Es el motivo para crear una página. Es el texto, imágenes y otros medios de los que trata un documento. Sí, dije imágenes y no fue un error. Hay que hacer una distinción importante, sin embargo: algunas imágenes son contenido, otras son presentación. Son fáciles de diferenciar, por ejemplo, la fotografía que acompaña a una noticia es contenido, porque aporta información y lo complementa. Una imagen usada como bullet en una lista es presentación, porque no aporta información al contenido, aunque haga la lectura más fácil o permita diferenciar los elementos que destaca.

Pero en el contenido hay un elemento subyacente que es clave para la separación real de contenido y presentación. Se trata de la estructura.

Estructura del Contenido

El contenido no sólo es el texto y los medios que constituyen la información. También es parte del contenido la estructura interna de éste. Esta estructura está dada por los tipos de datos, las relaciones internas y la jerarquía. Aquí es donde entra HTML.

HTML es un lenguaje de marcado, o para ser más claros, de descripción de contenidos. Cada elemento dentro de HTML está compuesto de dos partes: su contenido y la semántica. Veamos el siguiente ejemplo:

<h3>Estructura del Contenido</h3>

En este caso, el contenido es Estructura del Contenido, pero eso no es todo. Por sí sola, esa frase no tiene contexto ni otro tipo de información adicional, es sólo texto. Pero el hecho de estar encerrada en el elemento H3 de HTML entrega la información restante: este elemento es un título de tercer nivel, por lo tanto es un texto importante, es más importante que un párrafo, y probablemente define el contenido que sigue después de él. Pero es menos importante que un H2 o un H1, que definen contenido de mayor alcance dentro del documento.

Del mismo modo, cada elemento en HTML, y en mayor medida en XHTML, que busca depurar el vocabulario para eliminar los elementos de presentación, tiene un significado preciso. Sólo por nombrar algunos, A define el contenido como un vínculo y sus atributos hablan del destino (href), descripciones (title), idioma (lang), etc., STRONG y EMindican peso y énfasis, y así con los demás elementos.

Class y ID

En HTML y XHTML los atributos son información adicional que se aplica a los elementos. Por ejemplo, en el elemento IMG el atributo src indica la fuente o source para la imagen, su ubicación. Este atributo es específico para el elemento IMG, del mismo modo muchos elementos tienen atributos exclusivos. Pero hay otros que son globales y pueden ser aplicados a prácticamente cualquier elemento.

Dos de estos atributos comunes son id y class.

El atributo id permite identificar de modo único a un elemento dentro de un documento. De hecho id es la abreviación de identificador. Por lo tanto, sólo puede haber un único elemento con un identificar determinado. Por ejemplo, si un elemento tiene un id con valorpost-225 (id="post-225"), no podrá existir otro elemento en el documento que se llame igual.

El atributo class, en cambio, define la clase o tipo de un elemento. Por ejemplo, si observamos que frecuentemente utilizamos notas al pie en nuestros documentos, podemos crear una clase que se llame nota. Y la asociaremos a párrafos (P) que utilicemos para las notas:

<p class=”nota”>Esta es una nota al pie de página.</p>

Por definición, podemos asociar una clase a muchos elementos dentro de un documento, en cada caso estaremos diciendo: este elemento es de la clase o tipo X.

Como verás, la diferencia ahora es evidente. ¿Pero cómo uso esto para aplicar presentar el contenido con CSS? Eso lo explicaré en el próximo post con más detalle.

Diseño de Interacción: Patrones

General

Yusef Hassan publicó la semana pasada un artículo sumamente interesante y muy bien documentado, titulado Patrones de Diseño de Interacción (II): Estructura y Características, que es la segunda entrega de Patrones de Diseño de Interacción (I): Introducción. Me interesan particularmente los patrones de interacción, he publicado un par en este mismo sitio y tengo planeado continuar en la medida que el tiempo me lo permita. Me enteré de la publicación de Yusef mientras revisaba las estadísticas de efh y encontré unas referencias que provenían de una cita de los patrones que publiqué, Menú de Navegación Principal yMenú de Rastros. Gracias por la mención Yusef, un honor.