1. HERRAMIENTAS PARA EL
DISEÑO WEB
EDITORES HTML
AMILCAR CANAZA SALAS

2.  Introducción
 Editores de texto plano
 Editores de texto específicos para HTML y CSS
 Editores de texto con ventana de vista previa
 Editores WYSIWYG
 Elegir el Editor para diseñar
 Ejemplos de Editores por tipo

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

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

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

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

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

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

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

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

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

12. 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, Javascrip
t, 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.

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

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

15. 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++, CG
I, PERL, Java y otros.
 Marcado de sintaxis en
colores.
 Gratuito.
 Software propietario.

16. 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, X
SL, PHP, ASP, VB, C/C++, SQ
L, Java, Javascript, Delphi, Pe
rl
 Sugerencias y sistema de
corrección de errores.
 Gratis.
 Software propietario.

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

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

19. Editores WYSIWYG
 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.