manual-extensiones-firefox.pdf

Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

Extensiones de Firefox

Autores del manual

Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com: Miguel Angel AlvarezDirector de DesarrolloWeb.comhttp://www.desarrolloweb.com (11 capítulos)

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 autorización.

1

http://www.desarrolloweb.com/

http://www.desarrolloweb.com/manuales/extensiones-firefox.html



Extensiones Firefox

Las extensiones de Firefox son unos pequeños añadidos que se pueden instalar en el navegador. Son una especie de Plugins, pero más sencillos y desarrollados por personas ajenas propio Firefox. Pueden añadir nuevas barras de herramientas, menús contextuales, menús o nuevas opciones en la barra de menús, 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 página de la organización mozilla donde se pueden ver las extensiones de Firefox organizadas por categorías:

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 extensión. Por lo cual será sencillo trabajar con ellas, decidir cuáles nos interesan y solucionar problemas si alguna extensión no funciona correctamente.

Instalar una extensión de firefox

La instalación de las extensiones de Firefox es muy sencilla. Simplemente tenemos que ir a la página donde se muestra la extensión que nos interesa y tendrán un botón o un enlace para instalarla.

La instalación se realiza automáticamente. Pero tendremos que cerrar todas las ventanas de Firefox para que termine con éxito y podamos empezar a utilizar la extensión. En Firefox 2 nos ofrecen la posibilidad de cerrar automáticamente todas las ventanas para reiniciar Firefox y luego automáticamente también se abren de nuevo todas las ventanas de firefox que teníamos, para continuar nuestra navegación por donde la dejamos.

Muchas extensiones tienen su propia página de inicio y en general todas las extensiones se pueden acceder desde el sitio web de mozilla.org en la dirección que ofrecíamos antes:


Desinstalar una extensión para Firefox

Si en cualquier momento queremos desinstalar una extensión 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 extensión que queremos desinstalar y apretamos el botón desinstalar. Pero también podríamos desactivarla, pulsando el botón desactivar, si no estamos seguros de querer eliminar la extensión definitivamente del sistema.

Conclusión

Personalmente, utilizaba Internet Explorer por su rapidez e integración en el escritorio de Windows, pero hace tiempo que cambié mis costumbres y empecé a utilizar Firefox. Ahora utilizo día a día algunas de las extensiones que se pueden integrar con este navegador de la fundación Mozilla y ya se me haría difícil la idea de volver a Internet Explorer.


2






Hemos publicado un manual de Extensiones de Firefox, donde vamos a ir comentando extensiones interesantes, sobretodo las que puedan ser más útiles para el colectivo de desarrolladores.

Manual de Extensiones de Firefox

Artículo 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 día a día 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 extensión. Por lo cual será sencillo trabajar con ellas, decidir cuáles nos interesan y solucionar problemas si alguna extensión no funciona correctamente.

Nota: para que una extensión recién instalada empiece a funcionar hay que reiniciar Firefox. Es decir, cerrar todas las ventanas abiertas del navegador y volver a abrirlo.

Se puede encontrar información 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 página, ver la página por la que estás 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 extensión para alterar el estilo CSS de cualquier página web y visualizar los resultados inmediatamente. Crea un nuevo panel lateral (se accede a través 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 validación del HTML en Firefox. Muestra el número de errores en una página en un icono en la barra de estado. Además, cuando se visualiza el código fuente se obtiene una descripción de los errores. Se supone también que se resaltan los errores en el código fuente, pero esa posibilidad parece no funcionar en mi sistema.

ViewSourceWith Permite ver el código fuente de una página web con cualquier editor que tengamos instalado en nuestro ordenador. Es muy útil para ver rápidamente un código generado con un lenguaje de programación del lado del servidor en el editor con el que estemos acostumbrados a trabajar. También se puede pulsar con el botón derecho sobre una imagen y utilizar esta extensión para abrirla con un editor de imágenes (pero si la imagen enlaza con una página se intenta ver el código fuente de la página enlazada). Para poder utilizar un editor externo previamente tenemos que darlo de alta en la pantalla de configuración de la extensión.

View formatted source


3



https://addons.mozilla.org/extensions/moreinfo.php?id=697




https://addons.mozilla.org/extensions/?application=firefox



Muestra el código fuente de una página, pero le aplica un formato sencillo, a base de tabulaciones y colores, para que resulte más sencillo de leer. Crea una opción en el menú contextual que nos da un par de posibilidades para ver el código fuente: de todo el documento, o por partes, seleccionando el área en la página de la que queremos ver su código.

View Rendered Source Chart Muestra de manera más visual el código de una página, tabulando y agrupando los distintos elementos, a los que también se le aplica un color de fondo para diferenciarlos visualmente.

ColorZilla Es una herramienta que permite seleccionar el color de cualquier punto de la página 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 página. Luego, con el color seleccionado, si pulsamos con el botón derecho del ratón, podemos realizar varias acciones, como copiar el color al portapapeles.

MeasureIt Sirve para medir áreas de la página, es decir, su altura y su anchura. Crea un icono en la barra de estado que, al pulsarlo, nos permite hacer una selección dentro de la página 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 ampliación de Firefox que seguro que resultan muy útiles para las personas que nos pasamos el día programando o diseñando páginas web.

En otros artículos se podrán explicar nuevas extensiones de interés. No obstante, recordamos que todos los añadidos posibles para Firefox se encuentran en https://addons.mozilla.org/extensions/?application=firefox

Tenemos un Manual de Extensiones de Firefox con más información de interés.


Web Developer, extensión para Firefox

Las extensiones de Firefox son añadidos que se pueden instalar opcionalmente para dotar de nuevas funcionalidades y herramientas al programa. En este caso vamos a mostrar una extensión muy interesante para desarrolladores: Web Developer.

Lo bueno de esta extensión es que incluye muchas de las herramientas más útiles a la hora de desarrollar una página, todas instaladas de un golpe y accesibles a través de una barra de navegación, 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 más comunes para desarrolladores. Todo ello en el artículo Extensiones de Firefox útiles para desarrolladores del web.

Extensión Web Developer

Como decíamos, esta extensión crea una nueva barra de navegación, que se sitúa en la parte de arriba de la ventana de Firefox. Esta barra de navegación contiene una serie de funciones ordenadas en varios botones. Veremos las más interesantes:


4



http://www.desarrolloweb.com/articulos/2273.php


https://addons.mozilla.org/extensions/?application=firefox





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 página…

Cookies: nos permite hacer cosas con las cookies, como no permitirlas o encontrar información completa de las cookies que nos envían en cada página.

CSS: para realizar diversas acciones sobre las hojas de estilo. Nos permite no aplicarlas a la página, ver algunos estilos y otros no… incluso tiene una opción para editar las hojas de estilo en el propio Firefox y así ver cómo, alterando el código CSS de la página, se cambia el aspecto de la web.

Forms: nos permite realizar diversas acciones sobre formularios, como reasaltar y obtener información de todos sus campos. Pero también nos permite hacer cosas más 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 imágenes. Puedes permitirlas o deshabilitarlas, incluso deshabilitar sólo las imágenes que son externas al sitio web. Mostrar información de las imágenes, como sus rutas, tamaño en bytes, dimesiones en píxeles, etc.

Information: nos permite obtener más información de un montón de elementos de la página. Permite ver información sobre las anclas, el tamaño del documento, la profundidad de las tablas, el Javascript que se está ejecutando, información de los enlaces, etc. Hay tantas cosas que algunas son difíciles de entender qué es lo que muestran.

Miscellaneous: son varias opciones de distinta índole, como mostrar comentarios, unas guías para saber la localización de puntos en la página, editar el código HTML para ver qué ocurre directamente al cambiar el código de cualquier página sin tener que subirla al servidor, una visualización de la página en dispositivos con pantallas pequeñas.... Estas son opciones desconectadas entre si, pero algunas bastante útiles.

Outline: que sirve para destacar elementos de la página, como los enlaces, frames, tablas, celdas, elementos obsoletos que se puedan estar utilizando en el código, 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 tamaños o definiciones de pantalla.

Tools: contiene unas herramientas muy útiles, como verificador de links, validadores del código, acceso a la consola de Java o Javascript, etc.

View Source: como su nombre indica, nos sirve para ver el código fuente.

Por último, también se dispone de un botón para acceder a diversas opciones para configurar el comportamiento del navegador o de esta extensión para desarrolladores.

Conclusión

Se trata de una extensión que aconsejamos instalar a todos los desarrolladores, ya que


5




concentra en un espacio mínimo todas las funcionalidades y herramientas que pueden hacernos la vida más sencilla.

Un gran trabajo, que confirma a Firefox como un navegador extremadamente útil para las personas que desarrollamos páginas web.


Ñandú editor web que funciona como extensión de Mozilla

Ñandú es un editor de páginas web gratuito y muy sencillo. Es ideal para quien quiere comenzar a diseñar páginas sin muchas dificultades, es decir, quien desea disponer de un editor que disponga de las opciones más comunes para crear webs, pero sin entrar en complicados menús y funciones de los programas profesionales.

Ñandú tiene una característica especial, que se incorpora como extensión en Firefox. Esto significa que debemos primero tener Firefox y luego instalar la extensión Ñandú, para proveerse de las funcionalidades de creación de páginas web. Además, integrarse como extensión en Firefox, tiene una utilidad adicional para webmasters más avanzados, porque les permite tener a mano, mientras están navegando, un editor web sencillo con el que hacer pequeños trabajos rápidamente.

Referencia: Tenemos un artículo que habla sobre otras extensiones de Firefox útiles para desarrolladores.

No resulta para nada complicado instalar una extensión de Firefox. Simplemente tenemos que entrar en la página de la extensión y apretar el botón Instalar. En concreto la página de la extensión Ñandú es https://addons.mozilla.org/es-ES/firefox/addon/1143.

Una vez instalado y reiniciado Firefox tendremos en el menú de edición del navegador una nueva opción con el nombre de Ñandú, a través de la que podremos ejecutar el editor de páginas web. Comprobaremos que se trata de una herramienta muy básica, pero que soporta las necesidades más comunes.

Ñandú es un editor WYSIWYG, de los que permiten crear la página en vista diseño y sin necesidad de conocer HTML. No obstante, también permite editar código HTML directamente, pues dispone de los dos modos de edición. Otra característica interesante es que permite editar varios archivos al mismo tiempo, por medio de unas pestañas que permiten seleccionar el archivo que se desea editar. Dispone de soporte para tablas, imágenes, 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.

También disponemos, en el menú Editar - Ñandú - Editar esta página y en el menú contextual, una opción para editar la página que se está visualizando en ese momento en el navegador. Es útil para editar rápidamente un documento HTML, pero sólo funciona cuando la página está guardada en nuestro disco duro. Así que si queremos utilizarlo con una página que está en Internet primero tenemos que guardarla en nuestro ordenador, abrirla con Firefox y editarla.


6



https://addons.mozilla.org/es-ES/firefox/addon/1143





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 página 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 información 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 información, etc.

En concreto a mi me ha resultado útil para saber qué códigos de control enviaba nuestro servidor cuando solicitábamos una página que no existía, para asegurarme que el código de error enviado por el servidor es un 404.

Existe un programa para Firefox, que funciona como una extensión del navegador, que se puede instalar para tener información sobre las cabeceras del HTTP. El programa se llama LiveHttpHeaders y se puede encontrar toda la información, aunque en inglés, en:

http://livehttpheaders.mozdev.org/

LiveHttpHeaders funciona como una extensión de Firefox. Tenemos un artículo en DesarrolloWeb.com donde podemos saber más acerca de las extensiones de Firefox y otras extensiones útiles para desarrolladores.


7





http://livehttpheaders.mozdev.org/


Al instalarse LiveHttpHeaders (Podremos ver en la página un enlace que pone "Installation") se añadirán una serie de opciones en Firefox para analizar las cabeceras del HTTP. Son las siguientes:

1) Se añade una pestaña en la ventana de información de la página. En Firefox cuando pulsamos con el botón derecho del ratón en la página web nos sale el menú contextual en el que tenemos una opción llamada "Ver información de la página". Con LiveHttpHeaders podremos ver en esa ventana también las cabeceras del HTTP, tanto enviadas como recibidas.

2) En el menú "Herramientas" de Firefox se añade una opción 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.


8




3) Una opción 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 difícil si no tenemos una herramienta como LiveHttpHeaders.


Firebug

Vamos a hablar sobre Firebug, una extensión de Firefox muy útil para desarrolladores del web, que permite examinar minuciosamente cada uno de los elementos de la página, en busca de errores del código o fallos de presentación. Por medio de Firebug podemos controlar cualquier cosa que ocurre dentro de Firefox cuando carga cualquier página web. Permite examinar todos los elementos HTML, y además los estilos CSS y los códigos de scripting en Javascript que está ejecutando la página.

Antes que nada habría que comentar lo que son las extensiones de Firefox. Son una especie de plugins o añadidos que se pueden instalar de manera adicional en Firefox, para proveer al navegador de nuevas funcionalidades. Tenemos un manual que explica en detalle muchas más 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 anómalos o no esperados de la página que estamos desarrollando. Con Firebug podemos examinar cada parte de la página, saber de qué elementos depende dentro de la jerarquía de etiquetas HTML y todos los estilos CSS que se aplican. Además de permitir alterar en línea cualquier etiqueta o declaración de estilos, para ver el resultado sin tener que


9





editar el código y recargar el documento. Además, nos da informaciones completas de los script Javascript y los errores que se puedan producir en la ejecución del código.

Como cualquier extensión 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 características de la extensión 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 extensión, 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 página al instante.

• Lo mismo con los estilos CSS, podemos ver qué estilos afectan a cada área o elemento de la página y editarlos en el instante por medio de la consola Firebug, viendo los resultados en la propia página.

• Tiene herramientas para ver cómo se maquetan los elementos de la página con las propiedades CSS, con reglas de en unidades de píxel, para ver donde se sitúa cada elemento y por qué, los márgenes, padding, etc.

• Otra cosa interesante que ofrece es una visualización del tiempo que ocupa al navegador descargar o poner en marcha cada uno de los elementos que componen la página, lo que nos puede dar una idea de qué consumos de tiempo tiene cada parte, como imágenes, banners, scripts externos, etc. Muy útil si tu página se retrasa en cargar y no sabes exactamente por qué.

• Permite debug del código Javascript. Además, cuando algo no funciona bien, Firebug lo resalta para que lo veas fácilmente y te da informaciones sobre lo que puede estar ocurriendo.

• Permite explorar la jerarquía Javascript de componentes del navegador (DOM).

Puedes ejecutar código Javascript en el instante, para ver cómo reacciona la página.

En definitiva, merece la pena instalar la extensión para Firefox Firebug y comprobar por nosotros mismos las toneladas de información que puede extraer de la página y lo fácil que es explorar todos sus componentes en busca de errores o fallos.

Firebug es sin duda una de las extensiones que he visto más útiles para nosotros los desarrolladores.

Entra en el sitio de descarga de Firebug para más información.


Ver mejor el código fuente con Source Viewer Tab

Source Viewer Tab es una extensión para Firefox, útil para desarrolladores, que mejora las posibilidades de la opción "Ver código fuente" de las páginas web que visitamos. Consta de varias mejoras para la visualización del código y es configurable para seleccionar cuál de las maneras es la que preferimos en cada momento.

Al ser una extensión para Firefox, debemos instalarla por separado, una vez tengamos Firefox


10





en nuestro sistema. Para ello tenemos que dirigirnos a la página donde se muestran sus características 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 extensión Source Viewer Tab en nuestro Firefox, cuando solicitamos ver el código fuente de una página, bien sea a partir del menú contextual del navegador o del menú de "Ver - Código Fuente", se mostrará dicho código en una pestaña o solapa nueva del navegador, en lugar de una ventana aparte. Así mismo, al solicitar la opción "ver código fuente seleccionado", también se mostrará en una solapa aparte. Veamos la siguiente imagen para hacernos una idea del modo de ver el código fuente con esta extensión:

Así, cada vez que veamos un código fuente de una página, no se nos abrirá una ventana nueva, sino que todo quedará dentro de la misma ventana del navegador, lo que puede ser más cómodo y sobre todo más ordenado.

No obstante, siempre podemos recuperar el estado anterior de nuestro navegador, en caso que deseemos volver a ver el código fuente en una ventana aparte. Para ello simplemente debemos configurar la extensión desde el menú "Herramientas - Complementos". Se nos mostrará una ventana nueva con las extensiones instaladas en nuestro Firefox, donde tendríamos que seleccionar el complemento Source Viewer Tab y apretar el botón de opciones.


11






Desde la ventana de opciones podemos elegir entre:

• Window: Ver el código fuente en una nueva ventana, tal como se realiza de manera predeterminada en Firefox.

• Tab: Ver el código fuente de la página en una nueva pestaña del navegador • Elegir programa: esta opción permite seleccionar cualquier programa de nuestro

ordenador para ver el código fuente utilizándolo, una opción que también 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 códigos fuente de las páginas web en Firefox. La extensión en si no es extremadamente útil o imprescindible, pero demuestra una vez más que Firefox tiene mucho que aportar a los desarrolladores de webs.



12




ScribeFire

Presentamos una interesante extensión 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 edición de textos para páginas web, por la comodidad que ofrece para escribir noticias, a la vez que se visitan sitios web.

ScribeFire es una extensión que sirve para dividir en dos partes la ventana del navegador. En una parte se visualizan las páginas web que vamos visitando y en otra se muestra un procesador de textos, el propio ScribeFire. Al verse las páginas web junto con el procesador de textos, permite escribir posts fácilmente acerca de los contenidos que vamos encontrando por la Web, algo muy recurrido para los bloggers, que resulta especialmente útil combinado con la opción de publicar directamente el texto en el blog, sin tener que acceder a las páginas de administración del blog.

Con esta extensión 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 cómodamente sin tener que pasar a otra aplicación como Word, Open Office Write, etc. Además, como decía, permite configurar ScribeFire para comunicar con las páginas de administración del blog y publicar el propio post desde el propio sistema procesador de textos. Como características del editor cabe señalar que permite editar con texto enriquecido, enlaces, imágenes, etc. así como editar varios post o artículos al mismo tiempo y gestionar todas las etiquetas y demás opciones de publicación de la noticia en el blog.

Pero no sólo tenemos estas opciones, ScribeFire va aun más lejos y se convierte en toda una herramienta para la publicación en webs 2.0 por medio de numerosas ayudas a la hora de administrar el contenido de tu blog, e integración con servicios como Youtube, sistemas de compartir noticias como Digg, Ma.gnolia, Facebook, Mahalo, etc. Tiene también 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 opción 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 estás visitando.

Al abrir ScribeFire por primera vez nos aparece un asistente para configurar la extensión, en el que podemos indicar los datos de acceso como administradores a nuestro blog. Estos datos


13




serán necesarios para que ScribeFire funcione correctamente con todas las opciones avanzadas de edición de blogs y publicación directa de los post. El número 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 ningún blog, cada vez que se inicie la extensión 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 sólo deseamos el editor de textos que proporciona y no queremos las opciones de publicación en blog.

Combinado con otras extensiones de Firefox, como el diccionario de Español (Ver categoría de diccionarios y paquetes de idioma de Firefox), permite además realizar una comprobación ortográfica mientras se escribe, lo que es muy útil para no meter la pata en nuestros posts.

En definitiva, ScribeFire es la extensión más útil para un blogger, para aumentar su productividad y facilitarle la tarea en su día a día como editor. Más información en http://www.scribefire.com/

Para instalar ScribeFire en tu Firefox visita: https://addons.mozilla.org/en-US/firefox/addon/1730

Tenemos un artículo en DesarrolloWeb.com para obtener más información sobre cómo instalar y configurar una extensión en Firefox. Además, te recomendamos leer el manual de Extensiones de Firefox para desarrolladores, donde ofrecemos comentarios y explicaciones de otras interesantes extensiones para facilitarte la vida.


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 extensión 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 extensión 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 podría ser de otra manera, en un día 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 fácil configuración de eventos.

El programa se instala como extensión 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 través del cual pinchando se acceden a las opciones de la extensión. La pantalla inicial es simplemente una lista de las tareas que se han configurado en el sistema, con algunas mínimas opciones de clasificación de las mismas. Con un botón para crear una nueva tarea.


14






http://www.desarrolloweb.com/articulos/extensiones-firefox.html


https://addons.mozilla.org/en-US/firefox/addon/1730

https://addons.mozilla.org/en-US/firefox/addon/1730

https://addons.mozilla.org/en-US/firefox/browse/type:3

https://addons.mozilla.org/en-US/firefox/browse/type:3



Las características y funcionalidades de las tareas de ReminderFox son muy sencillas. Permite crear citas o eventos a través de una sencilla ventana, pero que tiene todas las opciones que en principio podríamos necesitar para catalogar y localizar en el tiempo la tarea. Además, permite configurar los avisos o recordatorios que queremos que el programa nos muestre (a la hora exacta de la tarea o con cierta antelación o periodicidad). Están disponibles otras opciones para localizar físicamente el lugar de la reunión o para indicar una URL relacionada con la tarea. Otra cosa interesante es que permite categorizar las tareas.

Los recordatorios, como decía, 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 título de la tarea planificada al lado.

También nos recuerda los eventos a través de un mensaje que sale de la barra de tareas de Windows, en una pequeña ventana con las tareas actuales y futuras que se encuentran planificadas


15




Además, 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 opción de silenciar el recordatorio por unos minutos, horas o días.

Dado las diversas formas de recordarnos las tareas no será fácil que se nos olviden. Pero, lógicamente, hace falta tener Thunderbird o Firefox ejecutándose en el ordenador para poder recibir los recordatorios.

En general, es una herramienta muy interesante para gestionar nuestras citas, que además queda integrada de una manera sencilla dentro de programas de uso diario y esto es muy importante, porque los recordatorios sólo salen cuando estamos utilizando los programas.

Esta extensión de Thunderbird o Firefox nos servirá de mucha ayuda para organizarnos, incluso a los más despistados. Es fácil de uso y requiere poco mantenimiento para llevar al día los eventos.

Más información se puede obtener en la propia página de la extensión: 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


YSlow para Firebug: Mejorar la carga de tu página

Este componente es una extensión para Firefox que se instala como añadido a otra extensión de Firefox llamada Firebug, que ya publicamos en otro artículo de DesarrolloWeb.com: Firebug.

El componente YSlow permite analizar el comportamiento de la página 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 análisis de todos los componentes externos de la página en la que estamos, junto con un reporte de la eficiencia que trata muchos aspectos, más o menos interesantes, como:

• Consejos para realizar menos conexiones HTTP. • Añadir una cabecera Expires


16



http://www.desarrolloweb.com/articulos/firebug.html

https://addons.mozilla.org/es-ES/thunderbird/addon/1191


http://reminderfox.mozdev.org/


• Hacer Gzip de los componentes para una descarga más rápida • Colocar los archivos de estilos en la cabecera • Colocar los scripts en la cabecera • Evitar las expresiones CSS en el cuerpo de la página • 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 página (performance) se ofrecen otros reportes como

• Estadísticas (con el botón stats) que nos ofrece un listado de los componentes externos de la página y el peso que ocupan, si están cacheados o no, etc. con un gráfico de tarta para ver el peso relativo de cada uno con respecto a toda la página.

• Un listado de todos los componentes externos (con el botón components) que nos informa de todos los archivos externos cargados para visualizar la página, la fecha en la que se crearon, el peso en Kb, el tiempo de carga y si están comprimidos.

• Una serie de reportes de interés (en el botón tools) en el que destaca una verificación de los scrips Javascript, con los errores de sintaxis, que no provocan bugs en tiempo de ejecución pero que están mal programados (este reporte lo ofrecen gracias a JSLint, un verificador Javascript).

• Una completa ayuda sobre el componente (Botón 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 más información en: http://developer.yahoo.com/yslow/


FireFTP: programa FTP sobre Firefox

Un programa de FTP sencillo y gratuito. Es como se podrían resumir las características de FireFTP, una extensión de Firefox muy interesante para desarrolladores de webs, que amplía las posibilidades de Navegación de Firefox también a la transferencia de archivos entre nuestro ordenador y los servidores de Internet.

FireFTP tiene lo que podríamos 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 también para subirlos, posibilidad de subir varios archivos a la vez, directorios, etc. La única diferencia que cabría resaltar es justamente su distribución, ya que está integrado en el navegador, a través de una pestaña o en una ventana aparte de Firefox.

Con respecto a las características funcionales hay que decir que son del todo correctas, aunque se echa de menos algo de sofisticación y personalización. 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 configuración suficiente, con opciones como mostrar o no los archivos ocultos, realizar múltiples conexiones, etc.


17



http://developer.yahoo.com/yslow/

http://jslint.com/


FireFTP sería opción a tener en cuenta sobre todo para usuarios más inexpertos, que estén familiarizados con Firefox para navegar y que deseen dar el paso inicial al trabajo con FTP. Es sin duda una opción buena también porque, como toda extensión de Firefox, es gratuita, lo que la hace más 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. También tenemos el cliente FTP Filezilla, que es bastante más 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 página web. Además, como Firefox se puede guardar en un dispositivo como un pendrive, nos permitiría llevar en él todo el software para trabajar en otros ordenadores con nuestra página sin tener que instalar otros programas.

FireFTP es una de esas extensiones que los creadores de páginas 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 página de add-ons de Mozilla Firefox: https://addons.mozilla.org/es-ES/firefox/addon/684



18






Documents

manual-extensiones-firefox.pdf