martes, diciembre 06, 2011

Tutorial de desarrollo web, Parte IX: Identificadores y clases (1)

Previously, on The CubeBlog...
Parte I: Introducción
Parte II: Hola, mundo
Parte III: Estructurando el texto. Encabezados, párrafos y saltos de línea. Entidades
Parte IV: Hipervínculos e imágenes. Atributos. Rutas absolutas y relativas
Parte V: Introducción al CSS
Parte VI: Jerarquía en HTML. Herencia en CSS
Parte VII: Tablas (1). Bordes CSS (1)
Parte VIII: Tablas (2). Bordes CSS (2)

Novena semana del tutorial de desarrollo web. Esta semana vamos a explicar un concepto que puede que sea más difícil de entender que todo lo que hemos hecho hasta ahora, pero vamos a intentar dar todo lo que podamos. ¿Estamos? Bueno, antes de que se me olvide: los ejercicios de la semana pasada.
Esta semana, como vemos en el título, vamos a hablar de clases y de identificadores, dos atributos de HTML que nos servirán sobre todo para comunicarse con otros lenguajes, aunque, en algunos casos, también servirán dentro del propio HTML. Aquellos que sepan de programación, la palabra "clase" les sonará familiar, pero aquí vamos a tratar desde cero este asunto, además de que las clases de HTML no se parecen a las clases de programación.
En primer lugar, vamos a ver los dos atributos de los que vamos a hablar: los atributos class e id. No es difícil entender que el primero es la "clase" y el segundo, el "identificador". Pero, aunque la palabra "identificador" nos indica de forma bastante intuitiva lo que puede significar este atributo, la palabra clase no nos lo deja tan claro. Vamos al meollo.
Una clase, en cualquier lenguaje (de programación, marcado, de lo que sea...), es una "plantilla" para crear "objetos". En HTML esto se traduce como una serie de instrucciones, generalmente (y, de momento que yo sepa, únicamente) de CSS, que se aplicarán a todos los elementos ("objetos") de la clase. Es un poco difícil de entender teóricamente, pero para eso en este curso no reparamos en gastos a la hora de inventar ejemplos, así que vamos a mostraros el funcionamiento de una clase HTML.
Imaginemos que tenemos una página como la siguiente:
Si acercamos la imagen y vemos el texto, vemos que tenemos, entremezclados, párrafos que deberían ser azules y párrafos que deberían ser rojo, aunque, como aún no he aplicado estilo, todos son negros aún. Con lo que sabemos hasta ahora podríamos solucionarlo perfectamente: aplicando estilo a cada uno de los párrafos. Sería una opción perfectamente válida, pero, consideremos que cada vez que cambiemos uno de los dos tipos de párrafos (los azules o los rojos) deberamos cambiar todo el estilo del párrafo. Por ejemplo, que una vez terminado nuestro documento, o tal vez cuando queramos actualizarlo, queramos que todos los párrafos azules tengan un tamaño de fuente mayor, pero que los rojos se mantengan iguales. ¿Tenemos que cambiar el tamaño de la fuente en todo los párrafos azules? Según lo que sabemos hasta ahora, sí, pero si hemos creado clases, esa idea no será necesaria.
De esta manera, antes de empezar a dar estilo, vamos a introducir en cada uno de los párrafos el siguiente atributo:

<p class="azul">

<p class="rojo">

Por supuesto, deberemos incluir la clase correspondiente a cada uno de los párrafos. Con esto, hemos dicho a cada uno de los párrafos que son objetos de la clase "azul" o de la clase "rojo". La ventaja del HTML es que nos deja crear objetos de clases que no han sido aún definidas (como es este caso). Pero ahora es cuando vamos a definir cada una de las dos clases. Para ello, haremos una etiqueta "style" en el "head" de la página que dirá lo siguiente:

<style type="text/css">
p.azul
{
color: blue;
}

p.rojo
{
color: red;
}
</style>

Guardamos, actualizamos y...
¡Perfecto! Los párrafos tienen todos el color que debían. ¿Cómo lo hemos hecho? Aunque es bastante intuitivo, lo explicaré: en la etiqueta "style" hemos indicado que los contenidos de las etiquetas "p" cuyo valor del atributo "class" sea "azul" (p.azul) deberán tener el color de la fuente en dicho color (color:blue;) y luego hemos hecho lo mismo pero para aquellas que tengan valor "rojo" en el "class" (p.rojo). De esta manera, es muy sencillo crear clases personalizadas en HTML/CSS que nos servirá no sólo para estructurar mejor el texto, sino también para poner estilos distintos en distintas partes del documento sin tener que recurrir al atributo "style", sobre todo cuando, en casos como este, son varias veces cuando vamos a repetir el mismo estilo.
No será difícil adivinar que las instrucciones de "clase" están las últimas en la "cascada" que forma el CSS. De esta manera, como ya hablamos hace unas semanas, cuando creamos CSS en primer lugar van todas las instrucciones de las etiquetas padre, en orden de la más alta a la más baja (en nuestro caso, "html", "body" y "p"), siempre aplicando los estilos en el orden de empezar por el archivo externo, luego la etiqueta "style" y finalmente el atributo "style". Sin embargo, justo antes del atributo "style" del objeto en cuestión será cuando se ejecuten las instrucciones de la "clase". Por ejemplo, y para entenderlo, en nuestro documento vamos a decirle que todos los "p" tengan color naranja, añadiéndole esta instrucción:

p
{
color:orange;
}
Podemos apreciar que no se aplica ningún cambio, ya que, tras ver las instrucciones genéricas para las etiquetas "p", el navegador mira las instrucciones específicas para las "p" de clase "rojo" y "azul". Sin embargo, si vamos al primer párrafo y le escribimos:

<p class="azul style="color:orange;">

Observamos que, en esta ocasión, el párrafo sí cambia, ya que siempre siempre siempre siempre el atributo "style" de la etiqueta en cuestión (que no el atributo "style" de una etiqueta padre) será la que tenga la última palabra sobre el estilo de dicha etiqueta. De este modo, si ya teníais un esquema mental de en qué orden se ejecutan las instrucciones CSS, ya sabréis en qué hueco introducir las instrucciones de clase, como siempre, primero aquellas del archivo externo y luego las de la etiqueta "style" (si es que está declarada la clase en ambos archivos).
Al igual que las instrucciones genéricas, también las instrucciones de clase pueden aplicarse a más de un elemento. Por ejemplo, creemos un h1 en nuestro documento:
Para que esa línea diga la verdad, sólo hemos de añadir las letras "h1" en la clase, así:

p,h1.rojo
{
color: red;
}

Como anotación, el punto que va justo antes de la clase nunca debe de tener ningún espacio ni por delante ni por detrás para que funcione correctamente. Bueno, una vez aplicado este código, actualizamos y:
Voilà! Ahí lo tenemos. Aunque podemos hacer que nuestras clases se apliquen a un número más extenso de etiquetas simplemente eliminando las etiquetas a las que se le aplicará, así:

.rojo
{
color: red;
}

Con este código, cualquier etiqueta con clase "rojo", independientemente de qué etiqueta sea (siempre que sea una etiqueta que pueda contener estilos, lo cual son la gran mayoría), tendrá en su contenido el color de fuente rojo.
Finalmente, vamos a hablar de los identificadores. Los identificadores se establecen, como ya dije, con la etiqueta "id" y su sintaxis es algo como esto:

<p id="especial">

El identificador, ahora que sólo estamos trabajando con HTML/CSS, nos parecerá un atributo un tanto tonto, aunque aún así podemos encontrarle alguna utilidad que explicaré al final del capítulo de hoy. Pero antes hablemos un poco sobre él. Como les digo, el identificador sirve para dar un nombre único a una etiqueta de nuestro documento. Aunque el documento no dará error si dos etiquetas tienen el mismo identificador, la norma y la lógica indican que no deba de ser así, además de poder dar algún fallo en ejecución.
Por lo general, el identificador será mucho más interesante de usar en JavaScript o en PHP, pero aún en HTML y CSS tiene alguna utilidad. En primer lugar, en CSS podemos tratar al identificador exactamente como tratamos a las clases, sólo que con esta sintaxis:

p#especial
{
color: yellow;
}

De esta manera, con este código, el (único) párrafo del documento con el identificador "especial" tendrá el color de su fuente amarillo. Recalco lo de único en el documento, ya que esta regla podría estar en un archivo externo, y como tal, se aplicará a varios documentos, en los cuales puede haber identificadores de valor "especial" en cada uno, pero nunca dos "especial" en un mismo documento. Y, al igual que con las clases, el código CSS del identificador se puede aplicar para cualquier etiqueta, de la misma manera:

#especial
{
color: yellow;
}

En la jerarquía en cascada del CSS, las instrucciones del identificador están por debajo de las de la clase, o sea, que las instrucciones que se le den a un identificador anularán todas aquellas instrucciones de clase que la contradigan. Por ejemplo, imaginemos que en nuestro ejemplo, al primer párrafo rojo le añadimos el identificador "especial" (además de escribir alguno de los dos últimos códigos en nuestra etiqueta "style") así:

<p class="rojo" id="especial">

Como vemos, a pesar de que en la clase le indicamos que ese párrafo debe de ser rojo, las instrucciones del identificador anulan esa orden ya que en el identificador le decimos que lo queremos amarillo. Una vez más, sólo la etiqueta "style" en el propio párrafo podrá anular una instrucción del identificador.
Como les he dicho, el identificador lo podemos ver poco útil e incluso bastante inútil en este momento, ya que con clases podemos hacer lo que hacemos con el identificador e incluso más, pero tiene una utilidad a nivel de HTML que sólo a partir de HTML5 se ha convertido en realmente útil y es para hacer enlaces dentro de un mismo documento.
Muchos hemos visto páginas como Wikipedia, en la que un índice hecho por hipervínculos nos lleva a distintas partes dentro del mismo documento. Con lo que sabemos hasta ahora sólo sabemos hacer enlaces que lleven al comienzo de un documento, entonces, ¿cómo hacer esto? Con identificadores.
Cuando creamos el párrafo al que queremos que referencie nuestro enlace le escribiremos un identificador, por ejemplo:

<p id="destino">

Y ahora en nuestro enlace, sólo deberemos referenciarlo al identificador. Puede ser de dos maneras, si el enlace referencia a un identificador dentro del mismo documento, o si referencia a un identificador de otro documento:
  • Si el enlace no pretende que salgamos de la página, sino simplemente quiere llevarnos a otro punto dentro de la misma página, nuestro enlace sólo contendrá una almohadilla (#) seguida del nombre del identificador (igual que en su declaración). Por ejemplo: <a href="#destino">. Este enlace referenciará a una etiqueta que tendrá el identificador "destino" dentro de la misma página.
  • Si, por contra, el enlace apunta a otra página, y en concreto, a una parte específica de la otra página, lo que deberemos hacer es escribir la ruta de dicha página y, finalmente, la almohadilla seguida del nombre del identificador, de esta manera: <a href="pagina.html#destino">. Así, al pulsar en el enlace, entraremos en el documento "pagina.html" e inmediatamente nos situará en la etiqueta que tenga el identificador "destino".
De esta manera, por ejemplo, si pulsárais aquí, accederíais al principio de este post, ya que le dije que al primer párrafo que su "id" debía ser "principiodelpost" y luego este enlace ha sido así:

<a href="#principiodelpost">aquí</a>

Simple y útil, ¿no?
Y con esto termina la lección de esta semana. Ahora los acostumbrados ejercicios:

EJERCICIOS


Volviendo a acceder a los archivos de la semana pasada, vamos a crear un nuevo archivo llamado "compraventa.html" en cuyo principio pondremos la lista de compras, para luego ser seguido por la lista de ventas. Los enlaces de "index.html" deberán referenciar a esta página (en vez de a los dos archivos por separado) pero, al entrar, debe ir directamente a la lista que se haya elegido. Además, en el archivo de estilo externo debemos dar estilos distintos a las tablas de "index.html" y de "faq.html".

Y, con esto y un bizcocho, nos vemos en una semana a las 9... O a lo largo de esta semana, cualquier día a esa misma hora.

No hay comentarios: