Capítulo 1: Primeros pasos

El propósito de este capítulo es brindar una breve introducción a las funciones básicas de Bluefish a fin de poder crear y diseñar en seguida tu página web. Por lo pronto, nuestro objetivo es familiarizarlos con el entorno e interface de Bluefish.

Este capítulo no cubre todos los apectos de Bluefish sino que es una mera introducción a todo el entorno. En capítulos posteriores cubriremos cada cosa en detalle.

Ejecutando el programa

Tras la instalación y si no se cambió el directorio de la misma, el archivo ejecutable se encontrará ubicado en /usr/local/bin/. Por lo tanto, todo lo que hay que hacer para ejecutar el programa consiste en escribir: blashyrkh:~# bluefish

Si se obtiene el mensaje de error: "bluefish: no se encontró el archivo" es posible que sea necesario hacer algunos ajustes a la variable de entorno PATH lo que está más allá del alcance de este manual. Dirígase a su Grupo de Usuarios local para conocer cómo agregar el directorio /usr/local/bin a la ruta de ejecución. Por el momento, puede ejecutar el archivo especificando la ruta completa de la siguiente manera:
[todd@todd ~]$ /usr/local/bin/bluefish.

Observación: Por cuestiones de seguridad, la cuenta root no puede ejecutar Bluefish. De modo que al tipear bluefish siendo superusuario aparecerá un mensaje de error. A fin de evitar esta comprobación de seguridad y ejecutar el programa aún siendo root, escribir bluefish -s.

En pocos segundos aparecerá el logo de Bluefish y a continuación su ventana principal (ver imagen inferior). Por supuesto, esta ventana puede minimizarse, maximizarse, etc. de acuerdo con las características brindadas por el gestor de ventanas empleado (todas las imágenes mostradas se tomaron usando Enlightenment).

Las opciones de la línea de comandos se pueden obtener usando -h:

blashyrkh:~# bluefish -h
Editor HTML Bluefish 0.5
Uso: src/bluefish [opciones] [archivo]

Las opciones generalmente aceptadas son:
-s               omitir comprobación de superusuario
-v               versión actual
-h               esta ayuda
-p archivo       cargar proyecto al inicio
TRUCOS: Si se desean abrir todos los documentos PHP en un directorio con sus subdirectorios, se puede iniciar Bluefish de la siguiente forma: bluefish `find -name '*.php'` . O ¿Quieres abrir todos los archivos html de tu máquina? (¡Cuidado! hay alrededor de 1100 en una máquina Debian estándar) Usa: bluefish `find / -name '*.html'` . Para mayor información consulta man find y man bash.

Main screen

La Interface

Comencemos por explicar algunas cosas básicas sobre la interface de Bluefish. Para ello tomaremos como guía la imagen de arriba.

El menú

En la parte superior de la pantalla se encuentra el menú, donde aparecen todas las funciones de Bluefish. Éstas están categorizadas de acuerdo con su uso, de modo que el menú Archivo contiene las funciones relacionadas con archivos, Edición está relacionado con las funciones principales de edición (Cortar, Copiar, Pegar, etc.), y así sucesivamente. Si se presiona sobre un menú, aparecerán sus correspondientes submenús. Cada uno de ellos tiene su nombre a la izquierda y su atajo a la derecha que se explicarán más adelante.

Observación: En este manual, al referirnos a un comando de un submenú daremos su ruta completa de la siguiente manera: Archivo-->Nuevo significa que desde el menú Archivo se debe seleccionar Nuevo.
Una función muy útil que proporciona GTK+ es tearoffs. Para ver de qué se trata, seleccionar Archivo y presionar sobre la pequeña línea punteada. Como podrá verse, aparece una nueva ventana que contiene a todos los submenús de Archivo. De esta manera es posible acceder a las funciones de un menú de forma mucho más rápida, ya que es posible simplemente ubicar esta ventana al lado de la ventana principal. Si se presiona nuevamente sobre la línea punteada o si se cierra la ventana, ésta desaparecerá. Nótese que el menú sigue siendo accesible no sólo desde la ventana aparecida, sino también desde el menú de la ventana principal.

Por lo tanto, lo que en realidad nos permite es hacer flotar el menú sobre la pantalla. Por desgracia no hay manera de grabar su estado y posición de modo que al reiniciar Bluefish no habrá ningún menú flotante.

Los Atajos

Al observar los menús, se habrá comprobado que para algunas funciones existe a la derecha una combinación de teclas. Se denominan atajos y son combinaciones de teclas que, en general, comienzan con Control o Alt. Al presionar dicha combinación de teclas se ejecuta la función. Así, por ejemplo, si se desea abrir un nuevo archivo, en vez de seleccionar Archivo-->Nuevo (que tiene la leyenda Ctrl-N a su derecha) se puede presionar Control y 'N' simultáneamente.

Una característica muy útil es que aparte de las formas abreviadas por defecto, se pueden agregar las propias o bien redefinirlas. Hay que simplemente moverse con el ratón sobre el submenú al que se le quiere agregar una forma abreviada y presionar la combinación de teclas elegida (por ejemplo Control + 'G'). Como podrá comprobarse, la combinación aparece al lado de la función que se ejecutará al presionar dicha combinación. Si el atajo ya existe en otro submenú, éste será eliminado de su posición original y se ubicará en el lugar elegido.

En el caso en que se quiera eliminar un atajo, posicionarse con el ratón sobre el correspondiente submenú y presionar Backspace.

CONSEJO: Un atajo puede también ser combinación individual o combinada de las teclas Control, Alt, Shift con cualquier otra tecla. Por ejemplo Ctrl-Alt-G. No obstante, observemos que si bien la combinación Shift+Tecla es aceptable no será accesible pues Shift de por sí tiene asignada una función específica. Aún así la combinación Alt+Shift+Tecla o Ctrl+Shift+Tecla funcionarán sin problemas.

Puesto que los atajos se usan frecuentemente, quizás desee guardar los cambios hechos. Seleccionar Opciones-->Guardar teclas de acceso rápido . Esto también guardará cualquier atajo incluido en el Menú Personalizado (Bluefish 0.5 y posteriores). Obsérvese que los atajos NO se guardan automáticamente por lo que es necesario seleccionar dicho submenú cada vez que quiera guardarlos.

Asimismo, cabe destacar que determinados atajos están reservados y no se pueden usar. Se puede encontrar una lista de ellos más adelante.

Las Barras de Herramientas

Además del menú existen 3 barras de herramientas (en la imagen de arriba sólo se muestran dos de ellas); la Barra de herramientas Principal, la Barra de herramientas HTML y el Menú Personalizado.

Floating Una particularidad notable de las barras de herramientas es que también pueden flotar. Obsérvese el lado izquierdo de cada barra que es similar a el de la imagen de la izquierda. Ubíquese con el puntero del ratón sobre ella, manténgase presionado el botón izquierdo del mismo, arrastre la barra al lugar que desee y libere el botón del ratón. De esta manera se puede hacer que la barra flote.

Cuando la barra de herramientas flota, no aparece en la ventana principal dejando más espacio para la zona de edición de texto.

Si se arrastra nuevamente la barra de herramientas a su lugar original, volverá a ser parte de la ventana principal. Obsérvese que las barras de herramientas se ubicarán de la siguiente manera (de arriba hacia abajo): Barra de herramientas Principal, Barra de herramientas HTML, Menú Personalizado. Por el momento, no es posible superponer las barras.

Se puede obtener una breve descripción de lo que hace cada botón de la barra de herramientas ubicando por unos instantes sobre él el puntero del ratón.

Al igual que lo que sucede con los menús, no es posible almacenar las posiciones de las distintas barras de herramientas. Por lo tanto, al reiniciar Bluefish éstas aparecerán en las posiciones originales dentro de la ventana principal.

El Área de Edición de Texto

La mayor parte de la ventana está ocupada por el área de edición donde se muestran los archivos. Bluefish permite tener tantos documentos abiertos en forma simultánea como se desee.

Las diferentes pestañas muestran los archivos que han sido abiertos. En la imagen superior se tienen dos archivos: prefacio.html, un archivo que fue abierto desde el disco, y Sin Título que es un archivo nuevo sin grabar. Los archivos nuevos siempre se los denomina "Sin título". El archivo actual seleccionado es el archivo "prefacio.html". Las distintas pestañas permiten intercambiar los archivos. Al presionar otra pestaña, se accede al archivo del nombre seleccionado. Adelante y prueba hacerlo haciendo click dos veces sobre Archivo-->Nuevo y luego intercambiar las pestañas. Otra forma de intercambiar los documentos (si no han sido modificados los atajos) es con F1 para seleccionar el documento siguiente y con F2 para elegir el documento previo (estos atajos están situados en el menú Ver).

Como veremos más adelante, la apariencia del Área de Edición se puede modificar mediante Opciones-->Preferencias

La Barra de Estados

Por último en la esquina inferior de la pantalla se encuentra la Barra de Estados que se usa para mostrar los mensajes de las acciones efectuadas. Para comprender su uso observe lo que sucede cuando presiona los diferentes botones, etc.

Analizando temas más importantes

Luego de haber explicado las nociones básicas de la interface proseguiremos con el manejo de Bluefish.

Considero que lo primero que hay que explicar es cómo crear un nuevo documento y cómo abrir y guardar archivos. No sólo explicaremos estas funciones sino que les ayudaremos a entender algunas características de Bluefish que nos harán la vida mucho más fácil (tal como el Comienzo Rápido..).

Creando un nuevo archivo

Existen 3 maneras diferentes para crear un archivo nuevo, vacío y sin título:

Como se podrá comprobar aparece una nueva pestaña en el Área de Edición acompañando un área completamente vacía.

No se ve muy bien estando vacía. Sería maravilloso que aparecieran automáticamente las etiquetas HTML básicas (Ej. el DTD, el título, etc). Bluefish nos ofrece una excelente manera de ayudarnos a escribir estos elementos con facilidad.

Esto mostrá un conjunto de ventanas en el que se podrá seleccionar el DTD, el título, las etiquetas META así como las variables del cuerpo del documento.

Edición de textos

Es posible editar el archivo usando el Área de Edición. Al escribir las etiquetas la Barra de herramientas HTML puede resultar muy útil ya que contiene todas las etiquetas básicas. Algunos botones (al igual que las funciones que se encuentran en el menú Diálogos) muestran ventanas en las que fácilmente se pueden ingresar los parámetros de las etiquetas haciendo las cosas mucho más rápidas. En el caso en que se desee una descripción de lo que hace cada uno de los botones de la Barra de herramientas HTML ubicar el puntero del ratón sobre ellos hasta que aparezca una breve descripción.

Por defecto se usa el retorno automático de palabras (es decir la opción "Encapsular palabras" que puede deshabilitarse desde Opciones-->Preferencias). Si se ha elegido el retorno automático de líneas (es decir, si se ha tildado la opción "Encapsular líneas") aparecerá un pequeño ícono a la derecha indicando esta situación. Si aparecen varios íconos en una misma línea, esto significa que se ha encapsulado la línea varias veces.

Considero que es un buen momento para prestar atención al menú Edición que contiene algunas funciones muy interesantes.

TRUCO: Las expresiones regulares son una herramienta poderosa. Supongamos que se desea que todas las etiquetas HTML de un documento estén en minúsculas. Sin el uso de expresiones regulares es imposible hacerlo con una sola búsqueda y reemplazo. El patrón <[^>]*> encontrará cualquier cosa entre un < y un > , que no posea un > entre ellos. Seleccionando Reemplazar por mayúsculas ¡Listo!. El inconveniente radica en que este simple patrón obviamente pondrá minúsculas en la descripción alt de una imagen, etc. Por lo tanto no es perfecto.
TRUCO: ¿No han visto jamás un documento HTML creado con Frontpage? A veces aparecen cientos de líneas vacías y espacios. En Bluefish es posible buscar y reemplazar saltos de línea. El problema es que hay que copiarlas y pegarlas en la entrada del diálogo Buscar. Por lo tanto, selecciona dos líneas, pégalas en la entrada buscar: del diálogo del menú buscar, reemplázalas por una sola línea y selecciona Búsquedas coincidentes. La múltiples líneas en blanco se reducirán a una única línea vacía.

Otra característica interesante es el menú desplegable que aparece al hacer click con el botón derecho del ratón. Esta es una manera rápida de acceder a algunas funciones básicas tales como 'Cortar' y 'Copiar'. Estas funciones trabajan de la misma manera que las correspondientes funciones situadas en los menús y barras de herramientas. En cuanto al último elemento que aparece en este menú (el 'Editar etiqueta') hablaremos de él posteriormente.

Abriendo un archivo (desde el disco duro o desde la web)

Para abrir un archivo desde el disco duro:

Aparecerá el diálogo 'Seleccionar Archivo' donde se puede elegir el archivo que se desea abrir. Una característica muy útil consiste en poder abrir desde este menú más de un archivo a la vez (los archivos deben encontrarse en un mismo directorio). De hecho hemos abierto simultáneamente con éxito ¡hasta 1000 documentos!

También es posible abrir directamente un archivo desde la web. Para hacerlo, seleccionar Archivo-->Abrir desde la Web. En la ventana emergente escribir la dirección completa del documento (por ejemplo. 'http://jmk.simplenet.com/prod/download.htm'). Por supuesto, direcciones tales como 'http://jmk.simplenet.com/' son posibles y el archivo se abre como lo haría en cualquier navegador al ingresar dicha URL.

Por último, hay que hacer la siguiente observación: si acaba de abrir el programa y hay un archivo Sin Título, éste será reemplazado al abrir otro archivo. No obstante si ha sido modificado, aunque sea levemente, permanecerá con su contenido.

Guardando archivos

Si desea grabar un archivo, debe primero seleccionar su nombre de la pestaña de archivos situada en el área de edición (de esta manera aparecerá en la ventana principal) y a continuación :

Presionando 'Guardar' se graba el archivo mostrado. En el caso en que el archivo no esté grabado en el disco (es decir, si se ha abierto desde la Web o bien si se trata de un archivo Sin Título), 'Guardar' se comporta como 'Guardar como'. Presionando 'Guardar como' se lo puede grabar con un nombre diferente al que originalmente posee.

Si desea grabar todos los archivos abiertos seleccionar Archivo-->Guardar todo. Esto graba todos los archivos, comprobando cada vez si se trata de un archivo abierto desde la Web o de un archivo Sin Título. En estos casos aparece el diálogo 'Guardar como'

Cerrando un archivo

Para poder cerrar un archivo primero se lo debe seleccionar para que se muestre en el área de edición y luego:

Si el archivo ha sido modificado desde la última vez que se grabó, se le preguntará si desea guardarlo antes de cerrarlo. Eligiendo 'Cerrar' el archivo se cierra sin grabarse. Si se selecciona 'Guardar' el archivo primero se graba al disco. Por último, si se presiona ' Cancelar' el archivo no se cierra en absoluto.

Si se quiere cerrar todos los archivos abiertos, seleccionar Archivo-->Cerrar todo. Si no se encuentran grabados aparecerá el diálogo anterior.

Saliendo de Bluefish

Para cerrar Bluefish o bien se cierra la ventana principal o si no se selecciona Archivo-->Salir cuyo atajo es Ctrl-Q.

En el caso en que existan archivos sin grabar aparecerá, antes de que se cierre la aplicación, un diálogo similar al ya discutido antes.

Trabajando con HTML

Hasta aquí, hemos visto cómo crear, abrir, editar y guardar un archivo. Aunque esto es suficiente para empezar a trabajar no nos olvidemos que éste es un editor HTML y no un simple editor de texto. Esto significa que debe prestarse especial atención al usar HTML. De esta manera, se han incluido algunas herramientas específicas (que no se encuentran en un simple editor de texto) para facilitar el uso de etiquetas y la organización del documento.

Las Etiquetas y los Diálogos

Se pueden ver dos menús: Etiquetas y Diálogos. La mayoría de las funciones de estos menús pueden encontrarse juntas en la Barra de herramientas HTML.

El menú Etiquetas contiene algunas etiquetas HTML la mayoría de las cuales no requieren de parámetros. Ente ellas se encuentran las etiquetas de formato (Negrita, Cursiva, Tachado, etc.), los títulos, las listas, etc. También, se debe prestar atención al menú Etiquetas-->Especiales que contiene una lista de caracteres especiales.

Accedamos a algún submenú (asegurarse de que no haya ningún texto seleccionado). Al hacerlo, aparecerá la etiqueta elegida y el cursor se ubicará entre el comienzo (<>) y el final (</>) de la etiqueta de modo de poder escribir el texto correspondiente a ella.

Otro comportamiento interesante de estos menús se puede ver cuando se tiene seleccionado un texto. Por ejemplo, escribe 'Hola Mundo' y selecciónalo. Al presionar Etiquetas-->Títulos-->H1 el texto se enmarcará dentro de una etiqueta H1. Esto es de gran utilidad, ya que es posible cambiar el formato (por ejemplo, pasar de negita a cursiva) de un texto previamente escrito muy rápidamente.

El menú Etiquetas-->Reemplazar caracteres ascii reemplazará dentro de la selección actual todos los caracteres especiales tales como <>&" por sus correspondientes elementos HTML &lt;&gt;&amp;&quot;.

El menú Diálogos posée prácticamente las mismas funcionalidades pero en vez de escribir simplemente texto aparece una ventana en la que se puede ingresar los parámetros de las etiquetas. Si se deja en blanco uno de los campos dicho parámetro no aparecerá en el texto.

Editando las Etiquetas

¿Recuerdan cuando les mencionamos el menú desplegable que aparecía al hacer click con el botón derecho del ratón sobre el área de edición? El último elemento era Editar etiqueta. Es el momento de explicar qué es lo que hace.

Como ya hemos visto con el menú Diálogos fácilmente se pueden insertar etiquetas parametrizadas. Una vez ubicadas, siempre es posible editarlas manual mente con tan sólo editar el texto. No obstante, resulta más fácil ajustar los parámetros de una etiqueta a través de los diálogos en vez de hacerlo de esta manera. Es aquí donde aparece 'Editar etiqueta'.

Desde el menú Diálogos seleccionar una etiqueta (por ejemplo, Diálogos-->Tablas-->Tabla), ajustar sus parámetros e insertarla. A continuación, ubicar el cursor sobre la etiqueta, presionar el botón derecho del ratón y elegir 'Editar etiqueta'. Aparecerá el menú emergente en el mismo lugar donde se encuentra la etiqueta (esta vez, no todos los campos están en blanco sino que contienen los parámetros correspondientes a la propia etiqueta). De esta forma, es posible editar las etiquetas de una manera más sencilla y automática.

Cabe destacar que todo esto funciona con aquellas etiquetas que se insertaron desde el menú Diálogos o de los correspondientes botones de la Barra de herramientas HTML.

Resaltando la sintaxis

Esta característica se explicará en detalle en el segundo capítulo pero haremos a continuación una sinopsis de su uso.

Para poder identificar con facilidad las etiquetas y diferenciarlas del resto del texto se las pueden Resaltar (en realidad, se le da al texto un color diferente al del texto normal a fin de distinguirlo, mientras que un resaltador de uso cotidiano cambia el color del fondo).

Para habilitar esta característica ir a Ver-->Resaltar sintaxis. Cada vez que se desea resaltar las etiquetas, seleccionar Ver-->Actualizar sintaxis resaltada cuyo atajo por defecto es F5. También es posible dejar la opción activada en forma permanente configurando adecuadamente el menú Preferencias como veremos más adelante.

Los Projectos

Los Proyectos en Bluefish les resultarán conocidos. Elegir Projecto->Agregar todos los documentos abiertos si se tienen un par de archivos relacionados. A continuación, guardar el proyecto (generalmente está ubicado en ~/.bluefish/projects/). Cualquier color que use, fuente, objetivo. urls, etc. se almacenarán en el proyecto y al grabarlo éstos se grabarán también. Se pueden editar los valores haciendo Projectos->Editar, el menú contiene Archivos y Listas donde se puede acceder a los contenidos de un determinado proyecto.

Cuando se abre un proyecto también lo hacen todos los archivos de dicho proyecto. Si se previsualiza un archivo que es un proyecto el directorio base se elimina del archivo y se lo reemplaza por directorio Web. De esta manera, es posible reemplazar, si se desea, /home/olivier/public_html/index.html por http://localhost/~olivier/index.html. Esto resulta muy útil al programar sitios web dinámicos (PHP, SSI, RXML) en un servidor local.