Breezi: la herramienta con la que tu abuela podrá crear la web de su club de ganchillo

Puede parecer que esto de los creadores WYSIWYG (o sea, editores visuales) de HTML no es nada nuevo. El Dreamweaver es quizá el editor de webs que llegó a ser más popular, de hecho hace unos años era una de las herramientas más pirateadas por los desarrolladores. Lo cierto es que con el Dreamweaver podías más o menos hacer webs aunque no tuvieras ni idea, pero llegaba un momento en que no era tan fácil. Ese momento en el que sentías que la herramienta no te dejaba hacer lo que querías, todo se embarullaba y perdías por completo el control sobre tu creación. Las tablas dentro de tablas dentro de tablas dentro de tablas no había nadie que las manejara ya, de repente tenían vida propia. Ya no podías cambiar lo que habías hecho, ya no estabas pensando en cómo quedaba mejor la web. Ya no sabías por qué salía ese hueco ahí ni qué podías hacer para quitarlo. Eso se había convertido en una guerra contra la herramienta. Sólo puede quedar uno.

En cualquier caso, lo que acabó matando a Dreamweaver del todo (aunque la herramienta sigue existiendo, pero su popularidad ya no tiene comparación con la que tuvo) fue el declive del diseño de layouts con tablas y la popularización del diseño basado en CSS. Hacer un diseñador de layouts basados en CSS que resulte intuitivo es mucho más complejo, e incluso muchos podrían pensar que es imposible hacer uno que no requiera de ningún tipo de conocimiento de HTML y CSS.

En este contexto, aparece Breezi. Y Breezi es... la leche. Así de claro. Hace unos días la estuve probando, y hacía tiempo que no probaba algo que me haya entusiasmado tanto. Todo está tan bien pensado y queda tan natural que parece fácil. Pero no lo es, ni mucho menos.

Para mis pruebas quise hacer algo para lo que no tuviera que ir creando imágenes ni logotipos ni fotos, porque no soy diseñador y como tenga que ponerme yo a hacer dibujillos podía tirarme meses. Además quería basarme a ser posible en un caso real, un rediseño de una web sería genial. Así que mi planteamiento fue... ¿cómo haría yo un rediseño de la web de... mi escuela de baile? (sí, amigos, también bailo, o lo intento, ¿a que soy una caja de sorpresas?). Por cierto, si os gusta el baile, queréis aprender y vivís en Madrid, ya estáis tardando en ir a esta academia, porque es muy buena y no sólo aprendes mucho sino que además te lo pasas a lo grande: escuela de baile Sálsalon. Como podéis ver su web se está quedando un poco antigüilla, así que me pareció perfecta para las pruebas (sé que están trabajando en cambiarla, y digo yo que la harán diseñadores de verdad, no informaticuchos sin gusto estético como yo).

Por lo pronto, Breezi es una aplicación web, que además incluye el hosting. Esto quiere decir que cuando tengas hecha tu web no tienes por qué andar pegándote con servidores FTP ni otras zarandajas. Pulsas el botón de "Publicar" y automáticamente tu web está en Internet, en la dirección "midominio.breezi.com". Si no quieres pagar nada, puedes hacer una web pequeña que esté en esa dirección y que tenga un máximo de 3 páginas, insuficiente en el mayor parte de los casos pero potencialmente suficiente para algunas empresas pequeñas que sólo quieren tener un pequeño escaparate, sin demasiadas necesidades informativas. Si quieres hacer una web completa y que tenga su propia dirección, puedes hacerlo por 150 dólares al año. Teniendo en cuenta que esto incluye el hosting, no me parece ninguna barbaridad. Existe también una modalidad de pago a dólar por cada hora de uso del editor, que puede ser muy interesante si no queremos gastar mucho dinero y queremos apurar (esta modalidad puede dar mucho lugar a la picaresca, así creo que se puede considerar muy española). Pero dejemos a un lado el vil metal y vamos al lío.

En cuanto a los layouts, Breezi permite crearlos usando un diseño basado en cuatro elementos:

• El primer elemento son los bloques principales, que son contenedores horizontales que vienen ya creados por defecto para facilitar las cosas: cabecera, introducción, cuerpo y pie.
• Dentro de cada uno de ellos se pueden crear secciones, que vuelven a ser bloques horizontales que se añaden libremente
• Dentro de cada sección se pueden crear varias columnas, que son bloques verticales. Se pueden ir creando, eliminando y redimensionando sobre la marcha
• Dentro de cada columna se van apilando de forma vertical los componentes de contenido, que Breezi llama aplicaciones. El nombre me parece un poco engañoso, la verdad, quedaros conque son unidades prediseñadas de contenido. Quizá hubiera quedado más claro si las hubieran llamado widgets.

Todo esto está muy bien, pero evidentemente crear una página desde cero siempre es complicado, y Breezi lo sabe. Así que nada más crear una página, lo primero que te da para elegir son un montón de plantillas prediseñadas, para que puedas partir del layout que se parezca más a lo que tengas en la cabeza e ir modificándolo sobre la marcha. Se agradecen detalles como que estas plantillas vengan en blanco y negro y sin grandes suposiciones sobre el estilo gráfico (aunque también tienen otras que incluyen el diseño, para los más vagos). También se agradece que no sean layouts vacíos, sino que incluyan textos, noticias u otros elementos de contenido que se suelen utilizar en las páginas. Esta es una de las grandes maravillas de Breezi, te da siempre ya prediseñado lo que más se suele utilizar, y luego te permite cambiarlo.

En cuanto a la personalización del estilo cada elemento, uno de los problemas típicos que han tenido siempre los editores gráficos es cómo hacer que el usuario pueda elegir correctamente cuál personalizar. Es decir, si un bloque tiene dentro una sección que tiene dentro una columna que tiene dentro una aplicación, ¿cómo puedo hacer que cada una tenga un botón distinto para personalizarla?. La opción por la que opta me parece inteligente: separar cada botón de personalización de los contenedores adyacentes para que puedan pulsarse por separado: uno aparece en horizontal, otro en vertical, otro en diagonal, otro más separado... Para cada elemento podrás personalizar sus márgenes y espaciados y podrás ponerles bordes, sombreados...

Una vez tenemos nuestro layout más o menos definido (o fusilado directamente de la plantilla), comenzamos a meter contenido. Para eso tenemos las aplicaciones. Una aplicación puede ser desde un menú hasta combinaciones de texto e imágenes, pasando por botones, formularios de contacto, galerías, noticias, conjuntos de iconos sociales... Cada aplicación tiene un botón para configurarla en general, como por ejemplo editar los elementos del menú, o las imágenes que aparecerán en la galería. Además, cada aplicación estará compuesta por varios elementos que se pueden configurar por separado. En el caso de los textos, por supuesto tendremos el inevitable editor con sus fuentes (incluyendo las fuentes de Google, por cierto), negritas, colores, etc. A cada elemento de una aplicación se le puede dar estilo por separado, dependiendo los estilos disponibles del tipo de elemento en cada caso.

Otra de las cosas que más me ha gustado es que los contenidos se adaptan al tamaño de su contenedor. Esto es especialmente chulo en el caso de las imágenes. Cuando añades una imagen, esta calcula el tamaño que tiene disponible y te permite seleccionar qué parte de la imagen es la que quieres mostrar, redimensionándola si es necesario y sin deformarla salvo que le digas explícitamente que la quieres así. Sin apenas darte cuenta, has adaptado la imagen en unos segundos.

En fin, lo más importante que puedo decir es que en todo momento tenía la sensación de que el tiempo lo estaba empleando en jugar con el diseño, no en que el diseño jugara conmigo. Sobre todo, tenía la sensación de que no me estaba pegando con la herramienta, sino que en todo momento Breezi me estaba ayudando a sacar el diseño adelante. El resultado no es precisamente espectacular, porque ya he dicho que no soy diseñador, pero teniendo en cuenta mis grandes limitaciones sí que llegó a sorprenderme. En unas horas, ya tenía hecha una página de inicio casi completa, a pesar de que tuve que ir aprendiendo a usar la herramienta sobre la marcha. Podéis verlo en salsalon.breezi.com (no lo he puesto como enlace a propósito, para evitar que aparezca en los buscadores y engañe a algún incauto).

Cabe añadir también que puedes exportar la web resultante, para que se sincronice con Dropbox o con un FTP. Es decir, puedes publicar la web en otro servidor sin problema alguno, incluso con la opción gratuita. Y que la web resultante funcionará bien en todos los navegadores, y si accedes con un móvil te das cuenta de que sin querer acabas de crear un diseño responsive (que no sé cómo narices se traduce, si es que tiene traducción).

Por supuesto, no es oro todo lo que reluce. Al ejecutarse todo en el navegador y con un porrón de Javascript, se necesita un ordenador con cierta potencia para que vaya fluido. Y consume un montón de memoria. También es obvio que es más limitado que el HTML escrito a mano. Por último, el código que se genera es inevitablemente sucio, aunque no tanto como podría haber sido. Pero creo que todo estas limitaciones son inevitables en un editor WYSIWYG. También debo reconocer que no he probado otras herramientas del mismo tipo, como Weebly, Sidengo ó Wix (aunque si he probado esta es precisamente porque es la que me dio mejor pinta). Por último, esta herramienta apenas tiene unos meses, así que todavía puede mejorar aún más con el tiempo (o estropearse, que ejemplos hay miles).

En resumen, Breezi tiene dos cosas que son alucinantes: una, que es una gran herramienta para hacer un prototipo y ayudarte a pensar en el diseño de tu web, y dos... que gracias a ella hasta tu abuela es capaz de hacer una web chula, y dejar en pañales tu último intento de meterte a diseñador. Mejor no se la enseñes, que corres el riesgo de quedarte sin "cocretas" y lentejas para siempre.

Nota: No recibo comisión (ni jamones) ni de Breezi ni de Sálsalon, ¡de verdad!. Sé que prometí en la columna de la derecha que iba a gruñir mucho, y ahora voy y salgo con esta entrada pelota... imperdonable, lo sé. Prometo ser más capullo la próxima vez...