Javier Antoniucci

Ingeniero en Informática

Somos expertos en Java/J2EE

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2007-06-12

Tutorial visitado 8.853 veces Descargar en PDF

Manual Básico de Web Developer Toolbar

Introducción

A continuación les vamos a presentar una herramienta muy útil para el desarrollo Web. Esta herramienta está orientada principalmente a los desarrolladores de páginas web que deben validar cuestiones de usabilidad, accesibilidad o seguridad pero seguro que al resto de los mortales nos ayudará más de una vez.

¿Qué es?

Web Developer Toolbar es un plugin de Firefox que nos añade una barra de utilidades para habilitar, desabilitar, editar, etc. los CSS, JavaScript, formularios, etc. que contenga la página que estamos visualizando.

Cabe aclarar que también puede ser utilizado por el “lado oscuro” (hackers y otras alimañas) para intentar abrir una brecha de seguridad, así que no está de más conocer sus herramientas.

¿Cómo instalarlo?

Podemos buscarlo en la página oficial de plugins de Firefox (https://addons.mozilla.org/en-US/firefox/addon/60?id=60) o mejor aún en la oficial del plugin: http://chrispederick.com/work/web-developer/




Click en el download que corresponda:




Y seguramente nos saldrá una barra de seguridad como la que se muestra sobre el logo de chrispederick.com (“Firefox prevented this site...”) entonces hacemos click en “edit options”


Y lo añadimos en la lista de sitios autorizados haciendo click en “Allow” y “Close”

Nuevamente pinchamos en el download y entonces aparece una ventana:




Donde seleccionamos “Install now”




Finalmente, seleccionamos “Restart Firefox”.

¿Para qué sirve? ¿Cómo utilizarlo?

Al reiniciar nos aparecerá una barra de utilidades bastante intuitiva:




En Disable podremos desactivar JavaScript, Java, popup blocker, etc.

En Cookies podremos deshabilitar, visualizar, eliminar o modificar los valores de las cookies.

En CSS podremos deshabilitar las hojas de estilos, visualizar las correspondientes a otros tipos de medios (impresora, handheld, etc.), visualizar y editar las hojas de estilo, etc.

En Form podremos ver información detallada de los formularios de la página, habilitar campos o visualizar passwords, cambiar el método de envío, hacer editables campos readonly, etc.

Por resumir, lo más utilizado además de lo nombrado:

  • LineGuides y Ruler en Miscellaneous


    En la imagen se ve como añadí una línea vertical y una horizontal para medir las alineaciones y uso el ruler para tomar la medida y posición del cuadrado.

  • Los display de información para accesibilidad


En el ejemplo se muestra en amarillo el display de los anchors.

  • Los outlines para encontrar cosas


En este caso he resaltado los enlaces externos y las tablas (en rojo)

  • Los resize para ver como queda la página en distintas resoluciones


Aquí se muetsra la página en un navegador a 800x600.

  • Los validadores de tools


Invoca a los validadores de la w3c, en este caso para el HTML

¿Cuándo utilizarlo?

Cuando necesitemos hacer pruebas de accesibilidad o de seguridad del tipo: ¿que pasa si quito las cookies? ¿y si no hay javascript?.

Cuando querramos ver como funciona un sitio, que estilos se usan, como logran tal cosa, etc.

¿Licencia?

Se distribuye bajo la GNU General Public License lo cual significa básicamente que es open source y gratuito, lo podemos distribuir con código fuente y no podemos comercializarlo.

¿Dónde encuentro más info?

http://chrispederick.com/work/web-developer/

Conclusiones

Muy buena herramienta, muy útil, muy estable y en constante evolución.

En Autentia tenemos mucha experiencia en desarrollo Web y podemos ayudarte a construir u optimizar tus portales o aplicaciones web. No dudes en ponerte en contacto con nosotros.

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL: