martes, febrero 21, 2012

Tutorial de desarrollo web, Parte XX: Bordes exteriores. Pseudo-clases y pseudo-elementos (1) Identificadores y clases (2)

Previously, on The CubeBlog...
Parte XVII: La etiqueta iFrame
Parte XVIII: Metadatos. Comentarios
Parte XIX: Modelo de Caja CSS

¡Ya vamos por la vigésima entrega del tutorial de desarrollo web! ¿Quién lo hubiera dicho? Bueno, seguimos otra semana centrada en el CSS, empezando, por supuesto, con las resoluciones de los ejercicios de la semana pasada. Como ya dije la semana pasada, existen varias posibles soluciones y, si respetan los estándares y tienen el mismo aspecto, están bien, pero esa es mi versión (de hecho, con la que hice las páginas a las que hice las capturas la semana pasada).
Antes de empezar con un nuevo tema, vamos a mencionar una última parte del modelo de caja de la semana pasada (que, lo siento, se me olvidó mencionar). Aparte de las distintas capas que forman el modelo de caja (como hablamos la semana pasada: contenido, relleno, borde y margen), existe el "borde exterior" (outline), una etiqueta que funciona exactamente igual que la etiqueta border (teniendo sus respectivos outline-width, outline-style y outline-color) pero que, como su nombre indica, se situará en el exterior del borde, o sea, en la zona del margen.
Sin embargo, y a diferencia de las partes que forman el modelo de caja, el "borde exterior" no ocupa ningún espacio, sino que es simplemente decorativo. Con esto quiero decir que, una vez hayáis definido toda la caja de un elemento como vimos la semana pasada, añadirle un outline no estropeará lo que hayáis hecho desplazándolo de alguna manera, sólo incluirá una decoración más. Tomemos como ejemplo como dejamos el archivo "box-model.html" la semana pasada, ¿lo recordáis?


Bueno, partiendo de este punto, ahora vamos a añadirle la siguiente instrucción:

outline: 3px solid green;



Podemos apreciar que, a pesar de haberle añadido el outline, la dimensión de nuestras "cajas" ha quedado intacta, manteniendo el mismo margen con la otra "caja". Simplemente ha sido algo decorativo.
Bien, ahora que hemos visto el outline, algo bastante simple, creo yo, vamos a algo un poco más complejo. Las "pseudo-clases" y los "pseudo-elementos" CSS.
Hasta ahora, para crear nuestras instrucciones CSS hemos ido utilizando instrucciones genéricas para un elemento HTML en particular, instrucciones un poco más específicas para aquellos elementos a los que le hayamos asignado una clase, e instrucciones aún más específicas para aquellas a las que le hayamos asignado una id, funcionando más o menos de esta manera:

p
{
color: blue;
}


p.centrado
{
text-align: center;
}


p#titulo
{
font-size: 30px;
}

De esta manera, le decíamos que todos los elementos "p" dentro de nuestro documento debían tener la fuente de color azul. Además, aquellos "p" a los que le asignáramos la clase "centrado" tendrían el texto alineado al centro. Finalmente, el "p" de cada documento al que le asignáramos la id "titulo" (debería sólo haber uno como máximo por documento) tendrá como tamaño de fuente 30 píxeles. ¿Vamos a cambiar eso? No, pero vamos a añadir unas cuantas cosas útiles para hacer que nuestra página sea más vistosa.
En primer lugar, decir que, después de haber buscado y rebuscado una definición correcta para estos dos conceptos, sobre todo uno que deje claro cual es la diferencia, me he encontrado con demasiada teoría que al final no sólo no dejaba nada claro, sino que luego en la práctica uno se da cuenta de que no tienen sentido. De esta manera, he decidido hacer unas definiciones "prácticas" a partir de mis conocimientos, y dejaré a los teóricos que teoricen.
Aunque en muchos cursos veréis que tratan primero las pseudo-clases que los pseudo-elementos, yo lo voy a hacer al revés. ¿Por qué? Porque los pseudo-elementos me parecen más simples y ayudan a prepararse para las pseudo-clases.
Cuando en CSS damos instrucciones para un "pseudo-elemento", estas reglas se aplicarán, como su nombre indica, sólo a una parte del elemento en cuestión, no afectando al elemento completo. De este modo, hay cuatro tipo de pseudo-elementos, y a medida que los vayamos viendo, iremos aprendiendo su utilización:

  • Nuestro primer pseudo-elemento será el pseudo-elemento first-line. Como su nombre indica, este pseudo-elemento representa la primera línea de un elemento, por ejemplo, un elemento "p". Imaginemos que queremos que la primera línea de los párrafos de nuestro documento sean azules y el resto, negros. Podríamos incluir el siguiente código:

  • p:first-line
  • {
  • color: blue;
  • }

  • Considerando que, por defecto, nuestro documento tiene la fuente del color negro, con esta instrucción habríamos logrado nuestro objetivo. Cogiendo como ejemplo nuestros primeros ejercicios, en concreto, el del Quijote, y modificándolo un poco, nuestro resultado debería ser:
  • Para dejar claro lo que hemos hecho en el código, podemos verlo por partes:
    • En primer lugar, hemos indicado de qué etiqueta queríamos tomar el "pseudo-elemento", en este caso, de la etiqueta "p".
    • A continuación, y usando los dos puntos (:) para indicar "pseudo-elemento", hemos introducido el nombre del "pseudo-elemento", en este caso, el ya mencionado first-line. De este modo, todas las instrucciones que introduzcamos se aplicarán sola y únicamente a la primera línea de cada "p" que tengamos en nuestro documento.
    • Finalmente, hemos introducido las instrucciones como siempre solemos hacerlo.
  • El lector puede comprobar que si agranda o encoge la pantalla, moviendo el salto de línea de sus párrafos, el color de la fuente se irá modificando del texto para siempre adecuarse a la primera línea del texto.
  • Nuestro segundo pseudo-elemento es de unas características muy similares al anterior, en este caso first-letter. Funciona exactamente igual pero, en vez de con la primera línea, con la primera letra. Simple.
  • En tercer lugar, vamos a enseñar el pseudo-elemento before. Este pseudo-elemento sólo servirá para introducir algo justo al comienzo de un elemento, como una imagen, o un texto. Es bastante extraño, pero con ejemplos lo veremos enseguida:

  • p:before
  • {
  • content:url('http://img84.exs.cx/img84/8653/emealcubo4uh.jpg');
  • }

  • Como podemos ver, le hemos indicado que, "antes" de cada párrafo, introduzca una imagen. De este modo, si este código lo introduzco en la página de antes, lo que veríamos sería:
  • Vemos que ahora, antes de comenzar cada línea, debido a la instrucción que le hemos dado al "pseudo-elemento" before, siempre aparece la imagen que he introducido. Sobre la instrucción content que hemos usado aquí hablaremos en otra ocasión, ya que tiene bastante de lo que hablar. Aparte de eso, podemos introducir otras instrucciones CSS. Por ejemplo, vamos a modificar este pseudo-elemento y ahora vamos a escribirlo así:

  • p:before
  • {
  • content:"Párrafo: ";
  • color: red;
  • font-size: 15px;
  • }

  • El resultado sería el siguiente:
  • Como anotación, hacer ver el hecho de que tras escribir "Párrafo:" introduje un espacio antes de cerrar las comillas dobles. Para los familiarizados con la programación es una práctica común pero, ya que esto lo estoy escribiendo para gente completamente nueva en este mundillo, está bien mencionarlo. El hecho es que, si no introducimos ese espacio, la palabra "Párrafo:" quedaría pegada con la primera palabra del párrafo (en nuestro caso no porque en su día introdujimos una serie de espacios en modo de "indentado" al comienzo del párrafo, pero no será lo habitual y, como dije en su día, no es lo que se debe hacer, ya que con CSS se puede indentar directamente). De este modo, introduciendo un espacio al final del contenido del content evitamos que el texto se pegue.
  • Finalmente, el último de los cuatro "pseudo-elementos" no podía ser otro que el pseudo-elemento after, que funciona exactamente igual que el before sólo que, como su nombre indica, al final de la etiqueta.
Para terminar con la entrega de esta semana, vamos a hablar un poco de nuevo de los identificadores y clases, ya que en la novena entrega hablamos de ellos pero dejamos algunos puntos sueltos, y es la hora de hablar sobre ellos (al menos todo aquello que tenga que ver con HTML y CSS). Ya repasamos anteriormente cómo en CSS podemos hacer referencias a elementos, clases e identificadores HTML usando los símbolos "." y "#" (o no usando ninguno). También  hablamos en su día de cómo el HTML es un lenguaje jerarquizado. Bien, usando esas dos ideas, podemos hacer cosas como la siguiente:

#id1 .class1 p
{
color: blue;
}

¿Qué locura acabo de hacer ahí? Bueno, creemos un documento HTML básico, apliquémosle ese estilo y en su "body" introduzcámosle esto:

<div id="id1">
<div class="class1">
<p>Esto está dentro de "class1" que está dentro de "id1"</p>
</div>
<p>Esto está dentro de "id1" pero fuera de "class1"</p>
</div>
<p>Esto está fuera tanto de "class1" como de "id1"</p>

Su resultado sería:
Analicemos la primera línea de CSS:
  • En primer lugar, le hemos dado la instrucción para los elementos que tengan el identificador "id1". Pero ahí no se queda la cosa.
  • En segundo lugar, hemos dicho que es para los elementos que tengan la clase "class1". Y ahí no se acaba.
  • Finalmente le hemos dicho que es para los elementos "p".
¿Lioso? Yo creo que es bastante simple. Con CSS podemos aprovechar la jerarquía de HTML para dar instrucciones más concretas. En este caso, las instrucciones ahí dadas sólo se aplicarán a aquellos párrafos que se encuentren dentro de un elemento de clase "class1", los cuales a su vez se encuentren dentro del (único) elemento "id1". Realmente podemos recombinar ese código como queramos y podemos darle tantas vueltas como nos parezca, sólo necesitamos que se respete la jerarquía HTML. Ejemplos:

p a - Se aplica a todos los enlaces dentro de un párrafo.

table .azul - Se aplica a aquellos elementos dentro de una tabla que tengan la clase "azul".

.rojo #nombre - Se aplica a aquel elemento con identificador "nombre" que se encuentre en algún elemento de clase "rojo". Si se encuentra fuera, no se le aplica.

table tr.tercerafila th p#nombrepropio a - Un enlace que se encontraría dentro de un párrafo identificado como "nombrepropio" dentro de un th situado en una fila de clase "tercera fila" dentro de una tabla.

Como podéis ver, hay infinitas combinaciones, todo depende de cual compleja sea vuestra estructura y la necesidad que tengáis de hacerlo tan complejo. Por ejemplo, en el último, no habría hecho falta decir que se trataba de un elemento "table" ya que un "tr" nunca estará fuera de un "table". Aunque también podéis incluirlo para que os quede más clara la estructura, eso ya está a gusto del desarrollador.
Finalmente, y para unir ambos temas, vamos a explicar cómo podemos añadir pseudo-elementos con identificadores y clases. Realmente no podría ser más simple:

p#primerparrafo:first-line

p.parrafosimpares:first-line

Y con esas líneas podéis conseguir que el párrafo con identificador "primerparrafo" (en el primer caso) o los párrafos con clase "parrafosimpares" (en el segundo caso) tengan la primera línea modificada de la manera que queráis. Y, por supuesto, eso se aplica a cualquiera de los otros pseudo-elementos.
Creo que no ha sido muy difícil, ¿no?

EJERCICIO

Esta semana, como ya se imaginarán, tratará de pseudoclases. Para ello, cogeremos el siguiente texto, separándolo en tres párrafos. En el primero, la primera línea debe de tener el texto subrayado. Todas las primeras letras de cada párrafo deben de ser mucho más grandes que el resto. Aparte de eso, al final de cada párrafo debe de haber alguna imagen que queramos incluirle, como un punto o algo así.
La Revolución industrial fue un periodo histórico comprendido entre la segunda mitad del siglo XVIII y principios del XIX, en el que Gran Bretaña en primer lugar, y el resto de Europa continental después, sufren el mayor conjunto de transformaciones socioeconómicas, tecnológicas y culturales de la historia de la humanidad, desde el neolítico.
La economía basada en el trabajo manual fue reemplazada por otra dominada por la industria y la manufactura. La Revolución comenzó con la mecanización de las industrias textiles y el desarrollo de los procesos del hierro. La expansión del comercio fue favorecida por la mejora de las rutas de transportes y posteriormente por el nacimiento del ferrocarril. Las innovaciones tecnológicas más importantes fueron la máquina de vapor y la denominada Spinning Jenny, una potente máquina relacionada con la industria textil. Estas nuevas máquinas favorecieron enormes incrementos en la capacidad de producción. La producción y desarrollo de nuevos modelos de maquinaria en las dos primeras décadas del siglo XIX facilitó la manufactura en otras industrias e incrementó también su producción.
Así es que en la Revolución industrial se aumenta la cantidad de productos y se disminuye el tiempo en el que estos se realizan, dando paso a la producción en serie, ya que se simplifican tareas complejas en varias operaciones simples que pueda realizar cualquier obrero sin necesidad de que sea mano de obra cualificada, y de este modo bajar costos en producción y elevar la cantidad de unidades producidas bajo el mismo costo fijo. 
(Texto extraído de Wikipedia)
 Y, de momento, eso es todo. La semana que viene continuaremos, viendo las pseudo-clases

1 comentario:

curso de diseño web dijo...

Muy buen aporte. Los diseñadores web cuentan con innumerables oportunidades de trabajo a partir de la gran necesidad de las empresas de contar con un sitio para publicitar sus productos o servicios. Por este motivo capacitarse en esta área puede ser muy conveniente.