La verdad es que últimamente me estoy dando cuenta del potencial que realmente se le puede sacar al arte de separar el contenido de una página web de la presentación. Para ello es imprescindible conocer las capacidades del HTML, así como el PHP, Perl o Javascript, para usarlo debidamente junto a un buen puñado de líneas (u hojas) de estilos CSS.

Supongo que todo el mundo comienza en el mundillo del diseño web utilizando algún programa como Frontpage, Dreamweaver (que por cierto, ya han sacado el 8) o incluso el novísimo NVU. En mi caso comencé con el FP y seguí con el Dreamweaver hace ya bastantes años, pero fue en verano del año pasado cuando decidí dar el salto al mundo del sólo-código. Pasar de todo programa de edición web que generaba esos códigos HTML tan pesados y llenos de basura inservible -y que conste que soy consciente de lo dificil que es crear una aplicación que genere un código HTML a partir de acciones visuales y sea lo mayor efectivo posible-.

Asi que, comencé a examinar guías de HTML, aprender los elementos que lo formaban, de por qué no se deben usar elementos propietarios, de por que el estándar era bueno, aprendiendo a pasar la validación W3C en mi web, pero sobretodo, a generar mi propia página web con un simple bloc de notas mejorado.

Desde entonces he notado la mejoría, y bastante... Sobretodo al mirar cómo antes un documento HTML podía llegar a pesar más de 200kb y ahora, de apariencia idéntica, no sobrepasa los 15kb, con la consiguiente velocidad de carga de la web en el navegador al transmitir menos cantidad de información, el poder modificar rápidamente la tipografía de los enlaces, el tamaño de las fuentes que están dentro de una tabla, la justificación de un párrafo que a diferencia de otro debe ser centrado, etc...

El objetivo de mi entrada en el blog es animar a aquellos que aún usan un editor, a dar el salto, a diferenciar realmente la potencia que existe de escribir código, a diseñar visualmente, a hacer compatible una web con el máximo número de navegadores y no un triste «Se ve mejor en Internet Explorer 6». Al principio puede que cueste, pero os puedo asegurar que merece la pena.

David, Joaquín, el cliente y el lechero es un pequeño relato escrito por Diego, de Minid.net el cuál cuenta un poco más sobre esta historia de la separación de la presentación del contenido, y la importancia del CSS de obligada lectura.

Dentro de la gran cantidad de chapucerías con respecto a los estándares W3C que han cometido nuestros amigos de Microsoft en su querido Internet Explorer, hubo algún desarrollador que tuvo una brillante idea: la de implementar un sistema de condicionales dentro de un comentario SGML.

Me explico. El motor del Internet Explorer es capaz de reconocer dentro de un <!-- comentario --> un condicional con el cuál indicarle hacer una acción determinada si el navegador usado es el que se especifica. El formato es el siguiente:

<!--[if (condicional) IE (versión)]>
... código HTML ...
<![endif]-->


Donde condicional es:

Y en versión podemos indicar la versión del Internet Explorer deseada. Así podrían quedar cosas como las siguientes:

Si nuestro navegador es anterior al IE6...
<!--[if lt IE 6 ]>
Tu versión de Internet Explorer es demasiado antigua.
<![endif]-->


Si nuestro navegador es superior al IE5.5 carga una hoja de estilos determinada...
<!--[if gte IE 5.500 ]>
<link rel="stylesheet" type="text/css" href="estilosIE.css">
<![endif]-->


Si nuestro navegador es IE en cualquier versión...
<!--[if IE]>
¡Estás usando Internet Explorer! ¿Porqué no te bajas Firefox? ;-)
<![endif]-->


Esto puede ser ideal para diseñar soluciones y CSS Hacks para webs estándar que están perfectamente diseñadas pero se ven mal en el navegador del lado oscuro... al menos hasta que salga el esperado IE7.

¿Quien había dicho que el HTML+CSS tiene pocas posibilidades? Es poco conocido, pero existen unos patrones MUY utiles para establecer estilos según nos interese. Totalmente estándar y diseñado por el consorcio W3C. Lo explico a continuación:

Pongamos por ejemplo en este caso, dos enlaces: una página web, y un documento PDF de descarga, que queremos diferenciar visualmente y mediante estilos CSS según ese contenido:

Esto nos aparecería así, y como podemos ver, no se diferencia en nada uno del otro:

Ir a google
Referencia CSS

El truco pues, reside en especificar con un selector CSS el contenido que tienen esos enlaces. A continuación, el fichero CSS:

Hemos especificado que la etiqueta de enlaces ( a[alt="web"] ), que tenga el atributo de título ( a[title="web"] ) con el valor exacto "web" ( a[title="web"] ) tenga las propiedades que hemos definido entre llaves ( {} ), en este caso el color del texto rojo. Por lo tanto los enlaces quedarían así:

Ir a google
Referencia CSS

Esto, así de simple, no deja de ser una pequeña curiosidad, pero combinandolo con más estilos pueden quedar cosas realmente brillantes:

Este ejemplo, coloca un icono previamente creado de una página web (pagina.png), o de un fichero PDF (ficheropdf.png) antes de los enlaces. Asi el usuario sabrá a donde apunta el enlace, antes de pinchar sobre el o de mover el ratón sobre el hipervinculo. Se me ocurren cosas tan interesantes como una combinación de un :hover de un enlace y un cursor para el ratón, para que al mover nuestro ratón sobre un enlace en lugar de la flecha del cursor, nos aparezca un icono de Acrobat, una pequeña foto indicando que el enlace es una imagen, o el icono del emule si es un enlace ed2k.

Más interesante aún es que en el CSS2 el W3C incluye la posibilidad de hacer encajar un enlace con varios patrones usando ~= en lugar de = ( a[title~="web"] ). De esta forma, si en el atributo alt del enlace añadimos varias palabras separadas por un espacio (ejemplo: title="web pdf"), el buen navegador captaría las propiedades de los dos codigos CSS que habíamos visto.

Finalmente, también podríamos irnos un poco más allá, hasta el CSS3 y usar las combinaciones de expresiones regulares en CSS, que sin duda son mucho más utiles:

En el primero de los casos estamos aplicando el estilo a los enlaces con el atributo alt que comience por ed2k:// (descarga emule o similar), y en el segundo estamos centrandonos en los enlaces que finalicen en la extensión .doc.