Portada Diseño Web 3 Editores HTML Visuales (WYSIWYG) y Gratuitos para 2020
Hace algunos años, si querías hacer una página web, necesitabas un editor HTML y echarle horas delante de la pantalla.
El problema para muchos de nosotros, es que no teníamos ni idea de escribir en HTML y aunque con un poco de esfuerzo no es complicado de empezar a utilizarlo, teníamos aplicaciones en las que veías lo que estabas haciendo si tocar nada de código.
Es decir, que si querías poner una imagen en la parte superior de la pantalla, la ponías y la aplicación se encargaba de escribir el código HTML de tus acciones.
Y así con todos los elementos, enlaces, tablas, títulos, etc… Era como «diseñar» un sitio web desde Microsoft Word y luego sólo quedaba subir los archivos al hosting para que se viera tu pequeña obra de arte online.
Este tipo de editores HTML se conocen como editores WYSIWYG (What You See Is What You Get), que podemos traducirlo algo parecido a «Lo que ves es lo que hay».
Muchas empresas de software lanzaron multitud de aplicaciones HTML visuales, pero la que finalmente se llevó el gato al agua fue Dreamweaver, la cual aun existe y que distribuye Adobe en modo suscripción.
El lado malo de estos editores HTML era que el código que creaban no era el más limpio que podías utilizar, lo que causaba algunos problemas con los distintos navegadores, ya que en algunos se veía bien y en otros mal.
Con el paso de los años las pantallas de los ordenadores dejaron de ser la más utilizadas para ver los distintos sitios web, siendo los móviles la más usada y las web creadas con este tipo de editores HTML ya no se veían bien o ya no era tan sencillo hacerlas.
Además, llegaron los CMS (Gestores de Contenidos), como WordPress o PrestaShop, que lo cambiaron todo para siempre.
Algunos cómo WordPress incluyen su propio editor visual y HTML, desde donde se pueden publicar post sin necesidad de utilizar ninguna aplicación externa.
Hoy en día los editores HTML WYSIWYG no se usan mucho pero en ocasiones vienen bien para hacer alguna cosa o editar algún código HTML que te está dando la tabarra (si, seguimos sin aprender del todo HTML).
Algunos clientes de Hostinet quiere subir una página HTML en su hosting indicando que están en obras o subir algo muy sencillo a modo presencial y no quieren meterse con eso que se llama WordPress ni nada por el estilo.
Por suerte, aun en 2020, existe algunas opciones gratuitas de editores visuales HTML que puedes utilizar para lo que necesites y aquí tienes 3 de ellos.
BlueGriffon fue el primer editor visual que utilicé después de muchos años si utilizar uno, ya que no necesitaba, pero cuando busque algo parecido a lo que hacía con las antiguas versiones de Dreamweaver, era el que más se parecía.
Es multiplataforma, puedes descargarlo para Windows, macOS y Linux, además está traducido a un montón de idiomas.
Utiliza el motor de renderizado del navegador web Firefox y es compatible con HTML 5 y CSS 3.
Tiene un modo dual en el que se puede ver el código que genera conforme se añaden elementos en la pantalla visual y la disposición del editor visual es realmente intuitiva.
Si buscas algo que te recuerde a tus andaduras con Dreamweaver, BlueGriffon puede servirte.
El aspecto negativo es que, desde hace algún tiempo y aunque existe una versión totalmente gratuita y funcional, la aplicación está derivando a una explotación comercial.
Algunas funcionalidades son de pago y no parece que vaya a cambiar en un futuro, además lo están enfocando a la creación de ePubs…
Si quieres usarlo como herramienta principal, puede ser un problema, si lo quieres usar para hacer algunas cosas puntuales, puedes hacerlo sin problemas.
HTML Notepad es una aplicación realmente sencilla y ligera que nos permite editar HTML de una manera visual con una sencillez asombrosa.
También es multiplataforma, así que existen versiones para Windows, Linux y macOS.
Según las propias palabras de autor de la aplicación: «HTML Notepad es un editor WYSIWYG para escritores web»
Y la verdad es que nos ha gustado mucho en este target. Si bien puedes editar y crear cualquier tipo de HTML de manera visual, está muy enfocado a escritores que tiene que pasar luego su contenido a HTML.
Tiene soporte para Markdown y un montón de atajos de teclado que puedes usar para escribir largos artículos, llenos de enlaces, imágenes y códigos, de una manera muy sencilla y limpia.
Una opción muy interesante que no ha gustado mucho, ¡la probaremos más a fondo seguro!
CKEditor tiene 2 versiones:
Si descargamos el editor HTML, es decir el CKEditor 4, no encontramos ningún instalador, solo un zip que descomprimimos y vemos una carpeta con algunos archivos.
Viendo los archivos, hay una carpeta que se llama samples y dentro de ella vemos un index.html, lo abrimos con cualquier navegador y eso es el editor HTML.
Se edita todo desde el mismo navegador y dispone de numerosos plugins para configurar el editor a nuestro gusto.
Tiene muchas posibilidades y podemos prescindir de las opciones que no usemos.
En la página html que abrimos, tenemos enlaces a ejemplos de plantillas y extensos tutoriales para conocer cómo funciona CKEditor 4, aunque la interface inicial es como cualquier otro editor.
Como hemos comentado antes, los editores visuales están en desuso, pero nos gusta ver proyectos como HTML Notepad, donde le dan una vuelta de tuerca y apuntan las virtudes WYSIWYG, a los escritores web,muy del estilo de aplicaciones Markdown como Typora.
O usar la ventana dual de BlueGriffont para ver como traduce en código los elementos que incorporas de manera visual, es algo que los que empiezan pueden usar y ver como funciona HTML sin miedo a encontrarse con lineas de código y nada más.
El año pasado publicamos un artículo llamado Los 4 Mejores Editores HTML de 2019 en el que hicimos una review de algunos editores HTML, pero todos ellos textuales, así que nos faltaba este post para cerrar el círculo y aquí está.