Otro Blog Geek

Ya dije en la entrada “Extensiones útiles para Firefox ( mis favoritas )” que algunas de las extensiones que uso son bastante específicas para el diseño web. Intentaré hacer una pequeña serie de posts hablando de ellas y dando algunos consejos para su uso.

Aunque hay bastantes extensiones que pueden resultar muy útiles para el diseño y desarrollo de páginas web yo uso principalmente dos, que son las siguientes ( en orden de importancia según el uso que les doy ):

1. Firebug
2. Webdeveloper Toolbar

Sin lugar a dudas para mí la estrella es Firebug. En este primer post voy a centrarme en ella y poco a poco veremos como usarla para que nos asista en el desarrollo.

Firebug: Instalación

Para instalar la extensión nos vamos a su web y pulsamos en el botón grande y naranja que dice “INSTALL FIREBUG 1.0 FOR FIREFOX”. Esta es la parte fácil del tutorial

Lo más básico.

Mediante firebug podemos acceder al árbol DOM de la web y editarla “on the fly”, además es perfecto para darle esos últimos retoques a las hojas de estilos que se nos resisten. También podemos usarlo para optimizar el tiempo de carga de la página, averiguar si hay algún elemento que no carga bien, depurar nuestro javascript, y muchas otras cosas que yo todavía no he descubierto. Para nuestro ejemplo usaremos un pequeño fichero HTML que contiene 2 div y una hoja de estilos bastante rudimentaria.

Como podéis ver es algo bastante rudimentario lo primero que vamos a hacer es inspeccionarlo y ver lo que lleva por dentro. Para ello abrimos la web de ejemplo y abrimos firebug con ella abierta. Para abrir podemos abrir Firebug por las siguientes vías.

• Herramientas > Firebug > Open Firebug
• Pulsando en el botón correspondiente en la barra de estado del navegador

Una vez abierto se mostrará en la parte inferior de la pantalla del navegador. A mí me resulta más cómodo usarlo en una venta a aparte, pero es cuestión de gustos. Para abrirlo en una ventana aparte pulsamos el botón rojo con una flecha hacia arriba blanco que está en la parte superior derecha de firebug. Esta es la ventana que se mostrará tras abrirlo.

En el panel de la izquierda podemos ver el código de la página. Podemos desplegarlo o plegarlo según nos interese. Al pulsar sobre un elemento HTML podemos ver en el panel de la derecha información acerca de él.

Ahora echemos un vistazo a las pestañas que podemos ver en la ventana de Firebug

• Console: Muestra información útil para depurar el código javascript. No mostrará información con la página de ejemplo, pero si queréis ver el tipo de información que proporciona podéis probarla con páginas como Google Reader o incluso con OBG y ver los errores de javascript que lanza.
• HTML: Muestra el árbol de la página y nos permite editarlo a nuestro gusto.
• CSS: Muestra las hojas de estilos de la página y nos permite editarlas por separado y ver el resultado “on the fly”
• Script: Es el “debugger” del código Javascript de nuestra página. Funciona como cualquier otro debugger: Breakpoints, expresiones, etc…
• DOM: Muestra el árbol DOM del documento
• Net: Muestra información útil acerca de las peticiones http que se han hecho al cargar el documento. Informa sobre los errores que se han producido en ellas y el tiempo que ha llevado cada una, además nos permite ver información detallada sobre cada una de esas peticiones ( cabeceras, cookies, datos recibidos, etc. )

Editar estilos en la pestaña “HTML”

Abrimos Firebug sobre la página de ejemplo y pulsamos sobre el elemento “body”. Vemos que en el panel de la derecha se nos muestra el estilo de este elemento. Ahora podemos editar el estilo de este elemento en el panel de la derecha.

A modo de ejemplo, cambiaremos el color al fondo de la página y a haremos el elemento body más estrecho. Para ello nos situamos en el panel de la derecha en la pestaña “Style” y pulsamos con el botón derecho sobre background en la opción “Edit background”. Ahora podemos editar la opción background y cambiar el color gris ( #BBBBBB ) por un color blanco es decir #FFF o white

Para hacer el body más estrecho seleccionamos “New property” en el menú anterior y escribimos “width: 600px”. Así hemos reducido el ancho del body a 600 pixels. Probemos otra cosa, click derecho en la propiedad width y click en la opción “Edit width” del menú. Ahora en lugar de escribir una cantidad podemos usar la flecha hacia arriba y hacia abajo de nuestro teclado para aumentar o disminuir la cantidad.

• +1 pixel pulsando hacia arriba
• -1 pixel pulsando hacia abajo

Ahora vamos a convertir nuestros 2 divs en un par de columnas. Para ellos seleccionamos el div nº 1 en el panel de la izquierda. Como la hoja de estilos no incluye nada acerca de ese div no nos aparece ningún dato acerca de este pero si pulsamos con el botón derecho y seleccionamos “Edit element style” y a partir de ahí podemos editar el estilo del div. Incluyamos lo siguiente, para convertirlo en una columna.

float: left;
width: 50%;


Recapitulemos para ver lo que hemos aprendido hasta ahora:

• Podemos modificar la hoja de estilos de un elemento y ver las modificaciones.
• Podemos añadir una hoja de estilos a un elemento que que no la tenga.

En el siguiente post veremos que más podemos hacer en el código usando la pestaña HTML

Nota: Los cambios que relizamos sobre la web no persisten, es decir solo sirven como una previsualización de lo que queremos, para que sean persistentes devemos realizar los cambios en el código de la página.