Lenguajes para prototipado: Jade

El diseño de experiencia de usuario es, por necesidad, una labor colaborativa y multidisciplinaria. Si decimos que ‘todos somos diseñadores’, ¿por qué no todos podemos también aportar código?

Un equipo que realiza diseño centrado en el usuario debe de contar entre sus miembros con al menos un diseñador que materialize la parte visual del proyecto y un programador que realice la ejecución técnica.

Aunque todavía hay empresas que continúan en la búsqueda del mítico Unicornio de UXuna rara criatura, mitad diseñador y mitad programador-, para la mayoría de los equipos de UX uno de los principales retos es lograr que sus miembros puedan trabajar y comunicarse de una manera coherente.

En el caso de la relaProgramando en HTMLción del dúo diseñador / programador, uno de sus principales problemas es la capacidad de cada uno de generar código útil para producción, y es un problema porque la mayor parte de esa responsabilidad normalmente cae en el programador, que debe lidear con la complejidad de volver tangible una visión de diseño que surge de bocetos en papel, dibujos en un programa de diseño o en el mejor caso, de un prototipo cuyo código no es reutilizable.

Éste es en parte, un problema creado en parte por la formación de los diseñadores a los que les hacen creer que escribir código es algo complejo y en parte por la falta de herramientas correctas para diseñar código usable. Hay una larga lista de programas de diseño WYSIWYG (What you see is what you get – Lo que ves es lo que obtienes) que ofuscan el código para que el diseñador no lo vea, pero que al final producen código poco eficiente y complejo que el diseñador que lo hizo no puede entender y que para integrarlo a un producto real requiere retoques del programador que deberá darle mantenimiento en lo sucesivo.

Lo que ves es lo que quieres decir

Una buena práctica de desarrollo es la separación en capas de los componentes de presentación, contenido y lógica para asignar responsables a cada una y después integrarlos; así la actualización de una capa por mantenimiento no obliga a las otras a cambiar a menos que cambien los requerimientos del proyecto.

El desarrollo para web en el navegador está diseñado de esta manera, dejando el contenido a HTML, la presentación de CSS y la lógica de la aplicación a Javascript. Idealmente la generación de HTML y CSS debería ser lo suficientemente sencilla para el diseñador de manera que pudiera enfocarse en qué está haciendo, y no en cómo lo está haciendo.

Estructura de una página web con HTML, CSS y Javascript en archivos separados
Estructura de una página web con HTML, CSS y Javascript en archivos separados

Para lograr eso es necesario dejar los generadores de código visuales WYSIWYG por el modelo WYSIWYM (What you see is what you mean – Lo que ves es lo que quieres decir). En este modelo el diseñador se encarga de introducir el contenido de forma estructurada siguiendo su valor semántico en lugar de indicar su formato de representación final.

Jade – un lenguaje sencillo para plantillas web

Logo de JadeUna herramienta que puede servir justo a este propósito es Jade, un sistema para generación de plantillas HTML hecho para trabajar con NodeJS y que puede usarse como lenguaje para prototipado.

Jade utiliza un metalenguaje -casi mecanografía- basado en la notación de HTML que ha sido simplificado para ser breve, consciso y fácil de recordar.

Este es un ejemplo de una página web escrita en Jade:

doctype html
html(lang="es")
  head
    title Jade
  body
    h1 Jade - sistema de plantillas para Node
    #container.col
      if youAreUsingJade
        p ¡Gracias por usar Jade!
      else
        p Deberías usar Jade
      p.
        Jade es un lenguaje de plantillas práctico y simple 
        enfocado en tener buen desempeño y características poderosas.

que genera el siguiente código HTML:

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Jade</title>
  </head>
  <body>
    <h1>Jade - sistema de plantillas para Node</h1>
    <div id="container" class="col">
      <p>¡Gracias por usar Jade!</p>
      <p>
        Jade es un lenguaje de plantillas práctico y simple enfocado en tener un buen desempeño y características poderosas.
      </p>
    </div>
  </body>
</html>

Es así de simple.

Jade se encarga de generar código HTML bien formado. En un ejemplo para generar una lista numerada escribimos:

ol
 li Elemento A
 li Elemento B
 li Elemento C

que genera en HTML:

<ol>
      <li>Elemento A</li>
      <li>Elemento B</li>
      <li>Elemento C</li>
</ol>

Jade también pueden utilizar variables y condicionales de Javascript para generar código HTML según su configuración:

var user = { description: 'Usuario frecuente' }
var authorised = false
#user
 if user.description
   h2 Descripción
   p.description= user.description
 else if authorised
   h2 Descripción
   p.description.
     El usuario no tiene descripción, ¿por qué no añades una?
   else
     h1 Description
     p.description El usuario no tiene descripción

en HTML:

<div id="user">
     <h2>Description</h2>
     <div class="description">Usuario frecuente</div>
</div>

Existe documentación sobre cómo escribir en Jade, y en general se puede comenzar a utilizar en poco tiempo. No es necesario tener un servidor, se puede instalar de manera local en un equipo de desarrollo / diseño, y tanto NodeJS como Jade son gratuitos.

Jade puede ser una herramienta útil para prototipar y generar código para prototipos funcionales usando como guía los bocetos y prototipos en papel, los archivos de Jade son compactos, fáciles de leer por humanos y es muy sencillo editarlos y compartirlos.

Lo mejor es que el HTML generado por Jade puede integrarse después al código en producción con poco esfuerzo, ya que su salida es de alta calidad y es compatible con otras librerías y frameworks que se usan en desarrollo web como Bootstrap, JQuery o AngularJS entre otros.

¿Es esto suficiente para habilitar a los diseñadores a escribir código? Tal vez no, pero es un buen acercamiento a resolver el problema y una buena idea para prototipar rápidamente con código para que todos los miembros de un equipo y no solo los desarrolladores puedan aportar código útil a un proyecto.

Consultor en experiencia de usuario, developer, conferencista, escritor y emprendedor. Trabaja en Tesseract Space, es Google Expert en UX/UI, Microsoft Regional Director y co-fundador de UX Nights.

22 tutoriales en video sobre HTML5

Las habilidades de entender y desarrollar código no son ajenas a los profesionales de experiencia de usuario, aún cuando no tengan roles como programadores o diseñadores de interactivos.

Por eso, les compartimos 22 tutoriales en video sobre desarrollo web utilizando HTML5, CSS3 y Javascript (con algo de JQuery) hechos por Roma Mamukashvili.

  1. Cómo hacer un juego de “serpiente” utilizando HTML5, Canvas y JQuery
  2. Carrusel de imágenes con vista previa de imágenes con CSS3 y Javascript
  3. Barra de avance para formularios con pasos con JQuery y CSS3
  4. Efectos simples con filtros de CSS
  5. Cómo crear partículas en Canvas de HTML5
  6. Menú en Canvas con enlaces animados
  7. Cómo hacer gráficas de datos usando Canvas y Javascript
  8. Menú vertical con jQuery y CSS3
  9. Fuegos artificiales con HTML5, Canvas y Javascript
  10. Efectos interactivos en 3D para imágenes
  11. Efecto de nieve para Navidad usando Canvas y Javascript
  12. Efectos de animación de rejilla con jQuery y CSS3
  13. Cargador de Windows Phone con CSS3
  14. Animación de nubes de fondo con CSS3
  15. Pestañas para navegación con CSS3
  16. Un screensaver con HTML5 y Canvas
  17. Reloj con colores en hexadecimal con solo Javascript
  18. Bloques que rebotan con gravedad hechos con HTML5 y Javascript
  19. Funcionalidades básicas de HTML5
  20. Árbol genealógico con CSS3
  21. Menú sencillo hecho con CSS3
  22. Logo de Android en CSS3

Estos tutoriales también pueden servir como punto de partida si necesitan desarrollar algo rápido para sus proyectos web, y funcionan con todos los navegadores actuales y hasta con Internet Explorer 8.

Somos un grupo de profesionales de UX que trabajamos para fortalecer y profesionalizar a la comunidad de Experiencia de Usuario (User Experience) en español. Hacemos eventos en vivo por la noche para platicar de User Experience con pizzas y cerveza.