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 FirefoxFirefox 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.

• 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áginasFirefox 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.

• 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 JavascriptLa 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 DOMEl 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 orden 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.

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 FirefoxAdicionalmente 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 ExtensionEsta extensión, por si sola, hace a Firefox una indispensable herramienta para el desarrollo y pruebas Web. 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.

AccesibilidadExtenció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".

ColoresColorzilla 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.

CookiesLa 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.

CSSEl 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.

DepurandoFirebug 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.

EnlacesLinkChecker 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.

MedidasMeasureIt 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.

Información de páginaLa 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 MetaTags 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.

Agentes del usuario User Agent Switcher permite a Firefox identificarse como un navegador diferente, tal como IE u Opera, o un servidor Web.

ValidaciónHTML Validator agregar validaciones HTML dentro del visualizador de código fuente del Firefox.

Visores de páginas en otros navegadoresIE 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 BookmarkletsBookmarklets (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

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 FirefoxAdemá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.

EditoresCodetch 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.

FTPFireftp es una cliente FTP que permite el acceso fácil a un servidor FTP.

ImágenesMozImage es un simple visor de imágenes y navegador.

Capturas de pantallasLa 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.

ConclusionesMientras 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!

CopyrightsCopyrights 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