Usando Drupal con Firefox. Herramientas muy útiles.

Uno de los consejos más repetidos en el ámbito del diseño web es el siguiente.

“Diseña primero tu sitio en Firefox, luego arréglalo para que funcione en Internet Explorer”.

Esto puede deberse a dos razones principales. Primero, porque Internet Explorer no es, digamos, muy aceptado entre los desarrolladores web. Pero por otro lado porque Firefox posee herramientas realmente útiles a la hora de desarrollar.

Personalmente uso dos navegadores. Chromium, para navegar es más rápido que firefox, y para el caso, simplemente me sirve. Pero sin lugar a dudas, a la hora de maquetar un nuevo sitio, Firefox es la herramienta de cabecera.

Este artículo sin embargo no va a centrarse en las herramientas para el diseño web en sí, sino como estas extensiones pueden ayudar al desarrollo de sitios con Drupal. Entonces… Comencemos.

Firebug.

Según Wikipedia:

Firebug es una extensión de Firefox creada y diseñada especialmente para desarrolladores y programadores web. Es un paquete de utilidades con el que se puede analizar (revisar velocidad de carga, estructura DOM), editar, monitorizar y depurar el código fuente, CSS, HTML y JavaScript de una página web de manera instantánea e inline.

Firebug no es un simple inspector como DOM Inspector, además edita y permite guardar los cambios, un paso por delante del conocido Web Developer. Su atractiva e intuitiva interfaz, con solapas específicas para el análisis de cada tipo de elemento (consola, HTML, CSS, Script, DOM y red), permite al usuario un manejo fácil y rápido. Firebug está encapsulado en forma de plug-in o complemento de Mozilla, es Open Source (aunque no Free Software) y de distribución gratuita.

En mi caso particular, yo le doy los siguientes usos:

Para maquetar Themes: En la pestaña de HTML puedo crear estilos y aplicarlos instantáneamente sin recargar la página. Simplemente voy asignando propiedades de css y después las copio en mi archivo css de mi Theme. Una de las ventajas que presenta además es que permite ver todos los estados posibles para una propiedad, presionando la tecla “abajo” mientras se elije el valor de la misma.

Para editar HTML antes de tocar los archivos tpl. Muchas veces quiero ver como quedará alguna tabla o bloque antes de probar los cambios. Firebug permite editar el HTML directamente en el sitio. De esta forma puedo encerrar ítems en listas ordenadas y ver el resultado final, sin salir de mi navegador.

Para detectar errores en views.

Seguramente alguien habrá visto un mensaje similar al siguiente alguna vez:

Esto sucede cuando javascript está activado y el módulo Views produce algún error. Verdaderamente el mensaje no da ninguna información de lo que ha ocurrido. Sin embargo, en la pestaña Red podemos observar la respuesta. Para obtener el mensaje de error, simplemente. Abrir Firebug. Abrir la pestaña de Red, y hacer clic en el ícono que dispara el error. Inmediatamente en la subpestaña respuesta veremos el mensaje de error.

Web Developer:

Esta extensión instala una barra en el navegador que presenta distintos accesos directos a diferentes funcionalidades de utilidad.

En mi caso utilizo esta herramienta para:

Activar y desactivar javascript: En algunos módulos de drupal, o incluso cuando estoy programando otros, es crucial que la acción pueda ser ejecutada con o sin javascript. El módulo Fivestar es un ejemplo claro de ello. Si javascript esta desactivado, Fivestar presenta un select box en vez del widget con las estrellitas.

Borrar el cache: Cada vez que se hace un en la imagen de un Theme, puede suceder que la misma no se vea reflejada en el sitio. Esto suele suceder porque Firefox guarda una copia en el cache del navegador para no tener que volver a descargar la imagen. Si esto ocurre, las imágenes que cambien pero mantengan el mismo nombre no serán actualizadas. Por suerte borrar el cache del navegador es tan simple como hacer clic en el menú que indica la imagen.

Drupal API Search Engine.

Tengo que agradecer a Manuel García por haberme comentado sobre esto en el IRC de Drupal en Español

Firefox como la mayoría de los navegadores actuales posee en su extremo superior derecho una búsqueda integrada.

Esta búsqueda puede personalizarse de modo que la palabra ingresada sea buscada por un motor en particular. Por lo tanto podemos elegir entre Google, Yahoo, Bing, etc.

Existen un par de extensiones que permiten hacer este tipo de búsquedas en los módulos de Drupal, en drupal.org mismo, o en el API drupal. Así que de ahora en más, buscar la documentación del hook_form_alter se resume a:

Drupal for Firebug:

A continuación voy a mencionar un módulo de Drupal que se combina con una extensión para Firefox. Se trata de Drupal for Firebug.

Para hacer uso del mismo, es necesario, instalar el módulo Devel, el módulo Drupalforfirebug, y la extensión de Firefox con el mismo nombre y por supuesto, Firebug.

Esta herramienta permite hacer uso de la interfaz de Firebug para mostrar datos del propio Drupal.

Por ejemplo, al visualizar un nodo, podríamos ver la estructura interna del mismo desde una pestaña de Firebug.

O para un usuario, sus datos:

O para una vista su estructura interna:

Esta herramienta utiliza tres tipos de colores para indicar si un elemento fue:

Modificado: Color amarillo. Agregado: Color verde. Eliminado: Color Rojo.

Para saber más sobre esta herramienta pueden ver los ejemplos de Chapter Three.

GreaseMonkey con Dreditor:

Según Wikepdia Greasemonkey es una extensión para el navegador Mozilla Firefox que permite, por medio de pequeñas porciones de código creadas por usuarios, modificar el comportamiento de páginas web específicas. Con esta extensión es posible mejorar la experiencia de lectura de un sitio, hacerlo más usable, añadir nuevas funciones a páginas web, corregir errores, mejorar servicios de búsquedas y muchas otras cosas más.

Esta extensión no realiza ninguna de estas cosas por sí misma, para lograrlo es necesario instalar porciones de código llamadas "user scripts" que, por medio de JavaScript, realizan acciones muy concretas; muchas de estas porciones de código son creadas para sitios concretos, otras sirven para cualquier página web.

Aprovechando esta funcionalidad, un programador ha creado un script que simplifica muchas tareas relacionadas con los issues de Drupal.

Asi se ve una lista de issues de drupal con Dreditor instalado:

Presionando el boton preview, podemos seleccionar un trozo de texto, escribir un comentario, y automáticamente Dreditor copiará ese código junto con el comentario en una forma mucho más agradable a la lectura.

Además, oculta los issues marcados como Fixed y que ya hemos leido. Disminuyendo la cantidad de issues por revisar.

Dreditor tiene otras opciones que pueden examinarse en la página del proyecto. Yo solo utilizo las dos que mencioné anteriormente.

Unas últimas extensiones interesantes:

Realmente no soy de recargar el navegador con demasiadas extensiones. De hecho no utilizo Drupal For Firebug, pero valía la pena mencionarla. Entre otras extensiones que son de gran ayuda vale mencionar. ColorZilla, para ver el color de un elemento de la página web. FireFTP, un cliente FTP integrado en Firefox, y ShowIP, para ver sobre que servidor estamos trabajando en este momento.

Seguramente se me haya escapado alguna realmente útil que valga la pena compartir. Si es así, por favor compártanla utilizando los comentarios.

Los enlaces para las distintas extensiones son:

• Firebug: http://getfirebug.com/
• Web Developer: https://addons.mozilla.org/es-ES/firefox/addon/60
• Drupal API Search: http://mycroft.mozdev.org/search-engines.html?name=drupal
• Drupal for Firebug: http://drupal.org/project/drupalforfirebug
• Dreditor: http://drupal.org/project/dreditor