5.01.09
Textpattern: Introducción al Sistema de Plantillas
por: Luis Flores
Nota: Llevo ratos con las ganas de escribir un artículo sobre Textpattern y creo que el ver tanto artículo sobre Wordpress me ha animado. Este artículo va dirigido a a personas que ya tienen una idea de como funciona el HTML / XHTML y el CSS.
Nota 2: Este artículo fue escrito antes de que saliera la version 4.0.8, en esta nueva versión la traducción a español se refiere a los formularios como “bloques”
Textpattern es un Sistema de gestión de contenido o en palabras más claras, es un programa que se instala en un servidor web y que permite y facilita la creación y administración de un sitio web. Con los meses que llevo trabajando con este sistema, me ha demostrado que es fácil de aprender, fácil de utilizar y confiable.
El sistema de plantillas —no confundan con la interface— funciona con 3 elementos principales, estos son: HTML/XHTML, las etiquetas propias de Textpattern y el CSS. Sí, es necesario aprenderse un nuevo grupo de etiquetas pero por suerte existe bastante y muy buena documentación.
Pero antes quiero hablar sobre la interface ya que es donde se realiza todo el trabajo.
La Interface
La interface de Textpattern está primeramente divida en 4 secciones:
- Contenido.
- Presentación.
- Administración.
- Extensiones.
Me voy a enfocar en la sección de Presentación ya que es con la cual se maneja el sistema de plantillas.
La sección Presentación esta a su vez dividida en 4 secciones:
- Secciones: Se crean y administran las secciones en las que está estructurado el sitio, en el caso de Armatoste.net son secciones las páginas Inicio, Archivo y Contáctame. Aquí puedes asociar cada sección con su página respectiva, es decir si quieres un diseño específico para la sección Archivo, puedes asociarla con la página/plantilla específica para esta sección que has creado en la sección Páginas.
- Páginas: En esta sección se crean y guardan las plantillas. Consiste en una area de texto donde insertas el XHTML/JS/PHP necesario para crear el diseño de tu sitio. Puedes crear todas las plantillas que quieras.
- Formularios: Aquí se crean y guardan pedazos de código sea XHTML/JS/PHP para ser utilizados en las plantillas. Es tu elección si quieres usar algun formulario pero ya digo que son bastante convenientes.
- Estilos: Aquí se crean y guardan las hojas de estilo CSS. Consiste en una area de texto donde escribes y administras las hojas CSS de tu sitio. Puedes crear todas las hojas que quieras.
Las Etiquetas
El sistema de etiquetado que Textpattern utiliza, se desarrollo con la idea de que el usuario final solo debe utilizar etiquetas de XHTML y CSS para para la creación del sitio; por esto, las etiquetas propias de Textpattern tienen una estructura idéntica a las etiquetas de XHTML.
Etiqueta de Textpattern:
<txp:nombre atributo=“valor” />
Etiqueta de XHTML:
<nombre atributo=“valor” />
Existen tres tipos de etiquetas:
Las etiquetas sencillas
La mayoría de las etiquetas de Textpattern son de este tipo, se cierran sin necesidad de utilizar una etiqueta de cierre, se utilizan para publicar contenido. por ejemplo:
<txp:article />
<txp:page_title />
<txp:linklist />
Algunas aceptan atributos de la misma forma que las etiquetas de XHTML
<txp:article limit=“10”/>
<txp:linklist category=“blogroll”/>
Y pueden ser utilizadas dentro de las etiquetas contenedoras.
Las etiquetas contenedoras
Las etiquetas contenedoras consisten en una etiqueta de apertura y una etiqueta cierrre, se utilizan cuando en es necesario aplicar una función a un contenido.
<txp:permlink>Este es una oración</txp:permlink>
<txp:permlink><txp:site_name /></txp:permlink>
Las etiquetas condicionales
Las etiqueta condicionales permiten utilizar una misma plantilla para mostrar de manera diferente la información, por ejemplo si un autor específico escribió un artículo podemos hacer que se publique con diferente formato al utilizado normalmente. Algunas etiquetas condicionales tienen la función “else” que permite realizar otra función si la condición solicitada no se cumple.
<txp:if_article_author name=“the-wizard”>
<txp:article form=“wizard-form” />
<txp:else />
<txp:article />
</txp:if_article_author>
Utilizando etiquetas sencillas
Ahora veamos un ejemplo sencillo de como se utilizan estas etiquetas dentro del HTML/XHTML. Supongamos que queremos crear una listado de los cinco artículos más recientes en una sección dentro de una etiqueta <div></div>:
<div>
<txp:recent_articles section=“fotografia” label=“Fotografía” limit=“5” />
</div>
O veamos dentro de una tabla:
<table>
<tr>
<td>
<txp:recent_articles section=“fotografia” label=“Fotografía” limit=“5” />
</td>
</tr>
</table>
Como pueden ver, a la etiqueta txp:recent_articles le he asignado 3 atributos:
- section: Aqui escribes el nombre de la sección donde se encuentran los artículos que quieres enlazar.
- label: Aquí escribes el título de esta lista si es que quieres.
- limit: Aquí asignas cuantos elementos quieres.
La etiqueta posee más atributos que dan más control sobre la lista pero por hoy no vienen al caso. Pueden ver el resultado más abajo, en el cuadro Artículos recientes coloqué cuatro etiquetas de este tipo cada una llamando a una sección diferente1.
Veamos otro ejemplo donde enlazamos una hoja de estilo CSS que hemos creado dentro de Textpattern con una plantilla:
<head>
<txp:css n=“estilos_comentarios” format=“link” />
</head>
Pueden ver que utilizar estas etiquetas es simplemente un proceso de escribir HTML/XHTML y rellenar con las etiquetas de Textpattern, lo “difícil” queda en averiguarse cuales son las etiquetas que se utilizan pero pueden encontrar el listado completo en la documentación.
Los formularios
Esta es una característica que me gusta bastante y bien podría decir que es mi favorita; estos “formularios” son pedazos de código HTML/XHTML/JS/PHP que se guardan como notas dentro de Textpattern, el usuario les asigna un nombre y pueden ser llamadas a la plantilla por medio de una simple etiqueta. Por ejemplo, la etiqueta <body></body> de la plantilla de armatoste.net se ve dentro del editor de esta manera:
<body>
<txp:output_form form=“TMPLTgooglesignup” />
<txp:output_form form=“TMPLTmenu” />
<txp:output_form form=“TMPLTnube” />
<txp:output_form form=“TMPLTfuentesbusca” />
<txp:output_form form=“TMPLTcontenido” />
<txp:output_form form=“TMPLTrecientes” />
<txp:output_form form=“TMPLTflickr” />
<txp:output_form form=“TMPLTmultimedia” />
<txp:output_form form=“TMPLTbotones” />
<txp:output_form form=“TMPLTpie” />
<txp:output_form form=“TMPLTanalytics” />
</body>
Cada etiqueta <txp:output_form form=“nombre” /> como han de suponer es un formulario. Ahora veamos que hay dentro del formulario TMPLTmenu:
<div id=“menu”>
<a href=“http://armatoste.net”>Inicio</a> | <a href=“http://www.flickr.com/photos/armatoste/”>Galería</a> |<a href=“http://armatoste.net/archivo”>Archivo</a> | <a href=“http://armatoste.net/contacto”>Contáctame</a>
</div>
Cuando Textpattern encuentra una etiqueta <txp:output_form form=“nombre” /> entiende que debe mostrarle al navegador web el código que el formulario contiene. Las ventajas de este sistema de formularios es que permite encontrar y editar más rápido cualquier parte de la plantilla; también solo es necesario que modifique una vez al formulario ya que el cambio se reproducirá en todas las plantillas que lo contengan.
Conclusión
EL sistema de plantillas de Textpattern puede parecer algo complicado al principio sin embargo una vez entendida la mecánica de las etiquetas y de los formularios, crear el diseño de un sitio se vuelve considerablemente fácil. En fín espero que este artículo sea útil para aquellas personas que quieran utilizar a Textpattern para sus proyectos web.
Enlaces
Textpattern.com: Sitio oficial.
Textbook: La documentación de Textpattern.
TXPTips: Blog con consejos y tutoriales de Textpattern.
WeLoveTXP: Galería de sitios realizados con Textpattern.
1 Este comentario se refiere al diseño anterior de armatoste.net ya que para el diseño actual no aplica.
Fernando el 19 de abril, 2009 dijo:
Muy buen post. Estoy incursionado con el TextPattern.
Saludos