WYSIWYG: veo lo que tú ves

Detrás del acrónimo WYSIWYG se esconde la expresión “What You See Is What You Get”, es decir: lo que ves es lo que obtienes. Como principio aplicado a distintos editores, genera opiniones encontradas. ¿Es realmente una buena idea trabajar solo de forma visual en textos y páginas web y dejar que el programa genere el código HTML en segundo plano? Analizamos las ventajas e inconvenientes de este enfoque y te mostramos los editores HTML WYSIWYG más populares.

¿Qué significa exactamente WYSIWYG?

Esta secuencia de letras algo confusa significa, en pocas palabras, que lo que vemos en nuestra pantalla cuando escribimos en una interfaz informática, tal y como aparece en el editor, es lo que se mostrará en el resultado final. Para la mayoría de los usuarios este sistema es de lo más común, ya que muchos programas que utilizamos a diario se basan en este principio. Por ejemplo, el conocido programa de procesamiento de textos Word es precisamente un editor WYSIWYG.

Sin embargo, el texto escrito debe entenderse, como elemento dentro de un programa informático, como código. Sin un programa como Word, tendríamos que introducir un marcador en el texto, por ejemplo, <i>palabra</i>, para que el ordenador interprete que esta palabra tiene que ir en cursiva. La conversión del documento de Word a un archivo PDF o la visualización del documento en un navegador funciona de una forma similar. Para los editores HTML también juegan un papel importante estos programas WYSIWYG. Antes de entrar en los detalles, echemos un breve vistazo a la historia de estos editores.

Funciones de los editores HTML WYSIWYG

Un editor WYSIWYG para crear páginas web debe ser adecuado para aquellos usuarios que no tengan amplios conocimientos de HTML. Con un programa así, los usuarios no introducen el código a mano, sino que utilizan las funciones del software que traducen a código HTML en un segundo plano.

• Fuente: cuando aparecieron las primeras páginas web, las posibilidades de utilizar diferentes fuentes eran todavía muy limitadas. Aparte de Times New Roman, Verdana y Arial, que venían ya instaladas en la mayoría de los ordenadores, los diseñadores web no podían usar ninguna otra fuente. Después de todo, no se podía asumir con seguridad que los navegadores de una página web pudieran mostrarlos. Este problema es ahora mucho menos relevante, y en un editor HTML WYSIWYG los usuarios pueden elegir entre muchas fuentes diferentes.
• Marcadores: los marcadores de texto son, por ejemplo, cursivas, negritas, subrayados, tachados o versalita. Con un editor WYSIWYG, ya sea para crear código HTML o para el procesamiento de texto, los usuarios no tienen que realizar este marcado manualmente, sino que pueden editar la parte que quieran del texto presionando un botón.
• Maquetación: el área del texto y los espacios en blanco conforman una parte importante de la apariencia de una página web. Al posicionar el contenido, los diseñadores web dirigen la atención del visitante y aportan a la página web una apariencia y un estilo concretos. Sin las posibilidades de WYSIWYG, los programadores tendrían que especificar el espacio en blanco, es decir, el área que no tiene contenido, con una precisión a nivel de píxel.
• Estructura: al igual que los textos impresos, el contenido de una página web debe estructurarse de manera que los visitantes puedan encontrar el contenido al que desean acceder. Gracias a los títulos y subtítulos, que se pueden crear fácilmente en los editores de WYSIWYG, los lectores se guían mejor por el texto.
• Tablas: el contenido web puede mejorarse con listas y tablas. Con un editor HTML WYSIWYG, los diseñadores pueden insertar los elementos directamente en la página y no tienen que introducirlos en forma de código.
• Multimedia: las páginas web no solo contienen texto: vídeos, imágenes y otros elementos gráficos constituyen una gran parte de la World Wide Web. Para que estos contenidos puedan ser visualizados, los creadores de páginas web deben incrustarlos en el código HTML, mientras que un editor WYSIWYG lo hace automáticamente. En la mayoría de casos, los usuarios pueden incluso arrastrar objetos y soltarlos en los lugares donde quieran colocar los elementos multimedia.

Los editores compatibles con WYSIWYG tienen otras funciones adicionales, además del diseño de contenido. A menudo es posible, por ejemplo, publicar contenido directamente a través del editor en tu propia página web. Muchos editores HTML también ayudan a los usuarios con la organización del proyecto: por ejemplo, muestran las subpáginas de la página web en una barra lateral claramente visible. Además, es muy conveniente poder cambiar entre las vistas de WYSIWYG y de código dentro del editor.

Editores WYSIWYG para HTML

Optar por un editor HTML WYSIWYG resulta muy útil en muchas situaciones. En especial, quienes empiezan pueden crear sus propias páginas web, aunque sean sencillas, sin necesidad de programar. En los siguientes apartados hemos recopilado algunos de los programas WYSIWYG más conocidos.

Dreamweaver

Macromedia lanzó Dreamweaver en 1997, en aquel entonces exclusivamente para Mac OS. Con el tiempo, Adobe adquirió Macromedia y convirtió a Dreamweaver en uno de los programas WYSIWYG más conocidos del mercado.

SeaMonkey Composer

Con SeaMonkey los usuarios obtienen una suite completa de Internet en su ordenador. Además de navegadores, clientes de correo electrónico, IRC y una libreta de direcciones, SeaMonkey Composer también integra su propio editor HTML.

KompoZer

KompoZer también se originó en el entorno de Mozilla. Al igual que en SeaMonkey, la interfaz de este editor HTML WYSIWYG es muy sencilla.

Brackets

Brackets tiene licencia de Adobe, pero a diferencia de Dreamweaver, es de código abierto y gratuito. Brackets es principalmente un editor de texto y no un editor WYSIWYG, pero incluye una función de vista previa, lo que lo convierte en un programa similar a un software de edición gráfica.

NetObjects Fusion

La primera versión de NetObjects Fusion se lanzó en 1996, desarrollada por antiguos empleados de Apple. El principio WYSIWYG representado por NetObjects Fusion recuerda aún más a un programa de autoedición que un editor HTML típico. Los usuarios usan la función “arrastrar y soltar” para ordenar los elementos de la página web con precisión de píxel.

openElement

openElement es otro editor HTML WYSIWYG gratuito basado en Chromium, el navegador de código abierto de Google. Como en los editores que hemos analizado previamente, la creación de una página web funciona al insertar y mover elementos en una interfaz gráfica.

RocketCake

Para utilizar el editor HTML WYSIWYG gratuito RocketCake tampoco necesitas conocimientos de HTML o CSS. En su estructura, este editor se asemeja a su competidor openElement.

En el centro se encuentra el área de edición, mientras que a la izquierda y a la derecha aparecen la lista de elementos de la página web y la navegación de archivos. La característica especial de este programa es que permite crear fácilmente páginas web con diseño web adaptativo para dispositivos móviles. Para ello cuenta, entre otras funciones, con el Breakpoint Editor: con esta herramienta los diseñadores web establecen puntos en el CSS que determinan cómo cambia el diseño según el tamaño de la pantalla. Por supuesto, en RocketCake también es posible editar directamente el código.

TOWeb

TOWeb de Lauyan Software sigue el mismo enfoque WYSIWYG que RocketCake. Los dos programas comparten una función similar para el diseño web adaptativo.

Inconvenientes de la idea WYSIWYG

A primera vista, los editores WYSIWYG parecen la solución perfecta: incluso sin conocimientos de HTML o de programación es posible crear en el ordenador documentos web listos para publicar. Sin embargo, por diferentes razones algunos usuarios prefieren recurrir a un editor como Notepad++, en el que escriben directamente el código.

• Falta de control: los editores WYSIWYG realizan formateos que el usuario solo puede modificar navegando entre múltiples ventanas y menús. Con la introducción directa de código HTML u otros lenguajes de marcado esto no ocurre: quienes crean el contenido ven exactamente lo que sucederá con el texto al compilarlo. Por eso, algunos usuarios prefieren generar documentos para impresión o PDF con el lenguaje de macros TeX o con el paquete LaTeX, basado en dicho lenguaje. Originalmente desarrollado para trabajos científicos, TeX permite cumplir con pautas de formato muy precisas e integrar de forma correcta fórmulas matemáticas o científicas en el texto.

• Problemas específicos de Internet y distintas visualizaciones: con un editor WYSIWYG no siempre se garantiza que el resultado se vea tal cual aparece en la pantalla del diseñador web. En el entorno online no existe un único resultado final: diferentes sistemas y navegadores muestran los contenidos de forma distinta, y los dispositivos móviles ofrecen además otras variantes de visualización. Por eso, la promesa “What You See Is What You Get” resulta engañosa en lo que respecta a páginas web. Por este motivo, los diseñadores suelen probar sus páginas en varios sistemas antes de publicarlas.

• Calidad del código: los editores WYSIWYG generan en segundo plano un código HTML, pero no siempre puede considerarse profesional o eficiente. En el pasado, muchos diseñadores web criticaban que este tipo de programas producía código fuente innecesariamente complejo o con errores, lo que provocaba tiempos de carga más largos y problemas de visualización.