Cultura Digital#Blog (Secciones)

Componentes

Componentes principales del desarrollo TemplateBase.

Componentes

Los componentes principales son:

Un servidor estático y Minify (Optimización).
Un framework CSS y una plantilla maestra XHTML (Estructura base).
Un miniCMS basado en MVC: adaptando los controladores del sistema a las nuevas vistas, quedando el modelo del sistema dónde se monte intacto.

Ejemplo

La idea es obtener unas plantillas del tipo:

	<div class="postData">
		<h4><span class="capital">A</span>cerca de esta entrada</h4>
 
		<p><?php echo $About; ?><br />
		<?php echo $EditLink; ?></p>
 
		<p><strong>Etiquetas</strong> <img src="images/Comunes/icons/tag.png" alt="Etiquetas" /> <?php echo $Tags; ?><br />
		<strong>Revisada</strong> <img src="images/Comunes/icons/votaOk.png" alt="Ok" width="10px" /> <span class="code"><?php echo $RevisionDate; ?></span></p>
	</div>

A las que se le pasen unos parámetros genéricos, con los condicionales y estructuras de control mínimos, que puedan ser gestionadas por cualquier sistema y, sobre todo, editadas por cualquier maquetador XHTML independientemente de sus conocimientos en lenguajes de servidor, que es precisamente de lo que se trata.

Con referencia a «Zend Framework», las plantillas se cargarán a través de vistas que gestionarán y les pasarán los parámetros obtenidos de los controladores del sistema. En Wordpress por ejemplo los controladores son: single, index, page, search…

Por lo tanto, dichas vistas serán las encargadas de obtener el modelo dependiente del sistema: Wordpress, Drupal… a través de los controladores. Algo así para un ejemplo con Wordpress:

	/**
	 * Vista que gestiona la plantilla About en entradas (post o páginas)
	 *
	 * @package Wordpress
	 * @subpackage TemplateBase
	 * @category Views
	 * @version 0.1a
	 * @since 0.1a
	 * @uses TemplateBaseClass.php|loadTemplate|TemplateBase::loadTemplate
	 * 
	 * @return string class::loadTemplate Html de la plantilla cargada.
	 */
	protected function entryAbout() {
		// Datos a pasar a la plantilla:
		$templateData = array();
 
		// About:
		$postDataText = 'Est&aacute;s leyendo &laquo;<em class="sans_small">%1$s</em>&raquo;, una entrada publicada el %2$s.';
		$postDataTitle = get_the_title();
		$postDataDate = get_the_time(__('l, j \d\e F \d\e Y'));
 
		$templateData['About'] = sprintf($postDataText, $postDataTitle, $postDataDate);
 
		// Edit link:
		$templateData['EditLink'] = current_user_can('edit_post') 
		? '[<a href="' . get_edit_post_link() . '" title="Editar">Editar</a>]' 
		: '';
 
		// Etiquetas:
		$templateData['Tags'] = get_the_tag_list(' ', ', ');
 
		// Fecha última edición:
		$templateData['RevisionDate'] = date('d/m/Y H:i:s', get_post_modified_time('U'));
 
		// Load Template:
		return parent::loadTemplate(__FUNCTION__, $templateData);
	}

* Por comodidad llamo a las plantillas como las vistas para que el método loadTemplate sea estándar en vista, por ejemplo, a una abstracción mayor, en la que loadView sea simplemente un «bootstrap» para vistas independientes y sus plantillas.
Así, simplemente, debería bastar con incluir las vistas en los controladores del sistema en concreto, para obtener los parámetros deseados quedando las plantillas intactas. Obviamente, es muy a grosso modo.

Por último, los controladores reales del sistema pueden quedar tan limpios como:

get_header(); echo "\n"; ?>
	<!--Contenido Principal: post (mainContent)-->
	<div id="mainContent" <?php post_class(); ?>>
		<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 
			<?php $TemplateBase->loadView('entryHead'); ?>
			<?php $TemplateBase->loadView('entryContent'); ?>
			<?php $TemplateBase->loadView('entryAboutAuthor'); ?>
			<?php $TemplateBase->loadView('entryPostData'); ?>
 
		<?php endwhile; else: ?>
 
		<!-- post_text -->
		<div class="postText entry">
			<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
		</div>
		<!--/end postText -->
 
		<?php endif; ?>
 
	</div>
	<!--/end post-->

Funcionalidad

Lo que consigues quizá pueda parecer reinventar la rueda, pero si uno ya se siente cómodo con ello, y si se piensa bien, las modificaciones son mínimas si lo comparas por ejemplo con hacer un template nuevo para un sistema.

Se ha de pensar que las vistas son vistas más o menos estándares, ya sea un blog o un carrito de compra. Si lo vemos como items que es lo que en realidad suelen ser los resultados devueltos. Normalmente tendrás un loop de items, una sección detallada del item… ya sea un artículo, una página, un autor, un usuario… un producto.

Debería ser tán fácil como ir a la vista en cuestión y cambiar los parámetros que vuelcan los resultados por los del sistema en uso:

wp_list_pages()
foreach ( $primary_links as $link ) :

…básicamente, suele ser lo mismo.

De esta forma, tienes una plantilla base en la que puedes editar cómodamente las plantillas Html olvidándote de cosas tan sucias como éste controlador por ejemplo:

index.php de default.php en Wordpress

<div id="content" class="narrowcolumn">
 
	<?php if (have_posts()) : ?>
 
		<?php while (have_posts()) : the_post(); ?>
 
			<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
				<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf(__('Permanent Link to %s', 'kubrick'), the_title_attribute('echo=0')); ?>"><?php the_title(); ?></a></h2>
				<small><?php the_time(__('F jS, Y', 'kubrick')) ?> <!-- by <?php the_author() ?> --></small>
 
				<div class="entry">
					<?php the_content(__('Read the rest of this entry &raquo;', 'kubrick')); ?>
				</div>
 
				<p class="postmetadata"><?php the_tags(__('Tags:', 'kubrick') . ' ', ', ', '<br />'); ?> <?php printf(__('Posted in %s', 'kubrick'), get_the_category_list(', ')); ?> | <?php edit_post_link(__('Edit', 'kubrick'), '', ' | '); ?>  <?php comments_popup_link(__('No Comments &#187;', 'kubrick'), __('1 Comment &#187;', 'kubrick'), __('% Comments &#187;', 'kubrick'), '', __('Comments Closed', 'kubrick') ); ?></p>
			</div>
 
		<?php endwhile; ?>

y mezclar tantas salidas PHP y XHTML como suele llevar Wordpress.
En mi opinión, me siento mucho más cómodo con el ejemplo anterior …y si me apuras puedes aplicar hasta tu propio loop:

$TemplateBase->entriesLoop();

abstrayendo totalmente el controlador y quitar cualquier tag xhtml dejando el esqueleto básico.
…pero es, al igual que otras cosillas, rizar el rizo porque para funciones simples de Wordpress -en este caso- se pueden aplicar directamente y, por supuesto, es personalizable.

La cuestión es no tener ese popurri de echoes y xhtml. Porque lo cierto es que, poco a poco y es una pena, Wordpress me va recordando más a PHP-Nuke :(
Aunque… hay una corriente en los foros que apuesta por MVC real. Y según se va viendo el desarrollo es posible que tengamos algo parecido a esto pronto. Quizá en una 3.0 ^^!

Notas

Quizá faltaría, de hecho sería muy necesario, estandarizar los nombres. Estos ejemplos son demasiado dirigidos a Wordpress.

Por último, un detalle más que considero importante en cuanto a Wordpress. Si bien esta puede ser una forma genérica de montarte un sistema de plantillas base, Wordpress da muchísimo juego, y claridad y limpieza, usando widgets en tus themes. Digamos que son los módulos quizá de otros sistemas.
Así, con un template en dónde establezcas widgets para casi cualquier estructura de tu plantilla, la facilidad de edición y modificación va a ser enorme.

Por ejemplo, imagina todas estas sidebars:

$sidebars = array(
	// Globales:
	array('name' => 'All breadcrumb', ), 
	array('name' => 'All footer', ), 
	// Home:
	array('name' => 'Home Tabs', ), 
	array('name' => 'Home mainNav', ), 
	array('name' => 'Home secondaryContent', ), 
	array('name' => 'Home after primaryContent', ), 
	// Posts:
	array('name' => 'Post mainNav', ), 
	array('name' => 'Post secondaryContent'), 
	// Páginas:
	array('name' => 'Page mainNav', ), 
	array('name' => 'Page secondaryContent'), 
	// Archivos
	array('name' => 'Archive mainNav', ), 
);

Más tarde solo tendrás que arrastrar y soltar los widgets que quieras a lugar exacto de tu plantilla, obviamente, que antes habrás editado para mostrar la sidebar en cuestión. Un widget -o incluso multiwidgets-, sin controles, no es muy difícil montarlos y puede ser incluso simple texto ^^!
Se puede hacer auténticas birguerías ;)