Cómo utilizar referencias

Descripción de cómo se utilizan las referencias en BauDocWriter



Ahora que ya sabemos cómo crear proyectos de referencia con BauDocWriter vamos a estudiar la forma de utilizarlos.

Podríamos explicar cómo añadir referencias utilizando el proyecto Ejemplo que hemos utilizado en este manual , pero para mantener este proyecto limpio, vamos a crear un nuevo proyecto.

Así que pulsamos sobre la opción Nuevo | Proyecto del menú secundario e introducimos EjemploReferencia como nombre de proyecto:

Creación de un nuevo proyecto

Una vez creado el proyecto, seleccionamos su nombre en el árbol de sitios Web y seleccionamos la opción Nuevo | Referencia del menú secundario. Esto nos abrirá una nueva ventana donde veremos todos los proyectos de Plantilla que tenemos en este momento:

Selección de referencias

En nuestro caso hemos seleccionado el proyecto de plantilla que creamos en el paso anterior ( Plantilla ) y hemos seleccionado las carpetas Application , Images , JavaScript y Styles . Para que se copien todos los archivos del proyecto hemos dejado la opción Copia recursiva .

Si nos fijamos en nuestro árbol del sitio Web EjemploReferencia ahora ya tenemos una serie de archivos asociados:

Proyecto con archivos de referencia

Como podemos ver, han aparecido en nuestro árbol del proyecto, una serie de archivos con la extensión rfx , esta extensión (y el nuevo icono) identifica los archivos de referencia.

Para los observadores también habíamos seleccionado el directorio JavaScript como fuente de referencias, pero dado que no tenemos ningún archivo en esa carpeta, no se ha copiado nada a nuestro sitio final.

Si pulsamos dos veces sobre un archivo de referencia, se nos abrirá el contenido original del archivo. Por ejemplo, si pulsamos sobre la sección Footer nos presentará una ventana similar a ésta:

Archivo de referencia a la sección footer

Que cómo podemos imaginar, es el contenido del archivo Footer del proyecto Plantilla .

Ahora, ya no necesitamos crear nuevas plantillas, si no que podemos utilizar las que hemos añadido como referencia, para ésto, abrimos la ventana de proyecto y seleccionamos las plantillas adecuadas:

Selección de plantillas para el proyecto

En concreto, he seleccionado las siguientes plantillas:

Plantillas seleccionadas en el proyecto

Ya tenemos las plantillas y secciones, sólo nos falta realmente crear el contenido, es decir, las páginas finales de nuestro sitio. Así que he creado nuevas páginas de artículos y categorías para poder hacer la prueba:

Contenido del sitio

Por supuesto, no he escrito demasiado en mis páginas ya que sólo me interesaba tener algunas páginas de ejemplo para poder compilar y ver el resultado de nuestro primer sitio con referencias a otros proyecto:

Primera versión

Ya está, tenemos nuestro sitio Web con todas las plantillas y secciones creadas pero si nos fijamos en la página veremos que realmente las secciones que estamos utilizando, son iguales que los de la página del sitio Ejemplo . De hecho, tenemos un menú superior y un menú lateral que apuntan a páginas que no existen en nuestro sitio EjemploReferencia , por tanto, tenemos que modificar estas secciones particularizándolas para nuestro proyecto.

Por ejemplo, si pulsamos dos veces sobre la sección Header , tenemos este contenido:

	
%div { class = "GridRow" }
	%a { href = " index" rel="nofollow"} #img {src=" Images\Logo.png" alt=$WebName} #

%div { class = "GridRow" }
	%nav { class = "menu-main" }
		%ul  
			%li #a { href=" index" title="Página principal de la web" } Inicio # 
			%li #a { href=" Manual" title="Manual" } Manual # 
			%li #a { href = " SiteMap.tpg" title = "Mapa del sitio" } Mapa del sitio #  	
	

Como decíamos, el contenido de esta referencia realmente no es adecuado para nuestro sitio. Sin embargo, si cambiamos directamente el contenido tendremos otro problema: cuando creemos otro sitio basado en esta plantilla si lo volvemos a modificar, estropearemos nuestro primer sitio.

Por eso, lo que tenemos que hacer es cambiar este archivo de forma que pertenezca únicamente a nuestro proyecto. Para ello, seleccionamos el nodo Header en nuestro proyecto Ejemplo referencia y en el menú secundario seleccionamos la opción Transformar referencia :

Opción para transformar referencia

Una vez aplicada esta opción, veremos que se cambia el archivo de referencia transformándola en una sección normal de nuestro proyecto:

Referencia transformada en una sección

Ahora sí podemos escribir el código en nuestra sección porque ya sólo está asociada a nuestro proyecto y por tanto no se modificará su contenido en otros proyectos. En este caso, vamos a introducir el siguiente código en esta sección:

	
%div { class = "GridRow" }
	%a { href = " index" rel="nofollow"} #img {src=" Images\Logo.png" alt=$WebName} #

%div { class = "GridRow" }
	%nav { class = "menu-main" }
		%ul  
			%li #a { href=" index" title="Página principal de la web" } Inicio # 
			%li #a { href = "Categoria 1" } Categoría 1 # 
			%li #a { href = "Categoría 2" } Categoría 2 #
	

Por tanto, para que nuestro sitio esté completo, sólo debemos transformar las referencias de las secciones Footer , Header , LastNews y LateralBar . El resto de plantillas y referencias permanecen sin cambios. Es decir, nuestro proyecto queda así:

Proyecto con secciones transformadas

y al compilarlo ya tenemos el sitio que realmente queríamos:

Sitio final

Por supuesto, podríamos haber transformado la referencia de la imagen del logo o modificar los estilos para cambiar las plantillas de colores e incluso añadir referencias de proyectos diferentes. En mi caso, por ejemplo, utilizo un proyecto de plantilla para la estructura del sitio y los archivos javascript básicos, otro proyecto de referencia con estilos y otro proyecto con módulos JavaScript que utilizo con menos frecuencia como widgets.

Cada uno tiene su forma de trabajar y organizar sus proyectos pero encuentro que trabajar con referencias nos facilita enormemente el trabajo de creación de nuevos sitios Web.

En la próxima parte del manual, veremos uno de los últimos temas del uso de BauDocWriter , las plantillas personalizadas de página .



Páginas relacionadas