Qué es: WYSIWYG (Lo que ves es lo que obtienes)

WYSIWYG es un acrónimo de What You See Is What You Get (Lo que ves es lo que obtienes). Se utiliza para herramientas donde creas/editas contenido en tiempo real y ves una vista previa en vivo mientras trabajas.

Estos editores son increíblemente útiles en línea, especialmente al crear contenido para sitios web. Ya sea que estés escribiendo una publicación de blog, redactando un correo electrónico o diseñando una página web, un editor WYSIWYG hace el trabajo más fácil y eficiente.

¿Por qué usar un editor WYSIWYG?

Los editores WYSIWYG vienen con muchas funciones que mejoran tu proceso de creación de contenido. La funcionalidad y el aspecto son generalmente los mismos, ya sea que tengas un sitio web de WordPress o uses un sistema de gestión de contenido (CMS) diferente.

En su mayor parte, encontrarás que todos tienen las siguientes características:

Formato de texto: Estos editores te permiten poner en negrita, cursiva, subrayar y tachar tu texto, tal como lo harías en un procesador de texto. De hecho, a menudo se les llama editores de texto enriquecido porque te permiten editar contenido de una manera familiar, al igual que en Microsoft Word.
Enlaces: Puedes agregar fácilmente enlaces a tu contenido simplemente haciendo clic en un botón en una barra de herramientas y pegando la URL. No tendrás que agregar o editar código HTML para crear tu contenido.
Imágenes: Agregar imágenes es pan comido. Puedes subirlas directamente desde tu dispositivo o insertarlas desde una fuente en línea. Muchos editores WYSIWYG incluso te permitirán pegar una imagen directamente en línea.
Creación de tablas: ¿Necesitas presentar datos de forma ordenada? Los editores WYSIWYG te permiten crear tablas dentro de tu contenido sin tener que lidiar con otras aplicaciones web, como Google Sheets, o necesitar incrustaciones especiales.

Pero eso no es todo. Los editores WYSIWYG también ofrecen funciones como corrector ortográfico, vista de código fuente y más. Todas estas funciones facilitan que te concentres en crear contenido de calidad sin preocuparte por aprender PHP, CSS o diseño web.

Funcionalidad adicional de los editores WYSIWYG

Además de lo anterior, los editores WYSIWYG tienden a tener un montón de funciones diseñadas para simplificar y mejorar tu proceso de creación de contenido.

La mayoría de los editores WYSIWYG tienen corrector ortográfico integrado. Esta herramienta integrada es bastante útil, ya que subraya automáticamente las palabras mal escritas, lo que te ayuda a evitar errores tipográficos vergonzosos en tu contenido.

Otra parte extremadamente vital de WYSIWYG es la vista de código HTML. Esto te permite cambiar sin problemas entre la vista de diseño visual y la vista de marcado.

Ver el código HTML es perfecto para cuando necesitas solucionar problemas.

Estos podrían ser cosas como problemas con imágenes o formato de texto incorrecto debido a copiar/pegar.

Por no mencionar que muchos editores WYSIWYG vienen con un robusto conjunto de herramientas de diseño. Por ejemplo, el editor Gutenberg para WordPress es una herramienta de diseño interactiva de arrastrar y soltar que te permite escribir contenido y usar plantillas para crear lo que puedas imaginar justo delante de tus ojos.

La interfaz es siempre fácil de usar, por lo que incluso si no eres un genio de la tecnología, podrás hacer que tu contenido se vea profesional y pulido con solo unos pocos clics.

Editor de bloques de WordPress

El Editor de Gutenberg se introdujo en 2018 y ha cambiado la interfaz de usuario para crear contenido con WordPress.

En su núcleo, Gutenberg es un editor basado en bloques que puedes usar tanto en el frontend como en el backend de tu sitio.

En lugar de escribir y diseñar en un área de texto grande, como en un editor de texto enriquecido como TinyMCE, creas tu contenido usando bloques individuales. TinyMCE es un editor WYSIWYG de código abierto que se usó como base para el editor de contenido anterior de WordPress, ahora llamado el editor clásico.

Estos pueden ser desde párrafos y encabezados hasta imágenes, videos, citas o incluso elementos más complejos como tablas o marcado HTML personalizado.

Cada bloque de Gutenberg se puede personalizar y mover individualmente, lo que te otorga un control sin precedentes sobre el diseño y la estructura de tu contenido. Incluso puedes usar diseños predefinidos llamados Patrones para tener una plantilla con la que trabajar directamente en el editor de bloques.

Puedes mover bloques en tiempo real y ver exactamente cómo se verá tu publicación de blog o página de destino antes de publicarla.

Gutenberg no es el único editor WYSIWYG para diseño web. Constructores de sitios web que no son de WordPress como Squarespace ofrecen edición WYSIWYG, y otros temas y plugins de WordPress como SeedProd y Divi también lo hacen.

La interfaz WSYIWYG de SeedProd es simple e intuitiva, ya sea que estés editando texto o todo tu diseño.

Muchas de estas herramientas tienen una funcionalidad más avanzada y una mejor experiencia de usuario que Gutenberg, por lo que muchos usuarios profesionales comienzan a usarlas a medida que continúan mejorando sus habilidades de desarrollo web.

Problemas comunes en la edición WYSIWYG

A medida que comiences a usar editores WYSIWYG con más frecuencia, es inevitable que encuentres algunos problemas u obstáculos. ¡Pero no te preocupes! La mayoría de estos problemas comunes tienen soluciones sencillas. Echemos un vistazo a algunos de ellos.

Problemas de formato

Un problema común que podrías encontrar es el formato. Por ejemplo, tu texto podría no alinearse correctamente, o el tamaño de fuente podría no ajustarse como deseas. Esto a menudo se debe a que el texto copiado trae HTML, CSS o incluso JavaScript adicionales.

Para solucionar esto, intenta pegar tu texto primero en un editor de texto plano, como Notepad++. Luego, cópialo desde ahí al editor WYSIWYG. Esto generalmente elimina cualquier código adicional, permitiendo que el editor WYSIWYG formatee mejor el texto.

Hacer esto también eliminará enlaces e imágenes, por lo que necesitarás volver a insertarlos usando el editor de texto enriquecido o la vista de código HTML.

Imágenes no se muestran

Otro problema común es que las imágenes no se muestran correctamente o no se muestran en absoluto. Esto podría deberse a que la URL de la imagen es incorrecta o a que el archivo de imagen no es compatible. Siempre verifica que tu URL sea correcta. Si estás subiendo imágenes, asegúrate de que estén en un formato amigable para la web, como .jpg, .png o .gif.

Por ejemplo, si usas un formato como .svg, WordPress necesita un ajuste adicional para funcionar correctamente. Para más información, puedes consultar nuestra guía sobre cómo hacer que los archivos SVG funcionen de forma segura con WordPress.

Cambios de código inesperados

A veces, puedes encontrar que el código cambia inesperadamente después de guardar. Los editores WYSIWYG no son perfectos y pueden agregar HTML o CSS adicionales que no pretendías. Esto puede cambiar la apariencia de tu contenido.

Para remediar esto, podrías cambiar a la vista de código HTML y eliminar manualmente cualquier código no deseado. Ten cuidado, sin embargo, ya que necesitas una comprensión básica del marcado HTML para hacer esto de forma segura.

Problemas de compatibilidad del navegador

Finalmente, puedes encontrar problemas al ver tu contenido en diferentes navegadores. No todos los navegadores interpretan HTML y CSS de la misma manera, y JavaScript puede actuar de forma diferente dependiendo de la configuración de tu sistema.

Todo esto puede generar inconsistencias en cómo se muestra tu contenido. Siempre prueba tu sitio en varios navegadores, incluyendo Chrome, Firefox, Safari y Microsoft Edge, para asegurarte de que tu contenido se vea bien sin importar dónde se visualice.

Reflexiones finales sobre los editores WYSIWYG

Los editores WYSIWYG, como el editor de bloques Gutenberg de WordPress o incluso el editor clásico TinyMCE, más antiguo y de código abierto, son herramientas vitales que pueden simplificar significativamente tu proceso de creación de contenido.

Con funciones como edición en tiempo real de arrastrar y soltar, vista de código HTML y plantillas, estas herramientas de diseño web te permiten concentrarte más en la calidad de tu contenido en lugar de en la codificación.

Esperamos que esto te haya enseñado sobre los editores WYSIWYG y cómo pueden ayudarte a mejorar tus habilidades de diseño web. También puedes consultar nuestras selecciones expertas de los mejores constructores de páginas de arrastrar y soltar para WordPress y nuestra guía sobre cómo elegir el mejor software de diseño web para tu sitio.

Recursos adicionales

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.