comparte el articulo 

Web Developer Toolbar de Mozilla Firefox: Casi un editor Wysiwyg

Actualizado el 04/10/2013 < > 4 Cometarios

Resumen: Web Developer Toolbar es una extensión de Mozilla Firefox especialmente diseñada para brindar herramienta de apoyo a los desarrolladores de páginas web.

Las bondades del estupendo navegador Mozilla-Firefox es ampliamente conocida. Hoy en día, este navegador cuenta con la aprobación de la mayoría de las personas que cuentan con buenos conocimientos acerca de la navegación en la web. Una de las grandes ventajas que tiene respecto de los demás, es la posibilidad que ofrece a sus usuarios de aumentar sus capacidades mediante la incorporación de extensiones, la mayoría de los cuales son desarrollados bajo licencias no comerciales.
Una de las extensiones más útiles para los desarrolladores de páginas web es Web Developer Toolbar (Barra de Herramientas para Desarrolladores Web), que incorpora una gran cantidad de funciones extra al excelente navegador, hasta casi convertirlo en un editor WYSIWYG.

Herramientas más importantes

Las herramientas que tiene esta extensión sirven para el manejo del navegador y se encuentran divididas en varias categorías, las que pueden verse en los menús emergentes de la barra.
Las funciones para la que está diseñada esta barra son muchas, pero por cuestión de espacio, solo describiremos las más importantes o interesantes desde el punto de vista del diseño de páginas web.

Desactivar

Este menú presenta todas las herramientas que permiten activar y desactivar scripts o partes del código fuente de la página web que se encuentra en pantalla. Estos efectos se producen únicamente en la ventana y en la pestaña visible en ese momento y son absolutamente transitorios, por lo que con solo recargar la página, dejarán de tener efecto todas las desactivaciones efectuadas en este menú, volviendo al estado en el que se encontraba configurado el navegador.
Dentro de las funciones se destacan las desactivaciones de Java y Javascript, la desactivación temporal del bloqueo de ventanas emergentes (particularmente útil cuando estamos diseñando una web que tiene este tipo de recursos) y la desactivación de colores. Esta última función, va mucho más allá, ya que en realidad lo que desactiva es la propiedad “background” del CSS, así que también desaparecerán las imágenes empleadas como fondo. Esta herramienta tiene utilidad cuando nos encontramos distribuyendo los contenidos en el diseño o cuando estamos probando los colores de las fuentes.
Importante: Se debe tener siempre en cuenta, que la desactivación de las medidas de seguridad que tiene el navegador, pueden poner en riesgo al equipo y el software, por lo que no se recomienda el uso de este tipo de herramientas mientras se encuentra navegando en internet, excepto que se trate de sitios muy seguros.

CSS y estilos

Esta herramienta permite desactivar las hojas de estilo en cascada, ya sean todas o algunas en particular. Cuando se desactivan todas, el navegador recarga la página sin leer el archivo CSS o la parte del código HTML que contiene elementos de estilo.
Dentro de estas herramientas también se encuentra una que permite la visualización del código CSS en una pestaña nueva; es de destacar que los códigos mostrados en este modo son de solo lectura, por lo que no se puede editar el código empleando esta función.
Las dos herramientas que describiremos a continuación, son algunas de las más importantes. La primera, es la de “añadir hoja personal”. Cuando se selecciona esta herramienta, se abre un cuadro “Abrir” que nos permite seleccionar un archivo CSS de nuestro ordenador, tras lo cual el navegador incorporará aquellas líneas del código que pueda aplicar en la página que está mostrando.
Veamos un ejemplo práctico: mediante el empleo del block de notas, introduciremos el siguiente código:
body {
padding: 0;
font: 3em arial, helvetica, sans-serif;
}
Tras escribirlo, guardaremos el archivo como “estilo.css”, “style.css” o cualquier otra cosa que se nos ocurra. Luego, le pediremos al navegador que incorpore esta hoja de estilos a una página web cualquiera, tras lo cual, en el ejemplo ya dado, como resultado obtendremos un cambio en la tipografía y una fuente de 3em. El resultado de las dos formas de ver el archivo HTML son las siguientes:

Páginas con estilo propio

Luego de creado el archivo CSS, podremos buscar una página cualquiera e incorporarle temporalmente (solo en el navegador) el mencionado archivo para ver los cambios efectuados.
La otra herramienta importante (y aquí puede apreciarse claramente que casi se comporta como un editor) es la que permite editar el código CSS, tanto si la página se encuentra en nuestro ordenador como si es una página que se encuentra en la web (esto es posible porque el código que lee el navegador lo “descarga” y se encuentra temporalmente en el ordenador del usuario). Cuando seleccionamos esta herramienta, se abre el siguiente cuadro, que permite la edición del código del o de los archivos CSS de la página que se encuentra visible:

Editor CSS

En esta ventana, el código puede editarse “manualmente”, mientras se van viendo los resultados en la ventana del navegador que quedará situada a la derecha. Los cambios pueden verse en cuanto se guarden los cambios que se han efectuado.

Herramientas de formularios

Cuando la página cuenta con elementos de formulario, la barra de herramientas para desarrolladores de Mozilla Firefox permite realizar varias funciones con ellos. Por ejemplo, cuando se selecciona “mostrar detalles del formulario”, los elementos de formulario que se encuentran en la página aparecen resaltados con un borde rojo, y se muestran unas etiquetas de color amarillo que contienen las líneas de código relacionados con los mismos.
Otra herramienta permite ver las contraseñas mientras se escriben, sustituyendo los símbolos por los caracteres. Una herramienta importante es la que permite ver la información de los formularios de la página. Cuando se selecciona, se abre una pestaña del navegador que muestra un listado completo de los formularios que se encuentran en la misma, los elementos que los componen y sus características. La siguiente captura de pantalla permite ver dicho listado:

Detalles de formularios

Otra de las herramientas que se puede encontrar en este menú es la que posibilita la eliminación de la restricción de caracteres, es decir, que en aquellos formularios donde solo se permiten números, letras, una combinación de ambos, o cualquier otra restricción, ésta es bloqueada, permitiendo el uso de cualquier tipo de caracteres en forma transitoria. (Esto solo es válido dentro del propio navegador, ya que las restricciones establecidas a través del servidor quedan activas).
Existen otras herramientas menores dentro de este menú de formularios, como borrar radios, habilitar autocompletado, permitir escribir en campos, etc., que pueden ser útiles tanto a la hora de llevar adelante el desarrollo de un sitio web como para funciones propias de la navegación por internet.

Publicado el 28/04/2010, última actualización 04/10/2013.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

4 Cometarios

  1. Melchor Garuz Castan

    He instalado y desinstalado dos veces web developer
    El componente aparece como instalado pero no hay TOOLBAR
    He desinstalado firefox, lo he vuelto a cargar y luego el componente.
    Misma cosa, hay componente pero no hay barra para activar ni emergente.

    Ninguna informacion en ninguna pagina sobre esto.
    Normal?

    Martes, 31 de agosto 2010

  2. Verónica Milán

    Melchor, sinceramente no sé a que se debe tu problema, no puedo ayudarte en este caso, tal vez alguien que esté leyendo esto sabe la solución.

    Jueves, 2 de septiembre 2010

  3. Alex Torres

    Melchor te aparece en el Menu de Herramientas la opcion de Web Developer… intenta actualizando la ultima version de Firefox.

    Miércoles, 8 de diciembre 2010

  4. Marlowe

    Yo tenía el mismo problema y revisando la web del desarrollador señala:

    1) Haga clic en la barra de herramientas y seleccione “Personalizar …’.
    2) Pulsar en “Valores por defecto’ y aceptar.

    Con eso he conseguido mostrarla en mi firefox.

    Viernes, 13 de mayo 2011

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras