EDITORES HTML

AMILCAR CANAZA SALAS

HERRAMIENTAS PARA EL DISEÑO WEB

IntroducciónEditores de texto planoEditores de texto específicos para HTML y CS

SEditores de texto con ventana de vista previaEditores WYSIWYGElegir el Editor para diseñarEjemplos de Editores por tipo

Introducción

Hoy en día ya no es tan útil o provechoso, diseñar una pagina web compleja en un editor de texto plano cualquiera como el bloc de notas, sin embargo cuando se trata de aprender HTML, XHTML y/o CSS todos empiezan con este rudimentario método por la sencilla razón de que es la mejor manera de conocer a fondo los lenguajes de diseño y programación.

Introducción

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.

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

Editores de texto plano y navegador

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.

Editores de texto especializados en HTML Y CSS

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 WYSIWYG

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.

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.

Algunos editores de texto especializados

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.

Editores de texto con ventanas de vista previa

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. 

Editores de texto con ventanas de vista previa

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

Editores WYSIWYG

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.

Editores WYSIWYG

AmayaMultiplataformaÚ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.