Toda página web está conformada por un archivo de texto (por lo general con extensión .htm o .html) y además los archivos de imagen, de estilos y otros que al ser interpretados en conjunto por el navegador, nos permiten ver como una unidad la información de la página. El problema es que este sistema hace que la distribución de páginas sea un poco complicada para usuarios sin experiencia técnica. Para ello se creó el formato MHT, en el que todos los elementos de una página web están integrados en un solo archivo mediante un sistema de codificación. Así, si uno quiere guardar una página web y llevarla en un pendrive o un disquete, se hace más fácil la tarea. Sin embargo, este formato es soportado sólo por Internet Explorer y Opera. ¿Cómo aprovechar las ventajas de este formato en Firefox? La respuesta es UnMHT, una extensión que permite a Firefox crear archivos MHT o leer los que hayan sido creados en otros navegadores.

Un botón en la barra de estado te permitirá acceder mediante el botón izquierdo del mouse a las opciones de la extensión. Allí podrás configurar entre otras cosas la manera como se guardarán los archivos (si usarán el nombre del archivo original o el que el diseñador le dio a la página), además de que podrás exportar e importar tu configuración o ajustar la extensión para que no guarde los archivos de estilo (.css) en el MHT resultante. Un click derecho en ese botón te permitirá desactivar la extensión, extraer los archivos que conforman un archivo MHT, ver el código fuente, mostrar o borrar la caché con la que interactúa la extensión, guardar como MHT la pestaña activa o todas las pestañas y abrir la página de la extensión.

UNMHT puede guardar las páginas de dos maneras. La primera es el “estado actual”, que no es más que tomar lo que se ve en pantalla y verterlo tal como se ve en un archivo MHT. En el segundo modo, la extensión descarga nuevamente los archivos desde el servidor y crea el archivo MHT con esos datos. ¿Cuál es la diferencia? En el primer modo se conserva la relación del archivo con los contenidos dinámicos, de manera que si éstos sufren algún cambio posterior el archivo MHT los reflejará. Esto no ocurre con el segundo modo, que guarda esos contenidos dinámicos como parte del archivo MHT, por lo que no verás los cambios que se produzcan en lo sucesivo. La extensión te brinda dos botones que deberás arrastrar desde la caja de iconos (Ver | Barras de herramientas | Personalizar…) hasta el lugar de tu preferencia en la barra de herramientas. El primero tiene las mismas opciones que el botón de la barra de estado, por lo que no es imprescindible a menos que desees tener esas opciones en ambas ubicaciones. El segundo permite guardar la pestaña activa como MHT con sólo un par de clicks.

UnMHT 4.7.4

Source Viewer Tab te permite ver el código fuente de una página en una nueva pestaña o en una aplicación externa. En las opciones de la extensión podrás escoger cualquiera de estos modos, además del modo tradicional de ver el código fuente en una ventana independiente.

Source Viewer Tab 0.2.2008101501

Ya antes he escrito sobre ResizeIT, Firesizer, Window Resizer y otras extensiones que te permiten ajustar el tamaño de la ventana de Firefox en casos específicos. Tidy Browser Button es la más reciente extensión de esta categoría y además es la más simple. Un botón que deberás arrastrar desde la caja de iconos (Ver | Barras de herramientas | Personalizar…) hasta el lugar de tu preferencia en la barra de herramientas te servirá para hacer los cambios de tamaño.

La extensión viene con dos anchos predeterminados: 800 y 1.024 pixeles, bajo la idea de que esas son las medidas más usadas por los diseñadores web. En las opciones de la extensión puedes cambiar las medidas estándar y la distancia que habrá entre el borde inferior de Firefox y el del escritorio cuando uses el botón.

Tidy Browser Button 0.1.8

Firesizer es otra de esas extensiones que te permiten darle a Firefox el tamaño que más te convenga, de manera que puedas ver por ejemplo cómo se ve una página en diferentes tamaños. La extensión agrega a la barra de estado un espacio en el que puedes escoger un tamaño predeterminado o indicar uno de tu preferencia, que además puedes salvar para su uso posterior.

Firesizer 0.65

Window Resizer es una herramienta para diseñadores de páginas web que cambia el tamaño de la ventana de Firefox, de manera de poder comprobar cómo luce una página en cada tamaño, exactamente como hace Yet Another Window Resizer. La extensión te brinda un botón que deberás arrastrar desde la caja de iconos (Ver | Barras de herramientas | Personalizar…) hasta el lugar de tu preferencia en la barra de herramientas, y que al hacer click en él abre una ventana emergente en la que podrás ajustar la ventana de Firefox a resoluciones de 640×480, 800×600, 1024×768, 1280×1024 y 1600×1200. También puedes acceder a la función mediante una opción en el menú Herramientas.

Window Resizer 1.0

Unicode Input Tool/Converter te permite cambiar la codificación de los caracteres de un texto. La extensión agrega un submenú con varias opciones al menú contextual de Firefox, de manera que si haces click derecho en un área cualquiera de una página puedes abrir el convertidor, y si lo haces sobre un texto previamente seleccionado puedes escoger el tipo de codificación al que quieres convertir el texto, en cuyo caso se abrirá el convertidor con el texto precargado en su versión original y en la versión con la nueva codificación.

El convertidor incluye botones para cambiar la codificación tantas veces como quieras. Puedes cambiar de Unicode a entidades HTML, código hexadecimal o decimal y viceversa. Igualmente puedes cambiar de hexadecimal a decimal (y viceversa, también). Unos botones en la parte inferior izquierda del convertidor te permiten aumentar o reducir el tamaño de la letra en que se muestra el bloque de texto con el que estés trabajando.

En las opciones de la extensión puedes ajustar ciertos aspectos de la codificación, por ejemplo el rango de caracteres que se considerará al hacer la conversión o el modo en que se utilizará entidades XHTML, entre otras. También puedes crear entidades propias o modificar las existentes o utilizar codificaciones específicas para ciertas regiones del mundo.

Unicode Input Tool/Converter 2.1.3

YSlow (pronúnciese uaislow, como la expresión Why slow?, que significa algo como ¿por qué tarda?) es una herramienta del Yahoo! Developer Network, creada para ayudar a los diseñadores a construir websites más rápidos. Para usarla debes instalar previamente Firebug, la extensión que diagnostica tu página y te ofrece diversas herramientas para mejorarla, en cuya consola verás una pestaña específica con las opciones de Yslow.

La extensión agrega un botón en la barra de estado desde el cual puedes ordenarle el diagnóstico de una página o indicarle que haga tal diagnóstico de forma automática cada vez que cargue una página. Yslow cargará todos los elementos de la página y al terminar te ofrecerá un reporte con indicaciones para hacer que tu página cargue con más rapidez. El reporte considerará las 13 recomendaciones del Yahoo! Developer Network como afinar la cantidad de solicitudes HTTP, usar un CDN, evitar expresiones CSS y redirecciones o eliminar scripts duplicados, entre otras. Como puedes ver en la imagen de arriba, en varias de estas recomendaciones verás una flecha que muestra, al hacer click sobre ella, más información sobre el elemento en particular. Y si alguna de las recomendaciones te suena muy oscura a la primera, siempre puedes hacer click sobre su nombre y la extensión abrirá una página del FAQ donde se explica en detalle lo que significa (en inglés).

Además haciendo clicks en las pestañas de la barra superior de Yslow podrás obtener un breve reporte estadístico de los componentes de tu página, una descripción de tales componentes y herramientas como el verificador de código JavaScript JSLint, listados con todas las instrucciones JavaScript y CSS y hasta un reporte completo (que reúne todo lo anterior) en una sola página que puedes imprimir para referencia.

YSlow 0.9.5b2

En HTML los caracteres especiales como las vocales acentuadas, las eñes y otros, suelen ser representados con ciertos códigos para asegurar que se vean correctamente en todos los navegadores y plataformas. Una completa guí­a de estos caracteres es la que ofrece el W3 donde se muestran los códigos y sus descripciones. Remy Sharp escribó un servicio web que ayuda al diseñador a localizar el código que necesita, mediante un formulario en el que se puede escribir el carácter especial o parte de su notación. Para hacer más práctico su uso, Zhang Yining creó la extensión HTML Entity Character Lookup, que agrega una opción al menú Herramientas y, al hacer click allí­, abre una ventana emergente que se puede consultar para localizar cualquier carácter que se necesite. Al hallar lo que se busca, el usuario puede hacer click derecho y copiar al portapapeles el código numérico o de la entidad.

HTML Entity Character Lookup 0.1.1

Dust-Me Selectors revisa las hojas de estilo CSS asociadas a una página determinada, y te indica cuáles etiquetas no están siendo usadas. Así, puedes usarla como una herramienta para mejorar y compactar tus hojas de estilos. La extensión agrega un icono en la barra de estado y, al hacer click sobre él, rastrea todas las etiquetas de la hoja de estilos asociada y te muestra un cuadro de diálogo en el que se indican las etiquetas que no están siendo utilizadas en esa página. También puedes activar el rastreo con una opción en el menú Herramientas o haciendo click derecho sobre el icono, en cuyo caso aparecerá un menú contextual en el que además puedes indicarle a la extensión que rastree cada página que cargues en Firefox, así como ver o eliminar la información obtenida en el último rastreo.

Dust-Me Selectors 2.11

La consola JavaScript es una herramienta que nos permite controlar el funcionamiento de código JavaScript en nuestras páginas. Normalmente se abre en el menú Herramientas, pero si haces un uso intensivo de ella puedes instalar la extensión docked JS-Console, que la mantiene abierta permanentemente en el borde inferior de la ventana del navegador, agregándole un manejador en su parte superior para que puedas ampliarla o reducirla según tus necesidades.

docked JS-Console 0.1.1