CSS y HTML (parte 2)

Mario González - Blog sobre desarrollo web

Introducción a HTML y CSS (2ª parte)

| ,

Éste es el segundo de dos artículos sobre los lenguajes HTML y CSS. En el primer artículo vimos en qué consiste cada uno de estos dos lenguajes, en éste hablaremos acerca de los estándares web, y daremos alguna que otra guía para no perderse entre especificaciones.

Ver artículo anterior: Introducción a HTML y CSS (1ª parte)

Estándares

El desarrollo web se extendió durante la década de los 90 gracias a la creación, por parte de Tim Berners-Lee, del HTML en el año 1991. El HTML permitía (y permite) desarrollar una web sin tener un nivel elevado de conocimientos de informática. Para crear una página, no hacía falta ser un programador ni siquiera conocer en profundidad los entresijos del lenguaje HTML. Bastaba con conocer las etiquetas principales y tener un navegador instalado para ir viendo cómo quedaba.

A esto hay que añadir que los navegadores están diseñados para perdonar los errores en el HTML o CSS. Si creamos una página con errores en el código HTML, el navegador no dejará de mostrarla. En algunos casos ignorará los errores y en otros intentará enmendarlos adivinando cuál era el código correcto que queríamos escribir. Este comportamiento, que en realidad es uno de los factores que han permitido que tanta gente pueda crear webs, provoca algunos problemas:

Cada navegador tiene su propia forma de enmendar los errores. Esto hace que una web con errores no se vea igual en todos los navegadores. En el peor de los casos, puede ocurrir que se vea bien en el navegador que utilizamos para probar nuestra web (con lo que nos quedaríamos tranquilos), y en los demás se vea mal.

Mientras que muchos navegadores perdonan, otros no son tan permisivos. Puede que la misma web aparezca correctamente (o intente hacerlo) en un ordenador, pero en un móvil moderno simplemente no aparezca nada (porque su navegador no ha perdonado el error).

Es difícil detectar los errores. Cuando se es consciente de que hay un problema en el código pero no se sabe dónde, no es nada fácil detectar el error con el navegador. Para ello hay que acudir a herramientas externas (o extensiones), que analizan el código y detectan errores.

Sin embargo, tanto el HTML como el CSS tienen unas reglas de uso bien definidas. Para cada versión de estos lenguajes, existen unas especificaciones documentadas que incluyen tanto qué elementos del lenguaje están permitidos como cuáles se han desechado de antiguas versiones, cuáles son las reglas sintácticas para usar estos elementos, y para qué sirve cada uno de ellos. Por ejemplo, en las especificaciones de las primeras versiones de HTML se incluían como etiquetas válidas <center>, <font>, o <blink> (esta última está en el top five de las webs de los 90), mientras que en las últimas versiones estas etiquetas se han declarado obsoletas.

Las especificaciones de HTML y CSS han ido evolucionando desde que fueron creadas. Así, el HTML llegó hasta la versión 4.1, se quedó ahí mientras se popularizaba el uso de XHTML en sus versiones 1.0 y 1.1, y en los últimos años se ha empezado a desarrollar la versión HTML5, mucho más enfocada a una web semántica. Del mismo modo, el CSS empezó con la versión 1, luego llegó la 2 y más tarde la 2.1, que es la más extendida actualmente. Casi paralelamente a la versión 5 del HTML, se está desarrollando la versión 3 de CSS. Tanto las especificaciones HTML5 como las de CSS3 van siendo implementadas poco a poco en las nuevas versiones de los navegadores y suponen el futuro inmediato de la web.

Dominar los estándares implica saber cuál es la versión recomendada de HTML y CSS en cada momento, estar al tanto de qué nuevas especificaciones se van implementando, y conocer el nivel de soporte que tiene cada elemento en los navegadores más usados. Por ejemplo, si queremos aplicar bordes redondeados mediante CSS, debemos saber que las versiones de Internet Explorer 8 y anteriores lo ignorarán, mostrando bordes rectos. Si no conocemos bien los estándares, nos encontraremos con que nuestro flamante diseño probado y requeteprobado en las últimas versiones de Firefox, Chrome e Internet Explorer, se ve totalmente descuadrado en Internet Explorer 7. Es un ejemplo claro de cómo conocer los estándares nos ayudará a controlar lo no estándar.

Herramientas y consejos

Este tema será tratado más adelante en un artículo propio, pero ya que estamos en materia, expondremos aquí algunos consejos y herramientas para conseguir un desarrollo más estándar.

Utiliza siempre, siempre, siempre un DOCTYPE.

El DOCTYPE (Document Type Declaration) le dice al navegador qué versión de HTML estás usando, o mejor dicho, a qué especificación se debe atener a la hora de interpretar el código. Si se le especifica un DOCTYPE al navegador, éste sabrá qué reglas utilizar (mostrará la web en modo estándar), pero si no lo hacemos, el navegador mostrará la web en modo Quirks, que a grandes rasgos significa que asumirá que eres un desarrollador que no tiene mucha idea y que intentará corregir tus errores como buenamente pueda. Como dijimos antes, cada navegador tiene su manera de corregir los errores, así que el resultado será una página que no se ve igual en los diferentes navegadores.

Para especificar el DOCTYPE, hay que incluir una etiqueta al principio del documento HTML, cuyos atributos determinarán qué documento de especificaciones deberá seguirse. Por ejemplo:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Esta etiqueta le dice al navegador que se guíe por las especificaciones de XHTML 1.0, en su versión estricta (hay otras versiones, como la transitional o la frameset), que podrá encontrar en un documento en la ruta que hay al final de la etiqueta. Si quisiéramos indicarle las especificaciones de HTML 4.1, escribiríamos:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

Y si quisiéramos que se guiara por las especificaciones de HTML5, sóĺo tendríamos que escribir:


<!DOCTYPE html>

Monta un taller de pruebas.

La web que vas a desarrollar la va a ver gente desde Firefox, desde Chrome, desde Internet Explorer, desde Windows, desde Linux, desde OS X, desde portátiles, desde notebooks, desde tablets, desde móviles… Lo ideal sería poder reproducir todas esas situaciones, pero lo normal es reproducir las que se puedan y emular el resto. En cuanto a los navegadores, lo ideal es tener instalados los principales (Firefox, Chrome, Internet Explorer, Safari y Opera). En cuanto a los sistemas operativos, se puede tener más de uno instalado en el mismo ordenador, trabajar con el que más nos guste y usar los otros sólo para probar las webs. Respecto a las versiones antiguas de los navegadores, puedes usar máquinas virtuales si estás en Linux, utilizar diferentes usuarios si estás en Windows (Internet Explorer tiene modos de compatibilidad con versiones antiguas, pero no es 100% exacto), o usar herramientas online como Browsershots o IE NetRenderer. Por último, para tablets y móviles hay emuladores online que te permitirán hacerte una idea de cómo queda la web en esos dispositivos, aunque aún están un poco lejos de una emulación real. Si quieres tomarte en serio la adaptación a smartphones de una web, es mejor disponer de uno.

Es importante ir probando la web en los diferentes dispositivos o navegadores mientras se está desarrollando. Esto nos llevará menos tiempo que desarrollarla por completo y luego empezar las pruebas. Lo más seguro es que haya que retocar cosas y el resultado suele ser un código más sucio y menos robusto (más propenso a fallar).

Utiliza los validadores.

El W3C (World Wide Web Consortium) pone a nuestra disposición un validador para HTML y un validador para CSS. Ambos permiten introducir directamente código, subir un fichero o especificar una URL para analizar. También existen extensiones para los navegadores (HTML y CSS para Firefox, HTML para Chrome).

Ante la duda, comprueba la compatibilidad

de etiquetas HTML, atributos, propiedades CSS en páginas como Quirksmode o When can I use… (especial para CSS3 y HTML5).

Hazte asiduo de algunos blogs y webs sobre HTML y CSS.

Algunas buenas referencias: Lea Verou, Paul Irish, Andi Smith, CSS-Tricks, Codrops, y por supuesto, el blog de Mario González.

Hasta aquí esta introducción al HTML, CSS y la importancia de los estándares. En próximos artículos iremos entrando en profundidad en todo lo relacionado con el desarrollo web.

¿Qué opinas?

Tu dirección de correo electrónico no será publicada. * Campos obligatorios