Get Firefox!

Aprovechando que Mozilla acaba de liberar la primera beta de Firefox 1.5 en inglés, tal y como adelantamos la pasada semana (aún saldrá una segunda versión de prueba más antes de la actualización definitiva allá por el mes de noviembre), me parece oportuno rendirle un pequeño homenaje destacando su utilidad como aliado del webmaster o el blogger en lo que a superivisón, diseño, validación y estructuración de su página se refiere.

Efectivamente, gracias a sus herramientas nativas y a su fértil gama de extensiones, Firefox se ha convertido casi en el mejor software práctico (y gratuito) tanto para chequear on line las características de un sitio, como para explorar las distintas alternativas a un diseño o una arquitectura determinadas.

En lo que a las herramientas que ofrece por defecto el navegador, hay que destacar:


    – Visualización del código fuente:
    Firefox te permite, como el resto de los navegadores, visualizar el código fuente de una página, pero con dos útiles pecualiaridades:

    1) No abre un editor externo, sino que usa un visor propio con subrayado de sintaxis y etiquetas coloreadas (“Ver – Código fuente de la página” / o Ctrl+U)
    2) Te permite visualizar, si lo prefieres, el código de sólo la parte que hayas seleccionado de un apágina (seleccionas la parte que quieres y, pulsando el botón derecho del ratón sobre ella, eliges “Ver código fuente seleccionado”.

    – Acceso a la información de una página: en cinco niveles (pestañas) a través de “Herramientas – Información” de la página, o seleccionando esta función desde el menú que aparece al pulsar el botón derecho del ratón:

    1) Información general: dirección, tipo, tamaño, codificación…
    2) Formularios: formularios que aparecen en la página y detalles sobre los campos que los componen
    3) Enlaces: relación de enlaces, hiperenlaces y enlaces de estilo presentes en el sitio visualizado
    4) Medios: impresionante herramienta que te permite no sólo ver qué contenido multimedia tiene la página, sino además previsualizarlos y acceder a su información
    5) Seguridad: datos de seguridad de la web.

    – Consola JavaScript: ideada para desarrolladores de Java Script, permite escribir y chequear archivos JS externos y ofrece varias funcionalidades (“Herramientas – Consola JavaScript”).

    – Inspector DOM: permite el acceso al Document Object Model, mostrándote información sobre cada elemento de la página. incluido qué etiquetas CSS le afectan (“Herramientas – Inspector DOM”). La extensión Inspect Element te permite acceder rápidamente a un elemento seleccionado (ojo, esta extensión me dio problemas al instalarla, obligándome a desinstalar el navegador y volver a instalarlo).

En cuanto a extensiones, y en el caso que nos ocupa, aquí va una lista de las más destacadas:

    Aardvark: visualiza aspectos como el nombre del elemento o el nombre de la clase que le afecta.

    Colorzilla: muestra información del elemento sobre el que se sitúa el ratón.

    Fangs: te devuelve una representación textual de una página similar a la de un lector de pantalla.

    Fireftp: acceso directo a tu servirdor vía FTP.

    HTML Validator: herramienta para comprobar si tu página valida.

    Checky: validación a todos los niveles (HTML, XHTML, CSS, RDF, RSS, XML, WAI, Section 508, P3P, Hyperlinks, Metadata…).

    IE View: ¿cómo se vería esta página en Interet Explorer? Si te gustan las sensaciones fuertes, adelante.

    LinkChecker: excelente utilidad para detectar enlaces rotos en tu página.

    Live HTTP Headers: información en tiempo real del HTML del header de una página.

    – MeasureIt: inserta una regla de medidas en la ventana del navegador y muestra ancho, largo y alineación de los elementos de una página.

    Screen Grab: captura de pantalla con diversas opciones, pero con una fundamental: captura el documento completo, no sólo lo que estás viendo.

    View Formatted Source: muestra el código de color de una página e información CSS de cada elemento.

    EditCSS: edita y cambia los estilos de una página.

    – Codetch: editor de códigos con soporte para WYSIWYG HTML y previsualización en otros navegadores.

    EditorZilla: editor WYSIWYG HTML con el que se puede acceder y modificar el código fuente de un documento.

    View Rendered Source: representación gráfica de la estructura de una página.

    Zoomy: incorpora botones en la barra de herramientas que permiten cambiar el tamaño de las fuentes de la página.

    Web Developer Extension: (“Un anillo para gobernarlos a todos…”) Esta extraordinaria extensión te instala un menú de herramientas adicional con múltiples utilidades.

Fuentes: Web Development with Firefox, Mozilla
Vía: X.Blog

Actualización (09 sep-15.20 h): Víctor se lo ha tomado como algo personal y no restrega por las narices las maravillas de Opera 😛

Actualización (09 sep-19.17 h): Error500 nos informa de un error crítico que afecta a todas las versiones de Firefox, incluida ésta (Víctor, abstente de hacer leña).

Actualización (09 sep-19.33 h): En el foro de soporte de Mozilla se recomienda desactivar el soporte IDN (abres una pestaña, tecleas “about:config” en la ventana de direcciones, busca “network.enableIDN” y asegúrate de que está en “false”. Si está en “true”, pulsa dos veces sobre esa línea) hasta que salga el parche.

Actualización (10 sep-12.04 h): Ya está disponible parche que corrige el problema.

Share