Editores Web

Para crear una página web necesitas algún tipo de editor, que puede se un editor de texto simple o un editor con utilidades para hacer el trabajo más fácil

Editores para páginas web
Editores de código
Editores de código genéricos
Editores específicos para la web
Editores mixtos: visual + código
Editores visuales: drag and drop
¿Cuál elegir?

Editores para páginas web

Una página web está escrita como un documento de texto, eso si con algunos elementos especiales (etiquetas o marcas) para indicar donde insertar imágenes, vídeos o enlaces o elementos de maquetación y formato.

Por esto un simple editor de textos es suficiente para construir una página web., el mismo Notepad en windows o Vim en linux.

Pero memorizar todas las etiquetas de HTML o las propiedades de los estilos CSS no es fácil ni productivo. Por eso es recomendable utilizar algún programa que incorpore facilitdades para escribir ls páginas: los editores web

Podríamos agrupar estos programas editores para crear las páginas en tres grandes grupos:

editores de código (genéricos o específicos web),
editores visuales
editores mixtos

Estas categorías se diferencian en la manera en la que escribimos el código y el soporte de lenguajes que ofrece.

Esos programas pueden funcionar a la manera más tradicional: instalados en el ordenador y ejecutándose en local, programas desktop. Pero también podemos encontrar otros que que funcionan en la red, online, sin necesidad de descargarlos e instalarlos en tu ordenador.

Yo aconsejo usar programas que se ejecuten en tu ordenador de trabajo, tener los archivos en tu ordenador te facilita enormemente el desarrollo y mantenimiento del sitio web.

Editores de código

Son editores de texto con ayudas destinadas a facilitar la escritura de código en diferentes lenguajes de programación. Los hay genéricos para múltiples lenguajes y específicos orientados a los lenguajes usados en la web fundamentalmente HTML, CSS y Javascript, aunque pueden ofrecer otros menos usados como Python o Go.

Con estos editores las páginas web se crean escribiendo el contenido del documento en el lenguaje de que se trate, como en cualquier editor de textos. Pero cuando lo uses verás que este tipo de editores ofrecen herramientas auxiliares, como puedan ser botones para insertar código de determinados elementos sin apenas tener que escribir, como tablas, imágenes, formularios, etc. Además suelen incorporar alguna referencia del lenguaje, ayudas en línea para completar las etiquetas o para consultar su uso (ayuda contextual). Pueden ofrecer formateo automático (tabulaciones), cierre automático de etiquetas, paréntesis, comillas. Coloreado del código para diferenciar palabras clave del lenguaje del contenido. Y algunos incluyen depuradores para localizar errores en programas.

En suma, son utilidades que permiten editar un programa o una página web trabajando en modo texto, pero escribiendo lo mínimo y sin tener que memorizar todas las reglas del lenguaje que estés utilizando.

En el caso de editores específicos para web, cuando queremos ver como va la página que estamos editando, debemos acudir a un explorador, bien sea uno externo, Firefox, Chrome, IExplore, o uno incorporado si poseen visión previa.

Existen innumerables opciones tanto gratuitos como de pago (estos suelen tener versión de prueba). En estas listas tienes algunos de ellos, pero te aconsejo una búsqueda en Google y que pruebes el que mejor se adapte a tu estilo de trabajo.

Editores de código genéricos

Estos editores están orientados a varios lenguajes, tanto de programación como descriptivos o de marcas. El uso de estos editores es recomendable si además de desarrollar páginas web creas o editas programas en otros lenguajes de propósito general como Java o C.

Sublime Text: Se trata de un editor genérico con múltiples añadidos que permiten trabajar en una gran cantidad de lenguajes y entornos. Posee un plugin para integrar Git. Es semigratuito es decir, puedes bajarlo y utilizarlo, pero al cabo de unas semanas te puede aparecer la ventana indicando que debes comprar una licencia, pero si no lo haces el programa sigue funcionando correctamente
Notepad++: Es un editor de texto y editor de código fuente para usar bajo Windows. Admite alrededor de 80 lenguajes de programación con resaltado de sintaxis y plegado de código. Permite trabajar con múltiples archivos abiertos en una sola ventana, gracias a su interfaz de edición con pestañas. Notepad ++ se distribuye como software gratuito y puedes descargarlo en la web de Notepad ++
Visual Studio Code: Un editor de código fuente ligero pero potente disponible para Windows, macOS y Linux. Viene con soporte incorporado para JavaScript, TypeScript y Node.js y tiene un rico ecosistema de extensiones para diferentes lenguajes de programación como C ++, C #, Java, Python, PHP, Go y descriptivos como HTML o CSS. Puedes ver más y descargarlo en su web
Netbeans: NetBeans es un Entorno de Desarrollo Integrado (IDE) de código abierto y gratuito para desarrollar aplicaciones en Java, PHP, C ++ y otros lenguajes de programación, así como lenguajes de la web como HTML5 o CSS. Es una plataforma extensible mediante plugins para aumentar los lenguajes soportados. Se trata de un producto multiplataforma que puede usarse tanto en Windows como Mac o Linux.
Komodo IDE: Existen dos ramas de este producto, Komodo Edit y Komodo IDE. El primero es un editor de código simple con ayudas, mientras que el IDE es un completo entorno de desarrollo con múltiples utilidades incorporadas como debug, control de versiones y otras. Es una plataforma extensible con soporte para una gran cantidad de lenguajes. Es gratuita pero para descargarla debes registrarte en la web de ActiveState. Es gratuito pero ofrece opciones de valor añadido que son de pago.

Editores específicos para web

Se trata de editores de texto como los genéricos pero enfocados a los lenguajes más propios de la web como HTML, CSS, Javascirpt y PHP como mínimo. Aparte de las ayudas para código, suelen incluir un cliente FTP, sistemas de sincronización del entorno local con la versión en el servidor remoto, vista previa de páginas entre otras utilidades.

Brackets: Se trata de un moderno editor de texto bastante ligero, pero potente. Cuenta con suficientes ayudas visuales durante la edición para facilitar la creación del código. Provee visión previa en tiempo real mientras edita el código CSS o HTML Se pueden ampliar sus utilidades mediante el uso de extensiones. Es gratuito.
Aptana: Un entorno de desarrollo integrado de software libre basado en Eclipse que puede funcionar bajo Windows, Mac y Linux. Está enfocado a la web y por tanto soporta lenguajes como: PHP, Python, Ruby, CSS, Ajax, HTML, Javascript además de su propio cliente FTP. Tiene la posibilidad de incluir complementos para nuevos lenguajes y funcionalidades. Es un software de código abierto gratis.
WebStorm: Otro entorno de desarrollo en este caso está muy enfocado a Javascirpt y su entorno (onde, react y otros). Por supuesto también soporta HTML y CSS. Tiene seguimiento de versiones, útil para trabajo colaborativo y ampliable mediante plugins o módulos. Ojo: se trata de un producto de pago.

Editores mixtos: visual + código

Son los editores en los que puedes trabajar tanto en modo código como en modo visual . Cuando aparecieron se les llamó editores WYSIWYG, iniciales de las palabras inglesas What You See Is What You Get, o en castellano, lo que ves es lo que obtienes. Fueron las primeras aplicaciones que permitieron crear páginas web sin necesidad de editar código, o casi, y por tanto podían usarse con un mínimo conocimiento de HTML. La edición se realizaba directamente en un documento similar al que se vería en el navegador. Pero desde entonces (años 90) ha pasado mucho tiempo, y han sido sustituidos por los 100% visuales tipo arrastrar y soltar, aunque sin perder la opción de editar código.

Para utilizar los diseños responsive (auto adaptables a cualquier pantalla) hoy día la edición visual no es suficiente y suele ser necesario acudir también a la edición de código. Pero a cambio tienes mucho control sobre la página, sabes como funciona y el mantenimiento y modificaciones son sencillos.

En estos programas puedes trabajar en una ventana muy similar a la que se verá en el navegador. Esta ventana mostrará la página que estas creando. Así puedes añadirle tablas, imágenes, formularios, capas, escribir texto y demás elementos HTML mediante botones o menús sin escribir código. Ves de inmediato como quedará en la página real y las propiedades de los elementos (colores, formatos, tipografía) se ajustan mediante menús contextuales.

Además ofrecen un completo editor de código con ayudas y facilidades de manera que puedes trabajar en tu página editando el código directamente, como en un editor orientado a código, sin ayuda visual. De ahí lo de editores mixtos: son editores optimizados tanto para la edición visual como la la edición de código. La mayoría de estos editores son de pago, aunque pueden ofrecer precios especiales para estudiantes.

NVU: Es un editor ya anticuado, que fue sustituido por Kompozer (no hay diferencias entre ellos), pero que puede ser útil para iniciarse en la edición de páginas web. Es cómodo y muy sencillo de utilizar. En esta web tienes un tutoriales y puedes descargarlo.
Dreamweaver: Este es un producto de pago. Fue uno de los primeros editores WYSIWYG. Actualmente mantiene esa vertiente pero se utiliza más su faceta de editor de código, de manera que puedes editar las páginas web en modo texto, pero también en modo visual. Es un entorno integrado con soporte para FTP, sincronización del sitio, uso de plantillas y edición responsive (usa la plataforma Bootstrap). Fue y sigue siendo el mejor editor web disponible, insisto, como producto de pago.
PineGrow: También es de pago. Es otro editor web con un gran soporte para la edición de páginas en vivo (drag and drop). Posee facilidades para la creación de código y temas destinado a páginas de Wordpress. Es una herramienta que se auto define como enfocada a creadores de páginas web profesionales. Está enfocada la edición de código pero con un fuerte soporte para la edición visual. Es un producto comprable a Dreamweaver.
Pingendo: Otro editor fundamentalmente visual con soporte estilo arrastrar y soltar, lo que permite crea una página web a partir de elementos visuales. No obstante ofrece un potente editor de código que permite personalizar, modificar y afinar el diseño de cualquier sitio web. Se pueden crear pa´páginas desde cero o usar plantillas prediseñadas. Para la publicación de las páginas utiliza la plataforma NetliFy. Realmente es un híbrido entre un editor web local y un editor online. Es un producto de pago
BlueGriffon: BlueGriffon es un editor de páginas web WYSIWYG. Está basado en Gecko, el motor que bajo el que corre Firefox, y utiliza XULRunner, el entorno de tiempo de ejecución para Gecko. Aunque mayormente libre y de código abierto, para poder usarlo de manera práctica es indispensable comprar algunas extensiones como el editor CSS o la que permite la visión previa en pantalla completa, incluso el manual se debe comprar. O sea, queda clasificado como de pago.

Editores visuales: drag and drop

Los editores tipo Arrastrar y Soltar (drag and drop) son editores en los que trabajas de manera totalmente visual. Son la evolución de los llamados editores WYSIWYG, iniciales de las palabras inglesas What You See Is What You Get, o en castellano, lo que ves es lo que obtienes, un sistema que permite crear páginas web sin necesidad de editar código, y por tanto se pueden usar con un mínimo conocimiento de HTML

En este tipo de aplicaciones se edita directamente sobre la página tal como se verá en el navegador. Vas añadiendo al documento web los elementos disponibles como si fueran piezas de un puzzle, de ahí lo de arrastrar y soltar: se selecciona un elemento (por ejemplo una imagen o un bloque) se arrastra con el ratón y se suelta en la parte de la página donde quieras que aparezca. Luego con menús contextuales o ventanas adicionales se modifican los atributos del elemento que hayas situado o tengas seleccionado.

Con estos editores es poco probable que se edite el código a mano. Todo el código es escrito directamente por la aplicación. También lo encontraras con la denominación inglesa Website Buiders.

Aunque están orientados a la edición visual, pueden tener opción para editar directamente parte del código HTML o los estilos CSS. Y algunos permiten crear no solo páginas individuales, sino sitios completos, es decir, páginas interrelacionadas. Habitualmente se comienza con una plantilla que se va modificando para ajustarla a tus deseos.

Lo más habitual es que estas aplicaciones sean ofertadas por empresas dedicadas a alojar sitios web, de manera que las páginas creadas quedan almacenadas en ese servidor y quedas ligado a esa empresa. Es una opción adecuada para crear páginas de forma rápida y poco personalizadas.

Bootstrap Studio (desktop): Es una aplicación de escritorio con licencia comercial. Está totalmente enfocada al diseño visual, pero permite edición de código. Se basa en el framework Bootstrap: una plataforma que contiene estilos y elementos web prediseñados para la construcción rápida de páginas web adaptativas (responsive), es decir, adaptados a la pantalla con la que se vean. Ofrece plantillas para iniciar el diseño y permite algo de edición en cuanto a CSS. De este tipo de aplicaciones es quizás de las pocas que merecen la pena.
Wix (online): Aplicación online. Como en la mayoría de apps de este tipo el diseño que realices queda en los servidores de Wix, donde debes alojar tu sitio. No es posible exportar a otro servidor. Pero el editor al menos es fácil de manejar.
Webnode (online): Más de lo mismo, aplicación para crear una web con un editor drag-and-drop partiendo de una plantilla a elegir de su enrome oferta. Con el uso de la app tienes un alojamiento e incluso puedes registrar con ellos el dominio. Tampoco es posible exportar tu sitio web.

¿Cual elegir?

Prueba estilos (visual y código) y elige aquel en el que trabajes más a gusto, pero no olvides que si quieres una página bien hecha deberás ser capaz de leer, entender y modificar su código HTML. Efectivamente más tarde o más temprano te verás editando directamente HTML, CSS o incluso Javascript, incluso si la tarea principal la haces con un editor visual. El mantenimiento del sitio te va a llevar a corregir o personalizar aspectos de las páginas, por ejemplo.
Elijas el estilo que elijas busca un programa que te permita gestionar todo el sitio, incluyendo detalles como

Comprobación y actualización de enlaces.
Comprobación de ortografía.
Comprobación de sintaxis.
Cambio de texto en múltiples archivos.
Facilidades para editar Javascript y PHP.
Editor de hojas de estilo CSS.

Entre los editores WYSIWYG el más veterano es Dreamweaver, con facilidades para el diseño responsive (adaptativo). Es comercial y no es barato.

Aquí también tienes un pequeño tutor del editor NVU (posteriormente Kompozer). Es gratis, pero está descontinuado, para quien está comenzando con HTML y como guía para usar este tipo de programas le puede ser útil. Pero insisto está bastante antiguo y no crea HTML moderno.