Mapa del sitio

Explicación de los mapas de sitio en BauDocWriter



Si ha navegado por Internet, seguro que se habrá encontrado en algunos sitios con un enlace a una página especial llamada mapa del sitio .

En esas páginas normalmente se nos muestran todas las páginas del sitio Web. BauDocWriter nos permite generar automáticamente este tipo de páginas.

Para ello, simplemente tenemos que crear un nuevo archivo llamado SiteMap de tipo Mapa del sitio :

Ventana de creación del nuevo mapa del sitio

Al crear este archivo se nos abre una ventana de edición de documentos:

Ventana de edición del contenido del mapa del sitio

En el caso de las páginas de sitio, debemos incluir en la ficha Páginas aquellas categorías que deseemos incluir en nuestro mapa:

Selección de categorías del mapa del sitio

como no podía ser de otra forma, hemos escogido la categoría Manual pero podríamos escoger todas las categorías que deseáramos de nuestro sitio.

El siguiente paso es seleccionar la plantilla que vamos a utilizar en el mapa del sitio. Podríamos utilizar directamente la plantilla CategoryItems pero aprovechando que ya hemos avanzado mucho en la creación de sitios, vamos a crearnos una plantilla llamada SiteMap.tpt que vamos a rellenar con este contenido:

	
%div { class = "GridRowFlex" }
	<% for $intIndex = 1 to 100 %>
		<% if $Url[$intIndex] != "null" %>
			%article { class = "GridCell33 panel bg-clr-summary brd-rounded-shadow"}
				%header { class = "panel-header bg-clr-summary-gradient brd-bottom-dotted "}
					%h2 #a { href = $Url[$intIndex] } $Title[$intIndex] #
				%nav { class = "list-horizontal txt-small" }
					%ul
						%li #i { class="fa fa-tags" } #
						<% if $Tag[$intIndex] != "null" %>
							<% for $intTag = 1 to 20 %>
								<% if $Tag[$intIndex]->$Title[$intTag] != "null" %>
									%li #a { href = $Tag[$intIndex]->$Url[$intTag] class = "label bg-clr-tag" } $Tag[$intIndex]->$Title[$intTag] #
						%li #b Publicado el # $Date[$intIndex]
				%div { class = "thumb-big" }
					<%if $UrlThumbnail[$intIndex] != "" %>
						%a {href= $Url[$intIndex] } #img {src = $UrlThumbnail[$intIndex] alt=$Title[$intIndex]} #
					<%else%>
						<%if $UrlImage[$intIndex] != "" %>
							%a { href = $Url[$intIndex] } #img {src = $UrlImage[$intIndex] alt=$Title[$intIndex]} #
						<%else%>
							%a { href = $Url[$intIndex] } #img {src=" Images\NoImage.jpg" alt=$Title[$intIndex]} #
				%NoTag
					$Content[$intIndex]
				%footer { class = "panel-footer brd-top-dotted" }
					%a {class = "btn btn-sm btn-success fr cb" href= $Url[$intIndex] } Leer más ...

%br

%div
	$PagerSection
	
%br
	

Esta plantilla es muy similar a la de elementos de categoría pero hemos cambiado las clases que se utilizan en el HTML final para que nos cree una lista de elementos con la imagen en la parte superior del resumen del contenido (como veremos en la imagen del final de este artículo).

Una vez rellena y grabada, podemos abrir la ventana de propiedades del proyecto para indicar la plantilla apropiada para representar las páginas del mapa del sitio:

Selección de la plantilla de mapa del sitio en el proyecto

Lo único que nos falta ya es añadir un vínculo que nos lleve a nuestra página. Para conseguirlo, abrimos la sección Header y en la parte de menú arrastramos SiteMap.tpg o escribimos el nuevo hipervínculo. Nuestra sección de cabecera ahora tiene este aspecto:

	
%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 #  
	

Para los puristas, también podemos abrir la sección Footer y añadir el mismo vínculo a los enlaces del final de página:

	
	%div { class = "GridRow panel-body-footer-copyright bg-clr-body-foot-copyright txt-small" }
		%div { class="GridCell50" }
			%p © De mi sitio
		%div { class="GridCell50" }
			%nav { class = "list-horizontal-dotted fr" }
				%ul
					%li #a { href = " Index" } Inicio #
					%li #a { href = " Manual" } Manual # 
					%li #a { href = " SiteMap.tpg" } Mapa del sitio #
	

Una vez realizadas todas estas modificaciones ya podemos generar nuestro sitio Web y ver la página de mapa que acabamos de crear:

Página del mapa del sitio

En la imagen se puede ver el aspecto de la nueva plantilla así como las opciones de menú que hemos añadido en este artículo.

Para continuar con el manual, vamos a estudiar uno de los aspectos fundamentales de BauDocWriter a la hora de mantener varios sitios Web: los proyectos y archivos de referencia que nos facilitarán en gran medida el trabajo de diseño de plantillas y secciones.

Por cierto, en este artículo hemos hablado de los mapas de sitio HTML, es decir, las páginas que ve el usuario final. Si ya ha desarrollado sitios Web anteriormente posiblemente conozca los archivos sitemap.xml que contienen toda la información de las páginas de un sitio y que los buscadores utilizan para analizar la estructura de un sitio. BauDocWriter genera automáticamente este tipo de archivos como estudiaremos en el artículo archivos automáticos de este mismo manual.



Páginas relacionadas