Vous êtes sur la page 1sur 18

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.

com

Extensiones de Firefox

Autores del manual Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com: Miguel Angel Alvarez
Director de DesarrolloWeb.com http://www.desarrolloweb.com (11 captulos)

Manual Extensiones de Firefox: www.desarrolloweb.com/manuales/extensiones-firefox.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Extensiones Firefox
Las extensiones de Firefox son unos pequeos aadidos que se pueden instalar en el navegador. Son una especie de Plugins, pero ms sencillos y desarrollados por personas ajenas propio Firefox. Pueden aadir nuevas barras de herramientas, mens contextuales, mens o nuevas opciones en la barra de mens, funcionalidades mientras navegamos por la web, etc. Existen muchos tipos de extensiones, con una amplia gama de utilidades, tanta como nos podamos imaginar. Para hacernos una idea, podemos entrar en la pgina de la organizacin mozilla donde se pueden ver las extensiones de Firefox organizadas por categoras: https://addons.mozilla.org/es-ES/firefox/browse/type:1 Firefox tiene una ventana especial (que podemos abrir desde el men Herramientas > Extensiones (Firefox 1) o bien desde el men Herramientas > Complementos (Firefox 2)) para gestionar las extensiones que tenemos instaladas en el sistema: actualizarlas, desinstalarlas o configurar las opciones de cada extensin. Por lo cual ser sencillo trabajar con ellas, decidir cules nos interesan y solucionar problemas si alguna extensin no funciona correctamente. Instalar una extensin de firefox La instalacin de las extensiones de Firefox es muy sencilla. Simplemente tenemos que ir a la pgina donde se muestra la extensin que nos interesa y tendrn un botn o un enlace para instalarla. La instalacin se realiza automticamente. Pero tendremos que cerrar todas las ventanas de Firefox para que termine con xito y podamos empezar a utilizar la extensin. En Firefox 2 nos ofrecen la posibilidad de cerrar automticamente todas las ventanas para reiniciar Firefox y luego automticamente tambin se abren de nuevo todas las ventanas de firefox que tenamos, para continuar nuestra navegacin por donde la dejamos. Muchas extensiones tienen su propia pgina de inicio y en general todas las extensiones se pueden acceder desde el sitio web de mozilla.org en la direccin que ofrecamos antes: https://addons.mozilla.org/es-ES/firefox/browse/type:1 Desinstalar una extensin para Firefox Si en cualquier momento queremos desinstalar una extensin tendremos que ir a la ventana de trabajo con las extensiones o complementos (Men de Herramientas > Extensiones o en otras versiones Herramientas > Complementos) Seleccionamos la extensin que queremos desinstalar y apretamos el botn desinstalar. Pero tambin podramos desactivarla, pulsando el botn desactivar, si no estamos seguros de querer eliminar la extensin definitivamente del sistema. Conclusin Personalmente, utilizaba Internet Explorer por su rapidez e integracin en el escritorio de Windows, pero hace tiempo que cambi mis costumbres y empec a utilizar Firefox. Ahora utilizo da a da algunas de las extensiones que se pueden integrar con este navegador de la fundacin Mozilla y ya se me hara difcil la idea de volver a Internet Explorer.
Manual Extensiones de Firefox: www.desarrolloweb.com/manuales/extensiones-firefox.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 2

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Hemos publicado un manual de Extensiones de Firefox, donde vamos a ir comentando extensiones interesantes, sobretodo las que puedan ser ms tiles para el colectivo de desarrolladores. Manual de Extensiones de Firefox Artculo por Miguel Angel Alvarez

Extensiones de Firefox tiles para desarrolladores del web


Es de sobra conocido el programa Firefox, un digno competidor de la guerra entre navegadores, lo que no son tan conocidas son algunas de sus extensiones, que pueden resultar de mucha utilidad en nuestro da a da como desarrolladores web. Firefox tiene una ventana especial (en el men Herramientas - Extensiones) para gestionar las extensiones que tenemos instaladas en el sistema: actualizarlas, desinstalarlas o configurar las opciones de cada extensin. Por lo cual ser sencillo trabajar con ellas, decidir cules nos interesan y solucionar problemas si alguna extensin no funciona correctamente.
Nota: para que una extensin recin instalada empiece a funcionar hay que reiniciar Firefox. Es decir, cerrar todas las ventanas abiertas del navegador y volver a abrirlo.

Se puede encontrar informacin sobre todas las extensiones disponibles para Firefox en https://addons.mozilla.org/extensions/?application=firefox Extensiones de Firefox para desarrolladores Existen extensiones de todo tipo, como bloquear scripts, optimizar la velocidad, bloquear anuncios, editar el CSS de una pgina, ver la pgina por la que ests navegando con Internet Explorer, validar un documento, etc. Como se puede ver, hay de todo tipo, pero nos vamos a centrar en ofrecer algunas notas sobre extensiones tiles para desarrolladores. EditCSS Una extensin para alterar el estilo CSS de cualquier pgina web y visualizar los resultados inmediatamente. Crea un nuevo panel lateral (se accede a travs del men Ver - Panel lateral Edit CSS) donde se listan los estilos del documento actual y permite editarlos. HTML Validator Para incluir una herramienta de validacin del HTML en Firefox. Muestra el nmero de errores en una pgina en un icono en la barra de estado. Adems, cuando se visualiza el cdigo fuente se obtiene una descripcin de los errores. Se supone tambin que se resaltan los errores en el cdigo fuente, pero esa posibilidad parece no funcionar en mi sistema. ViewSourceWith Permite ver el cdigo fuente de una pgina web con cualquier editor que tengamos instalado en nuestro ordenador. Es muy til para ver rpidamente un cdigo generado con un lenguaje de programacin del lado del servidor en el editor con el que estemos acostumbrados a trabajar. Tambin se puede pulsar con el botn derecho sobre una imagen y utilizar esta extensin para abrirla con un editor de imgenes (pero si la imagen enlaza con una pgina se intenta ver el cdigo fuente de la pgina enlazada). Para poder utilizar un editor externo previamente tenemos que darlo de alta en la pantalla de configuracin de la extensin. View formatted source

Manual Extensiones de Firefox: www.desarrolloweb.com/manuales/extensiones-firefox.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Muestra el cdigo fuente de una pgina, pero le aplica un formato sencillo, a base de tabulaciones y colores, para que resulte ms sencillo de leer. Crea una opcin en el men contextual que nos da un par de posibilidades para ver el cdigo fuente: de todo el documento, o por partes, seleccionando el rea en la pgina de la que queremos ver su cdigo. View Rendered Source Chart Muestra de manera ms visual el cdigo de una pgina, tabulando y agrupando los distintos elementos, a los que tambin se le aplica un color de fondo para diferenciarlos visualmente. ColorZilla Es una herramienta que permite seleccionar el color de cualquier punto de la pgina web. Se pone un icono de un cuentagotas en la barra de estado. Si pulsamos sobre el icono se nos permite seleccionar un color de la pgina. Luego, con el color seleccionado, si pulsamos con el botn derecho del ratn, podemos realizar varias acciones, como copiar el color al portapapeles. MeasureIt Sirve para medir reas de la pgina, es decir, su altura y su anchura. Crea un icono en la barra de estado que, al pulsarlo, nos permite hacer una seleccin dentro de la pgina web. Con ello se resalta el rea que hemos seleccionado y nos indica su ancho y alto. En fin... como se puede haber comprobado, hay bastantes posibilidades de ampliacin de Firefox que seguro que resultan muy tiles para las personas que nos pasamos el da programando o diseando pginas web. En otros artculos se podrn explicar nuevas extensiones de inters. No obstante, recordamos que todos los aadidos posibles para Firefox se encuentran en https://addons.mozilla.org/extensions/?application=firefox Tenemos un Manual de Extensiones de Firefox con ms informacin de inters. Artculo por Miguel Angel Alvarez

Web Developer, extensin para Firefox


Las extensiones de Firefox son aadidos que se pueden instalar opcionalmente para dotar de nuevas funcionalidades y herramientas al programa. En este caso vamos a mostrar una extensin muy interesante para desarrolladores: Web Developer. Lo bueno de esta extensin es que incluye muchas de las herramientas ms tiles a la hora de desarrollar una pgina, todas instaladas de un golpe y accesibles a travs de una barra de navegacin, de esas que aparecen en la parte de arriba del navegador, debajo de la botonera.
Nota:Se ha comentado lo con detalle lo que son las extensiones de Firefox y se han dado ejemplos de las ms comunes para desarrolladores. Todo ello en el artculo Extensiones de Firefox tiles para desarrolladores del web.

Extensin Web Developer Como decamos, esta extensin crea una nueva barra de navegacin, que se sita en la parte de arriba de la ventana de Firefox. Esta barra de navegacin contiene una serie de funciones ordenadas en varios botones. Veremos las ms interesantes:

Manual Extensiones de Firefox: www.desarrolloweb.com/manuales/extensiones-firefox.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Disable: Sirve para deshabilitar diversos componentes o partes del navegador. Por ejemplo, para deshabilitar la cach, Javascript, el bloqueador de popups, los colores de la pgina Cookies: nos permite hacer cosas con las cookies, como no permitirlas o encontrar informacin completa de las cookies que nos envan en cada pgina. CSS: para realizar diversas acciones sobre las hojas de estilo. Nos permite no aplicarlas a la pgina, ver algunos estilos y otros no incluso tiene una opcin para editar las hojas de estilo en el propio Firefox y as ver cmo, alterando el cdigo CSS de la pgina, se cambia el aspecto de la web. Forms: nos permite realizar diversas acciones sobre formularios, como reasaltar y obtener informacin de todos sus campos. Pero tambin nos permite hacer cosas ms peregrinas, como cambiar un campo select por un campo de texto, completar con textos todos los campos del formulario o quitar los maxlength de los campos. Images: dispone de diversas opciones para alterar la presencia de las imgenes. Puedes permitirlas o deshabilitarlas, incluso deshabilitar slo las imgenes que son externas al sitio web. Mostrar informacin de las imgenes, como sus rutas, tamao en bytes, dimesiones en pxeles, etc. Information: nos permite obtener ms informacin de un montn de elementos de la pgina. Permite ver informacin sobre las anclas, el tamao del documento, la profundidad de las tablas, el Javascript que se est ejecutando, informacin de los enlaces, etc. Hay tantas cosas que algunas son difciles de entender qu es lo que muestran. Miscellaneous: son varias opciones de distinta ndole, como mostrar comentarios, unas guas para saber la localizacin de puntos en la pgina, editar el cdigo HTML para ver qu ocurre directamente al cambiar el cdigo de cualquier pgina sin tener que subirla al servidor, una visualizacin de la pgina en dispositivos con pantallas pequeas.... Estas son opciones desconectadas entre si, pero algunas bastante tiles. Outline: que sirve para destacar elementos de la pgina, como los enlaces, frames, tablas, celdas, elementos obsoletos que se puedan estar utilizando en el cdigo, etc. Resize: es una interesante utilidad para redimensionar la ventana del navegador, para observar el aspecto que tiene la web si se redimensiona la ventana a otros tamaos o definiciones de pantalla. Tools: contiene unas herramientas muy tiles, como verificador de links, validadores del cdigo, acceso a la consola de Java o Javascript, etc. View Source: como su nombre indica, nos sirve para ver el cdigo fuente. Por ltimo, tambin se dispone de un botn para acceder a diversas opciones para configurar el comportamiento del navegador o de esta extensin para desarrolladores. Conclusin Se trata de una extensin que aconsejamos instalar a todos los desarrolladores, ya que
Manual Extensiones de Firefox: www.desarrolloweb.com/manuales/extensiones-firefox.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 5

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

concentra en un espacio mnimo todas las funcionalidades y herramientas que pueden hacernos la vida ms sencilla. Un gran trabajo, que confirma a Firefox como un navegador extremadamente til para las personas que desarrollamos pginas web. Artculo por Miguel Angel Alvarez

and editor web que funciona como extensin de Mozilla


and es un editor de pginas web gratuito y muy sencillo. Es ideal para quien quiere comenzar a disear pginas sin muchas dificultades, es decir, quien desea disponer de un editor que disponga de las opciones ms comunes para crear webs, pero sin entrar en complicados mens y funciones de los programas profesionales. and tiene una caracterstica especial, que se incorpora como extensin en Firefox. Esto significa que debemos primero tener Firefox y luego instalar la extensin and, para proveerse de las funcionalidades de creacin de pginas web. Adems, integrarse como extensin en Firefox, tiene una utilidad adicional para webmasters ms avanzados, porque les permite tener a mano, mientras estn navegando, un editor web sencillo con el que hacer pequeos trabajos rpidamente.
Referencia: Tenemos un artculo que habla sobre otras extensiones de Firefox tiles para desarrolladores.

No resulta para nada complicado instalar una extensin de Firefox. Simplemente tenemos que entrar en la pgina de la extensin y apretar el botn Instalar. En concreto la pgina de la extensin and es https://addons.mozilla.org/es-ES/firefox/addon/1143. Una vez instalado y reiniciado Firefox tendremos en el men de edicin del navegador una nueva opcin con el nombre de and, a travs de la que podremos ejecutar el editor de pginas web. Comprobaremos que se trata de una herramienta muy bsica, pero que soporta las necesidades ms comunes. and es un editor WYSIWYG, de los que permiten crear la pgina en vista diseo y sin necesidad de conocer HTML. No obstante, tambin permite editar cdigo HTML directamente, pues dispone de los dos modos de edicin. Otra caracterstica interesante es que permite editar varios archivos al mismo tiempo, por medio de unas pestaas que permiten seleccionar el archivo que se desea editar. Dispone de soporte para tablas, imgenes, formularios, CSS y por supuesto cualquier estilo que se pueda aplicar desde HTML. Otras opciones que obtenemos en Firefox al instalar and son un editor de textos que aparece en el men Editar - and - Editor de textos. Es un editor de texto plano, como el bloc de notas, pero que permite tener abiertos varios ficheros a la vez. Tambin disponemos, en el men Editar - and - Editar esta pgina y en el men contextual, una opcin para editar la pgina que se est visualizando en ese momento en el navegador. Es til para editar rpidamente un documento HTML, pero slo funciona cuando la pgina est guardada en nuestro disco duro. As que si queremos utilizarlo con una pgina que est en Internet primero tenemos que guardarla en nuestro ordenador, abrirla con Firefox y editarla.
Manual Extensiones de Firefox: www.desarrolloweb.com/manuales/extensiones-firefox.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 6

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Artculo por Miguel Angel Alvarez

Ver cabeceras del HTTP con LiveHttpHeaders


Las cabeceras del HTTP son informaciones que se intercambian entre el navegador, o cualquier otro cliente, y el servidor web que aloja una pgina que se desea consultar. Las cabeceras del http son transparentes para nosotros, pero en ocasiones contienen informaciones que pueden servir de ayuda al webmaster o desarrollador de un sitio web. Estas cabeceras permiten transportar informacin de control entre el cliente y el servidor, como el estado de respuesta del servidor, cookies enviadas al cliente, tipo de contenido que se est enviando/recibiendo, momento en el que se realizan las solicitudes o entregas de informacin, etc. En concreto a mi me ha resultado til para saber qu cdigos de control enviaba nuestro servidor cuando solicitbamos una pgina que no exista, para asegurarme que el cdigo de error enviado por el servidor es un 404. Existe un programa para Firefox, que funciona como una extensin del navegador, que se puede instalar para tener informacin sobre las cabeceras del HTTP. El programa se llama LiveHttpHeaders y se puede encontrar toda la informacin, aunque en ingls, en: http://livehttpheaders.mozdev.org/ LiveHttpHeaders funciona como una extensin de Firefox. Tenemos un artculo en DesarrolloWeb.com donde podemos saber ms acerca de las extensiones de Firefox y otras extensiones tiles para desarrolladores.
Manual Extensiones de Firefox: www.desarrolloweb.com/manuales/extensiones-firefox.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 7

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Al instalarse LiveHttpHeaders (Podremos ver en la pgina un enlace que pone "Installation") se aadirn una serie de opciones en Firefox para analizar las cabeceras del HTTP. Son las siguientes: 1) Se aade una pestaa en la ventana de informacin de la pgina. En Firefox cuando pulsamos con el botn derecho del ratn en la pgina web nos sale el men contextual en el que tenemos una opcin llamada "Ver informacin de la pgina". Con LiveHttpHeaders podremos ver en esa ventana tambin las cabeceras del HTTP, tanto enviadas como recibidas.

2) En el men "Herramientas" de Firefox se aade una opcin llamada "Live HTTP Headers", que abre una ventana con las cabeceras HTTP que se van enviando y recibiendo a medida que se navega por los sitios web. Las cabeceras aparecen en tiempo real a medida que se van generando.

Manual Extensiones de Firefox: www.desarrolloweb.com/manuales/extensiones-firefox.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

3) Una opcin en la ventana de cabeceras en tiempo real que permite repetir una solicitud al servidor web, editando las cabeceras del HTTP para cambiarlas tal como nos interese. En definitiva, una herramienta muy til para examinar las cabeceras HTTP que estamos enviando y recibiendo del servidor web. Ver las cabeceras HTTP es un tema que puede necesitemos hacer pocas veces, pero resulta difcil si no tenemos una herramienta como LiveHttpHeaders. Artculo por Miguel Angel Alvarez

Firebug
Vamos a hablar sobre Firebug, una extensin de Firefox muy til para desarrolladores del web, que permite examinar minuciosamente cada uno de los elementos de la pgina, en busca de errores del cdigo o fallos de presentacin. Por medio de Firebug podemos controlar cualquier cosa que ocurre dentro de Firefox cuando carga cualquier pgina web. Permite examinar todos los elementos HTML, y adems los estilos CSS y los cdigos de scripting en Javascript que est ejecutando la pgina. Antes que nada habra que comentar lo que son las extensiones de Firefox. Son una especie de plugins o aadidos que se pueden instalar de manera adicional en Firefox, para proveer al navegador de nuevas funcionalidades. Tenemos un manual que explica en detalle muchas ms cosas acerca de las extensiones de Firefox. Pues Firebug es una de esas extensiones imprescindibles para desarrolladores, que nos puede ahorrar muchos dolores de cabeza, puesto que ayuda a buscar errores o entender posibles comportamientos anmalos o no esperados de la pgina que estamos desarrollando. Con Firebug podemos examinar cada parte de la pgina, saber de qu elementos depende dentro de la jerarqua de etiquetas HTML y todos los estilos CSS que se aplican. Adems de permitir alterar en lnea cualquier etiqueta o declaracin de estilos, para ver el resultado sin tener que
Manual Extensiones de Firefox: www.desarrolloweb.com/manuales/extensiones-firefox.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 9

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

editar el cdigo y recargar el documento. Adems, nos da informaciones completas de los script Javascript y los errores que se puedan producir en la ejecucin del cdigo. Como cualquier extensin de Firefox, es gratuita y libre de uso, con lo que cualquiera se puede aprovechar de esta importante ventaja para desarrollar webs libres de errores. Entre las caractersticas de la extensin destacamos:

Se puede abrir Firebug en una nueva ventana o bien en la parte de debajo de la ventana del navegador. Una vez instalada la extensin, en el men de herramientas tenemos las opciones de Firebug, para ponerlo en funcionamiento y definir donde queremos que aparezca la consola. Se puede inspeccionar cualquier etiqueta HTML y editarla desde el propio Firebug, para ver los resultados en la pgina al instante. Lo mismo con los estilos CSS, podemos ver qu estilos afectan a cada rea o elemento de la pgina y editarlos en el instante por medio de la consola Firebug, viendo los resultados en la propia pgina. Tiene herramientas para ver cmo se maquetan los elementos de la pgina con las propiedades CSS, con reglas de en unidades de pxel, para ver donde se sita cada elemento y por qu, los mrgenes, padding, etc. Otra cosa interesante que ofrece es una visualizacin del tiempo que ocupa al navegador descargar o poner en marcha cada uno de los elementos que componen la pgina, lo que nos puede dar una idea de qu consumos de tiempo tiene cada parte, como imgenes, banners, scripts externos, etc. Muy til si tu pgina se retrasa en cargar y no sabes exactamente por qu. Permite debug del cdigo Javascript. Adems, cuando algo no funciona bien, Firebug lo resalta para que lo veas fcilmente y te da informaciones sobre lo que puede estar ocurriendo. Permite explorar la jerarqua Javascript de componentes del navegador (DOM).

Puedes ejecutar cdigo Javascript en el instante, para ver cmo reacciona la pgina. En definitiva, merece la pena instalar la extensin para Firefox Firebug y comprobar por nosotros mismos las toneladas de informacin que puede extraer de la pgina y lo fcil que es explorar todos sus componentes en busca de errores o fallos. Firebug es sin duda una de las extensiones que he visto ms tiles para nosotros los desarrolladores. Entra en el sitio de descarga de Firebug para ms informacin. Artculo por Miguel Angel Alvarez

Ver mejor el cdigo fuente con Source Viewer Tab


Source Viewer Tab es una extensin para Firefox, til para desarrolladores, que mejora las posibilidades de la opcin "Ver cdigo fuente" de las pginas web que visitamos. Consta de varias mejoras para la visualizacin del cdigo y es configurable para seleccionar cul de las maneras es la que preferimos en cada momento. Al ser una extensin para Firefox, debemos instalarla por separado, una vez tengamos Firefox
Manual Extensiones de Firefox: www.desarrolloweb.com/manuales/extensiones-firefox.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 10

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

en nuestro sistema. Para ello tenemos que dirigirnos a la pgina donde se muestran sus caractersticas en el sitio de Mozilla: https://addons.mozilla.org/es-ES/firefox/addon/5908 Queremos recordaros que ya hemos explicado bien el concepto de las extensiones de Firefox, as como sus procedimientos generales para instalarlas, configurarlas o desinstalarlas del sistema. Leer el manual de Extensiones de Firefox. Una vez tenemos la extensin Source Viewer Tab en nuestro Firefox, cuando solicitamos ver el cdigo fuente de una pgina, bien sea a partir del men contextual del navegador o del men de "Ver - Cdigo Fuente", se mostrar dicho cdigo en una pestaa o solapa nueva del navegador, en lugar de una ventana aparte. As mismo, al solicitar la opcin "ver cdigo fuente seleccionado", tambin se mostrar en una solapa aparte. Veamos la siguiente imagen para hacernos una idea del modo de ver el cdigo fuente con esta extensin:

As, cada vez que veamos un cdigo fuente de una pgina, no se nos abrir una ventana nueva, sino que todo quedar dentro de la misma ventana del navegador, lo que puede ser ms cmodo y sobre todo ms ordenado. No obstante, siempre podemos recuperar el estado anterior de nuestro navegador, en caso que deseemos volver a ver el cdigo fuente en una ventana aparte. Para ello simplemente debemos configurar la extensin desde el men "Herramientas - Complementos". Se nos mostrar una ventana nueva con las extensiones instaladas en nuestro Firefox, donde tendramos que seleccionar el complemento Source Viewer Tab y apretar el botn de opciones.

Manual Extensiones de Firefox: www.desarrolloweb.com/manuales/extensiones-firefox.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

11

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Desde la ventana de opciones podemos elegir entre:


Window: Ver el cdigo fuente en una nueva ventana, tal como se realiza de manera predeterminada en Firefox. Tab: Ver el cdigo fuente de la pgina en una nueva pestaa del navegador Elegir programa: esta opcin permite seleccionar cualquier programa de nuestro ordenador para ver el cdigo fuente utilizndolo, una opcin que tambin puede estar interesante para quien prefiere utilizar un editor de textos a su gusto.

En definitiva, Source Viewer Tab puede ofrecernos alguna mejora adicional al modo como se visualizan los cdigos fuente de las pginas web en Firefox. La extensin en si no es extremadamente til o imprescindible, pero demuestra una vez ms que Firefox tiene mucho que aportar a los desarrolladores de webs. Artculo por Miguel Angel Alvarez

Manual Extensiones de Firefox: www.desarrolloweb.com/manuales/extensiones-firefox.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

12

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

ScribeFire
Presentamos una interesante extensin para Firefox que va a servir de gran ayuda para los creadores de blogs y en general a las personas que se dedican a la edicin de textos para pginas web, por la comodidad que ofrece para escribir noticias, a la vez que se visitan sitios web. ScribeFire es una extensin que sirve para dividir en dos partes la ventana del navegador. En una parte se visualizan las pginas web que vamos visitando y en otra se muestra un procesador de textos, el propio ScribeFire. Al verse las pginas web junto con el procesador de textos, permite escribir posts fcilmente acerca de los contenidos que vamos encontrando por la Web, algo muy recurrido para los bloggers, que resulta especialmente til combinado con la opcin de publicar directamente el texto en el blog, sin tener que acceder a las pginas de administracin del blog. Con esta extensin por tanto, se puede escribir un post para un blog sin salir de Firefox, porque ofrece un procesador de textos dentro del propio navegador, donde se puede redactar la noticia cmodamente sin tener que pasar a otra aplicacin como Word, Open Office Write, etc. Adems, como deca, permite configurar ScribeFire para comunicar con las pginas de administracin del blog y publicar el propio post desde el propio sistema procesador de textos. Como caractersticas del editor cabe sealar que permite editar con texto enriquecido, enlaces, imgenes, etc. as como editar varios post o artculos al mismo tiempo y gestionar todas las etiquetas y dems opciones de publicacin de la noticia en el blog. Pero no slo tenemos estas opciones, ScribeFire va aun ms lejos y se convierte en toda una herramienta para la publicacin en webs 2.0 por medio de numerosas ayudas a la hora de administrar el contenido de tu blog, e integracin con servicios como Youtube, sistemas de compartir noticias como Digg, Ma.gnolia, Facebook, Mahalo, etc. Tiene tambin soporte para FTP y una buena lista de opciones para configurar el editor y que se adapte mejor a tus usos o a las preferencias del blog que administras. Ya, lo ltimo es la opcin Quickblogging, que permite editar un post a la vez que navegas por tu propio blog, sin necesidad de abrir ScribeFire. Para ello sale una barra de opciones horizontal arriba del todo para editar la nota del blog que ests visitando. Al abrir ScribeFire por primera vez nos aparece un asistente para configurar la extensin, en el que podemos indicar los datos de acceso como administradores a nuestro blog. Estos datos
Manual Extensiones de Firefox: www.desarrolloweb.com/manuales/extensiones-firefox.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 13

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

sern necesarios para que ScribeFire funcione correctamente con todas las opciones avanzadas de edicin de blogs y publicacin directa de los post. El nmero de blogs distintos que soporta es muy nutrido. Entre ellos se encuentran Word Press, Movable Type, Drupal, TextPattern, Roller, Meta Weblog API, Blogger, Tumblr. Si no tenemos configurado ningn blog, cada vez que se inicie la extensin ScribeFire (tecla F8) se mostrar el asistente para configurarlo. Este asistente no encuentro el modo de forzar que no aparezca, lo que resulta un poco pesado si slo deseamos el editor de textos que proporciona y no queremos las opciones de publicacin en blog. Combinado con otras extensiones de Firefox, como el diccionario de Espaol (Ver categora de diccionarios y paquetes de idioma de Firefox), permite adems realizar una comprobacin ortogrfica mientras se escribe, lo que es muy til para no meter la pata en nuestros posts. En definitiva, ScribeFire es la extensin ms til para un blogger, para aumentar su productividad y facilitarle la tarea en su da a da como editor. Ms informacin en http://www.scribefire.com/ Para instalar ScribeFire en tu Firefox visita: https://addons.mozilla.org/enUS/firefox/addon/1730 Tenemos un artculo en DesarrolloWeb.com para obtener ms informacin sobre cmo instalar y configurar una extensin en Firefox. Adems, te recomendamos leer el manual de Extensiones de Firefox para desarrolladores, donde ofrecemos comentarios y explicaciones de otras interesantes extensiones para facilitarte la vida. Artculo por Miguel Angel Alvarez

ReminderFox
En el manual de Extensiones de Firefox ya hemos visto unas cuantas extensiones tiles para desarrolladores web. En este caso vamos a ver otra extensin que seguro que resultar de utilidad a cualquier persona que quiera organizar su agenda, estando disponible tanto para el propio navegador Firefox, como para el programa de correo de Mozilla Thunderbird. ReminderFox es una extensin que pretende ayudar a mantener y recordar a los usuarios de Thunderbird o Firefox sus citas, eventos o listas de tareas para hacer. Todas las citas se organizan, como no podra ser de otra manera, en un da y hora, aunque a pesar de ello, Reminder Fox no pretende ser una herramienta de calendario de eventos propiamente dicho, sino un sistema ligero y de fcil configuracin de eventos. El programa se instala como extensin en Firefox o Thunderbird y se integra en el propio navegador o programa de correo en la barra de estado, en la parte de abajo de la ventana de ambos programas, creando un icono con un lazo, a travs del cual pinchando se acceden a las opciones de la extensin. La pantalla inicial es simplemente una lista de las tareas que se han configurado en el sistema, con algunas mnimas opciones de clasificacin de las mismas. Con un botn para crear una nueva tarea.

Manual Extensiones de Firefox: www.desarrolloweb.com/manuales/extensiones-firefox.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

14

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Las caractersticas y funcionalidades de las tareas de ReminderFox son muy sencillas. Permite crear citas o eventos a travs de una sencilla ventana, pero que tiene todas las opciones que en principio podramos necesitar para catalogar y localizar en el tiempo la tarea. Adems, permite configurar los avisos o recordatorios que queremos que el programa nos muestre (a la hora exacta de la tarea o con cierta antelacin o periodicidad). Estn disponibles otras opciones para localizar fsicamente el lugar de la reunin o para indicar una URL relacionada con la tarea. Otra cosa interesante es que permite categorizar las tareas.

Los recordatorios, como deca, se pueden configurar de varias maneras. Cuando el programa tiene algo urgente que recordar aparece el lazo de la barra de estado en color rojo, con el ttulo de la tarea planificada al lado.

Tambin nos recuerda los eventos a travs de un mensaje que sale de la barra de tareas de Windows, en una pequea ventana con las tareas actuales y futuras que se encuentran planificadas

Manual Extensiones de Firefox: www.desarrolloweb.com/manuales/extensiones-firefox.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

15

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Adems, cuando llega la hora exacta que hemos planificado el recordatorio, nos sale una ventana con los datos de la cita que permanece activa hasta que la aceptamos o posponemos la cita para otro momento, con la opcin de silenciar el recordatorio por unos minutos, horas o das. Dado las diversas formas de recordarnos las tareas no ser fcil que se nos olviden. Pero, lgicamente, hace falta tener Thunderbird o Firefox ejecutndose en el ordenador para poder recibir los recordatorios. En general, es una herramienta muy interesante para gestionar nuestras citas, que adems queda integrada de una manera sencilla dentro de programas de uso diario y esto es muy importante, porque los recordatorios slo salen cuando estamos utilizando los programas. Esta extensin de Thunderbird o Firefox nos servir de mucha ayuda para organizarnos, incluso a los ms despistados. Es fcil de uso y requiere poco mantenimiento para llevar al da los eventos. Ms informacin se puede obtener en la propia pgina de la extensin: http://reminderfox.mozdev.org/ Se tiene que instalar de manera separada para Thunderbird o Firefox. Para instalar en Firefox: https://addons.mozilla.org/es-ES/firefox/addon/1191 Para instalar en Thunderbird: https://addons.mozilla.org/es-ES/thunderbird/addon/1191 Artculo por Miguel Angel Alvarez

YSlow para Firebug: Mejorar la carga de tu pgina


Este componente es una extensin para Firefox que se instala como aadido a otra extensin de Firefox llamada Firebug, que ya publicamos en otro artculo de DesarrolloWeb.com: Firebug. El componente YSlow permite analizar el comportamiento de la pgina web que estamos visitando y ofrece multitud de consejos encaminados a mejorar la velocidad de descarga. Cuando instalamos YSlow en Firefox aparece un icono en la esquina inferior derecha, que al pulsarlo nos muestra un anlisis de todos los componentes externos de la pgina en la que estamos, junto con un reporte de la eficiencia que trata muchos aspectos, ms o menos interesantes, como:

Consejos para realizar menos conexiones HTTP. Aadir una cabecera Expires
16

Manual Extensiones de Firefox: www.desarrolloweb.com/manuales/extensiones-firefox.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Hacer Gzip de los componentes para una descarga ms rpida Colocar los archivos de estilos en la cabecera Colocar los scripts en la cabecera Evitar las expresiones CSS en el cuerpo de la pgina Minimizar los archivos de script Javascript Eliminar scripts duplicados Etc.

Todas estas recomendaciones, cuando se deben aplicar sobre el sitio, vienen con referencias a los lugares donde se est actuando de manera incorrecta y con explicaciones sobre qu significa cada uno de los puntos tratados. Aparte del comportamiento de la pgina (performance) se ofrecen otros reportes como

Estadsticas (con el botn stats) que nos ofrece un listado de los componentes externos de la pgina y el peso que ocupan, si estn cacheados o no, etc. con un grfico de tarta para ver el peso relativo de cada uno con respecto a toda la pgina. Un listado de todos los componentes externos (con el botn components) que nos informa de todos los archivos externos cargados para visualizar la pgina, la fecha en la que se crearon, el peso en Kb, el tiempo de carga y si estn comprimidos. Una serie de reportes de inters (en el botn tools) en el que destaca una verificacin de los scrips Javascript, con los errores de sintaxis, que no provocan bugs en tiempo de ejecucin pero que estn mal programados (este reporte lo ofrecen gracias a JSLint, un verificador Javascript). Una completa ayuda sobre el componente (Botn help)

El add-on para Firefox YSlow est ofrecido por Yahoo Developer Network y es de mucha utilidad para los desarrolladores. Podemos descargarlo y obtener ms informacin en: http://developer.yahoo.com/yslow/ Artculo por Miguel Angel Alvarez

FireFTP: programa FTP sobre Firefox


Un programa de FTP sencillo y gratuito. Es como se podran resumir las caractersticas de FireFTP, una extensin de Firefox muy interesante para desarrolladores de webs, que ampla las posibilidades de Navegacin de Firefox tambin a la transferencia de archivos entre nuestro ordenador y los servidores de Internet. FireFTP tiene lo que podramos necesitar de un programa para la transferencia de archivos por FTP, como un gestor de sitios a los que conectar, sistema para hacer descargas de archivos y tambin para subirlos, posibilidad de subir varios archivos a la vez, directorios, etc. La nica diferencia que cabra resaltar es justamente su distribucin, ya que est integrado en el navegador, a travs de una pestaa o en una ventana aparte de Firefox. Con respecto a las caractersticas funcionales hay que decir que son del todo correctas, aunque se echa de menos algo de sofisticacin y personalizacin. Pero no hay que olvidar que se trata de un plugin y no un programa independiente. De todos modos, cualquier uso habitual que podamos necesitar del sistema FTP est incluido, y tiene un men para la configuracin suficiente, con opciones como mostrar o no los archivos ocultos, realizar mltiples conexiones, etc.
Manual Extensiones de Firefox: www.desarrolloweb.com/manuales/extensiones-firefox.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 17

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

FireFTP sera opcin a tener en cuenta sobre todo para usuarios ms inexpertos, que estn familiarizados con Firefox para navegar y que deseen dar el paso inicial al trabajo con FTP. Es sin duda una opcin buena tambin porque, como toda extensin de Firefox, es gratuita, lo que la hace ms accesible que cualquier otro cliente de FTP de pago. De todos modos, recordemos que FireFTP no es el nico software para hacer FTP 100% gratuito. Tambin tenemos el cliente FTP Filezilla, que es bastante ms avanzado. Para lo que considero que puede estar muy bien es para tener centralizado en un mismo programa todas las transferencias y llevar en un mismo programa todo el software que se puede necesitar para actualizar nuestra pgina web. Adems, como Firefox se puede guardar en un dispositivo como un pendrive, nos permitira llevar en l todo el software para trabajar en otros ordenadores con nuestra pgina sin tener que instalar otros programas. FireFTP es una de esas extensiones que los creadores de pginas web seguro que agradeceremos. Recuerda que puedes conocer otros add-ons interesantes en un manual de DesarrolloWeb.com llamado Extensiones Firefox tiles para desarrolladores. Podemos descargar FireFTP desde la pgina de add-ons de Mozilla Firefox: https://addons.mozilla.org/es-ES/firefox/addon/684

Artculo por Miguel Angel Alvarez

Manual Extensiones de Firefox: www.desarrolloweb.com/manuales/extensiones-firefox.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

18

Vous aimerez peut-être aussi