El desarrollo web acertado requiere de ciertas herramientas esenciales. Una de las mejores herramientas disponible para el desarrollo y las pruebas Web es el Mozilla Firefox Web Browser.

1. Desarrollo Rápido y Pruebas Web
con Mozilla Firefox
Ultima actualización: 01.03.06
Desarrollo Web con Firefox
El desarrollo web acertado requiere de ciertas herramientas esenciales. Una de
las mejores herramientas disponible para el desarrollo y las pruebas Web es el
Mozilla Firefox Web Browser.
"Fuera de la caja" Firefox tiene una lista extensa de
herramientas construidas para el desarrollo. En segundo
lugar, el diseño extensible de Firefox ha animado al
desarrollo de muchas extensiones muy útiles que ayuden
en el diseño y la localización de problemas de las páginas
Web. Y además la funcionalidad adicional que puede ser
un ahorro en el tiempo real durante el proceso del
desarrollo Web.
Consejo Rápido
Otra importante característica de Firefox, es que su motor esta cumpliendo con
los estándares. La representación de las páginas en Firefox ha demostrado estar
muy cerca de las recomendaciones oficiales de la W3C para el comportamiento y
la exhibición. Por lo tanto, las páginas Web que ejecutan correctamente en
Firefox, usualmente trabajan razonablemente, si no es perfectamente, en la
mayoría de los otros browsers con solo hacer unos ajustes de menor
importancia.
Herramientas de desarrollo Web
incorporadas a Firefox
Firefox viene con varias herramientas estándares que se incorporan en el
navegador. Por sí mismos, estas herramientas son de gran alcance para
considerar a Firefox una herramienta esencial de desarrollo Web.
Estas herramientas incluyen:
• Un ampliado visor de código fuente.
• La capacidad de desplegar la información detallada sobre un página Web.

2. • Una herramienta de depuración de Javascript.
• Un editor e inspector en tiempo real de DOM.
Ver el código fuente de una
página.
Como la mayoría de los navegadores, Firefox proporciona la capacidad de
visualizar el código fuente de una página Web. Ofrece una diferente alternativa,
en vez de enviar el código fuente a un editor de textos externo, utiliza su propio
visualizador de código fuente con el resaltado de sintaxis y la codificación en
colores para las etiquetas HTML.
Cuando el contenido en una página Web se
resalta, Firefox también ofrece la opción para la
visión del código fuente seleccionado, abriendo
una versión del visualizador del código fuente,
con el margen de beneficio de un marco de
selección resaltado en el código fuente. Esto
hace más fácil encontrar una sección específica
de una página Web de todo el código fuente
total.
Consejo Rápido
Tu puedes visualizar el código fuente de una
página Web haciendo click en "View > Page Source" a través de menú el sistema
o eligiendo "View Page Source" en el menú contextual (o con el atajo del teclado
Ctrl-U).
Tu puedes visualizar solo parte de el código fuente de una página destacando
una porción de al página Web y mientras hace click derecho para mostrar wl
menó contextual y elegir "View Selection Source".
Reportes de información de
páginas
Firefox provee información detallada
acerca de una página a través de la
ventana Page Info.
• La pestaña "General" despliega
información sobre la página tal como
URL, tamaño, y modo de
representación (rendering mode).
• La pestaña "Form" despliega los
formularios de la página Web y los
detalles acerca de los campos en el
formulario.
• La pestaña "Links" lista los enlaces en
la página, incluyendo hypervinculos y
hojas de estilos.

3. • La pestaña "Media" contiene información acerca de todos elementos
multimedia en la página Web, tales como imágenes e iconos.
Consejo Rápido
Tu puedes acceder a la ventana Page Info desde "Tools > Page Info" o por
haciendo click derecho en la página y seleccionando "View Page Info" desde el
menú contextual.
Consola Javascript
La Consola Javascript, es un herramienta para los desarrolladores de JavaScript
para escribir código snippets o archivos externos de JS. La consola proporciona
una interfaz para usar los componentes XPCOM, los medios para el cargamento
dinámico de script, y los reportes relacionados con Javascript así como los
errores CSS de la página Web.
Inspector DOM
El Inspector DOM proporciona acceso directo al Document Object Model. Para
cada elemento, ofrece una lista de información incluyendo cual de las reglas del
CSS están afectando cualquier elemento, dado en or den de prioridad de la hoja
de estilo cascada. Para el acceso rápido al DOM de un elemento seleccionado,
puede también instalar la extensión Inspect Element.

4. Consejo Rápido
Firefox viene con el inspector DOM, pero en las maquinas Windows, tu necesitas
elegir cuando instalas por primera vez el navegador. Elige la opción "Custom
Install" y selecciona "Web Developer Tools". Una ves instalado, el Inspector DOM
de Firefox esta dentro del menú "Tools".
Extensiones de desarrollo Web de
Firefox
Adicionalmente de las herramientas de desarrollo Web incorporadas, Firefox
proporciona la habilidad de agregar funcionalidades de desarrollo Web a través
del uso de programas agregados o "add-on" llamados extensiones. Algunas de
las extensiones más útiles se describen en las diapositivas siguientes. Hay
muchas más extensiones para desarrollo y están disponibles en el sitio "Mozilla
Update". Hecha un vistazo del submenú de Developer Tools para buscar
extensiones adicionales de desarrollo.
Web Developer Extension
Esta extensión, por si sola, hace a Firefox una indispensable herramienta para el
desarrollo y pruebas W eb. Web Developer Extension agrega una barra de
herramientas al navegador conteniendo varias herramientas de desarrollo web.
Despliega el tamaño de las imágenes, da los CSS e información de los
formularios, deshabilita ciertos elementos en una página, y mucho más.
Accesibilidad
Extención de Accesibilitdad para Firefox ayuda en las pruebas de estructura del
etiquetado de una pá gina para resolver las necesidades de la gente con
discapacidades. Fangs da una representación textual de una página, similar a la
manera como es leído por un lector de pantalla. Para mas pruebas de
accesibilidad use la extensión Accessibar o "Web Developer Extension".

5. Colores
Colorzilla es una herramienta "Eyedropper". Al apuntar sobre un elemento
muestra la información del color, de la trayectoria del DOM, así como las
coordenadas X,Y basándose en el anterior click.
Cookies
La extensión Add & Edit Cookies permite la edición o agregado cookies a una
página. Esta extensión es una característica más de la extensión View Cookies.

6. CSS
El CSSViewer inspecciona elementos en un página dando un completo
despliegue de la declaración CSS para el elemento seleccionado.
Aardvark es un depurador de CSS con modificantes del teclado. Despliega
elementos en la página tal como el nombre del elemento, de la identificación, o
de la clase de un elemento seleccionado.
Consejo Rápido
Tu deslizas el ratón sobre la página, y podrás ver un rectángulo rojo para cada
elemento bajo el cursor. Además también veras un pequeño titulo amarillo que
muestra el tipo de elemento HTML y su clase o id si es que existen.
Depurando
Firebug ayuda en la depuración de aplicaciones web basabas en AJAX, DHTML, y
JavaScript. Desplegará errores que ocurren al momento de la visualización de
una página, colocará el cursor en la línea apropiada, y tiene en cuenta la
inspección de diversos valores del DOM.

7. Enlaces
LinkChecker chequea cada enlace en una página Web para buscar enlaces rotos.
La codificación simple de esquemas de colores hace fácil marcar rápidamente los
enlaces rotos en una página.
Medidas
MeasureIt dibuja una regla a través de una página Web para desplegar el ancho,
alto y alineación de algún elemento de la página.

8. Información de página
La extensión Extended Statusbar agrega información a la barra de estado
desplegando el promedio de la velocidad de la descarga, los bytes descargados,
tiempo de carga, numero de imágenes descargadas y el porcentaje de las
páginas descargadas. Esta es similar a la barra de estado del Opera.
La extensión MetaT ags Sidebar despliega la información desde el código fuente,
tal como la que oculta el código entre las etiquetas de la descripción, de
palabras claves, y de enlaces.
Parámetros de página.
Live HTTP Headers despliega información acerca de las cabeceras HTTP en una
página en tiempo real.
UrlParams es una barra lateral que despliega los parámetros de la forma que
Firefox ha enviado al servidor en la petición anterior. También le deja cambiar o
agregar parámetros y reenviar la petición.

9. Agentes del usuario
User Agent Switcher permite a Firefox identificarse como un navegador diferente,
tal como IE u Opera, o un servidor Web.
Validación
HTML Validator agregar validaciones HTML dentro del visualizador de código
fuente del Firefox.

10. Visores de páginas en otros
navegadores
IE Tab es una extensión que usa los lanzadores de su URL en Internet Explorer
dentro de una pestaña de Firefox. Es un ahorrador simple del tiempo al
comprobar las páginas para saber si hay compatibilidad a través de
navegadores.
IE View permite a la página actual o a un enlace seleccionado abrirse en el
navegador Internet Explorer. OperaView provee la misma funcionalidad para el
navegador web Opera. Adicionalmente, FirefoxView le permite a Firefox abrir la
página actual o el enlace seleccionado cargando el Internet Explorer.
Firefox Bookmarklets
Bookmarklets (favlets) son pequeños programas JavaScript que son almacenados
como un URL dentro de la lista de marcadores de un navegador y agrega
herramientas funcionales al navegador. Mientras que muchos de las listas de
marcadores pueden ya contar con estas listas de extensiones, 2 buenas fuentes

11. pueden ser encontradas en Slayer Office y Square Free. Slayer Office Favlet Suite
es particularmente útil para mostrar sugerencias, como una lista de colores de
una página web o cambiar los campos ocultos de un formulario.
Extensiones de herramientas de
desarrollo en Firefox
Además de las extensiones que ayudan a un desarrollador a codificar y a probar
una página Web, existen varias extensiones de Firefox que están diseñadas para
complementar o remplazar varias herramientas de desarrollo de escritorio. Estas
extensiones proporcionan un alternativa interesante al software tal como
Filezilla, KomodoEdit o Nvu.
Editores
Codetch es un editor de código para varios lenguajes etiquetados. Simula mucha
de las características vistas en Dreamweaver en un editor dentro de Firefox.
FTP
Fireftp es una cliente FTP que permite el acceso fácil a un servidor FTP.

12. Imágenes
MozImage es un simple visor de imágenes y navegador.
Capturas de pantallas
La Pearl Crescent Page Saver guarda una imagen de la página web en un archivo
de formato PNG. La extensión Page Saver utiliza la nueva característica canvas,
la cual fue introducida en la versión 1.5 de Firefox.
La extensión Screen Grab toma una captura de pantalla de una página Web en
formas muy diferentes. Lo más importantemente, es que permite que usted
capture el documento entero de la página Web que usted está viendo.

13. Conclusiones
Mientras que puede parecerse desalentador al principio tiene que dedicarle
tiempo para familiarizarse con muchas de las extensiones mencionadas en las
diapositivas anteriores. Esto le ahorrará una gran cantidad de tiempo y
frustraciones. Especialmente al familiarizarse con las extensiones "Web
Developer extension", "CSSViewer extension", y "Firebug Extension". Si lo haces,
deberías estar agradecido que lo hiciste!
Copyrights
Copyrights Leslie Franke.
La presentación esta licenciada bajo la Creative Commons Attribution
NonCommercial ShareAlike License.
Traducido al Español por: Leonardo Caballero y la puedes descargar desde mi
proyecto llamado Documentación de Leonardo Caballero