Los mejores editores visuales HTML5

Lo único que necesitamos para crear páginas y aplicaciones o desarrollo web es un simple editor de texto plano y nuestra imaginación.

El propio Bloc de notas de Windows nos sirve.

No obstante siempre viene bien contar con el soporte que nos brindan ciertas herramientas especializadas como pueden ser Notepad++ o el fantástico Sublime Text.

Todas estas herramientas están muy bien para desarrolladores web acostumbrados a crear sitios web desde cero picando código, ya sea HTML, CSS, JavaScript o PHP.

Para el resto de mortales como yo, que provienen del diseño gráfico y que por necesidades evolutivas se han reciclado en diseñadores web, las alternativas para desarrollar páginas web son muchas y variopintas.

Por ejemplo el fotógrafo Jose Yébenes, autor de fototrending.com, ha recopilado en este artículo algunas de las mejores páginas webs con las que para hacer un portfolio fotográfico online muy profesional.»

Aunque las tecnologías web son cada vez más complejas, el uso de frameworks nos ayudan a que la creación de nuestros proyectos web sean más fáciles.

Los editores de «arrastrar y soltar» son herramientas que sin tener que escribir complicados códigos nos permiten desarrollar bonitos y sabrosos sitios web.

Twitter bootstrap es un gran framework que incluye muchas plantillas y plugins Javascript para crear botones, barras de navegación, botones, sliders, etc.

En este artículo hablaré de los cinco mejores editores visuales HTML5 en Bootstrap.

Empiezo con mi favorita…

WEBFLOW

Me encanta WebFlow porque puedes realizar las cosas básicas sin preocuparte lo más mínimo. La única preocupación es la imaginación que pongas para tus proyectos.

Webflow es una compañía muy joven con gran talento que ha luchado para llenar el vacío que existía entre el diseñador y el programador.

Al principio, pensé que la curva de aprendizaje era alta, pero después de una media hora de jugar con la herramienta, empecé a tener una muy buena idea de cómo funcionaba.

Webflow dispone de herramientas para crear contenedores, secciones, columnas, imágenes, etc.

Podemos ver en todo momento como queda el diseño en tabletas o móviles y también exportar el código para complementarlo en cualquier editor.

Una característica útil de Webflow es la posibilidad de guardar las versiones de sitios web para volver a versiones anteriores si se produce algún problema.

Webflow tiene un plan gratuito que te deja trabajar con un sitio web pero no permite exportar.

Sus planes de pago van desde los 14$/mes de su versión Micro a los 35$/mes de la versión Pro.

MACAW

Macaw es una aplicación descargable y tiene un futuro prometedor.

Pero tiene un montón de mejores a realizar para competir con el resto.

Webflow es una plataforma mucho más madura, que ofrece características como presentaciones de diapositivas, fichas, etc., que Macaw todavía no tiene.

Desde mi experiencia, la salida de código es más pura en Webflow que en Macaw.

Lo que prefiero en Macaw es la posibilidad de crear cualquier ancho de diseño que creamos conveniente, mientras que en Webflow se basa en las versiones de Escritorio, Tablet y Smartphone tanto apaisado como vertical.

Estos puntos de corte funcionan bien para la mayoría de los proyectos, pero aun así es bueno saber que en Macaw se pueden personalizar según el proyecto.

Actualmente no hay plantillas para Macaw que ayuden a trabajar más cómodamente.

Cada página que se crea es en blanco.

Lo mejor de Macaw es su facilidad de uso. Es intuitivo y me recuerda mucho a cómo trabaja Adobe Edge Reflow.

Dibujamos y reposicionamos elementos visuales, en lugar de tener que editar el CSS y HTML.

Stream en es nombre del motor que calcula todas las propiedades de los elementos gráficos que se colocan en el documento.

Es como usar Photoshop y InDesign pero enfocado al diseño web.

Lo más parecido a trabajar con código en Macaw consiste en editar los elementos en el panel DOM.

Aquí se pueden cambiar las etiquetas HTML, ordenar el contenido, aplicar nombres CSS y crear estilos globales para aplicar al contenido.

Macaw cuesta 179$ pero dispone de una versión Learner de oferta a 99$ como precio único.

PINEGROW

Pinegrow Web Designer es una aplicación de escritorio para Mac, Windows y Linux.

Construye páginas usando CSS y LESS y soporta frameworks como Twitter Bootstrap 3 y Foundation 5.

La interfaz de arrastrar y soltar permite construir rápidamente páginas.

Pinegrow trabaja con archivos HTML estándar.

Se pueden abrir proyectos web existentes y editarlos de forma inmediata, no hay propiedad tie-in.

También permite crear tu propia biblioteca de componentes.

Sólo tenemos que añadir los elementos como un componente, guardarlo y soltarlo cuando quieras y donde quieras.

Otra característica de ahorro de tiempo es el de deshacer pasos.

¿Cuántas veces metemos la pata en un archivo CSS y hemos deseado tener más de 1 nivel para deshacer?

Pinegrow ofrece 20 pasos.

Pinegrow no te obliga a usar su interface para el diseño, podemos agregar nuestro propio editor de texto como Sublime Text, Notepad++ y otros, editando desde allí y viendo los resultados en tiempo real.

Una de las opciones que más me ha gustado de Pinegrow es la edición multipágina en diferentes resoluciones a la vez para crear estilos de páginas relacionadas al mismo tiempo dando un sentido de coherencia tan vital para el diseño responsive.

También se puede editar cualquier documento HTML, incluso páginas abiertas directamente desde Internet.

Se pueden importar estilos CSS desde otras webs.

Pingendo dispone de una licencia personal anual de 49,95$ y otra de empresa por 99,95$.

No está nada mal.

PINGENDO

Pingendo es una aplicación instalable y gratuita.

Después de instalar se puede optar por comenzar con una plantilla de inicio.

Con el típico sistema de arrastrar y soltar vamos construyendo nuestra página.

Pingendo también trae un editor de código.

El panel DOM se puede utilizar para especificar dónde desea insertar un nuevo componente.

Además se puede trabajar en modo WYSIWYG como en código directamente.

Permite importar proyectos propios, pero desgraciadamente le faltan funciones que me interesan como son los tabs.

Insertar elementos como los contenedores, filas y columnas es muy fácil.

En todo momento se ve claramente el contorno del elemento que insertamos pero resulta incómodo y hasta difícil de manejar para corregirlos.

Lo que resulta una ventaja se convierte en una desventaja, es mi opinión.

Su precio lo hace muy atractivo, ya que es gratis.

A caballo regalado…

BRIX.IO

Brix.io es un editor visual online.

No dispone de plantillas o temas de inicio todavía.

La ayuda básica se limita a un video y poco más que buscar para aprender.

Una característica distintiva de Brix.io es que se puede añadir los nombres de los compañeros de trabajo y clientes a un proyecto para colaborar o añadir comentarios a los diseños.

Cuenta con más de 200 componentes y un revolucionario proceso de diseño.

En este aspecto sí que está muy logrado.

Con un arrastrar y soltar tenemos botones de alertas, el famoso jumbotron, barras de progreso, etiquetas, paginaciones, breadcrums, formularios, iconos, tablas y un largo etcétera.

Poco más puedo decir de Brix.io ya que hace poco terminó mi versión de prueba de 14 días y ya no he seguido con ella.

El precio de la versión Personal es de 4,90$/mes, la Freelancer de 14,90$/mes y la Team de 29,00$/mes.

ADOBE EDGE REFLOW

Edge Reflow tiene similitud con el anteriormente mencionado Macaw, aunque en esta ocasión no trabaja con Bootstrap.

Hay que tener claro que Reflow es un diseñador visual, no un editor de código.

Como es un programa de la gran familia que es Adobe, lógicamente tiene conexión directa con Photoshop CC.

Con el poder de CSS, Edge Reflow permite crear diseños de alta calidad.

Mantiene la visión del diseño a lo largo de todo el proceso y disponer de una vista previa en Google Chrome.

También se puede inspeccionar el diseño en tiempo real con la extensión Edge Inspect, y extraer el CSS para usarlo con Edge Code, Dreamweaver o cualquier editor de código.

No existe un control directo sobre el HTML y el CSS que conforma el diseño.

Para algunos diseñadores gráficos como yo (vuelvo a repetir que no soy programador por suerte o desgracia, jeje) Reflow está muy bien para crear prototipos funcionales para enseñar a los clientes y den luz verde al proceso y crear la versión final.

Sería como usar un programa de prototipado como Balsamiq Mockups

La gran virtud de Reflow es el control CSS que permite ver en tiempo real los fondos, sombras, brillos, esquinas redondeadas, opacidades y filtros.

Una vez que tenemos el proyecto creado con los puntos de corte para el diseño responsive, extraemos el código para completar el proceso de diseño en Dreamweaver o similar.

Adobe Edge Reflow todavía está en desarrollo y es gratuito para probarlo y ver si nos seduce o le hacemos ascos.

Hasta aquí mi post.

Me ha quedado en el tintero seguramente muchas otras como Froont que tiene buena pinta, pero estas 5 son las más novedosas.

Quizás tú tengas alguna otra y quieras compartir tus impresiones conmigo.