¿WordPress? Pero si yo no quiero un blog

29/04/2013 por lostium en Trabajo

Esta es una de las respuestas con las que nos topamos con más frecuencia a la hora de explicarle a un cliente cuál va a ser el gestor de contenidos que, por nuestra parte, queremos implementar en su proyecto. Resulta harto complicado de explicar a los clientes que, WordPress, no sirve solo para crear blogs. Creednos. MUY difícil.
wordpress mola
Y como en Lostium somos parcos en palabras, pero muy de demostrar que tenemos razón, decidimos que teníamos que hacer algo para no tener que dar tantas explicaciones. A fin de cuentas, y aunque somos “flexibles como juncos y ágiles como gacelas”, preferimos trabajar con herramientas con las que nos sentimos más cómodos y sabemos que podemos exprimir a fondo, que tener que reinventar la rueda y/o formarnos en la enésima herramienta que no volveremos a ver jamás. Como gestor de contenidos configurable y “tuneable” y bajo nuestro criterio, claro está, WordPress no tiene parangón. Así que nos decidimos a utilizar WordPress en un proyecto que no tuviera nada que ver con un blog, pero sí con contenidos de otro tipo, para dejar claras las capacidades de esta plataforma. Y que somos muy cazurros, vamos, que Salamanca es parte del Reino

Y entonces surgió la necesidad de rehacer Tuitrafico. Al principio, parecía algo de locos el querer “calzar” un WordPress en un proyecto de este tipo, donde se manejan grandes volúmenes de datos, información en tiempo real y visualizaciones con mapas e interacciones complejas. Pero al poco tiempo de comenzar con el desarrollo, llegó Antonio, que es el master and commander del back-end en Lostium Project, y me suelta: “¿Pues sabes qué te digo? Que esto lo podemos hacer correr todo bajo WordPress”. Yo, ojiplático, le devuelvo la típica mirada de: “Ya, claro, con un WordPress lo hacemos en dos patadas…”.

Pero el caso es que iba en serio. Y tras algunos meses de desarrollo, siempre menos de lo que nos hubiera gustado y muchos más de los planificados, lanzamos la nueva versión de Tuitrafico ejecutándose bajo un WordPress y además haciendo la aplicación multidispositivo mediante responsive web design . Aún nos quedan muchas cosas que pulir, somos conscientes de ser un equipo muy pequeño realizando labores muy heterogéneas, y que en muchas ocasiones nos son aún muy ajenas (pero todo llegará, menudos somos…). Pero, a falta de pasar la prueba del rendimiento y la exposición pública, podemos afirmar que no podemos estar más contentos con el resultado. Y si todo sale bien, esta es solo la primera fase de un proyecto que creemos que todavía tiene mucho recorrido.

Volviendo a WordPress, en la nueva versión de Tuitrafico contamos ahora con una plataforma fácilmente extendible, donde poder añadir funcionalidades con mucha mayor rapidez y agilidad, además de una gestión de contenidos unificada desde la cual actualizar de forma dinámica prácticamente cualquier contenido que aparezca en la aplicación. ¿Los comentarios? Para eso ya existe Disqus (que además nos permite mantener copia de los mensajes en nuestra base de datos, por si mañana cambiamos de opinión). ¿La gestión multimedia? Resuelta. ¿Paginación? Resuelto. ¿Tagging y categorización? Todo eso ya nos lo da WordPress. Si además le sumamos un buen sistema de caché como W3 Total Caché y un buen plugin de backup, nos hemos ahorrado un montón de horas de desarrollo, y muchos dolores de cabeza.

¿Y cómo hemos conseguido hacer todo esto? Pues yo no lo sé muy bien, para mi es poco más que brujería. En algún momento Antonio dará explicaciones. Pero lo que sí he de decir es que, como desarrollador front y diseñador un poco torpe, las veces que he necesitado modificar algo o añadir alguna pequeña funcionalidad, no he tenido mayor problema. Me ha bastado con hacer un par de búsquedas en el Codex, y ahí estaban las respuestas y los métodos para hacer lo que necesitaba. Y si no ya estaba Antonio que me lo explicaba. Con esto quiero destacar que WordPress es ya una plataforma lo suficientemente madura y desarrollada como para haber bajado un peldaño el nivel de abstracción y “hablar” un lenguaje mucho más humano y más fácil de comprender para los que no somos ninjas del código (pero tampoco tontos). Seguro que si me oye un purista me dirá que donde esté python y una mongo-db y mimimi… que se quite el resto. Pues lo que tú quieras, para gustos los colores. Si para ti son las herramientas que te funcionan y con las que trabajas mejor, no hay discusión posible. Nuestra intención, tanto cuando la pasta sale de nuestro bolsillo como cuando lo hace de el del cliente, es poder hacer el mayor número de productos de calidad en el menor tiempo posible. Puede que PHP no sea el lenguaje más cool del momento, nada que ver con Rails, donde vamos a parar… Pero ahí lo tienes corriendo… y con WordPress.

Etiquetas:

Tecnologías que utilizamos: Bootstrap (Parte I)

04/02/2013 por lostium en Herramientas

Resulta complicado hablar de desarrollo front-end hoy en día, y no hablar de los sistemas de grid, (o rejilla en castellano, aunque suena muy raro). Básicamente consisten en sistemas con convenciones sobre número de columnas, ancho de las mismas, distribución vertical, tipografía etc. básandonos en los cuales, podremos diseñar de forma más clara, coherente y estructurada. Esto no quiere decir que resulte obligatorio su uso en todos los proyectos. Pero diríamos que casi.

Nosotros comenzamos nuestros desarrollos basados en grids con un espartano 960.gs. En aquel momento (hace 4 años como máximo), o eras de 960.gs o eras de Blueprint, no conocíamos muchas más alternativas. Bueno, también llegamos a probar 1140 CSS Grid, pero creo recordar que nunca se puso nada en producción.

Nuevas plataformas de desarrollo rápido

En la actualidad, existen frameworks mucho más completos que incorporan, además de sistemas de grid adaptables, muchas otras funcionalidades: elementos de UI, convenciones tipográficas, preprocesadores e incluso componentes Javascript como modales, alertas o entrada de datos con typeahead.

×La “biblia” sobre sistemas de grid en diseño gráfico, es “Grid Systems in Graphic Design“, escrita por Josef Müller-Brockmann, y cuya versión física sale por un pico. De modo que si lo encuentras de segunda mano, no lo dudes:
Grid systems in graphic design

Hace un año, cuando pensamos que deberíamos probar alguna de las nuevas herramientas de desarrollo rápido para front-end, existían ya un buen número de opciones con bastante buena pinta. Nosotros empezamos probando Bootstrap de Twitter en nuestros desarrollos, y aunque la versión 1.0 era algo limitada, con la versión 2.0 y la inclusión de un layout responsive de 12 columnas acabó convenciéndonos y lo hemos incorporado en prácticamente todos nuestros últimos proyectos. No existen más razones por las que preferimos Bootstrap respecto al resto. Simplemente, no llegamos a probar el resto porque rápidamente nos sentimos lo suficientemente cómodos con Bootstrap. Además, nos permitía hacer cosas que antes ni nos planteábamos.

En nuestro caso partimos siempre de maquetas en Photoshop, por lo que en la mayoría de las ocasiones prescindimos directamente de los interfaces y elementos preconstruidos, o simplemente nos apoyamos en ellos para personalizarlos según nuestras necesidades. Sin pretender convencer a nadie, lo que es innegable es que ahora contamos con interacciones mucho más robustas, y con una serie de fundamentos de partida que nos permiten ser mucho más ágiles a la hora de prototipar y pensar en la interacción con el usuario. Los tiempos de desarrollo son mucho más cortos y los resultados más sólidos y coherentes, por lo que es claro que, al menos a nosotros, nos funciona.

Alternativas a Bootstrap

Otras opciones distintas a Bootstrap, y que no descartamos probar en alguno de los próximos proyectos (a pesar de la pereza que da cuando ya limas todas las asperezas iniciales con este tipo de herramientas), sin orden de preferencia serían HTML5 Boilerplate, Foundation de Zurb y Skeleton. Cada uno tiene sus particularidades:

– De Foundation nos gusta: Los off-canvas layouts, elementos UI mucho más agnósticos y reconfigurables que los de Bootstrap y buena documentación. No nos encaja tanto el que use Sass (aunque se oyen cosas buenas de Compass, nosotros usamos LESS, y otra vez pereza) y que esté orientado a Rails (por aquí principalmente se le da al PHP).

– HTML5Boilerplate es bastante más “nerdy”. Esto es una ventaja, porque para cosas muy específicas, y que no necesiten de una UI muy compleja en el prototipado, se puede personalizar de manera manual sin la sobrecarga adicional que suponen Bootstrap o Foundation. Como inconvenientes, el no usar preprocesador y quizás la documentación y que aparentemente, tiene mayor curva de aprendizaje.

– Y Skeleton por último es quizás el más simple y limpio de todos, lo cual hace que se plantee más fácil pegarle un repaso en algún proyecto básico, porque tiene buena pinta. Sobre todo si, como es nuestro caso, todo el interfaz y el UI suele diseñarse a medida (bueno, está bien, alguna vez estamos más vaguetes o nos entra la prisa y dejamos algún formulario tal cual viene de serie, pero no suele ser lo habitual).

Haciendo un poco de investigación nos hemos encontrado con muchos más frameworks de desarrollo front que van más allá del sistema de grid. Lo más curioso de este listado es que todos los frameworks que aparecen, son ya responsive, lo cual son muy buenas noticias. Después de echar un vistazo, no tienen mala pinta Base, Less Framework y Kube de Imperavi.

×
Mientras nos poníamos un poco al día, hemos descubierto también este framework tan chulo, con una tipografía base y configuración inicial de aspecto quasi editorial y con una orientación clara a grandes pantallas (1200 px), que puede ser un buen punto de partida para proyectos muy concretos:

Amazium framework

Ventajas e inconvenientes

Las ventajas derivadas del uso de estas herramientas en conjunción con un buen preprocesador, resultan evidentes tan pronto como empiezas a utilizarlos: tiempos de prototipado y desarrollo mucho más cortos, maquetas funcionales más pulidas e interacciones más sólidas (aunque al final se acaben “tuneando”), mucha mayor coherencia en los estilos (esto en equipos grandes es fundamental)… Pero lo que destacaría por encima de todo: agilidad.

Como inconvenientes, la sobrecarga de recursos que puede suponer si no hacemos un uso razonable de todos los add-ons que se suelen incorporar a estos entornos, UIs muy reconocibles dependiendo del framework utilizado (aunque ya digo que esto no debería ser un condicionante) y la mayor o menor curva de aprendizaje, dependiendo de nuestra elección.

En la próxima entrega, que esto se nos ha ido de las manos, veremos ya un poco más a fondo Bootstrap + LESS como preprocesador y cómo los usamos nosotros para generar el front-end responsive de nuestras aplicaciones.

×
Si has probado Bootstrap antes y ahora usas algún otro framework, estaremos encantados de que nos comentes las ventajas. No somos nada talibanes de nuestras herramientas. Si algo es mejor, simplemente cambiamos.

Etiquetas: