Inevitablemente, todos los diseñadores web cometen errores en los trabajos que realizan. En la mayoría de las ocasiones, los errores se descubren al probar el diseño en diferentes navegadores. Además de mostrar los errores, los principales navegadores disponen de herramientas que permiten descubrir de forma sencilla la causa concreta del error.
Antes de que existieran estas herramientas avanzadas, el trabajo del diseñador era mucho más complicado, ya que no era fácil descubrir la causa exacta del error entre todas las posibles:
- El selector está mal escrito.
- Las propiedades están mal escritas o tienen valores no permitidos.
- Otros selectores tienen más prioridad y están sobreescribiendo una propiedad y/o valor.
- Las reglas y valores están bien escritos, pero los elementos no ocupan el espacio que a simple vista parece que están ocupando en la pantalla.
- El navegador tiene un error que impide mostrar correctamente la página.
Los diseñadores web idearon hace mucho tiempo soluciones ingeniosas para cada uno de los problemas anteriores. En primer lugar, cuando no se está seguro de si todas las reglas CSS están bien escritas, lo mejor es validar la hoja de estilos utilizando el validador CSS del W3C.
Una vez descartado el error de sintaxis, el siguiente problema a resolver es por qué una regla CSS no se aplica correctamente a un elemento. Una estrategia muy utilizada consistía en añadir alguna propiedad que sea visualmente significativa para comprobar si realmente el selector se está aplicando. Poner todo el texto del elemento en negrita, aumentar mucho su tamaño de letra y cambiar el color de fondo eran algunas de las estrategias habituales. Cuando lo anterior no resultaba, se utilizaba directamente la palabra reservada !important para aumentar la prioridad de esa propiedad CSS.
Otro de los problemas habituales en el diseño web está relacionado con el espacio que ocupa cada elemento en pantalla. Como los elementos por defecto no muestran ningún borde y su color de fondo es transparente, no es posible conocer a simple vista el espacio que ocupa cada elemento. Por lo tanto, cuando se posicionan elementos de forma flotante o cuando se establecen márgenes, rellenos, alturas y anchuras máximas/mínimas, no es posible visualizar si el navegador está mostrando correctamente todos los elementos.
Para solucionar este problema la técnica habitual consistía en añadir un borde visible a los elementos. Como los bordes visibles ocupan sitio en pantalla, el problema de esta solución es que modifica el propio diseño. La alternativa consistía en añadir un color de fondo diferente para cada elemento. Otra posible alternativa es el uso de la propiedad outline de CSS, que añade un perfil en el contorno de un elemento pero no ocupa sitio y por tanto no modifica el diseño de la página.
Los navegadores modernos como Safari, Opera y Firefox incluyen el soporte de la propiedad outline, mientras que el navegador Internet Explorer 7 no es capaz de mostrar perfiles en los elementos de la página. El diseñador Chris Page ha publicado un artículo llamado A Handy CSS Debugging Snippet en el que muestra unas reglas CSS que hacen uso de outline y permiten depurar fácilmente cualquier diseño sin utilizar herramientas avanzadas:
* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }2.4.1. Firebug
Al margen de soluciones manuales y técnicas más o menos ingeniosas, los diseñadores web profesionales de hoy en día utilizan herramientas avanzadas para averiguar con precisión la causa de los errores de diseño. De todas las herramientas disponibles, la mejor con mucha diferencia es Firebug, una extensión del navegador Firefox.
Firebug dispone de todas las utilidades que necesitan los diseñadores y programadores web en su trabajo. Firebug es una herramienta gratuita, completa, fácil de utilizar y para la que se publican nuevas versiones de forma continua.
Después de instalar Firebug, en la esquina inferior derecha del navegador Firefox aparece un nuevo icono. Para acceder a Firebug, se puede pinchar con el ratón sobre ese icono o se puede pulsar directamente la tecla F12 después de cargar la página que se quiere depurar.
Firebug muestra su información dividida en los siguientes paneles: * Consola: muestra mensajes de error, notificaciones y otros tipos de mensajes. No es muy útil para los diseñadores web. * HTML: muestra el código HTML de la página y permite seleccionar los elementos, modificar sus contenidos y ver las reglas CSS que se le están aplicando. * CSS: muestra todas las hojas de estilos incluidas en la página y permite modificar sus valores. * Guión y DOM: paneles relacionados con la programación JavaScript. No son muy útiles para los diseñadores web. * Red: muestra toda la información de todos los elementos descargados por la página (HTML, JavaScript, CSS, imágenes).
El primero de los paneles importantes para los diseñadores web es el panel HTML:
Figura 2.8 Panel HTML de Firebug
El panel HTML es el más utilizado por los diseñadores web, ya que muestra toda la información de la página relacionada con HTML y CSS. En la parte izquierda del panel se muestra el código HTML de la página y en la parte derecha la información CSS.
Si se pulsa el botón "Inspeccionar" de la parte superior de Firebug, es posible seleccionar con el ratón un elemento de la página web. Después de pinchar sobre cualquier elemento, en la parte izquierda se muestra el código HTML de ese elemento y en la parte derecha todas las reglas CSS que se le aplican.
Si se pulsa sobre el contenido de un elemento en la parte izquierda del panel HTML, se puede modificar su valor y ver el resultado en tiempo real sobre la propia página web. Desde este mismo panel también es posible eliminar el elemento de la página.
La parte derecha del panel HTML es la más útil, ya que siempre muestra todas las reglas CSS que se aplican a un elemento de la página. Gracias a esta información es imposible dudar si un selector está bien escrito o si una regla CSS realmente se está aplicando a un elemento.
Además, como normalmente varias reglas CSS diferentes aplican valores diferentes a las mismas propiedades de un mismo elemento, Firebug muestra tachadas todas las propiedades que en teoría se deben aplicar al elemento pero que no lo hacen porque existen otras reglas CSS con más prioridad.
La parte derecha del panel HTML incluye otras utilidades interesantes como cuando se pasa el ratón por encima de un color definido en formato hexadecimal y que hace que se vea realmente cuál es el color. Igualmente, al pasar el ratón por encima de una url() utilizada para incluir una imagen, Firebug muestra de qué imagen se trata. Las reglas CSS que se muestran en la parte derecha del panel HTML también se pueden modificar, eliminar y bloquear temporalmente. También es posible añadir nuevas propiedades a cualquier regla CSS.
Firebug muestra por defecto el valor de las reglas CSS tal y como se han establecido en las hojas de estilos. Sin embargo, muchas veces estos valores originales no son prácticos. ¿cuál es el tamaño de letra de un elemento con font-size: 1em? Sin más información es imposible saberlo. ¿cuál es la anchura en píxeles de un elemento con la propiedad width: 60%? Imposible saberlo sin conocer las anchuras de sus elementos contenedores.
Por todo ello, Firebug permite mostrar los valores que realmente utiliza Firefox para dibujar cada elemento en pantalla. Pulsando sobre el texto Opciones de la parte derecha del panel HTML, se puede activar la opción Show Computed Style:
Figura 2.9 Panel HTML de Firebug con la opción Show Computed Style
Después de activar esta opción, los tamaños de letra y anchuras se muestran en píxeles y se muestra el valor de todas las propiedades CSS del elemento, independientemente de si se han establecido de forma explícita o de si se trata de los valores por defecto que aplica el navegador.
Otra de las utilidades más interesantes del panel HTML es la información sobre la maquetación del elemento, que se puede mostrar pinchando sobre la pestaña Maquetación de la parte derecha del panel:
Figura 2.10 Pestaña Maquetación del panel HTML de Firebug
La opción Maquetación muestra la información completa del "box model" o modelo de cajas de un elemento: anchura, altura, rellenos, bordes y márgenes.
El otro panel más utilizado por los diseñadores web es el panel CSS, que muestra el contenido de todas las hojas de estilos que se están aplicando en la página y permite realizar cualquier modificación sobre cualquier regla CSS viendo el resultado en tiempo real en la propia página:
Figura 2.11 Panel CSS de Firebug
Por último, el panel Red de Firebug permite ver toda la información sobre todos los elementos que se descarga el navegador para mostrar la página:
Figura 2.12 Panel Red de Firebug
Desde el punto de vista del diseñador, este panel se puede utilizar para mejorar el rendimiento de la página reduciendo el número de archivos CSS, reduciendo el número de imágenes de adorno mediante los sprites CSS, reduciendo el número de peticiones HTTP realizadas al servidor y reduciendo el tamaño de los archivos.
2.4.2. Otras herramientas de depuración
Firebug es la mejor herramienta para depurar el diseño de los sitios web, pero sólo está disponible para el navegador Firefox. Como la mayoría de errores en el diseño web sólo se producen en los navegadores de la familia Internet Explorer, Firebug no se puede utilizar.
Afortunadamente, los creadores de Firebug han publicado una versión reducida y simplificada de Firebug compatible con el resto de navegadores. La versión reducida se denomina Firebug Lite y requiere el uso de JavaScript. Aunque se puede descargar Firebug Lite para utilizarlo desde nuestros propios servidores, la forma más sencilla de probarla es añadir el siguiente código en la página que se quiere depurar:
<script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>El código anterior se puede colocar en cualquier zona de la página, aunque normalmente se incluye dentro de la sección <head>.
Por último, como las empresas que desarrollan los navegadores consideran que Firebug es insuperable, desde hace un tiempo se dedican a copiar todas sus características. Internet Explorer 8, Safari 3 y Opera 9 disponen de herramientas de depuración que son una réplica de Firebug.
Internet Explorer 8 ha denominado a su herramienta Developer Tools, mientras que Opera la ha denominado Dragonfly y en Safari está disponible desde el menú Desarrollo.