Desarrollo Rápido y Pruebas Webcon Mozilla FirefoxUltima actualización: 01.03.06Desarrollo Web con FirefoxEl desarrollo we...
•   Una herramienta de depuración de Javascript.•   Un editor e inspector en tiempo real de DOM.Ver el código fuente de un...
•   La pestaña "Media" contiene información acerca de todos elementos    multimedia en la página Web, tales como imágenes ...
Consejo RápidoFirefox viene con el inspector DOM, pero en las maquinas Windows, tu necesitaselegir cuando instalas por pri...
ColoresColorzilla es una herramienta "Eyedropper". Al apuntar sobre un elementomuestra la información del color, de la tra...
CSSEl CSSViewer inspecciona elementos en un página dando un completodespliegue de la declaración CSS para el elemento sele...
EnlacesLinkChecker chequea cada enlace en una página Web para buscar enlaces rotos.La codificación simple de esquemas de c...
Información de páginaLa extensión Extended Statusbar agrega información a la barra de estadodesplegando el promedio de la ...
Agentes del usuarioUser Agent Switcher permite a Firefox identificarse como un navegador diferente,tal como IE u Opera, o ...
Visores de páginas en otrosnavegadoresIE Tab es una extensión que usa los lanzadores de su URL en Internet Explorerdentro ...
pueden ser encontradas en Slayer Office y Square Free. Slayer Office Favlet Suitees particularmente útil para mostrar suge...
ImágenesMozImage es un simple visor de imágenes y navegador.Capturas de pantallasLa Pearl Crescent Page Saver guarda una i...
ConclusionesMientras que puede parecerse desalentador al principio tiene que dedicarletiempo para familiarizarse con mucha...
Upcoming SlideShare
Loading in...5
×

Desarrollo Rápido y Pruebas Web con Mozilla Firefox

735

Published on

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.

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
735
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Desarrollo Rápido y Pruebas Web con Mozilla Firefox

  1. 1. Desarrollo Rápido y Pruebas Webcon Mozilla FirefoxUltima actualización: 01.03.06Desarrollo Web con FirefoxEl desarrollo web acertado requiere de ciertas herramientas esenciales. Una delas mejores herramientas disponible para el desarrollo y las pruebas Web es elMozilla 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ápidoOtra importante característica de Firefox, es que su motor esta cumpliendo conlos estándares. La representación de las páginas en Firefox ha demostrado estarmuy cerca de las recomendaciones oficiales de la W3C para el comportamiento yla exhibición. Por lo tanto, las páginas Web que ejecutan correctamente enFirefox, usualmente trabajan razonablemente, si no es perfectamente, en lamayoría de los otros browsers con solo hacer unos ajustes de menorimportancia.Herramientas de desarrollo Webincorporadas a FirefoxFirefox viene con varias herramientas estándares que se incorporan en elnavegador. Por sí mismos, estas herramientas son de gran alcance paraconsiderar 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. 2. • Una herramienta de depuración de Javascript.• Un editor e inspector en tiempo real de DOM.Ver el código fuente de unapágina.Como la mayoría de los navegadores, Firefox proporciona la capacidad devisualizar 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 propiovisualizador de código fuente con el resaltado de sintaxis y la codificación encolores 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 unapágina Web haciendo click en "View > Page Source" a través de menú el sistemao eligiendo "View Page Source" en el menú contextual (o con el atajo del tecladoCtrl-U).Tu puedes visualizar solo parte de el código fuente de una página destacandouna porción de al página Web y mientras hace click derecho para mostrar wlmenó contextual y elegir "View Selection Source".Reportes de información depáginasFirefox provee información detalladaacerca de una página a través de laventana 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. 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ápidoTu puedes acceder a la ventana Page Info desde "Tools > Page Info" o porhaciendo click derecho en la página y seleccionando "View Page Info" desde elmenú contextual.Consola JavascriptLa Consola Javascript, es un herramienta para los desarrolladores de JavaScriptpara escribir código snippets o archivos externos de JS. La consola proporcionauna interfaz para usar los componentes XPCOM, los medios para el cargamentodinámico de script, y los reportes relacionados con Javascript así como loserrores CSS de la página Web.Inspector DOMEl Inspector DOM proporciona acceso directo al Document Object Model. Paracada elemento, ofrece una lista de información incluyendo cual de las reglas delCSS están afectando cualquier elemento, dado en or den de prioridad de la hojade estilo cascada. Para el acceso rápido al DOM de un elemento seleccionado,puede también instalar la extensión Inspect Element.
  4. 4. Consejo RápidoFirefox viene con el inspector DOM, pero en las maquinas Windows, tu necesitaselegir cuando instalas por primera vez el navegador. Elige la opción "CustomInstall" y selecciona "Web Developer Tools". Una ves instalado, el Inspector DOMde Firefox esta dentro del menú "Tools".Extensiones de desarrollo Web deFirefoxAdicionalmente de las herramientas de desarrollo Web incorporadas, Firefoxproporciona la habilidad de agregar funcionalidades de desarrollo Web a travésdel uso de programas agregados o "add-on" llamados extensiones. Algunas delas extensiones más útiles se describen en las diapositivas siguientes. Haymuchas más extensiones para desarrollo y están disponibles en el sitio "MozillaUpdate". Hecha un vistazo del submenú de Developer Tools para buscarextensiones adicionales de desarrollo.Web Developer ExtensionEsta extensión, por si sola, hace a Firefox una indispensable herramienta para eldesarrollo y pruebas W eb. Web Developer Extension agrega una barra deherramientas al navegador conteniendo varias herramientas de desarrollo web.Despliega el tamaño de las imágenes, da los CSS e información de losformularios, deshabilita ciertos elementos en una página, y mucho más.AccesibilidadExtención de Accesibilitdad para Firefox ayuda en las pruebas de estructura deletiquetado de una pá gina para resolver las necesidades de la gente condiscapacidades. Fangs da una representación textual de una página, similar a lamanera como es leído por un lector de pantalla. Para mas pruebas deaccesibilidad use la extensión Accessibar o "Web Developer Extension".
  5. 5. ColoresColorzilla es una herramienta "Eyedropper". Al apuntar sobre un elementomuestra la información del color, de la trayectoria del DOM, así como lascoordenadas X,Y basándose en el anterior click.CookiesLa extensión Add & Edit Cookies permite la edición o agregado cookies a unapágina. Esta extensión es una característica más de la extensión View Cookies.
  6. 6. CSSEl CSSViewer inspecciona elementos en un página dando un completodespliegue de la declaración CSS para el elemento seleccionado.Aardvark es un depurador de CSS con modificantes del teclado. Despliegaelementos en la página tal como el nombre del elemento, de la identificación, ode la clase de un elemento seleccionado.Consejo RápidoTu deslizas el ratón sobre la página, y podrás ver un rectángulo rojo para cadaelemento bajo el cursor. Además también veras un pequeño titulo amarillo quemuestra 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, yJavaScript. Desplegará errores que ocurren al momento de la visualización deuna página, colocará el cursor en la línea apropiada, y tiene en cuenta lainspección de diversos valores del DOM.
  7. 7. 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 losenlaces 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.
  8. 8. Información de páginaLa extensión Extended Statusbar agrega información a la barra de estadodesplegando el promedio de la velocidad de la descarga, los bytes descargados,tiempo de carga, numero de imágenes descargadas y el porcentaje de laspá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, depalabras claves, y de enlaces.Parámetros de página.Live HTTP Headers despliega información acerca de las cabeceras HTTP en unapágina en tiempo real.UrlParams es una barra lateral que despliega los parámetros de la forma queFirefox ha enviado al servidor en la petición anterior. También le deja cambiar oagregar parámetros y reenviar la petición.
  9. 9. Agentes del usuarioUser 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ódigofuente del Firefox.
  10. 10. Visores de páginas en otrosnavegadoresIE Tab es una extensión que usa los lanzadores de su URL en Internet Explorerdentro de una pestaña de Firefox. Es un ahorrador simple del tiempo alcomprobar las páginas para saber si hay compatibilidad a través denavegadores.IE View permite a la página actual o a un enlace seleccionado abrirse en elnavegador Internet Explorer. OperaView provee la misma funcionalidad para elnavegador web Opera. Adicionalmente, FirefoxView le permite a Firefox abrir lapágina actual o el enlace seleccionado cargando el Internet Explorer.Firefox BookmarkletsBookmarklets (favlets) son pequeños programas JavaScript que son almacenadoscomo un URL dentro de la lista de marcadores de un navegador y agregaherramientas funcionales al navegador. Mientras que muchos de las listas demarcadores pueden ya contar con estas listas de extensiones, 2 buenas fuentes
  11. 11. pueden ser encontradas en Slayer Office y Square Free. Slayer Office Favlet Suitees particularmente útil para mostrar sugerencias, como una lista de colores deuna página web o cambiar los campos ocultos de un formulario.Extensiones de herramientas dedesarrollo en FirefoxAdemás de las extensiones que ayudan a un desarrollador a codificar y a probaruna página Web, existen varias extensiones de Firefox que están diseñadas paracomplementar o remplazar varias herramientas de desarrollo de escritorio. Estasextensiones proporcionan un alternativa interesante al software tal comoFilezilla, KomodoEdit o Nvu.EditoresCodetch es un editor de código para varios lenguajes etiquetados. Simula muchade 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.
  12. 12. 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 archivode 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 enformas muy diferentes. Lo más importantemente, es que permite que ustedcapture el documento entero de la página Web que usted está viendo.
  13. 13. ConclusionesMientras que puede parecerse desalentador al principio tiene que dedicarletiempo para familiarizarse con muchas de las extensiones mencionadas en lasdiapositivas anteriores. Esto le ahorrará una gran cantidad de tiempo yfrustraciones. Especialmente al familiarizarse con las extensiones "WebDeveloper 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 AttributionNonCommercial ShareAlike License.Traducido al Español por: Leonardo Caballero y la puedes descargar desde miproyecto llamado Documentación de Leonardo Caballero

×