Trucos para mejorar el contenido de los documentos

Algunos trucos para mejorar el contenido de nuestras páginas en BauDocWriter



Hasta ahora, cuando hemos hablado de escribir páginas y categorías hemos utilizado ejemplos muy simples porque nos interesaba sobre todo entender la estructura de la aplicación.

En este punto del manual nos vamos a centrar en algunas particularidades del editor de contenido que nos van a facilitar el trabajo y que nuestros sitios sean más espectaculares.

¿Cómo añadir imágenes a un documento ?

Las páginas o documentos en BauDocWriter se comportan como carpetas, es decir, en ellas podemos añadir imágenes.

Lo podemos hacer de tres formas:

  • Desde el explorador de archivos de Windows: nos situamos sobre la página a la que deseamos añadir imágenes y pulsamos sobre la opción Ver en el explorador . Esto nos abrirá el explorador de archivos en el directorio adecuado y desde ahí podemos copiar y pegar archivos (no sólo imágenes).
  • Desde la opción Pegar imagen : del mismo menú secundario de nuestro árbol de páginas. Para ello simplemente copiamos una imagen en el portapapeles por ejemplo desde el navegador de Internet o capturamos la imagen con la tecla de Capturar pantalla y seleccionamos la opción Pegar imagen en el menú secundario.
  • Desde el botón Pegar imagen del documento: si abrimos un documento o una página en el editor, en la parte inferior veremos un botón etiquetado como Pegar imagen desde el que podemos pegar una imagen capturada en el portapapeles.

Estas dos últimas opciones tienen la particularidad de crear un thumbnail de la imagen, es decir, una imagen reducida que después podemos utilizar por ejemplo en los índices.

La imagen asociada al documento (la que aparece en la parte inferior del archivo) tiene otra particularidad: se considera la imagen predeterminada del documento y tiene algunas características especiales como veremos en el siguiente paso del manual ( Mejorando las plantillas ).

Para mostrar una imagen en el documento, simplemente debemos escribir el siguiente código:

	
	%img { src = "nombre_imagen.jpg" }
	

Si no nos apetece escribir, podemos seleccionar la imagen en el árbol de documentos y arrastrarla hasta el contenido del archivo, esto automáticamente nos creará una etiqueta #img con la ruta del archivo.

¿Cómo añadir hipervínculos a una página ?

Añadir hipervínculos a una página es también una tarea sencilla. Podemos escribirlo directamente:

%a { href = "Plugins\BauDocWriter\Paso a paso\30 Definición plantillas" } Definición de plantillas
%a { href = "Plugins\BauDocWriter\Paso a paso\30 Definición plantillas" target = "_blank" } Definición de plantillas

o bien utilizar el mismo truco que hemos utilizado en las imágenes, es decir, arrastrar la página sobre el documento y el editor nos creará automáticamente una etiqueta para el hipervínculo.

Lo mismo ocurre cuando arrastramos y soltamos sobre el documento páginas de estilo, archivos de javaScript o archivos con otras extensiones aunque en estos casos se nos generan las etiquetas link , script o anchor adecuadas a cada caso.

¿Se pueden añadir otros tipos de archivos a una página ?

En realidad, al definir las páginas como carpetas, podemos copiar en ellas cualquier tipo de archivo: doc, zip, pdf... lo que deseemos.

Por supuesto estos archivos no se compilan si no que se copian directamente en el directorio adecuado del sitio Web y accederemos a ello utilizando hipervínculos.

¿Y qué ocurre con ese código que se repite en varias páginas ?

Según vamos creando nuevos sitios, puede que nos encontremos con bloques de código que se escribe muy a menudo. Por ejemplo, en este sitio utilizo este código para ponerle una sombra a las imágenes:

%p { class = "tac" }
	#img { class = "ShadowBottom" src = "Plugins\BauDocWriter\Paso a paso\30 Definición plantillas\Administracion proyecto.jpg" 
			alt = "Ventana de configuración de proyecto" } #

Escribir este código continuamente resulta algo aburrido, por eso en la barra de herramientas hay un combo titulado instrucciones :

Combo de instrucciones

Al pulsar sobre alguna de las opciones se inserta un bloque de código con el contenido. Por supuesto, podemos crear nuestras propias instrucciones seleccionando la opción Insertar instrucción que nos abre la ventana de edición de instrucciones:

Ventana mantenimiento de instrucciones

donde podemos insertar el código repetitivo o simplemente complejo que necesitemos para nuestros documentos.

Nhtml nivel dos

Hasta ahora hemos visto instrucciones de Nhtml muy sencillas pero en varias ocasiones ya nos hemos encontrado con caracteres especiales como la almohadilla ( #) o las llaves ( { y}).

Este tipo de caracteres especiales indican respectivamente un subelemento HTML o bien los atributos de un elemento HTML.

Si por ejemplo dentro de un párrafo deseamos incluir una palabra en negrita debemos utilizar un subelemento, concretamente #b. Para terminar con este subelemento debemos cerrarlo con una almohadilla final. Por ejemplo:

%p Un ejemplo de texto en #b negrita # y otro ejemplo de #em texto en cursiva # .

que da como resultado:

Un ejemplo de texto en negrita y otro ejemplo de texto en cursiva .

Por supuesto, se pueden combinar diferentes bloques de subelementos. Por ejemplo:

%p Este texto es #b negrita # y este otro es #b negrita y #em cursiva # #.

que genera este resultado:

Este texto es negrita y este otro es negrita y cursiva .

Por su parte, las llaves identifican los atributos de una etiqueta: estilos, clases, identificadores, referencias... Por ejemplo, como hemos visto, para escribir un hipervínculo utilizamos la instrucción:

%a { href = "Plugins\BauDocWriter\Paso a paso\30 Definición plantillas" } Definición de plantillas

Si lo que deseamos es añadir una clase a un párrafo o la dirección de una imagen podemos recurrir a:

%p { class = "tac" }
	#img { class = "ShadowBottom" src = "Plugins\BauDocWriter\Paso a paso\30 Definición plantillas\Administracion proyecto.jpg" 
			alt = "Ventana de configuración de proyecto" } #

Puede encontrar la información de la estructura del Nhtml y todas sus posibilidades en sus páginas específicas.

Siguiente paso

Ahora que ya hemos visto algunos trucos del editor y cómo asociar imágenes a una página, podemos pasar al siguiente paso para la creación de plantillas avanzadas en BauDocWriter.



Páginas relacionadas