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.
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.
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.
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.
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.
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:
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.
]]>
El Viernes 30 de Julio liberamos en Ayerviernes uno de los proyectos más complejos y demandantes que nos ha tocado afrontar: Clerk, un sistema web-based para gestionar hoteles. Es difícil calcular el tiempo que ha transcurrido entre el sueño inicial que tuvo Jorge de tener una herramienta que le permitiera administrar su hotel sin depender de un proveedor de software de escritorio, al nervio y las ansias que teníamos todos de lanzar este proyecto que tanto nos ha costado.
Y es que pensar y realizar un proyecto propio, para un equipo que se dedica a pensar y realizar los proyectos de los demás es realmente complicado. Las metodologías que siempre aplicas para cada trabajo parecieran ser poco necesarias y toda planificación para llevarlo a cabo suele verse entorpecida o simplemente quedar de lado por los compromisos y las urgencias de los otros proyectos. A su vez, la autoexigencia por hacer el producto más bello, usable y 2.0 de todos también juega en contra y quedas en el limbo de los bugs y las mejoras, corregir lo eternamente corregible.
Pero a pesar de las complicaciones, ningún otro esfuerzo deja más aprendizajes y es más gratificante que el que se realiza en los proyectos propios. Me parece que Clerk es uno de los mejores productos que hemos creado en AyerViernes, una aplicación a nivel mundial. Pero además es uno de los que más sentido de compromiso, pertinencia y felicidad ha generado en el equipo.

WordPress trae integrado dentro de sus archivos la librería MagspieRSS, parseador de RSS en PHP que nos permite trabajar con ella invocándola desde cualquier función:
if (!function_exists('MagpieRSS')) {
include_once (ABSPATH . WPINC . '/rss-functions.php');
error_reporting(E_ERROR);
}
$rss = @ fetch_rss($_GET["url_rss"]);
La condición evita volver a llamar a la librería, en caso de que este siendo ocupada. Luego podemos contruir una función para descomponer el array, obteniendo una cantidad determinada de items:
function get_rss($url, $cantidad){
if (!function_exists('MagpieRSS')) {
include_once (ABSPATH . WPINC . '/rss-functions.php');
error_reporting(E_ERROR);
}
$rss = @ fetch_rss($url);
if ($rss) {
$items = array_slice($rss->items, 0, $cantidad);
$out .= '<ul>';
foreach($items as $item){
$date = date("d.m.y",strtotime($item['pubdate']));
$out .= '<li><span class="date">'.$date.'</span><br /><a href="'.$item['link'].'" title="'.$item['title'].'" rel="External Follow">'.$item['title'].'</a></li>';
}
$out .= '</ul>';
}
return $out;
}
Por supuesto, siempre puedes conocer la información de la variable $rss a traves de un simple print_r($rss), y así elegir entre los items los valores que necesites mostrar.
]]>