Basilio.

Objetivos

• Saber qué son y como funcionan
• Conocer cuáles son las ventajas de su utilización
• Como aprovechar al máximo sus características
• Implementar un par de ejemplos

Los sidebars son las columnas de WordPress en las cuales podemos organizar y mostrar nuestros widgets. Para crear nuevos sidebars, estos deben registrarse como variables en el entorno, de este modo:

$sidebar_name = 'Sidebar 1';
register_sidebar(array(
	'name' => $sidebar_name,
	'before_widget' => '<div id="%1$s" class="%2$s">',
	'after_widget' => '</div>',
	'before_title' => '<h3>',
	'after_title' => '</h3>',
));

O también registrando varios a la vez:

register_sidebars(3, array('name'=>'Sidebar %d'));

Si necesitas crear nuevas columnas para cada sección de tu sitio, puedes hacerlo dinámicamente utilizando los ítems declarados en el menú. Por ejemplo, tenemos creado un menú llamado “Navigation” en el que están todas las secciones de nuestro sitio web:

Entonces, podemos traer los ítems de este menú y crear los sidebars que necesitamos:

// functions.php
$menu_name = "Navigation";
$navigation_items = wp_get_nav_menu_items($menu_name);
if(!empty($navigation_items)){
	// sort
	foreach($navigation_items as $item){
		$sidebar_name = $item->title;
		register_sidebar(array(
			'name' => $sidebar_name,
			'before_widget' => '<div id="%1$s" class="%2$s">',
			'after_widget' => '</div>',
			'before_title' => '<h3>',
			'after_title' => '</h3>',
		));
	}
}

Lo que genera un sidebar para cada ítem del menú escogido:

Algo que siempre debes tener en cuenta al trabajar con sidebars, es que no existe una relación directa entre estos y sus widgets, sino que se relacionan por el orden en que fueron registrados. Por ejemplo: si un widget esta incluído en el segundo sidebar, y luego se registra otra columna antes que este, entonces el widget quedará incluído en el segundo sidebar, aunque no sea el mismo en el que fue colocado. En este caso, si cambiamos el orden de los ítems en el menú principal, esto puede cambiar la posición de los widgets respecto de las columnas. Un modo de resolverlo es ordenar por ID los items obtenidos del menú, antes de hacer el registro.

$menu_name = "Navigation";
$navigation_items = wp_get_nav_menu_items($menu_name);
if(!empty($navigation_items)){
	$order_items = array();
	foreach ($navigation_items as $key => $row){
		$order_items[$key] = $row->ID;
	}
	array_multisort($order_items, SORT_DESC, $navigation_items);
	foreach($navigation_items as $item){
		// Comenzar registro de cada sidebar
	}
}

Por último, para aplicar este distingo en nuestra web, necesitamos condicionar los sidebars para mostrar sólo el que corresponda dependiendo de la sección en la que nos encontremos:

// sidebar.php
if ( function_exists("dynamic_sidebar") ) {
	$menu_name = "Navigation";
	$navigation_items = wp_get_nav_menu_items($menu_name);
	if(!empty($navigation_items)){
		global $post;
		foreach($navigation_items as $item){
			// Si es página actual o página inferior
			if( $item->object == 'page' && ( is_page($item->object_id) || in_array( $item->object_id, get_post_ancestors($post) ) ) ):
				dynamic_sidebar($item->title);
			// Si es categoría o entrada de una categoría
			elseif( $item->object == 'category' && ( is_category( $item->object_id ) || ( is_single() && in_category( $item->object_id, $post->ID ) ) ) ):
				dynamic_sidebar($item->title);
			// Si es custom item
			elseif( $item->object == 'custom' && strpos( $item->url, $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'] ) ):
				dynamic_sidebar($item->title);
			endif;
		}
	}
}

Estas son algunas buenas prácticas y tips que me parecen relevantes de resaltar para quieres recién comienzan en el diseño orientado a web.

Siempre Wireframes antes de Diseño Visual

Los wireframes son representaciones esquemáticas de una página, a través de los cuales se piensan y diseñan las jerarquías de los contenidos e interacciones de las distintas secciones, sin el ruido ni la emocionalidad del diseño visual. Ya sean bocetos en papel o piezas más elaboradas, esta práctica permite ahorrar mucho tiempo de producción y correcciones posteriores.

Utilizar la herramienta adecuada: Fireworks

En todo oficio siempre es fundamental trabajar con las herramientas apropiadas, lo que nos permite ahorrar tiempo y obtener mejores resultados. Podemos excavar un agujero en la tierra con una cuchara, o tomar sopa con una pala, pero ninguna de las dos opciones es obviamente la mejor. Adobe Fireworks es una software de edición de imagen creado para el diseño orientado a web, con muchas ventajas comparativas en relación a su competencia natural, Photoshop.

Navegar y buscar inspiración

Creer que un buen diseño debe ser obra y gracia de nuestra pura imaginación, sin ningún tipo de influencia es algo irreal y torpe. Es necesario ver como lo hacen los demás para tener un buen juicio y saber que es lo adecuado y que no. Buscar ideas sobre como resolver un ícono o como se muestra una tabla de precios puede ahorrar mucho tiempo y permite llegar a una solución más certera, entre los ejemplos vistos y lo que aportamos nosotros.

No olvidar los feedbacks visuales

Aunque nuestros diseños son imágenes planas, la interacción final del usuario con el sitio no lo puede ser, por lo que siempre hay que tener en cuenta el diseño de todos los feedbacks que se necesiten. El ejemplo clásico es pensar que sucede cuando el usuario pasa encima de un botón o un link de la navegación, ¿se oscurece o se aclara?, ¿es subrayado o no? Algo debe suceder que indique que se esta en un elemento de hipervínculo. Otras cosas que también hay que considerar son los mensajes de error en formularios, diseño de  loadings y notificaciones para acciones que ocurren con AJAX, e incluso, cuales son los tipos de efectos que se deben usar para esconder o mostrar contenidos.

Ser cautelosos en el uso de fuentes no seguras

Esto tiene que ver con una problemática técnica, pero que los diseñadores DEBEN conocer.
Debido a temas de copyright, los distintos sistemas operativos (windows, osx y linux) siempre han contado con un stock limitado y bastante distinto de tipografías que vienen instaladas por defecto, lo que ha hecho que tengamos que basarnos en las fuentes seguras (web-safe fonts) para asegurar que nuestro diseño se vea igual para todos los usuarios. Con el tiempo han aparecido nuevas técnicas que han permitido ir sorteando estas dificultades. La más popular es el @font-face en CSS que permite adjuntar las tipografías en nuestros estilos, sin necesidad de que este instalada en el ordenador del usuario. Sin embargo, como la mayoría de las fuentes conocidas son propiedad intelectual, existen ciertos resquicios que podrían hacer que los demanden por usarlas de este modo (aunque las hayan comprado) debido a que con esta técnica cualquiera que navega en el sitio puede descargar la fuente. Otro modo de solucionar el dilema es usar un intermediario que convierta los textos en imágenes o embeds, usando las fuentes que escogimos para el diseño. Puede ser un buen método, pero hay que considerar que el peso de nuestro sitio se verá incrementado, debido a la generación de este recurso. Lo mismo si usamos imágenes fijas para reemplazar textos conocidos.

Pensar las jerarquías y estilos de todos los elementos HTML básicos

Esta es una práctica muy útil y necesaria cuando se trabaja en un proyecto tipo CMS, donde son otros los que ingresarán los contenidos del sitio, probablemente a través de sistema de editores de texto web  (tipo Word) como TinyMCE. Por ejemplo, diseño de listas ordenadas o no ordenadas (ol, ul) e incluso como se anidan. También como se vería las citas y bloques de citas (q, cites, blockquotes) o diseñar la estructura de headings (h1-h6) para que ninguno de estos elementos se pierda en el contraste con el resto del contenido. Incluso planear como se deberían ver los elementos menos comunes como listas de definición (dl), elementos de teclado (kbd), abreviaciones y acrónimos (abbr, acronym), etc. Esto implica tener conocimientos básicos de HTML, lo que me parece que ayuda bastante para que puedan entender como se construye lo que diseñan.

Una de las tareas que habitualmente tenemos quienes desarrollamos sitios sobre WordPress, es dar las explicaciones necesarias de porque usar esta herramienta para el desarrollo de un proyecto, si cumple con los innumerables requerimientos que los clientes demandan, o cuales son las ventajas comparativas sobre Drupal, Joomla, Movable Type, ExpressionEngine o cualquier CMS gratuito o de pago que exista en el mercado. Es evidente que este no es un tema menor a la hora de pensar un proyecto nuevo o rehacer uno existente, basta con buscar en Google: WordPress vs para encontrar una buena cantidad de artículos, argumentando porque esta herramienta es mejor o peor que las otras opciones.

Más allá de las comparaciones puntuales, es importante saber distinguir cuales son los aspectos de WordPress que le dan valor a los proyectos desarrollados sobre él, y que pueden ser importantes como argumentos de venta. Desde mi punto de vista, existen 3 rasgos fundamentales: experiencia de uso, desarrollo extensible y la comunidad.

La experiencia de uso es uno de los puntos claves en el éxito de la herramienta. Desde la rápida y sencilla instalación, una diagramación clara y bien jerarquizada, instalación y upgrade automáticos de plugins y themes, y por supuesto, un diseño e interacciones que han ido mejorando bastante con los años; todo esta pensado para generar una muy buena experiencia en el usuario del sistema. Pero además de estas características nativas, existen ciertos aspectos que tienen que ver con el desarrollo de nuevas funcionalidades. Por ejemplo, cuando se crean entradas o páginas es posible agregar información adicional a través de los campos llamados Custom Fields. Sin embargo, el uso básico de esta función es muy poco amigable, por lo que siempre es recomendable desarrollar Custom Meta boxes específicos para cada grupo de datos. Así, el usuario final del sitio, que probablemente no seremos nosotros, tendrá un trabajo más agradable y obviamente valorará más la herramienta.

Extensibilidad es un principio del diseño de sistemas donde una aplicación toma en cuenta su crecimiento futuro. Es una medida sistemática de la capacidad de extender un sistema y el nivel de esfuerzo requerido para implementar la extensión. El desarrollo extensible es parte de las filosofías básicas de WordPress:

WordPress is infinitely extensible. One of the core philosophies of WordPress is to keep the core code as light and fast as possible but to provide a rich framework for the huge community to expand what WordPress can do, limited only by their imagination.  (WordPress Extend)

El sistema posee una serie de métodos bien documentados que permiten extender casi sin límites el desarrollo sobre WordPress. Por ejemplo:

• Las más conocidas y comunes: Plugins para agregar  nuevas funciones específicas y Themes para customizar el estilo de nuestros sitios.
  
• El uso de Filters y Actions para intervenir una gran cantidad de funciones y eventos generados en el core.
• La sencilla forma de creación y registro de Widgets.
• La localización a distintos Lenguajes, permitiendo también generar nuestras propias versiones.
• El reciente desarrollo de los Custom Posts y Custom Taxonomies, que permiten generar arquitecturas más precisas y mejor gestionados.

La enorme comunidad alrededor de WordPress es un reflejo del éxito que ha alcanzado y, además, una gran ventaja al momento de resolver dudas y querer aprender más. Existen millones de usuarios y desarrolladores entusiastas en todo el mundo, aportando contenidos en sus bitácoras personales o en sitios especializados,  participando en foros o cadenas de correos. Si necesitas integrar WordPress con algún servicio poco usado, o través de un protocolo desconocido, es muy probable que alguien haya desarrollado un plugin para hacer lo que necesitas. Otro punto importante es la detección de bugs. Dentro de una aplicación este proceso es siempre una tarea compleja, necesitas de muchos usuarios tester reales en busca de eventuales errores. En WordPress, cualquier usuario puede reportar bugs obtenidos a través de su propia experiencia, ayudando a que el sistema sea cada vez más seguro y de mejor calidad.