10 Extensiones para Firefox útiles para el desarrollador web.

Si bien las extensiones pueden hacer que Mozilla Firefox se vuelva más pesado y consuma más recursos también una buena serie de las mismas puede facilitarnos mucho el trabajo a la hora de diseñar y probar sitios web. Vamos con una lista de 10 extensiones que te darán diversas y prácticas funcionalidades:

  • Firebug: Depura, monitoriza y edita CSS, Javascript y HTML en vivo cómodamente con esta colección de herramientas de la que ya hablamos en el pasado en este blog. Si bien creo que a día de hoy las herramientas de depuración nativas de Google Chrome han superado a Firebug (si usáis Chrome os irá mejor que la la versión de Firebug para ese navegador), en Firefox todavía me sigue pareciendo la mejor opción.
  • Web Developer Toolbar: Y seguimos con otra colección de herramientas que te facilitará muchos trabajos de pruebas y que se complementa perfectamente con Firebug.
  • SQL Inject Me: Se trata de una herramienta de testeo que nos puede ayudar a encontrar vulnerabilidades ante ataques de SQL Injection. Nos facilitará mejorar la seguridad de nuestro proyecto.
  • Colorzilla: También hablamos en el pasado de este complemento aquí. Se trata de un color-picker que además incluye un generador de degradados css, un navegador de paletas… en fin, una buena colección de utilidades relacionadas con temas de colores.
  • Dummy Lipsum: Un generador de Lorem Ipsum para rellenar aleatoriamente campos con texto.
  • Dummy Images: Similar al anterior pero menos típico (a fin de cuentas, generadores de Lorem Ipsum hay muchos), este complemento genera, a través de Firefox, imágenes de muestra del largo y ancho que indiquemos.
  • FireFTP: Este complemento incorpora a Firefox la funcionalidad de un cliente FTP, sencillo y cómodo ya que lo lanzas desde el propio navegador.
  • Holmsie: Un validador de HTML5 que te ayudará a encontrar problemas con tu marcado
  • PageSpeed Tools: Herramientas de análisis y optimización para comprobar el tiempo de carga de tu página y por qué podría estar cargando más lentamente.
  • MeasureIt: Simplemente una regla que nos permite tomar medidas de nuestra web.

En fin, espero que alguna de estas herramientas os pueda resultar útil y facilitar la vida.

Firefox: evitar tracking, que no rastreen tus datos

Ayer hablábamos del complemento Collusion como una gran herramienta para saber a qué webs envían información las webs que visitamos. Y como ya os dije, Collusion sirve para diagnosticar, pero no para combatir. Sabemos quién envía a quién, pero olvídate de cortarles el grifo con eso.

Tranquilos, ya os dije que había opciones para evitar que nos sigan. La primera, como podréis ver en la web de Mozilla, viene de forma nativa en el navegador. Por si no entendéis la explicación en inglés, os la repito por aquí:

  • Pulsáis el botón Firefox de la parte superior izquierda.
  • Os metéis en Opciones.
  • Ahí buscáis Privacidad.
  • En Rastreo activáis el checkbox «Decir a los sitios web que no quiero ser rastreado».

Luego le dais a OK y vía.

Pero claro, esto para según qué páginas puede no ser suficiente, y podéis necesitar un complemento para evitar el tracking. Desde aquí vamos a hablar de dos: Do Not Track Plus y Ghostery.

logotipo Ghostery

Ambas cumplen perfectamente la función de evitar el tracking, si bien Ghostery es la que está recibiendo mejores críticas por parte de los usuarios, ya que te da mayor flexibilidad a la hora de bloquear las cookies (Do Not Track Plus lo bloquea todo, Ghostery bloquea lo que quieras bloquear), te permite participar (si quieres) en una recogida de estadísticas para elaborar un ranking de sitios potencialmente invasivos y se trata de un proyecto Open Source, mantenido por la comunidad y con gran transparencia.

Do Not Track Plus Logo

En cualquier caso, ya ves que gozas de buenas herramientas para poder evitar las intromisiones habituales de ciertos sitios en tu red. Y si quires mayor seguridad, siempre puedes recurrir a las redes Tor.

Colorzilla: Complemento productivo para desarrolladores

¿Te ha pasado alguna vez de ver en una web y decir «Ese es el color que quiero para mi cabecera»? Bueno, Colorzilla te permite integrar en tu navegador (Chrome o Firefox) una serie de herramientas relacionadas con el tema de la elección/búsqueda de colores que puede facilitar tu trabajo como desarrollador.

En principio lo que yo buscaba era un simple Eyedropper para mi navegador, es decir, una aplicación que me permitiera conocer el código RGB de un color que esté saliendo en mi pantalla. Esta es la función principal de Colorzilla, pero no la única ni la más potente. También nos dota de un selector de color (Colorpicker) y un navegador de paletas que agilizan bastante el trabajo (combínalo, por ejemplo, con Firebug y piensa en la velocidad de poder probar todo eso en el navegador) y que además nos deja salvar colores y paletas como «favoritos».

Pero las dos herramientas más interesantes, y más potentes, creo que son el generador de degradados, que te permite modificar varias plantillas y te da el código CSS pensado para mantener la compatibilidad con navegadores obsoletos, y el Web Page DOM Color Analizer. Este último se tira un ratito analizando una página y finalmente te da todos los colores que se han usado en la misma, informándote sobre qué elementos usan cada uno. Esto te ayudará a hacerte una idea al respecto del diseño del sitio.

Resumiendo, un complemento ligero que puede ser muy útil y productivo a la hora de trabajar desarrollando un front-end.

Uso de la etiqueta audio en HTML5

Me estoy planteando hacer una sección html5 porque empieza a tener bastante peso en este blog. En cualquier caso, si antes hablé de vídeo ahora toca hablar de audio. De hecho el uso de audio es más sencillo que el de vídeo, tiene menos opciones.

Como ya sabes, la idea de la etiqueta audio es poder insertar archivos de audio directamente en una página web, sin necesidad de un reproductor en flash o de QuickTime. La sintaxis básica sería la siguiente:

<audio width="250" height="32" src="cancionEjemplo.mp3" controls="controls" autoplay="autoplay" preload=""/></audio>

Bueno, width y height son para definir el tamaño del reproductor, no son obligatorios y realmente lo mejor sería no tocarlos si no es necesario para adaptarlos a la maquetación de tu página. El resto los relato a continuación:

  • src: La propiedad src habitual, que enlaza con la dirección del contenido que queremos mostar, en este caso el archivo de audio.
  • controls: Nos permite implementar los controles básicos del reproductor: volumen, play/pause, seek.
  • autoplay: Nos deja especificar si queremos que el archivo de audio comience a reproducirse desde el momento en que se carga la página
  • preload: Permite que especifiquemos si queremos que el archivo comience a cargarse en el buffer antes de comenzar la reproducción, para que no se trabe durante la reproducción por intentar reproducir más de lo que ha cargado.

Como con las etiquetas de vídeo, el problema vendrá por la compatibilidad de los distintos formatos con los navegadores. No todos soportan todo, así que tendrás que romperte un poco la cabeza. En esta lista puedes ver qué formatos soporta cada navegador:

  • Google Chrome: Soporta tanto mp3, como wav y ogg.
  • Safari: A pesar de usar el mismo motor de renderizado que Chrome (el motor Webkit) no soporta el formato ogg, aunque sí mp3 y wav
  • Mozilla Firefox: Soporta ogg y wav, pero no mp3.
  • Opera: Igual que Mozilla, sólo ogg y wav.
  • Internet Explorer: IE9 soporta mp3 y wav, como Safari. De versiones anteriores del navegador de Microsoft ya no me preguntes.

Ok, all right, yeah man! Ahora te estás preguntando «¿y cómo me aseguro de que mi archivo se reproduzca en todos los navegadores?», o si leiste la entra de este mismo blog sobre la etiqueta vídeo ya no te lo preguntas, porque el método es igual. Hay que meter etiquetas source con los distintos archivos dentro de una etiqueta audio, tal que así:

<audio controls autoplay>
    <source src="prueba.ogg" type="audio/ogg" />
    <source src="prueba.wav" type="audio/wav" />
    <source src="prueba.mp3" type="audio/mp3" />
</audio>

Como te imaginas en la etiqueta source la propiedad src es lo mismo que en la etiqueta audio, y type nos permite definir el tipo de archivo que será.

En fin, como diría el guiñol de Michael Robinson «todo pescao vendido, hasta aquí todo por hoy» (léase con acento galés). Espero que os sirva de ayuda.