15 febrero 2008

Cómo usar Firefox para desarrollar páginas web

Si hay algo que me hace permanecer fiel a Firefox es su sistema de extensiones. Y, sobretodo, dos de ellas, la Web Developer y Firebug. Con esas dos herramientas se puede acelerar y simplificar en gran medida el trabajo en cualquier etapa del desarrollo de una web.

Hoy os voy a hablar especialmente de Web Developer (a partir de ahora WD). Una extensión que añade una barra de herramientas con una cantidad inmensa de posibilidades. En este minitutorial os voy a mostrar algunas de ellas para que veáis porque, cada vez más, las páginas se crean pensando en Firefox para luego exportarse a otros navegadores.

Para empezar, y como la mejor forma de aprender es fijarse en los demás, WD en el menú CSS tenéis varias interesantes entradas. Con View CSS os abrirá una pestaña con todas las hojas de estilo de la página que estés visitando. Lo que te ahorra tener que buscar el nombre de cada hoja en el código de la página. También en el mismo menú Edit CSS, como su nombre indica, te abrirá un marco con cada hoja de estilo en una pestaña. Podrás modificar lo que desees y ver el resultado al instante. Así te evitas cambiar al editor, modificar, guardar, probar ... Y por si fuese poco, también puedes modificar al vuelo el código de la página (Miscellaneous->Edit HTML). En la primera imagen se puede ver un pequeño cambio en la página inicial de Google utilizando estas dos herramientas. Y para complementar a ambas, desde CSS->View Style Information cuando pinchemos sobre cualquier parte de la página nos mostrará el estilo asociado a dicho elemento. Muy útil cuando queremos modificar algo que no hemos escrito nosotros o cuando la página tiene muchas hojas de estilo asociadas.

Si lo que necesitas es comprobar el tamaño de los objetos distribuidos por la página con las herramientas Miscellaneous->Display Ruler, con Information->Display Block Size y con Information->Display Div Order sabrás hasta el último detalle.

Una herramienta utilísima cuando haces páginas con formularios y tienes que hacer una y mil pruebas para saber si todo funciona correctamente la puedes encontrar en Forms->Populate Form Fields. Esta rellenará cada campo de los formularios de la página para evitarte ese tedioso procedimiento.

Por último algo que, si no lo hace ya, debería preocuparte mucho. ¿ Cómo se ve tu página en otras resoluciones o dispositivos ? Para el primer problema puedes utilizar Miscellaneous->Small Screen Rendering. Reducirá todos los objetos para que te hagas una idea de cómo se verá, por ejemplo, en un móvil. Y para el segundo problema, desde el menú Resize tienes varias posibilidades. Puedes decirle que te ponga el tamaño de la ventana en la barra de títulos (Display Window Size in Title) o indicarle el tamaño exacto que quieres que tenga la ventana (Resize Window ...).

Tiene otras muchas posibilidades, como permitir o denegar cierto tipo de elementos, limpiar la caché y muchas otras cosas. Pero creo que con este "breve" repaso podréis ver lo útil que es esta extensión. Espero que la probéis y os sea igual de útil que a mi.

7 comentarios:

  1. Muuy interesante, no tenia ni idea de todo esto, gracias, le voy a echar un vistazo.

    El widget al que te refieres en tu comentario, ¿es el nuevo de Blogger para Blogrolls? es muy interesante también, ¡habría que ver cómo se puede personalizar con el favicon del enlace!

    ¡Saludos!

    ResponderEliminar
  2. Ya me contarás que te ha parecido.

    Y sí, el widget es ese. Se supone que debe coger el favicon del blog.

    ResponderEliminar
  3. widget? blogrolls? favicon? ayss que me suenan a herramientas Del Inspector gadget socorro que es eso moisés?


    saluditos.

    ResponderEliminar
  4. Yo como Matanusca me he perdido en la primera frase ajajaj.
    Gracias Moisés por tus intentos de educarnos en esto, como se llame , pero creo que soy el colmo de las torpes , no entiendo el idioma.
    De todas maneras como sé donde está el artículo , ya sé donde consultar.
    Besos amigo^^

    ResponderEliminar
  5. A ver si puedo ayudaros ... voy a intentar explicaros esas palabras para este caso concreto. Algunas de ellas tienen más significados, pero no vienen al caso.

    widget: elemento externo que se añade a la página y que le da una funcionalidad extra. Por ejemplo, un widget para mostrar fotos aleatorias.

    Blogroll: lista de enlaces a otros blogs que te gustan.

    Favicon: icono que identifica tu web y que se pone junto al nombre en la pestaña o ventana en que esté abierta la página.

    Espero que os haya servido.

    ResponderEliminar
  6. Gracias , ahora me entero más jajjaja.
    Besos!!

    ResponderEliminar
  7. Me alegro. Es lo que pretendía :)

    ResponderEliminar