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.

Podéis realizar todos estos pasos desde el Centro de Software de Ubuntu, Synaptic, Orígenes de Software y demás gestores gráficos para simplificar la instalación, pero como mi intención es que aprendáis algo de provecho, lanzad la terminal con ‘ctrl+alt+T’ y seguid los pasos.

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.


              13 comentarios

              1.   Gaius Baltar dijo

                Totalmente de acuerdo, Nano. Yo con Bluefish estoy muy cómodo (a pesar de ciertas limitaciones un tanto molestas). Lo que me molesta realmente es el editor CSS de pago de Bluegriffon, eso me molesta mucho… xD Si tengo que tener abierto Bluefish para editar el CSS ya me quedo en él… 😀

              2.   nano dijo

                Digo yo que le falta integración con muchas cosas, casi todos sus plugs son de pago y eso le quita muchas ventajas.

                Por ejemplo con CSS podría tener soporte para LESS o SASS, eso sería genial aunque tal vez un poco complicado porque tendría que compilar a CSS y luego generar la vista. La verdad es que ok, CSS es genial y todo pero es horrible escribir mucho código en el.

                Con HTML bastaría con integrarle emmet y ya cambiaría mucho la productividad.

              3.   Jose dijo

                Uhmmm, ¿el editor de Mozilla?, o un fork del editor de Mozilla, que se llama Kompozer.

                O … ¿estoy confundido?

              4.   Gaius Baltar dijo

                No son forks, siguen siendo proyectos de Mozilla, pero les cambian el nombre de vez en cuando. Bluegriffon viene de Kompozer, y este de NVU. 😉

              5.   hug0 dijo

                Muchas veces así hacemos, que buscamos herramientas que puedan hacer la mayoría de trabajo por nosotros con tal de hacerlo rápido, el problema reside que no aprendemos, no sabemos que vienen en el código y el día que nos toque meterle mano no vamos a saber ni que modificar.

              6.   Gaius Baltar dijo

                Ojo! ha metido cientos de líneas de CSS porque yo me he puesto a usarlo como un novato, con un poco más de tiento es más que posible que hubiera quedado mejor… 😀

              7.   Nano dijo

                El problema que veo aca es que sí, como todo editor de este tipo, inserta toneladas de basura en el código, ¿400 y pico de lineas para eso? Coño, yo lo hago en 100 o menos xD

                Otro punto flaco es el no soporte de preprocesadores CSS ni de muchos plugins y tecnologías interesantísimas, no se, el WYSIWYG me resbala tanto, yo con sublime lo pongo en guardar cuando pierde el foco y ya solo tengo que cambiar de ventana y recargar, que es un paso mas, pero tengo mil herramientas mas a la mano.

                La otra es que al menos yo no tengo forma de pagar los plugins de bluegriffon así que nada, estoy jodido xD

              8.   Spomzper dijo

                en mi caso tengo el ubuntu 13.04 como puedo instalarlo?

              9.   Natalia dijo

                Gracias!!! sos un genio! ya no sabía más que intentar!

              10.   carlos cantor dijo

                Muchas gracias por su aporte a este aficionado al software free. Realmente es un camino siempre interesante y retador. Si ustede me lo permite, uns SO de lujo: www.ubuntustudio.org Realmente útil, práctico, eficiente y eficaz. Nuevamente gracias por compartir su trabajo con nosotros.

              11.   aldemar mejia dijo

                muchas gracias me fue de gran ayuda sos un genio men

              12.   lorena gomez dijo

                saludos necesito ayuda tengo instalado debian 7 necesito instalar bluegriffon y sigo los pasos sugeridos y en el momento de sudo apt-get update sale esto Err http://archive.getdeb.net quantal-getdeb/apps Sources

                Err http://archive.getdeb.net quantal-getdeb/apps i386 Packages por favor me puede ayudar gracias

                1.    usemoslinux dijo

                  Si no entiendo mal, parecería ser que es simplemente un tema de que los servidores están caídos. ¿La solución? Tener paciencia y volver a intentar en unas horas/días.
                  Abrazo! Pablo.

              Deja un comentario

              Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

              *

              *

              1. Responsable de los datos: Miguel Ángel Gatón
              2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
              3. Legitimación: Tu consentimiento
              4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
              5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
              6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.