WYSIWYG: veo lo que tú ves

Detrás del acrónimo WYSIWYG está la expresión "What you see is what you get" (lo que ves es lo que obtienes). ¿Trabajar directamente en la interfaz de páginas web y dejar que los programas escriban el código en segundo plano es la mejor opción? Destacamos las ventajas e inconvenientes de la idea y presentamos los editores HTML WYSIWYG más populares.

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 de 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.

Antes del uso masivo de los programas informáticos todo era WYSIWYG, ya que no era necesario compilar la información: cuando escribes en un papel o usas una máquina de escribir, obtienes un resultado inmediato. Fue solo a través del desarrollo de los ordenadores y los programas de escritura que se hizo necesario tratar la forma en que el usuario ve la información impresa en la pantalla. Después de que las tarjetas perforadas ya no fueran suficientes para programar, los desarrolladores de software y los ingenieros empezaron a necesitar otra forma de introducir código: un editor de texto. Los primeros programas de tratamiento de texto eran editores para programadores; sin embargo, las secuencias de caracteres que se introducían en estos programas no se crearon con la intención de publicarse como documento.

Uno de los primeros programas de procesamiento de texto fue WordStar, que apareció en 1978 y todavía tiene usuarios activos, como el premiado autor George R. R. Martin. WordStar se ejecutó originalmente en el sistema operativo CP/M y tenía pocas funciones. En su primera versión, los escritores todavía tenían que trabajar con etiquetas para la composición tipográfica, aunque en general los expertos están de acuerdo en que el programa puede considerarse el primer editor WYSIWYG. Con este programa era posible marcar un texto en cursiva o negrita y ver el resultado directamente en el monitor. En aquella época la capacidad gráfica de los ordenadores no eran tan avanzada como en la actualidad: los sistemas informáticos todavía no podían mostrar en el monitor una reproducción real de lo que sería un producto impreso.

Con las posibilidades cada vez más avanzadas de los sistemas PC y Mac, el texto en todas sus fases de diseño podía mostrarse en un monitor con una calidad cada vez mayor. Con el tiempo, el principio WYSIWYG no solo se utilizó para el procesamiento de palabras: los editores empezaron a jugar un papel importante en la creación de páginas web, escritas en su mayoría en el lenguaje de etiquetas Hypertext Markup Language (HTML). Al igual que con los lenguajes de marcado y programación en general, este código se compila antes de que el resultado sea visible.

Cualquier persona que cree una página web utilizando HTML debe tener en cuenta la descompilación posterior, por lo que los editores HTML WYSIWYG, al facilitar esta tarea, son cada vez más populares. El primer programa de este tipo fue WebMagic de Silicon Graphics, en 1995. Durante los dos años posteriores se lanzaron los conocidos editores FrontPage de Microsoft (actualmente no disponible) y Dreamweaver de Macromedia (hoy parte de Adobe). La demanda de buenos editores es alta, pero ¿qué se espera de un software de este tipo?

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 que soportan 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.

No obstante, aunque este tipo de editores sea muy cómodo, también tiene algunas desventajas: los programas tienen sus limitaciones y pueden ocurrir errores sin que sepamos la causa.

A priori, los editores de WYSIWYG parecen ser la solución perfecta, ya que permiten crear y publicar documentos para la web aunque no tengas conocimientos de HTML o programación. Sin embargo, por varios motivos, hay usuarios que prefieren usar un editor clásico como Notepad+++, donde tienen que introducir directamente el código. Este sistema les da un control total sobre cómo será el resultado final. Quien tenga experiencia con un procesador de texto puede entenderlo: quién no se ha peleado alguna vez con Word por problemas de formato que solo después de abrir muchas ventanas y recorrer muchos menús ha podido solucionar.

Al escribir el código no sucede esto: con los editores de código, los creadores pueden ver exactamente lo que debería suceder con el texto durante la compilación. Por esta razón, algunos usuarios utilizan el lenguaje de macros TeX o el paquete de software LaTeX, –basado en TeX– al crear textos para imprimirlos o convertirlos en archivos PDF. Desarrollado originalmente con motivos científicos, TeX permite adherirse a las especificaciones exactas de formato e integrar mejor las fórmulas matemáticas y científicas en el texto del cuerpo.

Por otro lado, nos encontramos con otro problema: incluso con un editor WYSIWYG, no es totalmente seguro que el resultado se muestre en el monitor como debería, ya que no hay resultados universales en la World Wide Web. Existen diferentes sistemas operativos y navegadores, que a veces muestran el contenido de una manera diferente, además de los diferentes modos de visualización de los dispositivos móviles. Por este motivo, los diseñadores web normalmente prueban sus páginas en diferentes sistemas y navegadores antes de publicar sus resultados en línea.

Los editores de WYSIWYG crean código HTML en segundo plano. Sin embargo, no siempre se puede suponer que el código resultante tenga sentido desde un punto de vista lógico o profesional. En el pasado, los diseñadores web han criticado repetidamente que estos programas producen código fuente innecesariamente inflado o incorrecto, lo que se traduce en tiempos de carga más largos y algunos errores.

A pesar de que tengan algunas desventajas, los editores WYSIWYG son muy útiles, sobre todo para aquellos menos versados en lenguajes de programación. Estos son los más populares del mercado:

Macromedia lanzó Dreamweaver en 1997. Más adelante, en 2005, el gigante Adobe compró Macromedia y continuó desarrollando el software. El editor se puede utilizar tanto en modo WYSIWYG como en modo código. Ambas vistas se pueden mostrar lado a lado, de modo que los cambios en el código se vean directamente en la vista previa y viceversa. La vista previa incluso funciona con diferentes navegadores y dispositivos móviles. Además, con una función de publicación integrada, los usuarios pueden mover el contenido creado a sus servidores y colocarlo en línea. Dreamweaver forma parte de Creative Cloud y, por lo tanto, se trata de una herramienta de pago.

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. El paquete de aplicaciones surgió como parte de Mozilla Application Suite, y los desarrolladores todavía siguen en estrecho contacto con Mozilla Foundation. Al igual que toda la suite, SeaMonkey Composer es muy fácil de usar y, por lo tanto, especialmente adecuado para proyectos web sencillos. Puedes cambiar entre la vista HTML y la WYSIWYG. Este editor es especialmente interesante para los más puristas.

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. Los usuarios pueden cambiar entre la interfaz gráfica y el código fuente. Entre sus funciones se incluyen un asistente de formularios, un editor CSS, un gestor de sitios FTP que permite a los usuarios cargar sus proyectos y un optimizador, que busca en el código las líneas innecesarias y comprueba el cumplimiento del W3C en toda la página web. Al igual que SeaMonkey, Composer no ha seguido siendo desarrollado. El proyecto fue publicado bajo varias licencias de código abierto.

BlueGriffon es un editor WYSIWYG mayormente de código abierto y libre, aunque también ofrece características privadas y comerciales. Al igual que ocurre con Dreamweaver, puedes visualizar ambas vistas –interfaz y editor de código– en paralelo. La versión de pago incluye un editor EPUB, por lo que resulta una herramienta ideal para crear eBooks. A partir de la licencia básica, los usuarios también tienen acceso a unas 2500 plantillas que les facilitan la creación de su propia página web.

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. Todos los cambios se muestran en tiempo real en una ventana del navegador. La única desventaja es que solo funciona con Google Chrome, por lo que no se puede obtener una vista previa de la página web en otros navegadores. Otra útil función de este editor es que puedes abrir y editar los archivos CSS directamente desde el código, lo que acelera todo el proceso –estos cambios también se muestran directamente en la vista previa. Por otra parte, los desarrolladores de este editor han ido incorporando con el tiempo diferentes extensiones y herramientas, que permiten mejorar la interfaz del usuario o autocompletar y depurar líneas de código, entre otras funciones.

La primera versión de NetObjects Fusion se lanzó en 1996, desarrollada por antiguos empleados de Apple. El principio WYSIWYG representado por NetObjects 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, por lo que no es necesario tener conocimientos de HTML. No obstante, si sabes programar podrás cambiar el código fuente para realizar modificaciones como prefieras en el editor. Otra característica especial es la vista de gestión de proyectos: aquí se determina la navegación del sitio web. Los usuarios organizan las subpáginas y sus enlaces internos en forma de diagrama de árbol. NetObjects Fusion es un programa de pago y se ofrece únicamente para Windows. La versión gratuita, Essentials, sirve fundamentalmente a los particulares.

openElement es otro editor HTML WSYIWYG 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. Mientras que el área de edición está situada en el centro, el resto de los elementos se disponen a la derecha, en una barra lateral. De esta manera, los usuarios pueden simplemente arrastrar los objetos deseados al editor WYSIWYG. Los diseñadores web también pueden ver el código fuente en cada subpágina para hacer cambios directamente en el editor. El programa es gratuito y tiene una licencia de código abierto, pero hasta ahora solo está disponible para Windows.

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 está el área de edición, mientras que a la izquierda y a la derecha hay una lista de los elementos del sitio web, así como el menú de navegación del archivo. Su característica estrella: facilita la creación de páginas web responsive para dispositivos móviles, gracias a su editor Breakpoint. Este editor permite a los diseñadores web definir puntos en el CSS en los que el diseño cambia automáticamente según el tamaño de la pantalla del dispositivo. Por supuesto, también es posible editar el código directamente en RocketCake.

TOWeb de Lauyan Software sigue el mismo enfoque WYSIWYG que RocketCake. Los dos programas comparten una función similar para el diseño responsive. Además, TOWeb ofrece la posibilidad de crear de forma sencilla tu propia tienda online, así como elementos para mejorar la optimización en los motores de búsqueda a través de etiquetas meta y otros elementos. Con la función de publicación, los usuarios pueden incluso elegir entre varios servicios de hosting prediseñados para facilitar la carga de la página, lo que resulta especialmente interesante para iniciarse. TOWeb es una herramienta de pago, aunque se puede utilizar de forma gratuita para una única página web. Para cada nuevo proyecto (y especialmente para aquellos de comercio electrónico) es necesario obtener uno de los tres paquetes de pago que ofrece.

Los editores que ocultan el código en segundo plano permiten concentrarse completamente en el diseño. Es por eso que los editores WYSIWYG, ya sean procesadores de texto o editores HTML, son interesantes para los usuarios que esperan ver en todo momento el aspecto del producto final. Aunque son muy útiles sobre todo para comenzar, también ofrecen opciones para desarrolladores más experimentados. Sin embargo, esto tiene –como hemos explicado en este artículo– algunas desventajas: los editores WYSIWYG tienen un límite de diseño para aquellos que quieran añadir muchos cambios en el código fuente. Decidirse por este tipo de editores o un programa clásico para escribir código depende de las necesidades de cada proyecto en particular y las habilidades en programación del usuario.