Editar diseño de pagina web con Firebug

Se sociable!

• 

Firebug, como muchos sabemos, es una extensión para Firefox la cual tendríamos que tener todos instalada. Ya sea que te orientes de manera profesional al diseño de webs o solo como aficionado, la fuerza de esta herramienta hará que nunca la quites de tu navegador, ya que nos permite editar, depurar (debuggear para los puristas) y monitorear el código HTML, CSS y hasta Javascript de páginas webs en tiempo real.

Cuando le damos el primer uso a esta herramienta, no la queremos dejar mas. El diseño, los colores, los tamaños, los márgenes, los elementos HTML, los tipos de letra, fondos, etc. Todo es editable usando esta extensión que, en su versión 1.5.0, es compatible con Firefox desde su versión 3.5 (y la actual 3.6).

Los elementos HTML tienen un color que ya es definido con efectos mouse-hover, con lo cual te permite saber cuándo estamos editando el elemento correcto. Además las etiquetas HTML son expandibles y las características de los elementos CSS tienen activada la opción de autocompletar.

Al presionar f12, o bien yendo al menú de Firefos en Herramientas/Firebug/Abrir Firebug, se abre Firebug en una sección de pantalla inferior. Si eso te parece incómodo puedes abrir el editor en otra pestaña o en una ventana flotante. También, otra forma para editar elementos HTML y CSS directamente es seleccionando el elemento que queremos editar y darle clic derecho, para luego seleccionar la opción del menú contextual: Inspeccionar Elemento.

Editar HTML con Firebug

Vamos a revisar un ejemplo sencillo. Supongamos que queremos cambiarle el color y el tamaño a los títulos de las entradas de nuestro blog, pero no estoy muy seguro y no se que es lo que debo mover, así que prefiero primero probar con el Firebug.

Primero seleccionamos el elemento y abrimos el menú contextual de Firebug con el clic derecho.

Vamos a poder ver que en la parte inferior aparecerá un panel con dos secciones.

La primera sección es el código HTML de la página:

En esta parte va a aparecer, entre otras cosas, un menú de edición compuesto por la consola, el editor html (por defecto), el editor de CSS, etc.

Debemos destacar también la ruta del elemento, la cual nos informa en cual jerarquía de etiquetas HTML nos encontramos. Si ponemos nuestro cursor sobre estos elementos podremos ver que en la página se irán sombreando las secciones para que las podamos visualizar en tiempo real.

La segunda sección es el panel de características tomadas de las hojas de estilo (CSS):

En esta sección vamos a encontrar los elementos CSS tomados de las hojas referenciadas del código HTML. Como veremos, no solo hay un elemento para un estilo, sino que en muchos casos puede haber un estilo padre del cual hereda algunas otras características.

Según este ejemplo podemos ver que los encabezados h2 y h3 que se encuentran en la clase title, dentro de la clase post, tienen tamaño de letra 16px y color #00589E. Pero sin embargo este elemento de color aparece tachado ya que existe otro elemento de un nivel superior (para los enlaces h2 y h3 dentro de las mismas clases) que define un color #00589E.

Si deseamos editar los elementos solamente haremos clic sobre alguno de ellos. Para crear uno nuevo hacemos doble clic sobre el elemento CSS comprendido entre llaves. Ahora, cuando queremos deshabilitar características CSS de un solo elemento, apoyamos el cursor sobre éste y aparecerá un signo de bloqueo el cual activaremos haciendo clic, el cual se cambiara de color, a rojo, como vemos en la imagen debajo

El cambio que aparece en este ejemplo es en el título de los posts, cambios en tamaño de letra 22px y color rojo (hexadecimal: #FF33333):

Los cambios que realizamos, no serán vistos por ustedes, ya que solo se ve en la PC local. Si desean restaurar los valores iniciales solo deben actualizar la pagina del navegador (f5).

Esta extensión, la pueden descargar del mismo sitio oficial de Firefox Addons