Herramientas para diseñadores web: Editores HTML

Si bien hoy en día continúa la discusión acerca de la conveniencia o no de emplear editores WYSISYG o no, sin entrar en hacer argumentaciones sobre ello, pasaremos a describir una de las herramientas indispensables para todo diseñador web: los editores HTML.

Algunos diseñadores prefieren seguir escribiendo el código directamente sobre un editor de texto plano, al estilo del Bloc de Notas de Microsoft, otros prefieren los editores de texto especializados en lenguajes web y de programación, otros prefieren los editores de texto con ventana de vista previa, mientras que otros emplean la opción más avanzada, que son los editores WYSIWYG.

Los primeros generan el archivo HTML, las hojas de estilo y los scripts sobre una o varias hojas de texto plano y valoran los resultados directamente sobre el o los navegadores. Este método es el más primitivo, aunque no ha perdido vigencia. Durante el aprendizaje de los lenguajes de diseño web y de programación, todos los centros de enseñanza inician el estudio de HTML, XHTML y CSS con este rudimentario método. Y la razón es que es el mejor método para conocer a fondo los lenguajes de diseño y programación. La generación de código a partir de editores de texto plano implica necesariamente la comprensión plena del funcionamiento del sistema.

El segundo grupo de diseñadores emplean editores de texto, pero que tienen algunas funciones especializadas en los lenguajes de diseño web y programación, como autocompletado de etiquetas de cierre, coloreado de acuerdo a la sintaxis del lenguaje, posibilidad de seleccionar las etiquetas de una barra de herramientas y otras muy variadas. Por ejemplo, cuando se escribe una línea de código, ésta no adquiere los diferentes colores correspondientes a la sintaxis hasta que no está correctamente escrita. Para visualizar los resultados, emplean uno o más navegadores, a los que, tras cada cambio, se le hace click en el botón “refrescar” para ver los mismos.

El grupo de diseñadores que optan por la tercera opción, cuenta con una herramienta en el editor que hace las veces de navegador, por lo que pueden ir viendo los cambios que van efectuando a medida que los van haciendo.

Los editores WYSIWYG son algo bastante más complejo, y consiste en  (tal como indica la sigla que les da nombre: What You See Is What You Get – Lo que ves es lo que obtienes) la creación de páginas web arrastrando y colocando, completado por elementos que permiten modificar los atributos de los elementos que se van colocando.

Editores de texto plano y navegador

Los diseñadores web que emplean esta opción desechan la ayuda que constituye el software especializado. No tiene muchas ventajas sobre el resto de los métodos, solo la certeza de que quienes lo hacen tienen un pleno dominio de los diferentes lenguajes. Como método de aprendizaje, seguramente sea el mejor, ya que el conocimiento del lenguaje deja de ser una opción para ser absolutamente obligatorio. Siempre, y no solo para quienes optan por este sistema de trabajo, es necesario contar con varios navegadores, siendo el mínimo recomendado de tres, ya que las diferencias en la interpretación del código por parte de los navegadores, obliga a visualizar las páginas en más de un navegador.

Editores de texto especializados en HTML y CSS

El desarrollo del diseño web y el creciente número de diseñadores ha planteado la posibilidad de crear herramientas especializadas en la escritura de códigos. La cantidad de editores de este tipo existentes es enorme, siendo en su mayoría gratuitos, aunque algunos son de pago o forman parte de paquetes de software para diseñadores web. Otra característica que los diferencia a unos de otros, es la especialización en los diferentes lenguajes. Algunos editores tienen soporte casi exclusivamente para HTML, aun cuando colorean varios lenguajes más, mientras que otros editores tienen herramientas especiales para diferentes tipos de lenguajes, incluyendo los lenguajes de programación.

Editores de texto especializados con ventana de vista previa

Comparten muchas de las características descriptas para el grupo de editores anteriores, con el elemento distintivo de poseer entre sus herramientas un visor en tiempo real (generalmente en la misma ventana que se escribe el código) que permite al diseñador web observar el resultado de lo que se encuentra escribiendo sin tener que ir a la ventana del navegador y refrescar la página.

Editores WYSIWIG

También cuenta entre sus herramientas la edición de los códigos sobre texto plano, aunque su mejor herramienta es la ventana donde el diseñador realiza las modificaciones arrastrando y soltando con el ratón, en un sistema similar al que se emplea en procesadores de texto como Microsoft Word o Writer.

Algunos de estos editores son de manejo tan sencillo, que para muchas de las tareas propias del diseño de páginas web no se requiere conocimiento de lenguaje HTML. Sin embargo, a la hora de darle atributos a los diferentes componentes de la página, el diseñador deberá contar con conocimientos básicos de HTML y CSS.

Elección del editor HTML

Cada diseñador debe desarrollar su método de trabajo, aquel con el que se sienta más cómodo. No existen recetas preestablecidas y hay tantas formas de trabajar como diseñadores. Lo mismo sucede con el software que se ha de seleccionar. En una primera instancia, el diseñador debe elegir el método que empleará y luego probar herramientas hasta encontrar una que lo satisfaga.

A continuación damos las descripciones de algunos de los programas más conocidos, pero solo son algunos de una muy amplia gama.

Algunos editores de texto especializados

Bluefish

• Desarrollado inicialmente para Linux, en la actualidad hay versiones para otros sistemas operativos como Solaris, MacOS-X y otros, aunque no existe una versión para Microsoft Windows.
• La última versión estable es la 1.07 de marzo de 2008.
• Soporta varios archivos abiertos a la vez
• Marcado de sintaxis personalizable para HTML, PHP, JSP, SQL, XML, CSS, Javascript, Python, Perl, Pascal y otros.
• Asistentes para creación de documentos.
• Asistentes para la creación de tablas y marcos.
• Soporta diferentes juegos de caracteres.
• Diálogos para la inserción de imágenes.
• Traducido a 22 idiomas, entre los que se encuentra el español.
• Gratuito.
• Licencia GPL.

Weaverslave

• Desarrollado para Windows, es compatible con todas las versiones de este sistema operativo desde Windows 95.
• Totalmente portable
• Última versión estable: 3.9.18 de noviembre de 2005.
• Puede trabajar con varios archivos a la vez.
• Marcado con colores de sintaxis para DHTML, CSS, JS, PHP (4 y 5), MySQL, PERL, C, C++ y otros.
• Ventana de colores.
• Inspector de etiquetas.
• Navegador de archivos e imágenes.
• Traducido a varios idiomas (incluidos) entre los que está el español.
• Gratuito.
• Software propietario.

Editores de texto con ventanas de vista previa

Aptana

• Windows, MacOS-X y Linux.
• Cliente FTP.
• Posibilidad de instalar un plug-in que permite la escritura en el lado del servidor.
• Panel de vista previa Firefox e Internet Explorer.
• Soporte principal para HTML, XHTML y CSS, aunque también cuenta con herramientas para  Php, Python, Ruby, CSS, Ajax, HTML y Adobe AIR.
• Última versión: 2.0.2 de 2009.
• Marcado de sintaxis por colores.
• Una muy variada serie de herramientas y diálogos.
• Gratuito.
• GNU / GPL.

Arachnophilia

• Unix, Linux, MacOS-X y Windows 
• Última versión: 5.4 (Octubre de 2009) 
• Ventana de vista previa. 
• HTML, CSS, JS, C++, CGI, PERL, Java y otros. 
• Marcado de sintaxis en colores. 
• Gratuito. 
• Software propietario. 

HTML-kit

• Este software solo es compatible con Microsoft Windows 95 en adelante. 
• Ventana de vista previa múltiple. 
• Validación de código. 
• Cliente FTP.
• HTML, XHTML, XML, CSS, XSL, PHP, ASP, VB, C/C++, SQL, Java, Javascript, Delphi, Perl
• Sugerencias y sistema de corrección de errores.
• Gratis.
• Software propietario.

Editores WYSIWYG

Adobe Dreamweaver

• Versiones para Windows y MacOS-X.
• Última versión estable CS4 (10.0) de 2008.
• Se le considera el editor más potente, pero también el más pesado (354 MB antes de instalar) y el de mayores requerimientos de hardware.
• Requerimientos mínimos: procesador de más de 1 GHz, Windows XP o superior o Mac OS X v10.4.11–10.5.4, 512 MB de RAM, 1 GB de espacio libre en el disco, pantalla 1280 x 764 con tarjeta de 16 bits, DVD-ROM, banda ancha para servicios en línea.
• Ventana de visualización.
• Sugerencias de código.
• Herramientas avanzadas para imágenes de Photoshop (PSD).
• Utiliza CSS.
• Datos dinámicos (sencillos) sin empleo de XML ni bases de datos.
• Diseño sin escritura de código (aunque el usuario puede modificar el código manualmente).
• Alto costo (399 USD)
• Software propietario.

NVU

• Multiplataforma
• Última versión estable: 1.0 de junio de 2005. En la actualidad se ha abandonado su desarrollo.
• Cliente FTP.
• Edición de código fuente.
• Marcos, formularios, tablas, plantillas de diseño, hojas de estilo CSS, etc.
• Gratis.
• MPL / GPL / LGPL.

Amaya

• Multiplataforma
• Última versión:  11.1 de enero de 2009.
• Navegador.
• Genera páginas HTML 4.01, XHTML 1.0, XHTML Basic, XHTML 1.1, HTTP 1.1, MathML 2.0, muchas características CSS 2.
• Renderizado de imágenes.
• Herramientas para imágenes vectoriales (SVG).
• Edición WYSIWYG.
• Gratuito.
• Licencia W3C.