Gráfica

8.09.09

Creando un sitio web con Textpattern IV: Los bloques, como crearlos y utilizarlos.

por: Luis Flores

Este es el cuarto de una serie de artículos que conforman un tutorial de como realizar un sitio web con Textpattern, considero que es necesario que al menos conozcas la interface y tengas una noción de como funciona el sistema de plantillas.

Las artículos que conforman este tutorial son:

  1. El sitio web, análisis y estructura.
  2. Configuración de la estructura del sitio.
  3. Aplicación de las etiquetas de Textpattern a la plantilla base.
  4. Los bloques, como crearlos y utilizarlos.
  5. Creación de las plantillas secundarias.
  6. Aplicando la etiqueta Article a todas las plantillas.
  7. Optimizando las plantillas.
  8. Configuraciones finales de Textpattern.
  9. Publicación.
  10. Sugerencias.

¿Qué son los bloques?

La descripción sencilla es: Son pedazos de código HTML/XHTML/JS/PHP que se guardan dentro de Textpattern, el usuario les asigna un nombre y pueden ser llamadas a cualquier parte de la plantilla. Por ejemplo en ellos puedes guardar el formato de los artículos, scripts de servicios como google analytics o la publicidad.

Como crear bloques.

Para crear bloques entras a la sección Presentación y ahi encontrarás una pestaña con el nombre Bloques. Seleccionas “Crear bloque nuevo”, escribes el código en el area de texto y le asignas uno de los siguientes tipos: article, category, comment, file, link, misc, section. Estos tipos no tienen otra función más que ayudarte a organizar tu bloques.

Al entrar a la sección bloques del panel de administración encontramos ya varios bloques que pertenecen al tema predeterminado de Textpattern, puedes editarlos o crear uno nuevos. Yo prefiero editarlos porque unas etiquetas de Textpattern llaman automáticamente a estos bloques.

Antes de continuar hay que tener en cuenta que puedes llamar bloques dentro de bloques, una muy buena característica que muchos han de pasar por alto y ya explicare como esto nos facilita la edición de nuestro sitio.

Como utilizar bloques

Puedes llamar bloques a cualquier parte de la plantilla con esta etiqueta:

<txp:output_form form="nombreBloque" />

Veamos dos bloques dentro de <head></head>:

<head>
          <txp:output_form form="metatags" />
          <txp:output_form form="style_sheets" />
</head>

También hay etiquetas que tienen atributos para definir que bloques deben utilizar para publicar la información, por ejemplo la etiqueta <txp:article />, tiene los siguientes atributos:

form="form name"
Define que bloque utilizara para mostrar artículos. Si no la defines en la etiqueta, esta llama automaticamente al bloque default.
listform="form name"
Define que bloque utilzara para mostrar una lista de artículos.
searchform="form name"
Define que bloque utilizara para mostrar los resultados de una búsqueda. Si no la defines en la etiqueta, esta llama automáticamente al bloque search_results.

Si queremos que los artículos se publiquen utilizando el formato de un bloque que llamaremos articulo_destacado:

<txp:article form="articulo_destacado" />

Existen otras etiquetas que poseen el atributo form ademas de <txp:article /> como <txp:section_list/>, <txp:category_list/>. Recuerda tener la referencia de etiquetas a la mano para saber que etiquetas lo utilizan.

Una sugerencia al crear bloques es que tengas cuidado de que en ellos no queden etiquetas html sin cerrar al menos hasta que tengas mas experiencia trabajando con ellos ya que de esta manera cuando solo quieras mover un elemento te tocaría editar el bloque antes de mover la etiqueta <txp:output_form/>:

Cuidado:

<div>
         <p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.</p>

Cuidado:

         <p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.</p>
</div>

Bien:

<div>
         <p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.</p>
</div>

Puede que en alguno de tus proyectos sea necesario crear bloques como en los primeros dos ejemplos y esta bien lo único es que recuerdes cuales son antes de editar la plantilla.

Trabajando con la plantilla

Antes cometía el error de incluir en los bloques las etiquetas <html>, <head>, <body> y los comentarios pero ahora considero que es mejor práctica solo convertir en bloques elementos más específicos.

Ahora veamos que elementos de la plantilla podemos convertir en bloques.

Los contenidos de la etiqueta <head></head>, la mayoría de las veces basta con hacer un bloque que contiene por completo el contenido de la etiqueta pero aveces por ejemplo cuando tienes secciones con diferentes diseños es mas conveniente dividir el contenido en varios bloques; en este caso crearemos un solo bloque con el contenido. Llamemos al bloque plantilla_head de tipo misc:

<title><txp:page_title/></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/lrj-reset.css" rel="stylesheet" type="text/css" />
<link href="css/lrj-grid-12.css" rel="stylesheet" type="text/css" />
<link href="css/lrj-base.css" rel="stylesheet" type="text/css" />
<link href="css/lrj-control.css" rel="stylesheet" type="text/css" />
<link href="css/estilo.css" rel="stylesheet" type="text/css" />

El encabezado es un elemento común en todo el sitio, llamemos al bloque plantilla_encabezado de tipo misc:

<div id="encabezado" class="container">
	 <!-- Nombre del sitio -->
    <div id="banner" class="fl">
    	<h1><txp:site_name/></h1>
    </div>		
    <!-- Menu de navegación -->
	<div id="navegacion">		
		<txp:section_list break="li" wraptag="ul" class=""/>              	
	</div>
</div>

La barra lateral, he decido convertirla en un solo bloque por que de esta manera si cambio el diseño y quiero a la izquierda simplemente coloco su etiqueta <txp:output_form /> antes/arriba de la etiqueta contenedora del contenido principal. Llamemos al bloque plantilla_barralateral de tipo misc:

<div id="barra-lateral" class="gul a3">      	
		<!-- Campo de búsqueda -->
         <div id="busqueda" class="fl a3">
<h4>Buscar</h4>
<txp:search_input label="" wraptag="fieldset" size="" />
         </div>	 
		 <!-- Lista de enlaces socialroll -->
         <div id="social" class="fl a3">
                <txp:linklist category="socialroll" sort="linkname" wraptag="ul" break="li" class="cleanlist" label="Redes sociales" labeltag="h4"/>
         </div>		 
		 <!-- Comentarios recientes-->
         <div id="comentarios-re" class="fl a3">   	
                <txp:recent_comments break="p" limit="8" label="Comentarios Recientes" labeltag="h4"/>
         </div>	 
      </div>

Las listas de enlaces y el formulario de contacto:, llamemos al bloque plantilla_enlacesformulario de tipo misc:

<div id="gef-top" class="clr"></div>   
   <div id="container-gef" class="fl">   	
   <div id="guias"class="gul a4">
   	 <!-- Lista de Enlaces guías -->   
<txp:recent_articles section="guias" label="Guías y tutoriales" labeltag="h3" limit="10"  wraptag="ul" break="li" class="cleanlist" />
   </div>
   <div id="enlaces-amigos" class="gul a4">
   	  <!-- Lista de Enlaces blogroll -->
      <txp:linklist category="blogroll" sort="linkname" limit="15" wraptag="ul" break="li" class="cleanlist" label="Sitios de interés" labeltag="h3" />
   </div>
   <div id="form-contacto" class="gul a4">   	
      <!-- Formulario de contacto -->
<txp:zem_contact to="recipient@example.com" label="Contáctanos"/>
   </div>   
   </div>
   <div id="gef-bottom" class="clr"></div>

El pie, llamemos al bloque plantilla_pie de tipo misc:

<div id="pie" class="gul a12"><p>Por: Luis Roberto Flores - <a href="http://armatoste.net">Armatoste.net</a><br/><a href="http://www.textpattern.com">Textpattern</a> - 2009</p></div>

Por último colocamos los bloques a la plantilla y esta quedaría así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<txp:output_form form="plantilla_head" />
</head>
<body>
 <!-- Encabezado -->
<txp:output_form form="plantilla_encabezado" />
<!-- -->
<!-- Empieza contenido -->
<div class="container">   
   <div id="cuerpo-top" class="clr"></div>
   <div id="cuerpo" class="gul a12">
      <div id="container-interno-cuerpo" class="fl a9">
      |
      |  HE BORRADO DE AQUÍ EL CONTENIDO PARA HACER MÁS FÁCIL
      |  LA LECTURA DE LA PLANTILLA
      |
      </div>
<!-- Barra lateral -->	  
        <txp:output_form form="plantilla_barralateral" />		
   </div>   
   <div id="cuerpo-bottom" class="clr"></div>
<!-- -->   
   <div class="clr"></div>   
<!-- Lista de enlaces y formulario de contacto -->
    <txp:output_form form="plantilla_enlacesformulario" />
<!-- -->    
<!-- Pie -->
    <txp:output_form form="plantilla_pie" />
<!-- -->  
</div>
</body>
</html>

Si te fijas he llamado a todos los bloques con el prefijo plantilla_ esto es simplemente para organizar mejor la colección de bloques ya que muchas veces creo varios bloques que son del mismo tipo pero con diferente propósito y pues organizar se vuelve algo complicado.

El próximo artículo

Todavía en la plantilla no hemos aplicado la etiqueta <txp:article /> que es la que publica el contenido importante pero lo haremos después de crear una segunda plantilla en el próximo artículo: “Creación de las plantillas secundarias”.

He decido explicar hasta después a la etiqueta <txp:article /> por que hay bastante que explicar y hay que tener en cuenta ciertas reglas al utilizarla.

Etiquetas:

Comentarios

Registrate en gravatar