martes, marzo 06, 2012

Tutorial de desarrollo web, Parte XXII: Selectores de atributos CSS. Instrucciones CSS varias (1)

Previously, on The CubeBlog...
Parte XXI: Pseudo-clases y pseudo-elementos (2). Identificadores y clases (3)

Bien, episodio número 22 del tutorial de desarrollo web y parte de la última tanda de entregas de HTML y CSS. A partir de hoy y espero que durante pocas entregas más, les iré enseñando algunas instrucciones de CSS que pueden ser muy interesantes y tal vez no sean tan simples de entender. Puede que creáis que esto significa que ya hemos dado la mayoría de los elementos de HTML y CSS, pero ni de lejos. Tal vez en HTML sólo falten algunas pocas etiquetas (al menos, de HTML4, para aprender HTML5 todavía queda mucho) pero en CSS, incluso el CSS2, nos quedan una inmensidad de instrucciones por ver. Pero en este curso lo que intento es enseñarles a manejarse con estos lenguajes y aprender sus particularidades, ya que mostrar todos y cada uno de los posibles elementos de un lenguaje en un curso es exagerado.
Aún así, voy a ser bueno: estoy elaborando unas guías de referencia de ambos lenguajes con todos sus elementos para que podáis descargárosla y tenerlas siempre presente. Cuando la tenga completa la colocaré en los listados con posts antiguos que siempre pongo al comienzo de cada post del curso. Probablemente tarde tal vez unas semanas en hacerla, pero desde que la tenga hecha, editaré los posts a partir del que sea en que comience el JavaScript (en dos o tres semanas) para incluirlas, y ahí seguirá en todos los siguientes. También avisar, como anotación, a partir de que empiece el JavaScript habrá un pequeño borrado de dicho listado, dejando sólo el último post (a partir del cual podréis acceder a cualquiera de los posts anteriores, ya que en los posts de HTML/CSS sí seguirá existiendo este listado), más que nada para que la lista no se vuelva infinita, y empezaré a hacer una nueva lista a partir del primer post de la nueva etapa (respetando, eso sí, la numeración).
También comentarles que, antes de empezar con JavaScript, daremos un pequeño adelanto de HTML5 y CSS3, los cuales revisitaremos una vez terminemos de trabajar con JavaScript. Y, nada, paro ya de adelantarles mis planes para dejarles la resolución del último ejercicio y comenzar con la nueva entrega.
Hasta el momento, para elegir la etiqueta a la que se le aplicaría un estilo CSS en particular, lo que hacíamos era decirle el nombre de la etiqueta, o el valor de sus atributos "id" o "class". Sin embargo, existe un último método, para el cual lo que debemos hacer es introducirle el valor de un atributo a nuestra elección: los selectores de atributos.
Veamos un ejemplo. Tengamos el siguiente código HTML dentro de nuestro "body":

&lt:input type="submit" value="Enviar"/>

Como recordaréis si habéis seguido todo el curso, esta etiqueta crea un botón para enviar datos de un formulario. Recordamos que los "inputs" eran bastante distintos unos de otros dependiendo de su "tipo", sin embargo, de momento, salvo con clases o ids, no podíamos crear estilos particulares para cada uno de los tipos de inputs. Hasta ahora, ya que con los selectores de atributos podremos introducir códigos como el siguiente:

input[type='submit']
{
color: red;
}

Una vez introducido ese código, todos los "inputs" cuyo "type" sea "submit" tendrán la fuente de color rojo. Sin embargo, el resto de "inputs" (que ya vimos en su día) seguirán teniendo sus valores por defecto. Pero este código nos da aún más facilidades. Imaginemos lo siguiente:

<img src="img src="http://img84.exs.cx/img84/8653/emealcubo4uh.jpg" alt="Mi foto" />
<img src="http://img84.exs.cx/img84/8653/emealcubo4uh.jpg" alt="Otra vez la foto" />

Este código en principio nos mostraría esto:

Imaginemos que queramos que ambas imágenes tengan un borde sólido, pero no queremos usar el atributo "src" (que sería en este caso lo más lógico) porque tal vez una de las dos imágenes la cambiemos. Sin embargo, el otro atributo de ambas imágenes es "alt" y es distinto. ¿Cómo podríamos hacerlo? ¿Necesitaríamos crearles un class? Para nada, CSS nos trae una solución:

img[alt~='foto']
{
border: solid;
}

¿Qué hemos hecho aquí? Simple. En primer lugar, analizamos el contenido del "alt" y comprobamos que ambos tenían en su interior la palabra "foto". De esta manera, le decimos al CSS que aplique el estilo a las etiquetas "img" en cuyo "alt" contengan la palabra "foto" (es importante que sea una palabra completa, no podríamos, por ejemplo, darle el valor "oto"). Entonces el resultado sería el siguiente:

La parte más "extraña" del selector de atributos viene ahora. Recordaréis el atributo "lang" que, como vimos la semana pasada, puede ser usado en cualquier etiqueta y que define el lenguaje en que está escrito el contenido de la misma. Imaginemos que queramos definir un estilo para aquellas etiquetas con el "lang" definido en "español". En principio, podríamos hacerlo así:

[lang='es']
{
background-color: blue;
}

Sin embargo, existen casos en que el atributo "lang" puede ser a veces más largo, para aclarar que se está usando el dialecto de un país en concreto: "es-es" (España), "es-ar" (Argentina), "es-mx" (México), "es-co" (Colombia), etc. Claro, en el caso de usar estos valores de las etiquetas "lang", el anterior código no nos serviría, como tampoco nos serviría aunque le incluyéramos un ~ (ya que la palabra "es" no es una palabra independiente), pero tal vez queramos darle el mismo estilo a todas las etiquetas que tengan el "lang" en español, independientemente de qué dialecto sea. Para lograr esto usaremos el siguiente código:

[lang|='es']
{
background-color: blue;
}

De esta manera, todas las etiquetas "lang" que comiencen con "es" sucedidas de un guión tendrán el color del fondo azul. Este sistema puede ser usado con cualquier otro atributo, sólo deben de cumplirse esas dos condiciones: el valor a buscar deberá estar al comienzo del valor del atributo sucedido por un guión. El ejemplo del "lang" es porque es el atributo en el que más sentido tiene usarse, pero podríamos tener un caso como este:

<div class="superior-izquierda">

[class|='superior']
{
margin: auto;
}

Y, con esto, termina la última parte a destacar de CSS2, quedando sólo, como dije antes, unas cuantas instrucciones o conjuntos de ellas que me gustaría destacar su funcionamiento. Hoy empezaremos con dos de ellas:
En primer lugar, la más simple y que supongo que todos habremos entendido, son aquellas que muestren tamaños. Hasta ahora hemos visto que podemos darle valores absolutos en píxeles, como por ejemplo:

width: 200px;

Ese valor será absoluto ya que, ignorando cualquier factor externo, el elemento que tenga esta línea en su estilo tendrá un ancho de 200 píxeles. Sin embargo, también podríamos dar valores así:

width: 55%;

De esta segunda manera, el valor del ancho será relativo al tamaño del elemento que contenga la etiqueta que lleve esta instrucción. Por ejemplo, si en la etiqueta de 200 píxeles introducimos otra etiqueta con un ancho de 55%, esa segunda etiqueta medirá 110 píxeles. Sin embargo, si la metiéramos en una etiqueta de 100 píxeles, sin cambiar su CSS, mediría 55 píxeles.
Lo siguiente de lo que quiero hablar es de las instrucciones en cuyo interior debamos incluir un color. Hasta la fecha, por comodidad, siempre que he usado alguna instrucción que requiriera que introdujéramos un color, he usado el método de introducir los nombres en inglés, el cual, como habrán comprobado, funciona perfectamente.
Sin embargo, esto nos deja con una cantidad de colores un tanto limitada, pero para solucionar este problema, tenemos otros métodos que nos permitirá mostrar una gama más amplia de colores. Estos métodos son los siguientes:
  • Los colores hexadecimales constan de una almohadilla (#) y seis números hexadecimales (desde el 0 hasta la F... según este sistema después del 9 viene la A). Cada par de números representan uno de los colores: los dos primeros números representan el rojo, los siguientes dos el verde y los dos últimos el azul. Para entenderlo mejor, veamos unos ejemplos:
  • Este código representa el negro:
  • color: #000000;
  • Blanco:
  • color: #ffffff;
  • Azul:
  • color: #0000ff;
  • Verde:
  • color: #00ff00;
  • Rojo:
  • color: #ff0000;
  • Amarillo:
  • color: #ffff00;
  • Marrón
  • color: #a52a2a;
  • Como veis, hay una infinidad de combinaciones, con lo que hacer un estilo bonito no será por falta de medios.
  • El sistema RGB es similar en entendimiento al anterior, pero la sintaxis es distinta. Ahora los números variarán desde el 0 hasta el 255 y tendrán la siguiente sintaxis (en este caso, del color rojo):
  • color: rgb(255, 0, 0);
  • El sistema RGBA es igual que el anterior sólo que incluye una cuarta cifra que representa el "alpha", o sea, la opacidad o transparencia del objeto, y que irá desde 0.0 (transparencia completa) hasta 1.0 (opacidad completa). Aquí tenemos el color rojo bastante transparente:
  • color: rgba(color: 255, 0, 0, 0.3);
  • El sistema HSL (hue, saturation, lightness, o lo que es lo mismo, "tono, saturación y brillo") es muy parecido en sintaxis al RGB, pero toma estos tres valores como referencia en lugar del RGB. En este caso, el tono puede variar desde 0 hasta 360 (aunque 360 y 0 son ambos el mismo valor, ya que es un valor circular) mientras que los otros dos valores se incluyen con porcentajes. Por ejemplo, un rojo en este sistema podría ser:
  • color: hsl(0,50%, 50%);
  • Finalmente, también existe el sistema HSLA, que al igual que el RGBA introduce la variable "alpha" en este sistema:
  • color: hsla(0, 50%, 50%, 0.3)
Y bien, con esto termina esta entrega del curso. Repito que en una o dos semanas terminaremos, echaremos un vistazo por encima a las novedades que traen el HTML5 y el CSS3 y por fin comenzaremos con JavaScript (creo que tengo más ganas yo que ustedes). Y desde que la tenga preparada, colgaré la lista de referencia como otro documento de Google Docs, al igual que las soluciones de los ejercicios.

EJERCICIO

Ya realmente intentar mandaros a hacer un ejercicio de lo aprendido en este capítulo es un poco tontería, así que lo de esta semana más que un ejercicio es un reto, que quedará como el "trabajo final" de esta parte (y así anuncio que las próximas semanas hasta que no empiece JavaScript no habrán más ejercicios): montar una página web de una empresa. Sé que hay cosas que, evidentemente, no podréis hacer, pero intentad poner todos los conocimientos que tenéis hasta la fecha en construir una página con sus secciones, sus menús, sus imágenes, decorándolo como podáis mediante CSS, usando tablas para poner listas de precios, usando "div" y "span" para agrupar los elementos que necesitéis, incluyendo formularios de contacto (aunque no funcionen)... Una buena idea es ir revisando cada ejercicio del curso e ir pensando cómo podéis aplicar cada una de las cosas que hemos aprendido. Incluso, cuando publique las guías de referencia, también aprovecharla para revisar etiquetas e instrucciones que os den ideas de cómo aumentar vuestra página.

Y, con esto y un bizcocho me despido hasta la semana que viene. ¡Hasta más ver!