Gráfica

Creando un sitio web con Textpattern III: Aplicación de las etiquetas de Textpattern a la plantilla base.

Este es el tercero 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:

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

Preparando

Vamos a subir a nuestro servidor en la carpeta raíz las carpetas imgs y css que se encuentran en el zip con los archivos de trabajo que descargamos en el primer artículo; sino, aquí te dejo de nuevo el enlace.

Descarga los archivos de trabajo.

La plantilla base

La plantilla o diseño base de un sitio es en la que se encuentran todos los elementos en común entre todas las secciones de un sitio. Es normal que las secciones de un sitio tengan ciertas variaciones en la organización y contenido por lo que si preparamos primero la plantilla base será después mucho más fácil crear las plantillas de las diferentes secciones.

Cuando se diseña un sitio en Textpattern siempre he pensado que lo mejor es realizar el diseño en su totalidad ya en html y css porque de esta manera para utilizarlo solo es cuestión de sustituir el contenido estático que hemos escrito con las etiquetas.

Para trabajar en el diseño de nuestro sitio nos dirigiremos a la pestaña Presentación ahí como mencione en el artículo anterior, se encuentran las sub pestañas Secciones, Páginas, Bloques y Estilos. Como ya configuramos las secciones de nuestro sitio trabajaremos principalmente en estas tres últimas pestañas.

En la pestaña Páginas recomiendo trabajar principalmente la estructura del diseño y en la sección Bloques el formato de los elementos que componen el diseño. No es necesario utilizar bloques para cada parte del diseño pero si hay bloques que son indispensables ya que son parte fundamental del funcionamiento de ciertas etiquetas como por ejemplo el bloque Default que es utilizado por la etiqueta <txp:article/> para mostrar los artículos; es fácil reconocer cuales son los bloques indispensables ya que junto al nombre no se muestra un cuadro de selección.

Por ahora trabajaremos solamente en la pestaña Páginas y luego más adelante en otro artículo crearemos bloques para los elementos comunes entre las secciones. Antes de comenzar a implementar etiquetas obviamente tenemos que saber cuales etiquetas vamos a utilizar. Veamos de que partes esta conformada la página de inicio:

Ver la página de inicio del sitio a crear

Título de la página
Menú de navegación (Enlaces a las secciones).
Los últimos cuatro artículos.
Campo de búsqueda.
Enlaces a las redes sociales (socialroll)
Los comentarios recientes.
Listado de artículos más recientes de la sección guías y tutoriales.
Listado de sitios de interés (blogroll).
Formulario de contacto.

Cada uno de estos elementos puede ser publicado por medio de etiquetas sin necesidad de escribir html extra.

Enlace a la referencia de etiquetas de Textpattern

Las etiquetas principales que vamos a utilizar son:

Título de la página: <txp:site_name />
Lo que hace es publicar el nombre del sitio que asignaremos en las preferencias básicas.

Menú de navegación: <txp:section_list />
Esta etiqueta crea una lista de enlaces de las secciones de tu sitio. Por medio de los atributos podemos definir parámetros como que secciones omitir, en que orden presentar los enlaces etc.

Los artículos: <txp:article/>
Podría decir que es la más importante ya que publica tus artículos y contenido. Igualmente podemos definir los parámetros de publicación por medio de diferentes atributos.

Campo de búsqueda: <txp:search_input />
Esta etiqueta publica un campo de texto y botón para realizar las búsquedas.

Enlaces a las redes sociales y a sitios de interés: <txp:linklist/>
Con <txp:linklist/> se publican los enlaces asignados a un categoría de enlaces, en el artículo anterior creamos dos categorías de enlaces: blogroll y socialroll.

Los comentarios recientes: <txp:recent_comments />
Con esta etiqueta se muestra una lista de enlaces con los nombres de los visitantes mas recientes que han comentado y con el artículo donde comentaron.

Listado de artículos más recientes de la sección guías y tutoriales: <txp:recent_articles />

Formulario de contacto: El plugin zem_contact_reborn

Colocando las etiquetas en nuestro archivo html

Vamos a abrir el archivo index.html, sugiero que utilices un editor de html para facilitar las cosas; también he separado con comentarios cada parte de la página para que las reconozcas rápidamente.

Colocando el título del sitio.

El título del sitio es el que aparece en la barra de título de nuestro navegador, utilizamos la etiqueta <txp:page_title/> y la colocamos dentro de las etiquetas <title></title>

<title><txp:page_title/></title>

Colocando el nombre del sitio.

Vamos a utilizar la etiqueta <site_name />, no posee atributos por lo que solo es de colocarla donde la necesitemos. Buscamos la div contenedora del nombre:

<!— Nombre del sitio —>
     <div id="banner" class="fl">
    	<h1>Mi sitio hecho con Textpattern</h1>
    </div>

Y cambiamos Mi sitio hecho con Textpattern por la etiqueta:

<!— Nombre del sitio —>
     <div id="banner" class="fl">
    	<h1><txp:site_name /></h1>
    </div>

Colocando el menú de navegación:

Utilizamos la etiqueta <txp:section_list/>; ojo a pesar de que la etiqueta lleva en el nombre la palabra list, no publica predeterminadamente una lista de html sino que simplemente crea los enlaces y los separa con una etiqueta <br />:

<a href="http://core.armatoste.net/articulos/">Artículos</a><br />
<a href="http://core.armatoste.net/galeria/">Galería</a><br />
<a href="http://core.armatoste.net/guias/">Guías</a><br />
<a href="http://core.armatoste.net/noticias/">Noticias</a><br />
<a href="http://core.armatoste.net/sobre/">Quienes somos</a>

Entonces como el menú en nuestro diseño es una lista de HTML tenemos que hacer que esta etiqueta publique el contenido como tal; aquí hacemos uso de atributos que en este caso son wraptag y break:

 <txp:section_list wraptag="ul" break="li" />

wraptag hace que textpattern encierre todo el contenido dentro de la etiqueta html que asignemos.
break es un atributo que se encuentra en todas las etiquetas de Textpattern que producen listados, lo que hace es encerrar cada elemento de la lista dentro de la etiqueta asignada, los valores permitidos son li cuando se quiere mostrar una lista y br y hr cuando son elementos que no van dentro de una lista de html.

Ya con los atributos asignados la etiqueta publicará el contenido de esta manera:

<ul class="section_list">
	<li><a href="http://core.armatoste.net/articulos/">Artículos</a></li>
	<li><a href="http://core.armatoste.net/galeria/">Galería</a></li>
	<li><a href="http://core.armatoste.net/guias/">Guías</a></li>
	<li><a href="http://core.armatoste.net/noticias/">Noticias</a></li>
	<li><a href="http://core.armatoste.net/sobre/">Quienes somos</a></li>
</ul>

La clase section_list Textpattern la asigna automáticamente, si no quieres que lo haga simplemente agregamos el atributo class="" en la etiqueta de Textpattern.

 <txp:section_list wraptag="ul" break="li" class="" />

Ahora sustituimos el listado fijo en nuestro documento html por la etiqueta, buscamos:

     <!— Menu de navegación —>
	<div id="navegacion">
		<ul>
			<li><a href="index.html" title="Inicio">Inicio</a></li>
			<li><a href="sobre.html" title="Quienes somos">Quienes somos</a></li>
			<li><a href="secciones.html" title="Noticias">Noticias</a></li>
			<li><a href="secciones2.html" title="Articulos">Artículos</a></li>
			<li><a href="secciones3.html" title="Guías">Guías</a></li>
			<li><a href="galeria.html" title="Galería">Galería</a></li>
			<li><a href="http://armatoste.net/crear-sitio-con-textpattern" title="Tutorial">Volver al tutorial</a></li>
		</ul>		
	</div>

Y sustituimos la lista:

    <!— Menu de navegación —>
	<div id="navegacion">
			<txp:section_list wraptag="ul" break="li" class=""/>
	</div>

Colocando el campo de búsqueda.

A la etiqueta <txp:search_input />, vamos a configurarla de la siguiente manera:

<txp:search_input label="" wraptag="fieldset" size="" />

El valor predeterminado del atributo label es "Buscar" pero le asignamos un valor nulo ya que no es necesaria porque ya estamos utilizando un título; lo mismo con el atributo size porque hemos asignado el tamaño en el css. En el atributo wraptag utilicé el valor fieldset porque el doctype asignado del documento es XHTML/Strict por lo que toda etiqueta <input> </input> debe ir dentro de una etiqueta <fieldset></fieldset>

Ya sabiendo como configurar la etiqueta buscamos en el documento html:

         <!— Campo de búsqueda —>
         <div id="busqueda" class="fl a3">
            <h3 class="ph4">Buscar</h3>
            <form action="">
               <fieldset>
                  <input type="text" />
               </fieldset>               
            </form>
         </div>
        <!— —>

Y sustituimos la etiqueta <form> </form> y su contenido:

         <!— Campo de búsqueda —>
         <div id="busqueda" class="fl a3">
         	<h3 class="ph4">Buscar</h3>
               <txp:search_input label="" wraptag="fieldset" size="" />
        </div>
        <!— —>

Colocando la lista de enlaces socialroll

Utilizamos la etiqueta <txp:linklist /> y la configuramos de la siguiente manera:

<txp:linklist category="socialroll" sort="linkname" wraptag="ul" break="li" class="cleanlist" label="Redes sociales" labeltag="h4" />

Aquí sucede lo mismo que con la etiqueta _ <txp:section_list/>, lo diferente es que en vez de quitarle la clase predeterminada que Textpattern asigna, la cambiamos por una que hemos utilizado para aplicarle estilo. También he hecho uso de los atributos _sort, label y labeltag:

Con label le podemos asignar un título al bloque.
Con labeltag asignamos con que etiquetas será encerrado el título.
Con sort le decimos que ordene los enlaces en orden alfabético.

No utilicé estos atributos en la etiqueta <txp:search_input /> porque para ella no existe el atributo labeltag por lo que el título hay que colocarlo aparte.

Buscamos en el html:

<!— Lista de enlaces socialroll —>
         <div id="social" class="fl a3">
         	<h3 class="ph4">Redes sociales</h3>
            <ul class="cleanlist">
               <li><a href="#">Red social 1</a></li>
               <li><a href="#">Red social 2</a></li>
               <li><a href="#">Red social 3</a></li>
               <li><a href="#">Red social 4</a></li>
            </ul>
         </div>
		 <!— —>

La sustituimos y quedaría de esta manera:

<!— Lista de enlaces socialroll —>
         <div id="social" class="fl a3">
         	<h3 class="ph4">Redes sociales</h3>
                <txp:linklist category="socialroll" sort="linkname" wraptag="ul" break="li" class="cleanlist" label="Redes sociales" labeltag="h4"/>
         </div>
		 <!— —>

Colocando los comentarios mas recientes

Vamos a utilizar la etiqueta <txp:recent_comments /> haremos que nos muestre los últimos cinco comentarios y que los separe como párrafos:

<txp:recent_comments break="p" limit="5" label="Comentarios recientes" labeltag="h4" />

El único atributo nuevo que he utilizado es limit, con el definimos cuantos elementos vamos a mostrar.

Buscamos en el html donde lo colocaremos:

 <!— Comentarios recientes—>
         <div id="comentarios-re" class="fl a3">
         	<h3>Comentarios recientes</h3>
         	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta feugiat pharetra.</p>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta feugiat pharetra.Phasellus sollicitudin orci quis orci.</p>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta feugiat pharetra. Phasellus sollicitudin orci quis orci aliquam ac porta tellus molestie.</p>
         </div>
 <!— —>

Y sustituimos:

 <!— Comentarios recientes—>
         <div id="comentarios-re" class="fl a3">
         	<txp:recent_comments break="p" limit="8" label="Comentarios Recientes" labeltag="h4"/>
        </div>
 <!— —>

Como por ahora solo tenemos un comentario que es el que ya viene con Textpattern, solo este aparecerá.

Con esto terminamos lo que es la barra lateral ahora podemos pasar a la barra inferior, pero antes vamos a crear unos artículos de prueba para poder ver como funciona la siguiente etiqueta.

Creando artículos de prueba.

Para poder continuar trabajando sin problemas vamos a crear varios artículos en las secciones Artículos, Noticias y Guías. Con tres artículos en cada sección basta. Solo asegúrate que tengan títulos diferentes. Puedes ir a lorem2.com para conseguir texto de relleno.

Para escribir artículos simplemente vamos a la pestaña Contenido y luego la sub pestaña Escribir. Ahí escribe el título y agrega contenido que creas necesario, unos cinco o seis párrafo bastan. Luego, debajo de el área de texto donde escribes el contenido hay otra área de texto; esta es para escribir los resúmenes de los artículos, escribe ahí uno o dos párrafos.

Colocando listado de los artículos más recientes de la sección Guías

Para crear este listado vamos a utilizar la etiqueta <txp:recent_articles /> y la configuramos de la siguiente manera:

<txp:recent_articles section="guias" label="Guías y tutoriales" labeltag="h3" limit="10" wraptag="ul" break="li" class="cleanlist" />

Buscamos donde la colocaremos en el html:

   <div id="guias"class="gul a4">
   	 <!— Lista de Enlaces guías —>   
      <h3>Guías y tutoriales</h3>
      <ul class="cleanlist">        
         <li><a href="#">Quisque porta feugiat pharetra</a></li>         
         <li><a href="#">Phasellus sollicitudin orci quis orci aliquam ac porta</a></li>         
         <li><a href="#">Quisque porta feugiat pharetra</a></li>
         <li><a href="#">Phasellus sollicitudin orci quis orci aliquam ac porta</a></li>         
         <li><a href="#">Quisque porta feugiat pharetra</a></li>
         <li><a href="#">Phasellus sollicitudin orci quis orci aliquam ac porta</a></li>         
         <li><a href="#">Quisque porta feugiat pharetra</a></li>
         <li><a href="#">Phasellus sollicitudin orci quis orci aliquam ac porta</a></li>
      </ul>
   </div>

Y listo:

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

Colocando la lista de enlaces a sitios de interés

Los mismos pasos que utilizamos para agregar socialroll con la etiqueta <txp:linklist />; la diferencia es que utilizaremos el atributo limit:

<txp:linklist category="blogroll" sort="linkname" limit="15" wraptag="ul" break="li" class="cleanlist" label="Redes sociales" labeltag="h3" />

Buscamos en el html:

   <div id="enlaces-amigos" class="gul a4">
   	  <!— Lista de Enlaces blogroll —>
      <h3>Sitios de interés</h3>
      <ul class="cleanlist">        
         <li><a href="#">Quisque porta feugiat pharetra</a></li>         
         <li><a href="#">Phasellus sollicitudin orci quis orci aliquam ac porta</a></li>         
         <li><a href="#">Quisque porta feugiat pharetra</a></li>
         <li><a href="#">Phasellus sollicitudin orci quis orci aliquam ac porta</a></li>         
         <li><a href="#">Quisque porta feugiat pharetra</a></li>
         <li><a href="#">Phasellus sollicitudin orci quis orci aliquam ac porta</a></li>         
         <li><a href="#">Quisque porta feugiat pharetra</a></li>
         <li><a href="#">Phasellus sollicitudin orci quis orci aliquam ac porta</a></li>
      </ul>
   </div>

Y sustituimos:

   <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="Redes sociales" labeltag="h3" />
   </div>

Instalando las extensiones del formulario de contacto

Para crear el formulario necesitaremos instalar las extensiones Zem Contact Reborn y Zem Contact Lang.

Las descargaremos de este sitio: vanmelick.com/txp/ si le das Guardar como, descargarías un archivo php si solo distes clic se abriría una página solo con texto.

Selecciona y copia todo el contenido.

Nos vamos a la pestaña Administración , entramos a la sub pestaña Plugins. Ahí, encontrarás un área de texto y botón que dice Subir; ahora lo que tienes que hacer es pegar el plugin en el área de texto y dar clic en subir.

Te llevará a una página de pre visualización y das clic en el botón instalar.

Luego te lleva de regreso a la sub pestaña Plugins pero esta vez debajo del área de texto hay una tabla y ahí deberías encontrar el nombre de la extensión que acabas de instalar; por último buscas la columna que dice Activo y da clic en No para así activar la extensión.

Colocando el formulario de contacto.

Esta extensión que acabas de instalar hace uso de muchas nuevas etiquetas las cuales puedes conocer en su Ayuda y encontraras indicaciones de cómo crear formularios más complejos. La forma más sencilla de utilizarla es con la etiqueta <txp:zem_contact to="micuenta@correo.com"/> la cual publica un formulario sencillo con una etiqueta, dos campos de texto, un área de escritura y un botón.

Configuramos la etiqueta de esta manera:

<txp:zem_contact  to="micuenta@correo.com" label="Contáctanos" />

El html que produce es este:

<form method="post" id="zcrea2d6421fe00dfb7d56da83" class="zemContactForm" action="/#zcrea2d642c0e600dfb7da556da83">
	<fieldset>
		<legend>Contáctanos</legend>
		<input type="hidden" name="zem_contact_nonce" value="953f54f1a5ce6f8f394b0e01ed7" />
		<input type="hidden" name="zem_contact_form_id" value="ea22c0b2fe600fb7da6da83" />
		<label for="Name" class="zemText zemRequired Name">Name</label><br />
                <input type="text" id="Name" class="zemText zemRequired" name="Name" value="" maxlength="100" /><br />
		<label for="Email" class="zemText zemRequired Email">Email</label><br />
                <input type="text" id="Email" class="zemText zemRequired" name="Email" value="" maxlength="100" /><br />
                <label for="Message" class="zemTextarea zemRequired Message">Message</label><br />
                <textarea id="Message" class="zemTextarea zemRequired" name="Message" cols="58" rows="8"></textarea><br />
		<input type="submit" class="zemSubmit" name="zem_contact_submit" value="Send" />
	</fieldset>
</form>

Le apliqué estilos utilizando como selectores a la ID de la div que lo contiene y a las etiquetas html. Bueno buscamos en index.html lo siguiente:

<div id="form-contacto" class="gul a4">   	
      <!— Formulario de contacto —>
      <form id="dummy" action="" method="post">
        <fieldset>
      	  <legend>Contáctanos</legend>
      	  <label for="dummy0">Nombre:</label><br />
      	  <input type="text" class="title" name="dummy0" id="dummy0" value="" maxlength="100"/>        
          <label for="dummy1">Correo:</label><br />
      	  <input type="text" class="text" id="dummy1" name="dummy1" value="" maxlength="100"/>
      	  <label for="dummy2">Mensaje</label><br />
      	  <textarea name="dummy2" id="dummy2"  cols="58" rows="8"></textarea>
      	  <input type="submit" value="Enviar" />
	  <input type="reset" value="Reset" />
        </fieldset>
      </form>
</div>

Y lo sustituimos por la etiqueta:

<div id="form-contacto" class="gul a4">   	
      <!— Formulario de contacto —>
      <txp:zem_contact  to="micuenta@correo.com" label="Contáctanos" />
</div>

Con este paso hemos terminado de etiquetar todos los elementos comunes del diseño, el archivo html debe haberte quedado como en este archivo:

Plantilla base con etiquetas de Textpattern, revisa el código fuente.

Revisa si algo te hace falta y cuando lo tengas listo copia todo el código en la página Default, la guardas y luego das clic en la pestaña Ver sitio.

Como ya te habrás dado cuenta, no hemos tocado todavía lo que es el contenido ya que para que la etiqueta <txp:article/> funcione tenemos que preparar el bloque Default.

El próximo artículo

En el próximo artículo trabajaremos con bloques, veremos como se utilizan con las páginas y continuaremos trabajando en el diseño. Cualquier duda o sugerencia déjala en los comentarios.