Un vistazo a Bluegriffon, el editor web de Mozilla

Hace ya un tiempo que Pablo os habló de él. Siendo un servidor fiel del clásico Bluefish, he aprovechado que tenía que preparar las plantillas de un nuevo proyecto para trastear con este prometedor programa. Iremos viendo sus funcionalidades en varias entradas. Por el principio: hoy veremos cómo instalarlo y qué opciones nos da su asistente.

Instalación desde repositorio

Getdeb es un proyecto de repositorios de juegos y aplicaciones bastante famoso en el mundo GNU/Linux. Aunque podemos descargar la carpeta del programa desde la página del proyecto, a algunos les resultará cómodo poder recibir las actualizaciones desde este repositorio.

1.- Añadimos el repositorio para nuestra versión de Ubuntu (en mi caso quantal-12.10, si usáis precise-12.04 sustituís el nombre).

sudo add-apt-repository 'deb http://archive.getdeb.net/ubuntu quantal-getdeb apps'

2.- Importamos la clave GPG del repositorio.

wget -q -O- http://archive.getdeb.net/getdeb-archive.key | sudo apt-key add -

3.- Actualizamos la lista de paquetes disponibles para nuestro sistema.

sudo apt-get update

4.- Instalamos el programa.

sudo apt-get install bluegriffon

Primer contacto con Bluegriffon

Desde un principio podemos observar que el programa usa una interfaz muy clara y nada sobrecargada. Como todo producto de Mozilla, presenta la posibilidad de usar plugins o complementos para ampliar sus funcionalidades.

Como todos los editores «del palo», Bluegriffon proporciona un asistente con el que podemos generar una página/estructura en poco tiempo. Vamos a seguirlo paso a paso para acabar verificando lo que todos sabemos… el WYSIWYG sale caro en motivos de limpieza de código…

1.- Lanzaremos el asistente mediante el menú ‘Archivo > Nuevo Asistente’. El primer paso será escoger el tipo de lenguaje que vamos a usar.

2.- Estableceremos las propiedades de la página: título, idioma, caracteres, palabras clave…

3.- Podremos usar los colores típicos o definir ya las propiedades css para fondo, texto y enlaces.

4.- También podremos establecer una imagen de fondo, fija, desplazable o en mosaico.

5.- La parte más poderosa del asistente nos permite distribuir filas y columnas al gusto mediante css. Es un procedimiento muy, muy rápido, pero muy peligroso en cuanto a limpieza del código. El css está muy bien para los estilos y multitud de efectos, pero como seamos unos novatos podemos montar una bien gorda que nos dificulte el manejo del código resultante.

6.- Vamos a añadir unas cuantas filas/columnas para ver qué tal las maneja…

7.- Y aquí tenemos el resultado…

Bien, ya hemos descubierto que añade la cabecera y el pie de página por sí sólo. Es un avance. Si pulsamos el botón del globo terráqueo podremos visualizar la página en nuestro navegador (lógicamente, nos pedirá que la guardemos antes). Si lo hemos definido no habrá mayor problema. En caso contrario, tendremos que especificar dónde está el ejecutable (si sois novatos: en GNU/Linux están en ‘/usr/bin’).

Vale, muy bonito… vamos a ver el dichoso código resultante…

REDIOS! (que se diría en mi tierra…). 400 líneas de CSS para una tabla de 4 filas. Por muy bonito, práctico y modular que sea el CSS, no es la mejor forma de maquetar esto. Pero creo que todos sabíamos que para usar un editor WYSIWYG tienes que saber lo que estás haciendo, ¿no? Como ejemplo, aquí tenéis una plantilla css de 550 líneas que da mucho más de sí que la que hemos creado.

Si estás aprendiendo HTML y CSS deberías de armarte con un editor sencillo y aprender paso a paso. Bajo Windows hemos sufrido esto durante muchos años: el conocido «efecto DreamWeaver». Estoy seguro de que cualquiera que controle un poco de diseño web sabía que esto iba a pasarnos.

Tenemos un buen puñado de editores web muy completos para GNU/Linux, pero antes de llorar porque no existe DreamWeaver tenéis que poner de vuestra parte para aprender. Otro día, nos meteremos más en profundidad con Bluegriffon, pero eso, ya es otra historia.