Mostrando entradas con la etiqueta diseño-web. Mostrar todas las entradas
Mostrando entradas con la etiqueta diseño-web. Mostrar todas las entradas

Bootstrap 3 y el marcado semántico

Probablemente estés ya hasta las narices de Bootstrap. Artículos y artículos, herramientas que lo usan o generan código compatible, y lo peor de todo... muchas webs con lo que yo llamo "pestuzo Bootstrap", que no se molestan casi ni en cambiar el estilo que trae por defecto, así que son todas igualicas. Por otra parte, también es posible que no lo hayas usado jamás e incluso que ni sepas lo que es.

Acaba de salir la primera release candidate de la versión 3 de Bootstrap, una versión que imagino que puede ser polémica (igual es por eso que la han sacado un Sábado veraniego casi de Agosto), así que aprovecho la ocasión para escribir este artículo. Empezaré contando qué es Bootstrap y qué tiene de bueno, sobre todo para los que no lo conozcáis aún (¿en qué cueva os habéis metido?). Incidiré en cosas que no me gustaron de su planteamiento general, especialmente contaré cómo se puede ir más allá y mejorar la separación entre contenido y presentación, haciendo nuestro código más semántico. Finalmente, aprovecharé que llevo varias semanas usando Bootstrap 3 para contar qué puedes esperar de esta versión y por qué tiene algunos cambios realmente interesantes para el futuro, junto a otros frustrantes para los que ya estaban usando la versión 2.

¿Por qué Bootstrap?

No hay nada que haga a uno sentirse más como un perro apaleado que programar el front de una web. Desde los primeros años de la web, se ha maltratado sistemáticamente todo lo que tenía que ver con su programación, casi siempre por motivos comerciales. Primero la guerra entre Microsoft y Netscape hizo que cada uno usara el JavaScript que le daba la gana. Luego la guerra entre Microsoft y... el resto del mundo, hizo... que en general Micro$oft interpretara cualquier posible estándar de la web como le diera la gana. Programar JavaScript y CSS significaba, básicamente, perder días y días pegándose en dura batalla con los navegadores, fundamentalmente con todas y cada una de las versiones de IE, ya que era con diferencia el navegador más utilizado y encima ninguna versión era igual a la anterior (ni tampoco se acogía a los estándares).

de html5code.com
Perdón, ¿estoy hablando en pasado?. Me temo que eso aún no ha acabado. Internet Explorer 8, aún uno de los navegadores más usados, sigue haciendo lo que le da la gana con muchas cosas. No he probado aún lo suficiente IE9 para saber si también es así, aunque algo he oído de que avanza bastante respecto a las versiones anteriores en cuanto a su estandarización pero todavía no acaba de cuajar. ¿Quizá IE10?.

Los estándares intentan moverse, modernizarse. No es normal que después de tanta guerra estemos casi en el mismo punto que hace 20 años. Se crea HTML5, sí... y después de varios años, todavía es una "candidate recommendation" y cada navegador implementa las partes que quiere. CSS3... más o menos lo mismo, con la coña de que tiene partes aprobadas y otras que aún no.

El precio de todo esto es enorme. Hacer una aplicación web es muchísimo más costoso de lo que debería, y la web avanza mucho más lentamente de lo que sería normal.

Como ocurre a menudo, las soluciones las ha ido proporcionando la propia comunidad. No necesitamos estándares de iure, tengamos estándares de facto. Así, especialmente en el campo del JavaScript fueron surgiendo librerías que encapsulaban las diferencias entre los navegadores, fundamentalmente en el acceso a DOM: MooTools, Prototype... y sobre todo la que finalmente parece que se alzó como la ganadora, jQuery.

Sin embargo, la revolución real está ocurriendo ahora mismo. En cuestión de estos últimos meses. En estos momentos, Internet Explorer ya no es el rey, y está en un declive cada vez mayor. Y ahora están saliendo productos que crean una capa por encima de HTML-CSS-JavaScript. Productos con una pinta estupenda, y que facilitan la programación del front. Entre ellos, seguramente el más popular ahora mismo sea Bootstrap.

Primera impresión

La primera impresión es muy buena. Bootstrap utiliza un curioso sistema para facilitar muchísimo el diseño de la web. Lo que predica es lo siguiente: utiliza HTML5 estándar para hacer la web, y coloca estratégicamente determinados "class" en cada elemento para conseguir:
  • Un sencillo pero potente sistema de layout, basado en filas y columnas.
  • Varios componentes prediseñados. Algunos de ellos, con código JavaScript listo para hacer que esos componentes sean dinámicos, sin que tengas que hacer nada de primeras. Así tendremos botones, pestañas, menús con varios niveles, componentes de paginación... un gran número de elementos que HTML no incorpora, pero que se utilizan habitualmente como interfaz de usuario en muchas webs.
Este es un ejemplo de código HTML (de Bootstrap 2). Obsérvense los distintos class que tiene:

<div class="container">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p>
</div>

<!-- Example row of columns -->
<div class="row">
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
</div> <!-- /container -->

Hacer una web con este sistema es realmente fácil, y aunque no toques apenas nada la web ya te quedará con una pinta bastante decente.

La distribución "normal" de Bootstrap trae un fichero .js y un fichero .css. Para personalizar los estilos, se supone que hay que añadir más reglas CSS, o al menos eso es a lo que parece que te invita.

Sin embargo, aunque esta es la forma de programar que propone Bootstrap, lo cierto es que no nos deberíamos conformar con eso. Eso sí, me gustaría recalcar que es una forma muy interesante y rápida por ejemplo para crear prototipos de una web. Pero si estamos haciendo algo serio podemos exigir más.

Personalizando con LESS

Modificar directamente el CSS tiene un problema, y es que estamos perdiendo una de las ventajas más importantes que realmente tiene Bootstrap, y es que está hecho en LESS. De hecho, Bootstrap se puede considerar una librería de LESS unida a otra de JavaScript.

LESS es un lenguaje que se construye sobre CSS, añadiendo características muy cómodas, fundamentalmente:

  • Anidamiento de reglas, que mejora mucho la legibilidad y te facilita el que haya un orden dentro del fichero (los ficheros CSS tienden naturalmente al caos más absoluto)
  • Variables: puedes meter valores comunes como colores, tamaños de padding, etc. en variables, y utilizarlas luego en otras reglas
  • Funciones y operaciones: también puedes crear valores que resulten de aplicar una operación sobre otro valor, como por ejemplo poner un color que sea un 20% más oscuro que otro (el cual puede estar, por ejemplo, en una variable).
  • Mixins: esto es lo más importante que aporta LESS. Los mixins son conjuntos de reglas que puedes usar en distintos sitios. Es decir, permite crear componentes reutilizables de CSS.

La librería LESS de Bootstrap está en general bien diseñada. Hay un fichero "variables.less" que tiene un montón de variables con las que se pueden controlar y personalizar muchísimos aspectos de la presentación por defecto: colores, fuentes, espaciados de márgenes y paddings... Otro fichero, "mixins.less" contiene un montón de mixins muy útiles de propósito general.

El resto de ficheros .less están dedicados a componentes o partes específicas: botones, tablas, barras de navegación, etc. En ellos se encuentran los estilos por defecto para todos estos tipos de elementos, junto a opciones de presentación de cada uno según sus clases.

Imagino que Bootstrap no incluye los ficheros LESS en la distribución normal porque intenta facilitar al máximo el que cualquiera pueda usarlo. Es decir, trata a los usuarios como idiotas. En mi opinión esta es un arma de doble filo, porque lo que está consiguiendo con ello es que mucha gente personalice muy poco lo que viene por defecto, consiguiendo así el efecto "pestuzo Bootstrap" que hay en tantas y tantas webs, y que comentaba al principio del artículo.

Créeme, trabaja directamente utilizando los ficheros .less, y creando otros less propios que redefinan las variables y pongan tus estilos. Es mucho más cómodo y a la vez mucho más potente (salvo que seas un idiota, claro).

Marcado semántico en Bootstrap

Hace muchos, muchos años, en una galaxia muy, muy lejana, el layout de las páginas se definía directamente dentro del propio HTML usando tablas. Entonces surgió la creación de layouts con CSS, la que se ha venido usando desde entonces. Lo cierto es que esta forma de crear los layouts era un coñazo integral porque cada versión de Internet Explorer interpretaba (y sigue interpretando) las propiedades CSS, y especialmente las que permiten formar layouts, como le daba la gana. A pesar de esto acabó triunfando, y una de las grandes ventajas que defendía el layout por CSS es que gracias a él se podía separar el contenido, la información que queremos mostrar, de la presentación de ese contenido. Se trataba de hacer marcado semántico, dentro de lo posible.

de coding.smashingmagazine.com
¿Cuál es el problema de la forma de hacer layouts que propone Bootstrap?. Pues precisamente esto, que volvemos a mezclar dentro del HTML el layout de la página con el contenido, aunque sea en forma de .class. Pues para eso volvemos a las tablas, ¿no?...

Es prácticamente imposible que el contenido de tu página sea semántico puro y no piense un poco en el layout. Ahí están los div, que sobre todo sirven para agrupar cosas que imaginas que pondrás luego juntas en el layout. Pero sí pienso que es bueno intentar separarlo lo máximo posible.

En mi caso es fundamental esta separación. Trabajo en un producto reutilizable, que se instala en varios clientes y que en cada uno puede cambiar la presentación. Tengo que intentar evitar al máximo el que tenga que modificar el HTML cuando lo único que necesite sea cambiar aspectos de presentación. Aparte de eso, aunque tu producto no sea reutilizable, pienso que en general es una buena práctica.

¿Entonces?. ¿Pasamos de Bootstrap?. No es necesario. Como ya he comentado antes, BS está basado en LESS. Y esa precisamente va a ser la solución.

Al principio descargué la última versión oficial de BS, la 2.3.2. Algunos de los class de Bootstrap se pueden considerar realmente semánticos: este div va a ser una barra de menú, o un elemento de paginación... Pero otros son claramente de presentación, como por ejemplo si un botón va a ser grande o pequeño, o si una barra de botones se va a poner alineada a la izquierda o a la derecha.

En seguida me di cuenta de que para la mayor parte de los casos, no era realmente necesario poner los class dentro del HTML, aprovechando las capacidades de LESS. Así, por ejemplo, si quiero que los botones de un formulario sean pequeños, no necesito poner el HTML así:

<form class="form-login">
(...)
<button type="button" class="btn btn-small">Ver cambios</button>
</form>


sino que puedo hacer esto otro:

<form class="form-login">
(...)
<button type="button" class="btn">Ver cambios</button>
</form>


y luego en el .less:

.form-login {
.btn {
.btn-small;
}
}

Alegría, saltos, fiesta... pero espera... esto no ocurre para todos los casos. O mejor dicho, había un caso fundamental en el que esto no funcionaba: precisamente, el sistema de grid para el layout.

Escondidos entre los .less de Bootstrap encontré unos mixins que me podían ayudar: makeRow y makeColumn. Sin embargo, no funcionaban bien. No era lo mismo poner los class que usar estos mixins. Mi gozo en un pozo.

Cuando estaba pensando alternativas, encontré que estaba en desarrollo una versión 3. Miro los cambios y ¡bingo!, han cambiado enterito el sistema de grid. Ahora el sistema de grid es mobile-first, y no diferencia entre "filas fluid y no fluid", todas son fluidas. También han cambiado el nombre de los class.

Vuelvo a hacer la prueba y, esta vez sí, compruebo que funciona. Esto es un ejemplo de un grid en Bootstrap hecho con marcado semántico:

<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>

Y su LESS:
.wrapper {
.make-row();
}
.content-main {
.make-column(8);
}
.content-secondary {
.make-column(3);
.make-column-offset(1);
}

De hecho, aunque hasta hace poco no estaba y yo tuve que llegar a ello a base de hacer arqueología en el código, estos mixins y la forma de usarlos ya aparecen dentro de la propia documentación del sistema de grid (bueno, a mi me ha servido para copiar el ejemplo...).

No sólo esto, sino que la librería LESS está realmente mejor diseñada. No es sólo el sistema de grids, en general todos los componentes están mucho más basados en mixins, es mucho más fácil hacer marcado semántico ahora que en la versión 2.

Así que sí, querido lector, te lo puedo decir: se puede hacer marcado semántico con Bootstrap.

Bootstrap 3: qué más me voy a encontrar

Si ya eras usuario de Bootstrap 2, tengo una noticia realmente mala para ti: no es sólo que tu código anterior no sea compatible. Es que ha cambiado un montón, muchas veces en cosas muy pequeñas.

Lo primero que te vas a encontrar es que ha cambiado el aspecto por defecto. El diseño actual pretende ser más "aséptico", menos intrusivo. Los botones y otros elementos no tienen detalles como gradientes, es un diseño más plano, más "metro". Esto es fácil de ver, basta conque vayas a la página principal de Bootstrap, porque lo que se está mostrando ahí ya es la versión 3.

Lo segundo que te vas a encontrar es que han cambiado el nombre de un montón de clases y variables. La intención es hacer los nombres más homogéneos, y en verdad lo han conseguido. Pero olvídate de que tu código funcione con ellos, claro. Los más obvios son los del sistema de layout, cuando antes se ponían las columnas con elementos como "span3" y las filas muchas veces con "row-fluid", ahora hay que utilizar cosas como "col-3" o "col-lg-3", y las filas van siempre con "row". Pero hay que decir que no se han cortado nada, han cambiado muchísimos nombres.

En cuanto a los formularios, ahora los componentes ocupan por defecto el 100% del ancho disponible, y han cambiado por completo la forma de agrupar campos.

de soyouwanna.com
Los iconos también se han rediseñado por completo, ahora se dibujan con una fuente (es decir, son glyphicons). Bueno, y han cambiado los nombres de los class, claro.

Han desaparecido muchas opciones de presentación de los distintos elementos, muchos "-inverse" por ejemplo, y muchas formas de agrupar tipos de elementos. También han desaparecido elementos enteritos, como los thumbnails. A cambio, aparecen otros nuevos como los panels y los list groups.

Si además pretendes que tu código sea compatible con IE7 o Firefox 3.6, ni intentes actualizarte: BS3 ha dejado de ser compatible con ellos.

Pero bueno, lo mejor es que chequees tú mismo la gran lista oficial de cambios realizados para la versión 3.

Habrá que ver a partir de ahora qué harán todas esas webs que generan código Bootstrap de forma gráfica, o que venden temas ya prediseñados, y que al fin y al cabo pueden considerarse una de las ventajas de usar Bootstrap: su popularidad. ¿Se actualizarán?, ¿no se actualizarán?, ¿se mantendrán compatibles con las dos versiones? (posiblemente la mejor opción). Algunas de ellas son estas:


En definitiva, si eras usuario de Bootstrap 2, actualizar tu HTML a BS3 no será nada sencillo. A pesar de eso, opino que los cambios en general son para mejor, la librería está mejor organizada, es mucho más fácil hacer HTML más semántico, los nombres son más homogéneos, y se han eliminado muchas opciones que eran quizá demasiado intrusivas.

Aunque bah! la verdad es que todo eso me importa un pimiento. Como no llegué a usar nunca la versión 2, lo único que realmente quería es que me dejara hacer marcado semántico, y ahora... ¡se puede!.

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...