Un entorno de desarrollo web para diseñadores

Preprocesadores, control de versiones y el uso de librerias
Un workflow para desarrollo web pensado para diseñadores

Cuando uno pasa una parte importante de su tiempo en la edición de HTML y CSS, en algún momento viene la inevitable pregunta: ¿cómo podría ser más productivo, y tal vez añadir un poco más de seguridad a mi trabajo?

Esta ha sido mi propia situación desde buen comienzo, en los tiempos en que un preprocesador no era ni siquiera una posibilidad.

Cada necesidad productiva en particular se convierte en horas de búsqueda y de pruebas. El resultado es el siguiente esquema de workflow, que recomiendo especialmente para desarrolladores de front-end o diseñadores que prefieran evitar al máximo el uso de la línea de comandos.

Antes de empezar, sólo un breve comentario sobre los editores WYSIWYG. He probado muchos, pero siempre he acabado picando código en un editor de texto. Hay dos grandes razones para esto: la limpieza de código (dry code) y visualización defectuosa. No me gusta la codificación automática porque siento que pierdo el control, y siempre se puede obtener una vista previa en el navegador, que al fin y al cabo es lo que vamos a tener que hacer antes de ir a productivo.

Así que estos son los pasos para construir un workflow para desarrollo web:

  1. Elige un buen editor. Siempre había trabajado sobre Mac. Pero ahora trabajo sobre Windows y he utilizado Notepad++ hasta que descubrí Brackets. Ambos son gratuitos y ofrecen resaltado de sintaxis para la mayoría de los lenguajes necesarios. En Brackets, el soporte de LESS o SCSS es nativo, y se pueden añadir fácilmente más a través de plug-ins. En Notepad++ se necesita un lenguaje personalizado para LESS o SCSS, pero se puede hacer el mismo trabajo. Una de las funcionalidades que destacan en Brackets, sin embargo, es que permite hacer una edición rápida del estilo CSS asociado dentro del propio documento HTML. Se abre un editor en línea que muestra agrupado todo el estilo de otros archivos para una fácil edición, que es un punto a favor de la productividad.

  2. Usa preprocesadores. Hay mucha literatura en este momento sobre esto, y también múltiples alternativas. Básicamente, un lenguaje de preproceso permite escribir código en un nivel superior, con variables, repeticiones, bucles, etc. El pequeño inconveniente es que necesitamos procesar el código para obtener el correspondiente HTML, CSS o JS, y eso significa que necesitamos un compilador. Pero la buena noticia es que podemos conseguir un buen compilador transparente por menos de 50€. Yo estoy especialmente contento con Prepros, disponible para Windows 7+, OS X 10.9+ y Ubuntu.

    • El preprocesador esencial es el de CSS, porque ahí es donde encontramos tareas más repetitivas, como los colores de elementos, dimensiones de márgenes, etc. Los más utilizados son SASS y LESS, pero también se puede utilizar STYLUS. Yo suelo usar LESS si empiezo desde cero (convirtiendo el css por fases), pero encontraremos proyectos donde SASS es la opción oficial.
    • También podemos utilizar un preprocesador para HTML, más comúnmente conocidos como lenguajes de plantilla, como HAML, SLIM o JADE. Los dos primeros fueron diseñados para completar el workflow de Ruby on Rails, ya que utilizan Ruby para la compilación. Jade está basado en node.js. Es habitual usar HAML y SASS a la vez porque ambos usan Ruby, o bien STYLUS y JADE, porque ambos están basados en node.
    • Para quienes programan en Javascript también hay un lenguaje de preprocesador, llamado CoffeScript.
    • Si utilizas PHP (como en Drupal, Wordpress ...), las herramientas equivalentes se llaman template engines (motores de diseño de plantillas). Smarty es quizás el más popular, aunque un poco anticuado. Hay múltiples alternativas más modernas, como Twig (adoptada en Drupal 8) o Mustache (el abanderado del logic-less, compilable a una larga lista de lenguajes).
  3. El control de versiones es fundamental. No podemos exponernos al riesgo de romper el código y no ser capaces de deshacer un par de pasos, y eso es especialmente así con el trabajo en equipo. Si se trata de un equipo pequeño y siempre trabajamos conectados, yo recomiendo Subversion. Podemos utilizar un repositorio en línea como Assembla, y un cliente SVN como TortoiseSVN. Eso es todo lo que necesitamos. Lo que hacemos básicamente es enviar (commit) una actualización de código cada vez que alcanzamos una etapa estable. Luego podremos volver a cualquiera de estas etapas si las cosas se tuercen. Es como mantener duplicados de la carpeta de todo el proyecto. Si el equipo es más grande y/o algunos tienen que trabajar desconectados, GIT es una mejor opción, ya que el repositorio está descentralizado.

  4. Por último, pero no menos importante, elige un framework y sigue con él, o con un grupo de ellos. En el pasado, nos dedicábamos a recopilar scripts JS o fragmentos de código según las necesidades de interfaz. Pongamos un efecto de rollover, un script de validación de formularios, o simplemente un carrusel de imágenes. Ahora no entendemos la edición web sin las librerías. JQuery es la librería JS más extendida para diseño web, y encima de ella hemos aprendido a usar lo que llamamos un framework CSS (como Bootstrap, Foundation, Skeleton ...). Estos se encargan de la mayor parte de la interfaz de usuario, añadiendo estructuras básicas como un sistema de retícula adaptable (responsive) y dar un estilo coherente a una serie de elementos de interfaz como botones, tablas, formularios, destacados, etc. También utilizamos librerías para la gestión de tipografías e iconos, la consistencia entre navegadores, la impresión, etc. La razón de mantenerse fiel a un framework particular es que implican una cierta curva de aprendizaje, ya que conviene estar bastante familiarizado con la estructura y nomenclatura.

Una vez familiarizado con cada componente, uno empieza a sentir la dulce brisa de la creatividad, a recuperar el control del tiempo. El diseño de plantillas y páginas será un nuevo desafío lleno de alicientes, en definitiva desatando de nuevo la bestia productiva que uno fue.

Resumiendo, después de una larga búsqueda y tras mucho probar, mi propio flujo de trabajo inicial incluía básicamente estos lenguajes: LESS o SCSS y SLIM, estas herramientas: Brackets, Prepros y TortoiseSVN, y como framework usaba sobre todo Bootstrap 3. Si necesitáis más datos podéis escribirme y estaré encantado de compartir mis razonamientos.

En el segundo artículo de esta serie buscaremos una mayor flexibilidad y productividad.

PD. Consigue un segundo monitor. No volverás a trabajar con uno.