3 Editores HTML Visuales (WYSIWYG) y Gratuitos

Categorias: Diseño Web, Programas

3 Editores HTML Visuales (WYSIWYG) y Gratuitos para 2022

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.


Contamos con diferentes tipos de hosting. Elige el que mejor te venga para alojar tu web


1 – BlueGriffon

editor visual html bluegriffon

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.

bluegriffon dual view

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.

Descargar BlueGriffon

 

2 – HTML Notepad

editor html notepad multiplataforma

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!

Descargar HTML Notepad

 

3 – CKEditor

editor html ckeditor 4

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.

Descargar CKEditor 4

Previsualizar Web con Virtual Studio Code

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.

Visual Estudio Code añadir extensiones

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.

Visual Studio Code instalar Live Server

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.

Visual Studio pervisualizar web

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.

Editores HTML Visuales Online

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.

onlinehtmleditor.dev

Luego tienes otras muchas opciones, entre las que podemos destacar las siguientes:

  1. W3Schools Online HTML Editor:
    Este es un editor HTML online que permite editar código HTML, CSS y JavaScript, con la posibilidad de ver el resultado directamente en el navegador. Es una herramienta útil para experimentar con código web y aprender. Puedes encontrarlo en W3Schools Online HTML Editor.
  2. WordToHTML:
    Es un editor visual HTML online que permite crear contenido web o correos electrónicos de manera fácil. Ofrece herramientas de formateo de texto, inserción de imágenes, tablas y videos, y posibilidad de convertir documentos de Word o PDF a HTML. Visita WordToHTML.
  3. Programiz Online HTML Editor:
    Este editor permite trabajar con archivos HTML, CSS y JavaScript, ofreciendo una vista previa en tiempo real de los cambios. Es una opción ideal para practicar y ver los resultados al instante. Encuéntralo en Programiz Online HTML Editor.
  4. HTML Editor en GitLab:
    Un editor HTML online con vista previa en tiempo real. Ofrece opciones básicas de edición y es ideal para hacer pruebas rápidas o aprender HTML. Puedes usarlo en HTML Editor en GitLab.
  5. HTML-Online.com:
    Este sitio proporciona un editor HTML online con herramientas para limpiar y formatear el código. Incluye características como generador de Lorem Ipsum, conversión de tablas a DIVs, y varias opciones de limpieza de código. Útil para editar y limpiar el HTML rápidamente. Visita HTML-Online.com.

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.

Cosas a Tener en Cuenta

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.

Preguntas Frecuentes (FAQ)

Hosting SSD en Hostinet

  • SSD 12´99 / mes
  • SSD 54´99 / mes
  • SSD 259´99 / mes
  • SSD 5012´99 / mes
  • SSD 7514´99 / mes
  • SSD 12´99/mes
  • SSD 54´99/mes
  • SSD 259´99/mes
  • SSD 5012´99/mes
  • SSD 7514´99/mes
    • Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.
    • Almacenamiento en disco dura ultra rapido SSD
    • El espacio en disco es la suma del espacio que ocupan los archivos que forman la web y el correo electrónico.
    • La transferencia de datos mensual es la cantidad total de información que se descargan los visitantes de nuestra web en cada acceso más nuestro uso a través de FTP y correo.
    • Cada dominio alojado muestra un contenido único y diferente del resto
    • Tras evaluación de nuestro equipo de migraciones y nuevas altas de Hosting
    • Cuentas de correo gestionables a través de POP, IMAP y servicio WebmailSegún usoSegún usoSegún usoSegún usoSegún usoSegún uso
    • Todo lo que necesitas para sacar partido a tu Host
    • Bases de datos MySQL disponibles para su uso en cada alojamiento web
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.
    • Elige la versión de PHP que necesites
    • Certificado SSL autofirmadoCertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUI
    • Migramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a Hostinet
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.Una vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM ó .EU.
    • Aparcando un dominio secundario en el alojamiento de nuestro dominio principal conseguimos que ambos dominios resuelvan indistintamente con la misma página que tenemos colgada.
    • Cuentas de correo gestionables a través de POP, IMAP y servicio Webmail
    • Tus buzones de correo y mails limpios de virus y con un potente filtro antispam
    • Centro de datos en Madrid (España)
    • Opcion de contratación de IP dedicadaPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUI
    • Certificado SSL autofirmadoCertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUI
    • Opción de contratación de certificados SSL Wildcard. Se requiere Ip dedicada.Puedes contratar tu certificado SSL desde solo 99.95 € al año AQUIPuedes contratar tu certificado SSL desde solo 99.95 € al año AQUIPuedes contratar tu certificado SSL desde solo 99.95 € al año AQUIPuedes contratar tu certificado SSL desde solo 99.95 € al año AQUIPuedes contratar tu certificado SSL desde solo 99.95 € al año AQUIPuedes contratar tu certificado SSL desde solo 99.95 € al año AQUI
    • Opción de contratación de certificados SSL Extended Validation (EV). Se requiere Ip dedicada.Puedes contratar tu certificado SSL desde solo 195.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 195.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 195.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 195.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 195.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 195.00 € al año AQUI
    • Opción de contratación de certificados SSL Organization Validation (OV). Se requiere Ip dedicada.Puedes contratar tu certificado SSL desde solo 525.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 525.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 525.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 525.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 525.00 € al año AQUIPuedes contratar tu certificado SSL desde solo 525.00 € al año AQUI
    • Con nuestra herramienta WebFácil construye tu página web en solo 5 pasos.
    • Con la herramienta de instalación Softaculous tan solo deberás elegir la aplicación deseada y con tan solo un par de clicks y de forma totalmente automatizada tendrás tus herramientas favoritas instaladas en tu Host.
    • Bases de datos MySQL disponibles para su uso en cada alojamiento web
    • Supeditado al espacio total del alojamientoSupeditado al espacio total del alojamientoSupeditado al espacio total del alojamientoSupeditado al espacio total del alojamientoSupeditado al espacio total del alojamientoSupeditado al espacio total del alojamiento
    • ¿Quieres realizar desarrollos con Python? En Hostinet innovamos dia a dia en tu beneficio y por ello te presentamos como última novedad en todos nuestros servidores Web la posibilidad de desplegar tus aplicaciones con Python directamente desde el Plesk de tu Hosting.
    • ¿Quieres desarrollar tus aplicaciones con Ruby? En Hostinet te presentamos como última novedad en todos nuestros servicios de Hosting Web la posibilidad de desplegar tus aplicaciones con Ruby on Rails directamente desde el panel de control Plesk .
    • El fichero .htaccess permite modificar diferentes variables en la configuración de nuestra cuenta de alojamiento en el servidor.
    • El módulo mod_rewrite permite crear direcciones URL alternativas a las dinámicas generadas por la programación de nuestros sitio web (blog, foro, portal…), de tal modo que sean más legibles y fáciles de recordar
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web. Soporte en español por personal de Hostinet.
    • Completa recopilación de tutoriales sobre Hosting y Dominios
    • 30 dias para probar tu servicio de Hosting y si no te convence el servicio... te devolvemos el dinero!!
    • Copia diaria incremental realizada por HostinetCopia diaria incremental realizada por HostinetCopia diaria incremental realizada por HostinetCopia diaria incremental realizada por HostinetCopia diaria incremental realizada por Hostinet
    • Podrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento webPodrás hacer tus copias de seguridad desde tu panel de alojamiento web
    • Precios para nuevas altas. Contratación anual.Precios para nuevas contrataciones. Contratación anual.Precios para nuevas contrataciones. Contratación anual.Precios para nuevas contrataciones. Contratación anual.Precios para nuevas contrataciones. Contratación anual.Precios para nuevas contrataciones. Contratación anual.Precios para nuevas contrataciones. Contratación anual.