Editores para páginas web

Una página web está escrita como un documetno de texto, eso si con algunos elementos especiales (etiquetas o marcas) para indicar donde insertar imágenes, videos o enlaces o elementos de maquetación y formato. Por lo tanto un simple editor de textos es suficiente para construir una página web. Pero memorizar todas las etiquetas de HTML o de las propiedades de los estilos CSS es dificil. Por eso es recomendable utilizar algún programa que te ayude en esta tarea.

Podríamos agrupar estos programs editores para crear las páginas en tres grandes grupos: editores de código, editores visuales y editores mixtos. Esots 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 programas que se ejecuten en tu ordenador de trabajo, tener los archivos en tu ordenador te facilita enormemente su gestión.

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 multiples lenguajes y específicos orientados a los lenguajes usados en la web fundamentalmente HTML, CSS y Javasript, 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 atuomá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 estes utilizando.

En el caso de editores específícos 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.

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 on multiples añadidos que permiten trabajar en una gran cantidad de lenguajes y entornos. Posee un plugin para inbtegrar 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 softaware 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, asi como lenguajes de la webn como HTML5 o CSS. Es una plataforma extensible mediante plugins para aumentar los lenguajes sooprtados. 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 multiples utilidades incorporadas como debug, control de versiones y otras. Es una paltaforma extensible con soporte pra una gran cantidad de lenguajes. Es gratuita pero para descargarla debes registrarte en la web de ActiveState. Es grautito pero ofrece opciones de valor añadido que son de pago.

 

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 softeware de código abierto gratis.

WebStorm

Otro entorno de desarrollo en ete caso está muy enfocado a Javascript y su entorno (node, react y otros). Por supeusto también soporta HTML y CSS. Tiene seguimiento de versiones, util para trabajo colaborativo y ampliable mediante plugins o módulos. Ojo: se trata de un producto de pago.

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 posí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 ipo 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. Asi puedes añadirle tablas, imágenes, formularios, capas, escribir texto y demás elementos HTML mediante botones o menus 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 menus 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 difrencias 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 tutorial y puedes descargarlo.

Dreamweaver

Este es un producto de pago. Fue uno de los primeros editores WYSIWYG. Actualmente mantiene esa vertiente pero se utliza 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

Tambien es de pago. Es otro editor web con un gran soporte para la edición d e páginas en vivo (drag and drop). Posee facilidades para la creación de codigo y temas destinado a páginas de Wordpress. Es una herramienta que se autodifene como enfocada a creadores de pa´gians 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´gians 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 editorweb 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 utioiza 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.

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 directametne 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 modificándo para ajustarla a tus deseos.

Lo más habitual es que estas apllicaciones 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á totalmetne enfocada al diseño visua, pero permite edición de código. Se basa en el framework Bootstrap: una plataforma que contiene estilos y elementos web prediseñandos 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)

Apliació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 editro 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 registar con ellos el dominio. Tampoco es posible exportar tu sitio web.

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.