Portada Diseño Web 3 Editores HTML Visuales (WYSIWYG) y Gratuitos
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 editores HTML visuales 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 aún 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 webs 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 y ya está preinstalado en nuestro hosting con WordPress.
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 HTML visual que utilicé después de muchos años si utilizar uno, ya que no necesitaba, pero cuando busqué 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.
Los editores visuales están muy bien para ver lo que estás haciendo ya que si no tienes mucha experiencia en código, no sabes muy bien que estás haciendo.
El problema es que los editores visuales no suelen ser muy potentes y si estás desarrollando o empezando a programar, preferirás usar un editor más potente, como por ejemplo Visual Studio Code.
El problema es que si quieres visualizar lo que estás haciendo, tienes que guardar los cambios en el archivo, ir a la carpeta donde esté guardado y abrirlo en un navegador web.
Una vez compruebes los cambios, si algo no te gusta o tienes que rectificar algo, tienes que repetir el proceso, por lo que cualquier comprobación de los cambios realizados en el código, puede ser muy tedioso.
Para evitar esto, puedes instalar una extensión llamada Live Server, la cual crea un servidor local y podemos previsualizar todos los cambios que hagamos en Visual Studio directamente en un navegador, sin tener que guardar, cerrar, abrir, etc…
Los pasos son para instalar y hacer funcionar Live Server son los siguientes. Obviamente, contamos con que ya tienes instalado Visual Studio, si no es así, puedes descargarlo desde aquí.
Lo primero que tienes que hacer es instalar la extensión, eso lo haces desde el Visual Studio directamente, desde Administrar > Extensiones o desde el icono de la barra lateral.
En la parte superior encontrarás un buscador de extensiones, sólo tienes que escribir Live Server y la verás en seguida, sólo tienes que instalarla y luego reiniciar Visual Studio.
Ahora sólo tienes que abrir una carpeta en la aplicación y crear o abrir un archivo HTML.
En la parte inferior de la pantalla, verás una opción que dice Go Live y si haces click ahí, se abrirá un navegador y mostrará la previsualización del archivo.
A partir de ese momento, todos los cambios que realices los verás en el navegador web, si tener que hacer ninguna acción más.
Cuando quieras dejar de previsualizar el archivo en el navegador, sólo tienes que parar el servidor haciendo click en el mismo sitio dónde lo iniciaste para parar el servicio.
De esta forma puedes usar un potente editor como es Visual Studio y ver los cambios que realices en el código.
Por supuesto, como no podía ser de otra forma, también tenemos opciones online si queremos un editor HTML visual, pero no queremos instalarnos nada.
Hay varias opciones, como por ejemplo onlinehtmleditor.dev, que es ideal para hacer algo rápido y conseguir el código HTML o viceversa, si tienes un código HTML y quieres ver cómo queda en realidad.
Luego tienes otras muchas opciones, entre las que podemos destacar las siguientes:
Estas herramientas son ideales para mencionar en tu sección sobre editores HTML visuales online, ya que ofrecen una variedad de funciones y facilidades para trabajar con código HTML directamente desde el navegador.
Como hemos comentado antes, los editores HTML 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 cómo funciona HTML sin miedo a encontrarse con líneas 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á.
En los últimos años, hemos sido testigos de una notable evolución en los editores visuales HTML, que han pasado de ser herramientas WYSIWYG simples a sofisticados gestores de contenido como WordPress y PrestaShop.
Estos últimos han revolucionado la creación de páginas web, facilitando enormemente el proceso para los usuarios, incluso aquellos con poca o ninguna experiencia técnica.
A pesar de que su uso ha disminuido, los editores WYSIWYG aún tienen un lugar en el mundo de la edición web.
Estos editores, que permiten una visualización directa de los cambios, son especialmente útiles para tareas específicas o para aquellos que prefieren evitar el uso de CMS más complejos.
Sin embargo, es importante tener en cuenta que, aunque facilitan la creación de páginas web, pueden generar códigos no muy limpios, lo que a veces resulta en problemas de compatibilidad con diferentes navegadores y dispositivos, especialmente móviles.
En el mercado actual, aún existen opciones viables y gratuitas de editores HTML visuales, como BlueGriffon, HTML Notepad y CKEditor.
Estas herramientas, cada una con sus propias características y ventajas, continúan siendo una opción para ciertos usuarios.
Además, la integración con herramientas modernas como Visual Studio Code ha añadido funcionalidades de previsualización en vivo, facilitando aún más el proceso de desarrollo y permitiendo una visualización inmediata de los cambios realizados en el código, lo que puede agilizar significativamente el proceso de desarrollo.