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 en­co­n­tra­das. ¿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? Ana­li­za­mos las ventajas e in­co­n­ve­nie­n­tes de este enfoque y te mostramos los editores HTML WYSIWYG más populares.

¿Qué significa exac­ta­me­n­te WYSIWYG?

Esta secuencia de letras algo confusa significa, en pocas palabras, que lo que vemos en nuestra pantalla cuando es­cri­bi­mos en una interfaz in­fo­r­má­ti­ca, 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 uti­li­za­mos a diario se basan en este principio. Por ejemplo, el conocido programa de pro­ce­sa­mie­n­to de textos Word es pre­ci­sa­me­n­te un editor WYSIWYG.

Sin embargo, el texto escrito debe en­te­n­de­r­se, como elemento dentro de un programa in­fo­r­má­ti­co, como código. Sin un programa como Word, te­n­dría­mos que in­tro­du­cir un marcador en el texto, por ejemplo, <i>palabra</i>, para que el ordenador in­te­r­pre­te que esta palabra tiene que ir en cursiva. La co­n­ve­r­sión del documento de Word a un archivo PDF o la vi­sua­li­za­ción del documento en un navegador funciona de una forma similar. Para los editores HTML también juegan un papel im­po­r­ta­n­te 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 co­no­ci­mie­n­tos de HTML. Con un programa así, los usuarios no in­tro­du­cen el código a mano, sino que utilizan las funciones del software que traducen a código HTML en un segundo plano.

• Fuente: cuando apa­re­cie­ron las primeras páginas web, las po­si­bi­li­da­des de utilizar di­fe­re­n­tes fuentes eran todavía muy limitadas. Aparte de Times New Roman, Verdana y Arial, que venían ya in­s­ta­la­das en la mayoría de los or­de­na­do­res, los di­se­ña­do­res web no podían usar ninguna otra fuente. Después de todo, no se podía asumir con seguridad que los na­ve­ga­do­res de una página web pudieran mo­s­trar­los. Este problema es ahora mucho menos relevante, y en un editor HTML WYSIWYG los usuarios pueden elegir entre muchas fuentes di­fe­re­n­tes.
• Ma­r­ca­do­res: los ma­r­ca­do­res de texto son, por ejemplo, cursivas, negritas, sub­ra­ya­dos, tachados o versalita. Con un editor WYSIWYG, ya sea para crear código HTML o para el pro­ce­sa­mie­n­to de texto, los usuarios no tienen que realizar este marcado ma­nua­l­me­n­te, sino que pueden editar la parte que quieran del texto pre­sio­na­n­do un botón.
• Ma­que­ta­ción: el área del texto y los espacios en blanco conforman una parte im­po­r­ta­n­te de la apa­rie­n­cia de una página web. Al po­si­cio­nar el contenido, los di­se­ña­do­res web dirigen la atención del visitante y aportan a la página web una apa­rie­n­cia y un estilo concretos. Sin las po­si­bi­li­da­des de WYSIWYG, los pro­gra­ma­do­res tendrían que es­pe­ci­fi­car el espacio en blanco, es decir, el área que no tiene contenido, con una precisión a nivel de píxel.
• Es­tru­c­tu­ra: al igual que los textos impresos, el contenido de una página web debe es­tru­c­tu­rar­se de manera que los vi­si­ta­n­tes puedan encontrar el contenido al que desean acceder. Gracias a los títulos y su­b­tí­tu­los, que se pueden crear fá­ci­l­me­n­te 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 di­se­ña­do­res pueden insertar los elementos di­re­c­ta­me­n­te en la página y no tienen que in­tro­du­ci­r­los en forma de código.
• Mu­l­ti­me­dia: las páginas web no solo contienen texto: vídeos, imágenes y otros elementos gráficos co­n­s­ti­tu­yen una gran parte de la World Wide Web. Para que estos co­n­te­ni­dos puedan ser vi­sua­li­za­dos, los creadores de páginas web deben in­cru­s­tar­los en el código HTML, mientras que un editor WYSIWYG lo hace au­to­má­ti­ca­me­n­te. En la mayoría de casos, los usuarios pueden incluso arrastrar objetos y soltarlos en los lugares donde quieran colocar los elementos mu­l­ti­me­dia.

Los editores co­m­pa­ti­bles con WYSIWYG tienen otras funciones adi­cio­na­les, además del diseño de contenido. A menudo es posible, por ejemplo, publicar contenido di­re­c­ta­me­n­te a través del editor en tu propia página web. Muchos editores HTML también ayudan a los usuarios con la or­ga­ni­za­ción del proyecto: por ejemplo, muestran las su­b­pá­gi­nas de la página web en una barra lateral cla­ra­me­n­te visible. Además, es muy co­n­ve­nie­n­te 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 si­tua­cio­nes. En especial, quienes empiezan pueden crear sus propias páginas web, aunque sean sencillas, sin necesidad de programar. En los si­guie­n­tes apartados hemos re­co­pi­la­do algunos de los programas WYSIWYG más conocidos.

Drea­m­wea­ver

Ma­cro­me­dia lanzó Drea­m­wea­ver en 1997, en aquel entonces ex­clu­si­va­me­n­te para Mac OS. Con el tiempo, Adobe adquirió Ma­cro­me­dia y convirtió a Drea­m­wea­ver 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 na­ve­ga­do­res, clientes de correo ele­c­tró­ni­co, IRC y una libreta de di­re­c­cio­nes, 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 di­fe­re­n­cia de Drea­m­wea­ver, es de código abierto y gratuito. Brackets es pri­n­ci­pa­l­me­n­te 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.

Ne­tO­b­je­cts Fusion

La primera versión de Ne­tO­b­je­cts Fusion se lanzó en 1996, de­sa­rro­lla­da por antiguos empleados de Apple. El principio WYSIWYG re­pre­se­n­ta­do por Ne­tO­b­je­cts Fusion recuerda aún más a un programa de au­toe­di­ció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.

ope­nE­le­me­nt

ope­nE­le­me­nt es otro editor HTML WYSIWYG gratuito basado en Chromium, el navegador de código abierto de Google. Como en los editores que hemos analizado pre­via­me­n­te, la creación de una página web funciona al insertar y mover elementos en una interfaz gráfica.

Ro­c­ke­t­Ca­ke

Para utilizar el editor HTML WYSIWYG gratuito Ro­c­ke­t­Ca­ke tampoco necesitas co­no­ci­mie­n­tos de HTML o CSS. En su es­tru­c­tu­ra, este editor se asemeja a su co­m­pe­ti­dor ope­nE­le­me­nt.

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 na­ve­ga­ción de archivos. La ca­ra­c­te­rí­s­ti­ca especial de este programa es que permite crear fá­ci­l­me­n­te páginas web con diseño web ada­p­ta­ti­vo para di­s­po­si­ti­vos móviles. Para ello cuenta, entre otras funciones, con el Brea­k­poi­nt Editor: con esta he­rra­mie­n­ta los di­se­ña­do­res web es­ta­ble­cen puntos en el CSS que de­te­r­mi­nan cómo cambia el diseño según el tamaño de la pantalla. Por supuesto, en Ro­c­ke­t­Ca­ke también es posible editar di­re­c­ta­me­n­te el código.

TOWeb

TOWeb de Lauyan Software sigue el mismo enfoque WYSIWYG que Ro­c­ke­t­Ca­ke. Los dos programas comparten una función similar para el diseño web ada­p­ta­ti­vo.

In­co­n­ve­nie­n­tes de la idea WYSIWYG

A primera vista, los editores WYSIWYG parecen la solución perfecta: incluso sin co­no­ci­mie­n­tos de HTML o de pro­gra­ma­ción es posible crear en el ordenador do­cu­me­n­tos web listos para publicar. Sin embargo, por di­fe­re­n­tes razones algunos usuarios prefieren recurrir a un editor como Notepad++, en el que escriben di­re­c­ta­me­n­te 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 in­tro­du­c­ción directa de código HTML u otros lenguajes de marcado esto no ocurre: quienes crean el contenido ven exac­ta­me­n­te lo que sucederá con el texto al co­m­pi­lar­lo. Por eso, algunos usuarios prefieren generar do­cu­me­n­tos para impresión o PDF con el lenguaje de macros TeX o con el paquete LaTeX, basado en dicho lenguaje. Ori­gi­na­l­me­n­te de­sa­rro­lla­do para trabajos cie­n­tí­fi­cos, TeX permite cumplir con pautas de formato muy precisas e integrar de forma correcta fórmulas ma­te­má­ti­cas o cie­n­tí­fi­cas en el texto.

• Problemas es­pe­cí­fi­cos de Internet y distintas vi­sua­li­za­cio­nes: 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: di­fe­re­n­tes sistemas y na­ve­ga­do­res muestran los co­n­te­ni­dos de forma distinta, y los di­s­po­si­ti­vos móviles ofrecen además otras variantes de vi­sua­li­za­ció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 di­se­ña­do­res suelen probar sus páginas en varios sistemas antes de pu­bli­car­las.

• Calidad del código: los editores WYSIWYG generan en segundo plano un código HTML, pero no siempre puede co­n­si­de­rar­se pro­fe­sio­nal o eficiente. En el pasado, muchos di­se­ña­do­res web cri­ti­ca­ban que este tipo de programas producía código fuente in­ne­ce­sa­ria­me­n­te complejo o con errores, lo que provocaba tiempos de carga más largos y problemas de vi­sua­li­za­ción.